diff --git a/.prettierrc.js b/.prettierrc.js
index f9345b376..076151234 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -6,10 +6,10 @@ module.exports = {
     singleQuote: true,
     trailingComma: 'all',
     bracketSpacing: true,
-    jsxBracketSameLine: true,
+    bracketSameLine: true,
     arrowParens: 'always',
     requirePragma: false,
     insertPragma: false,
     proseWrap: 'always',
-    endOfLine:"auto",
+    endOfLine: 'auto',
 };
diff --git a/docker-compose.yml b/docker-compose.yml
index 6f0cb6099..eb94fc7b9 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -11,6 +11,7 @@ services:
       - "5001:5000"
     volumes:
       - ./:/ng-app
+      - node_modules_data:/ng-app/node_modules
     networks:
       - forus-network
 
@@ -32,4 +33,8 @@ services:
 networks:
   forus-network:
     name: forus-network
-    driver: bridge
\ No newline at end of file
+    driver: bridge
+
+volumes:
+  node_modules_data:
+    driver: local
diff --git a/package-lock.json b/package-lock.json
index 1ad6f15e3..5892601c7 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,7 +18,7 @@
         "@mdi/js": "^7.1.96",
         "@react-google-maps/api": "^2.20.3",
         "@uiw/react-color": "^2.4.1",
-        "aws-rum-web": "^1.19.0",
+        "aws-rum-web": "^2.0.0",
         "chart.js": "^4.4.1",
         "clean-webpack-plugin": "^4.0.0",
         "date-fns": "^4.1.0",
@@ -139,52 +139,30 @@
         "ajv": ">=8"
       }
     },
-    "node_modules/@aws-crypto/crc32": {
+    "node_modules/@aws-crypto/sha256-js": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@aws-crypto/crc32/-/crc32-3.0.0.tgz",
-      "integrity": "sha512-IzSgsrxUcsrejQbPVilIKy16kAT52EwB6zSaI+M3xxIhKh5+aldEyvI+z6erM7TCLB2BJsFrtHjp6/4/sr+3dA==",
+      "resolved": "https://registry.npmjs.org/@aws-crypto/sha256-js/-/sha256-js-3.0.0.tgz",
+      "integrity": "sha512-PnNN7os0+yd1XvXAy23CFOmTbMaDxgxXtTKHybrJ39Y8kGzBATgBFibWJKH6BhytLI/Zyszs87xCOBNyBig6vQ==",
+      "license": "Apache-2.0",
       "dependencies": {
         "@aws-crypto/util": "^3.0.0",
         "@aws-sdk/types": "^3.222.0",
         "tslib": "^1.11.1"
       }
     },
-    "node_modules/@aws-crypto/crc32/node_modules/@aws-crypto/util": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/@aws-crypto/util/-/util-3.0.0.tgz",
-      "integrity": "sha512-2OJlpeJpCR48CC8r+uKVChzs9Iungj9wkZrl8Z041DWEWvyIHILYKCPNzJghKsivj+S3mLo6BVc7mBNzdxA46w==",
-      "dependencies": {
-        "@aws-sdk/types": "^3.222.0",
-        "@aws-sdk/util-utf8-browser": "^3.0.0",
-        "tslib": "^1.11.1"
-      }
-    },
-    "node_modules/@aws-crypto/crc32/node_modules/tslib": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-    },
-    "node_modules/@aws-crypto/sha256-js": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@aws-crypto/sha256-js/-/sha256-js-2.0.2.tgz",
-      "integrity": "sha512-iXLdKH19qPmIC73fVCrHWCSYjN/sxaAvZ3jNNyw6FclmHyjLKg0f69WlC9KTnyElxCR5MO9SKaG00VwlJwyAkQ==",
-      "dependencies": {
-        "@aws-crypto/util": "^2.0.2",
-        "@aws-sdk/types": "^3.110.0",
-        "tslib": "^1.11.1"
-      }
-    },
     "node_modules/@aws-crypto/sha256-js/node_modules/tslib": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "license": "0BSD"
     },
     "node_modules/@aws-crypto/util": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@aws-crypto/util/-/util-2.0.2.tgz",
-      "integrity": "sha512-Lgu5v/0e/BcrZ5m/IWqzPUf3UYFTy/PpeED+uc9SWUR1iZQL8XXbGQg10UfllwwBryO3hFF5dizK+78aoXC1eA==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@aws-crypto/util/-/util-3.0.0.tgz",
+      "integrity": "sha512-2OJlpeJpCR48CC8r+uKVChzs9Iungj9wkZrl8Z041DWEWvyIHILYKCPNzJghKsivj+S3mLo6BVc7mBNzdxA46w==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "@aws-sdk/types": "^3.110.0",
+        "@aws-sdk/types": "^3.222.0",
         "@aws-sdk/util-utf8-browser": "^3.0.0",
         "tslib": "^1.11.1"
       }
@@ -192,30 +170,8 @@
     "node_modules/@aws-crypto/util/node_modules/tslib": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-    },
-    "node_modules/@aws-sdk/fetch-http-handler": {
-      "version": "3.374.0",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/fetch-http-handler/-/fetch-http-handler-3.374.0.tgz",
-      "integrity": "sha512-Xt+4F6tGi/q9Z32kLo8SSm9krLlCY2oTLxCfP3/1SKY2wqWKHjAgpLmPD+GW7fdMjAwhDqzW5ZhcSmvHNvoD/w==",
-      "deprecated": "This package has moved to @smithy/fetch-http-handler",
-      "dependencies": {
-        "@smithy/fetch-http-handler": "^1.0.1",
-        "tslib": "^2.5.0"
-      }
-    },
-    "node_modules/@aws-sdk/protocol-http": {
-      "version": "3.374.0",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/protocol-http/-/protocol-http-3.374.0.tgz",
-      "integrity": "sha512-9WpRUbINdGroV3HiZZIBoJvL2ndoWk39OfwxWs2otxByppJZNN14bg/lvCx5e8ggHUti7IBk5rb0nqQZ4m05pg==",
-      "deprecated": "This package has moved to @smithy/protocol-http",
-      "dependencies": {
-        "@smithy/protocol-http": "^1.1.0",
-        "tslib": "^2.5.0"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "license": "0BSD"
     },
     "node_modules/@aws-sdk/querystring-builder": {
       "version": "3.374.0",
@@ -230,48 +186,24 @@
         "node": ">=14.0.0"
       }
     },
-    "node_modules/@aws-sdk/signature-v4": {
-      "version": "3.374.0",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/signature-v4/-/signature-v4-3.374.0.tgz",
-      "integrity": "sha512-2xLJvSdzcZZAg0lsDLUAuSQuihzK0dcxIK7WmfuJeF7DGKJFmp9czQmz5f3qiDz6IDQzvgK1M9vtJSVCslJbyQ==",
-      "deprecated": "This package has moved to @smithy/signature-v4",
-      "dependencies": {
-        "@smithy/signature-v4": "^1.0.1",
-        "tslib": "^2.5.0"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
     "node_modules/@aws-sdk/types": {
-      "version": "3.649.0",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/types/-/types-3.649.0.tgz",
-      "integrity": "sha512-PuPw8RysbhJNlaD2d/PzOTf8sbf4Dsn2b7hwyGh7YVG3S75yTpxSAZxrnhKsz9fStgqFmnw/jUfV/G+uQAeTVw==",
+      "version": "3.973.1",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/types/-/types-3.973.1.tgz",
+      "integrity": "sha512-DwHBiMNOB468JiX6+i34c+THsKHErYUdNQ3HexeXZvVn4zouLjgaS4FejiGSi2HyBuzuyHg7SuOPmjSvoU9NRg==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "@smithy/types": "^3.4.0",
+        "@smithy/types": "^4.12.0",
         "tslib": "^2.6.2"
       },
       "engines": {
-        "node": ">=16.0.0"
-      }
-    },
-    "node_modules/@aws-sdk/util-hex-encoding": {
-      "version": "3.374.0",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/util-hex-encoding/-/util-hex-encoding-3.374.0.tgz",
-      "integrity": "sha512-14X7MDYCFle2Cuq0/Hvz2CHQoYVeoKKBY2Uf+wn0lKnKU+f0K81xRObUM/A7bLmZX4jFRk83gyE8Rj3BOqBdfA==",
-      "deprecated": "This package has moved to @smithy/util-hex-encoding",
-      "dependencies": {
-        "@smithy/util-hex-encoding": "^1.0.1",
-        "tslib": "^2.5.0"
-      },
-      "engines": {
-        "node": ">=14.0.0"
+        "node": ">=20.0.0"
       }
     },
     "node_modules/@aws-sdk/util-utf8-browser": {
       "version": "3.259.0",
       "resolved": "https://registry.npmjs.org/@aws-sdk/util-utf8-browser/-/util-utf8-browser-3.259.0.tgz",
       "integrity": "sha512-UvFa/vR+e19XookZF8RzFZBrw2EUkQWxiBW0yYQAhvk3C+QVGl0H3ouca8LDBlBfQKXwmW3huo/59H8rwb1wJw==",
+      "license": "Apache-2.0",
       "dependencies": {
         "tslib": "^2.3.1"
       }
@@ -2798,83 +2730,92 @@
       "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
       "dev": true
     },
-    "node_modules/@smithy/eventstream-codec": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@smithy/eventstream-codec/-/eventstream-codec-1.1.0.tgz",
-      "integrity": "sha512-3tEbUb8t8an226jKB6V/Q2XU/J53lCwCzULuBPEaF4JjSh+FlCMp7TmogE/Aij5J9DwlsZ4VAD/IRDuQ/0ZtMw==",
+    "node_modules/@smithy/fetch-http-handler": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/@smithy/fetch-http-handler/-/fetch-http-handler-4.1.3.tgz",
+      "integrity": "sha512-6SxNltSncI8s689nvnzZQc/dPXcpHQ34KUj6gR/HBroytKOd/isMG3gJF/zBE1TBmTT18TXyzhg3O3SOOqGEhA==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "@aws-crypto/crc32": "3.0.0",
-        "@smithy/types": "^1.2.0",
-        "@smithy/util-hex-encoding": "^1.1.0",
-        "tslib": "^2.5.0"
+        "@smithy/protocol-http": "^4.1.8",
+        "@smithy/querystring-builder": "^3.0.11",
+        "@smithy/types": "^3.7.2",
+        "@smithy/util-base64": "^3.0.0",
+        "tslib": "^2.6.2"
       }
     },
-    "node_modules/@smithy/eventstream-codec/node_modules/@smithy/types": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@smithy/types/-/types-1.2.0.tgz",
-      "integrity": "sha512-z1r00TvBqF3dh4aHhya7nz1HhvCg4TRmw51fjMrh5do3h+ngSstt/yKlNbHeb9QxJmFbmN8KEVSWgb1bRvfEoA==",
+    "node_modules/@smithy/fetch-http-handler/node_modules/@smithy/querystring-builder": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@smithy/querystring-builder/-/querystring-builder-3.0.11.tgz",
+      "integrity": "sha512-u+5HV/9uJaeLj5XTb6+IEF/dokWWkEqJ0XiaRRogyREmKGUgZnNecLucADLdauWFKUNbQfulHFEZEdjwEBjXRg==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "tslib": "^2.5.0"
+        "@smithy/types": "^3.7.2",
+        "@smithy/util-uri-escape": "^3.0.0",
+        "tslib": "^2.6.2"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=16.0.0"
       }
     },
-    "node_modules/@smithy/fetch-http-handler": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@smithy/fetch-http-handler/-/fetch-http-handler-1.1.0.tgz",
-      "integrity": "sha512-N22C9R44u5WGlcY+Wuv8EXmCAq62wWwriRAuoczMEwAIjPbvHSthyPSLqI4S7kAST1j6niWg8kwpeJ3ReAv3xg==",
+    "node_modules/@smithy/fetch-http-handler/node_modules/@smithy/types": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/@smithy/types/-/types-3.7.2.tgz",
+      "integrity": "sha512-bNwBYYmN8Eh9RyjS1p2gW6MIhSO2rl7X9QeLM8iTdcGRP+eDiIWDt66c9IysCc22gefKszZv+ubV9qZc7hdESg==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "@smithy/protocol-http": "^1.2.0",
-        "@smithy/querystring-builder": "^1.1.0",
-        "@smithy/types": "^1.2.0",
-        "@smithy/util-base64": "^1.1.0",
-        "tslib": "^2.5.0"
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=16.0.0"
       }
     },
-    "node_modules/@smithy/fetch-http-handler/node_modules/@smithy/types": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@smithy/types/-/types-1.2.0.tgz",
-      "integrity": "sha512-z1r00TvBqF3dh4aHhya7nz1HhvCg4TRmw51fjMrh5do3h+ngSstt/yKlNbHeb9QxJmFbmN8KEVSWgb1bRvfEoA==",
+    "node_modules/@smithy/fetch-http-handler/node_modules/@smithy/util-uri-escape": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@smithy/util-uri-escape/-/util-uri-escape-3.0.0.tgz",
+      "integrity": "sha512-LqR7qYLgZTD7nWLBecUi4aqolw8Mhza9ArpNEQ881MJJIU2sE5iHCK6TdyqqzcDLy0OPe10IY4T8ctVdtynubg==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "tslib": "^2.5.0"
+        "tslib": "^2.6.2"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=16.0.0"
       }
     },
     "node_modules/@smithy/is-array-buffer": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@smithy/is-array-buffer/-/is-array-buffer-1.1.0.tgz",
-      "integrity": "sha512-twpQ/n+3OWZJ7Z+xu43MJErmhB/WO/mMTnqR6PwWQShvSJ/emx5d1N59LQZk6ZpTAeuRWrc+eHhkzTp9NFjNRQ==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@smithy/is-array-buffer/-/is-array-buffer-3.0.0.tgz",
+      "integrity": "sha512-+Fsu6Q6C4RSJiy81Y8eApjEB5gVtM+oFKTffg+jSuwtvomJJrhUJBu2zS8wjXSgH/g1MKEWrzyChTBe6clb5FQ==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "tslib": "^2.5.0"
+        "tslib": "^2.6.2"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=16.0.0"
       }
     },
     "node_modules/@smithy/protocol-http": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@smithy/protocol-http/-/protocol-http-1.2.0.tgz",
-      "integrity": "sha512-GfGfruksi3nXdFok5RhgtOnWe5f6BndzYfmEXISD+5gAGdayFGpjWu5pIqIweTudMtse20bGbc+7MFZXT1Tb8Q==",
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/@smithy/protocol-http/-/protocol-http-4.1.8.tgz",
+      "integrity": "sha512-hmgIAVyxw1LySOwkgMIUN0kjN8TG9Nc85LJeEmEE/cNEe2rkHDUWhnJf2gxcSRFLWsyqWsrZGw40ROjUogg+Iw==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "@smithy/types": "^1.2.0",
-        "tslib": "^2.5.0"
+        "@smithy/types": "^3.7.2",
+        "tslib": "^2.6.2"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=16.0.0"
       }
     },
     "node_modules/@smithy/protocol-http/node_modules/@smithy/types": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@smithy/types/-/types-1.2.0.tgz",
-      "integrity": "sha512-z1r00TvBqF3dh4aHhya7nz1HhvCg4TRmw51fjMrh5do3h+ngSstt/yKlNbHeb9QxJmFbmN8KEVSWgb1bRvfEoA==",
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/@smithy/types/-/types-3.7.2.tgz",
+      "integrity": "sha512-bNwBYYmN8Eh9RyjS1p2gW6MIhSO2rl7X9QeLM8iTdcGRP+eDiIWDt66c9IysCc22gefKszZv+ubV9qZc7hdESg==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "tslib": "^2.5.0"
+        "tslib": "^2.6.2"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=16.0.0"
       }
     },
     "node_modules/@smithy/querystring-builder": {
@@ -2902,38 +2843,41 @@
       }
     },
     "node_modules/@smithy/signature-v4": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@smithy/signature-v4/-/signature-v4-1.1.0.tgz",
-      "integrity": "sha512-fDo3m7YqXBs7neciOePPd/X9LPm5QLlDMdIC4m1H6dgNLnXfLMFNIxEfPyohGA8VW9Wn4X8lygnPSGxDZSmp0Q==",
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/@smithy/signature-v4/-/signature-v4-4.2.4.tgz",
+      "integrity": "sha512-5JWeMQYg81TgU4cG+OexAWdvDTs5JDdbEZx+Qr1iPbvo91QFGzjy0IkXAKaXUHqmKUJgSHK0ZxnCkgZpzkeNTA==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "@smithy/eventstream-codec": "^1.1.0",
-        "@smithy/is-array-buffer": "^1.1.0",
-        "@smithy/types": "^1.2.0",
-        "@smithy/util-hex-encoding": "^1.1.0",
-        "@smithy/util-middleware": "^1.1.0",
-        "@smithy/util-uri-escape": "^1.1.0",
-        "@smithy/util-utf8": "^1.1.0",
-        "tslib": "^2.5.0"
+        "@smithy/is-array-buffer": "^3.0.0",
+        "@smithy/protocol-http": "^4.1.8",
+        "@smithy/types": "^3.7.2",
+        "@smithy/util-hex-encoding": "^3.0.0",
+        "@smithy/util-middleware": "^3.0.11",
+        "@smithy/util-uri-escape": "^3.0.0",
+        "@smithy/util-utf8": "^3.0.0",
+        "tslib": "^2.6.2"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=16.0.0"
       }
     },
     "node_modules/@smithy/signature-v4/node_modules/@smithy/types": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@smithy/types/-/types-1.2.0.tgz",
-      "integrity": "sha512-z1r00TvBqF3dh4aHhya7nz1HhvCg4TRmw51fjMrh5do3h+ngSstt/yKlNbHeb9QxJmFbmN8KEVSWgb1bRvfEoA==",
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/@smithy/types/-/types-3.7.2.tgz",
+      "integrity": "sha512-bNwBYYmN8Eh9RyjS1p2gW6MIhSO2rl7X9QeLM8iTdcGRP+eDiIWDt66c9IysCc22gefKszZv+ubV9qZc7hdESg==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "tslib": "^2.5.0"
+        "tslib": "^2.6.2"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=16.0.0"
       }
     },
-    "node_modules/@smithy/types": {
-      "version": "3.4.2",
-      "resolved": "https://registry.npmjs.org/@smithy/types/-/types-3.4.2.tgz",
-      "integrity": "sha512-tHiFcfcVedVBHpmHUEUHOCCih8iZbIAYn9NvPsNzaPm/237I3imdDdZoOC8c87H5HBAVEa06tTgb+OcSWV9g5w==",
+    "node_modules/@smithy/signature-v4/node_modules/@smithy/util-uri-escape": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@smithy/util-uri-escape/-/util-uri-escape-3.0.0.tgz",
+      "integrity": "sha512-LqR7qYLgZTD7nWLBecUi4aqolw8Mhza9ArpNEQ881MJJIU2sE5iHCK6TdyqqzcDLy0OPe10IY4T8ctVdtynubg==",
+      "license": "Apache-2.0",
       "dependencies": {
         "tslib": "^2.6.2"
       },
@@ -2941,50 +2885,80 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/@smithy/types": {
+      "version": "4.12.0",
+      "resolved": "https://registry.npmjs.org/@smithy/types/-/types-4.12.0.tgz",
+      "integrity": "sha512-9YcuJVTOBDjg9LWo23Qp0lTQ3D7fQsQtwle0jVfpbUHy9qBwCEgKuVH4FqFB3VYu0nwdHKiEMA+oXz7oV8X1kw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
     "node_modules/@smithy/util-base64": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@smithy/util-base64/-/util-base64-1.1.0.tgz",
-      "integrity": "sha512-FpYmDmVbOXAxqvoVCwqehUN0zXS+lN8V7VS9O7I8MKeVHdSTsZzlwiMEvGoyTNOXWn8luF4CTDYgNHnZViR30g==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@smithy/util-base64/-/util-base64-3.0.0.tgz",
+      "integrity": "sha512-Kxvoh5Qtt0CDsfajiZOCpJxgtPHXOKwmM+Zy4waD43UoEMA+qPxxa98aE/7ZhdnBFZFXMOiBR5xbcaMhLtznQQ==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "@smithy/util-buffer-from": "^1.1.0",
-        "tslib": "^2.5.0"
+        "@smithy/util-buffer-from": "^3.0.0",
+        "@smithy/util-utf8": "^3.0.0",
+        "tslib": "^2.6.2"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=16.0.0"
       }
     },
     "node_modules/@smithy/util-buffer-from": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@smithy/util-buffer-from/-/util-buffer-from-1.1.0.tgz",
-      "integrity": "sha512-9m6NXE0ww+ra5HKHCHig20T+FAwxBAm7DIdwc/767uGWbRcY720ybgPacQNB96JMOI7xVr/CDa3oMzKmW4a+kw==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@smithy/util-buffer-from/-/util-buffer-from-3.0.0.tgz",
+      "integrity": "sha512-aEOHCgq5RWFbP+UDPvPot26EJHjOC+bRgse5A8V3FSShqd5E5UN4qc7zkwsvJPPAVsf73QwYcHN1/gt/rtLwQA==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "@smithy/is-array-buffer": "^1.1.0",
-        "tslib": "^2.5.0"
+        "@smithy/is-array-buffer": "^3.0.0",
+        "tslib": "^2.6.2"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=16.0.0"
       }
     },
     "node_modules/@smithy/util-hex-encoding": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@smithy/util-hex-encoding/-/util-hex-encoding-1.1.0.tgz",
-      "integrity": "sha512-7UtIE9eH0u41zpB60Jzr0oNCQ3hMJUabMcKRUVjmyHTXiWDE4vjSqN6qlih7rCNeKGbioS7f/y2Jgym4QZcKFg==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@smithy/util-hex-encoding/-/util-hex-encoding-3.0.0.tgz",
+      "integrity": "sha512-eFndh1WEK5YMUYvy3lPlVmYY/fZcQE1D8oSf41Id2vCeIkKJXPcYDCZD+4+xViI6b1XSd7tE+s5AmXzz5ilabQ==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "tslib": "^2.5.0"
+        "tslib": "^2.6.2"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=16.0.0"
       }
     },
     "node_modules/@smithy/util-middleware": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@smithy/util-middleware/-/util-middleware-1.1.0.tgz",
-      "integrity": "sha512-6hhckcBqVgjWAqLy2vqlPZ3rfxLDhFWEmM7oLh2POGvsi7j0tHkbN7w4DFhuBExVJAbJ/qqxqZdRY6Fu7/OezQ==",
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/@smithy/util-middleware/-/util-middleware-3.0.11.tgz",
+      "integrity": "sha512-dWpyc1e1R6VoXrwLoLDd57U1z6CwNSdkM69Ie4+6uYh2GC7Vg51Qtan7ITzczuVpqezdDTKJGJB95fFvvjU/ow==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "tslib": "^2.5.0"
+        "@smithy/types": "^3.7.2",
+        "tslib": "^2.6.2"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=16.0.0"
+      }
+    },
+    "node_modules/@smithy/util-middleware/node_modules/@smithy/types": {
+      "version": "3.7.2",
+      "resolved": "https://registry.npmjs.org/@smithy/types/-/types-3.7.2.tgz",
+      "integrity": "sha512-bNwBYYmN8Eh9RyjS1p2gW6MIhSO2rl7X9QeLM8iTdcGRP+eDiIWDt66c9IysCc22gefKszZv+ubV9qZc7hdESg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.6.2"
+      },
+      "engines": {
+        "node": ">=16.0.0"
       }
     },
     "node_modules/@smithy/util-uri-escape": {
@@ -2999,15 +2973,16 @@
       }
     },
     "node_modules/@smithy/util-utf8": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@smithy/util-utf8/-/util-utf8-1.1.0.tgz",
-      "integrity": "sha512-p/MYV+JmqmPyjdgyN2UxAeYDj9cBqCjp0C/NsTWnnjoZUVqoeZ6IrW915L9CAKWVECgv9lVQGc4u/yz26/bI1A==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/@smithy/util-utf8/-/util-utf8-3.0.0.tgz",
+      "integrity": "sha512-rUeT12bxFnplYDe815GXbq/oixEGHfRFFtcTF3YdDi/JaENIM6aSYYLJydG83UNzLXeRI5K8abYd/8Sp/QM0kA==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "@smithy/util-buffer-from": "^1.1.0",
-        "tslib": "^2.5.0"
+        "@smithy/util-buffer-from": "^3.0.0",
+        "tslib": "^2.6.2"
       },
       "engines": {
-        "node": ">=14.0.0"
+        "node": ">=16.0.0"
       }
     },
     "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
@@ -5085,21 +5060,22 @@
       }
     },
     "node_modules/aws-rum-web": {
-      "version": "1.19.0",
-      "resolved": "https://registry.npmjs.org/aws-rum-web/-/aws-rum-web-1.19.0.tgz",
-      "integrity": "sha512-V3sUSC3U8IYsQS0vK/rmACjzFugG07Zd01SII6JMvEB1/axEQ+SxUTK+nCyJdpCFPB3TuhpFwcfq5PVkn/MJ7w==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/aws-rum-web/-/aws-rum-web-2.0.0.tgz",
+      "integrity": "sha512-5LqpIDkgUbg0Iu6jMEeYJ6AIHkAia1UTpF+dS7NLvgzdK3smdjXjp1aV/W6IWjQwRI7rO950BBtcJ+G9VoPKWQ==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "@aws-crypto/sha256-js": "^2.0.2",
-        "@aws-sdk/fetch-http-handler": "^3.36.0",
-        "@aws-sdk/protocol-http": "^3.36.0",
+        "@aws-crypto/sha256-js": "^3.0.0",
         "@aws-sdk/querystring-builder": "^3.36.0",
-        "@aws-sdk/signature-v4": "^3.36.0",
-        "@aws-sdk/util-hex-encoding": "^3.36.0",
         "@babel/runtime": "^7.16.0",
+        "@smithy/fetch-http-handler": "^4.1.0",
+        "@smithy/protocol-http": "^4.1.6",
+        "@smithy/signature-v4": "^4.2.2",
+        "@smithy/util-hex-encoding": "^3.0.0",
         "shimmer": "^1.2.1",
         "ua-parser-js": "^1.0.33",
         "uuid": "^9.0.0",
-        "web-vitals": "^3.0.2"
+        "web-vitals": "^4.0.0"
       }
     },
     "node_modules/axios": {
@@ -13712,9 +13688,10 @@
       }
     },
     "node_modules/web-vitals": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-3.5.2.tgz",
-      "integrity": "sha512-c0rhqNcHXRkY/ogGDJQxZ9Im9D19hDihbzSQJrsioex+KnFgmMzBiy57Z1EjkhX/+OjyBpclDCzz2ITtjokFmg=="
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-4.2.4.tgz",
+      "integrity": "sha512-r4DIlprAGwJ7YM11VZp4R884m0Vmgr6EAKe3P+kO0PPj3Unqyvv59rczf6UiGcb9Z8QxZVcqKNwv/g0WNdWwsw==",
+      "license": "Apache-2.0"
     },
     "node_modules/webpack": {
       "version": "5.94.0",
diff --git a/package.json b/package.json
index 2dd2fc7ae..cbc54d057 100644
--- a/package.json
+++ b/package.json
@@ -92,7 +92,7 @@
     "@mdi/js": "^7.1.96",
     "@react-google-maps/api": "^2.20.3",
     "@uiw/react-color": "^2.4.1",
-    "aws-rum-web": "^1.19.0",
+    "aws-rum-web": "^2.0.0",
     "chart.js": "^4.4.1",
     "clean-webpack-plugin": "^4.0.0",
     "date-fns": "^4.1.0",
diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-action-card.scss b/react/assets/forus-webshop/scss/includes/blocks/block-action-card.scss
index 1d34e690f..ce00d7774 100644
--- a/react/assets/forus-webshop/scss/includes/blocks/block-action-card.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-action-card.scss
@@ -182,7 +182,7 @@
                 }
             }
 
-            &.bottom {
+            &.block-card-actions-bottom {
                 width: 100%;
                 padding: 8px 65px 0;
 
diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-reimbursements.scss b/react/assets/forus-webshop/scss/includes/blocks/block-reimbursements.scss
index 43f6d32af..0f82f7d70 100644
--- a/react/assets/forus-webshop/scss/includes/blocks/block-reimbursements.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-reimbursements.scss
@@ -66,13 +66,13 @@
                 }
             }
 
-            &.reimbursement-image-rejected {
+            &.reimbursement-image-declined {
                 svg .fill-color-primary {
                     fill: #d38c87;
                 }
             }
 
-            &.reimbursement-image-accepted {
+            &.reimbursement-image-approved {
                 svg .fill-color-primary {
                     fill: #9bbfa1;
                 }
@@ -119,7 +119,7 @@
         }
 
         .reimbursement-values {
-            padding: 0px 15px 15px 20px;
+            padding: 0 15px 15px 20px;
             display: flex;
             flex-direction: row;
             justify-content: flex-end;
@@ -161,8 +161,6 @@
             flex-direction: column;
             padding: 15px;
             position: relative;
-            display: flex;
-            flex-direction: column;
             justify-content: flex-end;
             white-space: nowrap;
 
@@ -184,7 +182,6 @@
                 bottom: 25px;
                 left: 25px;
                 text-align: right;
-                flex-direction: column;
                 justify-content: flex-end;
                 margin: 0 0 5px;
 
diff --git a/react/src/dashboard/components/elements/block-card-emails/BlockCardEmails.tsx b/react/src/dashboard/components/elements/block-card-emails/BlockCardEmails.tsx
index b91212e7e..f50982e63 100644
--- a/react/src/dashboard/components/elements/block-card-emails/BlockCardEmails.tsx
+++ b/react/src/dashboard/components/elements/block-card-emails/BlockCardEmails.tsx
@@ -13,15 +13,12 @@ import TableRowActions from '../tables/TableRowActions';
 import ModalLogEmailShow from '../../modals/ModalLogEmailShow';
 import { ApiResponse, PaginationData } from '../../../props/ApiResponses';
 import usePushApiError from '../../../hooks/usePushApiError';
-import Paginator from '../../../modules/paginator/components/Paginator';
 import { trimStart } from 'lodash';
 import { extractText } from '../../../helpers/utils';
 import useFilterNext from '../../../modules/filter_next/useFilterNext';
 import useEmailLogService from '../../../services/EmailLogService';
 import { useFileService } from '../../../services/FileService';
 import Organization from '../../../props/models/Organization';
-import useConfigurableTable from '../../pages/vouchers/hooks/useConfigurableTable';
-import TableTopScroller from '../tables/TableTopScroller';
 import { FilterModel } from '../../../modules/filter_next/types/FilterParams';
 import FormGroup from '../forms/elements/FormGroup';
 
@@ -56,8 +53,6 @@ export default function BlockCardEmails({
         per_page: paginatorService.getPerPage(paginatorKey),
     });
 
-    const { headElement, configsElement } = useConfigurableTable(emailLogService.getColumns());
-
     const exportEmailLog = useCallback(
         (emailLog: EmailLog) => {
             emailLogService
@@ -135,92 +130,66 @@ export default function BlockCardEmails({
                     </div>
                 </div>
             </div>
-            <LoaderTableCard empty={!emailLogs.meta.total} emptyTitle={'De lijst van berichten is leeg'}>
-                <div className="card-section">
-                    <div className="card-block card-block-table">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {emailLogs?.data.map((emailLog) => (
-                                        <tr key={emailLog.id} data-dusk={`emailLogRow${emailLog.id}`}>
-                                            <td className="nowrap">
-                                                <TableDateTime value={emailLog.created_at_locale} />
-                                            </td>
-                                            <td>
-                                                <div className={'text-semibold'}>{emailLog.subject}</div>
-                                                <div className={'text-md ellipsis'}>
-                                                    {strLimit(
-                                                        trimStart(
-                                                            extractText(emailLog.content).trim(),
-                                                            emailLog.subject,
-                                                        ).trim(),
-                                                        64,
-                                                    )}
-                                                </div>
-                                            </td>
-                                            <td>
-                                                <div className={'text-primary text-semibold'}>
-                                                    {emailLog.to_address || <TableEmptyValue />}
-                                                </div>
-                                                <div>{emailLog.to_name || <TableEmptyValue />}</div>
-                                            </td>
-                                            <td>
-                                                <div className={'text-primary text-semibold'}>
-                                                    {emailLog.from_address || <TableEmptyValue />}
-                                                </div>
-                                                <div>{emailLog.from_name || <TableEmptyValue />}</div>
-                                            </td>
-                                            <td className={'text-right'}>
-                                                <TableRowActions
-                                                    dataDusk={`btnEmailLogMenu${emailLog.id}`}
-                                                    content={({ close }) => (
-                                                        <div className="dropdown dropdown-actions">
-                                                            <a
-                                                                className={'dropdown-item'}
-                                                                data-dusk="openEmail"
-                                                                onClick={() => {
-                                                                    openEmail(emailLog);
-                                                                    close();
-                                                                }}>
-                                                                <em className="mdi mdi-eye icon-start" />
-                                                                Bekijken
-                                                            </a>
-                                                            <a
-                                                                className={'dropdown-item'}
-                                                                data-dusk="exportEmail"
-                                                                onClick={() => {
-                                                                    exportEmailLog(emailLog);
-                                                                    close();
-                                                                }}>
-                                                                <em className="mdi mdi-content-save-outline icon-start" />
-                                                                Download
-                                                            </a>
-                                                        </div>
-                                                    )}
-                                                />
-                                            </td>
-                                        </tr>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
 
-                {emailLogs?.meta && (
-                    <div className="card-section">
-                        <Paginator
-                            meta={emailLogs.meta}
-                            filters={filterValues}
-                            updateFilters={filterUpdate}
-                            perPageKey={paginatorKey}
-                        />
-                    </div>
-                )}
+            <LoaderTableCard
+                empty={!emailLogs?.meta?.total}
+                emptyTitle={'De lijst van berichten is leeg'}
+                columns={emailLogService.getColumns()}
+                paginator={{ key: paginatorKey, data: emailLogs, filterValues, filterUpdate }}>
+                {emailLogs?.data?.map((emailLog) => (
+                    <tr key={emailLog.id} data-dusk={`emailLogRow${emailLog.id}`}>
+                        <td className="nowrap">
+                            <TableDateTime value={emailLog.created_at_locale} />
+                        </td>
+                        <td>
+                            <div className={'text-semibold'}>{emailLog.subject}</div>
+                            <div className={'text-md ellipsis'}>
+                                {strLimit(trimStart(extractText(emailLog.content).trim(), emailLog.subject).trim(), 64)}
+                            </div>
+                        </td>
+                        <td>
+                            <div className={'text-primary text-semibold'}>
+                                {emailLog.to_address || <TableEmptyValue />}
+                            </div>
+                            <div>{emailLog.to_name || <TableEmptyValue />}</div>
+                        </td>
+                        <td>
+                            <div className={'text-primary text-semibold'}>
+                                {emailLog.from_address || <TableEmptyValue />}
+                            </div>
+                            <div>{emailLog.from_name || <TableEmptyValue />}</div>
+                        </td>
+                        <td className={'text-right'}>
+                            <TableRowActions
+                                dataDusk={`btnEmailLogMenu${emailLog.id}`}
+                                content={({ close }) => (
+                                    <div className="dropdown dropdown-actions">
+                                        <a
+                                            className={'dropdown-item'}
+                                            data-dusk="openEmail"
+                                            onClick={() => {
+                                                openEmail(emailLog);
+                                                close();
+                                            }}>
+                                            <em className="mdi mdi-eye icon-start" />
+                                            Bekijken
+                                        </a>
+                                        <a
+                                            className={'dropdown-item'}
+                                            data-dusk="exportEmail"
+                                            onClick={() => {
+                                                exportEmailLog(emailLog);
+                                                close();
+                                            }}>
+                                            <em className="mdi mdi-content-save-outline icon-start" />
+                                            Download
+                                        </a>
+                                    </div>
+                                )}
+                            />
+                        </td>
+                    </tr>
+                ))}
             </LoaderTableCard>
         </div>
     );
diff --git a/react/src/dashboard/components/elements/block-card-notes/BlockCardNotes.tsx b/react/src/dashboard/components/elements/block-card-notes/BlockCardNotes.tsx
index f503045c2..192adef87 100644
--- a/react/src/dashboard/components/elements/block-card-notes/BlockCardNotes.tsx
+++ b/react/src/dashboard/components/elements/block-card-notes/BlockCardNotes.tsx
@@ -1,7 +1,6 @@
 import FormValuesModel from '../../../types/FormValuesModel';
 import { useCallback, useEffect, useState } from 'react';
 import { ApiResponse, ApiResponseSingle, PaginationData } from '../../../props/ApiResponses';
-import Paginator from '../../../modules/paginator/components/Paginator';
 import React from 'react';
 import useOpenModal from '../../../hooks/useOpenModal';
 import ModalDangerZone from '../../modals/ModalDangerZone';
@@ -16,9 +15,7 @@ import useTranslate from '../../../hooks/useTranslate';
 import LoaderTableCard from '../loader-table-card/LoaderTableCard';
 import TableRowActions from '../tables/TableRowActions';
 import usePushApiError from '../../../hooks/usePushApiError';
-import useConfigurableTable from '../../pages/vouchers/hooks/useConfigurableTable';
 import { useOrganizationService } from '../../../services/OrganizationService';
-import TableTopScroller from '../tables/TableTopScroller';
 import useFilterNext from '../../../modules/filter_next/useFilterNext';
 import { FilterModel } from '../../../modules/filter_next/types/FilterParams';
 
@@ -53,8 +50,6 @@ export default function BlockCardNotes({
         per_page: paginatorService.getPerPage(paginatorKey),
     });
 
-    const { headElement, configsElement } = useConfigurableTable(organizationService.getNoteColumns());
-
     const updateNotes = useCallback(() => {
         setProgress(0);
 
@@ -127,7 +122,7 @@ export default function BlockCardNotes({
         <div className="card">
             <div className="card-header">
                 <div className="card-title flex flex-grow">
-                    {translate('notes.header.title')}({notes.meta.total})
+                    {translate('notes.header.title')}({notes?.meta?.total})
                 </div>
                 <div className="button-group">
                     {showCreate && (
@@ -139,68 +134,47 @@ export default function BlockCardNotes({
                 </div>
             </div>
 
-            <LoaderTableCard empty={!notes.meta.total} emptyTitle={'Geen notities'}>
-                <div className="card-section">
-                    <div className="card-block card-block-table">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {notes.data?.map((note) => (
-                                        <tr key={note.id} data-dusk={`noteRow${note.id}`}>
-                                            <td className="td-narrow nowrap">{note.id}</td>
-                                            <td className="nowrap">{note.created_at_locale}</td>
-                                            <td className="nowrap text-primary">{note.employee.email}</td>
-                                            <td>
-                                                {note.description?.split('\n').map((line: string, index) => (
-                                                    <div key={index} className="td-text">
-                                                        {line}
-                                                    </div>
-                                                ))}
-                                            </td>
-
-                                            <td className="td-narrow text-right">
-                                                {note.employee.identity_address === identity.address && (
-                                                    <TableRowActions
-                                                        dataDusk={`noteMenuBtn${note.id}`}
-                                                        content={(e) => (
-                                                            <div className="dropdown dropdown-actions">
-                                                                <div
-                                                                    className="dropdown-item"
-                                                                    onClick={() => {
-                                                                        e?.close();
-                                                                        onDeleteNote(note);
-                                                                    }}
-                                                                    data-dusk="deleteNoteBtn">
-                                                                    <em className="mdi mdi-delete-outline icon-start" />
-                                                                    Verwijderen
-                                                                </div>
-                                                            </div>
-                                                        )}
-                                                    />
-                                                )}
-                                            </td>
-                                        </tr>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
-
-                {notes?.meta && (
-                    <div className="card-section">
-                        <Paginator
-                            meta={notes.meta}
-                            filters={filterValues}
-                            updateFilters={filterUpdate}
-                            perPageKey={paginatorKey}
-                        />
-                    </div>
-                )}
+            <LoaderTableCard
+                empty={!notes?.meta?.total}
+                emptyTitle={'Geen notities'}
+                columns={organizationService.getNoteColumns()}
+                paginator={{ key: paginatorKey, data: notes, filterValues, filterUpdate }}>
+                {notes?.data?.map((note) => (
+                    <tr key={note.id} data-dusk={`noteRow${note.id}`}>
+                        <td className="td-narrow nowrap">{note.id}</td>
+                        <td className="nowrap">{note.created_at_locale}</td>
+                        <td className="nowrap text-primary">{note.employee.email}</td>
+                        <td>
+                            {note.description?.split('\n').map((line: string, index) => (
+                                <div key={index} className="td-text">
+                                    {line}
+                                </div>
+                            ))}
+                        </td>
+
+                        <td className="td-narrow text-right">
+                            {note.employee.identity_address === identity.address && (
+                                <TableRowActions
+                                    dataDusk={`noteMenuBtn${note.id}`}
+                                    content={(e) => (
+                                        <div className="dropdown dropdown-actions">
+                                            <div
+                                                className="dropdown-item"
+                                                onClick={() => {
+                                                    e?.close();
+                                                    onDeleteNote(note);
+                                                }}
+                                                data-dusk="deleteNoteBtn">
+                                                <em className="mdi mdi-delete-outline icon-start" />
+                                                Verwijderen
+                                            </div>
+                                        </div>
+                                    )}
+                                />
+                            )}
+                        </td>
+                    </tr>
+                ))}
             </LoaderTableCard>
         </div>
     );
diff --git a/react/src/dashboard/components/elements/block-reimbursement-categories/BlockReimbursementCategories.tsx b/react/src/dashboard/components/elements/block-reimbursement-categories/BlockReimbursementCategories.tsx
index 96ede7a8d..426dc0f16 100644
--- a/react/src/dashboard/components/elements/block-reimbursement-categories/BlockReimbursementCategories.tsx
+++ b/react/src/dashboard/components/elements/block-reimbursement-categories/BlockReimbursementCategories.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { PaginationData } from '../../../props/ApiResponses';
 import ReimbursementCategory from '../../../props/models/ReimbursementCategory';
-import Paginator from '../../../modules/paginator/components/Paginator';
 import usePaginatorService from '../../../modules/paginator/services/usePaginatorService';
 import useOpenModal from '../../../hooks/useOpenModal';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
@@ -14,8 +13,6 @@ import useTranslate from '../../../hooks/useTranslate';
 import LoadingCard from '../loading-card/LoadingCard';
 import LoaderTableCard from '../loader-table-card/LoaderTableCard';
 import usePushApiError from '../../../hooks/usePushApiError';
-import useConfigurableTable from '../../pages/vouchers/hooks/useConfigurableTable';
-import TableTopScroller from '../tables/TableTopScroller';
 import TableRowActions from '../tables/TableRowActions';
 import classNames from 'classnames';
 import useFilterNext from '../../../modules/filter_next/useFilterNext';
@@ -48,8 +45,6 @@ export default function BlockReimbursementCategories({
         per_page: paginatorService.getPerPage(paginatorKey),
     });
 
-    const { headElement, configsElement } = useConfigurableTable(reimbursementCategoryService.getColumns());
-
     const fetchReimbursementCategories = useCallback(() => {
         setLoading(true);
         setProgress(0);
@@ -129,7 +124,7 @@ export default function BlockReimbursementCategories({
                 <div className="card-header">
                     <div className="flex flex-grow card-title">
                         {categories?.meta
-                            ? `Declaratie categorieën (${categories?.meta.total})`
+                            ? `Declaratie categorieën (${categories?.meta?.total})`
                             : `Declaratie categorieën`}
                     </div>
 
@@ -149,71 +144,47 @@ export default function BlockReimbursementCategories({
 
             <LoaderTableCard
                 loading={loading}
-                empty={categories?.data.length === 0}
-                emptyTitle={'Er zijn momenteel geen declaratie categorieën.'}>
-                <div className="card-section">
-                    <div className="card-block card-block-table">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {categories?.data.map((reimbursementCategory) => (
-                                        <tr key={reimbursementCategory.id}>
-                                            <td>{reimbursementCategory.name}</td>
-                                            <td>{reimbursementCategory.organization.name}</td>
-                                            <td>{reimbursementCategory.reimbursements_count}</td>
-
-                                            <td className="td-narrow text-right">
-                                                <TableRowActions
-                                                    content={({ close }) => (
-                                                        <div className="dropdown dropdown-actions">
-                                                            <a
-                                                                className="dropdown-item"
-                                                                onClick={() => {
-                                                                    editReimbursementCategory(reimbursementCategory);
-                                                                    close();
-                                                                }}>
-                                                                <em className="mdi mdi-pen icon-start" />
-                                                                {translate('Bewerken')}
-                                                            </a>
-                                                            <a
-                                                                className={classNames(
-                                                                    'dropdown-item',
-                                                                    reimbursementCategory.reimbursements_count > 0 &&
-                                                                        'disabled',
-                                                                )}
-                                                                onClick={() => {
-                                                                    deleteReimbursementCategory(reimbursementCategory);
-                                                                    close();
-                                                                }}>
-                                                                <em className="icon-start mdi mdi-delete" />
-                                                                Verwijderen
-                                                            </a>
-                                                        </div>
-                                                    )}
-                                                />
-                                            </td>
-                                        </tr>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
-
-                {categories?.meta.total > 0 && (
-                    <div className={classNames('card-section', compact && 'card-section-narrow')}>
-                        <Paginator
-                            meta={categories.meta}
-                            filters={filterValues}
-                            updateFilters={filterUpdate}
-                            perPageKey={paginatorKey}
-                        />
-                    </div>
-                )}
+                empty={categories?.data?.length === 0}
+                emptyTitle={'Er zijn momenteel geen declaratie categorieën.'}
+                columns={reimbursementCategoryService.getColumns()}
+                paginator={{ key: paginatorKey, data: categories, filterValues, filterUpdate }}>
+                {categories?.data?.map((reimbursementCategory) => (
+                    <tr key={reimbursementCategory.id}>
+                        <td>{reimbursementCategory.name}</td>
+                        <td>{reimbursementCategory.organization.name}</td>
+                        <td>{reimbursementCategory.reimbursements_count}</td>
+
+                        <td className="td-narrow text-right">
+                            <TableRowActions
+                                content={({ close }) => (
+                                    <div className="dropdown dropdown-actions">
+                                        <a
+                                            className="dropdown-item"
+                                            onClick={() => {
+                                                editReimbursementCategory(reimbursementCategory);
+                                                close();
+                                            }}>
+                                            <em className="mdi mdi-pen icon-start" />
+                                            {translate('Bewerken')}
+                                        </a>
+                                        <a
+                                            className={classNames(
+                                                'dropdown-item',
+                                                reimbursementCategory.reimbursements_count > 0 && 'disabled',
+                                            )}
+                                            onClick={() => {
+                                                deleteReimbursementCategory(reimbursementCategory);
+                                                close();
+                                            }}>
+                                            <em className="icon-start mdi mdi-delete" />
+                                            Verwijderen
+                                        </a>
+                                    </div>
+                                )}
+                            />
+                        </td>
+                    </tr>
+                ))}
             </LoaderTableCard>
         </div>
     );
diff --git a/react/src/dashboard/components/elements/card-table/CardTable.tsx b/react/src/dashboard/components/elements/card-table/CardTable.tsx
deleted file mode 100644
index b4a8c7426..000000000
--- a/react/src/dashboard/components/elements/card-table/CardTable.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { ReactNode } from 'react';
-import TableTopScroller from '../tables/TableTopScroller';
-import useConfigurableTable, { ConfigurableTableColumn } from '../../pages/vouchers/hooks/useConfigurableTable';
-import { FilterModel, FilterScope } from '../../../modules/filter_next/types/FilterParams';
-
-export default function CardTable({
-    columns,
-    options,
-    children,
-}: {
-    columns: Array<ConfigurableTableColumn>;
-    options?: {
-        sortable?: boolean;
-        sortableExclude?: Array<string>;
-        filter?: FilterScope<FilterModel>;
-        trPrepend?: ReactNode;
-        hasTooltips?: boolean;
-    };
-    children: ReactNode | ReactNode[];
-}) {
-    const { headElement, configsElement } = useConfigurableTable(columns, options);
-
-    return (
-        <div className="card-block card-block-table form">
-            {configsElement}
-
-            <TableTopScroller>
-                <table className="table">
-                    {headElement}
-                    <tbody>{children}</tbody>
-                </table>
-            </TableTopScroller>
-        </div>
-    );
-}
diff --git a/react/src/dashboard/components/elements/empty-card/EmptyCard.tsx b/react/src/dashboard/components/elements/empty-card/EmptyCard.tsx
index 56cce15d1..b05a2540c 100644
--- a/react/src/dashboard/components/elements/empty-card/EmptyCard.tsx
+++ b/react/src/dashboard/components/elements/empty-card/EmptyCard.tsx
@@ -1,10 +1,12 @@
 import React, { Fragment, ReactNode, useMemo } from 'react';
 import classNames from 'classnames';
-import { NavLink } from 'react-router';
+import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
+import StateNavLink from '../../../modules/state_router/StateNavLink';
 
-interface EmptyButtonType {
-    to?: string;
+export interface EmptyButtonType {
     type?: 'default' | 'primary' | 'danger';
+    state?: DashboardRoutes;
+    stateParams?: object;
     icon?: string;
     text?: string;
     dusk?: string;
@@ -20,8 +22,8 @@ export default function EmptyCard({
     imageIconSvg,
     textAlign = 'center',
     button = null,
-    buttons = [],
     type = 'card',
+    actions,
 }: {
     title?: string;
     description?: string;
@@ -30,8 +32,8 @@ export default function EmptyCard({
     imageIconSvg?: ReactNode;
     textAlign?: 'left' | 'center' | 'right';
     button?: EmptyButtonType;
-    buttons?: Array<EmptyButtonType>;
     type?: 'card' | 'card-section' | 'card-section-content';
+    actions?: ReactNode;
 }) {
     const descriptionLines = useMemo(() => {
         return description?.split('\n') || [];
@@ -95,31 +97,31 @@ export default function EmptyCard({
                     </div>
                 )}
 
-                {button && (
-                    <div className={'empty-actions'}>
-                        <div className="button-group">
-                            {[button, ...buttons].map((button, index) => (
-                                <NavLink
-                                    key={index}
-                                    to={button.to}
-                                    onClick={button.onClick}
-                                    className={classNames(
-                                        'button',
-                                        (!button.type || button.type === 'default') && 'button-default',
-                                        button.type === 'primary' && 'button-primary',
-                                        button.type === 'danger' && 'button-danger',
-                                    )}
-                                    data-dusk={button.dusk || 'btnEmptyBlock'}>
-                                    {button.icon && (!button.iconPosition || button.iconPosition == 'start') && (
-                                        <em className={`mdi mdi-${button.icon} icon-start`} />
-                                    )}
-                                    {button.text}
-                                    {button.icon && button.iconPosition == 'end' && (
-                                        <em className={`mdi mdi-${button.icon} icon-end`} />
-                                    )}
-                                </NavLink>
-                            ))}
-                        </div>
+                {(button || actions) && (
+                    <div className="empty-actions">
+                        {button && (
+                            <StateNavLink
+                                name={button.state}
+                                params={button.stateParams}
+                                onClick={button.onClick}
+                                className={classNames(
+                                    'button',
+                                    (!button.type || button.type === 'default') && 'button-default',
+                                    button.type === 'primary' && 'button-primary',
+                                    button.type === 'danger' && 'button-danger',
+                                )}
+                                dataDusk={button.dusk || 'btnEmptyBlock'}>
+                                {button.icon && (!button.iconPosition || button.iconPosition == 'start') && (
+                                    <em className={`mdi mdi-${button.icon} icon-start`} />
+                                )}
+                                {button.text}
+                                {button.icon && button.iconPosition == 'end' && (
+                                    <em className={`mdi mdi-${button.icon} icon-end`} />
+                                )}
+                            </StateNavLink>
+                        )}
+
+                        {actions}
                     </div>
                 )}
             </div>
diff --git a/react/src/dashboard/components/elements/forms/elements/FormGroup.tsx b/react/src/dashboard/components/elements/forms/elements/FormGroup.tsx
index 3a02bd77b..65cd77461 100644
--- a/react/src/dashboard/components/elements/forms/elements/FormGroup.tsx
+++ b/react/src/dashboard/components/elements/forms/elements/FormGroup.tsx
@@ -36,7 +36,7 @@ export default function FormGroup({
                 className,
             )}>
             {label && (
-                <label htmlFor={input_id} className={classNames(`form-label`, required && 'form-label-required')}>
+                <label htmlFor={input_id} className={classNames('form-label', required && 'form-label-required')}>
                     {label}
                 </label>
             )}
diff --git a/react/src/dashboard/components/elements/forms/ui-controls/UIControlStep.tsx b/react/src/dashboard/components/elements/forms/ui-controls/UIControlStep.tsx
index bed006ae8..9ade0e970 100644
--- a/react/src/dashboard/components/elements/forms/ui-controls/UIControlStep.tsx
+++ b/react/src/dashboard/components/elements/forms/ui-controls/UIControlStep.tsx
@@ -34,7 +34,7 @@ export default function UIControlStep({
 
     return (
         <div
-            className={classNames(`ui-control ui-control-step`, className)}
+            className={classNames('ui-control', 'ui-control-step', className)}
             role={role}
             data-dusk={dataDusk}
             aria-label="Aanpassen"
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 3ebbf0167..73a6a6e44 100644
--- a/react/src/dashboard/components/elements/fund-criteria-editor/FundCriteriaEditorItem.tsx
+++ b/react/src/dashboard/components/elements/fund-criteria-editor/FundCriteriaEditorItem.tsx
@@ -250,7 +250,7 @@ export default function FundCriteriaEditorItem({
     return (
         <div className="criterion-item">
             <div className="criterion-head">
-                <div className={classNames(`criterion-title`, !isEditing && 'criterion-title-large')}>
+                <div className={classNames('criterion-title', !isEditing && 'criterion-title-large')}>
                     {title || defaultTitle}
                 </div>
 
diff --git a/react/src/dashboard/components/elements/funds-provider-products-required-table/FundsProviderProductsRequiredTable.tsx b/react/src/dashboard/components/elements/funds-provider-products-required-table/FundsProviderProductsRequiredTable.tsx
index 1910fe1da..3db9fcc1e 100644
--- a/react/src/dashboard/components/elements/funds-provider-products-required-table/FundsProviderProductsRequiredTable.tsx
+++ b/react/src/dashboard/components/elements/funds-provider-products-required-table/FundsProviderProductsRequiredTable.tsx
@@ -3,9 +3,8 @@ import classNames from 'classnames';
 import Fund from '../../../props/models/Fund';
 import { strLimit } from '../../../helpers/string';
 import TableEmptyValue from '../table-empty-value/TableEmptyValue';
-import useConfigurableTable from '../../pages/vouchers/hooks/useConfigurableTable';
-import TableTopScroller from '../tables/TableTopScroller';
 import useProviderFundService from '../../../services/ProviderFundService';
+import LoaderTableCard from '../loader-table-card/LoaderTableCard';
 
 export default function FundsProviderProductsRequiredTable({
     collapsed = true,
@@ -16,8 +15,6 @@ export default function FundsProviderProductsRequiredTable({
 }) {
     const providerFundService = useProviderFundService();
 
-    const { headElement, configsElement } = useConfigurableTable(providerFundService.getProductsRequiredColumns());
-
     const [showFunds, setShowFunds] = useState(!collapsed);
 
     return (
@@ -30,30 +27,21 @@ export default function FundsProviderProductsRequiredTable({
             </div>
 
             {showFunds && (
-                <div className="card-section">
-                    <div className="card-block card-block-table">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {funds.map((fund) => (
-                                        <tr key={fund.id}>
-                                            <td title={fund.name || '-'}>{strLimit(fund.name, 50)}</td>
-                                            <td>{fund.external ? 'External' : 'Regular'}</td>
-                                            <td>{fund.implementation?.name || <TableEmptyValue />}</td>
-                                            <td className={'table-td-actions text-right'}>
-                                                <TableEmptyValue />
-                                            </td>
-                                        </tr>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
+                <LoaderTableCard
+                    empty={funds.length === 0}
+                    emptyTitle={'Geen fondsen'}
+                    columns={providerFundService.getProductsRequiredColumns()}>
+                    {funds.map((fund) => (
+                        <tr key={fund.id}>
+                            <td title={fund.name || '-'}>{strLimit(fund.name, 50)}</td>
+                            <td>{fund.external ? 'External' : 'Regular'}</td>
+                            <td>{fund.implementation?.name || <TableEmptyValue />}</td>
+                            <td className={'table-td-actions text-right'}>
+                                <TableEmptyValue />
+                            </td>
+                        </tr>
+                    ))}
+                </LoaderTableCard>
             )}
         </div>
     );
diff --git a/react/src/dashboard/components/elements/loader-table-card/LoaderTableCard.tsx b/react/src/dashboard/components/elements/loader-table-card/LoaderTableCard.tsx
index 27d40e5fe..51ae23c01 100644
--- a/react/src/dashboard/components/elements/loader-table-card/LoaderTableCard.tsx
+++ b/react/src/dashboard/components/elements/loader-table-card/LoaderTableCard.tsx
@@ -1,27 +1,73 @@
 import React, { Fragment, ReactNode } from 'react';
 import LoadingCard from '../loading-card/LoadingCard';
-import EmptyCard from '../empty-card/EmptyCard';
+import EmptyCard, { EmptyButtonType } from '../empty-card/EmptyCard';
+import { ConfigurableTableColumn } from '../../pages/vouchers/hooks/useConfigurableTable';
+import LoaderTableCardSection, { LoaderTableCardSectionOptions } from './LoaderTableCardSection';
+import { PaginationData } from '../../../props/ApiResponses';
+import Paginator from '../../../modules/paginator/components/Paginator';
+import { FilterModel, FilterSetter } from '../../../modules/filter_next/types/FilterParams';
 
 export default function LoaderTableCard({
     empty = false,
     emptyTitle = '',
-    emptyDescription = null,
+    emptyDescription,
+    emptyButton = null,
     loading = false,
     children,
+    columns,
+    paginator,
+    tableOptions,
+    dusk,
 }: {
     empty?: boolean;
     emptyTitle?: string;
     emptyDescription?: string;
+    emptyButton?: EmptyButtonType | null;
     loading?: boolean;
-    children: ReactNode | Array<ReactNode>;
+    children: ReactNode;
+    columns?: Array<ConfigurableTableColumn>;
+    paginator?: {
+        key: string;
+        data: PaginationData<unknown>;
+        filterValues: FilterModel;
+        filterUpdate: FilterSetter;
+    };
+    tableOptions?: LoaderTableCardSectionOptions;
+    dusk?: string;
 }) {
     if (loading) {
-        return <LoadingCard type={'card-section'} />;
+        return <LoadingCard type="card-section" />;
     }
 
     if (empty) {
         return (
-            <EmptyCard type={'card-section'} title={emptyTitle || 'Niets gevonden'} description={emptyDescription} />
+            <EmptyCard
+                type="card-section"
+                title={emptyTitle || 'Niets gevonden'}
+                description={emptyDescription}
+                button={emptyButton}
+            />
+        );
+    }
+
+    if (columns) {
+        return (
+            <Fragment>
+                <LoaderTableCardSection columns={columns} options={tableOptions} dusk={dusk}>
+                    {children}
+                </LoaderTableCardSection>
+
+                {paginator?.data?.meta && (
+                    <div className="card-section">
+                        <Paginator
+                            meta={paginator.data.meta}
+                            filters={paginator.filterValues}
+                            updateFilters={paginator.filterUpdate}
+                            perPageKey={paginator.key}
+                        />
+                    </div>
+                )}
+            </Fragment>
         );
     }
 
diff --git a/react/src/dashboard/components/elements/loader-table-card/LoaderTableCardSection.tsx b/react/src/dashboard/components/elements/loader-table-card/LoaderTableCardSection.tsx
new file mode 100644
index 000000000..b273e4886
--- /dev/null
+++ b/react/src/dashboard/components/elements/loader-table-card/LoaderTableCardSection.tsx
@@ -0,0 +1,41 @@
+import React, { ReactNode } from 'react';
+import TableTopScroller from '../tables/TableTopScroller';
+import useConfigurableTable, { ConfigurableTableColumn } from '../../pages/vouchers/hooks/useConfigurableTable';
+import { FilterModel, FilterScope } from '../../../modules/filter_next/types/FilterParams';
+
+export type LoaderTableCardSectionOptions = {
+    sortable?: boolean;
+    sortableExclude?: Array<string>;
+    filter?: FilterScope<FilterModel>;
+    trPrepend?: ReactNode;
+    hasTooltips?: boolean;
+};
+
+export default function LoaderTableCardSection({
+    columns,
+    options,
+    children,
+    dusk,
+}: {
+    columns: Array<ConfigurableTableColumn>;
+    options?: LoaderTableCardSectionOptions;
+    children: ReactNode | ReactNode[];
+    dusk?: string;
+}) {
+    const { headElement, configsElement } = useConfigurableTable(columns, options);
+
+    return (
+        <div className="card-section" data-dusk={dusk}>
+            <div className="card-block card-block-table form">
+                {configsElement}
+
+                <TableTopScroller>
+                    <table className="table">
+                        {headElement}
+                        <tbody>{children}</tbody>
+                    </table>
+                </TableTopScroller>
+            </div>
+        </div>
+    );
+}
diff --git a/react/src/dashboard/components/elements/photo-selector/PhotoSelectorBanner.tsx b/react/src/dashboard/components/elements/photo-selector/PhotoSelectorBanner.tsx
index 52692de21..656087288 100644
--- a/react/src/dashboard/components/elements/photo-selector/PhotoSelectorBanner.tsx
+++ b/react/src/dashboard/components/elements/photo-selector/PhotoSelectorBanner.tsx
@@ -128,7 +128,7 @@ export default function PhotoSelectorBanner({
                     style={{ backgroundImage: thumbnailValue ? 'url(' + thumbnailValue + ')' : 'none' }}>
                     {templateData.overlay_enabled && (
                         <div
-                            className={`banner-editor-photo-pattern`}
+                            className="banner-editor-photo-pattern"
                             style={{
                                 ...(templateData.overlay_type === 'color'
                                     ? { backgroundColor: '#000' }
diff --git a/react/src/dashboard/components/elements/resource-states/FundRequestStateLabel.tsx b/react/src/dashboard/components/elements/resource-states/FundRequestStateLabel.tsx
index 29009029b..6f003df2e 100644
--- a/react/src/dashboard/components/elements/resource-states/FundRequestStateLabel.tsx
+++ b/react/src/dashboard/components/elements/resource-states/FundRequestStateLabel.tsx
@@ -41,12 +41,29 @@ export default function FundRequestStateLabel({ fundRequest }: { fundRequest: Fu
         };
     }, [fundRequest, hasRecordsWithPendingClarifications]);
 
+    const getLabelClass = useCallback((label?: string) => {
+        switch (label) {
+            case 'primary-light':
+                return classNames('label-primary-light');
+            case 'danger':
+                return classNames('label-danger');
+            case 'success':
+                return classNames('label-success');
+            case 'default':
+                return classNames('label-default');
+            case 'warning':
+                return classNames('label-warning');
+            default:
+                return null;
+        }
+    }, []);
+
     return (
         <Fragment>
             {fundRequest.state == 'pending' && fundRequest.employee ? (
                 <Fragment>
                     {hasRecordsWithPendingClarifications ? (
-                        <div className={classNames('label', `label-${stateLabels.clarification_requested?.label}`)}>
+                        <div className={classNames('label', getLabelClass(stateLabels.clarification_requested?.label))}>
                             <em
                                 className={classNames(
                                     'mdi',
@@ -64,7 +81,7 @@ export default function FundRequestStateLabel({ fundRequest }: { fundRequest: Fu
                     )}
                 </Fragment>
             ) : (
-                <div className={classNames('label', `label-${stateLabels[localState.key]?.label}`)}>
+                <div className={classNames('label', getLabelClass(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/select-control/templates/SelectControlOptions.tsx b/react/src/dashboard/components/elements/select-control/templates/SelectControlOptions.tsx
index e85430217..32b39396d 100644
--- a/react/src/dashboard/components/elements/select-control/templates/SelectControlOptions.tsx
+++ b/react/src/dashboard/components/elements/select-control/templates/SelectControlOptions.tsx
@@ -81,7 +81,7 @@ export default function SelectControlOptions<T>({
                     title={placeholderValue || placeholder}>
                     <span className="select-control-search-placeholder">{placeholderValue || placeholder}</span>
                     <span className={'select-control-icon'}>
-                        <em className={showOptions ? 'mdi mdi-chevron-up' : 'mdi mdi-chevron-down'} />
+                        <em className={classNames('mdi', showOptions ? 'mdi-chevron-up' : 'mdi-chevron-down')} />
                     </span>
                 </span>
 
diff --git a/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsCountryCodes.tsx b/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsCountryCodes.tsx
index 974d4bb6f..1d94e216c 100644
--- a/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsCountryCodes.tsx
+++ b/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsCountryCodes.tsx
@@ -59,7 +59,7 @@ export default function SelectControlOptionsCountryCodes<T>({
                         {modelValue?.raw['code'] + ' +' + modelValue?.raw['dialCode']}
                     </span>
                     <span className={'select-control-icon'}>
-                        <em className={showOptions ? 'mdi mdi-chevron-up' : 'mdi mdi-chevron-down'} />
+                        <em className={classNames('mdi', showOptions ? 'mdi-chevron-up' : 'mdi-chevron-down')} />
                     </span>
                 </label>
                 {showOptions && (
diff --git a/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsFD.tsx b/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsFD.tsx
index e4eaf9693..eba45b3f8 100644
--- a/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsFD.tsx
+++ b/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsFD.tsx
@@ -128,7 +128,7 @@ export default function SelectControlOptionsFD<T>({
                         aria-label={placeholderValue || placeholder}>
                         <span className="select-control-search-placeholder">{placeholderValue || placeholder}</span>
                         <span className={'select-control-icon'}>
-                            <em className={showOptions ? 'mdi mdi-chevron-up' : 'mdi mdi-chevron-down'} />
+                            <em className={classNames('mdi', showOptions ? 'mdi-chevron-up' : 'mdi-chevron-down')} />
                         </span>
                     </span>
 
diff --git a/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsFund.tsx b/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsFund.tsx
index 9bed80206..1b421fd21 100644
--- a/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsFund.tsx
+++ b/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsFund.tsx
@@ -101,7 +101,7 @@ export default function SelectControlOptionsFund<T>({
                         <span className="ellipsis">{placeholderValue || placeholder}</span>
                     </div>
                     <div className={'select-control-icon'}>
-                        <em className={showOptions ? 'mdi mdi-chevron-up' : 'mdi mdi-chevron-down'} />
+                        <em className={classNames('mdi', showOptions ? 'mdi-chevron-up' : 'mdi-chevron-down')} />
                     </div>
                 </label>
 
diff --git a/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsLang.tsx b/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsLang.tsx
index aa5b48628..7cb61a469 100644
--- a/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsLang.tsx
+++ b/react/src/dashboard/components/elements/select-control/templates/SelectControlOptionsLang.tsx
@@ -71,7 +71,7 @@ export default function SelectControlOptionsLang<T>({
                             rawValue?.toString()?.toUpperCase()}
                     </span>
                     <span className={'lang-control-icon'}>
-                        <em className={showOptions ? 'mdi mdi-menu-up' : 'mdi mdi-menu-down'} />
+                        <em className={classNames('mdi', showOptions ? 'mdi-menu-up' : 'mdi-menu-down')} />
                     </span>
                 </label>
 
diff --git a/react/src/dashboard/components/elements/table-config/TableConfig.tsx b/react/src/dashboard/components/elements/table-config/TableConfig.tsx
index aaf8469eb..11424f971 100644
--- a/react/src/dashboard/components/elements/table-config/TableConfig.tsx
+++ b/react/src/dashboard/components/elements/table-config/TableConfig.tsx
@@ -20,7 +20,7 @@ export default function TableConfig({
     const translate = useTranslate();
 
     return (
-        <div className={`block block-table-settings`} ref={settingsRef}>
+        <div className="block block-table-settings" ref={settingsRef}>
             <div className="table-settings-close" onClick={onClose}>
                 <em className="mdi mdi-close" />
             </div>
diff --git a/react/src/dashboard/components/elements/tables/EventLogsTable.tsx b/react/src/dashboard/components/elements/tables/EventLogsTable.tsx
index 19bce08c1..b3c0bee79 100644
--- a/react/src/dashboard/components/elements/tables/EventLogsTable.tsx
+++ b/react/src/dashboard/components/elements/tables/EventLogsTable.tsx
@@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import classNames from 'classnames';
 import useSetProgress from '../../../hooks/useSetProgress';
 import { PaginationData } from '../../../props/ApiResponses';
-import Paginator from '../../../modules/paginator/components/Paginator';
 import LoadingCard from '../loading-card/LoadingCard';
 import FilterItemToggle from './elements/FilterItemToggle';
 import CardHeaderFilter from './elements/CardHeaderFilter';
@@ -15,15 +14,13 @@ import ClickOutside from '../click-outside/ClickOutside';
 import { strLimit } from '../../../helpers/string';
 import usePaginatorService from '../../../modules/paginator/services/usePaginatorService';
 import useTranslate from '../../../hooks/useTranslate';
-import EmptyCard from '../empty-card/EmptyCard';
-import useConfigurableTable from '../../pages/vouchers/hooks/useConfigurableTable';
-import TableTopScroller from './TableTopScroller';
 import TableEmptyValue from '../table-empty-value/TableEmptyValue';
 import CheckboxControl from '../forms/controls/CheckboxControl';
 import useEventLogsExporter from '../../../services/exporters/useEventLogsExporter';
 import useFilterNext from '../../../modules/filter_next/useFilterNext';
 import { ArrayParam, NumberParam, StringParam } from 'use-query-params';
 import FormGroup from '../forms/elements/FormGroup';
+import LoaderTableCard from '../loader-table-card/LoaderTableCard';
 
 export default function EventLogsTable({
     organization,
@@ -68,8 +65,6 @@ export default function EventLogsTable({
         ].filter((item) => hasPermission(organization, permissionsMap[item.key]));
     }, [organization, permissionsMap]);
 
-    const { headElement, configsElement } = useConfigurableTable(eventLogService.getColumns(hideEntity));
-
     const [filterValues, filterValuesActive, filterUpdate, filter] = useFilterNext<{
         q: string;
         loggable?: Array<string>;
@@ -167,7 +162,7 @@ export default function EventLogsTable({
         <div className="card" data-dusk="tableEventLogsContent">
             <div className="card-header">
                 <div className="card-title flex flex-grow">
-                    {title || 'Activiteitenlogboek'} ({logs.meta.total})
+                    {title || 'Activiteitenlogboek'} ({logs?.meta?.total})
                 </div>
                 <div className="card-header-filters">
                     {!hideFilterForm && (
@@ -228,10 +223,10 @@ export default function EventLogsTable({
                                             className="button button-primary button-wide"
                                             onClick={() => exportLogs()}
                                             data-dusk="export"
-                                            disabled={logs.meta.total == 0}>
+                                            disabled={logs?.meta?.total == 0}>
                                             <em className="mdi mdi-download icon-start"> </em>
                                             {translate('components.dropdown.export', {
-                                                total: logs.meta.total,
+                                                total: logs?.meta?.total,
                                             })}
                                         </button>
                                     </div>
@@ -242,93 +237,63 @@ export default function EventLogsTable({
                 </div>
             </div>
 
-            {logs.meta.total > 0 && (
-                <div className="card-section">
-                    <div className="card-block card-block-table">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {logs.data.map((log) => (
-                                        <tr key={log.id} data-dusk={`tableEventLogsRow${log.id}`}>
-                                            <td>
-                                                <div className="text-semibold text-primary nowrap">
-                                                    {log.created_at_locale.split(' - ')[0]}
-                                                </div>
-                                                <div className="text-strong text-md text-muted-dark nowrap">
-                                                    {log.created_at_locale.split(' - ')[1]}
-                                                </div>
-                                            </td>
-
-                                            {!hideEntity && (
-                                                <td dangerouslySetInnerHTML={{ __html: log.loggable_locale }} />
-                                            )}
-
-                                            <td dangerouslySetInnerHTML={{ __html: log.event_locale }} />
-
-                                            {log.identity_email ? (
-                                                <td>{log.identity_email}</td>
-                                            ) : (
-                                                <td className="text-muted">Geen e-mailadres bekend</td>
-                                            )}
-
-                                            <td>
-                                                {log.note && log.note != log.note_substr && (
-                                                    <a
-                                                        className={classNames(
-                                                            'td-icon',
-                                                            'mdi',
-                                                            'mdi-information',
-                                                            'block',
-                                                            'block-tooltip-details',
-                                                            'pull-left',
-                                                            noteTooltip === log.id && 'active',
-                                                        )}
-                                                        onClick={(e) => showNoteTooltip(e, log)}>
-                                                        {noteTooltip && (
-                                                            <ClickOutside
-                                                                className="tooltip-content"
-                                                                onClickOutside={hideNoteTooltip}>
-                                                                <div className="tooltip-text">{log.note}</div>
-                                                            </ClickOutside>
-                                                        )}
-                                                        &nbsp;
-                                                    </a>
-                                                )}
-
-                                                {log.note ? (
-                                                    <div>{log.note_substr}</div>
-                                                ) : (
-                                                    <div className="text-muted">Geen notitie</div>
-                                                )}
-                                            </td>
-                                            <td className={'table-td-actions text-right'}>
-                                                <TableEmptyValue />
-                                            </td>
-                                        </tr>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
-            )}
+            <LoaderTableCard
+                empty={logs?.meta?.total === 0}
+                emptyTitle={'Geen logboeken gevonden'}
+                columns={eventLogService.getColumns(hideEntity)}
+                tableOptions={{ filter, sortable: true }}
+                paginator={{ key: perPageKey, data: logs, filterValues, filterUpdate }}>
+                {logs?.data?.map((log) => (
+                    <tr key={log.id} data-dusk={`tableEventLogsRow${log.id}`}>
+                        <td>
+                            <div className="text-semibold text-primary nowrap">
+                                {log.created_at_locale.split(' - ')[0]}
+                            </div>
+                            <div className="text-strong text-md text-muted-dark nowrap">
+                                {log.created_at_locale.split(' - ')[1]}
+                            </div>
+                        </td>
+
+                        {!hideEntity && <td dangerouslySetInnerHTML={{ __html: log.loggable_locale }} />}
+
+                        <td dangerouslySetInnerHTML={{ __html: log.event_locale }} />
+
+                        {log.identity_email ? (
+                            <td>{log.identity_email}</td>
+                        ) : (
+                            <td className="text-muted">Geen e-mailadres bekend</td>
+                        )}
+
+                        <td>
+                            {log.note && log.note != log.note_substr && (
+                                <a
+                                    className={classNames(
+                                        'td-icon',
+                                        'mdi',
+                                        'mdi-information',
+                                        'block',
+                                        'block-tooltip-details',
+                                        'pull-left',
+                                        noteTooltip === log.id && 'active',
+                                    )}
+                                    onClick={(e) => showNoteTooltip(e, log)}>
+                                    {noteTooltip && (
+                                        <ClickOutside className="tooltip-content" onClickOutside={hideNoteTooltip}>
+                                            <div className="tooltip-text">{log.note}</div>
+                                        </ClickOutside>
+                                    )}
+                                    &nbsp;
+                                </a>
+                            )}
 
-            {logs.meta.total === 0 ? (
-                <EmptyCard title={'Geen logboeken gevonden'} type={'card-section'} />
-            ) : (
-                <div className="card-section">
-                    <Paginator
-                        meta={logs.meta}
-                        filters={filterValues}
-                        perPageKey={perPageKey}
-                        updateFilters={filterUpdate}
-                    />
-                </div>
-            )}
+                            {log.note ? <div>{log.note_substr}</div> : <div className="text-muted">Geen notitie</div>}
+                        </td>
+                        <td className={'table-td-actions text-right'}>
+                            <TableEmptyValue />
+                        </td>
+                    </tr>
+                ))}
+            </LoaderTableCard>
         </div>
     );
 }
diff --git a/react/src/dashboard/components/elements/tables/TableRowActions.tsx b/react/src/dashboard/components/elements/tables/TableRowActions.tsx
index 10f45e672..c0389f4e9 100755
--- a/react/src/dashboard/components/elements/tables/TableRowActions.tsx
+++ b/react/src/dashboard/components/elements/tables/TableRowActions.tsx
@@ -16,7 +16,7 @@ export default function TableRowActions({
     disabled?: boolean;
 }) {
     return (
-        <div className={`table-td-actions-buttons`}>
+        <div className="table-td-actions-buttons">
             {buttons}
             {disabled ? (
                 <button className="button button-text button-menu" data-dusk={dataDusk} disabled={true}>
diff --git a/react/src/dashboard/components/elements/tables/TableTopScrollerConfigTh.tsx b/react/src/dashboard/components/elements/tables/TableTopScrollerConfigTh.tsx
index 698e068c0..a9587d41c 100644
--- a/react/src/dashboard/components/elements/tables/TableTopScrollerConfigTh.tsx
+++ b/react/src/dashboard/components/elements/tables/TableTopScrollerConfigTh.tsx
@@ -13,8 +13,8 @@ export default function TableTopScrollerConfigTh({
     tableConfigCategory: string;
 }) {
     return (
-        <th className="table-th-actions table-th-actions-with-list">
-            {!hidden && (
+        !hidden && (
+            <th className="table-th-actions table-th-actions-with-list">
                 <div className="table-th-actions-list">
                     <div
                         className={classNames(
@@ -25,7 +25,7 @@ export default function TableTopScrollerConfigTh({
                         <em className="mdi mdi-information-variant-circle" />
                     </div>
                 </div>
-            )}
-        </th>
+            </th>
+        )
     );
 }
diff --git a/react/src/dashboard/components/modals/ModalPayoutsUpload.tsx b/react/src/dashboard/components/modals/ModalPayoutsUpload.tsx
index 1a08bf207..4f81663d6 100644
--- a/react/src/dashboard/components/modals/ModalPayoutsUpload.tsx
+++ b/react/src/dashboard/components/modals/ModalPayoutsUpload.tsx
@@ -564,7 +564,7 @@ export default function ModalPayoutsUpload({
 
                                 {csvFile && csvProgress < 2 && (
                                     <div className="csv-upload-actions">
-                                        <div className={classNames(`block block-file`, !csvIsValid && 'has-error')}>
+                                        <div className={classNames('block', 'block-file', !csvIsValid && 'has-error')}>
                                             <div className="block-file-details">
                                                 <div className="file-icon">
                                                     {csvIsValid ? (
@@ -641,7 +641,7 @@ export default function ModalPayoutsUpload({
 
                     <div className="button-group">
                         <button
-                            className={`button button-default`}
+                            className="button button-default"
                             disabled={step == STEP_SET_UP || loading}
                             onClick={() => setStep(STEP_SET_UP)}>
                             Terug
diff --git a/react/src/dashboard/components/modals/ModalPrevalidationRequestsUpload.tsx b/react/src/dashboard/components/modals/ModalPrevalidationRequestsUpload.tsx
index 77f6720d2..2df4dd5db 100644
--- a/react/src/dashboard/components/modals/ModalPrevalidationRequestsUpload.tsx
+++ b/react/src/dashboard/components/modals/ModalPrevalidationRequestsUpload.tsx
@@ -688,7 +688,7 @@ export default function ModalPrevalidationRequestsUpload({
 
                                 {csvFile && csvProgress < CSVProgress.uploading && (
                                     <div className="csv-upload-actions">
-                                        <div className={classNames(`block block-file`, !csvIsValid && 'has-error')}>
+                                        <div className={classNames('block', 'block-file', !csvIsValid && 'has-error')}>
                                             <div className="block-file-details">
                                                 <div className="file-icon">
                                                     {csvIsValid ? (
@@ -746,7 +746,7 @@ export default function ModalPrevalidationRequestsUpload({
                     <div className="button-group">
                         {/* Cancel button */}
                         <button
-                            className={`button button-default`}
+                            className="button button-default"
                             disabled={step == Steps.select_fund}
                             onClick={requestCancel}>
                             {processingMode ? 'Annuleren' : 'Terug'}
diff --git a/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx b/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx
index dbd8ef791..56dd8033d 100644
--- a/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx
+++ b/react/src/dashboard/components/modals/ModalPrevalidationsUpload.tsx
@@ -984,7 +984,7 @@ export default function ModalPrevalidationsUpload({
 
                                 {csvFile && csvProgress < CSVProgress.uploading && (
                                     <div className="csv-upload-actions">
-                                        <div className={classNames(`block block-file`, !csvIsValid && 'has-error')}>
+                                        <div className={classNames('block', 'block-file', !csvIsValid && 'has-error')}>
                                             <div className="block-file-details">
                                                 <div className="file-icon">
                                                     {csvIsValid ? (
@@ -1042,7 +1042,7 @@ export default function ModalPrevalidationsUpload({
                     <div className="button-group">
                         {/* Cancel button */}
                         <button
-                            className={`button button-default`}
+                            className="button button-default"
                             disabled={step == Steps.select_fund || loading}
                             onClick={() => setStep(Steps.select_fund)}>
                             Terug
diff --git a/react/src/dashboard/components/modals/ModalReservationUpload.tsx b/react/src/dashboard/components/modals/ModalReservationUpload.tsx
index 4dd51e6f4..95d2d548d 100644
--- a/react/src/dashboard/components/modals/ModalReservationUpload.tsx
+++ b/react/src/dashboard/components/modals/ModalReservationUpload.tsx
@@ -386,7 +386,7 @@ export default function ModalReservationUpload({
                                 )}
                                 {csvFile && progress < 2 && (
                                     <div className="csv-upload-actions">
-                                        <div className={classNames(`block block-file`, !isValid && 'has-error')}>
+                                        <div className={classNames('block', 'block-file', !isValid && 'has-error')}>
                                             <div className="block-file-details">
                                                 <div className="file-icon">
                                                     {isValid ? (
diff --git a/react/src/dashboard/components/modals/ModalVoucherTransactionsUpload.tsx b/react/src/dashboard/components/modals/ModalVoucherTransactionsUpload.tsx
index 52f1f5b98..f48f53ed6 100644
--- a/react/src/dashboard/components/modals/ModalVoucherTransactionsUpload.tsx
+++ b/react/src/dashboard/components/modals/ModalVoucherTransactionsUpload.tsx
@@ -516,7 +516,7 @@ export default function ModalVoucherTransactionsUpload({
 
                                 {csvFile && progress < 2 && (
                                     <div className="csv-upload-actions">
-                                        <div className={classNames(`block block-file`, !isValid && 'has-error')}>
+                                        <div className={classNames('block', 'block-file', !isValid && 'has-error')}>
                                             <div className="block-file-details">
                                                 <div className="file-icon">
                                                     {isValid ? (
diff --git a/react/src/dashboard/components/modals/ModalVouchersUpload.tsx b/react/src/dashboard/components/modals/ModalVouchersUpload.tsx
index ba0e63f4e..46aaa09b5 100644
--- a/react/src/dashboard/components/modals/ModalVouchersUpload.tsx
+++ b/react/src/dashboard/components/modals/ModalVouchersUpload.tsx
@@ -1104,7 +1104,7 @@ export default function ModalVouchersUpload({
 
                                 {csvFile && csvProgress < 2 && (
                                     <div className="csv-upload-actions">
-                                        <div className={classNames(`block block-file`, !csvIsValid && 'has-error')}>
+                                        <div className={classNames('block', 'block-file', !csvIsValid && 'has-error')}>
                                             <div className="block-file-details">
                                                 <div className="file-icon">
                                                     {csvIsValid ? (
@@ -1232,7 +1232,7 @@ export default function ModalVouchersUpload({
 
                     <div className="button-group">
                         <button
-                            className={`button button-default`}
+                            className="button button-default"
                             disabled={step == STEP_SET_UP || loading}
                             onClick={() => setStep(STEP_SET_UP)}>
                             Terug
diff --git a/react/src/dashboard/components/modals/elements/ModalButton.tsx b/react/src/dashboard/components/modals/elements/ModalButton.tsx
index 98a786868..c68811c3b 100644
--- a/react/src/dashboard/components/modals/elements/ModalButton.tsx
+++ b/react/src/dashboard/components/modals/elements/ModalButton.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import ButtonType from '../../../../props/elements/ButtonType';
+import ButtonType, { ButtonVariant } from '../../../../props/elements/ButtonType';
 import classNames from 'classnames';
 
 export type ModalButton = ButtonType;
@@ -14,19 +14,35 @@ export function ModalButton({
 }: {
     submit?: boolean;
     button: ModalButton;
-    type: string;
+    type: ButtonVariant;
     text: string;
     dusk?: string;
     disabled?: boolean;
 }) {
     const [disabledByClick, setDisabledByClick] = useState(false);
+    const resolvedType = button.type || type;
 
     return (
         <button
             data-dusk={dusk}
             type={submit ? 'submit' : 'button'}
             disabled={disabled || disabledByClick}
-            className={classNames(`button`, `button-${button.type || type}`, button.className || null)}
+            className={classNames(
+                'button',
+                resolvedType === 'default' && 'button-default',
+                resolvedType === 'primary' && 'button-primary',
+                resolvedType === 'primary-outline' && 'button-primary-outline',
+                resolvedType === 'primary-light' && 'button-primary-light',
+                resolvedType === 'primary-variant' && 'button-primary-variant',
+                resolvedType === 'secondary' && 'button-secondary',
+                resolvedType === 'danger' && 'button-danger',
+                resolvedType === 'text' && 'button-text',
+                resolvedType === 'text-primary' && 'button-text-primary',
+                resolvedType === 'text-padless' && 'button-text-padless',
+                resolvedType === 'dashed' && 'button-dashed',
+                resolvedType === 'default-dashed' && 'button-default-dashed',
+                button.className || null,
+            )}
             onClick={(e) => {
                 if (button.disableOnClick === true) {
                     setDisabledByClick(true);
diff --git a/react/src/dashboard/components/pages/auth/SignUpProvider.tsx b/react/src/dashboard/components/pages/auth/SignUpProvider.tsx
index 7738e7aba..5cc4139b9 100644
--- a/react/src/dashboard/components/pages/auth/SignUpProvider.tsx
+++ b/react/src/dashboard/components/pages/auth/SignUpProvider.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import { NavLink, useNavigate } from 'react-router';
 import { getStateRouteUrl } from '../../../modules/state_router/Router';
 import ProgressStorage from '../../../helpers/ProgressStorage';
@@ -1398,9 +1399,10 @@ export default function SignUpProvider() {
                                     {organizationsList?.map((item) => (
                                         <a
                                             key={item.id}
-                                            className={`sign_up-organization ${
-                                                item.id == organization?.id ? 'active' : ''
-                                            }`}
+                                            className={classNames(
+                                                'sign_up-organization',
+                                                item.id == organization?.id && 'active',
+                                            )}
                                             onClick={(e) => {
                                                 e?.preventDefault();
                                                 selectOrganization(item);
@@ -1739,11 +1741,10 @@ export default function SignUpProvider() {
                                         {!office.edit ? (
                                             <div className="sign_up-office">
                                                 <div
-                                                    className={`office-media ${
-                                                        !office.photo?.sizes?.thumbnail
-                                                            ? 'office-media-placeholder'
-                                                            : ''
-                                                    }`}>
+                                                    className={classNames(
+                                                        'office-media',
+                                                        !office.photo?.sizes?.thumbnail && 'office-media-placeholder',
+                                                    )}>
                                                     <img
                                                         alt={''}
                                                         src={
diff --git a/react/src/dashboard/components/pages/auth/elements/EmailProviderLink.tsx b/react/src/dashboard/components/pages/auth/elements/EmailProviderLink.tsx
index f876b4784..5a7ba57b7 100644
--- a/react/src/dashboard/components/pages/auth/elements/EmailProviderLink.tsx
+++ b/react/src/dashboard/components/pages/auth/elements/EmailProviderLink.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { useHelperService } from '../../../../services/HelperService';
 import { Fragment, useMemo } from 'react';
 import useTranslate from '../../../../hooks/useTranslate';
@@ -23,7 +24,10 @@ export default function EmailProviderLink({
         <Fragment>
             {url && (
                 <a
-                    className={`button ${type == 'button' ? 'button-primary' : 'button-text button-text-primary'}`}
+                    className={classNames(
+                        'button',
+                        type == 'button' ? 'button-primary' : 'button-text button-text-primary',
+                    )}
                     href={url}>
                     {icon && <em className={`mdi icon-start mdi-${icon}`} />}
                     {translate('email_service_switch.confirm')}
diff --git a/react/src/dashboard/components/pages/auth/elements/SignUpAvailableFunds.tsx b/react/src/dashboard/components/pages/auth/elements/SignUpAvailableFunds.tsx
index 72238d791..935442525 100644
--- a/react/src/dashboard/components/pages/auth/elements/SignUpAvailableFunds.tsx
+++ b/react/src/dashboard/components/pages/auth/elements/SignUpAvailableFunds.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import Organization from '../../../../props/models/Organization';
 import Paginator from '../../../../modules/paginator/components/Paginator';
 import Fund from '../../../../props/models/Fund';
@@ -206,9 +207,12 @@ export default function SignUpAvailableFunds({
                 {funds?.data.map((fund) => (
                     <div className="card" key={fund.id}>
                         <div
-                            className={`card-section card-section-fund ${fund.applied ? 'applied' : ''} ${
-                                selected[fund.id] ? 'selected' : ''
-                            }`}>
+                            className={classNames(
+                                'card-section',
+                                'card-section-fund',
+                                fund.applied && 'applied',
+                                selected[fund.id] && 'selected',
+                            )}>
                             <div className="card-block-checkbox">
                                 <UIControlCheckbox
                                     className="ui-control-checkbox-primary"
diff --git a/react/src/dashboard/components/pages/auth/elements/SignUpProgress.tsx b/react/src/dashboard/components/pages/auth/elements/SignUpProgress.tsx
index c3c0ef288..1441a745f 100644
--- a/react/src/dashboard/components/pages/auth/elements/SignUpProgress.tsx
+++ b/react/src/dashboard/components/pages/auth/elements/SignUpProgress.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 
 export default function SignUpProgress({
     step,
@@ -10,20 +11,24 @@ export default function SignUpProgress({
     shownSteps?: Array<number>;
 }) {
     return (
-        <div className={`sign_up-progress ${shownSteps.length >= 5 ? 'sign_up-progress-compact' : ''}`}>
+        <div className={classNames('sign_up-progress', shownSteps.length >= 5 && 'sign_up-progress-compact')}>
             <div
-                className={`sign_up-step sign_up-step-info ${
-                    step <= infoSteps ? 'sign_up-step-active' : 'sign_up-step-done'
-                }`}>
+                className={classNames(
+                    'sign_up-step',
+                    'sign_up-step-info',
+                    step <= infoSteps ? 'sign_up-step-active' : 'sign_up-step-done',
+                )}>
                 <div className="sign_up-step-border"></div>
                 <div className="mdi mdi-information-outline"></div>
             </div>
             {shownSteps?.map((stepItem, index) => (
                 <div
                     key={stepItem}
-                    className={`sign_up-step ${step == stepItem + infoSteps ? 'sign_up-step-active' : ''} ${
-                        step > stepItem + infoSteps || step == shownSteps.length + infoSteps ? 'sign_up-step-done' : ''
-                    }`}>
+                    className={classNames(
+                        'sign_up-step',
+                        step == stepItem + infoSteps && 'sign_up-step-active',
+                        (step > stepItem + infoSteps || step == shownSteps.length + infoSteps) && 'sign_up-step-done',
+                    )}>
                     <div className="sign_up-step-border"></div>
                     <div className="sign-up-step-block">Stap {index + 1}</div>
                 </div>
diff --git a/react/src/dashboard/components/pages/auth/elements/sign-up-steps/SignUpStepGeneralInfo.tsx b/react/src/dashboard/components/pages/auth/elements/sign-up-steps/SignUpStepGeneralInfo.tsx
index 555bd8b03..c9935b2bc 100644
--- a/react/src/dashboard/components/pages/auth/elements/sign-up-steps/SignUpStepGeneralInfo.tsx
+++ b/react/src/dashboard/components/pages/auth/elements/sign-up-steps/SignUpStepGeneralInfo.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import useAssetUrl from '../../../../../hooks/useAssetUrl';
 import useTranslate from '../../../../../hooks/useTranslate';
 import SignUpFooter from '../../../../../../webshop/components/elements/sign-up/SignUpFooter';
+import classNames from 'classnames';
 
 export default function SignUpStepGeneralInfo({
     panelType,
@@ -18,9 +19,10 @@ export default function SignUpStepGeneralInfo({
             <div className="sign_up-pane-header">{translate(`sign_up_${panelType}.header.title_step_1`)}</div>
 
             <div
-                className={`sign_up-pane-body ${
-                    panelType == 'validator' ? '' : 'flex flex-vertical flex-vertical-reverse'
-                }`}>
+                className={classNames(
+                    'sign_up-pane-body',
+                    panelType != 'validator' && 'flex flex-vertical flex-vertical-reverse',
+                )}>
                 <div className="sign_up-pane-text">{translate(`sign_up_${panelType}.header.subtitle_step_1`)}</div>
 
                 <div className="sign_up-pane-media">
diff --git a/react/src/dashboard/components/pages/auth/elements/sign-up-steps/SignUpStepOrganizationSelect.tsx b/react/src/dashboard/components/pages/auth/elements/sign-up-steps/SignUpStepOrganizationSelect.tsx
index 88723af3d..f734d5736 100644
--- a/react/src/dashboard/components/pages/auth/elements/sign-up-steps/SignUpStepOrganizationSelect.tsx
+++ b/react/src/dashboard/components/pages/auth/elements/sign-up-steps/SignUpStepOrganizationSelect.tsx
@@ -4,6 +4,7 @@ import Organization from '../../../../../props/models/Organization';
 import { useOrganizationService } from '../../../../../services/OrganizationService';
 import useTranslate from '../../../../../hooks/useTranslate';
 import SignUpFooter from '../../../../../../webshop/components/elements/sign-up/SignUpFooter';
+import classNames from 'classnames';
 
 export default function SignUpStepOrganizationSelect({
     panelType,
@@ -72,9 +73,10 @@ export default function SignUpStepOrganizationSelect({
                     {organizationsList?.map((organization) => (
                         <div
                             key={organization.id}
-                            className={`sign_up-organization ${
-                                organization.id == selectedOrganization?.id ? 'active' : ''
-                            }`}
+                            className={classNames(
+                                'sign_up-organization',
+                                organization.id == selectedOrganization?.id && 'active',
+                            )}
                             onClick={() => selectOrganization(organization)}>
                             <div className="sign_up-organization-logo">
                                 <img
diff --git a/react/src/dashboard/components/pages/auth/elements/sign-up-steps/SignUpStepProfileCreate.tsx b/react/src/dashboard/components/pages/auth/elements/sign-up-steps/SignUpStepProfileCreate.tsx
index d931abe94..af9fb7ee8 100644
--- a/react/src/dashboard/components/pages/auth/elements/sign-up-steps/SignUpStepProfileCreate.tsx
+++ b/react/src/dashboard/components/pages/auth/elements/sign-up-steps/SignUpStepProfileCreate.tsx
@@ -13,6 +13,7 @@ import ProgressStorage from '../../../../../helpers/ProgressStorage';
 import { authContext } from '../../../../../contexts/AuthContext';
 import useTranslate from '../../../../../hooks/useTranslate';
 import { makeQrCodeContent } from '../../../../../helpers/utils';
+import classNames from 'classnames';
 
 export default function SignUpStepProfileCreate({ panelType }: { panelType: 'sponsor' | 'validator' }) {
     const envData = useEnvData();
@@ -138,9 +139,12 @@ export default function SignUpStepProfileCreate({ panelType }: { panelType: 'spo
                                     <label className="form-label">&nbsp;</label>
                                     <button
                                         type="submit"
-                                        className={`button button-primary button-fill ${
-                                            formSignUp.values.email ? '' : 'button-disabled'
-                                        }`}>
+                                        className={classNames(
+                                            'button',
+                                            'button-primary',
+                                            'button-fill',
+                                            !formSignUp.values.email && 'button-disabled',
+                                        )}>
                                         {translate(`sign_up_${panelType}.app_instruction.create_profile`)}
                                     </button>
                                 </div>
diff --git a/react/src/dashboard/components/pages/bank-connections/BankConnections.tsx b/react/src/dashboard/components/pages/bank-connections/BankConnections.tsx
index 2a0cc71a1..fc6960ea7 100644
--- a/react/src/dashboard/components/pages/bank-connections/BankConnections.tsx
+++ b/react/src/dashboard/components/pages/bank-connections/BankConnections.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import useAssetUrl from '../../../hooks/useAssetUrl';
 import 'react-image-crop/dist/ReactCrop.css';
 import { PaginationData, ResponseError } from '../../../props/ApiResponses';
@@ -245,7 +246,14 @@ export default function BankConnections() {
                                 <EmptyCard
                                     title={'Bunq integratie'}
                                     imageIconImg={assetUrl('/assets/img/bunq-logo.jpg')}
-                                    button={{ text: 'Selecteer', type: 'primary', onClick: () => selectBank('bunq') }}
+                                    actions={
+                                        <button
+                                            type="button"
+                                            className="button button-primary"
+                                            onClick={() => selectBank('bunq')}>
+                                            Selecteer
+                                        </button>
+                                    }
                                 />
                             </div>
 
@@ -253,7 +261,14 @@ export default function BankConnections() {
                                 <EmptyCard
                                     title={'BNG integratie'}
                                     imageIconImg={assetUrl('/assets/img/bng-logo.jpg')}
-                                    button={{ text: 'Selecteer', type: 'primary', onClick: () => selectBank('bng') }}
+                                    actions={
+                                        <button
+                                            type="button"
+                                            className="button button-primary"
+                                            onClick={() => selectBank('bng')}>
+                                            Selecteer
+                                        </button>
+                                    }
                                 />
                             </div>
                         </div>
@@ -267,12 +282,18 @@ export default function BankConnections() {
                             imageIconImg={assetUrl(
                                 bank?.key === 'bunq' ? '/assets/img/bunq-logo.jpg' : '/assets/img/bng-logo.jpg',
                             )}
-                            button={{
-                                text: 'Koppelen',
-                                type: 'primary',
-                                icon: submittingConnection ? 'loading mdi-spin icon-start' : 'link-variant icon-start',
-                                onClick: () => makeBankConnection(bank),
-                            }}
+                            actions={
+                                <button className={'button button-primary'} onClick={() => makeBankConnection(bank)}>
+                                    <em
+                                        className={classNames(
+                                            'mdi',
+                                            'icon-start',
+                                            submittingConnection ? 'mdi-loading mdi-spin' : 'mdi-link-variant',
+                                        )}
+                                    />
+                                    Koppelen
+                                </button>
+                            }
                         />
                     )}
                 </Fragment>
@@ -352,7 +373,10 @@ export default function BankConnections() {
                                                 <tr key={bankConnection.id}>
                                                     <td>{bankConnection.created_at_locale}</td>
                                                     <td>{bankConnection.bank.name}</td>
-                                                    <td className={bankConnection.expire_at ? '' : 'text-muted'}>
+                                                    <td
+                                                        className={classNames(
+                                                            !bankConnection.expire_at && 'text-muted',
+                                                        )}>
                                                         {bankConnection.expire_at
                                                             ? bankConnection.expire_at_locale
                                                             : 'Geen verloopdatum'}
diff --git a/react/src/dashboard/components/pages/employees/Employees.tsx b/react/src/dashboard/components/pages/employees/Employees.tsx
index 52b77f789..1713e7e1d 100644
--- a/react/src/dashboard/components/pages/employees/Employees.tsx
+++ b/react/src/dashboard/components/pages/employees/Employees.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useCallback, useContext, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import { mainContext } from '../../../contexts/MainContext';
 import { useEmployeeService } from '../../../services/EmployeeService';
 import { NavLink } from 'react-router';
@@ -6,7 +7,6 @@ import { hasPermission } from '../../../helpers/utils';
 import { getStateRouteUrl } from '../../../modules/state_router/Router';
 import { strLimit } from '../../../helpers/string';
 import Employee from '../../../props/models/Employee';
-import Paginator from '../../../modules/paginator/components/Paginator';
 import ModalEmployeeEdit from '../../modals/ModalEmployeeEdit';
 import ModalDangerZone from '../../modals/ModalDangerZone';
 import ModalTransferOrganizationOwnership from '../../modals/ModalTransferOrganizationOwnership';
@@ -23,8 +23,6 @@ import useSetProgress from '../../../hooks/useSetProgress';
 import usePushApiError from '../../../hooks/usePushApiError';
 import useIsProviderPanel from '../../../hooks/useIsProviderPanel';
 import TableEmptyValue from '../../elements/table-empty-value/TableEmptyValue';
-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';
@@ -56,8 +54,6 @@ export default function Employees() {
     const [paginatorKey] = useState('employees');
     const [adminEmployees, setAdminEmployees] = useState([]);
 
-    const { headElement, configsElement } = useConfigurableTable(employeeService.getColumns(isProviderPanel));
-
     const [filterValues, filterValuesActive, filterUpdate] = useFilterNext<{
         q: string;
         per_page?: number;
@@ -221,7 +217,7 @@ export default function Employees() {
     return (
         <div className="card" data-dusk="tableEmployeeContent">
             <div className="card-header">
-                <div className="card-title flex flex-grow">Medewerkers ({employees?.meta.total})</div>
+                <div className="card-title flex flex-grow">Medewerkers ({employees?.meta?.total})</div>
                 <div className="card-header-filters">
                     <div className="block block-inline-filters">
                         {activeOrganization.allow_2fa_restrictions &&
@@ -270,181 +266,140 @@ export default function Employees() {
 
             <LoaderTableCard
                 loading={loading}
-                empty={employees?.meta.total == 0}
-                emptyTitle={'Geen medewerkers gevonden'}>
-                <div className="card-section">
-                    <div className="card-block card-block-table">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {employees?.data.map((employee: Employee) => (
-                                        <tr key={employee.id} data-dusk={`tableEmployeeRow${employee.id}`}>
-                                            <td id={'employee_email'} data-dusk={'employeeEmail'}>
-                                                <div className={'text-primary'}>
-                                                    {employee.email || strLimit(employee.identity_address, 32)}
-                                                </div>
-                                                {activeOrganization.identity_address != employee.identity_address ? (
-                                                    <div className={'text-muted text-md'}>
-                                                        {strLimit(rolesList(employee) || 'Geen...', 32)}
-                                                    </div>
-                                                ) : (
-                                                    <div
-                                                        className="text-muted text-md"
-                                                        data-dusk={`owner${employee.id}`}>
-                                                        {translate('organization_employees.labels.owner')}
-                                                    </div>
-                                                )}
-                                            </td>
-                                            {isProviderPanel && (
-                                                <Fragment>
-                                                    <td>
-                                                        {employee?.branch?.name && (
-                                                            <div className="text-primary">
-                                                                {strLimit(employee.branch?.name, 32)}
-                                                            </div>
-                                                        )}
-
-                                                        {employee?.branch?.id && (
-                                                            <div>
-                                                                ID <strong>{strLimit(employee.branch?.id, 32)}</strong>
-                                                            </div>
-                                                        )}
+                empty={employees?.meta?.total == 0}
+                emptyTitle={'Geen medewerkers gevonden'}
+                columns={employeeService.getColumns(isProviderPanel)}
+                paginator={{ key: paginatorKey, data: employees, filterValues, filterUpdate }}>
+                {employees?.data?.map((employee: Employee) => (
+                    <tr key={employee.id} data-dusk={`tableEmployeeRow${employee.id}`}>
+                        <td id={'employee_email'} data-dusk={'employeeEmail'}>
+                            <div className={'text-primary'}>
+                                {employee.email || strLimit(employee.identity_address, 32)}
+                            </div>
+                            {activeOrganization.identity_address != employee.identity_address ? (
+                                <div className={'text-muted text-md'}>
+                                    {strLimit(rolesList(employee) || 'Geen...', 32)}
+                                </div>
+                            ) : (
+                                <div className="text-muted text-md" data-dusk={`owner${employee.id}`}>
+                                    {translate('organization_employees.labels.owner')}
+                                </div>
+                            )}
+                        </td>
+                        {isProviderPanel && (
+                            <Fragment>
+                                <td>
+                                    {employee?.branch?.name && (
+                                        <div className="text-primary">{strLimit(employee.branch?.name, 32)}</div>
+                                    )}
+
+                                    {employee?.branch?.id && (
+                                        <div>
+                                            ID <strong>{strLimit(employee.branch?.id, 32)}</strong>
+                                        </div>
+                                    )}
+
+                                    {!employee.branch?.id && !employee.branch?.name && <TableEmptyValue />}
+                                </td>
+                                <td>
+                                    <div className={classNames(!employee?.branch?.number && 'text-muted')}>
+                                        {strLimit(employee.branch?.number?.toString(), 32) || <TableEmptyValue />}
+                                    </div>
+                                </td>
+                            </Fragment>
+                        )}
+                        <td>
+                            {employee.is_2fa_configured && (
+                                <div className="td-state-2fa">
+                                    <div className="state-2fa-icon">
+                                        <em className="mdi mdi-shield-check-outline text-primary" />
+                                    </div>
+                                    <div className="state-2fa-label" data-dusk={`configured2fa${employee.id}`}>
+                                        Actief
+                                    </div>
+                                </div>
+                            )}
 
-                                                        {!employee.branch?.id && !employee.branch?.name && (
-                                                            <TableEmptyValue />
-                                                        )}
-                                                    </td>
-                                                    <td>
-                                                        <div className={employee?.branch?.number ? '' : 'text-muted'}>
-                                                            {strLimit(employee.branch?.number?.toString(), 32) || (
-                                                                <TableEmptyValue />
-                                                            )}
-                                                        </div>
-                                                    </td>
-                                                </Fragment>
+                            {!employee.is_2fa_configured && (
+                                <div className="td-state-2fa">
+                                    <div className="state-2fa-icon">
+                                        <em className="mdi mdi-shield-off-outline text-muted" />
+                                    </div>
+                                    <div className="state-2fa-label" data-dusk={`notConfigured2fa${employee.id}`}>
+                                        Nee
+                                    </div>
+                                </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'}>
+                                <TableRowActions
+                                    dataDusk={'btnEmployeeMenu'}
+                                    content={(e) => (
+                                        <div className="dropdown dropdown-actions">
+                                            {canEditEmployee(employee) && (
+                                                <a
+                                                    className="dropdown-item"
+                                                    data-dusk={`btnEmployeeEdit${employee.id}`}
+                                                    onClick={() => {
+                                                        editEmployee(employee);
+                                                        e.close();
+                                                    }}>
+                                                    {translate('organization_employees.buttons.adjust')}
+                                                </a>
                                             )}
-                                            <td>
-                                                {employee.is_2fa_configured && (
-                                                    <div className="td-state-2fa">
-                                                        <div className="state-2fa-icon">
-                                                            <em className="mdi mdi-shield-check-outline text-primary" />
-                                                        </div>
-                                                        <div
-                                                            className="state-2fa-label"
-                                                            data-dusk={`configured2fa${employee.id}`}>
-                                                            Actief
-                                                        </div>
-                                                    </div>
-                                                )}
 
-                                                {!employee.is_2fa_configured && (
-                                                    <div className="td-state-2fa">
-                                                        <div className="state-2fa-icon">
-                                                            <em className="mdi mdi-shield-off-outline text-muted" />
-                                                        </div>
-                                                        <div
-                                                            className="state-2fa-label"
-                                                            data-dusk={`notConfigured2fa${employee.id}`}>
-                                                            Nee
-                                                        </div>
-                                                    </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'}>
-                                                    <TableRowActions
-                                                        dataDusk={'btnEmployeeMenu'}
-                                                        content={(e) => (
-                                                            <div className="dropdown dropdown-actions">
-                                                                {canEditEmployee(employee) && (
-                                                                    <a
-                                                                        className="dropdown-item"
-                                                                        data-dusk={`btnEmployeeEdit${employee.id}`}
-                                                                        onClick={() => {
-                                                                            editEmployee(employee);
-                                                                            e.close();
-                                                                        }}>
-                                                                        {translate(
-                                                                            'organization_employees.buttons.adjust',
-                                                                        )}
-                                                                    </a>
-                                                                )}
-
-                                                                {authIdentity.address !== employee.identity_address && (
-                                                                    <a
-                                                                        className="dropdown-item"
-                                                                        data-dusk={`btnEmployeeDelete${employee.id}`}
-                                                                        onClick={() => {
-                                                                            deleteEmployee(employee);
-                                                                            e.close();
-                                                                        }}>
-                                                                        {translate(
-                                                                            'organization_employees.buttons.delete',
-                                                                        )}
-                                                                    </a>
-                                                                )}
-                                                            </div>
-                                                        )}
-                                                    />
-                                                </td>
-                                            ) : (
-                                                <td className={'table-td-actions text-right'}>
-                                                    {adminEmployees.length > 0 &&
-                                                    authIdentity.address === activeOrganization.identity_address ? (
-                                                        <TableRowActions
-                                                            dataDusk={'btnEmployeeMenu'}
-                                                            content={(e) => (
-                                                                <div className="dropdown dropdown-actions">
-                                                                    <a
-                                                                        className="dropdown-item"
-                                                                        data-dusk={`btnEmployeeTransferOwnership${employee.id}`}
-                                                                        onClick={() => {
-                                                                            transferOwnership(adminEmployees);
-                                                                            e.close();
-                                                                        }}>
-                                                                        {translate(
-                                                                            'organization_employees.buttons.transfer_ownership',
-                                                                        )}
-                                                                    </a>
-                                                                </div>
-                                                            )}
-                                                        />
-                                                    ) : (
-                                                        <span className={'text-muted'}>
-                                                            {translate('organization_employees.labels.owner')}
-                                                        </span>
-                                                    )}
-                                                </td>
+                                            {authIdentity.address !== employee.identity_address && (
+                                                <a
+                                                    className="dropdown-item"
+                                                    data-dusk={`btnEmployeeDelete${employee.id}`}
+                                                    onClick={() => {
+                                                        deleteEmployee(employee);
+                                                        e.close();
+                                                    }}>
+                                                    {translate('organization_employees.buttons.delete')}
+                                                </a>
                                             )}
-                                        </tr>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
-
-                {employees?.meta.total > 0 && (
-                    <div className="card-section">
-                        <Paginator
-                            meta={employees.meta}
-                            filters={filterValues}
-                            updateFilters={filterUpdate}
-                            perPageKey={paginatorKey}
-                        />
-                    </div>
-                )}
+                                        </div>
+                                    )}
+                                />
+                            </td>
+                        ) : (
+                            <td className={'table-td-actions text-right'}>
+                                {adminEmployees.length > 0 &&
+                                authIdentity.address === activeOrganization.identity_address ? (
+                                    <TableRowActions
+                                        dataDusk={'btnEmployeeMenu'}
+                                        content={(e) => (
+                                            <div className="dropdown dropdown-actions">
+                                                <a
+                                                    className="dropdown-item"
+                                                    data-dusk={`btnEmployeeTransferOwnership${employee.id}`}
+                                                    onClick={() => {
+                                                        transferOwnership(adminEmployees);
+                                                        e.close();
+                                                    }}>
+                                                    {translate('organization_employees.buttons.transfer_ownership')}
+                                                </a>
+                                            </div>
+                                        )}
+                                    />
+                                ) : (
+                                    <span className={'text-muted'}>
+                                        {translate('organization_employees.labels.owner')}
+                                    </span>
+                                )}
+                            </td>
+                        )}
+                    </tr>
+                ))}
             </LoaderTableCard>
         </div>
     );
diff --git a/react/src/dashboard/components/pages/extra-payments/ExtraPayments.tsx b/react/src/dashboard/components/pages/extra-payments/ExtraPayments.tsx
index 7d9c12cee..d6913f1e5 100644
--- a/react/src/dashboard/components/pages/extra-payments/ExtraPayments.tsx
+++ b/react/src/dashboard/components/pages/extra-payments/ExtraPayments.tsx
@@ -1,28 +1,25 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
-import LoadingCard from '../../elements/loading-card/LoadingCard';
+import LoaderTableCard from '../../elements/loader-table-card/LoaderTableCard';
 import useSetProgress from '../../../hooks/useSetProgress';
 import useExtraPaymentService from '../../../services/ExtraPaymentService';
 import ExtraPayment from '../../../props/models/ExtraPayment';
 import { PaginationData } from '../../../props/ApiResponses';
 import { strLimit } from '../../../helpers/string';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
-import Paginator from '../../../modules/paginator/components/Paginator';
 import FilterItemToggle from '../../elements/tables/elements/FilterItemToggle';
 import SelectControl from '../../elements/select-control/SelectControl';
 import CardHeaderFilter from '../../elements/tables/elements/CardHeaderFilter';
 import Fund from '../../../props/models/Fund';
 import { useFundService } from '../../../services/FundService';
 import usePaginatorService from '../../../modules/paginator/services/usePaginatorService';
-import EmptyCard from '../../elements/empty-card/EmptyCard';
 import useTranslate from '../../../hooks/useTranslate';
 import usePushApiError from '../../../hooks/usePushApiError';
-import TableTopScroller from '../../elements/tables/TableTopScroller';
-import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
 import SelectControlOptionsFund from '../../elements/select-control/templates/SelectControlOptionsFund';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
 import useFilterNext from '../../../modules/filter_next/useFilterNext';
 import { NumberParam, StringParam } from 'use-query-params';
+import LoadingCard from '../../elements/loading-card/LoadingCard';
 
 export default function ExtraPayments() {
     const activeOrganization = useActiveOrganization();
@@ -68,11 +65,6 @@ export default function ExtraPayments() {
         },
     );
 
-    const { headElement, configsElement } = useConfigurableTable(extraPaymentService.getColumns(), {
-        sortable: true,
-        filter: filter,
-    });
-
     const fetchExtraPayments = useCallback(() => {
         setProgress(0);
         setLoading(true);
@@ -115,7 +107,7 @@ export default function ExtraPayments() {
         <div className="card">
             <div className="card-header">
                 <div className="card-title flex flex-grow">
-                    {translate('extra_payments.header.title')} ({extraPayments.meta.total})
+                    {translate('extra_payments.header.title')} ({extraPayments?.meta?.total})
                 </div>
 
                 <div className="card-header-filters">
@@ -187,77 +179,49 @@ export default function ExtraPayments() {
                 </div>
             </div>
 
-            {!loading && extraPayments?.meta.total > 0 && (
-                <div className="card-section">
-                    <div className="card-block card-block-table">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {extraPayments?.data.map((extraPayment) => (
-                                        <tr key={extraPayment.id} data-dusk="extraPaymentItem">
-                                            <td>{extraPayment.id}</td>
-                                            <td>{extraPayment.reservation.price_locale}</td>
-                                            <td>{extraPayment.amount_locale}</td>
-                                            <td>{extraPayment.method}</td>
-                                            <td>
-                                                <strong className="text-primary">
-                                                    {extraPayment.paid_at_locale.split(' - ')[0]}
-                                                </strong>
-                                                <br />
-                                                <strong className="text-strong text-md text-muted-dark">
-                                                    {extraPayment.paid_at_locale.split(' - ')[1]}
-                                                </strong>
-                                            </td>
-                                            <td title={extraPayment.reservation.fund.name || ''}>
-                                                {strLimit(extraPayment.reservation.fund.name, 25)}
-                                            </td>
-                                            <td title={extraPayment.reservation.product?.name || '-'}>
-                                                {strLimit(extraPayment.reservation.product?.name || '-', 25)}
-                                            </td>
-                                            <td title={extraPayment.reservation.product?.organization?.name || '-'}>
-                                                {strLimit(
-                                                    extraPayment.reservation.product?.organization?.name || '-',
-                                                    25,
-                                                )}
-                                            </td>
-                                            <td className="td-narrow text-right">
-                                                <StateNavLink
-                                                    name={DashboardRoutes.EXTRA_PAYMENT}
-                                                    params={{
-                                                        organizationId: activeOrganization.id,
-                                                        id: extraPayment.id,
-                                                    }}
-                                                    className="button button-sm button-primary button-icon pull-right">
-                                                    <em className="mdi mdi-eye-outline icon-start" />
-                                                </StateNavLink>
-                                            </td>
-                                        </tr>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
-            )}
-
-            {!loading && extraPayments.meta.total === 0 && (
-                <EmptyCard type="card-section" title="Geen extra payments gevonden" />
-            )}
-
-            {!loading && extraPayments?.meta && (
-                <div className="card-section">
-                    <Paginator
-                        meta={extraPayments.meta}
-                        filters={filterValues}
-                        updateFilters={filterUpdate}
-                        perPageKey={paginatorKey}
-                    />
-                </div>
-            )}
+            <LoaderTableCard
+                loading={loading}
+                empty={extraPayments?.meta?.total === 0}
+                emptyTitle="Geen extra payments gevonden"
+                columns={extraPaymentService.getColumns()}
+                tableOptions={{ sortable: true, filter }}
+                paginator={{ key: paginatorKey, data: extraPayments, filterValues, filterUpdate }}>
+                {extraPayments?.data?.map((extraPayment) => (
+                    <tr key={extraPayment.id} data-dusk="extraPaymentItem">
+                        <td>{extraPayment.id}</td>
+                        <td>{extraPayment.reservation.price_locale}</td>
+                        <td>{extraPayment.amount_locale}</td>
+                        <td>{extraPayment.method}</td>
+                        <td>
+                            <strong className="text-primary">{extraPayment.paid_at_locale.split(' - ')[0]}</strong>
+                            <br />
+                            <strong className="text-strong text-md text-muted-dark">
+                                {extraPayment.paid_at_locale.split(' - ')[1]}
+                            </strong>
+                        </td>
+                        <td title={extraPayment.reservation.fund.name || ''}>
+                            {strLimit(extraPayment.reservation.fund.name, 25)}
+                        </td>
+                        <td title={extraPayment.reservation.product?.name || '-'}>
+                            {strLimit(extraPayment.reservation.product?.name || '-', 25)}
+                        </td>
+                        <td title={extraPayment.reservation.product?.organization?.name || '-'}>
+                            {strLimit(extraPayment.reservation.product?.organization?.name || '-', 25)}
+                        </td>
+                        <td className="td-narrow text-right">
+                            <StateNavLink
+                                name={DashboardRoutes.EXTRA_PAYMENT}
+                                params={{
+                                    organizationId: activeOrganization.id,
+                                    id: extraPayment.id,
+                                }}
+                                className="button button-sm button-primary button-icon pull-right">
+                                <em className="mdi mdi-eye-outline icon-start" />
+                            </StateNavLink>
+                        </td>
+                    </tr>
+                ))}
+            </LoaderTableCard>
         </div>
     );
 }
diff --git a/react/src/dashboard/components/pages/feature/elements/FaqItem.tsx b/react/src/dashboard/components/pages/feature/elements/FaqItem.tsx
index 3909da07c..f55a4c7f5 100644
--- a/react/src/dashboard/components/pages/feature/elements/FaqItem.tsx
+++ b/react/src/dashboard/components/pages/feature/elements/FaqItem.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useState } from 'react';
+import classNames from 'classnames';
 
 export default function FaqItem({
     title,
@@ -11,7 +12,7 @@ export default function FaqItem({
 
     return (
         <Fragment>
-            <div className={`feature-faq-item ${active ? 'active' : ''}`} onClick={() => setActive(!active)}>
+            <div className={classNames('feature-faq-item', active && 'active')} onClick={() => setActive(!active)}>
                 <div className="feature-faq-item-title">
                     {title}
                     <div className="feature-faq-item-icon mdi mdi-menu-down" />
diff --git a/react/src/dashboard/components/pages/financial-dashboard-overview/elements/FinancialOverviewFundsBudgetTable.tsx b/react/src/dashboard/components/pages/financial-dashboard-overview/elements/FinancialOverviewFundsBudgetTable.tsx
index b2c0a9d90..d06d04588 100644
--- a/react/src/dashboard/components/pages/financial-dashboard-overview/elements/FinancialOverviewFundsBudgetTable.tsx
+++ b/react/src/dashboard/components/pages/financial-dashboard-overview/elements/FinancialOverviewFundsBudgetTable.tsx
@@ -10,10 +10,9 @@ import SelectControl from '../../../elements/select-control/SelectControl';
 import useSetProgress from '../../../../hooks/useSetProgress';
 import LoadingCard from '../../../elements/loading-card/LoadingCard';
 import { useFundService } from '../../../../services/FundService';
-import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
 import useFundExporter from '../../../../services/exporters/useFundExporter';
+import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
 
 export default function FinancialOverviewFundsBudgetTable({
     years,
@@ -46,8 +45,6 @@ export default function FinancialOverviewFundsBudgetTable({
 
     const fundService = useFundService();
 
-    const { headElement, configsElement } = useConfigurableTable(fundService.getColumnsBudget());
-
     const exportFunds = useCallback(() => {
         fundExporter.exportData(organization.id, true, year);
     }, [fundExporter, organization.id, year]);
@@ -102,41 +99,29 @@ export default function FinancialOverviewFundsBudgetTable({
             {financialOverview?.year != year ? (
                 <LoadingCard />
             ) : (
-                <div className="card-section">
-                    <div className="card-block card-block-table card-block-financial">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                {budgetFunds.map((fund) => (
-                                    <FinancialOverviewFundsBudgetTableItem key={fund.id} fund={fund} />
-                                ))}
-
-                                <tbody>
-                                    <tr className="table-totals">
-                                        <td>{translate('financial_dashboard_overview.labels.total')}</td>
-                                        <td>{financialOverview?.funds.vouchers_amount_locale}</td>
-                                        <td>{financialOverview?.funds.active_vouchers_amount_locale}</td>
-                                        <td>{financialOverview?.funds.inactive_vouchers_amount_locale}</td>
-                                        <td>{financialOverview?.funds.deactivated_vouchers_amount_locale}</td>
-                                        <td>{financialOverview?.funds.budget_used_active_vouchers_locale}</td>
-                                        <td>
-                                            {currencyFormat(
-                                                parseFloat(financialOverview?.funds.vouchers_amount) -
-                                                    financialOverview?.funds.budget_used_active_vouchers,
-                                            )}
-                                        </td>
-                                        <td className={'table-td-actions text-right'}>
-                                            <TableEmptyValue />
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
+                <LoaderTableCard columns={fundService.getColumnsBudget()}>
+                    {budgetFunds.map((fund) => (
+                        <FinancialOverviewFundsBudgetTableItem key={fund.id} fund={fund} />
+                    ))}
+
+                    <tr className="table-totals">
+                        <td>{translate('financial_dashboard_overview.labels.total')}</td>
+                        <td>{financialOverview?.funds.vouchers_amount_locale}</td>
+                        <td>{financialOverview?.funds.active_vouchers_amount_locale}</td>
+                        <td>{financialOverview?.funds.inactive_vouchers_amount_locale}</td>
+                        <td>{financialOverview?.funds.deactivated_vouchers_amount_locale}</td>
+                        <td>{financialOverview?.funds.budget_used_active_vouchers_locale}</td>
+                        <td>
+                            {currencyFormat(
+                                parseFloat(financialOverview?.funds.vouchers_amount) -
+                                    financialOverview?.funds.budget_used_active_vouchers,
+                            )}
+                        </td>
+                        <td className={'table-td-actions text-right'}>
+                            <TableEmptyValue />
+                        </td>
+                    </tr>
+                </LoaderTableCard>
             )}
         </div>
     );
diff --git a/react/src/dashboard/components/pages/financial-dashboard-overview/elements/FinancialOverviewFundsBudgetTableItem.tsx b/react/src/dashboard/components/pages/financial-dashboard-overview/elements/FinancialOverviewFundsBudgetTableItem.tsx
index 27dc77195..f1a0c3a00 100644
--- a/react/src/dashboard/components/pages/financial-dashboard-overview/elements/FinancialOverviewFundsBudgetTableItem.tsx
+++ b/react/src/dashboard/components/pages/financial-dashboard-overview/elements/FinancialOverviewFundsBudgetTableItem.tsx
@@ -51,7 +51,7 @@ export default function FinancialOverviewFundsBudgetTableItem({ fund }: { fund:
     );
 
     return (
-        <tbody>
+        <Fragment>
             <tr
                 className={classNames('tr-clickable', !collapsed && 'table-separator')}
                 onClick={() => setCollapsed(!collapsed)}>
@@ -201,6 +201,6 @@ export default function FinancialOverviewFundsBudgetTableItem({ fund }: { fund:
                     )}
                 </Fragment>
             )}
-        </tbody>
+        </Fragment>
     );
 }
diff --git a/react/src/dashboard/components/pages/financial-dashboard-overview/elements/FinancialOverviewFundsTable.tsx b/react/src/dashboard/components/pages/financial-dashboard-overview/elements/FinancialOverviewFundsTable.tsx
index b1e40bb5d..604ad3421 100644
--- a/react/src/dashboard/components/pages/financial-dashboard-overview/elements/FinancialOverviewFundsTable.tsx
+++ b/react/src/dashboard/components/pages/financial-dashboard-overview/elements/FinancialOverviewFundsTable.tsx
@@ -9,9 +9,8 @@ import SelectControl from '../../../elements/select-control/SelectControl';
 import LoadingCard from '../../../elements/loading-card/LoadingCard';
 import useSetProgress from '../../../../hooks/useSetProgress';
 import { useFundService } from '../../../../services/FundService';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
-import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
 import useFundExporter from '../../../../services/exporters/useFundExporter';
+import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
 
 export default function FinancialOverviewFundsTable({
     years,
@@ -40,8 +39,6 @@ export default function FinancialOverviewFundsTable({
     const [funds, setFunds] = useState<Array<Fund>>(null);
     const [financialOverview, setFinancialOverview] = useState<FinancialOverview>(null);
 
-    const { headElement, configsElement } = useConfigurableTable(fundService.getColumnsBalance());
-
     const exportFunds = useCallback(() => {
         fundExporter.exportData(organization.id, false, year);
     }, [fundExporter, organization.id, year]);
@@ -100,43 +97,31 @@ export default function FinancialOverviewFundsTable({
             {financialOverview?.year != year ? (
                 <LoadingCard />
             ) : (
-                <div className="card-section">
-                    <div className="card-block card-block-table card-block-financial">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {funds.map((fund) => (
-                                        <tr key={fund.id}>
-                                            <td>{fund.name}</td>
-                                            <td>{fund.budget?.total_locale || <TableEmptyValue />}</td>
-                                            <td>{fund.budget?.used_locale || <TableEmptyValue />}</td>
-                                            <td>{fund.budget?.left_locale || <TableEmptyValue />}</td>
-                                            <td>{fund.budget?.transaction_costs_locale}</td>
-                                            <td className={'table-td-actions text-right'}>
-                                                <TableEmptyValue />
-                                            </td>
-                                        </tr>
-                                    ))}
+                <LoaderTableCard columns={fundService.getColumnsBalance()}>
+                    {funds.map((fund) => (
+                        <tr key={fund.id}>
+                            <td>{fund.name}</td>
+                            <td>{fund.budget?.total_locale || <TableEmptyValue />}</td>
+                            <td>{fund.budget?.used_locale || <TableEmptyValue />}</td>
+                            <td>{fund.budget?.left_locale || <TableEmptyValue />}</td>
+                            <td>{fund.budget?.transaction_costs_locale}</td>
+                            <td className={'table-td-actions text-right'}>
+                                <TableEmptyValue />
+                            </td>
+                        </tr>
+                    ))}
 
-                                    <tr className="table-totals">
-                                        <td>{translate('financial_dashboard_overview.labels.total')}</td>
-                                        <td>{financialOverview?.funds.budget_locale}</td>
-                                        <td>{financialOverview?.funds.budget_used_locale}</td>
-                                        <td>{financialOverview?.funds.budget_left_locale}</td>
-                                        <td>{financialOverview?.funds.transaction_costs_locale}</td>
-                                        <td className={'table-td-actions text-right'}>
-                                            <TableEmptyValue />
-                                        </td>
-                                    </tr>
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
+                    <tr className="table-totals">
+                        <td>{translate('financial_dashboard_overview.labels.total')}</td>
+                        <td>{financialOverview?.funds.budget_locale}</td>
+                        <td>{financialOverview?.funds.budget_used_locale}</td>
+                        <td>{financialOverview?.funds.budget_left_locale}</td>
+                        <td>{financialOverview?.funds.transaction_costs_locale}</td>
+                        <td className={'table-td-actions text-right'}>
+                            <TableEmptyValue />
+                        </td>
+                    </tr>
+                </LoaderTableCard>
             )}
         </div>
     );
diff --git a/react/src/dashboard/components/pages/financial-dashboard/elements/FinancialFilters.tsx b/react/src/dashboard/components/pages/financial-dashboard/elements/FinancialFilters.tsx
index b8b33f6ea..872acfc52 100644
--- a/react/src/dashboard/components/pages/financial-dashboard/elements/FinancialFilters.tsx
+++ b/react/src/dashboard/components/pages/financial-dashboard/elements/FinancialFilters.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import FinancialFilter from './FinancialFilter';
 import {
     addMonths,
@@ -516,7 +517,7 @@ export default function FinancialFilters({
                         {yearsList.map((item, index) => (
                             <div
                                 key={index}
-                                className={`timeframe-item ${year === item ? 'timeframe-item-active' : ''}`}
+                                className={classNames('timeframe-item', year === item && 'timeframe-item-active')}
                                 onClick={() => setYear(item)}>
                                 <div className="timeframe-item-title">{item.title}</div>
                             </div>
@@ -533,7 +534,10 @@ export default function FinancialFilters({
                 <div className="card-section">
                     <div className="block block-timeframes">
                         <div
-                            className={`timeframe-item ${year.year - 1 <= startYear ? 'timeframe-item-disabled' : ''}`}
+                            className={classNames(
+                                'timeframe-item',
+                                year.year - 1 <= startYear && 'timeframe-item-disabled',
+                            )}
                             onClick={() => prevPage()}>
                             <em className="mdi mdi-chevron-left" />
                         </div>
@@ -541,9 +545,11 @@ export default function FinancialFilters({
                         {quartersList.map((item, index) => (
                             <div
                                 key={index}
-                                className={`timeframe-item ${quarter === item ? 'timeframe-item-active' : ''} ${
-                                    !item.active ? 'timeframe-item-disabled' : ''
-                                }`}
+                                className={classNames(
+                                    'timeframe-item',
+                                    quarter === item && 'timeframe-item-active',
+                                    !item.active && 'timeframe-item-disabled',
+                                )}
                                 onClick={() => setQuarter(item)}>
                                 <div className="timeframe-item-title">{item.title}</div>
                                 <div className="timeframe-item-subtitle">{item.subtitle}</div>
@@ -551,7 +557,7 @@ export default function FinancialFilters({
                         ))}
 
                         <div
-                            className={`timeframe-item ${year.year >= endYear ? 'timeframe-item-disabled' : ''}`}
+                            className={classNames('timeframe-item', year.year >= endYear && 'timeframe-item-disabled')}
                             onClick={() => nextPage()}>
                             <em className="mdi mdi-chevron-right" />
                         </div>
@@ -563,7 +569,10 @@ export default function FinancialFilters({
                 <div className="card-section">
                     <div className="block block-timeframes">
                         <div
-                            className={`timeframe-item ${year.year - 1 <= startYear ? 'timeframe-item-disabled' : ''}`}
+                            className={classNames(
+                                'timeframe-item',
+                                year.year - 1 <= startYear && 'timeframe-item-disabled',
+                            )}
                             onClick={() => prevPage()}>
                             <em className="mdi mdi-chevron-left" />
                         </div>
@@ -571,9 +580,11 @@ export default function FinancialFilters({
                         {monthsList.map((item, index) => (
                             <div
                                 key={index}
-                                className={`timeframe-item ${month === item ? 'timeframe-item-active' : ''} ${
-                                    !item.active ? 'timeframe-item-disabled' : ''
-                                }`}
+                                className={classNames(
+                                    'timeframe-item',
+                                    month === item && 'timeframe-item-active',
+                                    !item.active && 'timeframe-item-disabled',
+                                )}
                                 onClick={() => setMonth(item)}>
                                 <div className="timeframe-item-title">{item.title}</div>
                                 <div className="timeframe-item-subtitle">{item.subtitle}</div>
@@ -581,7 +592,7 @@ export default function FinancialFilters({
                         ))}
 
                         <div
-                            className={`timeframe-item ${year.year >= endYear ? 'timeframe-item-disabled' : ''}`}
+                            className={classNames('timeframe-item', year.year >= endYear && 'timeframe-item-disabled')}
                             onClick={() => nextPage()}>
                             <em className="mdi mdi-chevron-right" />
                         </div>
diff --git a/react/src/dashboard/components/pages/financial-dashboard/elements/ProviderFinancialTable.tsx b/react/src/dashboard/components/pages/financial-dashboard/elements/ProviderFinancialTable.tsx
index c541a8c78..22a53765c 100644
--- a/react/src/dashboard/components/pages/financial-dashboard/elements/ProviderFinancialTable.tsx
+++ b/react/src/dashboard/components/pages/financial-dashboard/elements/ProviderFinancialTable.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import ProviderFinancialTablesTransactions from './ProviderFinancialTablesTransactions';
 import Paginator from '../../../../modules/paginator/components/Paginator';
 import usePaginatorService from '../../../../modules/paginator/services/usePaginatorService';
@@ -135,12 +136,15 @@ export default function ProviderFinancialTable({ externalFilters }: { externalFi
                                                             <strong>{provider.provider.name}</strong>
                                                         </div>
                                                     </td>
-                                                    <td className={!provider.total_spent ? 'text-muted' : ''}>
+                                                    <td className={classNames(!provider.total_spent && 'text-muted')}>
                                                         {provider.total_spent
                                                             ? provider.total_spent_locale
                                                             : 'Geen transacties'}
                                                     </td>
-                                                    <td className={!provider.highest_transaction ? 'text-muted' : ''}>
+                                                    <td
+                                                        className={classNames(
+                                                            !provider.highest_transaction && 'text-muted',
+                                                        )}>
                                                         {provider.highest_transaction
                                                             ? provider.highest_transaction_locale
                                                             : 'Geen transacties'}
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 529b37082..e19dcb62a 100644
--- a/react/src/dashboard/components/pages/fund-backoffice-edit/FundBackofficeEdit.tsx
+++ b/react/src/dashboard/components/pages/fund-backoffice-edit/FundBackofficeEdit.tsx
@@ -17,6 +17,7 @@ import useTranslate from '../../../hooks/useTranslate';
 import usePushApiError from '../../../hooks/usePushApiError';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
 import ToggleControl from '../../elements/forms/controls/ToggleControl';
+import classNames from 'classnames';
 
 export default function FundBackofficeEdit() {
     const { fundId } = useParams();
@@ -374,9 +375,13 @@ export default function FundBackofficeEdit() {
                                         </div>
                                         <div className="form-group-info-button">
                                             <div
-                                                className={`button button-default button-icon pull-left ${
-                                                    showInfoBlock ? 'active' : ''
-                                                }`}
+                                                className={classNames(
+                                                    'button',
+                                                    'button-default',
+                                                    'button-icon',
+                                                    'pull-left',
+                                                    showInfoBlock && 'active',
+                                                )}
                                                 onClick={() => setShowInfoBlock(!showInfoBlock)}>
                                                 <em className="mdi mdi-information" />
                                             </div>
@@ -424,9 +429,13 @@ export default function FundBackofficeEdit() {
                                         </div>
                                         <div className="form-group-info-button">
                                             <div
-                                                className={`button button-default button-icon pull-left ${
-                                                    showPolicyInfoBlock ? 'active' : ''
-                                                }`}
+                                                className={classNames(
+                                                    'button',
+                                                    'button-default',
+                                                    'button-icon',
+                                                    'pull-left',
+                                                    showPolicyInfoBlock && 'active',
+                                                )}
                                                 onClick={() => setShowPolicyInfoBlock(!showPolicyInfoBlock)}>
                                                 <em className="mdi mdi-information" />
                                             </div>
diff --git a/react/src/dashboard/components/pages/fund-forms/FundForms.tsx b/react/src/dashboard/components/pages/fund-forms/FundForms.tsx
index 639bc8e40..9c3c11805 100644
--- a/react/src/dashboard/components/pages/fund-forms/FundForms.tsx
+++ b/react/src/dashboard/components/pages/fund-forms/FundForms.tsx
@@ -4,6 +4,7 @@ import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import usePaginatorService from '../../../modules/paginator/services/usePaginatorService';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
+import LoaderTableCard from '../../elements/loader-table-card/LoaderTableCard';
 import useSetProgress from '../../../hooks/useSetProgress';
 import ClickOutside from '../../elements/click-outside/ClickOutside';
 import FilterItemToggle from '../../elements/tables/elements/FilterItemToggle';
@@ -13,12 +14,8 @@ import useImplementationService from '../../../services/ImplementationService';
 import Implementation from '../../../props/models/Implementation';
 import { strLimit } from '../../../helpers/string';
 import TableRowActions from '../../elements/tables/TableRowActions';
-import Paginator from '../../../modules/paginator/components/Paginator';
-import EmptyCard from '../../elements/empty-card/EmptyCard';
 import useTranslate from '../../../hooks/useTranslate';
 import TableEmptyValue from '../../elements/table-empty-value/TableEmptyValue';
-import TableTopScroller from '../../elements/tables/TableTopScroller';
-import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
 import TableEntityMain from '../../elements/tables/elements/TableEntityMain';
 import usePushApiError from '../../../hooks/usePushApiError';
 import BlockLabelTabs from '../../elements/block-label-tabs/BlockLabelTabs';
@@ -51,8 +48,6 @@ export default function FundForms() {
         { value: 'archived', label: `Archief` },
     ]);
 
-    const { headElement, configsElement } = useConfigurableTable(fundFormService.getColumns());
-
     const [filterValues, filterActiveValues, filterUpdate, filter] = useFilterNext<{
         q: string;
         state: string;
@@ -118,7 +113,7 @@ export default function FundForms() {
         <div className="card">
             <div className="card-header">
                 <div className="card-title flex flex-grow" data-dusk="fundsTitle">
-                    E-formulieren ({fundForms.meta.total})
+                    E-formulieren ({fundForms?.meta?.total})
                 </div>
 
                 <div className="card-header-filters">
@@ -223,99 +218,76 @@ export default function FundForms() {
                 </div>
             </div>
 
-            {!loading && fundForms.meta.total > 0 && (
-                <div className="card-section">
-                    <div className="card-block card-block-table">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {fundForms.data.map((fundForm) => (
+            <LoaderTableCard
+                loading={loading}
+                empty={fundForms?.meta?.total == 0}
+                emptyTitle={'Geen formulieren'}
+                columns={fundFormService.getColumns()}
+                paginator={{ key: paginatorKey, data: fundForms, filterValues, filterUpdate }}>
+                {fundForms?.data?.map((fundForm) => (
+                    <StateNavLink
+                        key={fundForm.id}
+                        name={DashboardRoutes.FUND_FORM}
+                        params={{
+                            organizationId: activeOrganization.id,
+                            id: fundForm.id,
+                        }}
+                        customElement={'tr'}
+                        className={'tr-clickable'}>
+                        <td>
+                            <TableEntityMain
+                                title={fundForm.name}
+                                subtitle={`#${fundForm.id}`}
+                                mediaPlaceholder={'form'}
+                                mediaRound={false}
+                                mediaBorder={false}
+                                media={null}
+                            />
+                        </td>
+
+                        <td>
+                            <TableDateTime value={fundForm.created_at_locale} />
+                        </td>
+
+                        <td>
+                            <TableEntityMain
+                                title={strLimit(fundForm.fund.name, 50)}
+                                subtitle={fundForm?.fund.organization?.name}
+                                mediaPlaceholder={'fund'}
+                                media={fundForm?.fund?.logo}
+                            />
+                        </td>
+
+                        <td className="text-strong text-muted-dark">
+                            {fundForm.fund.implementation?.name || <TableEmptyValue />}
+                        </td>
+
+                        <td className="text-strong text-muted-dark">{fundForm?.steps || <TableEmptyValue />}</td>
+
+                        <td>
+                            <FundFormStateLabels fundForm={fundForm} />
+                        </td>
+
+                        <td className={'table-td-actions text-right'}>
+                            <TableRowActions
+                                content={() => (
+                                    <div className="dropdown dropdown-actions">
                                         <StateNavLink
-                                            key={fundForm.id}
                                             name={DashboardRoutes.FUND_FORM}
-                                            params={{ organizationId: activeOrganization.id, id: fundForm.id }}
-                                            customElement={'tr'}
-                                            className={'tr-clickable'}>
-                                            <td>
-                                                <TableEntityMain
-                                                    title={fundForm.name}
-                                                    subtitle={`#${fundForm.id}`}
-                                                    mediaPlaceholder={'form'}
-                                                    mediaRound={false}
-                                                    mediaBorder={false}
-                                                    media={null}
-                                                />
-                                            </td>
-
-                                            <td>
-                                                <TableDateTime value={fundForm.created_at_locale} />
-                                            </td>
-
-                                            <td>
-                                                <TableEntityMain
-                                                    title={strLimit(fundForm.fund.name, 50)}
-                                                    subtitle={fundForm?.fund.organization?.name}
-                                                    mediaPlaceholder={'fund'}
-                                                    media={fundForm?.fund?.logo}
-                                                />
-                                            </td>
-
-                                            <td className="text-strong text-muted-dark">
-                                                {fundForm.fund.implementation?.name || <TableEmptyValue />}
-                                            </td>
-
-                                            <td className="text-strong text-muted-dark">
-                                                {fundForm?.steps || <TableEmptyValue />}
-                                            </td>
-
-                                            <td>
-                                                <FundFormStateLabels fundForm={fundForm} />
-                                            </td>
-
-                                            <td className={'table-td-actions text-right'}>
-                                                <TableRowActions
-                                                    content={() => (
-                                                        <div className="dropdown dropdown-actions">
-                                                            <StateNavLink
-                                                                name={DashboardRoutes.FUND_FORM}
-                                                                params={{
-                                                                    organizationId: activeOrganization.id,
-                                                                    id: fundForm.id,
-                                                                }}
-                                                                className="dropdown-item">
-                                                                <em className="mdi mdi-eye icon-start" /> Bekijken
-                                                            </StateNavLink>
-                                                        </div>
-                                                    )}
-                                                />
-                                            </td>
+                                            params={{
+                                                organizationId: activeOrganization.id,
+                                                id: fundForm.id,
+                                            }}
+                                            className="dropdown-item">
+                                            <em className="mdi mdi-eye icon-start" /> Bekijken
                                         </StateNavLink>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
-            )}
-
-            {!loading && fundForms.meta.total == 0 && <EmptyCard type={'card-section'} title={'Geen formulieren'} />}
-
-            {loading && <LoadingCard type={'card-section'} />}
-
-            {!loading && fundForms.meta.total > 0 && (
-                <div className="card-section">
-                    <Paginator
-                        meta={fundForms.meta}
-                        filters={filterValues}
-                        updateFilters={filterUpdate}
-                        perPageKey={paginatorKey}
-                    />
-                </div>
-            )}
+                                    </div>
+                                )}
+                            />
+                        </td>
+                    </StateNavLink>
+                ))}
+            </LoaderTableCard>
         </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 38f3106f7..050b18592 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
@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import { useParams } from 'react-router';
 import SponsorProduct from '../../../props/models/Sponsor/SponsorProduct';
@@ -16,9 +16,7 @@ import usePushApiError from '../../../hooks/usePushApiError';
 import classNames from 'classnames';
 import useProductChat from '../fund-provider/hooks/useProductChat';
 import FundProviderProductRowData from '../fund-provider/elements/FundProviderProductRowData';
-import TableTopScroller from '../../elements/tables/TableTopScroller';
-import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
-import EmptyCard from '../../elements/empty-card/EmptyCard';
+import LoaderTableCard from '../../elements/loader-table-card/LoaderTableCard';
 import FormPane from '../../elements/forms/elements/FormPane';
 import KeyValueItem from '../../elements/key-value/KeyValueItem';
 import EmptyValue from '../../elements/empty-value/EmptyValue';
@@ -43,11 +41,7 @@ export default function FundProviderProductView() {
         return product?.deals_history?.find((item) => item.active);
     }, [product?.deals_history]);
 
-    const tableRef = useRef<HTMLTableElement>(null);
-
-    const { headElement, configsElement } = useConfigurableTable(
-        fundService.getProviderProductColumns(fund, product, true),
-    );
+    const dealsHistory = product?.deals_history || [];
 
     const { disableProduct, editProduct, mapProduct, isProductConfigurable } = useUpdateProduct();
     const { openProductChat, makeProductChat } = useProductChat(fund, fundProvider, activeOrganization);
@@ -299,43 +293,29 @@ export default function FundProviderProductView() {
                 <div className="card-header">
                     <div className="card-title">Toon geschiedenis</div>
                 </div>
-                {product.deals_history?.length === 0 ? (
-                    <EmptyCard
-                        title={'Toon geschiedenis'}
-                        description={'Er zijn momenteel geen beperkingen op het aanbod ingesteld.'}
-                        type={'card-section'}
-                    />
-                ) : (
-                    <div className="card-section card-section-padless">
-                        {configsElement}
-
-                        <TableTopScroller onScroll={() => tableRef.current?.click()}>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {product.deals_history.map((item) => (
-                                        <tr key={item.id}>
-                                            <td>{item.voucher_transactions_count}</td>
-                                            <td>{item.product_reservations_pending_count}</td>
-                                            <td>{product.price_locale}</td>
-                                            <FundProviderProductRowData
-                                                deal={item}
-                                                product={product}
-                                                history={true}
-                                                fund={fund}
-                                                organization={activeOrganization}
-                                                fundProvider={fundProvider}
-                                                onChange={fetchProduct}
-                                                onChangeProvider={setFundProvider}
-                                            />
-                                        </tr>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                )}
+                <LoaderTableCard
+                    empty={dealsHistory.length === 0}
+                    emptyTitle={'Toon geschiedenis'}
+                    emptyDescription={'Er zijn momenteel geen beperkingen op het aanbod ingesteld.'}
+                    columns={fundService.getProviderProductColumns(fund, product, true)}>
+                    {dealsHistory.map((item) => (
+                        <tr key={item.id}>
+                            <td>{item.voucher_transactions_count}</td>
+                            <td>{item.product_reservations_pending_count}</td>
+                            <td>{product.price_locale}</td>
+                            <FundProviderProductRowData
+                                deal={item}
+                                product={product}
+                                history={true}
+                                fund={fund}
+                                organization={activeOrganization}
+                                fundProvider={fundProvider}
+                                onChange={fetchProduct}
+                                onChangeProvider={setFundProvider}
+                            />
+                        </tr>
+                    ))}
+                </LoaderTableCard>
             </div>
         </Fragment>
     );
diff --git a/react/src/dashboard/components/pages/fund-provider/elements/FundProviderProducts.tsx b/react/src/dashboard/components/pages/fund-provider/elements/FundProviderProducts.tsx
index 68f953a69..07ad30015 100644
--- a/react/src/dashboard/components/pages/fund-provider/elements/FundProviderProducts.tsx
+++ b/react/src/dashboard/components/pages/fund-provider/elements/FundProviderProducts.tsx
@@ -1,17 +1,14 @@
-import React, { useCallback, useEffect, useRef, useState, MouseEvent } from 'react';
+import React, { useCallback, useEffect, useState, MouseEvent } from 'react';
 import { PaginationData } from '../../../../props/ApiResponses';
 import FundProvider from '../../../../props/models/FundProvider';
 import Organization from '../../../../props/models/Organization';
-import Paginator from '../../../../modules/paginator/components/Paginator';
 import useSetProgress from '../../../../hooks/useSetProgress';
 import LoadingCard from '../../../elements/loading-card/LoadingCard';
 import { useFundService } from '../../../../services/FundService';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
-import EmptyCard from '../../../elements/empty-card/EmptyCard';
+import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
 import SponsorProduct, { DealHistoryItem } from '../../../../props/models/Sponsor/SponsorProduct';
 import usePushApiError from '../../../../hooks/usePushApiError';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
-import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
 import Fund from '../../../../props/models/Fund';
 import useProductChat from '../hooks/useProductChat';
 import FundProviderProductRowData from './FundProviderProductRowData';
@@ -44,8 +41,7 @@ export default function FundProviderProducts({
     const { openProductChat, makeProductChat } = useProductChat(fund, fundProvider, organization);
 
     const [products, setProducts] = useState<PaginationData<ProductLocal>>(null);
-
-    const tableRef = useRef<HTMLTableElement>(null);
+    const [paginatorKey] = useState('fund_provider_products');
     const fundService = useFundService();
 
     const [filterValues, filterValuesActive, filterUpdate] = useFilterNext<{
@@ -58,10 +54,6 @@ export default function FundProviderProducts({
         per_page: 15,
     });
 
-    const { headElement, configsElement } = useConfigurableTable(
-        fundService.getProviderProductColumns(fund, null, false),
-    );
-
     const fetchProducts = useCallback(() => {
         setProgress(0);
 
@@ -141,7 +133,7 @@ export default function FundProviderProducts({
                 </div>
             </div>
 
-            {fundProvider.allow_products && products.meta.total > 0 && (
+            {fundProvider.allow_products && products?.meta?.total > 0 && (
                 <div className="card-section card-section-success card-section-narrow">
                     <em>
                         Een aanbod kan niet worden uitgeschakeld zolang de optie &apos;Accepteer aanbiedingen&apos; aan
@@ -151,53 +143,37 @@ export default function FundProviderProducts({
                 </div>
             )}
 
-            {products.meta.total > 0 ? (
-                <div className="card-section card-section-padless">
-                    {configsElement}
-
-                    <TableTopScroller onScroll={() => tableRef.current?.click()}>
-                        <table className="table">
-                            {headElement}
-
-                            <tbody>
-                                {products.data.map((product) => (
-                                    <StateNavLink
-                                        customElement={'tr'}
-                                        name={DashboardRoutes.FUND_PROVIDER_PRODUCT}
-                                        className={'tr-clickable'}
-                                        params={{
-                                            id: product.id,
-                                            fundId: fundProvider.fund_id,
-                                            fundProviderId: fundProvider.id,
-                                            organizationId: organization.id,
-                                        }}
-                                        key={product.id}>
-                                        <FundProviderProductRowData
-                                            deal={product?.active_deal}
-                                            product={product}
-                                            onStartChat={onStartChat}
-                                            fund={fund}
-                                            organization={organization}
-                                            fundProvider={fundProvider}
-                                            onChange={fetchProducts}
-                                            onChangeProvider={onChangeProvider}
-                                            history={false}
-                                        />
-                                    </StateNavLink>
-                                ))}
-                            </tbody>
-                        </table>
-                    </TableTopScroller>
-                </div>
-            ) : (
-                <EmptyCard title={'Geen aanbiedingen'} type={'card-section'} />
-            )}
-
-            {products.meta && (
-                <div className="card-section card-section-narrow" hidden={products?.meta?.total < 1}>
-                    <Paginator meta={products.meta} filters={filterValues} updateFilters={filterUpdate} />
-                </div>
-            )}
+            <LoaderTableCard
+                empty={products?.meta?.total == 0}
+                emptyTitle={'Geen aanbiedingen'}
+                columns={fundService.getProviderProductColumns(fund, null, false)}
+                paginator={{ key: paginatorKey, data: products, filterValues, filterUpdate }}>
+                {products?.data?.map((product) => (
+                    <StateNavLink
+                        customElement={'tr'}
+                        name={DashboardRoutes.FUND_PROVIDER_PRODUCT}
+                        className={'tr-clickable'}
+                        params={{
+                            id: product.id,
+                            fundId: fundProvider.fund_id,
+                            fundProviderId: fundProvider.id,
+                            organizationId: organization.id,
+                        }}
+                        key={product.id}>
+                        <FundProviderProductRowData
+                            deal={product?.active_deal}
+                            product={product}
+                            onStartChat={onStartChat}
+                            fund={fund}
+                            organization={organization}
+                            fundProvider={fundProvider}
+                            onChange={fetchProducts}
+                            onChangeProvider={onChangeProvider}
+                            history={false}
+                        />
+                    </StateNavLink>
+                ))}
+            </LoaderTableCard>
         </div>
     );
 }
diff --git a/react/src/dashboard/components/pages/fund-requests-view/FundRequestsView.tsx b/react/src/dashboard/components/pages/fund-requests-view/FundRequestsView.tsx
index e0cb23e1d..68a96f390 100644
--- a/react/src/dashboard/components/pages/fund-requests-view/FundRequestsView.tsx
+++ b/react/src/dashboard/components/pages/fund-requests-view/FundRequestsView.tsx
@@ -36,8 +36,7 @@ import Icon from '../../../../../assets/forus-platform/resources/_platform-commo
 import TableEmptyValue from '../../elements/table-empty-value/TableEmptyValue';
 import useEmailLogService from '../../../services/EmailLogService';
 import { Permission } from '../../../props/models/Organization';
-import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
-import TableTopScroller from '../../elements/tables/TableTopScroller';
+import LoaderTableCard from '../../elements/loader-table-card/LoaderTableCard';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
 
 export default function FundRequestsView() {
@@ -145,10 +144,6 @@ export default function FundRequestsView() {
         };
     }, [activeOrganization.bsn_enabled, authIdentity?.address, fundRequest, isValidatorsSupervisor]);
 
-    const { headElement, configsElement } = useConfigurableTable(fundRequestService.getRecordsColumns(), {
-        trPrepend: <Fragment>{fundRequestMeta?.hasContent && <th className="cell-chevron th-narrow" />}</Fragment>,
-    });
-
     const updateNotesRef = useRef<() => void>(null);
     const fetchEmailsRef = useRef<() => void>(null);
 
@@ -516,11 +511,12 @@ export default function FundRequestsView() {
                             <div className="button-group">
                                 {fundRequestMeta.is_assignable && (
                                     <button
-                                        className={`button ${
+                                        className={classNames(
+                                            'button',
                                             fundRequestMeta.is_assignable_as_supervisor
                                                 ? 'button-default'
-                                                : 'button-primary'
-                                        }`}
+                                                : 'button-primary',
+                                        )}
                                         data-dusk="fundRequestAssignBtn"
                                         onClick={() => assignRequest()}>
                                         <em className="mdi mdi-account-plus icon-start" />
@@ -565,7 +561,12 @@ export default function FundRequestsView() {
                                     className="keyvalue-value-info-block-toggle"
                                     onClick={() => setShowCriteria(!showCriteria)}>
                                     Voorwaarden ({fundRequestMeta.fund.criteria.length})
-                                    <em className={`mdi mdi-chevron-${showCriteria ? 'up' : 'down'}`} />
+                                    <em
+                                        className={classNames(
+                                            'mdi',
+                                            showCriteria ? 'mdi-chevron-up' : 'mdi-chevron-down',
+                                        )}
+                                    />
                                 </span>
                             </Fragment>
                         </KeyValueItem>
@@ -617,13 +618,13 @@ export default function FundRequestsView() {
 
                         <KeyValueItem
                             label={translate('validation_requests.labels.email')}
-                            className={fundRequestMeta.email ? 'text-black' : 'text-muted'}>
+                            className={classNames(fundRequestMeta.email ? 'text-black' : 'text-muted')}>
                             {fundRequestMeta.email || 'Geen E-mail'}
                         </KeyValueItem>
 
                         <KeyValueItem
                             label={translate('validation_requests.labels.bsn')}
-                            className={fundRequestMeta.bsn ? 'text-black' : 'text-muted'}>
+                            className={classNames(fundRequestMeta.bsn ? 'text-black' : 'text-muted')}>
                             {fundRequestMeta.bsn || 'Geen BSN'}
                         </KeyValueItem>
                     </div>
@@ -725,105 +726,100 @@ export default function FundRequestsView() {
                         </div>
                     )}
                 </div>
-                <div className="card-section">
-                    <div className="card-block card-block-table card-block-request-record">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                {fundRequestMeta.records.map((record) => (
-                                    <tbody key={record.id} data-dusk={`tableFundRequestRecordRow${record.id}`}>
-                                        <tr>
-                                            {fundRequestMeta.hasContent && (
-                                                <td className="cell-chevron">
-                                                    {record.hasContent && (
-                                                        <a
-                                                            className={classNames(
-                                                                'mdi',
-                                                                'td-menu-icon',
-                                                                !collapsedRecords.includes(record.id)
-                                                                    ? 'mdi-menu-up'
-                                                                    : 'mdi-menu-down',
-                                                            )}
+                <LoaderTableCard
+                    empty={fundRequestMeta.records.length === 0}
+                    emptyTitle={'Geen records'}
+                    columns={fundRequestService.getRecordsColumns()}
+                    tableOptions={{
+                        trPrepend: fundRequestMeta?.hasContent ? <th className="cell-chevron th-narrow" /> : null,
+                    }}>
+                    {fundRequestMeta.records.map((record) => (
+                        <Fragment key={record.id}>
+                            <tr data-dusk={`tableFundRequestRecordRow${record.id}`}>
+                                {fundRequestMeta.hasContent && (
+                                    <td className="cell-chevron">
+                                        {record.hasContent && (
+                                            <a
+                                                className={classNames(
+                                                    'mdi',
+                                                    'td-menu-icon',
+                                                    !collapsedRecords.includes(record.id)
+                                                        ? 'mdi-menu-up'
+                                                        : 'mdi-menu-down',
+                                                )}
+                                                onClick={() => {
+                                                    setCollapsedRecords((shownRecords) => {
+                                                        return shownRecords?.includes(record.id)
+                                                            ? shownRecords?.filter((id) => id !== record.id)
+                                                            : [...shownRecords, record.id];
+                                                    });
+                                                }}
+                                            />
+                                        )}
+                                    </td>
+                                )}
+                                <td>{record.record_type.name}</td>
+
+                                {record?.record_type.type != 'select' && (
+                                    <td className={classNames(record.value !== null && 'text-muted')}>
+                                        {record?.value || 'Niet beschikbaar'}
+                                    </td>
+                                )}
+
+                                {record?.record_type.type == 'select' && (
+                                    <td className={classNames(record.value !== null && 'text-muted')}>
+                                        {record?.record_type.options?.find((option) => option.value == record?.value)
+                                            ?.name || 'Niet beschikbaar'}
+                                    </td>
+                                )}
+
+                                <td>{record.created_at_locale}</td>
+
+                                <td className="td-narrow text-right">
+                                    {fundRequestMeta.is_assigned ? (
+                                        <TableRowActions
+                                            dataDusk={`fundRequestRecordMenuBtn${record.id}`}
+                                            content={(e) => (
+                                                <div className="dropdown dropdown-actions">
+                                                    <div
+                                                        className="dropdown-item"
+                                                        onClick={() => {
+                                                            e.close();
+                                                            clarifyRecord(record);
+                                                        }}>
+                                                        <em className="mdi mdi-message-text icon-start" />
+                                                        Aanvullingsverzoek
+                                                    </div>
+                                                    {activeOrganization.allow_fund_request_record_edit && (
+                                                        <div
+                                                            className="dropdown-item"
                                                             onClick={() => {
-                                                                setCollapsedRecords((shownRecords) => {
-                                                                    return shownRecords?.includes(record.id)
-                                                                        ? shownRecords?.filter((id) => id !== record.id)
-                                                                        : [...shownRecords, record.id];
-                                                                });
+                                                                e.close();
+                                                                editRecord(record);
                                                             }}
-                                                        />
+                                                            data-dusk="fundRequestRecordEditBtn">
+                                                            <em className="mdi mdi-pencil icon-start" />
+                                                            Bewerking
+                                                        </div>
                                                     )}
-                                                </td>
-                                            )}
-                                            <td>{record.record_type.name}</td>
-
-                                            {record?.record_type.type != 'select' && (
-                                                <td className={record.value !== null ? 'text-muted' : ''}>
-                                                    {record?.value || 'Niet beschikbaar'}
-                                                </td>
+                                                </div>
                                             )}
-
-                                            {record?.record_type.type == 'select' && (
-                                                <td className={record.value !== null ? 'text-muted' : ''}>
-                                                    {record?.record_type.options?.find(
-                                                        (option) => option.value == record?.value,
-                                                    )?.name || 'Niet beschikbaar'}
-                                                </td>
-                                            )}
-
-                                            <td>{record.created_at_locale}</td>
-
-                                            <td className="td-narrow text-right">
-                                                {fundRequestMeta.is_assigned ? (
-                                                    <TableRowActions
-                                                        dataDusk={`fundRequestRecordMenuBtn${record.id}`}
-                                                        content={(e) => (
-                                                            <div className="dropdown dropdown-actions">
-                                                                <div
-                                                                    className="dropdown-item"
-                                                                    onClick={() => {
-                                                                        e.close();
-                                                                        clarifyRecord(record);
-                                                                    }}>
-                                                                    <em className="mdi mdi-message-text icon-start" />
-                                                                    Aanvullingsverzoek
-                                                                </div>
-                                                                {activeOrganization.allow_fund_request_record_edit && (
-                                                                    <div
-                                                                        className="dropdown-item"
-                                                                        onClick={() => {
-                                                                            e.close();
-                                                                            editRecord(record);
-                                                                        }}
-                                                                        data-dusk="fundRequestRecordEditBtn">
-                                                                        <em className="mdi mdi-pencil icon-start" />
-                                                                        Bewerking
-                                                                    </div>
-                                                                )}
-                                                            </div>
-                                                        )}
-                                                    />
-                                                ) : (
-                                                    <TableEmptyValue />
-                                                )}
-                                            </td>
-                                        </tr>
-                                        {record.hasContent && !collapsedRecords.includes(record.id) && (
-                                            <tr className="tr-dim">
-                                                <td className="collapse-content" colSpan={6}>
-                                                    <FundRequestRecordTabs fundRequestRecord={record} />
-                                                </td>
-                                            </tr>
-                                        )}
-                                    </tbody>
-                                ))}
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
+                                        />
+                                    ) : (
+                                        <TableEmptyValue />
+                                    )}
+                                </td>
+                            </tr>
+                            {record.hasContent && !collapsedRecords.includes(record.id) && (
+                                <tr className="tr-dim">
+                                    <td className="collapse-content" colSpan={6}>
+                                        <FundRequestRecordTabs fundRequestRecord={record} />
+                                    </td>
+                                </tr>
+                            )}
+                        </Fragment>
+                    ))}
+                </LoaderTableCard>
             </div>
 
             <BlockCardNotes
diff --git a/react/src/dashboard/components/pages/fund-requests-view/elements/IdentityPerson.tsx b/react/src/dashboard/components/pages/fund-requests-view/elements/IdentityPerson.tsx
index b4b3c0ce8..da946ceda 100644
--- a/react/src/dashboard/components/pages/fund-requests-view/elements/IdentityPerson.tsx
+++ b/react/src/dashboard/components/pages/fund-requests-view/elements/IdentityPerson.tsx
@@ -7,6 +7,7 @@ import IdentitiesApiPerson from '../../../../props/models/IdentitiesApiPerson';
 import Card from '../../../elements/card/Card';
 import useSponsorIdentitiesService from '../../../../services/SponsorIdentitesService';
 import EmptyCard from '../../../elements/empty-card/EmptyCard';
+import classNames from 'classnames';
 
 type Person = {
     bsn_expanded?: boolean;
@@ -107,9 +108,10 @@ export default function IdentityPerson({
                         {person.person_breadcrumbs.map((breadcrumb, index) => (
                             <div
                                 key={index}
-                                className={`breadcrumb-item ${
-                                    index == person.person_breadcrumbs.length - 1 ? 'active' : ''
-                                }`}
+                                className={classNames(
+                                    'breadcrumb-item',
+                                    index == person.person_breadcrumbs.length - 1 && 'active',
+                                )}
                                 onClick={(e) => (index == 0 ? fetchPerson(person) : e.preventDefault())}>
                                 {breadcrumb.name}
                             </div>
@@ -122,9 +124,11 @@ export default function IdentityPerson({
                                     <div key={index} className="keyvalue-item">
                                         <div className="keyvalue-key">{field.label}</div>
                                         <div
-                                            className={`keyvalue-value text-pre-line ${
-                                                field.value == null ? 'text-muted' : ''
-                                            }`}>
+                                            className={classNames(
+                                                'keyvalue-value',
+                                                'text-pre-line',
+                                                field.value == null && 'text-muted',
+                                            )}>
                                             {field?.value || 'Geen data'}
                                         </div>
                                     </div>
diff --git a/react/src/dashboard/components/pages/fund-requests-view/elements/record-tabs/FundRequestRecordHistoryTab.tsx b/react/src/dashboard/components/pages/fund-requests-view/elements/record-tabs/FundRequestRecordHistoryTab.tsx
index 61f808a1d..3b6ab0850 100644
--- a/react/src/dashboard/components/pages/fund-requests-view/elements/record-tabs/FundRequestRecordHistoryTab.tsx
+++ b/react/src/dashboard/components/pages/fund-requests-view/elements/record-tabs/FundRequestRecordHistoryTab.tsx
@@ -1,17 +1,14 @@
 import FundRequestRecord from '../../../../../props/models/FundRequestRecord';
 import React, { Fragment } from 'react';
 import useTranslate from '../../../../../hooks/useTranslate';
-import useConfigurableTable from '../../../vouchers/hooks/useConfigurableTable';
 import { useFundRequestValidatorService } from '../../../../../services/FundRequestValidatorService';
-import TableTopScroller from '../../../../elements/tables/TableTopScroller';
 import TableEmptyValue from '../../../../elements/table-empty-value/TableEmptyValue';
+import LoaderTableCard from '../../../../elements/loader-table-card/LoaderTableCard';
 
 export default function FundRequestRecordHistoryTab({ record }: { record: FundRequestRecord }) {
     const translate = useTranslate();
     const fundRequestService = useFundRequestValidatorService();
 
-    const { headElement, configsElement } = useConfigurableTable(fundRequestService.getRecordChangesColumns());
-
     return (
         <div className="card" data-dusk="historyTabContent">
             <div className="card-header">
@@ -19,58 +16,41 @@ export default function FundRequestRecordHistoryTab({ record }: { record: FundRe
                     {translate('validation_request_details.labels.history', { count: record.history.length })}
                 </div>
             </div>
-            <div className="card-section">
-                <div className="card-block card-block-table">
-                    {configsElement}
-
-                    <TableTopScroller>
-                        <table className="table table-fixed">
-                            {headElement}
+            <LoaderTableCard
+                empty={record.history.length == 0}
+                emptyTitle={'Geen historie.'}
+                columns={fundRequestService.getRecordChangesColumns()}>
+                {record.history?.map((log) => (
+                    <tr key={log.id} data-dusk={`recordHistoryRow${log.id}`} className="light">
+                        {record?.record_type.type != 'select' && (
+                            <Fragment>
+                                <td className="text-strong">{log.new_value}</td>
+                                <td className="text-muted">{log.old_value}</td>
+                            </Fragment>
+                        )}
 
-                            <tbody>
-                                {record.history?.map((log) => (
-                                    <tr key={log.id} data-dusk={`recordHistoryRow${log.id}`} className="light">
-                                        {record?.record_type.type != 'select' && (
-                                            <Fragment>
-                                                <td className="text-strong">{log.new_value}</td>
-                                                <td className="text-muted">{log.old_value}</td>
-                                            </Fragment>
-                                        )}
-
-                                        {record?.record_type.type == 'select' && (
-                                            <Fragment>
-                                                <td className="text-strong">
-                                                    {record?.record_type.options?.find(
-                                                        (option) => option.value == log.new_value,
-                                                    )?.name || 'Niet beschikbaar'}
-                                                </td>
-                                                <td className="text-muted">
-                                                    {record?.record_type.options?.find(
-                                                        (option) => option.value == log.old_value,
-                                                    )?.name || 'Niet beschikbaar'}
-                                                </td>
-                                            </Fragment>
-                                        )}
-                                        <td className="text-strong">{log.employee_email}</td>
-                                        <td>
-                                            <strong className="text-primary">{log.created_at_locale}</strong>
-                                        </td>
-                                        <td className={'table-td-actions text-right'}>
-                                            <TableEmptyValue />
-                                        </td>
-                                    </tr>
-                                ))}
-                            </tbody>
-                        </table>
-                    </TableTopScroller>
-                </div>
-            </div>
-
-            {record.history.length == 0 && (
-                <div className="card-section">
-                    <div className="card-subtitle text-center">Geen historie.</div>
-                </div>
-            )}
+                        {record?.record_type.type == 'select' && (
+                            <Fragment>
+                                <td className="text-strong">
+                                    {record?.record_type.options?.find((option) => option.value == log.new_value)
+                                        ?.name || 'Niet beschikbaar'}
+                                </td>
+                                <td className="text-muted">
+                                    {record?.record_type.options?.find((option) => option.value == log.old_value)
+                                        ?.name || 'Niet beschikbaar'}
+                                </td>
+                            </Fragment>
+                        )}
+                        <td className="text-strong">{log.employee_email}</td>
+                        <td>
+                            <strong className="text-primary">{log.created_at_locale}</strong>
+                        </td>
+                        <td className={'table-td-actions text-right'}>
+                            <TableEmptyValue />
+                        </td>
+                    </tr>
+                ))}
+            </LoaderTableCard>
         </div>
     );
 }
diff --git a/react/src/dashboard/components/pages/fund-requests/elements/FundRequestsTable.tsx b/react/src/dashboard/components/pages/fund-requests/elements/FundRequestsTable.tsx
index a418ad5a9..29f19e2c3 100644
--- a/react/src/dashboard/components/pages/fund-requests/elements/FundRequestsTable.tsx
+++ b/react/src/dashboard/components/pages/fund-requests/elements/FundRequestsTable.tsx
@@ -1,13 +1,10 @@
 import React from 'react';
 import Organization from '../../../../props/models/Organization';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
-import Paginator from '../../../../modules/paginator/components/Paginator';
 import { PaginationData } from '../../../../props/ApiResponses';
 import { FilterModel, FilterScope, FilterSetter } from '../../../../modules/filter_next/types/FilterParams';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import { strLimit } from '../../../../helpers/string';
 import TableRowActions from '../../../elements/tables/TableRowActions';
-import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
 import FundRequestStateLabel from '../../../elements/resource-states/FundRequestStateLabel';
 import FundRequest from '../../../../props/models/FundRequest';
 import useTranslate from '../../../../hooks/useTranslate';
@@ -36,116 +33,85 @@ export default function FundRequestsTable({
 
     const fundRequestService = useFundRequestValidatorService();
 
-    const { headElement, configsElement } = useConfigurableTable(fundRequestService.getColumns(), {
-        sortable: true,
-        filter,
-    });
-
     return (
         <LoaderTableCard
             loading={loading}
-            empty={fundRequests.meta.total == 0}
-            emptyTitle={translate('validation_requests.labels.empty_table')}>
-            <div className="card-section">
-                <div className="card-block card-block-table">
-                    {configsElement}
-
-                    <TableTopScroller>
-                        <table className="table">
-                            {headElement}
+            empty={fundRequests?.meta?.total == 0}
+            emptyTitle={translate('validation_requests.labels.empty_table')}
+            columns={fundRequestService.getColumns()}
+            tableOptions={{ sortable: true, filter }}
+            paginator={{ key: paginatorKey, data: fundRequests, filterValues, filterUpdate }}>
+            {fundRequests?.data?.map((fundRequest) => (
+                <StateNavLink
+                    customElement={'tr'}
+                    className={'tr-clickable'}
+                    key={fundRequest.id}
+                    name={DashboardRoutes.FUND_REQUEST}
+                    dataDusk={`tableFundRequestRow${fundRequest.id}`}
+                    params={{ organizationId: organization.id, id: fundRequest.id }}>
+                    <td className={'text-strong'}>
+                        <span className="text-muted-dark">#</span>
+                        {fundRequest.id}
+                    </td>
+                    <td>
+                        <div className="relative">
+                            <div className="block block-tooltip-details block-tooltip-hover flex flex-inline">
+                                <strong className="text-primary">
+                                    {strLimit(fundRequest.email || 'Geen E-mail', 40)}
+                                </strong>
+                                {fundRequest.email?.length > 40 && (
+                                    <div className="tooltip-content tooltip-content-fit tooltip-content-bottom tooltip-content-compact">
+                                        <em className="triangle" />
+                                        <div className="nowrap">{fundRequest.email || 'Geen E-mail'}</div>
+                                    </div>
+                                )}
+                            </div>
+                        </div>
+                        <div className="text-strong text-md text-muted-dark">
+                            {fundRequest.bsn ? `BSN: ${fundRequest.bsn}` : 'Geen BSN'}
+                        </div>
+                    </td>
+                    <td>{fundRequest.fund.name}</td>
+                    <td>
+                        <strong className="text-primary">{fundRequest.created_at_locale?.split(' - ')[0]}</strong>
+                        <br />
+                        <strong className="text-strong text-md text-muted-dark">
+                            {fundRequest.created_at_locale?.split(' - ')[1]}
+                        </strong>
+                    </td>
+                    <td>
+                        {fundRequest.employee ? (
+                            <div className="text-primary">
+                                <strong>{fundRequest.employee.email}</strong>
+                            </div>
+                        ) : (
+                            <span className="text-muted">Niet toegewezen</span>
+                        )}
+                    </td>
+                    <td>
+                        <FundRequestStateLabel fundRequest={fundRequest} />
+                    </td>
 
-                            <tbody>
-                                {fundRequests?.data.map((fundRequest) => (
+                    <td className={'table-td-actions text-right'}>
+                        <TableRowActions
+                            content={() => (
+                                <div className="dropdown dropdown-actions">
                                     <StateNavLink
-                                        customElement={'tr'}
-                                        className={'tr-clickable'}
-                                        key={fundRequest.id}
                                         name={DashboardRoutes.FUND_REQUEST}
-                                        dataDusk={`tableFundRequestRow${fundRequest.id}`}
-                                        params={{ organizationId: organization.id, id: fundRequest.id }}>
-                                        <td className={'text-strong'}>
-                                            <span className="text-muted-dark">#</span>
-                                            {fundRequest.id}
-                                        </td>
-                                        <td>
-                                            <div className="relative">
-                                                <div className="block block-tooltip-details block-tooltip-hover flex flex-inline">
-                                                    <strong className="text-primary">
-                                                        {strLimit(fundRequest.email || 'Geen E-mail', 40)}
-                                                    </strong>
-                                                    {fundRequest.email?.length > 40 && (
-                                                        <div className="tooltip-content tooltip-content-fit tooltip-content-bottom tooltip-content-compact">
-                                                            <em className="triangle" />
-                                                            <div className="nowrap">
-                                                                {fundRequest.email || 'Geen E-mail'}
-                                                            </div>
-                                                        </div>
-                                                    )}
-                                                </div>
-                                            </div>
-                                            <div className="text-strong text-md text-muted-dark">
-                                                {fundRequest.bsn ? `BSN: ${fundRequest.bsn}` : 'Geen BSN'}
-                                            </div>
-                                        </td>
-                                        <td>{fundRequest.fund.name}</td>
-                                        <td>
-                                            <strong className="text-primary">
-                                                {fundRequest.created_at_locale?.split(' - ')[0]}
-                                            </strong>
-                                            <br />
-                                            <strong className="text-strong text-md text-muted-dark">
-                                                {fundRequest.created_at_locale?.split(' - ')[1]}
-                                            </strong>
-                                        </td>
-                                        <td>
-                                            {fundRequest.employee ? (
-                                                <div className="text-primary">
-                                                    <strong>{fundRequest.employee.email}</strong>
-                                                </div>
-                                            ) : (
-                                                <span className="text-muted">Niet toegewezen</span>
-                                            )}
-                                        </td>
-                                        <td>
-                                            <FundRequestStateLabel fundRequest={fundRequest} />
-                                        </td>
-
-                                        <td className={'table-td-actions text-right'}>
-                                            <TableRowActions
-                                                content={() => (
-                                                    <div className="dropdown dropdown-actions">
-                                                        <StateNavLink
-                                                            name={DashboardRoutes.FUND_REQUEST}
-                                                            params={{
-                                                                organizationId: organization.id,
-                                                                id: fundRequest.id,
-                                                            }}
-                                                            className="dropdown-item">
-                                                            <em className="mdi mdi-eye-outline icon-start" />
-                                                            {translate('validation_requests.buttons.view')}
-                                                        </StateNavLink>
-                                                    </div>
-                                                )}
-                                            />
-                                        </td>
+                                        params={{
+                                            organizationId: organization.id,
+                                            id: fundRequest.id,
+                                        }}
+                                        className="dropdown-item">
+                                        <em className="mdi mdi-eye-outline icon-start" />
+                                        {translate('validation_requests.buttons.view')}
                                     </StateNavLink>
-                                ))}
-                            </tbody>
-                        </table>
-                    </TableTopScroller>
-                </div>
-            </div>
-
-            {fundRequests?.meta && (
-                <div className="card-section">
-                    <Paginator
-                        meta={fundRequests.meta}
-                        filters={filterValues}
-                        updateFilters={filterUpdate}
-                        perPageKey={paginatorKey}
-                    />
-                </div>
-            )}
+                                </div>
+                            )}
+                        />
+                    </td>
+                </StateNavLink>
+            ))}
         </LoaderTableCard>
     );
 }
diff --git a/react/src/dashboard/components/pages/households/Households.tsx b/react/src/dashboard/components/pages/households/Households.tsx
index 35fee57d2..6a229141e 100644
--- a/react/src/dashboard/components/pages/households/Households.tsx
+++ b/react/src/dashboard/components/pages/households/Households.tsx
@@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useState } from 'react';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import useSetProgress from '../../../hooks/useSetProgress';
 import { PaginationData } from '../../../props/ApiResponses';
-import Paginator from '../../../modules/paginator/components/Paginator';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
 import { useFundService } from '../../../services/FundService';
 import Fund from '../../../props/models/Fund';
@@ -13,8 +12,6 @@ import StateNavLink from '../../../modules/state_router/StateNavLink';
 import usePaginatorService from '../../../modules/paginator/services/usePaginatorService';
 import useTranslate from '../../../hooks/useTranslate';
 import LoaderTableCard from '../../elements/loader-table-card/LoaderTableCard';
-import TableTopScroller from '../../elements/tables/TableTopScroller';
-import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
 import useFilterNext from '../../../modules/filter_next/useFilterNext';
 import TableRowActions from '../../elements/tables/TableRowActions';
 import SelectControlOptionsFund from '../../elements/select-control/templates/SelectControlOptionsFund';
@@ -78,12 +75,6 @@ export default function Households() {
         },
     );
 
-    const { headElement, configsElement } = useConfigurableTable(householdsService.getColumns(), {
-        filter: filter,
-        sortable: true,
-        hasTooltips: true,
-    });
-
     const { resetFilters: resetFilters, setShow } = filter;
 
     const exportHouseholds = useCallback(() => {
@@ -135,7 +126,7 @@ export default function Households() {
         <div className="card" data-dusk="tableProfilesContent">
             <div className="card-header">
                 <div className="card-title flex flex-grow">
-                    {translate('households.header.title')} ({households.meta.total})
+                    {translate('households.header.title')} ({households?.meta?.total})
                 </div>
                 <div className={'card-header-filters'}>
                     <div className="block block-inline-filters">
@@ -201,9 +192,9 @@ export default function Households() {
                                     className="button button-primary button-wide"
                                     onClick={exportHouseholds}
                                     data-dusk="export"
-                                    disabled={households.meta.total == 0}>
+                                    disabled={households?.meta?.total == 0}>
                                     <em className="mdi mdi-download icon-start" />
-                                    {translate('components.dropdown.export', { total: households.meta.total })}
+                                    {translate('components.dropdown.export', { total: households?.meta?.total })}
                                 </button>
                             </div>
                         </CardHeaderFilter>
@@ -213,95 +204,73 @@ export default function Households() {
 
             <LoaderTableCard
                 loading={loading}
-                empty={households.meta.total == 0}
-                emptyTitle={'Geen huishoudens gevonden'}>
-                <div className="card-section">
-                    <div className="card-block card-block-table">
-                        {configsElement}
+                empty={households?.meta?.total == 0}
+                emptyTitle={'Geen huishoudens gevonden'}
+                columns={householdsService.getColumns()}
+                tableOptions={{ filter, sortable: true, hasTooltips: true }}
+                paginator={{ key: paginatorTransactionsKey, data: households, filterValues, filterUpdate }}>
+                {households?.data?.map((household) => (
+                    <StateNavLink
+                        key={household.id}
+                        name={DashboardRoutes.HOUSEHOLD}
+                        dataDusk={`tableProfilesRow${household.id}`}
+                        params={{
+                            organizationId: activeOrganization.id,
+                            id: household.id,
+                        }}
+                        className={'tr-clickable'}
+                        customElement={'tr'}>
+                        <td>{household.uid ?? <TableEmptyValue />}</td>
 
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
+                        <td>{household.count_people ?? <TableEmptyValue />}</td>
+                        <td>{household.count_minors ?? <TableEmptyValue />}</td>
+                        <td>{household.count_adults ?? <TableEmptyValue />}</td>
+                        <td>{household.city || <TableEmptyValue />}</td>
+                        <td>{household.postal_code || <TableEmptyValue />}</td>
+                        <td>
+                            {[household.house_nr, household.house_nr_addition].filter((item) => item).join(' ') || (
+                                <TableEmptyValue />
+                            )}
+                        </td>
+                        <td>{household.neighborhood_name || <TableEmptyValue />}</td>
+                        <td>{household.municipality_name || <TableEmptyValue />}</td>
 
-                                <tbody>
-                                    {households.data.map((household) => (
-                                        <StateNavLink
-                                            key={household.id}
+                        <td className={'table-td-actions'}>
+                            <TableRowActions
+                                content={(e) => (
+                                    <div className="dropdown dropdown-actions">
+                                        <TableRowActionItem
+                                            type="link"
                                             name={DashboardRoutes.HOUSEHOLD}
-                                            dataDusk={`tableProfilesRow${household.id}`}
                                             params={{
                                                 organizationId: activeOrganization.id,
                                                 id: household.id,
-                                            }}
-                                            className={'tr-clickable'}
-                                            customElement={'tr'}>
-                                            <td>{household.uid ?? <TableEmptyValue />}</td>
-
-                                            <td>{household.count_people ?? <TableEmptyValue />}</td>
-                                            <td>{household.count_minors ?? <TableEmptyValue />}</td>
-                                            <td>{household.count_adults ?? <TableEmptyValue />}</td>
-                                            <td>{household.city || <TableEmptyValue />}</td>
-                                            <td>{household.postal_code || <TableEmptyValue />}</td>
-                                            <td>
-                                                {[household.house_nr, household.house_nr_addition]
-                                                    .filter((item) => item)
-                                                    .join(' ') || <TableEmptyValue />}
-                                            </td>
-                                            <td>{household.neighborhood_name || <TableEmptyValue />}</td>
-                                            <td>{household.municipality_name || <TableEmptyValue />}</td>
-
-                                            <td className={'table-td-actions'}>
-                                                <TableRowActions
-                                                    content={(e) => (
-                                                        <div className="dropdown dropdown-actions">
-                                                            <TableRowActionItem
-                                                                type="link"
-                                                                name={DashboardRoutes.HOUSEHOLD}
-                                                                params={{
-                                                                    organizationId: activeOrganization.id,
-                                                                    id: household.id,
-                                                                }}>
-                                                                <em className="mdi mdi-eye icon-start" /> Bekijken
-                                                            </TableRowActionItem>
-                                                            <TableRowActionItem
-                                                                type="button"
-                                                                onClick={() => {
-                                                                    e?.close();
-                                                                    editHousehold(household, fetchHouseholds);
-                                                                }}>
-                                                                <em className="mdi mdi-pencil icon-start" /> Bewerking
-                                                            </TableRowActionItem>
-                                                            <TableRowActionItem
-                                                                type="button"
-                                                                disable={!household?.removable}
-                                                                onClick={() => {
-                                                                    e?.close();
-                                                                    deleteHousehold(household, fetchHouseholds);
-                                                                }}>
-                                                                <em className="mdi mdi-close icon-start" /> Verwijderen
-                                                            </TableRowActionItem>
-                                                        </div>
-                                                    )}
-                                                />
-                                            </td>
-                                        </StateNavLink>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
-
-                {households.meta.total > 0 && (
-                    <div className="card-section">
-                        <Paginator
-                            meta={households.meta}
-                            filters={filterValues}
-                            updateFilters={filterUpdate}
-                            perPageKey={paginatorTransactionsKey}
-                        />
-                    </div>
-                )}
+                                            }}>
+                                            <em className="mdi mdi-eye icon-start" /> Bekijken
+                                        </TableRowActionItem>
+                                        <TableRowActionItem
+                                            type="button"
+                                            onClick={() => {
+                                                e?.close();
+                                                editHousehold(household, fetchHouseholds);
+                                            }}>
+                                            <em className="mdi mdi-pencil icon-start" /> Bewerking
+                                        </TableRowActionItem>
+                                        <TableRowActionItem
+                                            type="button"
+                                            disable={!household?.removable}
+                                            onClick={() => {
+                                                e?.close();
+                                                deleteHousehold(household, fetchHouseholds);
+                                            }}>
+                                            <em className="mdi mdi-close icon-start" /> Verwijderen
+                                        </TableRowActionItem>
+                                    </div>
+                                )}
+                            />
+                        </td>
+                    </StateNavLink>
+                ))}
             </LoaderTableCard>
         </div>
     );
diff --git a/react/src/dashboard/components/pages/households/elements/HouseholdIdentitiesCard.tsx b/react/src/dashboard/components/pages/households/elements/HouseholdIdentitiesCard.tsx
index e99b71404..c5cd8c3f9 100644
--- a/react/src/dashboard/components/pages/households/elements/HouseholdIdentitiesCard.tsx
+++ b/react/src/dashboard/components/pages/households/elements/HouseholdIdentitiesCard.tsx
@@ -1,14 +1,11 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import useActiveOrganization from '../../../../hooks/useActiveOrganization';
 import useSetProgress from '../../../../hooks/useSetProgress';
-import Paginator from '../../../../modules/paginator/components/Paginator';
 import LoadingCard from '../../../elements/loading-card/LoadingCard';
 import FilterItemToggle from '../../../elements/tables/elements/FilterItemToggle';
 import CardHeaderFilter from '../../../elements/tables/elements/CardHeaderFilter';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
-import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
 import usePushApiError from '../../../../hooks/usePushApiError';
 import useSponsorIdentitiesService from '../../../../services/SponsorIdentitesService';
 import TableRowActions from '../../../elements/tables/TableRowActions';
@@ -79,11 +76,6 @@ export default function HouseholdIdentitiesCard({ household }: { household: Hous
         pushApiError,
     ]);
 
-    const { headElement, configsElement } = useConfigurableTable(
-        sponsorIdentitiesService.getColumns(activeOrganization),
-        { filter: filter, sortable: false, hasTooltips: true },
-    );
-
     useEffect(() => {
         fetchHouseholdMembers();
     }, [fetchHouseholdMembers]);
@@ -147,80 +139,55 @@ export default function HouseholdIdentitiesCard({ household }: { household: Hous
 
             <LoaderTableCard
                 loading={loading}
-                empty={householdMembers.meta.total == 0}
-                emptyTitle={'Geen personen gevonden'}>
-                <div className="card-section">
-                    <div className="card-block card-block-table">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {householdMembers.data.map((member) => (
-                                        <StateNavLink
-                                            key={member?.identity.id}
-                                            name={DashboardRoutes.IDENTITY}
-                                            dataDusk={`tableProfilesRow${member?.identity.id}`}
-                                            params={{
-                                                organizationId: activeOrganization.id,
-                                                id: member?.identity.id,
-                                            }}
-                                            className={'tr-clickable'}
-                                            customElement={'tr'}>
-                                            <IdentitiesTableRowItems
-                                                actions={
-                                                    <TableRowActions
-                                                        content={(e) => (
-                                                            <div className="dropdown dropdown-actions">
-                                                                <TableRowActionItem
-                                                                    type={'link'}
-                                                                    name={DashboardRoutes.IDENTITY}
-                                                                    params={{
-                                                                        organizationId: activeOrganization.id,
-                                                                        id: member?.identity.id,
-                                                                    }}>
-                                                                    <em className="mdi mdi-eye-outline icon-start" />
-                                                                    Bekijken
-                                                                </TableRowActionItem>
-                                                                <TableRowActionItem
-                                                                    type={'button'}
-                                                                    onClick={() => {
-                                                                        e?.close();
-                                                                        householdDeleteIdentity(
-                                                                            member,
-                                                                            fetchHouseholdMembers,
-                                                                        );
-                                                                    }}>
-                                                                    <em className="mdi mdi-close icon-start" />
-                                                                    Verwijderen
-                                                                </TableRowActionItem>
-                                                            </div>
-                                                        )}
-                                                    />
-                                                }
-                                                identity={member?.identity}
-                                                organization={activeOrganization}
-                                            />
-                                        </StateNavLink>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
-
-                {householdMembers.meta.total > 0 && (
-                    <div className="card-section">
-                        <Paginator
-                            meta={householdMembers.meta}
-                            filters={filterValues}
-                            updateFilters={filterUpdate}
-                            perPageKey={paginatorKey}
+                empty={householdMembers?.meta?.total == 0}
+                emptyTitle={'Geen personen gevonden'}
+                columns={sponsorIdentitiesService.getColumns(activeOrganization)}
+                tableOptions={{ filter, sortable: false, hasTooltips: true }}
+                paginator={{ key: paginatorKey, data: householdMembers, filterValues, filterUpdate }}>
+                {householdMembers?.data?.map((member) => (
+                    <StateNavLink
+                        key={member?.identity.id}
+                        name={DashboardRoutes.IDENTITY}
+                        dataDusk={`tableProfilesRow${member?.identity.id}`}
+                        params={{
+                            organizationId: activeOrganization.id,
+                            id: member?.identity.id,
+                        }}
+                        className={'tr-clickable'}
+                        customElement={'tr'}>
+                        <IdentitiesTableRowItems
+                            actions={
+                                <TableRowActions
+                                    content={(e) => (
+                                        <div className="dropdown dropdown-actions">
+                                            <TableRowActionItem
+                                                type={'link'}
+                                                name={DashboardRoutes.IDENTITY}
+                                                params={{
+                                                    organizationId: activeOrganization.id,
+                                                    id: member?.identity.id,
+                                                }}>
+                                                <em className="mdi mdi-eye-outline icon-start" />
+                                                Bekijken
+                                            </TableRowActionItem>
+                                            <TableRowActionItem
+                                                type={'button'}
+                                                onClick={() => {
+                                                    e?.close();
+                                                    householdDeleteIdentity(member, fetchHouseholdMembers);
+                                                }}>
+                                                <em className="mdi mdi-close icon-start" />
+                                                Verwijderen
+                                            </TableRowActionItem>
+                                        </div>
+                                    )}
+                                />
+                            }
+                            identity={member?.identity}
+                            organization={activeOrganization}
                         />
-                    </div>
-                )}
+                    </StateNavLink>
+                ))}
             </LoaderTableCard>
         </div>
     );
diff --git a/react/src/dashboard/components/pages/identities/elements/IdentitiesTable.tsx b/react/src/dashboard/components/pages/identities/elements/IdentitiesTable.tsx
index cbd50cb64..b077beee5 100644
--- a/react/src/dashboard/components/pages/identities/elements/IdentitiesTable.tsx
+++ b/react/src/dashboard/components/pages/identities/elements/IdentitiesTable.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import useActiveOrganization from '../../../../hooks/useActiveOrganization';
 import useSetProgress from '../../../../hooks/useSetProgress';
-import Paginator from '../../../../modules/paginator/components/Paginator';
 import LoadingCard from '../../../elements/loading-card/LoadingCard';
 import { useFundService } from '../../../../services/FundService';
 import Fund from '../../../../props/models/Fund';
@@ -11,8 +10,6 @@ import CardHeaderFilter from '../../../elements/tables/elements/CardHeaderFilter
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import useTranslate from '../../../../hooks/useTranslate';
 import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
-import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
 import SelectControlOptionsFund from '../../../elements/select-control/templates/SelectControlOptionsFund';
 import usePushApiError from '../../../../hooks/usePushApiError';
 import useSponsorIdentitiesService from '../../../../services/SponsorIdentitesService';
@@ -52,11 +49,6 @@ export default function IdentitiesTable() {
     const { filter, filterValues, filterUpdate, loading, identities, fetchIdentities, paginatorKey } =
         useFetchSponsorIdentities(activeOrganization);
 
-    const { headElement, configsElement } = useConfigurableTable(
-        sponsorIdentitiesService.getColumns(activeOrganization),
-        { filter: filter, sortable: true, hasTooltips: true },
-    );
-
     const { setShow } = filter;
 
     const exportIdentities = useCallback(() => {
@@ -120,7 +112,7 @@ export default function IdentitiesTable() {
         <div className="card" data-dusk="tableProfilesContent">
             <div className="card-header">
                 <div className="card-title flex flex-grow">
-                    {translate('identities.header.title')} ({identities.meta.total})
+                    {translate('identities.header.title')} ({identities?.meta?.total})
                 </div>
 
                 <div className={'card-header-filters'}>
@@ -274,9 +266,9 @@ export default function IdentitiesTable() {
                                     className="button button-primary button-wide"
                                     onClick={exportIdentities}
                                     data-dusk="export"
-                                    disabled={identities.meta.total == 0}>
+                                    disabled={identities?.meta?.total == 0}>
                                     <em className="mdi mdi-download icon-start" />
-                                    {translate('components.dropdown.export', { total: identities.meta.total })}
+                                    {translate('components.dropdown.export', { total: identities?.meta?.total })}
                                 </button>
                             </div>
                         </CardHeaderFilter>
@@ -284,66 +276,44 @@ export default function IdentitiesTable() {
                 </div>
             </div>
 
-            <LoaderTableCard loading={loading} empty={identities.meta.total == 0} emptyTitle={'Geen personen gevonden'}>
-                <div className="card-section">
-                    <div className="card-block card-block-table">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {identities.data.map((identity) => (
-                                        <StateNavLink
-                                            key={identity.id}
-                                            name={DashboardRoutes.IDENTITY}
-                                            dataDusk={`tableProfilesRow${identity.id}`}
-                                            params={{
-                                                organizationId: activeOrganization.id,
-                                                id: identity.id,
-                                            }}
-                                            className={'tr-clickable'}
-                                            customElement={'tr'}>
-                                            <IdentitiesTableRowItems
-                                                actions={
-                                                    <TableRowActions
-                                                        content={() => (
-                                                            <div className="dropdown dropdown-actions">
-                                                                <TableRowActionItem
-                                                                    type={'link'}
-                                                                    name={DashboardRoutes.IDENTITY}
-                                                                    params={{
-                                                                        organizationId: activeOrganization.id,
-                                                                        id: identity.id,
-                                                                    }}>
-                                                                    <em className="mdi mdi-eye icon-start" /> Bekijken
-                                                                </TableRowActionItem>
-                                                            </div>
-                                                        )}
-                                                    />
-                                                }
-                                                identity={identity}
-                                                organization={activeOrganization}
-                                            />
-                                        </StateNavLink>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
-
-                {identities.meta.total > 0 && (
-                    <div className="card-section">
-                        <Paginator
-                            meta={identities.meta}
-                            filters={filterValues}
-                            updateFilters={filterUpdate}
-                            perPageKey={paginatorKey}
+            <LoaderTableCard
+                loading={loading}
+                empty={identities?.meta?.total == 0}
+                emptyTitle={'Geen personen gevonden'}
+                columns={sponsorIdentitiesService.getColumns(activeOrganization)}
+                tableOptions={{ filter, sortable: true, hasTooltips: true }}
+                paginator={{ key: paginatorKey, data: identities, filterValues, filterUpdate }}>
+                {identities?.data?.map((identity) => (
+                    <StateNavLink
+                        key={identity.id}
+                        name={DashboardRoutes.IDENTITY}
+                        dataDusk={`tableProfilesRow${identity.id}`}
+                        params={{ organizationId: activeOrganization.id, id: identity.id }}
+                        className={'tr-clickable'}
+                        customElement={'tr'}>
+                        <IdentitiesTableRowItems
+                            actions={
+                                <TableRowActions
+                                    content={() => (
+                                        <div className="dropdown dropdown-actions">
+                                            <TableRowActionItem
+                                                type={'link'}
+                                                name={DashboardRoutes.IDENTITY}
+                                                params={{
+                                                    organizationId: activeOrganization.id,
+                                                    id: identity.id,
+                                                }}>
+                                                <em className="mdi mdi-eye icon-start" /> Bekijken
+                                            </TableRowActionItem>
+                                        </div>
+                                    )}
+                                />
+                            }
+                            identity={identity}
+                            organization={activeOrganization}
                         />
-                    </div>
-                )}
+                    </StateNavLink>
+                ))}
             </LoaderTableCard>
         </div>
     );
diff --git a/react/src/dashboard/components/pages/identitities-show/cards/IdentityBankAccountsCard.tsx b/react/src/dashboard/components/pages/identitities-show/cards/IdentityBankAccountsCard.tsx
index de3ec263f..7cd2b45b7 100644
--- a/react/src/dashboard/components/pages/identitities-show/cards/IdentityBankAccountsCard.tsx
+++ b/react/src/dashboard/components/pages/identitities-show/cards/IdentityBankAccountsCard.tsx
@@ -1,8 +1,6 @@
 import React, { useCallback } from 'react';
 import Organization, { Permission } from '../../../../props/models/Organization';
-import EmptyCard from '../../../elements/empty-card/EmptyCard';
 import Card from '../../../elements/card/Card';
-import CardTable from '../../../elements/card-table/CardTable';
 import useSponsorIdentitiesService from '../../../../services/SponsorIdentitesService';
 import SponsorIdentity from '../../../../props/models/Sponsor/SponsorIdentity';
 import useOpenModal from '../../../../hooks/useOpenModal';
@@ -19,6 +17,7 @@ import { hasPermission } from '../../../../helpers/utils';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import { DashboardRoutes } from '../../../../modules/state_router/RouterBuilder';
 import TableRowActionItem from '../../../elements/tables/TableRowActionItem';
+import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
 
 export default function IdentityBankAccountsCard({
     identity,
@@ -144,6 +143,7 @@ export default function IdentityBankAccountsCard({
     return (
         <Card
             title={`Bankrekeningen (${identity.bank_accounts?.length || 0})`}
+            section={false}
             buttons={[
                 canManageIdentities && {
                     text: 'Aanmaken',
@@ -152,82 +152,81 @@ export default function IdentityBankAccountsCard({
                     onClick: () => editBankAccount(null),
                 },
             ]}>
-            {identity?.bank_accounts.length === 0 ? (
-                <EmptyCard title={'Geen bankrekening gevonden'} type={'card-section-content'} />
-            ) : (
-                <CardTable columns={sponsorIdentitiesService.getBankAccountColumns()}>
-                    {identity?.bank_accounts?.map((bank_account, index) => {
-                        const sourceMeta = getBankAccountSourceMeta(bank_account);
-                        const canEdit = bank_account?.id && canManageIdentities;
-                        const canViewSource = Boolean(sourceMeta.name);
+            <LoaderTableCard
+                empty={identity?.bank_accounts.length === 0}
+                emptyTitle={'Geen bankrekening gevonden'}
+                columns={sponsorIdentitiesService.getBankAccountColumns()}>
+                {identity?.bank_accounts?.map((bank_account, index) => {
+                    const sourceMeta = getBankAccountSourceMeta(bank_account);
+                    const canEdit = bank_account?.id && canManageIdentities;
+                    const canViewSource = Boolean(sourceMeta.name);
 
-                        return (
-                            <tr key={index}>
-                                <td>{bank_account.iban}</td>
-                                <td>{bank_account.name}</td>
-                                <td>
-                                    <TableDateTime value={bank_account.updated_at_locale} />
-                                </td>
-                                <td>
-                                    {sourceMeta.name ? (
-                                        <StateNavLink
-                                            name={sourceMeta.name}
-                                            params={sourceMeta.params}
-                                            className="text-primary text-semibold text-inherit text-decoration-link">
-                                            {sourceMeta.label}
-                                        </StateNavLink>
-                                    ) : (
-                                        sourceMeta.label
-                                    )}
-                                </td>
-                                <td className="table-td-actions text-right">
-                                    {canEdit || canViewSource ? (
-                                        <TableRowActions
-                                            content={(e) => (
-                                                <div className="dropdown dropdown-actions">
-                                                    {canViewSource && (
-                                                        <TableRowActionItem
-                                                            type="link"
-                                                            name={sourceMeta.name}
-                                                            params={sourceMeta.params}>
-                                                            <em className="mdi mdi-eye-outline icon-start" />
-                                                            Bekijk bron
-                                                        </TableRowActionItem>
-                                                    )}
-                                                    {canEdit && (
-                                                        <TableRowActionItem
-                                                            type="button"
-                                                            onClick={() => {
-                                                                e.close();
-                                                                editBankAccount(bank_account.id);
-                                                            }}>
-                                                            <em className="mdi mdi-pencil icon-start" />
-                                                            Bewerking
-                                                        </TableRowActionItem>
-                                                    )}
-                                                    {canEdit && (
-                                                        <TableRowActionItem
-                                                            type="button"
-                                                            onClick={() => {
-                                                                e.close();
-                                                                deleteBankAccount(bank_account.id);
-                                                            }}>
-                                                            <em className="mdi mdi-close icon-start" />
-                                                            Verwijderen
-                                                        </TableRowActionItem>
-                                                    )}
-                                                </div>
-                                            )}
-                                        />
-                                    ) : (
-                                        <TableEmptyValue />
-                                    )}
-                                </td>
-                            </tr>
-                        );
-                    })}
-                </CardTable>
-            )}
+                    return (
+                        <tr key={index}>
+                            <td>{bank_account.iban}</td>
+                            <td>{bank_account.name}</td>
+                            <td>
+                                <TableDateTime value={bank_account.updated_at_locale} />
+                            </td>
+                            <td>
+                                {sourceMeta.name ? (
+                                    <StateNavLink
+                                        name={sourceMeta.name}
+                                        params={sourceMeta.params}
+                                        className="text-primary text-semibold text-inherit text-decoration-link">
+                                        {sourceMeta.label}
+                                    </StateNavLink>
+                                ) : (
+                                    sourceMeta.label
+                                )}
+                            </td>
+                            <td className="table-td-actions text-right">
+                                {canEdit || canViewSource ? (
+                                    <TableRowActions
+                                        content={(e) => (
+                                            <div className="dropdown dropdown-actions">
+                                                {canViewSource && (
+                                                    <TableRowActionItem
+                                                        type="link"
+                                                        name={sourceMeta.name}
+                                                        params={sourceMeta.params}>
+                                                        <em className="mdi mdi-eye-outline icon-start" />
+                                                        Bekijk bron
+                                                    </TableRowActionItem>
+                                                )}
+                                                {canEdit && (
+                                                    <TableRowActionItem
+                                                        type="button"
+                                                        onClick={() => {
+                                                            e.close();
+                                                            editBankAccount(bank_account.id);
+                                                        }}>
+                                                        <em className="mdi mdi-pencil icon-start" />
+                                                        Bewerking
+                                                    </TableRowActionItem>
+                                                )}
+                                                {canEdit && (
+                                                    <TableRowActionItem
+                                                        type="button"
+                                                        onClick={() => {
+                                                            e.close();
+                                                            deleteBankAccount(bank_account.id);
+                                                        }}>
+                                                        <em className="mdi mdi-close icon-start" />
+                                                        Verwijderen
+                                                    </TableRowActionItem>
+                                                )}
+                                            </div>
+                                        )}
+                                    />
+                                ) : (
+                                    <TableEmptyValue />
+                                )}
+                            </td>
+                        </tr>
+                    );
+                })}
+            </LoaderTableCard>
         </Card>
     );
 }
diff --git a/react/src/dashboard/components/pages/identitities-show/elements/ProfileRelationsCard.tsx b/react/src/dashboard/components/pages/identitities-show/elements/ProfileRelationsCard.tsx
index 0d0ef5f22..1770c6494 100644
--- a/react/src/dashboard/components/pages/identitities-show/elements/ProfileRelationsCard.tsx
+++ b/react/src/dashboard/components/pages/identitities-show/elements/ProfileRelationsCard.tsx
@@ -1,13 +1,10 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import useActiveOrganization from '../../../../hooks/useActiveOrganization';
 import useSetProgress from '../../../../hooks/useSetProgress';
-import Paginator from '../../../../modules/paginator/components/Paginator';
 import LoadingCard from '../../../elements/loading-card/LoadingCard';
 import FilterItemToggle from '../../../elements/tables/elements/FilterItemToggle';
 import CardHeaderFilter from '../../../elements/tables/elements/CardHeaderFilter';
 import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
-import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
 import usePushApiError from '../../../../hooks/usePushApiError';
 import useSponsorIdentitiesService from '../../../../services/SponsorIdentitesService';
 import TableRowActions from '../../../elements/tables/TableRowActions';
@@ -75,11 +72,6 @@ export default function ProfileRelationsCard({
             });
     }, [filterValuesActive, identity?.id, organization.id, pushApiError, setProgress, sponsorIdentitiesService]);
 
-    const { headElement, configsElement } = useConfigurableTable(
-        sponsorIdentitiesService.getColumnsRelations(activeOrganization),
-        { filter: filter, sortable: false, hasTooltips: true },
-    );
-
     useEffect(() => {
         fetchIdentityRelations();
     }, [fetchIdentityRelations]);
@@ -137,98 +129,72 @@ export default function ProfileRelationsCard({
                 </div>
             </div>
 
-            <LoaderTableCard loading={loading} empty={relations.meta.total == 0} emptyTitle={'Geen relaties gevonden'}>
-                <div className="card-section">
-                    <div className="card-block card-block-table">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {relations.data.map((relation) => (
-                                        <StateNavLink
-                                            name={DashboardRoutes.IDENTITY}
-                                            params={{
-                                                organizationId: activeOrganization.id,
-                                                id:
-                                                    relation?.identity_id === identity?.id
-                                                        ? relation?.related_identity_id
-                                                        : relation?.identity_id,
-                                            }}
-                                            className={'tr-clickable'}
-                                            customElement={'tr'}
-                                            key={relation?.id}>
-                                            <ProfileRelationsTableRowItem
-                                                actions={
-                                                    <TableRowActions
-                                                        content={(e) => (
-                                                            <div className="dropdown dropdown-actions">
-                                                                <TableRowActionItem
-                                                                    type={'link'}
-                                                                    name={DashboardRoutes.IDENTITY}
-                                                                    params={{
-                                                                        organizationId: activeOrganization.id,
-                                                                        id:
-                                                                            relation?.identity_id === identity?.id
-                                                                                ? relation?.related_identity_id
-                                                                                : relation?.identity_id,
-                                                                    }}>
-                                                                    <em className="mdi mdi-eye-outline icon-start" />
-                                                                    Bekijken
-                                                                </TableRowActionItem>
-                                                                <TableRowActionItem
-                                                                    type={'button'}
-                                                                    onClick={() => {
-                                                                        e?.close();
-                                                                        identityRelationEdit(
-                                                                            identity,
-                                                                            relation,
-                                                                            fetchIdentityRelations,
-                                                                        );
-                                                                    }}>
-                                                                    <em className="mdi mdi-pencil icon-start" />
-                                                                    Wijzigen
-                                                                </TableRowActionItem>
-                                                                <TableRowActionItem
-                                                                    type={'button'}
-                                                                    onClick={() => {
-                                                                        e?.close();
-                                                                        identityRelationDelete(
-                                                                            relation,
-                                                                            fetchIdentityRelations,
-                                                                        );
-                                                                    }}>
-                                                                    <em className="mdi mdi-close icon-start" />
-                                                                    Verwijderen
-                                                                </TableRowActionItem>
-                                                            </div>
-                                                        )}
-                                                    />
-                                                }
-                                                relation={relation}
-                                                identity={identity}
-                                                organization={activeOrganization}
-                                            />
-                                        </StateNavLink>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
-
-                {relations.meta.total > 0 && (
-                    <div className="card-section">
-                        <Paginator
-                            meta={relations.meta}
-                            filters={filterValues}
-                            updateFilters={filterUpdate}
-                            perPageKey={paginatorKey}
+            <LoaderTableCard
+                loading={loading}
+                empty={relations?.meta?.total == 0}
+                emptyTitle={'Geen relaties gevonden'}
+                columns={sponsorIdentitiesService.getColumnsRelations(activeOrganization)}
+                tableOptions={{ filter, sortable: false, hasTooltips: true }}
+                paginator={{ key: paginatorKey, data: relations, filterValues, filterUpdate }}>
+                {relations?.data?.map((relation) => (
+                    <StateNavLink
+                        name={DashboardRoutes.IDENTITY}
+                        params={{
+                            organizationId: activeOrganization.id,
+                            id:
+                                relation?.identity_id === identity?.id
+                                    ? relation?.related_identity_id
+                                    : relation?.identity_id,
+                        }}
+                        className={'tr-clickable'}
+                        customElement={'tr'}
+                        key={relation?.id}>
+                        <ProfileRelationsTableRowItem
+                            actions={
+                                <TableRowActions
+                                    content={(e) => (
+                                        <div className="dropdown dropdown-actions">
+                                            <TableRowActionItem
+                                                type={'link'}
+                                                name={DashboardRoutes.IDENTITY}
+                                                params={{
+                                                    organizationId: activeOrganization.id,
+                                                    id:
+                                                        relation?.identity_id === identity?.id
+                                                            ? relation?.related_identity_id
+                                                            : relation?.identity_id,
+                                                }}>
+                                                <em className="mdi mdi-eye-outline icon-start" />
+                                                Bekijken
+                                            </TableRowActionItem>
+                                            <TableRowActionItem
+                                                type={'button'}
+                                                onClick={() => {
+                                                    e?.close();
+                                                    identityRelationEdit(identity, relation, fetchIdentityRelations);
+                                                }}>
+                                                <em className="mdi mdi-pencil icon-start" />
+                                                Wijzigen
+                                            </TableRowActionItem>
+                                            <TableRowActionItem
+                                                type={'button'}
+                                                onClick={() => {
+                                                    e?.close();
+                                                    identityRelationDelete(relation, fetchIdentityRelations);
+                                                }}>
+                                                <em className="mdi mdi-close icon-start" />
+                                                Verwijderen
+                                            </TableRowActionItem>
+                                        </div>
+                                    )}
+                                />
+                            }
+                            relation={relation}
+                            identity={identity}
+                            organization={activeOrganization}
                         />
-                    </div>
-                )}
+                    </StateNavLink>
+                ))}
             </LoaderTableCard>
         </div>
     );
diff --git a/react/src/dashboard/components/pages/identity-preferences/PreferencesEmails.tsx b/react/src/dashboard/components/pages/identity-preferences/PreferencesEmails.tsx
index 54f25a5a5..230a28a9d 100644
--- a/react/src/dashboard/components/pages/identity-preferences/PreferencesEmails.tsx
+++ b/react/src/dashboard/components/pages/identity-preferences/PreferencesEmails.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import { useIdentityEmailsService } from '../../../services/IdentityEmailService';
 import useFormBuilder from '../../../hooks/useFormBuilder';
 import { PaginationData, ResponseError } from '../../../props/ApiResponses';
@@ -166,7 +167,9 @@ export default function PreferencesEmails() {
                     {emails?.data.map((email) => (
                         <div key={`email_${email.id}`} className="user_email-item" id={`email_${email.id}`}>
                             <div className="user_email-icon">
-                                <em className={`mdi mdi-email-outline ${email.primary ? 'text-primary' : ''}`} />
+                                <em
+                                    className={classNames('mdi', 'mdi-email-outline', email.primary && 'text-primary')}
+                                />
                             </div>
                             <div className="user_email-details">
                                 <div className="user_email-address" data-dusk="identityEmailListItemEmail">
diff --git a/react/src/dashboard/components/pages/implementation-funds/ImplementationFunds.tsx b/react/src/dashboard/components/pages/implementation-funds/ImplementationFunds.tsx
index 35cb73006..c75574610 100644
--- a/react/src/dashboard/components/pages/implementation-funds/ImplementationFunds.tsx
+++ b/react/src/dashboard/components/pages/implementation-funds/ImplementationFunds.tsx
@@ -9,12 +9,10 @@ import LoadingCard from '../../elements/loading-card/LoadingCard';
 import { useFundService } from '../../../services/FundService';
 import Fund from '../../../props/models/Fund';
 import { getStateRouteUrl } from '../../../modules/state_router/Router';
-import EmptyCard from '../../elements/empty-card/EmptyCard';
+import LoaderTableCard from '../../elements/loader-table-card/LoaderTableCard';
 import useSetProgress from '../../../hooks/useSetProgress';
 import FundStateLabels from '../../elements/resource-states/FundStateLabels';
-import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
 import TableEmptyValue from '../../elements/table-empty-value/TableEmptyValue';
-import TableTopScroller from '../../elements/tables/TableTopScroller';
 import TableRowActions from '../../elements/tables/TableRowActions';
 import usePushApiError from '../../../hooks/usePushApiError';
 import { Permission } from '../../../props/models/Organization';
@@ -56,8 +54,6 @@ export default function ImplementationFunds() {
             });
     }, [activeOrganization.id, id, implementationService, navigate, pushApiError]);
 
-    const { headElement, configsElement } = useConfigurableTable(implementationService.getColumns());
-
     const fetchFunds = useCallback(() => {
         setProgress(0);
 
@@ -107,93 +103,77 @@ export default function ImplementationFunds() {
                     </div>
                 </div>
 
-                {funds.meta.total > 0 ? (
-                    <div className="card-section">
-                        <div className="card-block card-block-table">
-                            {configsElement}
-
-                            <TableTopScroller>
-                                <table className="table">
-                                    {headElement}
-
-                                    <tbody>
-                                        {funds.data.map((fund) => (
-                                            <StateNavLink
-                                                key={fund.id}
-                                                name={DashboardRoutes.FUND}
-                                                className={'tr-clickable'}
-                                                customElement={'tr'}
-                                                params={{ fundId: fund.id, organizationId: activeOrganization.id }}>
-                                                <td>
-                                                    <TableEntityMain
-                                                        title={strLimit(fund.name, 50)}
-                                                        subtitle={fund.organization?.name}
-                                                        mediaPlaceholder={'fund'}
-                                                        media={fund?.logo}
-                                                    />
-                                                </td>
-                                                <td className="text-strong text-muted-dark">
-                                                    {fund?.implementation?.name || <TableEmptyValue />}
-                                                </td>
-                                                <td>
-                                                    <FundStateLabels fund={fund} />
-                                                </td>
-                                                <td className={'table-td-actions text-right'}>
-                                                    {activeOrganization.backoffice_available ? (
-                                                        <TableRowActions
-                                                            content={() => (
-                                                                <div className="dropdown dropdown-actions">
-                                                                    <StateNavLink
-                                                                        name={DashboardRoutes.FUND}
-                                                                        params={{
-                                                                            fundId: fund.id,
-                                                                            organizationId: activeOrganization.id,
-                                                                        }}
-                                                                        className="dropdown-item">
-                                                                        <em className="mdi mdi-eye-outline icon-start" />
-                                                                        Bekijken
-                                                                    </StateNavLink>
-
-                                                                    {hasPermission(
-                                                                        activeOrganization,
-                                                                        Permission.MANAGE_FUNDS,
-                                                                    ) &&
-                                                                        fund.key && (
-                                                                            <StateNavLink
-                                                                                name={
-                                                                                    DashboardRoutes.FUND_BACKOFFICE_EDIT
-                                                                                }
-                                                                                params={{
-                                                                                    fundId: fund.id,
-                                                                                    organizationId:
-                                                                                        activeOrganization.id,
-                                                                                }}
-                                                                                className="dropdown-item">
-                                                                                <em className="mdi mdi-cog icon-start" />
-                                                                                Backoffice
-                                                                            </StateNavLink>
-                                                                        )}
-                                                                </div>
-                                                            )}
-                                                        />
-                                                    ) : (
-                                                        <TableEmptyValue />
+                <LoaderTableCard
+                    empty={funds?.meta?.total == 0}
+                    emptyTitle={'Geen fondsen gekoppeld aan deze implementatie.'}
+                    columns={implementationService.getColumns()}>
+                    {funds?.data?.map((fund) => (
+                        <StateNavLink
+                            key={fund.id}
+                            name={DashboardRoutes.FUND}
+                            className={'tr-clickable'}
+                            customElement={'tr'}
+                            params={{
+                                fundId: fund.id,
+                                organizationId: activeOrganization.id,
+                            }}>
+                            <td>
+                                <TableEntityMain
+                                    title={strLimit(fund.name, 50)}
+                                    subtitle={fund.organization?.name}
+                                    mediaPlaceholder={'fund'}
+                                    media={fund?.logo}
+                                />
+                            </td>
+                            <td className="text-strong text-muted-dark">
+                                {fund?.implementation?.name || <TableEmptyValue />}
+                            </td>
+                            <td>
+                                <FundStateLabels fund={fund} />
+                            </td>
+                            <td className={'table-td-actions text-right'}>
+                                {activeOrganization.backoffice_available ? (
+                                    <TableRowActions
+                                        content={() => (
+                                            <div className="dropdown dropdown-actions">
+                                                <StateNavLink
+                                                    name={DashboardRoutes.FUND}
+                                                    params={{
+                                                        fundId: fund.id,
+                                                        organizationId: activeOrganization.id,
+                                                    }}
+                                                    className="dropdown-item">
+                                                    <em className="mdi mdi-eye-outline icon-start" />
+                                                    Bekijken
+                                                </StateNavLink>
+
+                                                {hasPermission(activeOrganization, Permission.MANAGE_FUNDS) &&
+                                                    fund.key && (
+                                                        <StateNavLink
+                                                            name={DashboardRoutes.FUND_BACKOFFICE_EDIT}
+                                                            params={{
+                                                                fundId: fund.id,
+                                                                organizationId: activeOrganization.id,
+                                                            }}
+                                                            className="dropdown-item">
+                                                            <em className="mdi mdi-cog icon-start" />
+                                                            Backoffice
+                                                        </StateNavLink>
                                                     )}
-                                                </td>
-                                            </StateNavLink>
-                                        ))}
-                                    </tbody>
-                                </table>
-                            </TableTopScroller>
-                        </div>
-                    </div>
-                ) : (
-                    <EmptyCard type={'card-section'} title={'Geen fondsen gekoppeld aan deze implementatie.'} />
-                )}
+                                            </div>
+                                        )}
+                                    />
+                                ) : (
+                                    <TableEmptyValue />
+                                )}
+                            </td>
+                        </StateNavLink>
+                    ))}
+                </LoaderTableCard>
 
                 <div className="card-section">
                     <div className="table-pagination">
-                        <div className="table-pagination-counter">{funds.meta.total} resultaten</div>
+                        <div className="table-pagination-counter">{funds?.meta?.total} resultaten</div>
                     </div>
                 </div>
             </div>
diff --git a/react/src/dashboard/components/pages/implementation-notifications/ImplementationNotificationSend.tsx b/react/src/dashboard/components/pages/implementation-notifications/ImplementationNotificationSend.tsx
index 11cae502c..7bb80bf14 100644
--- a/react/src/dashboard/components/pages/implementation-notifications/ImplementationNotificationSend.tsx
+++ b/react/src/dashboard/components/pages/implementation-notifications/ImplementationNotificationSend.tsx
@@ -12,7 +12,6 @@ import { useNavigateState } from '../../../modules/state_router/Router';
 import { hasPermission } from '../../../helpers/utils';
 import SelectControl from '../../elements/select-control/SelectControl';
 import usePaginatorService from '../../../modules/paginator/services/usePaginatorService';
-import Paginator from '../../../modules/paginator/components/Paginator';
 import SponsorIdentity, { SponsorIdentityCounts } from '../../../props/models/Sponsor/SponsorIdentity';
 import Fund from '../../../props/models/Fund';
 import { useFundService } from '../../../services/FundService';
@@ -24,10 +23,9 @@ import SystemNotification from '../../../props/models/SystemNotification';
 import useFundIdentitiesExporter from '../../../services/exporters/useFundIdentitiesExporter';
 import useTranslate from '../../../hooks/useTranslate';
 import EmptyCard from '../../elements/empty-card/EmptyCard';
+import LoaderTableCard from '../../elements/loader-table-card/LoaderTableCard';
 import usePushApiError from '../../../hooks/usePushApiError';
 import { Permission } from '../../../props/models/Organization';
-import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
-import TableTopScroller from '../../elements/tables/TableTopScroller';
 import TableEmptyValue from '../../elements/table-empty-value/TableEmptyValue';
 import ImplementationsRootBreadcrumbs from '../implementations/elements/ImplementationsRootBreadcrumbs';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
@@ -157,14 +155,6 @@ export default function ImplementationNotificationSend() {
         order_dir: 'desc',
     });
 
-    const { headElement, configsElement } = useConfigurableTable(
-        implementationNotificationsService.getIdentitiesColumns(),
-        {
-            sortable: true,
-            filter: identitiesFilter,
-        },
-    );
-
     const exportIdentities = useCallback(() => {
         fundIdentitiesExporter.exportData(activeOrganization.id, fund.id, {
             ...identitiesFilterValuesActive,
@@ -605,55 +595,35 @@ export default function ImplementationNotificationSend() {
                                 </div>
                             )}
 
-                            {showIdentities && identities.meta.total > 0 && (
-                                <div className="card-section">
-                                    <div className="card-block card-block-table">
-                                        {configsElement}
-
-                                        <TableTopScroller>
-                                            <table className="table">
-                                                {headElement}
-
-                                                <tbody>
-                                                    {identities.data.map((identity) => (
-                                                        <tr key={identity.id}>
-                                                            <td>{identity.id}</td>
-                                                            <td>{identity.email}</td>
-                                                            <td>{identity.count_vouchers}</td>
-                                                            <td>{identity.count_vouchers_active}</td>
-                                                            <td>{identity.count_vouchers_active_with_balance}</td>
-                                                            <td className={'table-td-actions text-right'}>
-                                                                <TableEmptyValue />
-                                                            </td>
-                                                        </tr>
-                                                    ))}
-                                                </tbody>
-                                            </table>
-                                        </TableTopScroller>
-                                    </div>
-                                </div>
-                            )}
-
-                            {showIdentities && identities.meta.total == 0 && (
-                                <EmptyCard
-                                    type={'card-section'}
-                                    title={
+                            {showIdentities && (
+                                <LoaderTableCard
+                                    empty={identities?.meta?.total == 0}
+                                    emptyTitle={
                                         lastIdentitiesQuery
                                             ? `Geen gebruikers gevonden voor "${lastIdentitiesQuery}"`
                                             : 'Geen gebruikers gevonden'
                                     }
-                                />
-                            )}
-
-                            {showIdentities && identities && identities?.meta && (
-                                <div className="card-section card-section-narrow">
-                                    <Paginator
-                                        meta={identities.meta}
-                                        filters={identitiesFilterValues}
-                                        updateFilters={identitiesFilterUpdate}
-                                        perPageKey={perPageKey}
-                                    />
-                                </div>
+                                    columns={implementationNotificationsService.getIdentitiesColumns()}
+                                    tableOptions={{ sortable: true, filter: identitiesFilter }}
+                                    paginator={{
+                                        key: perPageKey,
+                                        data: identities,
+                                        filterValues: identitiesFilterValues,
+                                        filterUpdate: identitiesFilterUpdate,
+                                    }}>
+                                    {identities?.data?.map((identity) => (
+                                        <tr key={identity.id}>
+                                            <td>{identity.id}</td>
+                                            <td>{identity.email}</td>
+                                            <td>{identity.count_vouchers}</td>
+                                            <td>{identity.count_vouchers_active}</td>
+                                            <td>{identity.count_vouchers_active_with_balance}</td>
+                                            <td className={'table-td-actions text-right'}>
+                                                <TableEmptyValue />
+                                            </td>
+                                        </tr>
+                                    ))}
+                                </LoaderTableCard>
                             )}
 
                             <div className="card-section card-section-primary">
diff --git a/react/src/dashboard/components/pages/implementation-notifications/ImplementationNotifications.tsx b/react/src/dashboard/components/pages/implementation-notifications/ImplementationNotifications.tsx
index a227321ad..3ec407202 100644
--- a/react/src/dashboard/components/pages/implementation-notifications/ImplementationNotifications.tsx
+++ b/react/src/dashboard/components/pages/implementation-notifications/ImplementationNotifications.tsx
@@ -11,13 +11,12 @@ import SystemNotification from '../../../props/models/SystemNotification';
 import useTranslate from '../../../hooks/useTranslate';
 import usePushApiError from '../../../hooks/usePushApiError';
 import Label from '../../elements/image_cropper/Label';
-import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
-import TableTopScroller from '../../elements/tables/TableTopScroller';
 import TableRowActions from '../../elements/tables/TableRowActions';
 import InfoBox from '../../elements/info-box/InfoBox';
 import { useParams } from 'react-router';
 import ImplementationsRootBreadcrumbs from '../implementations/elements/ImplementationsRootBreadcrumbs';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
+import LoaderTableCard from '../../elements/loader-table-card/LoaderTableCard';
 
 export default function ImplementationNotifications() {
     const { id } = useParams();
@@ -51,7 +50,7 @@ export default function ImplementationNotifications() {
 
         const groupOrder = Object.keys(groupLabels);
 
-        const list = notifications.data.map((notification) => ({
+        const list = notifications?.data?.map((notification) => ({
             ...notification,
             state: implementationNotificationsService.notificationToStateLabel(notification),
             title: translate(`system_notifications.notifications.${notification.key}.title`),
@@ -66,8 +65,6 @@ export default function ImplementationNotifications() {
             .sort((a, b) => groupOrder.indexOf(a.group) - groupOrder.indexOf(b.group));
     }, [translate, groupLabels, notifications, implementationNotificationsService]);
 
-    const { headElement, configsElement } = useConfigurableTable(implementationNotificationsService.getColumns());
-
     const notificationIconColor = useCallback(
         (notification: SystemNotification, type: 'database' | 'mail' | 'push') => {
             const templateChanged = notification.templates.filter((item) => item.type == type).length > 0;
@@ -204,110 +201,82 @@ export default function ImplementationNotifications() {
                     <div className="card-header">
                         <div className="card-title">{notificationGroup.groupLabel}</div>
                     </div>
-                    <div className="card-section">
-                        <div className="card-block card-block-table">
-                            {configsElement}
-
-                            <TableTopScroller>
-                                <table className="table">
-                                    {headElement}
-
-                                    <tbody>
-                                        {notificationGroup.notifications.map((notification) => (
-                                            <tr key={notification.id}>
-                                                <td className="td-grow">
-                                                    <div>
-                                                        {notification.editable ? (
-                                                            <em className="mdi mdi-pencil-outline text-muted-dark">
-                                                                {' '}
-                                                            </em>
-                                                        ) : (
-                                                            <em className="mdi mdi-lock-outline text-muted-dark"> </em>
-                                                        )}
-                                                        <span>{notification.title}</span>
+                    <LoaderTableCard columns={implementationNotificationsService.getColumns()}>
+                        {notificationGroup.notifications.map((notification) => (
+                            <tr key={notification.id}>
+                                <td className="td-grow">
+                                    <div>
+                                        {notification.editable ? (
+                                            <em className="mdi mdi-pencil-outline text-muted-dark"> </em>
+                                        ) : (
+                                            <em className="mdi mdi-lock-outline text-muted-dark"> </em>
+                                        )}
+                                        <span>{notification.title}</span>
+                                    </div>
+                                    <small>{notification.description}</small>
+                                </td>
+                                <td className="nowrap">
+                                    <div className="td-icons">
+                                        {channels.map((channel, index) => (
+                                            <em
+                                                key={index}
+                                                className={`block block-tooltip-details block-tooltip-hover mdi mdi-${notificationIcon(
+                                                    notification,
+                                                    channel,
+                                                )} ${notificationIconColor(notification, channel)}`}>
+                                                <div className="tooltip-content tooltip-content-fit tooltip-content-ghost">
+                                                    <div className="tooltip-heading text-left">
+                                                        {notificationIconTooltip(notification, channel).heading}
                                                     </div>
-                                                    <small>{notification.description}</small>
-                                                </td>
-                                                <td className="nowrap">
-                                                    <div className="td-icons">
-                                                        {channels.map((channel, index) => (
-                                                            <em
-                                                                key={index}
-                                                                className={`block block-tooltip-details block-tooltip-hover mdi mdi-${notificationIcon(
-                                                                    notification,
-                                                                    channel,
-                                                                )} ${notificationIconColor(notification, channel)}`}>
-                                                                <div className="tooltip-content tooltip-content-fit tooltip-content-ghost">
-                                                                    <div className="tooltip-heading text-left">
-                                                                        {
-                                                                            notificationIconTooltip(
-                                                                                notification,
-                                                                                channel,
-                                                                            ).heading
-                                                                        }
-                                                                    </div>
-                                                                    <div className="tooltip-text text-left">
-                                                                        {
-                                                                            notificationIconTooltip(
-                                                                                notification,
-                                                                                channel,
-                                                                            ).text
-                                                                        }
-                                                                    </div>
-                                                                </div>
-                                                            </em>
-                                                        ))}
+                                                    <div className="tooltip-text text-left">
+                                                        {notificationIconTooltip(notification, channel).text}
                                                     </div>
-                                                </td>
-
-                                                <td className="nowrap">
-                                                    {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={'td-narrow text-right'}>
-                                                    <TableRowActions
-                                                        content={() => (
-                                                            <div className="dropdown dropdown-actions">
-                                                                <StateNavLink
-                                                                    name={
-                                                                        DashboardRoutes.IMPLEMENTATION_NOTIFICATION_EDIT
-                                                                    }
-                                                                    params={{
-                                                                        organizationId: activeOrganization.id,
-                                                                        implementationId: implementation.id,
-                                                                        id: notification.id,
-                                                                    }}
-                                                                    className="dropdown-item">
-                                                                    <em className="mdi mdi-eye-outline icon-start" />
-                                                                    Bekijken
-                                                                </StateNavLink>
-                                                            </div>
-                                                        )}
-                                                    />
-                                                </td>
-                                            </tr>
+                                                </div>
+                                            </em>
                                         ))}
-                                    </tbody>
-                                </table>
-                            </TableTopScroller>
-                        </div>
-                    </div>
+                                    </div>
+                                </td>
+
+                                <td className="nowrap">
+                                    {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={'td-narrow text-right'}>
+                                    <TableRowActions
+                                        content={() => (
+                                            <div className="dropdown dropdown-actions">
+                                                <StateNavLink
+                                                    name={DashboardRoutes.IMPLEMENTATION_NOTIFICATION_EDIT}
+                                                    params={{
+                                                        organizationId: activeOrganization.id,
+                                                        implementationId: implementation.id,
+                                                        id: notification.id,
+                                                    }}
+                                                    className="dropdown-item">
+                                                    <em className="mdi mdi-eye-outline icon-start" />
+                                                    Bekijken
+                                                </StateNavLink>
+                                            </div>
+                                        )}
+                                    />
+                                </td>
+                            </tr>
+                        ))}
+                    </LoaderTableCard>
                 </div>
             ))}
         </Fragment>
diff --git a/react/src/dashboard/components/pages/implementation-notifications/elements/SystemNotificationEditor.tsx b/react/src/dashboard/components/pages/implementation-notifications/elements/SystemNotificationEditor.tsx
index 8035a5ab2..2e481715d 100644
--- a/react/src/dashboard/components/pages/implementation-notifications/elements/SystemNotificationEditor.tsx
+++ b/react/src/dashboard/components/pages/implementation-notifications/elements/SystemNotificationEditor.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import ToggleControl from '../../../elements/forms/controls/ToggleControl';
 import useImplementationNotificationService from '../../../../services/ImplementationNotificationService';
 import { keyBy } from 'lodash';
@@ -131,8 +132,14 @@ export default function SystemNotificationEditor({
     return (
         <div className="block block-system-notification-editor">
             <div className="card card-collapsed">
-                <div className={`card-header ${notification.enable_all ? '' : 'card-header-danger'}`}>
-                    <div className={`flex flex-grow card-title ${notification.enable_all ? '' : 'text-muted-dark'}`}>
+                <div className={classNames('card-header', !notification.enable_all && 'card-header-danger')}>
+                    <div
+                        className={classNames(
+                            'flex',
+                            'flex-grow',
+                            'card-title',
+                            !notification.enable_all && 'text-muted-dark',
+                        )}>
                         <em className="mdi mdi-web" />
                         <span>{notification.title}</span>
                         <span>{translate(`system_notifications.notifications.${notification.key}.title`)}</span>
@@ -154,7 +161,7 @@ export default function SystemNotificationEditor({
                 </div>
 
                 {funds && funds.length > 0 && (
-                    <div className={`card-section ${notification.enable_all ? '' : 'card-section-danger'}`}>
+                    <div className={classNames('card-section', !notification.enable_all && 'card-section-danger')}>
                         <div className="card-block card-block-keyvalue">
                             <div className="keyvalue-item flex">
                                 <div className="keyvalue-key text-right flex flex-vertical flex-center">
@@ -177,7 +184,7 @@ export default function SystemNotificationEditor({
                     </div>
                 )}
 
-                <div className={`card-section ${notification.enable_all ? '' : 'card-section-danger'}`}>
+                <div className={classNames('card-section', !notification.enable_all && 'card-section-danger')}>
                     <div className="card-block card-block-keyvalue">
                         <div className="keyvalue-item">
                             <div className="keyvalue-key text-right">
diff --git a/react/src/dashboard/components/pages/implementation-notifications/elements/SystemNotificationTemplateEditor.tsx b/react/src/dashboard/components/pages/implementation-notifications/elements/SystemNotificationTemplateEditor.tsx
index 26c02e7e4..b86ea175a 100644
--- a/react/src/dashboard/components/pages/implementation-notifications/elements/SystemNotificationTemplateEditor.tsx
+++ b/react/src/dashboard/components/pages/implementation-notifications/elements/SystemNotificationTemplateEditor.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import classNames from 'classnames';
 import FormError from '../../../elements/forms/errors/FormError';
 import MarkdownEditor from '../../../elements/forms/markdown-editor/MarkdownEditor';
 import ToggleControl from '../../../elements/forms/controls/ToggleControl';
@@ -373,7 +374,8 @@ export default function SystemNotificationTemplateEditor({
                     </div>
                 </div>
             ) : (
-                <div className={`card-header ${enable && notification.enable_all ? '' : 'card-header-danger'}`}>
+                <div
+                    className={classNames('card-header', !(enable && notification.enable_all) && 'card-header-danger')}>
                     <div className="flex flex-grow card-title">
                         <em className={`mdi mdi-${header.icon}`} />
                         <span>{header.title}</span>
@@ -386,7 +388,10 @@ export default function SystemNotificationTemplateEditor({
                             <div className="block block-inline-filters">
                                 <ToggleControl
                                     id={'enable_' + type}
-                                    className={`form-toggle-danger ${notification.enable_all ? '' : 'form-toggle-off'}`}
+                                    className={classNames(
+                                        'form-toggle-danger',
+                                        !notification.enable_all && 'form-toggle-off',
+                                    )}
                                     title={!notification.enable_all || !enable ? disabledNotes.disabled : ''}
                                     checked={enable}
                                     disabled={!notification.enable_all}
@@ -425,9 +430,10 @@ export default function SystemNotificationTemplateEditor({
             )}
 
             <div
-                className={`card-section ${
-                    (enable && notification.enable_all) || compose ? '' : 'card-section-danger'
-                }`}>
+                className={classNames(
+                    'card-section',
+                    !((enable && notification.enable_all) || compose) && 'card-section-danger',
+                )}>
                 <form onSubmit={form.submit}>
                     {!compose && notification.editable && !edit && (
                         <div className="card-section-actions">
@@ -499,7 +505,7 @@ export default function SystemNotificationTemplateEditor({
 
                         {type != 'mail' ? (
                             <div>
-                                <div className={edit ? 'editor-variables' : ''}>
+                                <div className={classNames(edit && 'editor-variables')}>
                                     {!edit && type === 'push' && (
                                         <div className="card-text">{template.content || 'Geen bericht'}</div>
                                     )}
diff --git a/react/src/dashboard/components/pages/implementation-pages/ImplementationPages.tsx b/react/src/dashboard/components/pages/implementation-pages/ImplementationPages.tsx
index 92bd3e8cf..b325c290e 100644
--- a/react/src/dashboard/components/pages/implementation-pages/ImplementationPages.tsx
+++ b/react/src/dashboard/components/pages/implementation-pages/ImplementationPages.tsx
@@ -10,8 +10,6 @@ import ImplementationPage from '../../../props/models/ImplementationPage';
 import useTranslate from '../../../hooks/useTranslate';
 import { keyBy } from 'lodash';
 import usePushApiError from '../../../hooks/usePushApiError';
-import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
-import TableTopScroller from '../../elements/tables/TableTopScroller';
 import TableRowActions from '../../elements/tables/TableRowActions';
 import classNames from 'classnames';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
@@ -19,6 +17,7 @@ import useImplementationService from '../../../services/ImplementationService';
 import { useParams } from 'react-router';
 import ImplementationsRootBreadcrumbs from '../implementations/elements/ImplementationsRootBreadcrumbs';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
+import LoaderTableCard from '../../elements/loader-table-card/LoaderTableCard';
 
 export default function ImplementationPages() {
     const { id } = useParams();
@@ -40,8 +39,6 @@ export default function ImplementationPages() {
 
     const [pagesByKey, setPagesByKey] = useState<{ [key: string]: ImplementationPage }>(null);
 
-    const { headElement, configsElement } = useConfigurableTable(implementationPageService.getColumns());
-
     const fetchPages = useCallback(() => {
         if (!implementation) return;
 
@@ -112,119 +109,97 @@ export default function ImplementationPages() {
                 <div className="card-header">
                     <div className="card-title">{translate('implementation_edit.implementations_table.title')}</div>
                 </div>
-                <div className="card-section">
-                    <div className="card-block card-block-table">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {pageTypes.map((pageType) => (
-                                        <StateNavLink
-                                            key={pageType.key}
-                                            name={DashboardRoutes.IMPLEMENTATION_VIEW_PAGE_EDIT}
-                                            params={{
-                                                id: pagesByKey?.[pageType.key]?.id,
-                                                organizationId: implementation.organization_id,
-                                                implementationId: implementation.id,
-                                            }}
-                                            customElement={'tr'}
-                                            className={'tr-clickable'}>
-                                            <td>{translate(`implementation_edit.labels.${pageType.key}`)}</td>
-                                            {pageType.type === 'static' && (
-                                                <td className="text-muted">Standaard pagina</td>
-                                            )}
-                                            {pageType.type === 'extra' && (
-                                                <td className="text-muted">Optionele pagina</td>
-                                            )}
-                                            {pageType.type === 'element' && (
-                                                <td className="text-muted">Pagina element</td>
-                                            )}
-
-                                            {pageType.blocks ? (
-                                                <td>{pagesByKey?.[pageType.key]?.blocks?.length || 'None'}</td>
+                <LoaderTableCard
+                    empty={pageTypes.length === 0}
+                    emptyTitle={'Geen pagina’s'}
+                    columns={implementationPageService.getColumns()}>
+                    {pageTypes.map((pageType) => (
+                        <StateNavLink
+                            key={pageType.key}
+                            name={DashboardRoutes.IMPLEMENTATION_VIEW_PAGE_EDIT}
+                            params={{
+                                id: pagesByKey?.[pageType.key]?.id,
+                                organizationId: implementation.organization_id,
+                                implementationId: implementation.id,
+                            }}
+                            customElement={'tr'}
+                            className={'tr-clickable'}>
+                            <td>{translate(`implementation_edit.labels.${pageType.key}`)}</td>
+                            {pageType.type === 'static' && <td className="text-muted">Standaard pagina</td>}
+                            {pageType.type === 'extra' && <td className="text-muted">Optionele pagina</td>}
+                            {pageType.type === 'element' && <td className="text-muted">Pagina element</td>}
+
+                            {pageType.blocks ? (
+                                <td>{pagesByKey?.[pageType.key]?.blocks?.length || 'None'}</td>
+                            ) : (
+                                <td className="text-muted">Niet beschikbaar</td>
+                            )}
+
+                            <td>{pagesByKey?.[pageType.key]?.state == 'public' ? 'Ja' : 'Nee'}</td>
+                            <td>
+                                {(pagesByKey?.[pageType.key]?.id && pagesByKey?.[pageType.key]?.state === 'public') ||
+                                pageType.type == 'static' ? (
+                                    <a
+                                        className="button button-sm button-text"
+                                        href={pageType.webshop_url}
+                                        rel="noreferrer"
+                                        target="_blank">
+                                        Bekijk
+                                        <em className="mdi mdi-open-in-new icon-end" />
+                                    </a>
+                                ) : (
+                                    <div className="text-muted">-</div>
+                                )}
+                            </td>
+                            <td className={'td-narrow text-right'}>
+                                <TableRowActions
+                                    content={({ close }) => (
+                                        <div className="dropdown dropdown-actions">
+                                            {pagesByKey?.[pageType.key]?.id ? (
+                                                <StateNavLink
+                                                    name={DashboardRoutes.IMPLEMENTATION_VIEW_PAGE_EDIT}
+                                                    params={{
+                                                        id: pagesByKey?.[pageType.key]?.id,
+                                                        implementationId: implementation.id,
+                                                        organizationId: implementation.organization_id,
+                                                    }}
+                                                    className="dropdown-item">
+                                                    <em className="mdi mdi-pen icon-start" />
+                                                    {translate('implementation_edit.implementations_table.labels.edit')}
+                                                </StateNavLink>
                                             ) : (
-                                                <td className="text-muted">Niet beschikbaar</td>
+                                                <StateNavLink
+                                                    name={DashboardRoutes.IMPLEMENTATION_VIEW_PAGE_CREATE}
+                                                    params={{
+                                                        organizationId: implementation.organization_id,
+                                                        implementationId: implementation.id,
+                                                    }}
+                                                    query={{ type: pageType.key }}
+                                                    className="dropdown-item">
+                                                    <em className="mdi mdi-plus icon-start" />
+                                                    {translate('implementation_edit.implementations_table.labels.edit')}
+                                                </StateNavLink>
                                             )}
 
-                                            <td>{pagesByKey?.[pageType.key]?.state == 'public' ? 'Ja' : 'Nee'}</td>
-                                            <td>
-                                                {(pagesByKey?.[pageType.key]?.id &&
-                                                    pagesByKey?.[pageType.key]?.state === 'public') ||
-                                                pageType.type == 'static' ? (
-                                                    <a
-                                                        className="button button-sm button-text"
-                                                        href={pageType.webshop_url}
-                                                        rel="noreferrer"
-                                                        target="_blank">
-                                                        Bekijk
-                                                        <em className="mdi mdi-open-in-new icon-end" />
-                                                    </a>
-                                                ) : (
-                                                    <div className="text-muted">-</div>
+                                            <a
+                                                className={classNames(
+                                                    'dropdown-item',
+                                                    !pagesByKey?.[pageType.key]?.id && 'disabled',
                                                 )}
-                                            </td>
-                                            <td className={'td-narrow text-right'}>
-                                                <TableRowActions
-                                                    content={({ close }) => (
-                                                        <div className="dropdown dropdown-actions">
-                                                            {pagesByKey?.[pageType.key]?.id ? (
-                                                                <StateNavLink
-                                                                    name={DashboardRoutes.IMPLEMENTATION_VIEW_PAGE_EDIT}
-                                                                    params={{
-                                                                        id: pagesByKey?.[pageType.key]?.id,
-                                                                        implementationId: implementation.id,
-                                                                        organizationId: implementation.organization_id,
-                                                                    }}
-                                                                    className="dropdown-item">
-                                                                    <em className="mdi mdi-pen icon-start" />
-                                                                    {translate(
-                                                                        'implementation_edit.implementations_table.labels.edit',
-                                                                    )}
-                                                                </StateNavLink>
-                                                            ) : (
-                                                                <StateNavLink
-                                                                    name={
-                                                                        DashboardRoutes.IMPLEMENTATION_VIEW_PAGE_CREATE
-                                                                    }
-                                                                    params={{
-                                                                        organizationId: implementation.organization_id,
-                                                                        implementationId: implementation.id,
-                                                                    }}
-                                                                    query={{ type: pageType.key }}
-                                                                    className="dropdown-item">
-                                                                    <em className="mdi mdi-plus icon-start" />
-                                                                    {translate(
-                                                                        'implementation_edit.implementations_table.labels.edit',
-                                                                    )}
-                                                                </StateNavLink>
-                                                            )}
-
-                                                            <a
-                                                                className={classNames(
-                                                                    'dropdown-item',
-                                                                    !pagesByKey?.[pageType.key]?.id && 'disabled',
-                                                                )}
-                                                                onClick={() => {
-                                                                    deletePage(pagesByKey?.[pageType.key]);
-                                                                    close();
-                                                                }}>
-                                                                <em className="icon-start mdi mdi-delete" />
-                                                                Verwijderen
-                                                            </a>
-                                                        </div>
-                                                    )}
-                                                />
-                                            </td>
-                                        </StateNavLink>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
+                                                onClick={() => {
+                                                    deletePage(pagesByKey?.[pageType.key]);
+                                                    close();
+                                                }}>
+                                                <em className="icon-start mdi mdi-delete" />
+                                                Verwijderen
+                                            </a>
+                                        </div>
+                                    )}
+                                />
+                            </td>
+                        </StateNavLink>
+                    ))}
+                </LoaderTableCard>
             </div>
         </Fragment>
     );
diff --git a/react/src/dashboard/components/pages/implementation-pre-check/ImplementationPreCheck.tsx b/react/src/dashboard/components/pages/implementation-pre-check/ImplementationPreCheck.tsx
index ff5c0992e..2bd38a0bc 100644
--- a/react/src/dashboard/components/pages/implementation-pre-check/ImplementationPreCheck.tsx
+++ b/react/src/dashboard/components/pages/implementation-pre-check/ImplementationPreCheck.tsx
@@ -9,7 +9,7 @@ import { PaginationData, ResponseError } from '../../../props/ApiResponses';
 import type PreCheck from '../../../props/models/PreCheck';
 import PreCheckStepEditor from './elements/PreCheckStepEditor';
 import EmptyCard from '../../elements/empty-card/EmptyCard';
-import { getStateRouteUrl, useNavigateState } from '../../../modules/state_router/Router';
+import { useNavigateState } from '../../../modules/state_router/Router';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import PhotoSelector from '../../elements/photo-selector/PhotoSelector';
 import useImplementationService from '../../../services/ImplementationService';
@@ -383,9 +383,8 @@ export default function ImplementationPreCheck() {
                                 text: 'Ga naar de fondsenpagina',
                                 type: 'primary',
                                 icon: 'plus',
-                                to: getStateRouteUrl(DashboardRoutes.FUND_CREATE, {
-                                    organizationId: activeOrganization.id,
-                                }),
+                                state: DashboardRoutes.FUND_CREATE,
+                                stateParams: { organizationId: activeOrganization.id },
                             }}
                         />
                     )}
diff --git a/react/src/dashboard/components/pages/implementation-pre-check/cards/PreCheckExclusionsCard.tsx b/react/src/dashboard/components/pages/implementation-pre-check/cards/PreCheckExclusionsCard.tsx
index 087584d25..36445507e 100644
--- a/react/src/dashboard/components/pages/implementation-pre-check/cards/PreCheckExclusionsCard.tsx
+++ b/react/src/dashboard/components/pages/implementation-pre-check/cards/PreCheckExclusionsCard.tsx
@@ -1,6 +1,5 @@
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
 import TableRowActions from '../../../elements/tables/TableRowActions';
-import EmptyCard from '../../../elements/empty-card/EmptyCard';
 import React, { useCallback, useMemo, useState } from 'react';
 import Fund from '../../../../props/models/Fund';
 import ModalPreCheckEditFundExclusions from '../../../modals/ModalPreCheckEditFundExclusions';
@@ -12,9 +11,7 @@ import usePushApiError from '../../../../hooks/usePushApiError';
 import Implementation from '../../../../props/models/Implementation';
 import usePreCheckService from '../../../../services/PreCheckService';
 import { strLimit } from '../../../../helpers/string';
-import PreCheckFundsLogo from '../../../../../../assets/forus-platform/resources/_platform-common/assets/img/pre-check-funds-logo.svg';
-import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
+import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
 
 export default function PreCheckExclusionsCard({
     funds,
@@ -35,8 +32,6 @@ export default function PreCheckExclusionsCard({
 
     const preCheckService = usePreCheckService();
 
-    const { headElement, configsElement } = useConfigurableTable(preCheckService.getExclusionColumns());
-
     const excludedFunds = useMemo(() => {
         return funds?.filter((fund) => fund.pre_check_excluded || fund.pre_check_note) || [];
     }, [funds]);
@@ -123,63 +118,50 @@ export default function PreCheckExclusionsCard({
                 </button>
             </div>
 
-            {excludedFunds?.length > 0 ? (
-                <div className="card-section">
-                    <div className="card-block card-block-table">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {excludedFunds.map((fund) => (
-                                        <tr key={fund.id}>
-                                            <td>{fund.name}</td>
-                                            <td>{fund.pre_check_excluded ? 'Ja' : 'Nee'}</td>
-                                            <td>
-                                                {!fund.pre_check_excluded && fund.pre_check_note ? (
-                                                    strLimit(fund.pre_check_note, 500)
-                                                ) : (
-                                                    <TableEmptyValue />
-                                                )}
-                                            </td>
-                                            <td className={'table-td-actions text-right'}>
-                                                <TableRowActions
-                                                    content={(e) => (
-                                                        <div className="dropdown dropdown-actions">
-                                                            <a
-                                                                className={`dropdown-item`}
-                                                                onClick={() => {
-                                                                    e.close();
-                                                                    editFundPreCheckSettings(fund);
-                                                                }}>
-                                                                <em className="mdi mdi-pencil icon-start" />
-                                                                Bewerken
-                                                            </a>
-                                                            <a
-                                                                className={`dropdown-item`}
-                                                                onClick={() => {
-                                                                    e.close();
-                                                                    removeFundPreCheckExclusion(fund.id);
-                                                                }}>
-                                                                <em className="mdi mdi-close-circle-outline icon-start" />
-                                                                Verwijderen
-                                                            </a>
-                                                        </div>
-                                                    )}
-                                                />
-                                            </td>
-                                        </tr>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
-            ) : (
-                <EmptyCard title={'Geen fondsen'} imageIconSvg={<PreCheckFundsLogo />} type={'card-section'} />
-            )}
+            <LoaderTableCard
+                empty={excludedFunds.length === 0}
+                emptyTitle={'Geen fondsen'}
+                columns={preCheckService.getExclusionColumns()}>
+                {excludedFunds.map((fund) => (
+                    <tr key={fund.id}>
+                        <td>{fund.name}</td>
+                        <td>{fund.pre_check_excluded ? 'Ja' : 'Nee'}</td>
+                        <td>
+                            {!fund.pre_check_excluded && fund.pre_check_note ? (
+                                strLimit(fund.pre_check_note, 500)
+                            ) : (
+                                <TableEmptyValue />
+                            )}
+                        </td>
+                        <td className={'table-td-actions text-right'}>
+                            <TableRowActions
+                                content={(e) => (
+                                    <div className="dropdown dropdown-actions">
+                                        <a
+                                            className="dropdown-item"
+                                            onClick={() => {
+                                                e.close();
+                                                editFundPreCheckSettings(fund);
+                                            }}>
+                                            <em className="mdi mdi-pencil icon-start" />
+                                            Bewerken
+                                        </a>
+                                        <a
+                                            className="dropdown-item"
+                                            onClick={() => {
+                                                e.close();
+                                                removeFundPreCheckExclusion(fund.id);
+                                            }}>
+                                            <em className="mdi mdi-close-circle-outline icon-start" />
+                                            Verwijderen
+                                        </a>
+                                    </div>
+                                )}
+                            />
+                        </td>
+                    </tr>
+                ))}
+            </LoaderTableCard>
         </div>
     );
 }
diff --git a/react/src/dashboard/components/pages/implementations-edit/ImplementationSocialMediaLinks.tsx b/react/src/dashboard/components/pages/implementations-edit/ImplementationSocialMediaLinks.tsx
index c92ea83e0..97166361e 100644
--- a/react/src/dashboard/components/pages/implementations-edit/ImplementationSocialMediaLinks.tsx
+++ b/react/src/dashboard/components/pages/implementations-edit/ImplementationSocialMediaLinks.tsx
@@ -6,7 +6,6 @@ import useSetProgress from '../../../hooks/useSetProgress';
 import { PaginationData, ResponseError } from '../../../props/ApiResponses';
 import useImplementationService from '../../../services/ImplementationService';
 import Implementation from '../../../props/models/Implementation';
-import Paginator from '../../../modules/paginator/components/Paginator';
 import usePaginatorService from '../../../modules/paginator/services/usePaginatorService';
 import useOpenModal from '../../../hooks/useOpenModal';
 import ModalDangerZone from '../../modals/ModalDangerZone';
@@ -18,13 +17,11 @@ import useTranslate from '../../../hooks/useTranslate';
 import useFilterNext from '../../../modules/filter_next/useFilterNext';
 import { NumberParam } from 'use-query-params';
 import { useParams } from 'react-router';
-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 TableRowActions from '../../elements/tables/TableRowActions';
 import ImplementationsRootBreadcrumbs from '../implementations/elements/ImplementationsRootBreadcrumbs';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
+import LoaderTableCard from '../../elements/loader-table-card/LoaderTableCard';
 
 export default function ImplementationSocialMediaLinks() {
     const { id } = useParams();
@@ -59,8 +56,6 @@ export default function ImplementationSocialMediaLinks() {
         },
     );
 
-    const { headElement, configsElement } = useConfigurableTable(implementationService.getSocialMediaColumns());
-
     const fetchImplementation = useCallback(() => {
         implementationService
             .read(activeOrganization.id, parseInt(id))
@@ -101,7 +96,7 @@ export default function ImplementationSocialMediaLinks() {
                     organization={activeOrganization}
                     implementation={implementation}
                     socialMedia={socialMedia}
-                    usedTypes={socialMedias.data.map((socialMedia) => socialMedia.type)}
+                    usedTypes={socialMedias?.data?.map((socialMedia) => socialMedia.type)}
                     onSubmit={() => fetchSocialMedias()}
                 />
             ));
@@ -171,7 +166,7 @@ export default function ImplementationSocialMediaLinks() {
             <div className="card">
                 <div className="card-header">
                     <div className="flex flex-grow card-title">
-                        <div className="card-title">{`${translate('implementation_edit.labels.cms_media_links')} (${socialMedias.meta.total})`}</div>
+                        <div className="card-title">{`${translate('implementation_edit.labels.cms_media_links')} (${socialMedias?.meta?.total})`}</div>
                     </div>
                     <div className="card-header-filters">
                         <div className="block block-inline-filters">
@@ -186,72 +181,45 @@ export default function ImplementationSocialMediaLinks() {
                     </div>
                 </div>
 
-                {socialMedias.data.length > 0 && (
-                    <div className="card-section card-section-primary">
-                        <div className="card-block card-block-table">
-                            {configsElement}
-
-                            <TableTopScroller>
-                                <table className="table">
-                                    {headElement}
-
-                                    <tbody>
-                                        {socialMedias.data.map((socialMedia) => (
-                                            <tr key={socialMedia.id}>
-                                                <td className="td-narrow">
-                                                    <div className={`td-icon text-dark mdi mdi-${socialMedia.type}`} />
-                                                </td>
-                                                <td>{socialMedia.type_locale}</td>
-                                                <td>{socialMedia.url}</td>
-                                                <td>{socialMedia.title || '-'}</td>
-
-                                                <td className={'table-td-actions text-right'}>
-                                                    <TableRowActions
-                                                        content={({ close }) => (
-                                                            <div className="dropdown dropdown-actions">
-                                                                <a
-                                                                    className="dropdown-item"
-                                                                    onClick={() => editSocialMedia(socialMedia)}>
-                                                                    <em className="mdi mdi-pen icon-start" />
-                                                                    Bewerken
-                                                                </a>
-
-                                                                <a
-                                                                    className="dropdown-item"
-                                                                    onClick={() => {
-                                                                        deleteSocialMedia(socialMedia);
-                                                                        close();
-                                                                    }}>
-                                                                    <em className="icon-start mdi mdi-delete" />
-                                                                    Verwijderen
-                                                                </a>
-                                                            </div>
-                                                        )}
-                                                    />
-                                                </td>
-                                            </tr>
-                                        ))}
-                                    </tbody>
-                                </table>
-                            </TableTopScroller>
-                        </div>
-                    </div>
-                )}
-
-                {socialMedias.meta.total == 0 && (
-                    <EmptyCard type={'card-section'} title={'Er zijn momenteel geen socialmediakanalen.'} />
-                )}
-
-                {socialMedias?.meta && (
-                    <div className="card-section">
-                        <Paginator
-                            meta={socialMedias.meta}
-                            filters={filterValues}
-                            updateFilters={filterUpdate}
-                            perPageKey={paginatorKey}
-                        />
-                    </div>
-                )}
+                <LoaderTableCard
+                    empty={socialMedias?.meta?.total == 0}
+                    emptyTitle={'Er zijn momenteel geen socialmediakanalen.'}
+                    columns={implementationService.getSocialMediaColumns()}
+                    paginator={{ key: paginatorKey, data: socialMedias, filterValues, filterUpdate }}>
+                    {socialMedias?.data?.map((socialMedia) => (
+                        <tr key={socialMedia.id}>
+                            <td className="td-narrow">
+                                <div className={`td-icon text-dark mdi mdi-${socialMedia.type}`} />
+                            </td>
+                            <td>{socialMedia.type_locale}</td>
+                            <td>{socialMedia.url}</td>
+                            <td>{socialMedia.title || '-'}</td>
+
+                            <td className={'table-td-actions text-right'}>
+                                <TableRowActions
+                                    content={({ close }) => (
+                                        <div className="dropdown dropdown-actions">
+                                            <a className="dropdown-item" onClick={() => editSocialMedia(socialMedia)}>
+                                                <em className="mdi mdi-pen icon-start" />
+                                                Bewerken
+                                            </a>
+
+                                            <a
+                                                className="dropdown-item"
+                                                onClick={() => {
+                                                    deleteSocialMedia(socialMedia);
+                                                    close();
+                                                }}>
+                                                <em className="icon-start mdi mdi-delete" />
+                                                Verwijderen
+                                            </a>
+                                        </div>
+                                    )}
+                                />
+                            </td>
+                        </tr>
+                    ))}
+                </LoaderTableCard>
             </div>
         </Fragment>
     );
diff --git a/react/src/dashboard/components/pages/implementations/Implementations.tsx b/react/src/dashboard/components/pages/implementations/Implementations.tsx
index bee942582..c7a6fbbda 100644
--- a/react/src/dashboard/components/pages/implementations/Implementations.tsx
+++ b/react/src/dashboard/components/pages/implementations/Implementations.tsx
@@ -10,7 +10,6 @@ import LoadingCard from '../../elements/loading-card/LoadingCard';
 import usePushApiError from '../../../hooks/usePushApiError';
 import { Permission } from '../../../props/models/Organization';
 import LoaderTableCard from '../../elements/loader-table-card/LoaderTableCard';
-import TableTopScroller from '../../elements/tables/TableTopScroller';
 import TableRowActions from '../../elements/tables/TableRowActions';
 import TableEntityMain from '../../elements/tables/elements/TableEntityMain';
 import TableEmptyValue from '../../elements/table-empty-value/TableEmptyValue';
@@ -19,6 +18,7 @@ import ImplementationsRootBreadcrumbs from './elements/ImplementationsRootBreadc
 import useFilterNext from '../../../modules/filter_next/useFilterNext';
 import { NumberParam, StringParam } from 'use-query-params';
 import useSetProgress from '../../../hooks/useSetProgress';
+import { ConfigurableTableColumn } from '../vouchers/hooks/useConfigurableTable';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
 
 export default function Implementations() {
@@ -31,6 +31,11 @@ export default function Implementations() {
 
     const [paginatorKey] = useState('implementations');
     const [implementations, setImplementations] = useState<PaginationData<Implementation>>(null);
+    const columns: Array<ConfigurableTableColumn> = [
+        { key: 'name', label: 'Webshop' },
+        { key: 'url', label: 'Website url' },
+        { key: 'actions', label: 'Acties' },
+    ];
 
     const [filterValues, filterValuesActive, filterUpdate] = useFilterNext<{
         q: string;
@@ -96,174 +101,143 @@ export default function Implementations() {
                     loading={!implementations}
                     empty={implementations?.meta?.total === 0}
                     emptyTitle={'Geen webshops'}
-                    emptyDescription={'Geen webshops gevonden.'}>
-                    <div className="card-section">
-                        <div className="card-block card-block-table">
-                            <TableTopScroller>
-                                <table className="table">
-                                    <thead>
-                                        <tr>
-                                            <th>Webshop</th>
-                                            <th>Website url</th>
-                                            <th className="table-th-actions text-right">Acties</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody>
-                                        {implementations.data.map((implementation: Implementation) => {
-                                            const organizationId =
-                                                implementation.organization_id || activeOrganization.id;
-                                            const implementationLogo: Media = {
-                                                identity_address: '',
-                                                original_name: '',
-                                                type: '',
-                                                ext: '',
-                                                uid: `implementation-logo-${implementation.id}`,
-                                                sizes: {
-                                                    thumbnail: implementation.logo || '',
-                                                },
-                                            };
-
-                                            return (
+                    emptyDescription={'Geen webshops gevonden.'}
+                    columns={columns}
+                    tableOptions={{ hasTooltips: false }}
+                    paginator={{ key: paginatorKey, data: implementations, filterValues, filterUpdate }}>
+                    {implementations?.data?.map((implementation: Implementation) => {
+                        const organizationId = implementation.organization_id || activeOrganization.id;
+
+                        const implementationLogo: Media = {
+                            identity_address: '',
+                            original_name: '',
+                            type: '',
+                            ext: '',
+                            uid: `implementation-logo-${implementation.id}`,
+                            sizes: {
+                                thumbnail: implementation.logo || '',
+                            },
+                        };
+
+                        return (
+                            <StateNavLink
+                                key={implementation.id}
+                                name={DashboardRoutes.IMPLEMENTATION}
+                                params={{ id: implementation.id, organizationId }}
+                                customElement={'tr'}
+                                className={'tr-clickable'}>
+                                <td>
+                                    <TableEntityMain
+                                        media={implementationLogo}
+                                        mediaPlaceholder="organization"
+                                        title={implementation.name}
+                                        subtitle={implementation.key}
+                                    />
+                                </td>
+                                <td>
+                                    {implementation.url_webshop ? (
+                                        <a
+                                            className="text-primary text-semibold text-underline"
+                                            href={implementation.url_webshop}
+                                            target="_blank"
+                                            rel="noreferrer"
+                                            onClick={(e) => e.stopPropagation()}>
+                                            {implementation.url_webshop}
+                                        </a>
+                                    ) : (
+                                        <TableEmptyValue />
+                                    )}
+                                </td>
+                                <td className="table-td-actions text-right">
+                                    <TableRowActions
+                                        content={(e) => (
+                                            <div className="dropdown dropdown-actions">
                                                 <StateNavLink
-                                                    key={implementation.id}
                                                     name={DashboardRoutes.IMPLEMENTATION}
-                                                    params={{ id: implementation.id, organizationId }}
-                                                    customElement={'tr'}
-                                                    className={'tr-clickable'}>
-                                                    <td>
-                                                        <TableEntityMain
-                                                            media={implementationLogo}
-                                                            mediaPlaceholder="organization"
-                                                            title={implementation.name}
-                                                            subtitle={implementation.key}
-                                                        />
-                                                    </td>
-                                                    <td>
-                                                        {implementation.url_webshop ? (
-                                                            <a
-                                                                className="text-primary text-semibold text-underline"
-                                                                href={implementation.url_webshop}
-                                                                target="_blank"
-                                                                rel="noreferrer"
-                                                                onClick={(e) => e.stopPropagation()}>
-                                                                {implementation.url_webshop}
-                                                            </a>
-                                                        ) : (
-                                                            <TableEmptyValue />
-                                                        )}
-                                                    </td>
-                                                    <td className="table-td-actions text-right">
-                                                        <TableRowActions
-                                                            content={(e) => (
-                                                                <div className="dropdown dropdown-actions">
-                                                                    <StateNavLink
-                                                                        name={DashboardRoutes.IMPLEMENTATION}
-                                                                        params={{
-                                                                            id: implementation.id,
-                                                                            organizationId,
-                                                                        }}
-                                                                        className="dropdown-item"
-                                                                        onClick={e.close}>
-                                                                        <em className="mdi mdi-eye icon-start" />{' '}
-                                                                        Bekijken
-                                                                    </StateNavLink>
-
-                                                                    {activeOrganization.allow_translations &&
-                                                                        hasPermission(
-                                                                            activeOrganization,
-                                                                            Permission.MANAGE_IMPLEMENTATION,
-                                                                        ) && (
-                                                                            <StateNavLink
-                                                                                name={
-                                                                                    DashboardRoutes.IMPLEMENTATION_TRANSLATIONS
-                                                                                }
-                                                                                params={{
-                                                                                    id: implementation.id,
-                                                                                    organizationId:
-                                                                                        implementation.organization_id,
-                                                                                }}
-                                                                                className="dropdown-item"
-                                                                                onClick={e.close}>
-                                                                                <em className="mdi mdi-translate-variant icon-start" />
-                                                                                Vertalingen beheren
-                                                                            </StateNavLink>
-                                                                        )}
-
-                                                                    {hasPermission(
-                                                                        activeOrganization,
-                                                                        Permission.MANAGE_IMPLEMENTATION,
-                                                                    ) && (
-                                                                        <StateNavLink
-                                                                            name={
-                                                                                DashboardRoutes.IMPLEMENTATION_COOKIES
-                                                                            }
-                                                                            params={{
-                                                                                id: implementation.id,
-                                                                                organizationId:
-                                                                                    implementation.organization_id,
-                                                                            }}
-                                                                            className="dropdown-item"
-                                                                            onClick={e.close}>
-                                                                            <em className="mdi mdi-cookie icon-start" />
-                                                                            Cookiemelding beheren
-                                                                        </StateNavLink>
-                                                                    )}
-
-                                                                    {hasPermission(
-                                                                        activeOrganization,
-                                                                        Permission.MANAGE_IMPLEMENTATION,
-                                                                    ) && (
-                                                                        <StateNavLink
-                                                                            name={DashboardRoutes.IMPLEMENTATION_EMAIL}
-                                                                            params={{
-                                                                                id: implementation.id,
-                                                                                organizationId: activeOrganization.id,
-                                                                            }}
-                                                                            className="dropdown-item"
-                                                                            onClick={e.close}>
-                                                                            <em className="mdi mdi-email-outline icon-start" />
-                                                                            E-mailinstellingen
-                                                                        </StateNavLink>
-                                                                    )}
-
-                                                                    {hasPermission(
-                                                                        activeOrganization,
-                                                                        Permission.MANAGE_IMPLEMENTATION,
-                                                                    ) && (
-                                                                        <StateNavLink
-                                                                            name={DashboardRoutes.IMPLEMENTATION_DIGID}
-                                                                            params={{
-                                                                                id: implementation.id,
-                                                                                organizationId: activeOrganization.id,
-                                                                            }}
-                                                                            className="dropdown-item"
-                                                                            onClick={e.close}>
-                                                                            <em className="mdi mdi-shield-key-outline icon-start" />
-                                                                            DigiD-instellingen
-                                                                        </StateNavLink>
-                                                                    )}
-                                                                </div>
-                                                            )}
-                                                        />
-                                                    </td>
+                                                    params={{
+                                                        id: implementation.id,
+                                                        organizationId,
+                                                    }}
+                                                    className="dropdown-item"
+                                                    onClick={e.close}>
+                                                    <em className="mdi mdi-eye icon-start" /> Bekijken
                                                 </StateNavLink>
-                                            );
-                                        })}
-                                    </tbody>
-                                </table>
-                            </TableTopScroller>
-                        </div>
-                    </div>
 
-                    {implementations?.meta?.total > 0 && (
-                        <div className="card-section">
-                            <div className="table-pagination">
-                                <div className="table-pagination-counter">
-                                    {implementations?.meta?.total || 0} resultaten
-                                </div>
-                            </div>
-                        </div>
-                    )}
+                                                {activeOrganization.allow_translations &&
+                                                    hasPermission(
+                                                        activeOrganization,
+                                                        Permission.MANAGE_IMPLEMENTATION,
+                                                    ) && (
+                                                        <StateNavLink
+                                                            name={DashboardRoutes.IMPLEMENTATION_TRANSLATIONS}
+                                                            params={{
+                                                                id: implementation.id,
+                                                                organizationId: implementation.organization_id,
+                                                            }}
+                                                            className="dropdown-item"
+                                                            onClick={e.close}>
+                                                            <em className="mdi mdi-translate-variant icon-start" />
+                                                            Vertalingen beheren
+                                                        </StateNavLink>
+                                                    )}
+
+                                                {hasPermission(
+                                                    activeOrganization,
+                                                    Permission.MANAGE_IMPLEMENTATION,
+                                                ) && (
+                                                    <StateNavLink
+                                                        name={DashboardRoutes.IMPLEMENTATION_COOKIES}
+                                                        params={{
+                                                            id: implementation.id,
+                                                            organizationId: implementation.organization_id,
+                                                        }}
+                                                        className="dropdown-item"
+                                                        onClick={e.close}>
+                                                        <em className="mdi mdi-cookie icon-start" />
+                                                        Cookiemelding beheren
+                                                    </StateNavLink>
+                                                )}
+
+                                                {hasPermission(
+                                                    activeOrganization,
+                                                    Permission.MANAGE_IMPLEMENTATION,
+                                                ) && (
+                                                    <StateNavLink
+                                                        name={DashboardRoutes.IMPLEMENTATION_EMAIL}
+                                                        params={{
+                                                            id: implementation.id,
+                                                            organizationId: activeOrganization.id,
+                                                        }}
+                                                        className="dropdown-item"
+                                                        onClick={e.close}>
+                                                        <em className="mdi mdi-email-outline icon-start" />
+                                                        E-mailinstellingen
+                                                    </StateNavLink>
+                                                )}
+
+                                                {hasPermission(
+                                                    activeOrganization,
+                                                    Permission.MANAGE_IMPLEMENTATION,
+                                                ) && (
+                                                    <StateNavLink
+                                                        name={DashboardRoutes.IMPLEMENTATION_DIGID}
+                                                        params={{
+                                                            id: implementation.id,
+                                                            organizationId: activeOrganization.id,
+                                                        }}
+                                                        className="dropdown-item"
+                                                        onClick={e.close}>
+                                                        <em className="mdi mdi-shield-key-outline icon-start" />
+                                                        DigiD-instellingen
+                                                    </StateNavLink>
+                                                )}
+                                            </div>
+                                        )}
+                                    />
+                                </td>
+                            </StateNavLink>
+                        );
+                    })}
                 </LoaderTableCard>
             </div>
         </Fragment>
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 bd14ca451..d7be9ed14 100644
--- a/react/src/dashboard/components/pages/offices-edit/elements/OfficesForm.tsx
+++ b/react/src/dashboard/components/pages/offices-edit/elements/OfficesForm.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import PhotoSelector from '../../../elements/photo-selector/PhotoSelector';
 import useFormBuilder from '../../../../hooks/useFormBuilder';
 import FormError from '../../../elements/forms/errors/FormError';
@@ -197,9 +198,13 @@ export default function OfficesForm({ organization, id }: { organization: Organi
 
                                     <div className="form-group-info-button">
                                         <div
-                                            className={`button button-default button-icon pull-left ${
-                                                showBranchNumberTooltip ? 'active' : ''
-                                            }`}
+                                            className={classNames(
+                                                'button',
+                                                'button-default',
+                                                'button-icon',
+                                                'pull-left',
+                                                showBranchNumberTooltip && 'active',
+                                            )}
                                             onClick={() => setShowBranchNumberTooltip(!showBranchNumberTooltip)}>
                                             <em className="mdi mdi-information" />
                                         </div>
@@ -234,9 +239,13 @@ export default function OfficesForm({ organization, id }: { organization: Organi
 
                                     <div className="form-group-info-button">
                                         <div
-                                            className={`button button-default button-icon pull-left ${
-                                                showBranchNameTooltip ? 'active' : ''
-                                            }`}
+                                            className={classNames(
+                                                'button',
+                                                'button-default',
+                                                'button-icon',
+                                                'pull-left',
+                                                showBranchNameTooltip && 'active',
+                                            )}
                                             onClick={() => setShowBranchNameTooltip(!showBranchNameTooltip)}>
                                             <em className="mdi mdi-information" />
                                         </div>
@@ -271,9 +280,13 @@ export default function OfficesForm({ organization, id }: { organization: Organi
 
                                     <div className="form-group-info-button">
                                         <div
-                                            className={`button button-default button-icon pull-left ${
-                                                showBranchIdTooltip ? 'active' : ''
-                                            }`}
+                                            className={classNames(
+                                                'button',
+                                                'button-default',
+                                                'button-icon',
+                                                'pull-left',
+                                                showBranchIdTooltip && 'active',
+                                            )}
                                             onClick={() => setShowBranchIdTooltip(!showBranchIdTooltip)}>
                                             <em className="mdi mdi-information" />
                                         </div>
diff --git a/react/src/dashboard/components/pages/offices-edit/elements/ScheduleControl.tsx b/react/src/dashboard/components/pages/offices-edit/elements/ScheduleControl.tsx
index 5cd64cea8..cf0b7a4d2 100644
--- a/react/src/dashboard/components/pages/offices-edit/elements/ScheduleControl.tsx
+++ b/react/src/dashboard/components/pages/offices-edit/elements/ScheduleControl.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import useOfficeService from '../../../../services/OfficeService';
 import FormError from '../../../elements/forms/errors/FormError';
 import UIControlCheckbox from '../../../elements/forms/ui-controls/UIControlCheckbox';
@@ -285,7 +286,7 @@ export default function ScheduleControl({
                     {weekDaysKeys.map((weekDayNumber) => (
                         <tbody key={weekDayNumber}>
                             <tr>
-                                <td className={`schedule-day-name ${weekDayNumber >= 5 ? 'weekend' : ''}`}>
+                                <td className={classNames('schedule-day-name', weekDayNumber >= 5 && 'weekend')}>
                                     {weekDays[weekDayNumber]}
                                 </td>
                                 <td className="schedule-day-available">
@@ -415,7 +416,7 @@ export default function ScheduleControl({
                     <div className="block-schedule-day" key={weekDayNumber}>
                         <div className="block-schedule-day-name">
                             <div className="flex-row">
-                                <div className={`flex-col ${weekDayNumber >= 5 ? 'text-danger' : ''}`}>
+                                <div className={classNames('flex-col', weekDayNumber >= 5 && 'text-danger')}>
                                     {weekDays[weekDayNumber]}
                                 </div>
                                 {scheduleData[weekDayNumber].is_closed && (
diff --git a/react/src/dashboard/components/pages/offices/Offices.tsx b/react/src/dashboard/components/pages/offices/Offices.tsx
index eeb2826ed..4f7ec844c 100644
--- a/react/src/dashboard/components/pages/offices/Offices.tsx
+++ b/react/src/dashboard/components/pages/offices/Offices.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
 import { NavLink, useNavigate } from 'react-router';
@@ -175,16 +176,21 @@ export default function Offices() {
                     <div className="card-block card-block-keyvalue card-block-keyvalue-horizontal row">
                         <div className="keyvalue-item col-xs-12 col-sm-6 col-lg-4">
                             <div className="keyvalue-key">{translate('offices.labels.business_type')}</div>
-                            <div className={`keyvalue-value ${!organization.business_type?.name ? 'text-muted' : ''}`}>
+                            <div
+                                className={classNames(
+                                    'keyvalue-value',
+                                    !organization.business_type?.name && 'text-muted',
+                                )}>
                                 {organization.business_type?.name || 'Geen data'}
                             </div>
                         </div>
                         <div className="keyvalue-item col-xs-12 col-sm-6 col-lg-4">
                             <div className="keyvalue-key">{translate('offices.labels.mail')}</div>
                             <div
-                                className={`keyvalue-value ${
-                                    !organization.email ? 'text-muted' : 'text-primary-light'
-                                }`}>
+                                className={classNames(
+                                    'keyvalue-value',
+                                    !organization.email ? 'text-muted' : 'text-primary-light',
+                                )}>
                                 {organization.email || 'Geen data'}
                             </div>
                         </div>
@@ -194,19 +200,19 @@ export default function Offices() {
                     <div className="card-block card-block-keyvalue card-block-keyvalue-horizontal row">
                         <div className="keyvalue-item col-xs-12 col-sm-6 col-lg-4">
                             <div className="keyvalue-key">KVK</div>
-                            <div className={`keyvalue-value ${!organization.kvk ? 'text-muted' : ''}`}>
+                            <div className={classNames('keyvalue-value', !organization.kvk && 'text-muted')}>
                                 {organization.kvk || 'Geen data'}
                             </div>
                         </div>
                         <div className="keyvalue-item col-xs-12 col-sm-6 col-lg-4">
                             <div className="keyvalue-key">BTW</div>
-                            <div className={`keyvalue-value ${!organization.btw ? 'text-muted' : ''}`}>
+                            <div className={classNames('keyvalue-value', !organization.btw && 'text-muted')}>
                                 {organization.btw || 'Geen data'}
                             </div>
                         </div>
                         <div className="keyvalue-item col-xs-12 col-sm-6 col-lg-4">
                             <div className="keyvalue-key">IBAN</div>
-                            <div className={`keyvalue-value ${!organization.iban ? 'text-muted' : ''}`}>
+                            <div className={classNames('keyvalue-value', !organization.iban && 'text-muted')}>
                                 {organization.iban || 'Geen data'}
                             </div>
                         </div>
@@ -381,7 +387,8 @@ export default function Offices() {
                     description={'Je hebt momenteel geen vestigingen.'}
                     button={{
                         text: 'Vestiging toevoegen',
-                        to: getStateRouteUrl(DashboardRoutes.OFFICE_CREATE, { organizationId: organization.id }),
+                        state: DashboardRoutes.OFFICE_CREATE,
+                        stateParams: { organizationId: organization.id },
                     }}
                 />
             )}
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 b2886e44e..44e640aa2 100644
--- a/react/src/dashboard/components/pages/organizations-funds-edit/OrganizationsFundsEdit.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-edit/OrganizationsFundsEdit.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import classNames from 'classnames';
 import { useFundService } from '../../../services/FundService';
 import useSetProgress from '../../../hooks/useSetProgress';
 import Fund from '../../../props/models/Fund';
@@ -656,9 +657,13 @@ export default function OrganizationsFundsEdit() {
                                         </div>
                                         <div className="form-group-info-button">
                                             <div
-                                                className={`button button-default button-icon pull-left ${
-                                                    showInfoBlock ? 'active' : ''
-                                                }`}
+                                                className={classNames(
+                                                    'button',
+                                                    'button-default',
+                                                    'button-icon',
+                                                    'pull-left',
+                                                    showInfoBlock && 'active',
+                                                )}
                                                 onClick={() => setShowInfoBlock(!showInfoBlock)}>
                                                 <em className="mdi mdi-information" />
                                             </div>
diff --git a/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-details-card/OrganizationsFundsShowFormulasCard.tsx b/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-details-card/OrganizationsFundsShowFormulasCard.tsx
index 672341c40..75569cfff 100644
--- a/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-details-card/OrganizationsFundsShowFormulasCard.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-details-card/OrganizationsFundsShowFormulasCard.tsx
@@ -1,52 +1,35 @@
 import React from 'react';
 import Fund from '../../../../../props/models/Fund';
-import EmptyCard from '../../../../elements/empty-card/EmptyCard';
 import TableDateTime from '../../../../elements/tables/elements/TableDateTime';
-import TableTopScroller from '../../../../elements/tables/TableTopScroller';
-import useConfigurableTable from '../../../vouchers/hooks/useConfigurableTable';
 import { useFundService } from '../../../../../services/FundService';
 import TableEmptyValue from '../../../../elements/table-empty-value/TableEmptyValue';
+import LoaderTableCard from '../../../../elements/loader-table-card/LoaderTableCard';
 
 export default function OrganizationsFundsShowFormulasCard({ fund }: { fund: Fund }) {
     const fundService = useFundService();
 
-    const { headElement, configsElement } = useConfigurableTable(fundService.getFormulasColumns());
-
     return (
-        <div className="card-section">
-            <div className="card-block card-block-table">
-                {configsElement}
-
-                <TableTopScroller>
-                    {fund.formulas?.length > 0 ? (
-                        <table className="table">
-                            {headElement}
-
-                            <tbody>
-                                {fund.formulas.map((formula) => (
-                                    <tr key={formula.id}>
-                                        <td>{formula.id}</td>
-                                        <td>{formula.type}</td>
-                                        <td>{formula.amount_locale}</td>
-                                        <td>{formula.record_type_name || '-'}</td>
-                                        <td>
-                                            <TableDateTime value={formula.created_at_locale} />
-                                        </td>
-                                        <td>
-                                            <TableDateTime value={formula.updated_at_locale} />
-                                        </td>
-                                        <td className={'table-td-actions text-right'}>
-                                            <TableEmptyValue />
-                                        </td>
-                                    </tr>
-                                ))}
-                            </tbody>
-                        </table>
-                    ) : (
-                        <EmptyCard title={'No fund formulas'} />
-                    )}
-                </TableTopScroller>
-            </div>
-        </div>
+        <LoaderTableCard
+            empty={fund.formulas?.length == 0}
+            emptyTitle={'No fund formulas'}
+            columns={fundService.getFormulasColumns()}>
+            {fund.formulas?.map((formula) => (
+                <tr key={formula.id}>
+                    <td>{formula.id}</td>
+                    <td>{formula.type}</td>
+                    <td>{formula.amount_locale}</td>
+                    <td>{formula.record_type_name || '-'}</td>
+                    <td>
+                        <TableDateTime value={formula.created_at_locale} />
+                    </td>
+                    <td>
+                        <TableDateTime value={formula.updated_at_locale} />
+                    </td>
+                    <td className={'table-td-actions text-right'}>
+                        <TableEmptyValue />
+                    </td>
+                </tr>
+            ))}
+        </LoaderTableCard>
     );
 }
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 046af6665..ca8a14fb0 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
@@ -1,4 +1,5 @@
 import React, { Fragment, useCallback, useMemo } from 'react';
+import classNames from 'classnames';
 import Fund from '../../../../../props/models/Fund';
 import EmptyCard from '../../../../elements/empty-card/EmptyCard';
 import { useNavigateState } from '../../../../../modules/state_router/Router';
@@ -79,9 +80,12 @@ export default function OrganizationsFundsShowStatisticsCard({
                         </a>
 
                         <div
-                            className={`keyvalue-item col col-lg-3 ${
-                                !canInviteProviders ? 'keyvalue-item-disabled' : ''
-                            }`}
+                            className={classNames(
+                                'keyvalue-item',
+                                'col',
+                                'col-lg-3',
+                                !canInviteProviders && 'keyvalue-item-disabled',
+                            )}
                             onClick={() => inviteProvider(fund)}>
                             <div className="keyvalue-key">{translate('fund_card_sponsor.labels.providers')}</div>
                             <div className="keyvalue-value">
@@ -91,7 +95,12 @@ export default function OrganizationsFundsShowStatisticsCard({
                         </div>
 
                         <a
-                            className={`keyvalue-item col col-lg-3 ${!canAccessFund ? 'keyvalue-item-disabled' : ''}`}
+                            className={classNames(
+                                'keyvalue-item',
+                                'col',
+                                'col-lg-3',
+                                !canAccessFund && 'keyvalue-item-disabled',
+                            )}
                             onClick={() => {
                                 navigateState(DashboardRoutes.CSV_VALIDATION, { organizationId: fund.organization_id });
                             }}>
diff --git a/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-details-card/tables/FundPhysicalCardTypesTable.tsx b/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-details-card/tables/FundPhysicalCardTypesTable.tsx
index 63d3a57d5..96b8a9271 100644
--- a/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-details-card/tables/FundPhysicalCardTypesTable.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-details-card/tables/FundPhysicalCardTypesTable.tsx
@@ -1,11 +1,8 @@
 import { PaginationData } from '../../../../../../props/ApiResponses';
-import TableTopScroller from '../../../../../elements/tables/TableTopScroller';
 import StateNavLink from '../../../../../../modules/state_router/StateNavLink';
 import TableRowActions from '../../../../../elements/tables/TableRowActions';
-import Paginator from '../../../../../../modules/paginator/components/Paginator';
 import LoaderTableCard from '../../../../../elements/loader-table-card/LoaderTableCard';
 import React, { useCallback, useEffect, useState } from 'react';
-import useConfigurableTable from '../../../../vouchers/hooks/useConfigurableTable';
 import usePaginatorService from '../../../../../../modules/paginator/services/usePaginatorService';
 import Organization from '../../../../../../props/models/Organization';
 import useTranslate from '../../../../../../hooks/useTranslate';
@@ -33,17 +30,12 @@ export default function FundPhysicalCardTypesTable({ fund, organization }: { fun
     const paginatorService = usePaginatorService();
     const fundPhysicalCardTypeService = useFundPhysicalCardTypeService();
 
-    const [, filterActiveValues, filterUpdate, filter] = useFilterNext<{
+    const [filterValues, filterActiveValues, filterUpdate, filter] = useFilterNext<{
         q: string;
         fund_id?: number;
         per_page?: number;
     }>({ q: '', fund_id: fund?.id, per_page: paginatorService.getPerPage(paginatorKey) });
 
-    const { headElement, configsElement } = useConfigurableTable(fundPhysicalCardTypeService.getColumns(), {
-        sortable: true,
-        filter: filter,
-    });
-
     const fetchPhysicalCardTypes = useCallback(() => {
         setProgress(0);
 
@@ -73,7 +65,7 @@ export default function FundPhysicalCardTypesTable({ fund, organization }: { fun
                                     organization,
                                     fund,
                                     null,
-                                    fundPhysicalCardTypes.data.map((type) => type.physical_card_type_id),
+                                    fundPhysicalCardTypes?.data?.map((type) => type.physical_card_type_id),
                                     fetchPhysicalCardTypes,
                                 )
                             }
@@ -101,117 +93,83 @@ export default function FundPhysicalCardTypesTable({ fund, organization }: { fun
                 loading={!fundPhysicalCardTypes?.meta}
                 empty={fundPhysicalCardTypes?.meta?.total === 0}
                 emptyTitle={'Geen fysieke passen'}
-                emptyDescription={'Er zijn momenteel geen fysieke passen.'}>
-                <div className="card-section">
-                    <div className="card-block card-block-table">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {fundPhysicalCardTypes?.data.map((cardType) => (
-                                        <StateNavLink
-                                            key={cardType.id}
-                                            name={DashboardRoutes.PHYSICAL_CARD_TYPE}
-                                            params={{
-                                                id: cardType.physical_card_type_id,
-                                                organizationId: organization.id,
-                                            }}
-                                            customElement={'tr'}
-                                            className={'tr-clickable'}>
-                                            <td title={cardType.physical_card_type.name}>
-                                                <TableEntityMain
-                                                    title={strLimit(cardType.physical_card_type.name, 64)}
-                                                    subtitle={strLimit(
-                                                        cardType.physical_card_type.description || 'Geen omschrijving',
-                                                        64,
-                                                    )}
-                                                    media={cardType.physical_card_type.photo}
-                                                    mediaRound={false}
-                                                    mediaSize={'md'}
-                                                    mediaPlaceholder={'physical_card_type'}
-                                                />
-                                            </td>
-                                            <td>{cardType?.allow_physical_card_linking ? 'Ja' : 'Nee'}</td>
-                                            <td>{cardType?.allow_physical_card_deactivation ? 'Ja' : 'Nee'}</td>
-                                            <td>{cardType?.allow_physical_card_requests ? 'Ja' : 'Nee'}</td>
-                                            <td className={'table-td-actions text-right'}>
-                                                {filter.values.source != 'archive' ? (
-                                                    <TableRowActions
-                                                        content={(e) => (
-                                                            <div className="dropdown dropdown-actions">
-                                                                <StateNavLink
-                                                                    name={DashboardRoutes.PHYSICAL_CARD_TYPE}
-                                                                    params={{
-                                                                        id: cardType.physical_card_type_id,
-                                                                        organizationId: organization.id,
-                                                                    }}
-                                                                    className="dropdown-item">
-                                                                    <div className="mdi mdi-eye-outline icon-start" />
-                                                                    Bekijk
-                                                                </StateNavLink>
-
-                                                                <div
-                                                                    onClick={() => {
-                                                                        e?.close();
-                                                                        storeFundPhysicalCardType(
-                                                                            organization,
-                                                                            fund,
-                                                                            cardType,
-                                                                            null,
-                                                                            fetchPhysicalCardTypes,
-                                                                        );
-                                                                    }}
-                                                                    className="dropdown-item">
-                                                                    <div className="mdi mdi-pencil-outline icon-start" />
-                                                                    Bewerking
-                                                                </div>
-
-                                                                <div
-                                                                    className={classNames(
-                                                                        'dropdown-item',
-                                                                        cardType?.in_use && 'disabled',
-                                                                    )}
-                                                                    onClick={() => {
-                                                                        e?.close();
-                                                                        deleteFundPhysicalCardType(
-                                                                            fund,
-                                                                            cardType,
-                                                                            fetchPhysicalCardTypes,
-                                                                        );
-                                                                    }}>
-                                                                    <em className="mdi mdi-close icon-start icon-start" />
-                                                                    Verwijderen
-                                                                </div>
-                                                            </div>
-                                                        )}
-                                                    />
-                                                ) : (
-                                                    <span className={'text-muted'}>
-                                                        {translate('organization_employees.labels.owner')}
-                                                    </span>
-                                                )}
-                                            </td>
-                                        </StateNavLink>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
-
-                {fundPhysicalCardTypes?.meta.total > 0 && (
-                    <div className="card-section">
-                        <Paginator
-                            meta={fundPhysicalCardTypes.meta}
-                            filters={filter.values}
-                            updateFilters={filter.update}
-                            perPageKey={paginatorKey}
-                        />
-                    </div>
-                )}
+                emptyDescription={'Er zijn momenteel geen fysieke passen.'}
+                columns={fundPhysicalCardTypeService.getColumns()}
+                tableOptions={{ sortable: true, filter }}
+                paginator={{ key: paginatorKey, data: fundPhysicalCardTypes, filterValues, filterUpdate }}>
+                {fundPhysicalCardTypes?.data?.map((cardType) => (
+                    <StateNavLink
+                        key={cardType.id}
+                        name={DashboardRoutes.PHYSICAL_CARD_TYPE}
+                        params={{
+                            id: cardType.physical_card_type_id,
+                            organizationId: organization.id,
+                        }}
+                        customElement={'tr'}
+                        className={'tr-clickable'}>
+                        <td title={cardType.physical_card_type.name}>
+                            <TableEntityMain
+                                title={strLimit(cardType.physical_card_type.name, 64)}
+                                subtitle={strLimit(cardType.physical_card_type.description || 'Geen omschrijving', 64)}
+                                media={cardType.physical_card_type.photo}
+                                mediaRound={false}
+                                mediaSize={'md'}
+                                mediaPlaceholder={'physical_card_type'}
+                            />
+                        </td>
+                        <td>{cardType?.allow_physical_card_linking ? 'Ja' : 'Nee'}</td>
+                        <td>{cardType?.allow_physical_card_deactivation ? 'Ja' : 'Nee'}</td>
+                        <td>{cardType?.allow_physical_card_requests ? 'Ja' : 'Nee'}</td>
+                        <td className={'table-td-actions text-right'}>
+                            {filter.values.source != 'archive' ? (
+                                <TableRowActions
+                                    content={(e) => (
+                                        <div className="dropdown dropdown-actions">
+                                            <StateNavLink
+                                                name={DashboardRoutes.PHYSICAL_CARD_TYPE}
+                                                params={{
+                                                    id: cardType.physical_card_type_id,
+                                                    organizationId: organization.id,
+                                                }}
+                                                className="dropdown-item">
+                                                <div className="mdi mdi-eye-outline icon-start" />
+                                                Bekijk
+                                            </StateNavLink>
+
+                                            <div
+                                                onClick={() => {
+                                                    e?.close();
+                                                    storeFundPhysicalCardType(
+                                                        organization,
+                                                        fund,
+                                                        cardType,
+                                                        null,
+                                                        fetchPhysicalCardTypes,
+                                                    );
+                                                }}
+                                                className="dropdown-item">
+                                                <div className="mdi mdi-pencil-outline icon-start" />
+                                                Bewerking
+                                            </div>
+
+                                            <div
+                                                className={classNames('dropdown-item', cardType?.in_use && 'disabled')}
+                                                onClick={() => {
+                                                    e?.close();
+                                                    deleteFundPhysicalCardType(fund, cardType, fetchPhysicalCardTypes);
+                                                }}>
+                                                <em className="mdi mdi-close icon-start icon-start" />
+                                                Verwijderen
+                                            </div>
+                                        </div>
+                                    )}
+                                />
+                            ) : (
+                                <span className={'text-muted'}>{translate('organization_employees.labels.owner')}</span>
+                            )}
+                        </td>
+                    </StateNavLink>
+                ))}
             </LoaderTableCard>
         </div>
     );
diff --git a/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowIdentitiesCard.tsx b/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowIdentitiesCard.tsx
index 43ea94f8f..16a40a6f4 100644
--- a/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowIdentitiesCard.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowIdentitiesCard.tsx
@@ -1,8 +1,6 @@
-import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import Fund from '../../../../../props/models/Fund';
 import FilterItemToggle from '../../../../elements/tables/elements/FilterItemToggle';
-import EmptyCard from '../../../../elements/empty-card/EmptyCard';
-import Paginator from '../../../../../modules/paginator/components/Paginator';
 import useTranslate from '../../../../../hooks/useTranslate';
 import useActiveOrganization from '../../../../../hooks/useActiveOrganization';
 import usePaginatorService from '../../../../../modules/paginator/services/usePaginatorService';
@@ -15,13 +13,12 @@ import { useFundService } from '../../../../../services/FundService';
 import useFundIdentitiesExporter from '../../../../../services/exporters/useFundIdentitiesExporter';
 import { hasPermission } from '../../../../../helpers/utils';
 import { Permission } from '../../../../../props/models/Organization';
-import useConfigurableTable from '../../../vouchers/hooks/useConfigurableTable';
-import TableTopScroller from '../../../../elements/tables/TableTopScroller';
 import TableRowActions from '../../../../elements/tables/TableRowActions';
 import { DashboardRoutes } from '../../../../../modules/state_router/RouterBuilder';
 import useFilterNext from '../../../../../modules/filter_next/useFilterNext';
 import CardHeaderFilter from '../../../../elements/tables/elements/CardHeaderFilter';
 import BlockLabelTabs from '../../../../elements/block-label-tabs/BlockLabelTabs';
+import LoaderTableCard from '../../../../elements/loader-table-card/LoaderTableCard';
 
 export default function OrganizationsFundsShowIdentitiesCard({
     fund,
@@ -55,11 +52,6 @@ export default function OrganizationsFundsShowIdentitiesCard({
         per_page: paginatorService.getPerPage(paginationPerPageKey),
     });
 
-    const { headElement, configsElement } = useConfigurableTable(fundService.getIdentitiesColumns(), {
-        filter,
-        sortable: true,
-    });
-
     const fetchIdentities = useCallback(() => {
         setProgress(0);
 
@@ -158,7 +150,7 @@ export default function OrganizationsFundsShowIdentitiesCard({
                                         <em className="mdi mdi-download icon-start" />
                                         <span>
                                             {translate('components.dropdown.export', {
-                                                total: identities.meta.total,
+                                                total: identities?.meta?.total,
                                             })}
                                         </span>
                                     </button>
@@ -169,81 +161,49 @@ export default function OrganizationsFundsShowIdentitiesCard({
                 </div>
             </div>
 
-            {identities ? (
-                <Fragment>
-                    {identities?.meta?.total > 0 ? (
-                        <div className="card-section card-section-padless">
-                            {configsElement}
-
-                            <TableTopScroller>
-                                <table className="table">
-                                    {headElement}
-
-                                    <tbody>
-                                        {identities.data.map((identity: SponsorIdentity, index: number) => (
-                                            <tr key={index} data-dusk={`tableIdentityRow${identity.id}`}>
-                                                <td>{identity.id}</td>
-                                                <td>{identity.email}</td>
-                                                <td>{identity.count_vouchers}</td>
-                                                <td>{identity.count_vouchers_active}</td>
-                                                <td>{identity.count_vouchers_active_with_balance}</td>
-
-                                                <td className={'table-td-actions text-right'}>
-                                                    <TableRowActions
-                                                        disabled={
-                                                            !hasPermission(
-                                                                activeOrganization,
-                                                                [
-                                                                    Permission.VIEW_IDENTITIES,
-                                                                    Permission.MANAGE_IDENTITIES,
-                                                                ],
-                                                                false,
-                                                            )
-                                                        }
-                                                        content={() => (
-                                                            <div className="dropdown dropdown-actions">
-                                                                <StateNavLink
-                                                                    className="dropdown-item"
-                                                                    name={DashboardRoutes.IDENTITY}
-                                                                    params={{
-                                                                        organizationId: fund.organization_id,
-                                                                        id: identity.id,
-                                                                    }}>
-                                                                    <em className="icon-start mdi mdi-eye-outline" />
-                                                                    Bekijken
-                                                                </StateNavLink>
-                                                            </div>
-                                                        )}
-                                                    />
-                                                </td>
-                                            </tr>
-                                        ))}
-                                    </tbody>
-                                </table>
-                            </TableTopScroller>
-                        </div>
-                    ) : (
-                        <EmptyCard
-                            title={'Geen gebruikers gevonden'}
-                            type={'card-section'}
-                            description={
-                                lastQueryIdentities ? `Geen gebruikers gevonden voor "${lastQueryIdentities}"` : null
-                            }
-                        />
-                    )}
-
-                    <div className="card-section card-section-narrow" hidden={identities.meta.total < 1}>
-                        <Paginator
-                            meta={identities.meta}
-                            filters={filterValues}
-                            updateFilters={filterUpdate}
-                            perPageKey={paginationPerPageKey}
-                        />
-                    </div>
-                </Fragment>
-            ) : (
-                <LoadingCard type={'card-section'} />
-            )}
+            <LoaderTableCard
+                empty={identities?.meta?.total == 0}
+                emptyTitle={'Geen gebruikers gevonden'}
+                emptyDescription={lastQueryIdentities ? `Geen gebruikers gevonden voor "${lastQueryIdentities}"` : null}
+                columns={fundService.getIdentitiesColumns()}
+                tableOptions={{ filter, sortable: true }}
+                paginator={{ key: paginationPerPageKey, data: identities, filterValues, filterUpdate }}>
+                {identities?.data?.map((identity: SponsorIdentity, index: number) => (
+                    <tr key={index} data-dusk={`tableIdentityRow${identity.id}`}>
+                        <td>{identity.id}</td>
+                        <td>{identity.email}</td>
+                        <td>{identity.count_vouchers}</td>
+                        <td>{identity.count_vouchers_active}</td>
+                        <td>{identity.count_vouchers_active_with_balance}</td>
+
+                        <td className={'table-td-actions text-right'}>
+                            <TableRowActions
+                                disabled={
+                                    !hasPermission(
+                                        activeOrganization,
+                                        [Permission.VIEW_IDENTITIES, Permission.MANAGE_IDENTITIES],
+                                        false,
+                                    )
+                                }
+                                content={() => (
+                                    <div className="dropdown dropdown-actions">
+                                        <StateNavLink
+                                            className="dropdown-item"
+                                            name={DashboardRoutes.IDENTITY}
+                                            params={{
+                                                organizationId: fund.organization_id,
+                                                id: identity.id,
+                                            }}>
+                                            <em className="icon-start mdi mdi-eye-outline" />
+                                            Bekijken
+                                        </StateNavLink>
+                                    </div>
+                                )}
+                            />
+                        </td>
+                    </tr>
+                ))}
+            </LoaderTableCard>
 
             {identities?.meta?.total > 0 && (
                 <div className="card-section card-section-primary">
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 0a9a1ec7f..5c0e5d192 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
@@ -1,13 +1,11 @@
-import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import Fund from '../../../../../props/models/Fund';
 import FilterItemToggle from '../../../../elements/tables/elements/FilterItemToggle';
-import EmptyCard from '../../../../elements/empty-card/EmptyCard';
-import Paginator from '../../../../../modules/paginator/components/Paginator';
+import LoaderTableCard from '../../../../elements/loader-table-card/LoaderTableCard';
 import useTranslate from '../../../../../hooks/useTranslate';
 import useActiveOrganization from '../../../../../hooks/useActiveOrganization';
 import usePaginatorService from '../../../../../modules/paginator/services/usePaginatorService';
 import { PaginationData } from '../../../../../props/ApiResponses';
-import LoadingCard from '../../../../elements/loading-card/LoadingCard';
 import TableRowActions from '../../../../elements/tables/TableRowActions';
 import { hasPermission } from '../../../../../helpers/utils';
 import StateNavLink from '../../../../../modules/state_router/StateNavLink';
@@ -15,8 +13,6 @@ import useAssetUrl from '../../../../../hooks/useAssetUrl';
 import Implementation from '../../../../../props/models/Implementation';
 import Label from '../../../../elements/image_cropper/Label';
 import { Permission } from '../../../../../props/models/Organization';
-import useConfigurableTable from '../../../vouchers/hooks/useConfigurableTable';
-import TableTopScroller from '../../../../elements/tables/TableTopScroller';
 import { useFundService } from '../../../../../services/FundService';
 import { DashboardRoutes } from '../../../../../modules/state_router/RouterBuilder';
 import useFilterNext from '../../../../../modules/filter_next/useFilterNext';
@@ -52,8 +48,6 @@ export default function OrganizationsFundsShowImplementationsCard({
 
     const { resetFilters: resetFilters } = filter;
 
-    const { headElement, configsElement } = useConfigurableTable(fundService.getImplementationsColumns());
-
     const transformImplementations = useCallback(() => {
         const { q = '', per_page } = filterValuesActive;
         const links = { active: false, label: '', url: '' };
@@ -148,103 +142,68 @@ export default function OrganizationsFundsShowImplementationsCard({
                 </div>
             </div>
 
-            {implementations ? (
-                <Fragment>
-                    {implementations?.meta?.total > 0 ? (
-                        <div className="card-section card-section-padless">
-                            {configsElement}
-
-                            <TableTopScroller>
-                                <table className="table">
-                                    {headElement}
-
-                                    <tbody>
-                                        {implementations?.data?.map((implementation) => (
-                                            <tr key={implementation?.id}>
-                                                <td className="td-narrow">
-                                                    <img
-                                                        className="td-media"
-                                                        src={assetUrl(
-                                                            '/assets/img/placeholders/organization-thumbnail.png',
-                                                        )}
-                                                        alt={''}></img>
-                                                </td>
-                                                <td>{implementation?.name}</td>
-                                                {fund.state == 'active' && (
-                                                    <td>
-                                                        <Label type="success">Zichtbaar</Label>
-                                                    </td>
-                                                )}
-                                                {fund.state != 'active' && (
-                                                    <td>
-                                                        <Label type="default">Onzichtbaar</Label>
-                                                    </td>
-                                                )}
-
-                                                <td className="td-narrow text-right">
-                                                    <TableRowActions
-                                                        content={() => (
-                                                            <div className="dropdown dropdown-actions">
-                                                                <a
-                                                                    className="dropdown-item"
-                                                                    target="_blank"
-                                                                    href={
-                                                                        implementation?.url_webshop + 'funds/' + fund.id
-                                                                    }
-                                                                    rel="noreferrer">
-                                                                    <em className="mdi mdi-open-in-new icon-start" />{' '}
-                                                                    Bekijk op webshop
-                                                                </a>
-
-                                                                {hasPermission(
-                                                                    activeOrganization,
-                                                                    Permission.MANAGE_IMPLEMENTATION_CMS,
-                                                                ) && (
-                                                                    <StateNavLink
-                                                                        name={DashboardRoutes.IMPLEMENTATION}
-                                                                        params={{
-                                                                            id: implementation?.id,
-                                                                            organizationId: fund.organization_id,
-                                                                        }}
-                                                                        className="dropdown-item">
-                                                                        <em className="mdi mdi-store-outline icon-start" />
-                                                                        Ga naar CMS
-                                                                    </StateNavLink>
-                                                                )}
-                                                            </div>
-                                                        )}
-                                                    />
-                                                </td>
-                                            </tr>
-                                        ))}
-                                    </tbody>
-                                </table>
-                            </TableTopScroller>
-                        </div>
-                    ) : (
-                        <EmptyCard
-                            title="No webshops"
-                            type={'card-section'}
-                            description={
-                                lastQueryImplementations
-                                    ? `Could not find any webshops for "${lastQueryImplementations}"`
-                                    : null
-                            }
-                        />
-                    )}
-
-                    <div className="card-section card-section-narrow" hidden={implementations?.meta?.last_page < 2}>
-                        <Paginator
-                            meta={implementations.meta}
-                            filters={filterValues}
-                            updateFilters={filterUpdate}
-                            perPageKey={paginationPerPageKey}
-                        />
-                    </div>
-                </Fragment>
-            ) : (
-                <LoadingCard type={'card-section'} />
-            )}
+            <LoaderTableCard
+                loading={!implementations}
+                empty={implementations?.meta?.total === 0}
+                emptyTitle="No webshops"
+                emptyDescription={
+                    lastQueryImplementations
+                        ? `Could not find any webshops for "${lastQueryImplementations}"`
+                        : undefined
+                }
+                columns={fundService.getImplementationsColumns()}
+                paginator={{ key: paginationPerPageKey, data: implementations, filterValues, filterUpdate }}>
+                {implementations?.data?.map((implementation) => (
+                    <tr key={implementation?.id}>
+                        <td className="td-narrow">
+                            <img
+                                className="td-media"
+                                src={assetUrl('/assets/img/placeholders/organization-thumbnail.png')}
+                                alt={''}></img>
+                        </td>
+                        <td>{implementation?.name}</td>
+                        {fund.state == 'active' && (
+                            <td>
+                                <Label type="success">Zichtbaar</Label>
+                            </td>
+                        )}
+                        {fund.state != 'active' && (
+                            <td>
+                                <Label type="default">Onzichtbaar</Label>
+                            </td>
+                        )}
+
+                        <td className="td-narrow text-right">
+                            <TableRowActions
+                                content={() => (
+                                    <div className="dropdown dropdown-actions">
+                                        <a
+                                            className="dropdown-item"
+                                            target="_blank"
+                                            href={implementation?.url_webshop + 'funds/' + fund.id}
+                                            rel="noreferrer">
+                                            <em className="mdi mdi-open-in-new icon-start" /> Bekijk op webshop
+                                        </a>
+
+                                        {hasPermission(activeOrganization, Permission.MANAGE_IMPLEMENTATION_CMS) && (
+                                            <StateNavLink
+                                                name={DashboardRoutes.IMPLEMENTATION}
+                                                params={{
+                                                    id: implementation?.id,
+                                                    organizationId: fund.organization_id,
+                                                }}
+                                                className="dropdown-item">
+                                                <em className="mdi mdi-store-outline icon-start" />
+                                                Ga naar CMS
+                                            </StateNavLink>
+                                        )}
+                                    </div>
+                                )}
+                            />
+                        </td>
+                    </tr>
+                ))}
+            </LoaderTableCard>
         </div>
     );
 }
diff --git a/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowTopUpsCard.tsx b/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowTopUpsCard.tsx
index 3a4395e1c..90082f4d0 100644
--- a/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowTopUpsCard.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-show/elements/tabs-relations-card/OrganizationsFundsShowTopUpsCard.tsx
@@ -1,20 +1,17 @@
-import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import Fund from '../../../../../props/models/Fund';
 import FilterItemToggle from '../../../../elements/tables/elements/FilterItemToggle';
 import DatePickerControl from '../../../../elements/forms/controls/DatePickerControl';
 import { dateFormat, dateParse } from '../../../../../helpers/dates';
 import FundTopUpTransaction from '../../../../../props/models/FundTopUpTransaction';
-import EmptyCard from '../../../../elements/empty-card/EmptyCard';
-import Paginator from '../../../../../modules/paginator/components/Paginator';
+import LoaderTableCard from '../../../../elements/loader-table-card/LoaderTableCard';
 import useTranslate from '../../../../../hooks/useTranslate';
 import useSetProgress from '../../../../../hooks/useSetProgress';
 import useActiveOrganization from '../../../../../hooks/useActiveOrganization';
 import { useFundService } from '../../../../../services/FundService';
 import usePaginatorService from '../../../../../modules/paginator/services/usePaginatorService';
 import { PaginationData } from '../../../../../props/ApiResponses';
-import LoadingCard from '../../../../elements/loading-card/LoadingCard';
-import useConfigurableTable from '../../../vouchers/hooks/useConfigurableTable';
-import TableTopScroller from '../../../../elements/tables/TableTopScroller';
 import TableEmptyValue from '../../../../elements/table-empty-value/TableEmptyValue';
 import useFilterNext from '../../../../../modules/filter_next/useFilterNext';
 import CardHeaderFilter from '../../../../elements/tables/elements/CardHeaderFilter';
@@ -66,11 +63,6 @@ export default function OrganizationsFundsShowTopUpsCard({
 
     const { resetFilters: resetFilters } = filter;
 
-    const { headElement, configsElement } = useConfigurableTable(fundService.getTopUpColumns(), {
-        filter,
-        sortable: true,
-    });
-
     const fetchTopUps = useCallback(() => {
         if (!fund?.is_configured) {
             setLastQueryTopUpTransactions(filterValuesActive.q);
@@ -219,58 +211,32 @@ export default function OrganizationsFundsShowTopUpsCard({
                 </div>
             </div>
 
-            {topUpTransactions ? (
-                <Fragment>
-                    {topUpTransactions?.meta?.total > 0 ? (
-                        <div className="card-section card-section-padless">
-                            {configsElement}
-
-                            <TableTopScroller>
-                                <table className="table">
-                                    {headElement}
-
-                                    <tbody>
-                                        {topUpTransactions.data.map((top_up_transaction: FundTopUpTransaction) => (
-                                            <tr key={top_up_transaction.id}>
-                                                <td>{top_up_transaction.code}</td>
-                                                <td className={!top_up_transaction.iban ? 'text-muted' : ''}>
-                                                    {top_up_transaction.iban || 'Geen IBAN'}
-                                                </td>
-                                                <td>{top_up_transaction.amount_locale}</td>
-                                                <td>{top_up_transaction.created_at_locale}</td>
-                                                <td className={'table-td-actions text-right'}>
-                                                    <TableEmptyValue />
-                                                </td>
-                                            </tr>
-                                        ))}
-                                    </tbody>
-                                </table>
-                            </TableTopScroller>
-                        </div>
-                    ) : (
-                        <EmptyCard
-                            title="No top-ups"
-                            type={'card-section'}
-                            description={
-                                lastQueryTopUpTransactions
-                                    ? `Could not find any top-ups for "${lastQueryTopUpTransactions}"`
-                                    : null
-                            }
-                        />
-                    )}
-
-                    <div className={'card-section card-section-narrow'} hidden={topUpTransactions?.meta?.total < 2}>
-                        <Paginator
-                            meta={topUpTransactions.meta}
-                            filters={filterValues}
-                            updateFilters={filterUpdate}
-                            perPageKey={paginationPerPageKey}
-                        />
-                    </div>
-                </Fragment>
-            ) : (
-                <LoadingCard type={'card-section'} />
-            )}
+            <LoaderTableCard
+                loading={!topUpTransactions}
+                empty={topUpTransactions?.meta?.total === 0}
+                emptyTitle="No top-ups"
+                emptyDescription={
+                    lastQueryTopUpTransactions
+                        ? `Could not find any top-ups for "${lastQueryTopUpTransactions}"`
+                        : undefined
+                }
+                columns={fundService.getTopUpColumns()}
+                tableOptions={{ filter, sortable: true }}
+                paginator={{ key: paginationPerPageKey, data: topUpTransactions, filterValues, filterUpdate }}>
+                {topUpTransactions?.data?.map((top_up_transaction: FundTopUpTransaction) => (
+                    <tr key={top_up_transaction.id}>
+                        <td>{top_up_transaction.code}</td>
+                        <td className={classNames(!top_up_transaction.iban && 'text-muted')}>
+                            {top_up_transaction.iban || 'Geen IBAN'}
+                        </td>
+                        <td>{top_up_transaction.amount_locale}</td>
+                        <td>{top_up_transaction.created_at_locale}</td>
+                        <td className={'table-td-actions text-right'}>
+                            <TableEmptyValue />
+                        </td>
+                    </tr>
+                ))}
+            </LoaderTableCard>
         </div>
     );
 }
diff --git a/react/src/dashboard/components/pages/organizations-funds/OrganizationFunds.tsx b/react/src/dashboard/components/pages/organizations-funds/OrganizationFunds.tsx
index 916ccf8bf..cfa9220f7 100644
--- a/react/src/dashboard/components/pages/organizations-funds/OrganizationFunds.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds/OrganizationFunds.tsx
@@ -18,13 +18,10 @@ import usePushSuccess from '../../../hooks/usePushSuccess';
 import ModalDangerZone from '../../modals/ModalDangerZone';
 import useOpenModal from '../../../hooks/useOpenModal';
 import { createEnumParam, NumberParam, StringParam } from 'use-query-params';
-import Paginator from '../../../modules/paginator/components/Paginator';
 import ModalFundTopUp from '../../modals/ModalFundTopUp';
 import useTranslate from '../../../hooks/useTranslate';
 import TableEmptyValue from '../../elements/table-empty-value/TableEmptyValue';
 import FundStateLabels from '../../elements/resource-states/FundStateLabels';
-import TableTopScroller from '../../elements/tables/TableTopScroller';
-import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
 import TableEntityMain from '../../elements/tables/elements/TableEntityMain';
 import usePushApiError from '../../../hooks/usePushApiError';
 import classNames from 'classnames';
@@ -93,10 +90,6 @@ export default function OrganizationFunds() {
 
     const { resetFilters: resetFilters } = filter;
 
-    const { headElement, configsElement } = useConfigurableTable(
-        fundService.getColumns(activeOrganization, filterValues.funds_type),
-    );
-
     const fetchFunds = useCallback(() => {
         setProgress(0);
 
@@ -217,7 +210,7 @@ export default function OrganizationFunds() {
         <div className="card">
             <div className="card-header">
                 <div className="card-title flex flex-grow" data-dusk="fundsTitle">
-                    {translate('components.organization_funds.title')} ({funds.meta.total})
+                    {translate('components.organization_funds.title')} ({funds?.meta?.total})
                 </div>
 
                 <div className="card-header-filters">
@@ -330,177 +323,135 @@ export default function OrganizationFunds() {
             <LoaderTableCard
                 loading={!funds?.meta}
                 empty={funds?.meta?.total === 0}
+                columns={fundService.getColumns(activeOrganization, filterValues.funds_type)}
+                paginator={{ key: paginatorKey, data: funds, filterValues, filterUpdate }}
                 emptyTitle={'Geen fondsen'}
                 emptyDescription={'Geen fondsen gevonden.'}>
-                <div className="card-section">
-                    <div className="card-block card-block-table">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {funds.data.map((fund) => (
-                                        <StateNavLink
-                                            key={fund.id}
-                                            name={DashboardRoutes.FUND}
-                                            params={{ organizationId: activeOrganization.id, fundId: fund.id }}
-                                            customElement={'tr'}
-                                            className={'tr-clickable'}>
-                                            <td>
-                                                <TableEntityMain
-                                                    title={strLimit(fund.name, 50)}
-                                                    subtitle={fund.organization?.name}
-                                                    mediaPlaceholder={'fund'}
-                                                    media={fund?.logo}
-                                                />
-                                            </td>
-
-                                            <td className="text-strong text-muted-dark">
-                                                {fund?.implementation?.name || <TableEmptyValue />}
-                                            </td>
-
-                                            {filterValues.funds_type == 'active' && (
-                                                <Fragment>
-                                                    {hasPermission(activeOrganization, Permission.VIEW_FINANCES) && (
-                                                        <td>{fund.budget?.left_locale}</td>
-                                                    )}
+                {funds?.data?.map((fund) => (
+                    <StateNavLink
+                        key={fund.id}
+                        name={DashboardRoutes.FUND}
+                        params={{ organizationId: activeOrganization.id, fundId: fund.id }}
+                        customElement={'tr'}
+                        className={'tr-clickable'}>
+                        <td>
+                            <TableEntityMain
+                                title={strLimit(fund.name, 50)}
+                                subtitle={fund.organization?.name}
+                                mediaPlaceholder={'fund'}
+                                media={fund?.logo}
+                            />
+                        </td>
+
+                        <td className="text-strong text-muted-dark">
+                            {fund?.implementation?.name || <TableEmptyValue />}
+                        </td>
+
+                        {filterValues.funds_type == 'active' && (
+                            <Fragment>
+                                {hasPermission(activeOrganization, Permission.VIEW_FINANCES) && (
+                                    <td>{fund.budget?.left_locale}</td>
+                                )}
+
+                                <td className="text-strong text-muted-dark">{fund.requester_count}</td>
+                            </Fragment>
+                        )}
 
-                                                    <td className="text-strong text-muted-dark">
-                                                        {fund.requester_count}
-                                                    </td>
-                                                </Fragment>
+                        <td>
+                            <FundStateLabels fund={fund} />
+                        </td>
+
+                        <td className={'table-td-actions text-right'}>
+                            {!fund.archived ? (
+                                <TableRowActions
+                                    content={({ close }) => (
+                                        <div className="dropdown dropdown-actions">
+                                            <StateNavLink
+                                                name={DashboardRoutes.FUND}
+                                                params={{
+                                                    organizationId: activeOrganization.id,
+                                                    fundId: fund.id,
+                                                }}
+                                                className="dropdown-item">
+                                                <em className="mdi mdi-eye icon-start" /> Bekijken
+                                            </StateNavLink>
+
+                                            {hasPermission(
+                                                activeOrganization,
+                                                [Permission.MANAGE_FUNDS, Permission.MANAGE_FUND_TEXTS],
+                                                false,
+                                            ) && (
+                                                <StateNavLink
+                                                    name={DashboardRoutes.FUND_EDIT}
+                                                    className="dropdown-item"
+                                                    params={{
+                                                        organizationId: activeOrganization.id,
+                                                        fundId: fund.id,
+                                                    }}>
+                                                    <em className="mdi mdi-pencil icon-start" />
+                                                    Bewerken
+                                                </StateNavLink>
                                             )}
 
-                                            <td>
-                                                <FundStateLabels fund={fund} />
-                                            </td>
-
-                                            <td className={'table-td-actions text-right'}>
-                                                {!fund.archived ? (
-                                                    <TableRowActions
-                                                        content={({ close }) => (
-                                                            <div className="dropdown dropdown-actions">
-                                                                <StateNavLink
-                                                                    name={DashboardRoutes.FUND}
-                                                                    params={{
-                                                                        organizationId: activeOrganization.id,
-                                                                        fundId: fund.id,
-                                                                    }}
-                                                                    className="dropdown-item">
-                                                                    <em className="mdi mdi-eye icon-start" /> Bekijken
-                                                                </StateNavLink>
-
-                                                                {hasPermission(
-                                                                    activeOrganization,
-                                                                    [
-                                                                        Permission.MANAGE_FUNDS,
-                                                                        Permission.MANAGE_FUND_TEXTS,
-                                                                    ],
-                                                                    false,
-                                                                ) && (
-                                                                    <StateNavLink
-                                                                        name={DashboardRoutes.FUND_EDIT}
-                                                                        className="dropdown-item"
-                                                                        params={{
-                                                                            organizationId: activeOrganization.id,
-                                                                            fundId: fund.id,
-                                                                        }}>
-                                                                        <em className="mdi mdi-pencil icon-start" />
-                                                                        Bewerken
-                                                                    </StateNavLink>
-                                                                )}
-
-                                                                {activeOrganization.allow_2fa_restrictions &&
-                                                                    hasPermission(
-                                                                        activeOrganization,
-                                                                        Permission.MANAGE_FUNDS,
-                                                                    ) && (
-                                                                        <StateNavLink
-                                                                            className="dropdown-item"
-                                                                            name={DashboardRoutes.FUND_SECURITY}
-                                                                            params={{
-                                                                                fundId: fund.id,
-                                                                                organizationId: activeOrganization.id,
-                                                                            }}>
-                                                                            <em className="mdi mdi-security icon-start" />
-                                                                            Beveiliging
-                                                                        </StateNavLink>
-                                                                    )}
-
-                                                                {hasPermission(
-                                                                    activeOrganization,
-                                                                    Permission.VIEW_FINANCES,
-                                                                ) &&
-                                                                    fund.key &&
-                                                                    fund.state != 'closed' && (
-                                                                        <a
-                                                                            className={classNames(
-                                                                                'dropdown-item',
-                                                                                !fund.organization
-                                                                                    .has_bank_connection && 'disabled',
-                                                                            )}
-                                                                            onClick={() => {
-                                                                                topUpModal(fund);
-                                                                                close();
-                                                                            }}>
-                                                                            <em className="mdi mdi-plus-circle icon-start" />
-                                                                            Budget toevoegen
-                                                                        </a>
-                                                                    )}
-
-                                                                {hasPermission(
-                                                                    activeOrganization,
-                                                                    Permission.MANAGE_FUNDS,
-                                                                ) && (
-                                                                    <a
-                                                                        className={classNames(
-                                                                            'dropdown-item',
-                                                                            fund.state != 'closed' && 'disabled',
-                                                                        )}
-                                                                        onClick={() => {
-                                                                            archiveFund(fund);
-                                                                            close();
-                                                                        }}>
-                                                                        <em className="mdi mdi-download-box-outline icon-start" />
-                                                                        {translate(
-                                                                            'components.organization_funds.buttons.archive',
-                                                                        )}
-                                                                    </a>
-                                                                )}
-                                                            </div>
+                                            {activeOrganization.allow_2fa_restrictions &&
+                                                hasPermission(activeOrganization, Permission.MANAGE_FUNDS) && (
+                                                    <StateNavLink
+                                                        className="dropdown-item"
+                                                        name={DashboardRoutes.FUND_SECURITY}
+                                                        params={{
+                                                            fundId: fund.id,
+                                                            organizationId: activeOrganization.id,
+                                                        }}>
+                                                        <em className="mdi mdi-security icon-start" />
+                                                        Beveiliging
+                                                    </StateNavLink>
+                                                )}
+
+                                            {hasPermission(activeOrganization, Permission.VIEW_FINANCES) &&
+                                                fund.key &&
+                                                fund.state != 'closed' && (
+                                                    <a
+                                                        className={classNames(
+                                                            'dropdown-item',
+                                                            !fund.organization.has_bank_connection && 'disabled',
                                                         )}
-                                                    />
-                                                ) : (
-                                                    hasPermission(activeOrganization, Permission.MANAGE_FUNDS) && (
-                                                        <button
-                                                            className="button button-primary"
-                                                            onClick={(e) => restoreFund(e, fund)}>
-                                                            <em className="mdi mdi-lock-reset icon-start" />
-                                                            {translate('components.organization_funds.buttons.restore')}
-                                                        </button>
-                                                    )
+                                                        onClick={() => {
+                                                            topUpModal(fund);
+                                                            close();
+                                                        }}>
+                                                        <em className="mdi mdi-plus-circle icon-start" />
+                                                        Budget toevoegen
+                                                    </a>
                                                 )}
-                                            </td>
-                                        </StateNavLink>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
 
-                {funds?.meta.total > 0 && (
-                    <div className="card-section">
-                        <Paginator
-                            meta={funds.meta}
-                            filters={filterValues}
-                            updateFilters={filterUpdate}
-                            perPageKey={paginatorKey}
-                        />
-                    </div>
-                )}
+                                            {hasPermission(activeOrganization, Permission.MANAGE_FUNDS) && (
+                                                <a
+                                                    className={classNames(
+                                                        'dropdown-item',
+                                                        fund.state != 'closed' && 'disabled',
+                                                    )}
+                                                    onClick={() => {
+                                                        archiveFund(fund);
+                                                        close();
+                                                    }}>
+                                                    <em className="mdi mdi-download-box-outline icon-start" />
+                                                    {translate('components.organization_funds.buttons.archive')}
+                                                </a>
+                                            )}
+                                        </div>
+                                    )}
+                                />
+                            ) : (
+                                hasPermission(activeOrganization, Permission.MANAGE_FUNDS) && (
+                                    <button className="button button-primary" onClick={(e) => restoreFund(e, fund)}>
+                                        <em className="mdi mdi-lock-reset icon-start" />
+                                        {translate('components.organization_funds.buttons.restore')}
+                                    </button>
+                                )
+                            )}
+                        </td>
+                    </StateNavLink>
+                ))}
             </LoaderTableCard>
         </div>
     );
diff --git a/react/src/dashboard/components/pages/organizations-notifications/OrganizationsNotifications.tsx b/react/src/dashboard/components/pages/organizations-notifications/OrganizationsNotifications.tsx
index d8979ef3e..183c140b7 100644
--- a/react/src/dashboard/components/pages/organizations-notifications/OrganizationsNotifications.tsx
+++ b/react/src/dashboard/components/pages/organizations-notifications/OrganizationsNotifications.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import { PaginationData } from '../../../props/ApiResponses';
 import Notification from '../../../props/models/Notification';
 import { useNotificationService } from '../../../services/NotificationService';
@@ -82,7 +83,7 @@ export default function OrganizationsNotifications() {
                     {notifications.data.map((notification) => (
                         <div
                             key={notification.id}
-                            className={`notification-item ${!notification.seen ? 'notification-item-new' : ''}`}>
+                            className={classNames('notification-item', !notification.seen && 'notification-item-new')}>
                             <div className="notification-details">
                                 <div className="notification-title">{notification.title}</div>
                                 <div className="notification-description">
diff --git a/react/src/dashboard/components/pages/organizations-translations/elements/TranslationStatsTable.tsx b/react/src/dashboard/components/pages/organizations-translations/elements/TranslationStatsTable.tsx
index 0e10e83b1..14934b2cc 100644
--- a/react/src/dashboard/components/pages/organizations-translations/elements/TranslationStatsTable.tsx
+++ b/react/src/dashboard/components/pages/organizations-translations/elements/TranslationStatsTable.tsx
@@ -2,8 +2,7 @@ import React, { Fragment, useState } from 'react';
 import classNames from 'classnames';
 import { numberFormat } from '../../../../helpers/string';
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
-import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
+import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
 import { useOrganizationService } from '../../../../services/OrganizationService';
 import { TranslationStats } from '../../../../props/models/Organization';
 
@@ -15,94 +14,71 @@ export default function TranslationStatsTable({
     const organizationService = useOrganizationService();
 
     const [shownKeys, setShownKeys] = useState([]);
-    const { headElement, configsElement } = useConfigurableTable(organizationService.getTranslationStatsColumns());
-
     return (
-        <div className="card-section">
-            <div className="card-block card-block-table">
-                {configsElement}
-
-                <TableTopScroller>
-                    <table className="table">
-                        {headElement}
-
-                        <tbody>
-                            {stats.data.groups.map((group, index) => (
-                                <Fragment key={index}>
-                                    <tr
-                                        className={'tr-clickable'}
-                                        onClick={(e) => {
-                                            e?.preventDefault();
-                                            e?.stopPropagation();
+        <LoaderTableCard
+            empty={stats.data.groups.length === 0}
+            emptyTitle={'Geen vertalingen'}
+            columns={organizationService.getTranslationStatsColumns()}>
+            {stats.data.groups.map((group, index) => (
+                <Fragment key={index}>
+                    <tr
+                        className={'tr-clickable'}
+                        onClick={(e) => {
+                            e?.preventDefault();
+                            e?.stopPropagation();
 
-                                            setShownKeys((keys) => {
-                                                return keys.includes(index)
-                                                    ? keys.filter((item) => item !== index)
-                                                    : [...keys, index];
-                                            });
-                                        }}>
-                                        <td>
-                                            <div className="td-collapsable">
-                                                <div className="collapsable-icon">
-                                                    <div
-                                                        className={classNames(
-                                                            `mdi icon-collapse `,
-                                                            shownKeys.includes(index)
-                                                                ? 'mdi-menu-down'
-                                                                : 'mdi-menu-right',
-                                                        )}
-                                                    />
-                                                </div>
+                            setShownKeys((keys) => {
+                                return keys.includes(index) ? keys.filter((item) => item !== index) : [...keys, index];
+                            });
+                        }}>
+                        <td>
+                            <div className="td-collapsable">
+                                <div className="collapsable-icon">
+                                    <div
+                                        className={classNames(
+                                            `mdi icon-collapse `,
+                                            shownKeys.includes(index) ? 'mdi-menu-down' : 'mdi-menu-right',
+                                        )}
+                                    />
+                                </div>
 
-                                                <div className="collapsable-content text-semibold">{group.name}</div>
-                                            </div>
-                                        </td>
-                                        <td className={'text-semibold'}>
-                                            {group.symbols ? numberFormat(group.symbols) : <TableEmptyValue />}
-                                        </td>
-                                        <td className={'text-semibold'}>{group.costs}</td>
-                                        <td className={'table-td-actions text-right'}>
-                                            <TableEmptyValue />
-                                        </td>
-                                    </tr>
-                                    {shownKeys.includes(index) &&
-                                        group?.locales?.map((locale) => (
-                                            <tr key={locale.name}>
-                                                <td>
-                                                    <div style={{ paddingLeft: '20px' }}>{locale.name}</div>
-                                                </td>
-                                                <td>
-                                                    {locale.symbols ? (
-                                                        numberFormat(locale.symbols)
-                                                    ) : (
-                                                        <TableEmptyValue />
-                                                    )}
-                                                </td>
-                                                <td>{locale.symbols ? locale.costs : <TableEmptyValue />}</td>
-                                                <td className={'table-td-actions text-right'}>
-                                                    <TableEmptyValue />
-                                                </td>
-                                            </tr>
-                                        ))}
+                                <div className="collapsable-content text-semibold">{group.name}</div>
+                            </div>
+                        </td>
+                        <td className={'text-semibold'}>
+                            {group.symbols ? numberFormat(group.symbols) : <TableEmptyValue />}
+                        </td>
+                        <td className={'text-semibold'}>{group.costs}</td>
+                        <td className={'table-td-actions text-right'}>
+                            <TableEmptyValue />
+                        </td>
+                    </tr>
+                    {shownKeys.includes(index) &&
+                        group?.locales?.map((locale) => (
+                            <tr key={locale.name}>
+                                <td>
+                                    <div style={{ paddingLeft: '20px' }}>{locale.name}</div>
+                                </td>
+                                <td>{locale.symbols ? numberFormat(locale.symbols) : <TableEmptyValue />}</td>
+                                <td>{locale.symbols ? locale.costs : <TableEmptyValue />}</td>
+                                <td className={'table-td-actions text-right'}>
+                                    <TableEmptyValue />
+                                </td>
+                            </tr>
+                        ))}
 
-                                    {index === stats.data.groups?.length - 1 && (
-                                        <tr className={'tr-totals'}>
-                                            <td className={'text-strong'}>Totaal</td>
-                                            <td className={'text-strong'}>
-                                                {numberFormat(stats?.data?.total?.symbols || 0)}
-                                            </td>
-                                            <td className={'text-strong'}>{stats?.data?.total?.cost}</td>
-                                            <td className={'table-td-actions text-right'}>
-                                                <TableEmptyValue />
-                                            </td>
-                                        </tr>
-                                    )}
-                                </Fragment>
-                            ))}
-                        </tbody>
-                    </table>
-                </TableTopScroller>
-            </div>
-        </div>
+                    {index === stats.data.groups?.length - 1 && (
+                        <tr className={'tr-totals'}>
+                            <td className={'text-strong'}>Totaal</td>
+                            <td className={'text-strong'}>{numberFormat(stats?.data?.total?.symbols || 0)}</td>
+                            <td className={'text-strong'}>{stats?.data?.total?.cost}</td>
+                            <td className={'table-td-actions text-right'}>
+                                <TableEmptyValue />
+                            </td>
+                        </tr>
+                    )}
+                </Fragment>
+            ))}
+        </LoaderTableCard>
     );
 }
diff --git a/react/src/dashboard/components/pages/payment-methods/PaymentMethods.tsx b/react/src/dashboard/components/pages/payment-methods/PaymentMethods.tsx
index 0d73d05e2..78250bc17 100644
--- a/react/src/dashboard/components/pages/payment-methods/PaymentMethods.tsx
+++ b/react/src/dashboard/components/pages/payment-methods/PaymentMethods.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
 import useSetProgress from '../../../hooks/useSetProgress';
@@ -184,7 +185,9 @@ export default function PaymentMethods() {
                                         Een nieuw Mollie account aanmaken
                                     </button>
 
-                                    <div className={(privacy ? '' : 'text-muted') + ' button-text-divider'}>or</div>
+                                    <div className={classNames('button-text-divider', !privacy && 'text-muted')}>
+                                        or
+                                    </div>
                                     <button
                                         className="button button-text"
                                         type="button"
diff --git a/react/src/dashboard/components/pages/payouts/elements/PayoutsTable.tsx b/react/src/dashboard/components/pages/payouts/elements/PayoutsTable.tsx
index 6f323d078..c60858c6f 100644
--- a/react/src/dashboard/components/pages/payouts/elements/PayoutsTable.tsx
+++ b/react/src/dashboard/components/pages/payouts/elements/PayoutsTable.tsx
@@ -1,13 +1,10 @@
 import React, { useCallback } from 'react';
 import Organization from '../../../../props/models/Organization';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
-import Paginator from '../../../../modules/paginator/components/Paginator';
 import { PaginationData } from '../../../../props/ApiResponses';
 import { FilterModel, FilterScope, FilterSetter } from '../../../../modules/filter_next/types/FilterParams';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import { strLimit } from '../../../../helpers/string';
 import TableRowActions from '../../../elements/tables/TableRowActions';
-import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
 import TableDateTime from '../../../elements/tables/elements/TableDateTime';
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
 import TransactionStateLabel from '../../../elements/resource-states/TransactionStateLabel';
@@ -51,11 +48,6 @@ export default function PayoutsTable({
 
     const payoutTransactionService = usePayoutTransactionService();
 
-    const { headElement, configsElement } = useConfigurableTable(payoutTransactionService.getColumns(), {
-        filter: filter,
-        sortable: true,
-    });
-
     const updatePayment = useCallback(
         (
             transaction: PayoutTransaction,
@@ -104,162 +96,132 @@ export default function PayoutsTable({
     return (
         <LoaderTableCard
             loading={loading}
-            empty={transactions.meta.total == 0}
-            emptyTitle={'Geen uitbetalingen gevonden'}>
-            <div className="card-section">
-                <div className="card-block card-block-table">
-                    {configsElement}
-
-                    <TableTopScroller>
-                        <table className="table">
-                            {headElement}
+            empty={transactions?.meta?.total == 0}
+            emptyTitle={'Geen uitbetalingen gevonden'}
+            columns={payoutTransactionService.getColumns()}
+            tableOptions={{ filter, sortable: true }}
+            paginator={{ key: paginatorKey, data: transactions, filterValues, filterUpdate }}>
+            {transactions?.data?.map((transaction) => (
+                <StateNavLink
+                    key={transaction.id}
+                    dataDusk={`payoutsTableRow${transaction.id}`}
+                    name={DashboardRoutes.PAYOUT}
+                    params={{
+                        address: transaction.address,
+                        organizationId: organization.id,
+                    }}
+                    className={'tr-clickable'}
+                    customElement={'tr'}>
+                    <td>{transaction.id}</td>
+                    <td title={transaction.fund.name || ''}>
+                        <StateNavLink
+                            name={DashboardRoutes.FUND}
+                            params={{
+                                organizationId: organization.id,
+                                fundId: transaction?.fund?.id,
+                            }}
+                            className="text-primary-light">
+                            {strLimit(transaction.fund.name, 25)}
+                        </StateNavLink>
+                    </td>
+                    <td>{transaction.amount_locale}</td>
+                    <td>
+                        <TableDateTime value={transaction.created_at_locale} />
+                    </td>
+                    <td>
+                        <TableDateTime value={transaction.transfer_at_locale} />
+                    </td>
+                    <td>
+                        <div className="text-semibold text-primary">{transaction.payment_type_locale.title}</div>
+                        <div
+                            className="text-strong text-md text-muted-dark"
+                            title={transaction.payment_type_locale.subtitle || ''}>
+                            {strLimit(transaction.payment_type_locale.subtitle)}
+                        </div>
+                    </td>
+                    <td>
+                        {transaction.payout_relations?.length > 0 ? (
+                            transaction.payout_relations.map((relation) => (
+                                <div
+                                    title={relation.value}
+                                    className={relation.type === 'bsn' ? 'text-primary text-semibold' : ''}
+                                    key={relation.id}>
+                                    {strLimit(relation.value)}
+                                </div>
+                            ))
+                        ) : (
+                            <TableEmptyValue />
+                        )}
+                    </td>
+                    <td>
+                        <TransactionStateLabel transaction={transaction} />
+                    </td>
+                    <td>{transaction?.employee?.email || <TableEmptyValue />}</td>
+                    <td>
+                        {transaction.iban_to}
+                        <div className={'text-small text-muted-dark'}>{transaction.iban_to_name}</div>
+                    </td>
+                    <td>
+                        {transaction.description ? (
+                            <TableDescription description={transaction.description} />
+                        ) : (
+                            <TableEmptyValue />
+                        )}
+                    </td>
 
-                            <tbody>
-                                {transactions.data.map((transaction) => (
+                    <td className={'table-td-actions text-right'}>
+                        <TableRowActions
+                            content={({ close }) => (
+                                <div className="dropdown dropdown-actions">
                                     <StateNavLink
-                                        key={transaction.id}
-                                        dataDusk={`payoutsTableRow${transaction.id}`}
                                         name={DashboardRoutes.PAYOUT}
+                                        className="dropdown-item"
                                         params={{
-                                            address: transaction.address,
                                             organizationId: organization.id,
-                                        }}
-                                        className={'tr-clickable'}
-                                        customElement={'tr'}>
-                                        <td>{transaction.id}</td>
-                                        <td title={transaction.fund.name || ''}>
-                                            <StateNavLink
-                                                name={DashboardRoutes.FUND}
-                                                params={{
-                                                    organizationId: organization.id,
-                                                    fundId: transaction?.fund?.id,
-                                                }}
-                                                className="text-primary-light">
-                                                {strLimit(transaction.fund.name, 25)}
-                                            </StateNavLink>
-                                        </td>
-                                        <td>{transaction.amount_locale}</td>
-                                        <td>
-                                            <TableDateTime value={transaction.created_at_locale} />
-                                        </td>
-                                        <td>
-                                            <TableDateTime value={transaction.transfer_at_locale} />
-                                        </td>
-                                        <td>
-                                            <div className="text-semibold text-primary">
-                                                {transaction.payment_type_locale.title}
-                                            </div>
-                                            <div
-                                                className="text-strong text-md text-muted-dark"
-                                                title={transaction.payment_type_locale.subtitle || ''}>
-                                                {strLimit(transaction.payment_type_locale.subtitle)}
-                                            </div>
-                                        </td>
-                                        <td>
-                                            {transaction.payout_relations?.length > 0 ? (
-                                                transaction.payout_relations.map((relation) => (
-                                                    <div
-                                                        title={relation.value}
-                                                        className={
-                                                            relation.type === 'bsn' ? 'text-primary text-semibold' : ''
-                                                        }
-                                                        key={relation.id}>
-                                                        {strLimit(relation.value)}
-                                                    </div>
-                                                ))
-                                            ) : (
-                                                <TableEmptyValue />
-                                            )}
-                                        </td>
-                                        <td>
-                                            <TransactionStateLabel transaction={transaction} />
-                                        </td>
-                                        <td>{transaction?.employee?.email || <TableEmptyValue />}</td>
-                                        <td>
-                                            {transaction.iban_to}
-                                            <div className={'text-small text-muted-dark'}>
-                                                {transaction.iban_to_name}
-                                            </div>
-                                        </td>
-                                        <td>
-                                            {transaction.description ? (
-                                                <TableDescription description={transaction.description} />
-                                            ) : (
-                                                <TableEmptyValue />
-                                            )}
-                                        </td>
-
-                                        <td className={'table-td-actions text-right'}>
-                                            <TableRowActions
-                                                content={({ close }) => (
-                                                    <div className="dropdown dropdown-actions">
-                                                        <StateNavLink
-                                                            name={DashboardRoutes.PAYOUT}
-                                                            className="dropdown-item"
-                                                            params={{
-                                                                organizationId: organization.id,
-                                                                address: transaction.address,
-                                                            }}>
-                                                            <em className="mdi mdi-eye icon-start" /> Bekijken
-                                                        </StateNavLink>
-                                                        {transaction.is_editable && (
-                                                            <div
-                                                                className="dropdown-item"
-                                                                onClick={() => {
-                                                                    editPayout(transaction);
-                                                                    close();
-                                                                }}>
-                                                                <em className="mdi mdi-pencil-outline icon-start" />{' '}
-                                                                Bewerken
-                                                            </div>
-                                                        )}
-                                                        {transaction.is_cancelable && (
-                                                            <div
-                                                                className="dropdown-item"
-                                                                onClick={() => {
-                                                                    updatePayment(transaction, {
-                                                                        cancel: true,
-                                                                    });
-                                                                    close();
-                                                                }}>
-                                                                <em className="mdi mdi-close-circle icon-start" />{' '}
-                                                                Annuleren
-                                                            </div>
-                                                        )}
-                                                        {transaction.is_editable && transaction.transfer_in_pending && (
-                                                            <div
-                                                                className="dropdown-item"
-                                                                onClick={() => {
-                                                                    updatePayment(transaction, {
-                                                                        skip_transfer_delay: true,
-                                                                    });
-                                                                }}>
-                                                                <em className="mdi mdi-clock-fast icon-start" />{' '}
-                                                                {strLimit('Direct doorzetten naar betaalopdracht', 32)}
-                                                            </div>
-                                                        )}
-                                                    </div>
-                                                )}
-                                            />
-                                        </td>
+                                            address: transaction.address,
+                                        }}>
+                                        <em className="mdi mdi-eye icon-start" /> Bekijken
                                     </StateNavLink>
-                                ))}
-                            </tbody>
-                        </table>
-                    </TableTopScroller>
-                </div>
-            </div>
-
-            {transactions.meta && (
-                <div className="card-section">
-                    <Paginator
-                        meta={transactions.meta}
-                        filters={filterValues}
-                        updateFilters={filterUpdate}
-                        perPageKey={paginatorKey}
-                    />
-                </div>
-            )}
+                                    {transaction.is_editable && (
+                                        <div
+                                            className="dropdown-item"
+                                            onClick={() => {
+                                                editPayout(transaction);
+                                                close();
+                                            }}>
+                                            <em className="mdi mdi-pencil-outline icon-start" /> Bewerken
+                                        </div>
+                                    )}
+                                    {transaction.is_cancelable && (
+                                        <div
+                                            className="dropdown-item"
+                                            onClick={() => {
+                                                updatePayment(transaction, {
+                                                    cancel: true,
+                                                });
+                                                close();
+                                            }}>
+                                            <em className="mdi mdi-close-circle icon-start" /> Annuleren
+                                        </div>
+                                    )}
+                                    {transaction.is_editable && transaction.transfer_in_pending && (
+                                        <div
+                                            className="dropdown-item"
+                                            onClick={() => {
+                                                updatePayment(transaction, {
+                                                    skip_transfer_delay: true,
+                                                });
+                                            }}>
+                                            <em className="mdi mdi-clock-fast icon-start" />{' '}
+                                            {strLimit('Direct doorzetten naar betaalopdracht', 32)}
+                                        </div>
+                                    )}
+                                </div>
+                            )}
+                        />
+                    </td>
+                </StateNavLink>
+            ))}
         </LoaderTableCard>
     );
 }
diff --git a/react/src/dashboard/components/pages/person-prevalidations/PrevalidationRequests.tsx b/react/src/dashboard/components/pages/person-prevalidations/PrevalidationRequests.tsx
index 6fe03ac49..3c3e7b775 100644
--- a/react/src/dashboard/components/pages/person-prevalidations/PrevalidationRequests.tsx
+++ b/react/src/dashboard/components/pages/person-prevalidations/PrevalidationRequests.tsx
@@ -12,17 +12,14 @@ import useOpenModal from '../../../hooks/useOpenModal';
 import usePaginatorService from '../../../modules/paginator/services/usePaginatorService';
 import { PaginationData } from '../../../props/ApiResponses';
 import PrevalidationRequest from '../../../props/models/PrevalidationRequest';
-import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
 import useFilterNext from '../../../modules/filter_next/useFilterNext';
 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 TableEmptyValue from '../../elements/table-empty-value/TableEmptyValue';
-import Paginator from '../../../modules/paginator/components/Paginator';
 import { createEnumParam, NumberParam, StringParam } from 'use-query-params';
 import EmptyCard from '../../elements/empty-card/EmptyCard';
 import { Permission } from '../../../props/models/Organization';
@@ -98,8 +95,6 @@ export default function PrevalidationRequests() {
         },
     );
 
-    const { headElement, configsElement } = useConfigurableTable(prevalidationRequestService.getColumns());
-
     const fetchPrevalidationRequests = useCallback(() => {
         if (activeOrganization?.allow_prevalidation_requests) {
             setProgress(0);
@@ -372,102 +367,67 @@ export default function PrevalidationRequests() {
 
             <LoaderTableCard
                 loading={!prevalidationRequests.meta}
-                empty={prevalidationRequests.meta.total == 0}
+                empty={prevalidationRequests?.meta?.total == 0}
                 emptyTitle={translate('prevalidation_requests.empty.title')}
-                emptyDescription={translate('prevalidation_requests.empty.description')}>
-                <div className="card-section">
-                    <div className="card-block card-block-table">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {prevalidationRequests.data.map((row) => (
-                                        <tr key={row.id} data-dusk={`tablePrevalidationRequestRow${row.id}`}>
-                                            <td className="text-primary text-strong">{row.bsn}</td>
-
-                                            <td>
-                                                <div className="text-primary text-semibold">
-                                                    {row.fund ? strLimit(row.fund?.name, 32) : <TableEmptyValue />}
-                                                </div>
-
-                                                <div className="text-strong text-md text-muted-dark">
-                                                    {row.fund ? (
-                                                        strLimit(row.fund?.implementation?.name, 32)
-                                                    ) : (
-                                                        <TableEmptyValue />
-                                                    )}
-                                                </div>
-                                            </td>
-                                            <td className="text-primary text-strong">
-                                                {row.employee?.email || 'Onbekend'}
-                                            </td>
-                                            <td>
-                                                <PrevalidationRequestStateLabels request={row} />
-                                            </td>
-                                            <td>
-                                                {row.state === 'fail' && row.failed_reason ? (
-                                                    row.failed_reason_locale
-                                                ) : (
-                                                    <TableEmptyValue />
-                                                )}
-                                            </td>
-
-                                            <td className={'table-td-actions text-right'}>
-                                                {row.state === 'fail' ? (
-                                                    <TableRowActions
-                                                        dataDusk={'btnPrevalidationRequestMenu'}
-                                                        content={({ close }) => (
-                                                            <div className="dropdown dropdown-actions">
-                                                                <div
-                                                                    className="dropdown-item"
-                                                                    data-dusk={`btnPrevalidationRequestResubmit${row.id}`}
-                                                                    onClick={() => {
-                                                                        resubmitRequest(row);
-                                                                        close();
-                                                                    }}>
-                                                                    <em className="mdi mdi-restart icon-start" />{' '}
-                                                                    {translate(
-                                                                        'prevalidation_requests.buttons.resubmit',
-                                                                    )}
-                                                                </div>
-                                                                <div
-                                                                    className="dropdown-item"
-                                                                    data-dusk={`btnPrevalidationRequestDelete${row.id}`}
-                                                                    onClick={() => {
-                                                                        deleteRequest(row);
-                                                                        close();
-                                                                    }}>
-                                                                    <em className="mdi mdi-close icon-start" />{' '}
-                                                                    {translate('prevalidation_requests.buttons.delete')}
-                                                                </div>
-                                                            </div>
-                                                        )}
-                                                    />
-                                                ) : (
-                                                    <TableEmptyValue />
-                                                )}
-                                            </td>
-                                        </tr>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
+                emptyDescription={translate('prevalidation_requests.empty.description')}
+                columns={prevalidationRequestService.getColumns()}
+                paginator={{ key: paginatorKey, data: prevalidationRequests, filterValues, filterUpdate }}>
+                {prevalidationRequests?.data?.map((row) => (
+                    <tr key={row.id} data-dusk={`tablePrevalidationRequestRow${row.id}`}>
+                        <td className="text-primary text-strong">{row.bsn}</td>
+
+                        <td>
+                            <div className="text-primary text-semibold">
+                                {row.fund ? strLimit(row.fund?.name, 32) : <TableEmptyValue />}
+                            </div>
 
-                {prevalidationRequests?.meta.total > 0 && (
-                    <div className="card-section">
-                        <Paginator
-                            meta={prevalidationRequests.meta}
-                            filters={filterValues}
-                            updateFilters={filterUpdate}
-                            perPageKey={paginatorKey}
-                        />
-                    </div>
-                )}
+                            <div className="text-strong text-md text-muted-dark">
+                                {row.fund ? strLimit(row.fund?.implementation?.name, 32) : <TableEmptyValue />}
+                            </div>
+                        </td>
+                        <td className="text-primary text-strong">{row.employee?.email || 'Onbekend'}</td>
+                        <td>
+                            <PrevalidationRequestStateLabels request={row} />
+                        </td>
+                        <td>
+                            {row.state === 'fail' && row.failed_reason ? row.failed_reason_locale : <TableEmptyValue />}
+                        </td>
+
+                        <td className={'table-td-actions text-right'}>
+                            {row.state === 'fail' ? (
+                                <TableRowActions
+                                    dataDusk={'btnPrevalidationRequestMenu'}
+                                    content={({ close }) => (
+                                        <div className="dropdown dropdown-actions">
+                                            <div
+                                                className="dropdown-item"
+                                                data-dusk={`btnPrevalidationRequestResubmit${row.id}`}
+                                                onClick={() => {
+                                                    resubmitRequest(row);
+                                                    close();
+                                                }}>
+                                                <em className="mdi mdi-restart icon-start" />{' '}
+                                                {translate('prevalidation_requests.buttons.resubmit')}
+                                            </div>
+                                            <div
+                                                className="dropdown-item"
+                                                data-dusk={`btnPrevalidationRequestDelete${row.id}`}
+                                                onClick={() => {
+                                                    deleteRequest(row);
+                                                    close();
+                                                }}>
+                                                <em className="mdi mdi-close icon-start" />{' '}
+                                                {translate('prevalidation_requests.buttons.delete')}
+                                            </div>
+                                        </div>
+                                    )}
+                                />
+                            ) : (
+                                <TableEmptyValue />
+                            )}
+                        </td>
+                    </tr>
+                ))}
             </LoaderTableCard>
         </div>
     );
diff --git a/react/src/dashboard/components/pages/physical-cards/elements/PhysicalCardTypeFundsTable.tsx b/react/src/dashboard/components/pages/physical-cards/elements/PhysicalCardTypeFundsTable.tsx
index f249f0d44..824602c7a 100644
--- a/react/src/dashboard/components/pages/physical-cards/elements/PhysicalCardTypeFundsTable.tsx
+++ b/react/src/dashboard/components/pages/physical-cards/elements/PhysicalCardTypeFundsTable.tsx
@@ -1,11 +1,8 @@
 import { PaginationData } from '../../../../props/ApiResponses';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
-import Paginator from '../../../../modules/paginator/components/Paginator';
 import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
-import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
 import usePaginatorService from '../../../../modules/paginator/services/usePaginatorService';
 import useTranslate from '../../../../hooks/useTranslate';
 import useSetProgress from '../../../../hooks/useSetProgress';
@@ -65,10 +62,6 @@ export default function PhysicalCardTypeFundsTable({ physicalCardType }: { physi
         physical_card_type_id: physicalCardType?.id,
     });
 
-    const { headElement, configsElement } = useConfigurableTable(
-        fundService.getColumns(activeOrganization, filterActiveValues?.funds_type),
-    );
-
     const fetchFunds = useCallback(() => {
         setProgress(0);
 
@@ -99,7 +92,7 @@ export default function PhysicalCardTypeFundsTable({ physicalCardType }: { physi
         <div className="card">
             <div className="card-header">
                 <div className="card-title flex flex-grow" data-dusk="fundsTitle">
-                    {translate('components.organization_funds.title')} ({funds.meta.total})
+                    {translate('components.organization_funds.title')} ({funds?.meta?.total})
                 </div>
 
                 <div className="card-header-filters">
@@ -187,87 +180,62 @@ export default function PhysicalCardTypeFundsTable({ physicalCardType }: { physi
                 loading={!funds?.meta}
                 empty={funds?.meta?.total === 0}
                 emptyTitle={'Geen fondsen'}
-                emptyDescription={'Geen fondsen gevonden.'}>
-                <div className="card-section">
-                    <div className="card-block card-block-table">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {funds.data.map((fund) => (
+                emptyDescription={'Geen fondsen gevonden.'}
+                columns={fundService.getColumns(activeOrganization, filterActiveValues?.funds_type)}
+                paginator={{ key: paginatorKey, data: funds, filterValues, filterUpdate }}>
+                {funds?.data?.map((fund) => (
+                    <StateNavLink
+                        key={fund.id}
+                        name={DashboardRoutes.FUND}
+                        params={{ organizationId: activeOrganization.id, fundId: fund.id }}
+                        customElement={'tr'}
+                        className={'tr-clickable'}>
+                        <td>
+                            <TableEntityMain
+                                title={strLimit(fund.name, 50)}
+                                subtitle={fund.organization?.name}
+                                mediaPlaceholder={'fund'}
+                                media={fund?.logo}
+                            />
+                        </td>
+
+                        <td className="text-strong text-muted-dark">
+                            {fund?.implementation?.name || <TableEmptyValue />}
+                        </td>
+
+                        {filterActiveValues?.funds_type == 'active' && (
+                            <Fragment>
+                                {hasPermission(activeOrganization, Permission.VIEW_FINANCES) && (
+                                    <td>{fund.budget?.left_locale}</td>
+                                )}
+
+                                <td className="text-strong text-muted-dark">{fund.requester_count}</td>
+                            </Fragment>
+                        )}
+
+                        <td>
+                            <FundStateLabels fund={fund} />
+                        </td>
+
+                        <td className={'table-td-actions text-right'}>
+                            <TableRowActions
+                                content={() => (
+                                    <div className="dropdown dropdown-actions">
                                         <StateNavLink
-                                            key={fund.id}
                                             name={DashboardRoutes.FUND}
-                                            params={{ organizationId: activeOrganization.id, fundId: fund.id }}
-                                            customElement={'tr'}
-                                            className={'tr-clickable'}>
-                                            <td>
-                                                <TableEntityMain
-                                                    title={strLimit(fund.name, 50)}
-                                                    subtitle={fund.organization?.name}
-                                                    mediaPlaceholder={'fund'}
-                                                    media={fund?.logo}
-                                                />
-                                            </td>
-
-                                            <td className="text-strong text-muted-dark">
-                                                {fund?.implementation?.name || <TableEmptyValue />}
-                                            </td>
-
-                                            {filterActiveValues?.funds_type == 'active' && (
-                                                <Fragment>
-                                                    {hasPermission(activeOrganization, Permission.VIEW_FINANCES) && (
-                                                        <td>{fund.budget?.left_locale}</td>
-                                                    )}
-
-                                                    <td className="text-strong text-muted-dark">
-                                                        {fund.requester_count}
-                                                    </td>
-                                                </Fragment>
-                                            )}
-
-                                            <td>
-                                                <FundStateLabels fund={fund} />
-                                            </td>
-
-                                            <td className={'table-td-actions text-right'}>
-                                                <TableRowActions
-                                                    content={() => (
-                                                        <div className="dropdown dropdown-actions">
-                                                            <StateNavLink
-                                                                name={DashboardRoutes.FUND}
-                                                                params={{
-                                                                    organizationId: activeOrganization.id,
-                                                                    fundId: fund.id,
-                                                                }}
-                                                                className="dropdown-item">
-                                                                <em className="mdi mdi-eye icon-start" /> Bekijken
-                                                            </StateNavLink>
-                                                        </div>
-                                                    )}
-                                                />
-                                            </td>
+                                            params={{
+                                                organizationId: activeOrganization.id,
+                                                fundId: fund.id,
+                                            }}
+                                            className="dropdown-item">
+                                            <em className="mdi mdi-eye icon-start" /> Bekijken
                                         </StateNavLink>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
-
-                {funds?.meta.total > 0 && (
-                    <div className="card-section">
-                        <Paginator
-                            meta={funds.meta}
-                            filters={filterValues}
-                            updateFilters={filterUpdate}
-                            perPageKey={paginatorKey}
-                        />
-                    </div>
-                )}
+                                    </div>
+                                )}
+                            />
+                        </td>
+                    </StateNavLink>
+                ))}
             </LoaderTableCard>
         </div>
     );
diff --git a/react/src/dashboard/components/pages/physical-cards/elements/PhysicalCardTypesTable.tsx b/react/src/dashboard/components/pages/physical-cards/elements/PhysicalCardTypesTable.tsx
index 63c634fbb..c599d470b 100644
--- a/react/src/dashboard/components/pages/physical-cards/elements/PhysicalCardTypesTable.tsx
+++ b/react/src/dashboard/components/pages/physical-cards/elements/PhysicalCardTypesTable.tsx
@@ -1,12 +1,9 @@
 import { PaginationData } from '../../../../props/ApiResponses';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
 import TableRowActions from '../../../elements/tables/TableRowActions';
-import Paginator from '../../../../modules/paginator/components/Paginator';
 import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
 import React, { useCallback, useEffect, useState } from 'react';
-import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
 import usePaginatorService from '../../../../modules/paginator/services/usePaginatorService';
 import Organization from '../../../../props/models/Organization';
 import useTranslate from '../../../../hooks/useTranslate';
@@ -66,11 +63,6 @@ export default function PhysicalCardTypesTable({
         { queryParams: filterUseQueryParams ? { q: StringParam, fund_id: StringParam, per_page: StringParam } : null },
     );
 
-    const { headElement, configsElement } = useConfigurableTable(physicalCardTypeService.getColumns(), {
-        sortable: true,
-        filter: filter,
-    });
-
     const fetchPhysicalCardTypes = useCallback(() => {
         setProgress(0);
 
@@ -134,112 +126,82 @@ export default function PhysicalCardTypesTable({
                 loading={!physicalCardTypes?.meta}
                 empty={physicalCardTypes?.meta?.total === 0}
                 emptyTitle={'Geen fysieke passen'}
-                emptyDescription={'Er zijn momenteel geen fysieke passen.'}>
-                <div className="card-section">
-                    <div className="card-block card-block-table">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {physicalCardTypes?.data.map((cardType) => (
-                                        <StateNavLink
-                                            key={cardType.id}
-                                            name={DashboardRoutes.PHYSICAL_CARD_TYPE}
-                                            params={{
-                                                id: cardType.id,
-                                                organizationId: organization.id,
-                                            }}
-                                            customElement={'tr'}
-                                            className={'tr-clickable'}>
-                                            <td title={cardType.name}>
-                                                <TableEntityMain
-                                                    title={strLimit(cardType.name, 64)}
-                                                    subtitle={strLimit(cardType.description || 'Geen omschrijving', 64)}
-                                                    media={cardType.photo}
-                                                    mediaRound={false}
-                                                    mediaSize={'md'}
-                                                    mediaPlaceholder={'physical_card_type'}
-                                                />
-                                            </td>
-                                            <td>{cardType?.physical_cards_count}</td>
-                                            <td>{cardType?.funds_count}</td>
-                                            <td>{cardType?.code_blocks || <TableEmptyValue />}</td>
-                                            <td>{cardType?.code_block_size || <TableEmptyValue />}</td>
-                                            <td className={'table-td-actions text-right'}>
-                                                {filter.values.source != 'archive' ? (
-                                                    <TableRowActions
-                                                        content={(e) => (
-                                                            <div className="dropdown dropdown-actions">
-                                                                <StateNavLink
-                                                                    name={DashboardRoutes.PHYSICAL_CARD_TYPE}
-                                                                    params={{
-                                                                        id: cardType.id,
-                                                                        organizationId: organization.id,
-                                                                    }}
-                                                                    className="dropdown-item">
-                                                                    <div className="mdi mdi-eye-outline icon-start" />
-                                                                    Bekijk
-                                                                </StateNavLink>
-
-                                                                <div
-                                                                    onClick={() => {
-                                                                        e?.close();
-                                                                        editPhysicalCardType(
-                                                                            organization,
-                                                                            cardType,
-                                                                            fetchPhysicalCardTypes,
-                                                                        );
-                                                                    }}
-                                                                    className="dropdown-item">
-                                                                    <div className="mdi mdi-pencil-outline icon-start" />
-                                                                    Bewerking
-                                                                </div>
-
-                                                                <div
-                                                                    className={classNames(
-                                                                        'dropdown-item',
-                                                                        cardType.in_use && 'disabled',
-                                                                    )}
-                                                                    onClick={() => {
-                                                                        e?.close();
-                                                                        deletePhysicalCardType(
-                                                                            cardType,
-                                                                            fetchPhysicalCardTypes,
-                                                                        );
-                                                                    }}>
-                                                                    <em className="mdi mdi-close icon-start icon-start" />
-                                                                    Verwijderen
-                                                                </div>
-                                                            </div>
-                                                        )}
-                                                    />
-                                                ) : (
-                                                    <span className={'text-muted'}>
-                                                        {translate('organization_employees.labels.owner')}
-                                                    </span>
-                                                )}
-                                            </td>
-                                        </StateNavLink>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
-
-                {physicalCardTypes?.meta.total > 0 && (
-                    <div className="card-section">
-                        <Paginator
-                            meta={physicalCardTypes.meta}
-                            filters={filter.values}
-                            updateFilters={filter.update}
-                            perPageKey={paginatorKey}
-                        />
-                    </div>
-                )}
+                emptyDescription={'Er zijn momenteel geen fysieke passen.'}
+                columns={physicalCardTypeService.getColumns()}
+                tableOptions={{ sortable: true, filter }}
+                paginator={{ key: paginatorKey, data: physicalCardTypes, filterValues, filterUpdate }}>
+                {physicalCardTypes?.data?.map((cardType) => (
+                    <StateNavLink
+                        key={cardType.id}
+                        name={DashboardRoutes.PHYSICAL_CARD_TYPE}
+                        params={{
+                            id: cardType.id,
+                            organizationId: organization.id,
+                        }}
+                        customElement={'tr'}
+                        className={'tr-clickable'}>
+                        <td title={cardType.name}>
+                            <TableEntityMain
+                                title={strLimit(cardType.name, 64)}
+                                subtitle={strLimit(cardType.description || 'Geen omschrijving', 64)}
+                                media={cardType.photo}
+                                mediaRound={false}
+                                mediaSize={'md'}
+                                mediaPlaceholder={'physical_card_type'}
+                            />
+                        </td>
+                        <td>{cardType?.physical_cards_count}</td>
+                        <td>{cardType?.funds_count}</td>
+                        <td>{cardType?.code_blocks || <TableEmptyValue />}</td>
+                        <td>{cardType?.code_block_size || <TableEmptyValue />}</td>
+                        <td className={'table-td-actions text-right'}>
+                            {filter.values.source != 'archive' ? (
+                                <TableRowActions
+                                    content={(e) => (
+                                        <div className="dropdown dropdown-actions">
+                                            <StateNavLink
+                                                name={DashboardRoutes.PHYSICAL_CARD_TYPE}
+                                                params={{
+                                                    id: cardType.id,
+                                                    organizationId: organization.id,
+                                                }}
+                                                className="dropdown-item">
+                                                <div className="mdi mdi-eye-outline icon-start" />
+                                                Bekijk
+                                            </StateNavLink>
+
+                                            <div
+                                                onClick={() => {
+                                                    e?.close();
+                                                    editPhysicalCardType(
+                                                        organization,
+                                                        cardType,
+                                                        fetchPhysicalCardTypes,
+                                                    );
+                                                }}
+                                                className="dropdown-item">
+                                                <div className="mdi mdi-pencil-outline icon-start" />
+                                                Bewerking
+                                            </div>
+
+                                            <div
+                                                className={classNames('dropdown-item', cardType.in_use && 'disabled')}
+                                                onClick={() => {
+                                                    e?.close();
+                                                    deletePhysicalCardType(cardType, fetchPhysicalCardTypes);
+                                                }}>
+                                                <em className="mdi mdi-close icon-start icon-start" />
+                                                Verwijderen
+                                            </div>
+                                        </div>
+                                    )}
+                                />
+                            ) : (
+                                <span className={'text-muted'}>{translate('organization_employees.labels.owner')}</span>
+                            )}
+                        </td>
+                    </StateNavLink>
+                ))}
             </LoaderTableCard>
         </div>
     );
diff --git a/react/src/dashboard/components/pages/physical-cards/elements/PhysicalCardsTable.tsx b/react/src/dashboard/components/pages/physical-cards/elements/PhysicalCardsTable.tsx
index d5f146bda..b7e55e172 100644
--- a/react/src/dashboard/components/pages/physical-cards/elements/PhysicalCardsTable.tsx
+++ b/react/src/dashboard/components/pages/physical-cards/elements/PhysicalCardsTable.tsx
@@ -1,12 +1,9 @@
 import { PaginationData } from '../../../../props/ApiResponses';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
 import TableRowActions from '../../../elements/tables/TableRowActions';
-import Paginator from '../../../../modules/paginator/components/Paginator';
 import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
 import React, { useCallback, useEffect, useState } from 'react';
-import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
 import { usePhysicalCardService } from '../../../../services/PhysicalCardService';
 import usePaginatorService from '../../../../modules/paginator/services/usePaginatorService';
 import Organization from '../../../../props/models/Organization';
@@ -72,11 +69,6 @@ export default function PhysicalCardsTable({
         },
     );
 
-    const { headElement, configsElement } = useConfigurableTable(physicalCardService.getColumns(), {
-        sortable: true,
-        filter: filter,
-    });
-
     const fetchPhysicalCards = useCallback(() => {
         setProgress(0);
 
@@ -131,122 +123,98 @@ export default function PhysicalCardsTable({
                 loading={!physicalCards?.meta}
                 empty={physicalCards?.meta?.total === 0}
                 emptyTitle={'Geen fysieke passen'}
-                emptyDescription={'Er zijn momenteel geen fysieke passen.'}>
-                <div className="card-section">
-                    <div className="card-block card-block-table">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {physicalCards?.data.map((card) => (
-                                        <tr key={card.id}>
-                                            <td className={'td-narrow'}>{card.id}</td>
-                                            <td className={'text-strong'}>
-                                                <BlockInlineCopy value={card.code}>{card.code_locale}</BlockInlineCopy>
-                                            </td>
-                                            <td>
-                                                {card?.voucher ? (
-                                                    <StateNavLink
-                                                        className={'text-primary text-underline text-semibold'}
-                                                        name={DashboardRoutes.VOUCHER}
-                                                        params={{
-                                                            id: card?.voucher.id,
-                                                            organizationId: organization.id,
-                                                        }}>{`#${card?.voucher?.number}`}</StateNavLink>
-                                                ) : (
-                                                    <TableEmptyValue />
-                                                )}
-                                            </td>
-                                            <td>
-                                                {card?.voucher?.fund ? (
-                                                    <StateNavLink
-                                                        className={'text-primary text-underline text-semibold'}
-                                                        name={DashboardRoutes.VOUCHER}
-                                                        params={{
-                                                            id: card?.voucher.id,
-                                                            organizationId: organization.id,
-                                                        }}>
-                                                        {strLimit(card?.voucher?.fund.name, 64)}
-                                                    </StateNavLink>
-                                                ) : (
-                                                    <TableEmptyValue />
-                                                )}
-                                            </td>
-                                            <td>
-                                                {card?.physical_card_type ? (
-                                                    <StateNavLink
-                                                        className={'text-primary text-underline text-semibold'}
-                                                        name={DashboardRoutes.PHYSICAL_CARD_TYPE}
-                                                        params={{
-                                                            id: card?.physical_card_type.id,
-                                                            organizationId: organization.id,
-                                                        }}>
-                                                        {strLimit(card?.physical_card_type?.name, 53)}
-                                                    </StateNavLink>
-                                                ) : (
-                                                    <TableEmptyValue />
-                                                )}
-                                            </td>
-                                            <td className={'table-td-actions text-right'}>
-                                                {filterValues.source != 'archive' ? (
-                                                    <TableRowActions
-                                                        content={() => (
-                                                            <div className="dropdown dropdown-actions">
-                                                                {card?.voucher && (
-                                                                    <StateNavLink
-                                                                        name={DashboardRoutes.VOUCHER}
-                                                                        params={{
-                                                                            id: card?.voucher.id,
-                                                                            organizationId: organization.id,
-                                                                        }}
-                                                                        className="dropdown-item">
-                                                                        <div className="mdi mdi-eye-outline icon-start" />
-                                                                        Bekijk tegoeden
-                                                                    </StateNavLink>
-                                                                )}
-
-                                                                {card.physical_card_type && (
-                                                                    <StateNavLink
-                                                                        name={DashboardRoutes.PHYSICAL_CARD_TYPE}
-                                                                        params={{
-                                                                            id: card.physical_card_type?.id,
-                                                                            organizationId: organization.id,
-                                                                        }}
-                                                                        className="dropdown-item">
-                                                                        <div className="mdi mdi-eye-outline icon-start" />
-                                                                        Bekijk passen type
-                                                                    </StateNavLink>
-                                                                )}
-                                                            </div>
-                                                        )}
-                                                    />
-                                                ) : (
-                                                    <span className={'text-muted'}>
-                                                        {translate('organization_employees.labels.owner')}
-                                                    </span>
-                                                )}
-                                            </td>
-                                        </tr>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
-
-                {physicalCards?.meta.total > 0 && (
-                    <div className="card-section">
-                        <Paginator
-                            meta={physicalCards.meta}
-                            filters={filterValues}
-                            updateFilters={filterUpdate}
-                            perPageKey={paginatorKey}
-                        />
-                    </div>
-                )}
+                emptyDescription={'Er zijn momenteel geen fysieke passen.'}
+                columns={physicalCardService.getColumns()}
+                tableOptions={{ sortable: true, filter }}
+                paginator={{ key: paginatorKey, data: physicalCards, filterValues, filterUpdate }}>
+                {physicalCards?.data?.map((card) => (
+                    <tr key={card.id}>
+                        <td className={'td-narrow'}>{card.id}</td>
+                        <td className={'text-strong'}>
+                            <BlockInlineCopy value={card.code}>{card.code_locale}</BlockInlineCopy>
+                        </td>
+                        <td>
+                            {card?.voucher ? (
+                                <StateNavLink
+                                    className={'text-primary text-underline text-semibold'}
+                                    name={DashboardRoutes.VOUCHER}
+                                    params={{
+                                        id: card?.voucher.id,
+                                        organizationId: organization.id,
+                                    }}>{`#${card?.voucher?.number}`}</StateNavLink>
+                            ) : (
+                                <TableEmptyValue />
+                            )}
+                        </td>
+                        <td>
+                            {card?.voucher?.fund ? (
+                                <StateNavLink
+                                    className={'text-primary text-underline text-semibold'}
+                                    name={DashboardRoutes.VOUCHER}
+                                    params={{
+                                        id: card?.voucher.id,
+                                        organizationId: organization.id,
+                                    }}>
+                                    {strLimit(card?.voucher?.fund.name, 64)}
+                                </StateNavLink>
+                            ) : (
+                                <TableEmptyValue />
+                            )}
+                        </td>
+                        <td>
+                            {card?.physical_card_type ? (
+                                <StateNavLink
+                                    className={'text-primary text-underline text-semibold'}
+                                    name={DashboardRoutes.PHYSICAL_CARD_TYPE}
+                                    params={{
+                                        id: card?.physical_card_type.id,
+                                        organizationId: organization.id,
+                                    }}>
+                                    {strLimit(card?.physical_card_type?.name, 53)}
+                                </StateNavLink>
+                            ) : (
+                                <TableEmptyValue />
+                            )}
+                        </td>
+                        <td className={'table-td-actions text-right'}>
+                            {filterValues.source != 'archive' ? (
+                                <TableRowActions
+                                    content={() => (
+                                        <div className="dropdown dropdown-actions">
+                                            {card?.voucher && (
+                                                <StateNavLink
+                                                    name={DashboardRoutes.VOUCHER}
+                                                    params={{
+                                                        id: card?.voucher.id,
+                                                        organizationId: organization.id,
+                                                    }}
+                                                    className="dropdown-item">
+                                                    <div className="mdi mdi-eye-outline icon-start" />
+                                                    Bekijk tegoeden
+                                                </StateNavLink>
+                                            )}
+
+                                            {card.physical_card_type && (
+                                                <StateNavLink
+                                                    name={DashboardRoutes.PHYSICAL_CARD_TYPE}
+                                                    params={{
+                                                        id: card.physical_card_type?.id,
+                                                        organizationId: organization.id,
+                                                    }}
+                                                    className="dropdown-item">
+                                                    <div className="mdi mdi-eye-outline icon-start" />
+                                                    Bekijk passen type
+                                                </StateNavLink>
+                                            )}
+                                        </div>
+                                    )}
+                                />
+                            ) : (
+                                <span className={'text-muted'}>{translate('organization_employees.labels.owner')}</span>
+                            )}
+                        </td>
+                    </tr>
+                ))}
             </LoaderTableCard>
         </div>
     );
diff --git a/react/src/dashboard/components/pages/prevalidations/Prevalidations.tsx b/react/src/dashboard/components/pages/prevalidations/Prevalidations.tsx
index 8f279e0d9..6500160a4 100644
--- a/react/src/dashboard/components/pages/prevalidations/Prevalidations.tsx
+++ b/react/src/dashboard/components/pages/prevalidations/Prevalidations.tsx
@@ -18,7 +18,6 @@ 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';
@@ -28,11 +27,9 @@ 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';
@@ -150,10 +147,6 @@ export default function Prevalidations() {
         }));
     }, [headers, prevalidations?.data]);
 
-    const { headElement, configsElement } = useConfigurableTable(
-        prevalidationService.getColumns(headers || [], typesByKey),
-    );
-
     const exportData = useCallback(() => {
         prevalidationExporter.exportData(activeOrganization.id, { ...filterValuesActive, ...filter.activeValues });
     }, [activeOrganization.id, filterValuesActive, filter.activeValues, prevalidationExporter]);
@@ -410,10 +403,10 @@ export default function Prevalidations() {
                                                     className="button button-primary button-wide"
                                                     onClick={() => exportData()}
                                                     data-dusk="export"
-                                                    disabled={prevalidations?.meta.total == 0}>
+                                                    disabled={prevalidations?.meta?.total == 0}>
                                                     <em className="mdi mdi-download icon-start" />
                                                     {translate('components.dropdown.export', {
-                                                        total: prevalidations.meta.total,
+                                                        total: prevalidations?.meta?.total,
                                                     })}
                                                 </button>
                                             </div>
@@ -435,98 +428,69 @@ export default function Prevalidations() {
 
             <LoaderTableCard
                 loading={!prevalidations.meta}
-                empty={prevalidations.meta.total == 0}
+                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}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {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">
-                                                    {row.fund ? strLimit(row.fund?.name, 32) : <TableEmptyValue />}
-                                                </div>
-
-                                                <div className="text-strong text-md text-muted-dark">
-                                                    {row.fund ? (
-                                                        strLimit(row.fund?.implementation?.name, 32)
-                                                    ) : (
-                                                        <TableEmptyValue />
-                                                    )}
-                                                </div>
-                                            </td>
-                                            <td className="text-primary text-strong">
-                                                {employeesByAddress?.[row?.identity_address] || 'Unknown'}
-                                            </td>
-
-                                            {row.records?.map((record, index) => (
-                                                <td key={index} className={'text-left'}>
-                                                    {record ? record.value : <TableEmptyValue />}
-                                                </td>
-                                            ))}
-
-                                            <td>
-                                                <Label type={row.state == 'pending' ? 'default' : 'success'}>
-                                                    {row.state == 'pending' ? 'Nee' : 'Ja'}
-                                                </Label>
-                                            </td>
-
-                                            <td>
-                                                <Label type={!row.exported ? 'default' : 'success'}>
-                                                    {!row.exported ? 'Nee' : 'Ja'}
-                                                </Label>
-                                            </td>
-
-                                            <td className={'table-td-actions text-right'}>
-                                                {row.state === 'pending' ? (
-                                                    <TableRowActions
-                                                        content={(e) => (
-                                                            <div className="dropdown dropdown-actions">
-                                                                <a
-                                                                    className="dropdown-item"
-                                                                    onClick={() => {
-                                                                        deletePrevalidation(row);
-                                                                        e.close();
-                                                                    }}>
-                                                                    <em className="mdi mdi-close icon-start icon-start" />
-                                                                    Verwijderen
-                                                                </a>
-                                                            </div>
-                                                        )}
-                                                    />
-                                                ) : (
-                                                    <TableEmptyValue />
-                                                )}
-                                            </td>
-                                        </tr>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
+                }
+                columns={prevalidationService.getColumns(headers || [], typesByKey)}
+                paginator={{ key: paginatorKey, data: prevalidations, filterValues, filterUpdate }}>
+                {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">
+                                {row.fund ? strLimit(row.fund?.name, 32) : <TableEmptyValue />}
+                            </div>
 
-                {prevalidations?.meta.total > 0 && (
-                    <div className="card-section">
-                        <Paginator
-                            meta={prevalidations.meta}
-                            filters={filterValues}
-                            updateFilters={filterUpdate}
-                            perPageKey={paginatorKey}
-                        />
-                    </div>
-                )}
+                            <div className="text-strong text-md text-muted-dark">
+                                {row.fund ? strLimit(row.fund?.implementation?.name, 32) : <TableEmptyValue />}
+                            </div>
+                        </td>
+                        <td className="text-primary text-strong">
+                            {employeesByAddress?.[row?.identity_address] || 'Unknown'}
+                        </td>
+
+                        {row.records?.map((record, index) => (
+                            <td key={index} className={'text-left'}>
+                                {record ? record.value : <TableEmptyValue />}
+                            </td>
+                        ))}
+
+                        <td>
+                            <Label type={row.state == 'pending' ? 'default' : 'success'}>
+                                {row.state == 'pending' ? 'Nee' : 'Ja'}
+                            </Label>
+                        </td>
+
+                        <td>
+                            <Label type={!row.exported ? 'default' : 'success'}>{!row.exported ? 'Nee' : 'Ja'}</Label>
+                        </td>
+
+                        <td className={'table-td-actions text-right'}>
+                            {row.state === 'pending' ? (
+                                <TableRowActions
+                                    content={(e) => (
+                                        <div className="dropdown dropdown-actions">
+                                            <a
+                                                className="dropdown-item"
+                                                onClick={() => {
+                                                    deletePrevalidation(row);
+                                                    e.close();
+                                                }}>
+                                                <em className="mdi mdi-close icon-start icon-start" />
+                                                Verwijderen
+                                            </a>
+                                        </div>
+                                    )}
+                                />
+                            ) : (
+                                <TableEmptyValue />
+                            )}
+                        </td>
+                    </tr>
+                ))}
             </LoaderTableCard>
         </div>
     );
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 18465da32..ed312340c 100644
--- a/react/src/dashboard/components/pages/products-edit/elements/ProductsForm.tsx
+++ b/react/src/dashboard/components/pages/products-edit/elements/ProductsForm.tsx
@@ -637,6 +637,40 @@ export default function ProductsForm({
                             />
                         </FormPane>
 
+                        <FormPane title={'Aanvullende informatie'}>
+                            <FormGroupInput
+                                label={translate('product_edit.labels.info_duration')}
+                                error={form.errors.info_duration}
+                                value={form.values.info_duration || ''}
+                                setValue={(info_duration: string) => form.update({ info_duration })}
+                            />
+                            <FormGroupInput
+                                label={translate('product_edit.labels.info_when')}
+                                error={form.errors.info_when}
+                                value={form.values.info_when || ''}
+                                setValue={(info_when: string) => form.update({ info_when })}
+                            />
+                            <FormGroupInput
+                                label={translate('product_edit.labels.info_where')}
+                                error={form.errors.info_where}
+                                value={form.values.info_where || ''}
+                                setValue={(info_where: string) => form.update({ info_where })}
+                            />
+                            <FormGroupInput
+                                label={translate('product_edit.labels.info_more_info')}
+                                error={form.errors.info_more_info}
+                                value={form.values.info_more_info || ''}
+                                setValue={(info_more_info: string) => form.update({ info_more_info })}
+                            />
+
+                            <FormGroupInput
+                                label={translate('product_edit.labels.info_attention')}
+                                error={form.errors.info_attention}
+                                value={form.values.info_attention || ''}
+                                setValue={(info_attention: string) => form.update({ info_attention })}
+                            />
+                        </FormPane>
+
                         <FormPane title={'Prijs en type'}>
                             <div className="row">
                                 <div className="col col-xs-12 col-sm-6">
@@ -795,153 +829,157 @@ export default function ProductsForm({
                                     )}
                                 </div>
                             </div>
-                        </FormPane>
-
-                        {!isInformational && (
-                            <FormPane title={'Voorraad'}>
-                                {(!product || (product && !product.unlimited_stock)) && (
-                                    <div className="row">
-                                        <div className="col col-xs-12 col-sm-6">
-                                            <FormGroup
-                                                label={'Voorraad'}
-                                                required={true}
-                                                info={
-                                                    <Fragment>
-                                                        Kies of het product een voorraadlimiet heeft of altijd
-                                                        beschikbaar is.
-                                                    </Fragment>
-                                                }
-                                                input={(id) => (
-                                                    <SelectControl
-                                                        id={id}
-                                                        propKey={'value'}
-                                                        propValue={'label'}
-                                                        disabled={!isEditable || (product && !product.unlimited_stock)}
-                                                        value={form.values.unlimited_stock}
-                                                        options={[
-                                                            { value: false, label: 'Aantal op voorraad' },
-                                                            { value: true, label: 'Onbeperkt aanbod' },
-                                                        ]}
-                                                        onChange={(unlimited_stock: boolean) => {
-                                                            form.update({ unlimited_stock });
-                                                        }}
-                                                    />
-                                                )}
-                                            />
-                                        </div>
 
-                                        <div className="col col-xs-12 col-sm-6">
-                                            <FormGroup
-                                                label={translate('product_edit.labels.total')}
-                                                required={true}
-                                                info={
-                                                    <Fragment>
-                                                        Kies of het product een voorraadlimiet heeft of altijd
-                                                        beschikbaar is.
-                                                    </Fragment>
-                                                }
-                                                error={form.errors.total_amount}
-                                                input={(id) =>
-                                                    !form.values.unlimited_stock ? (
-                                                        <input
+                            {!isInformational && (
+                                <Fragment>
+                                    {(!product || (product && !product.unlimited_stock)) && (
+                                        <div className="row">
+                                            <div className="col col-xs-12 col-sm-6">
+                                                <FormGroup
+                                                    label={'Voorraad'}
+                                                    required={true}
+                                                    info={
+                                                        <Fragment>
+                                                            Kies of het product een voorraadlimiet heeft of altijd
+                                                            beschikbaar is.
+                                                        </Fragment>
+                                                    }
+                                                    input={(id) => (
+                                                        <SelectControl
                                                             id={id}
-                                                            className="form-control"
+                                                            propKey={'value'}
+                                                            propValue={'label'}
                                                             disabled={
-                                                                !isEditable || !!product || form.values.unlimited_stock
+                                                                !isEditable || (product && !product.unlimited_stock)
                                                             }
-                                                            value={form.values.total_amount}
-                                                            onChange={(e) => {
-                                                                form.update({
-                                                                    total_amount: e.target.value
-                                                                        ? parseFloat(e.target.value)
-                                                                        : '',
-                                                                });
+                                                            value={form.values.unlimited_stock}
+                                                            options={[
+                                                                { value: false, label: 'Aantal op voorraad' },
+                                                                { value: true, label: 'Onbeperkt aanbod' },
+                                                            ]}
+                                                            onChange={(unlimited_stock: boolean) => {
+                                                                form.update({ unlimited_stock });
                                                             }}
-                                                            type="number"
-                                                            placeholder="Aantal in voorraad"
                                                         />
-                                                    ) : (
-                                                        <input
-                                                            id={id}
-                                                            className="form-control"
-                                                            value={translate('product_edit.labels.stock_unlimited')}
-                                                            disabled={true}
-                                                        />
-                                                    )
-                                                }
-                                            />
+                                                    )}
+                                                />
+                                            </div>
+
+                                            <div className="col col-xs-12 col-sm-6">
+                                                <FormGroup
+                                                    label={translate('product_edit.labels.total')}
+                                                    required={true}
+                                                    info={
+                                                        <Fragment>
+                                                            Kies of het product een voorraadlimiet heeft of altijd
+                                                            beschikbaar is.
+                                                        </Fragment>
+                                                    }
+                                                    error={form.errors.total_amount}
+                                                    input={(id) =>
+                                                        !form.values.unlimited_stock ? (
+                                                            <input
+                                                                id={id}
+                                                                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"
+                                                            />
+                                                        ) : (
+                                                            <input
+                                                                id={id}
+                                                                className="form-control"
+                                                                value={translate('product_edit.labels.stock_unlimited')}
+                                                                disabled={true}
+                                                            />
+                                                        )
+                                                    }
+                                                />
+                                            </div>
                                         </div>
-                                    </div>
-                                )}
+                                    )}
 
-                                {product && (
-                                    <div className="row">
-                                        <div className="col col-xs-12 col-sm-6">
-                                            <FormGroup
-                                                label={translate('product_edit.labels.sold')}
-                                                error={form.errors.sold_amount}
-                                                info={
-                                                    <Fragment>
-                                                        Hoe vaak dit aanbod is gekocht. Dit wordt automatisch
-                                                        bijgewerkt.
-                                                    </Fragment>
-                                                }
-                                                input={(id) => (
-                                                    <input
-                                                        id={id}
-                                                        className="form-control"
-                                                        disabled={true}
-                                                        value={form.values.sold_amount}
-                                                        onChange={(e) =>
-                                                            form.update({
-                                                                sold_amount: e.target.value
-                                                                    ? parseFloat(e.target.value)
-                                                                    : '',
-                                                            })
-                                                        }
-                                                        type="number"
-                                                        placeholder="Verkocht"
-                                                    />
-                                                )}
-                                            />
-                                        </div>
-                                        <div className="col col-xs-12 col-sm-6">
-                                            <FormGroup
-                                                label={translate('product_edit.labels.stock_amount')}
-                                                error={form.errors.stock_amount}
-                                                info={translate('tooltip.product.limit')}
-                                                input={(id) =>
-                                                    product.unlimited_stock ? (
+                                    {product && (
+                                        <div className="row">
+                                            <div className="col col-xs-12 col-sm-6">
+                                                <FormGroup
+                                                    label={translate('product_edit.labels.sold')}
+                                                    error={form.errors.sold_amount}
+                                                    info={
+                                                        <Fragment>
+                                                            Hoe vaak dit aanbod is gekocht. Dit wordt automatisch
+                                                            bijgewerkt.
+                                                        </Fragment>
+                                                    }
+                                                    input={(id) => (
                                                         <input
                                                             id={id}
                                                             className="form-control"
                                                             disabled={true}
-                                                            value={translate('product_edit.labels.stock_unlimited')}
-                                                        />
-                                                    ) : (
-                                                        <input
-                                                            id={id}
-                                                            className="form-control"
-                                                            value={form.values.stock_amount}
+                                                            value={form.values.sold_amount}
                                                             onChange={(e) =>
                                                                 form.update({
-                                                                    stock_amount: e.target.value
+                                                                    sold_amount: e.target.value
                                                                         ? parseFloat(e.target.value)
                                                                         : '',
                                                                 })
                                                             }
                                                             type="number"
-                                                            placeholder="Current stock"
-                                                            disabled={!isEditable}
+                                                            placeholder="Verkocht"
                                                         />
-                                                    )
-                                                }
-                                            />
+                                                    )}
+                                                />
+                                            </div>
+                                            <div className="col col-xs-12 col-sm-6">
+                                                <FormGroup
+                                                    label={translate('product_edit.labels.stock_amount')}
+                                                    error={form.errors.stock_amount}
+                                                    info={translate('tooltip.product.limit')}
+                                                    input={(id) =>
+                                                        product.unlimited_stock ? (
+                                                            <input
+                                                                id={id}
+                                                                className="form-control"
+                                                                disabled={true}
+                                                                value={translate('product_edit.labels.stock_unlimited')}
+                                                            />
+                                                        ) : (
+                                                            <input
+                                                                id={id}
+                                                                className="form-control"
+                                                                value={form.values.stock_amount}
+                                                                onChange={(e) =>
+                                                                    form.update({
+                                                                        stock_amount: e.target.value
+                                                                            ? parseFloat(e.target.value)
+                                                                            : '',
+                                                                    })
+                                                                }
+                                                                type="number"
+                                                                placeholder="Current stock"
+                                                                disabled={!isEditable}
+                                                            />
+                                                        )
+                                                    }
+                                                />
+                                            </div>
                                         </div>
-                                    </div>
-                                )}
-                            </FormPane>
-                        )}
+                                    )}
+                                </Fragment>
+                            )}
+                        </FormPane>
 
                         {!isInformational && (
                             <FormPane title={'Productcodes'}>
@@ -1321,42 +1359,6 @@ export default function ProductsForm({
                             onChange={(product_category_id) => form.update({ product_category_id })}
                             errors={form.errors.product_category_id}
                         />
-
-                        <FormPane title={'Aanvullende informatie'}>
-                            <FormGroupInput
-                                label={translate('product_edit.labels.info_duration')}
-                                error={form.errors.info_duration}
-                                value={form.values.info_duration || ''}
-                                setValue={(info_duration: string) => form.update({ info_duration })}
-                            />
-                            <FormGroupInput
-                                label={translate('product_edit.labels.info_when')}
-                                error={form.errors.info_when}
-                                value={form.values.info_when || ''}
-                                setValue={(info_when: string) => form.update({ info_when })}
-                            />
-                            <FormGroupInput
-                                label={translate('product_edit.labels.info_where')}
-                                error={form.errors.info_where}
-                                value={form.values.info_where || ''}
-                                setValue={(info_where: string) => form.update({ info_where })}
-                            />
-                            <FormGroupInput
-                                label={translate('product_edit.labels.info_more_info')}
-                                error={form.errors.info_more_info}
-                                value={form.values.info_more_info || ''}
-                                setValue={(info_more_info: string) => form.update({ info_more_info })}
-                            />
-
-                            <FormPane title={'Belangrijke informatie over het aanbod.'}>
-                                <FormGroupInput
-                                    label={translate('product_edit.labels.info_attention')}
-                                    error={form.errors.info_attention}
-                                    value={form.values.info_attention || ''}
-                                    setValue={(info_attention: string) => form.update({ info_attention })}
-                                />
-                            </FormPane>
-                        </FormPane>
                     </FormPaneContainer>
                 </div>
 
diff --git a/react/src/dashboard/components/pages/products-view/ProductView.tsx b/react/src/dashboard/components/pages/products-view/ProductView.tsx
index 3eb805cbb..6654d87a4 100644
--- a/react/src/dashboard/components/pages/products-view/ProductView.tsx
+++ b/react/src/dashboard/components/pages/products-view/ProductView.tsx
@@ -17,18 +17,16 @@ import LoadingCard from '../../elements/loading-card/LoadingCard';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import ProductDetailsBlock from './elements/ProductDetailsBlock';
 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';
 import TableEntityMain from '../../elements/tables/elements/TableEntityMain';
-import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
-import TableTopScroller from '../../elements/tables/TableTopScroller';
 import TableRowActions from '../../elements/tables/TableRowActions';
 import classNames from 'classnames';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
 import useFilterNext from '../../../modules/filter_next/useFilterNext';
 import { NumberParam, StringParam } from 'use-query-params';
+import LoaderTableCard from '../../elements/loader-table-card/LoaderTableCard';
 
 type ProductFundLocal = ProductFund & {
     chat?: FundProviderChat;
@@ -74,8 +72,6 @@ export default function ProductView() {
         },
     );
 
-    const { headElement, configsElement } = useConfigurableTable(productService.getFundsColumns(product));
-
     const deleteProduct = useCallback(
         (product: Product) => {
             openModal((modal) => (
@@ -121,7 +117,7 @@ export default function ProductView() {
         ): PaginationData<ProductFundLocal> => {
             return {
                 ...funds,
-                data: funds.data.map((fund) => ({
+                data: funds?.data?.map((fund) => ({
                     ...fund,
                     chat: chats.data.find((chat) => fund.id == chat.fund_id),
                 })),
@@ -250,139 +246,101 @@ export default function ProductView() {
                     </div>
                 </div>
 
-                {funds?.meta.total > 0 ? (
-                    <div className="card-section">
-                        <div className="card-block card-block-table">
-                            {configsElement}
-
-                            <TableTopScroller>
-                                <table className="table">
-                                    {headElement}
-
-                                    <tbody>
-                                        {funds?.data?.map((fund) => (
-                                            <tr key={fund.id}>
-                                                <td>
-                                                    <TableEntityMain
-                                                        title={fund.name}
-                                                        subtitle={fund.organization.name}
-                                                        media={fund.logo}
-                                                        mediaRound={false}
-                                                        mediaSize={'md'}
-                                                        mediaPlaceholder={'fund'}
-                                                    />
-                                                </td>
-                                                <td>
-                                                    {fund.approved ? (
-                                                        <Label type="success">Geaccepteerd</Label>
-                                                    ) : (
-                                                        <Label type="default">Wachtend</Label>
-                                                    )}
-                                                </td>
-                                                {!product.sponsor_organization && fundToggles && (
-                                                    <td className="form">
-                                                        <ToggleControl
-                                                            id={`fund_exclusion_id_${fund.id}`}
-                                                            checked={!fundToggles[fund.id]}
-                                                            onChange={() => {
-                                                                setFundToggles((fundToggles) => ({
-                                                                    ...fundToggles,
-                                                                    [fund.id]: !fundToggles[fund.id],
-                                                                }));
-                                                                changeFundExclusion(fund, fundToggles[fund.id]);
-                                                            }}
-                                                        />
-                                                    </td>
+                <LoaderTableCard
+                    empty={funds?.meta?.total == 0}
+                    emptyTitle={'Geen fondsen'}
+                    emptyDescription={
+                        'Uw aanbod kan nog niet op een website worden geplaatst omdat u zich eerst voor een fonds moet ' +
+                        'aanmelden. Meld u aan voor één of meerdere fondsen.'
+                    }
+                    emptyButton={{
+                        state: DashboardRoutes.PROVIDER_FUNDS,
+                        stateParams: { organizationId: activeOrganization.id },
+                        type: 'primary',
+                        icon: 'plus',
+                        text: 'Bekijk beschikbare fondsen',
+                    }}
+                    columns={productService.getFundsColumns(product)}
+                    paginator={{ key: paginatorKey, data: funds, filterValues, filterUpdate }}>
+                    {funds?.data?.map((fund) => (
+                        <tr key={fund.id}>
+                            <td>
+                                <TableEntityMain
+                                    title={fund.name}
+                                    subtitle={fund.organization.name}
+                                    media={fund.logo}
+                                    mediaRound={false}
+                                    mediaSize={'md'}
+                                    mediaPlaceholder={'fund'}
+                                />
+                            </td>
+                            <td>
+                                {fund.approved ? (
+                                    <Label type="success">Geaccepteerd</Label>
+                                ) : (
+                                    <Label type="default">Wachtend</Label>
+                                )}
+                            </td>
+                            {!product.sponsor_organization && fundToggles && (
+                                <td className="form">
+                                    <ToggleControl
+                                        id={`fund_exclusion_id_${fund.id}`}
+                                        checked={!fundToggles[fund.id]}
+                                        onChange={() => {
+                                            setFundToggles((fundToggles) => ({
+                                                ...fundToggles,
+                                                [fund.id]: !fundToggles[fund.id],
+                                            }));
+                                            changeFundExclusion(fund, fundToggles[fund.id]);
+                                        }}
+                                    />
+                                </td>
+                            )}
+                            <td className="nowrap">
+                                <button
+                                    className={classNames(
+                                        'button',
+                                        'button-icon',
+                                        fund.chat?.provider_unseen_messages > 0
+                                            ? 'button-primary-light'
+                                            : 'button-default',
+                                    )}
+                                    disabled={!fund.chat}
+                                    onClick={() => showTheChat(fund)}>
+                                    <em
+                                        className={`mdi mdi-message-text ${
+                                            fund.chat && !fund.chat.provider_unseen_messages ? 'text-primary' : ''
+                                        }`}
+                                    />
+                                </button>
+
+                                {!fund.chat && <span>&nbsp;&nbsp; Geen berichten</span>}
+                                {fund.chat?.provider_unseen_messages > 0 && (
+                                    <span>&nbsp;&nbsp; {`${fund.chat.provider_unseen_messages} nieuwe`}</span>
+                                )}
+                            </td>
+                            <td className={'table-td-actions text-right'}>
+                                <TableRowActions
+                                    content={() => (
+                                        <div className="dropdown dropdown-actions">
+                                            <a
+                                                className={classNames(
+                                                    'dropdown-item',
+                                                    (!fund.approved || fund.provider_excluded) && 'disabled',
                                                 )}
-                                                <td className="nowrap">
-                                                    <button
-                                                        className={`button button-icon ${
-                                                            fund.chat?.provider_unseen_messages > 0
-                                                                ? 'button-primary-light'
-                                                                : 'button-default'
-                                                        }`}
-                                                        disabled={!fund.chat}
-                                                        onClick={() => showTheChat(fund)}>
-                                                        <em
-                                                            className={`mdi mdi-message-text ${
-                                                                fund.chat && !fund.chat.provider_unseen_messages
-                                                                    ? 'text-primary'
-                                                                    : ''
-                                                            }`}
-                                                        />
-                                                    </button>
-
-                                                    {!fund.chat && <span>&nbsp;&nbsp; Geen berichten</span>}
-                                                    {fund.chat?.provider_unseen_messages > 0 && (
-                                                        <span>
-                                                            &nbsp;&nbsp;{' '}
-                                                            {`${fund.chat.provider_unseen_messages} nieuwe`}
-                                                        </span>
-                                                    )}
-                                                </td>
-                                                <td className={'table-td-actions text-right'}>
-                                                    <TableRowActions
-                                                        content={() => (
-                                                            <div className="dropdown dropdown-actions">
-                                                                <a
-                                                                    className={classNames(
-                                                                        'dropdown-item',
-                                                                        (!fund.approved || fund.provider_excluded) &&
-                                                                            'disabled',
-                                                                    )}
-                                                                    href={`${fund.implementation.url_webshop}products/${product.id}`}
-                                                                    target="_blank"
-                                                                    rel="noreferrer">
-                                                                    <em className="mdi mdi-eye-outline icon-start">
-                                                                        {' '}
-                                                                    </em>
-                                                                    {fund.provider_excluded
-                                                                        ? 'Verborgen op webshop'
-                                                                        : 'Bekijk op webshop'}
-                                                                </a>
-                                                            </div>
-                                                        )}
-                                                    />
-                                                </td>
-                                            </tr>
-                                        ))}
-                                    </tbody>
-                                </table>
-                            </TableTopScroller>
-                        </div>
-                    </div>
-                ) : (
-                    <div className="card-section">
-                        <div className={`block block-empty text-center}`}>
-                            <div className="empty-details">
-                                Uw aanbod kan nog niet op een website worden geplaatst omdat u zich eerst voor een fonds
-                                moet aanmelden. Meld u aan voor één of meerdere fondsen.
-                            </div>
-                            <div className="empty-actions">
-                                <div className="button-group">
-                                    <StateNavLink
-                                        name={DashboardRoutes.PROVIDER_FUNDS}
-                                        params={{ organizationId: activeOrganization.id }}
-                                        className="button button-primary">
-                                        <em className="mdi mdi-plus icon-start" />
-                                        Bekijk beschikbare fondsen
-                                    </StateNavLink>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                )}
-
-                {funds?.meta && (
-                    <div className="card-section">
-                        <Paginator
-                            meta={funds.meta}
-                            filters={filterValues}
-                            updateFilters={filterUpdate}
-                            perPageKey={paginatorKey}
-                        />
-                    </div>
-                )}
+                                                href={`${fund.implementation.url_webshop}products/${product.id}`}
+                                                target="_blank"
+                                                rel="noreferrer">
+                                                <em className="mdi mdi-eye-outline icon-start"> </em>
+                                                {fund.provider_excluded ? 'Verborgen op webshop' : 'Bekijk op webshop'}
+                                            </a>
+                                        </div>
+                                    )}
+                                />
+                            </td>
+                        </tr>
+                    ))}
+                </LoaderTableCard>
             </div>
         </Fragment>
     );
diff --git a/react/src/dashboard/components/pages/products/Products.tsx b/react/src/dashboard/components/pages/products/Products.tsx
index 34c32d10d..7f36bafd4 100644
--- a/react/src/dashboard/components/pages/products/Products.tsx
+++ b/react/src/dashboard/components/pages/products/Products.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
+import LoaderTableCard from '../../elements/loader-table-card/LoaderTableCard';
 import useSetProgress from '../../../hooks/useSetProgress';
 import useProductService from '../../../services/ProductService';
 import Product from '../../../props/models/Product';
@@ -8,12 +9,9 @@ import { PaginationData } from '../../../props/ApiResponses';
 import useAppConfigs from '../../../hooks/useAppConfigs';
 import useOpenModal from '../../../hooks/useOpenModal';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
-import Paginator from '../../../modules/paginator/components/Paginator';
 import ModalNotification from '../../modals/ModalNotification';
 import usePaginatorService from '../../../modules/paginator/services/usePaginatorService';
 import useTranslate from '../../../hooks/useTranslate';
-import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
-import TableTopScroller from '../../elements/tables/TableTopScroller';
 import TableRowActions from '../../elements/tables/TableRowActions';
 import classNames from 'classnames';
 import BlockLabelTabs from '../../elements/block-label-tabs/BlockLabelTabs';
@@ -83,11 +81,6 @@ export default function Products() {
         },
     );
 
-    const { headElement, configsElement } = useConfigurableTable(productService.getColumns(), {
-        sortable: true,
-        filter: filter,
-    });
-
     const deleteProduct = useCallback(
         function (product: Product) {
             openModal((modal) => (
@@ -138,7 +131,7 @@ export default function Products() {
         <div className="card">
             <div className="card-header">
                 <div className="card-title flex flex-grow">
-                    {translate('products.offers')} ({products.meta.total})
+                    {translate('products.offers')} ({products?.meta?.total})
                 </div>
 
                 <div className="card-header-filters">
@@ -146,13 +139,18 @@ export default function Products() {
                         <StateNavLink
                             name={DashboardRoutes.PRODUCT_CREATE}
                             params={{ organizationId: activeOrganization.id }}
-                            className={`button button-primary button-sm ${productHardLimitReached ? 'disabled' : ''}`}
+                            className={classNames(
+                                'button',
+                                'button-primary',
+                                'button-sm',
+                                productHardLimitReached && 'disabled',
+                            )}
                             id="add_product"
                             disabled={productHardLimitReached}>
                             <em className="mdi mdi-plus-circle icon-start" />
                             {translate('products.add')}
                             {productSoftLimitReached
-                                ? ` (${products.meta.total_provider} / ${maxProductHardLimit})`
+                                ? ` (${products?.meta?.total_provider} / ${maxProductHardLimit})`
                                 : ``}
                         </StateNavLink>
 
@@ -181,178 +179,133 @@ export default function Products() {
                 </div>
             </div>
 
-            {loading && (
-                <div className="card-section">
-                    <div className="card-loading">
-                        <div className="mdi mdi-loading mdi-spin" />
-                    </div>
-                </div>
-            )}
-
-            {!loading && products?.meta.total > 0 && (
-                <div className="card-section card-section-padless">
-                    {configsElement}
-
-                    <TableTopScroller>
-                        <table className="table">
-                            {headElement}
-
-                            <tbody>
-                                {products?.data.map((product) => (
-                                    <StateNavLink
-                                        key={product.id}
-                                        name={DashboardRoutes.PRODUCT}
-                                        params={{
-                                            id: product.id,
-                                            organizationId: activeOrganization.id,
-                                        }}
-                                        customElement={'tr'}
-                                        className={'tr-clickable'}>
-                                        <td className={'td-narrow'}>{product.id}</td>
-                                        <td title={product.name}>
-                                            <TableEntityMain
-                                                title={product.name}
-                                                titleLimit={64}
-                                                media={product.photos[0]}
-                                                mediaRound={false}
-                                                mediaSize={'md'}
-                                                mediaPlaceholder={'product'}
-                                            />
-                                        </td>
-
-                                        {product?.price_type === 'informational' ? (
-                                            <td>
-                                                <TableEmptyValue />
-                                            </td>
-                                        ) : (
-                                            <td>
-                                                {product.unlimited_stock
-                                                    ? translate('product_edit.labels.unlimited')
-                                                    : product.stock_amount}
-                                            </td>
-                                        )}
-
-                                        <td>{product.price_locale}</td>
-
-                                        <td className={product.expire_at_locale ? '' : 'text-muted'}>
-                                            {product.expire_at_locale ? product.expire_at_locale : 'Geen'}
-                                        </td>
-
-                                        <td className={product.expired ? '' : 'text-muted'}>
-                                            {product.expired ? 'Ja' : 'Nee'}
-                                        </td>
-
-                                        <td className={'table-td-actions text-right'}>
-                                            {filterValues.source != 'archive' ? (
-                                                <TableRowActions
-                                                    content={(e) => (
-                                                        <div className="dropdown dropdown-actions">
-                                                            <StateNavLink
-                                                                name={DashboardRoutes.PRODUCT}
-                                                                params={{
-                                                                    id: product.id,
-                                                                    organizationId: activeOrganization.id,
-                                                                }}
-                                                                className="dropdown-item">
-                                                                <div className="mdi mdi-eye-outline icon-start" />
-                                                                Bekijk
-                                                            </StateNavLink>
-
-                                                            <StateNavLink
-                                                                name={DashboardRoutes.PRODUCT_EDIT}
-                                                                params={{
-                                                                    id: product.id,
-                                                                    organizationId: activeOrganization.id,
-                                                                }}
-                                                                className="dropdown-item">
-                                                                <div className="mdi mdi-pencil-outline icon-start" />
-                                                                Bewerking
-                                                            </StateNavLink>
-
-                                                            {product.sponsor_organization ? (
-                                                                <div
-                                                                    className="dropdown-item"
-                                                                    onClick={() => {
-                                                                        deleteProduct(product);
-                                                                        e.close();
-                                                                    }}>
-                                                                    <em className="mdi mdi-close icon-start icon-start" />
-                                                                    Verwijderen
-                                                                </div>
-                                                            ) : (
-                                                                <StateNavLink
-                                                                    name={DashboardRoutes.PRODUCT}
-                                                                    params={{
-                                                                        id: product.id,
-                                                                        organizationId: activeOrganization.id,
-                                                                    }}
-                                                                    className={classNames(
-                                                                        'dropdown-item',
-                                                                        !(product.unseen_messages > 0) && 'disabled',
-                                                                    )}>
-                                                                    <em className="mdi mdi-message-text icon-start" />
-                                                                    Bericht
-                                                                </StateNavLink>
-                                                            )}
-                                                        </div>
-                                                    )}
-                                                />
+            <LoaderTableCard
+                loading={loading}
+                empty={products?.meta?.total == 0}
+                emptyTitle={
+                    filterValues.source == 'provider' && filterValuesActive.q
+                        ? 'Er zijn geen aanbiedingen gevonden voor de zoekopdracht.'
+                        : 'Er zijn momenteel geen aanbiedingen.'
+                }
+                emptyButton={
+                    filterValues.source == 'provider' &&
+                    !filterValuesActive.q && {
+                        state: DashboardRoutes.PRODUCT_CREATE,
+                        stateParams: { organizationId: activeOrganization.id },
+                        type: 'primary',
+                        icon: 'plus-circle',
+                        text: 'Aanbieding toevoegen',
+                    }
+                }
+                columns={productService.getColumns()}
+                tableOptions={{ sortable: true, filter }}
+                paginator={{ key: paginatorKey, data: products, filterValues, filterUpdate }}>
+                {products?.data?.map((product) => (
+                    <StateNavLink
+                        key={product.id}
+                        name={DashboardRoutes.PRODUCT}
+                        params={{
+                            id: product.id,
+                            organizationId: activeOrganization.id,
+                        }}
+                        customElement={'tr'}
+                        className={'tr-clickable'}>
+                        <td className={'td-narrow'}>{product.id}</td>
+                        <td title={product.name}>
+                            <TableEntityMain
+                                title={product.name}
+                                titleLimit={64}
+                                media={product.photos[0]}
+                                mediaRound={false}
+                                mediaSize={'md'}
+                                mediaPlaceholder={'product'}
+                            />
+                        </td>
+
+                        {product?.price_type === 'informational' ? (
+                            <td>
+                                <TableEmptyValue />
+                            </td>
+                        ) : (
+                            <td>
+                                {product.unlimited_stock
+                                    ? translate('product_edit.labels.unlimited')
+                                    : product.stock_amount}
+                            </td>
+                        )}
+
+                        <td>{product.price_locale}</td>
+
+                        <td className={classNames(!product.expire_at_locale && 'text-muted')}>
+                            {product.expire_at_locale ? product.expire_at_locale : 'Geen'}
+                        </td>
+
+                        <td className={classNames(!product.expired && 'text-muted')}>
+                            {product.expired ? 'Ja' : 'Nee'}
+                        </td>
+
+                        <td className={'table-td-actions text-right'}>
+                            {filterValues.source != 'archive' ? (
+                                <TableRowActions
+                                    content={(e) => (
+                                        <div className="dropdown dropdown-actions">
+                                            <StateNavLink
+                                                name={DashboardRoutes.PRODUCT}
+                                                params={{
+                                                    id: product.id,
+                                                    organizationId: activeOrganization.id,
+                                                }}
+                                                className="dropdown-item">
+                                                <div className="mdi mdi-eye-outline icon-start" />
+                                                Bekijk
+                                            </StateNavLink>
+
+                                            <StateNavLink
+                                                name={DashboardRoutes.PRODUCT_EDIT}
+                                                params={{
+                                                    id: product.id,
+                                                    organizationId: activeOrganization.id,
+                                                }}
+                                                className="dropdown-item">
+                                                <div className="mdi mdi-pencil-outline icon-start" />
+                                                Bewerking
+                                            </StateNavLink>
+
+                                            {product.sponsor_organization ? (
+                                                <div
+                                                    className="dropdown-item"
+                                                    onClick={() => {
+                                                        deleteProduct(product);
+                                                        e.close();
+                                                    }}>
+                                                    <em className="mdi mdi-close icon-start icon-start" />
+                                                    Verwijderen
+                                                </div>
                                             ) : (
-                                                <span className={'text-muted'}>
-                                                    {translate('organization_employees.labels.owner')}
-                                                </span>
+                                                <StateNavLink
+                                                    name={DashboardRoutes.PRODUCT}
+                                                    params={{
+                                                        id: product.id,
+                                                        organizationId: activeOrganization.id,
+                                                    }}
+                                                    className={classNames(
+                                                        'dropdown-item',
+                                                        !(product.unseen_messages > 0) && 'disabled',
+                                                    )}>
+                                                    <em className="mdi mdi-message-text icon-start" />
+                                                    Bericht
+                                                </StateNavLink>
                                             )}
-                                        </td>
-                                    </StateNavLink>
-                                ))}
-                            </tbody>
-                        </table>
-                    </TableTopScroller>
-                </div>
-            )}
-
-            {!loading && filterValues.source == 'provider' && products.meta.total == 0 && !filterValuesActive.q && (
-                <div className="card-section text-center">
-                    <div className="card-subtitle">Er zijn momenteel geen aanbiedingen.</div>
-                    <br />
-                    <StateNavLink
-                        name={DashboardRoutes.PRODUCT_CREATE}
-                        params={{ organizationId: activeOrganization.id }}
-                        className="button button-primary">
-                        <em className="mdi mdi-plus-circle icon-start" />
-                        Aanbieding toevoegen
+                                        </div>
+                                    )}
+                                />
+                            ) : (
+                                <span className={'text-muted'}>{translate('organization_employees.labels.owner')}</span>
+                            )}
+                        </td>
                     </StateNavLink>
-                </div>
-            )}
-
-            {!loading && filterValues.source == 'provider' && products.meta.total == 0 && filterValuesActive.q && (
-                <div className="card-section text-center">
-                    <div className="card-subtitle">Er zijn geen aanbiedingen gevonden voor de zoekopdracht.</div>
-                </div>
-            )}
-
-            {!loading && filterValues.source == 'sponsor' && products.meta.total == 0 && (
-                <div className="card-section">
-                    <div className="card-subtitle text-center">Er zijn momenteel geen aanbiedingen.</div>
-                </div>
-            )}
-
-            {!loading && filterValues.source == 'archive' && products.meta.total == 0 && (
-                <div className="card-section">
-                    <div className="card-subtitle text-center">Er zijn momenteel geen aanbiedingen.</div>
-                </div>
-            )}
-
-            {!loading && products?.meta && (
-                <div className="card-section">
-                    <Paginator
-                        meta={products.meta}
-                        filters={filterValues}
-                        updateFilters={filterUpdate}
-                        perPageKey={paginatorKey}
-                    />
-                </div>
-            )}
+                ))}
+            </LoaderTableCard>
         </div>
     );
 }
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 0c9c71659..50271f030 100644
--- a/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundInvitationsTable.tsx
+++ b/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundInvitationsTable.tsx
@@ -1,9 +1,9 @@
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import { PaginationData } from '../../../../props/ApiResponses';
 import Organization from '../../../../props/models/Organization';
 import useSetProgress from '../../../../hooks/useSetProgress';
 import usePushSuccess from '../../../../hooks/usePushSuccess';
-import Paginator from '../../../../modules/paginator/components/Paginator';
 import useAssetUrl from '../../../../hooks/useAssetUrl';
 import TableCheckboxControl from '../../../elements/tables/elements/TableCheckboxControl';
 import FundProviderInvitation from '../../../../props/models/FundProviderInvitation';
@@ -11,10 +11,8 @@ import useFundProviderInvitationsService from '../../../../services/useFundProvi
 import { strLimit } from '../../../../helpers/string';
 import useTableToggles from '../../../../hooks/useTableToggles';
 import usePaginatorService from '../../../../modules/paginator/services/usePaginatorService';
-import EmptyCard from '../../../elements/empty-card/EmptyCard';
+import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
 import useTranslate from '../../../../hooks/useTranslate';
-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';
@@ -86,21 +84,6 @@ export default function ProviderFundInvitationsTable({
         };
     }, [invitations?.data, selected]);
 
-    const { headElement, configsElement } = useConfigurableTable(fundProviderInvitationsService.getColumns(), {
-        trPrepend: (
-            <Fragment>
-                {[null, 'pending'].includes(filterValues.state) && (
-                    <th className="th-narrow">
-                        <TableCheckboxControl
-                            checked={selected.length == invitations?.data?.length}
-                            onClick={(e) => toggleAll(e, invitations?.data)}
-                        />
-                    </th>
-                )}
-            </Fragment>
-        ),
-    });
-
     const mapProviderFunds = useCallback(
         (
             items: Array<FundProviderInvitation>,
@@ -191,7 +174,7 @@ export default function ProviderFundInvitationsTable({
                     {translate(`provider_funds.title.${type}`)}
 
                     {!loading && selected.length > 0 && ` (${selected.length}/${invitations.data.length})`}
-                    {!loading && selected.length == 0 && ` (${invitations.meta.total})`}
+                    {!loading && selected.length == 0 && ` (${invitations?.meta?.total})`}
                 </div>
 
                 <div className="card-header-filters">
@@ -220,121 +203,99 @@ export default function ProviderFundInvitationsTable({
                 </div>
             </div>
 
-            {!loading && invitations.data.length > 0 && (
-                <div className="card-section">
-                    <div className="card-block card-block-table form">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {invitations.data?.map((invitation) => (
-                                        <tr
-                                            key={invitation.id}
-                                            className={selected.includes(invitation.id) ? 'selected' : ''}>
-                                            {[null, 'pending'].includes(filterValues.state) && (
-                                                <td className="td-narrow">
-                                                    <TableCheckboxControl
-                                                        checked={selected.includes(invitation.id)}
-                                                        onClick={(e) => toggle(e, invitation)}
-                                                    />
-                                                </td>
-                                            )}
-                                            <td>
-                                                <div className="td-collapsable">
-                                                    <div className="collapsable-media">
-                                                        <img
-                                                            className="td-media td-media-sm"
-                                                            src={
-                                                                invitation.fund?.logo?.sizes?.thumbnail ||
-                                                                assetUrl('/assets/img/placeholders/fund-thumbnail.png')
-                                                            }
-                                                            alt=""
-                                                        />
-                                                    </div>
-                                                    <div className="collapsable-content">
-                                                        <div
-                                                            className="text-primary text-semibold"
-                                                            title={invitation.fund.name}>
-                                                            {strLimit(invitation.fund.name, 32)}
-                                                        </div>
-                                                        <a
-                                                            href={invitation.fund.implementation?.url_webshop}
-                                                            target="_blank"
-                                                            className="text-strong text-md text-muted-dark text-inherit"
-                                                            rel="noreferrer">
-                                                            {strLimit(invitation.fund.implementation?.name, 32)}
-                                                        </a>
-                                                    </div>
-                                                </div>
-                                            </td>
-
-                                            <td title={invitation.fund?.organization?.name}>
-                                                {strLimit(invitation.fund?.organization?.name, 25)}
-                                            </td>
-
-                                            <td className="nowrap">
-                                                <strong className="text-strong text-md text-muted-dark">
-                                                    {invitation.fund?.start_date_locale}
-                                                </strong>
-                                            </td>
-                                            <td className="nowrap">
-                                                <strong className="text-strong text-md text-muted-dark">
-                                                    {invitation.fund?.end_date_locale}
-                                                </strong>
-                                            </td>
-                                            <td className={`nowrap`}>
-                                                <Label type={invitation.status_type}>{invitation.status_text}</Label>
-                                            </td>
-                                            {type === 'invitations' && invitation.can_be_accepted ? (
-                                                <td>
-                                                    <div className="button-group flex-end">
-                                                        <div
-                                                            className="button button-primary button-sm"
-                                                            onClick={() => acceptInvitations([invitation])}>
-                                                            <em className="mdi mdi-check-circle icon-start" />
-                                                            {translate('provider_funds.labels.accept_invitation')}
-                                                        </div>
-                                                    </div>
-                                                </td>
-                                            ) : (
-                                                <td className={'table-td-actions text-right'}>
-                                                    <TableEmptyValue />
-                                                </td>
-                                            )}
-                                        </tr>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
-            )}
-
-            {loading && (
-                <div className="card-section">
-                    <div className="card-loading">
-                        <div className="mdi mdi-loading mdi-spin" />
-                    </div>
-                </div>
-            )}
+            <LoaderTableCard
+                loading={loading}
+                empty={!loading && invitations?.meta?.total == 0}
+                emptyTitle={translate(`provider_funds.empty_block.${type}`)}
+                columns={fundProviderInvitationsService.getColumns()}
+                tableOptions={{
+                    trPrepend: (
+                        <Fragment>
+                            {[null, 'pending'].includes(filterValues.state) && (
+                                <th className="th-narrow">
+                                    <TableCheckboxControl
+                                        checked={selected.length == invitations?.data?.length}
+                                        onClick={(e) => toggleAll(e, invitations?.data)}
+                                    />
+                                </th>
+                            )}
+                        </Fragment>
+                    ),
+                }}
+                paginator={{ key: paginatorKey, data: invitations, filterValues, filterUpdate }}>
+                {invitations?.data?.map((invitation) => (
+                    <tr key={invitation.id} className={classNames(selected.includes(invitation.id) && 'selected')}>
+                        {[null, 'pending'].includes(filterValues.state) && (
+                            <td className="td-narrow">
+                                <TableCheckboxControl
+                                    checked={selected.includes(invitation.id)}
+                                    onClick={(e) => toggle(e, invitation)}
+                                />
+                            </td>
+                        )}
+                        <td>
+                            <div className="td-collapsable">
+                                <div className="collapsable-media">
+                                    <img
+                                        className="td-media td-media-sm"
+                                        src={
+                                            invitation.fund?.logo?.sizes?.thumbnail ||
+                                            assetUrl('/assets/img/placeholders/fund-thumbnail.png')
+                                        }
+                                        alt=""
+                                    />
+                                </div>
+                                <div className="collapsable-content">
+                                    <div className="text-primary text-semibold" title={invitation.fund.name}>
+                                        {strLimit(invitation.fund.name, 32)}
+                                    </div>
+                                    <a
+                                        href={invitation.fund.implementation?.url_webshop}
+                                        target="_blank"
+                                        className="text-strong text-md text-muted-dark text-inherit"
+                                        rel="noreferrer">
+                                        {strLimit(invitation.fund.implementation?.name, 32)}
+                                    </a>
+                                </div>
+                            </div>
+                        </td>
 
-            {!loading && invitations?.meta?.total == 0 && (
-                <EmptyCard type={'card-section'} title={translate(`provider_funds.empty_block.${type}`)} />
-            )}
+                        <td title={invitation.fund?.organization?.name}>
+                            {strLimit(invitation.fund?.organization?.name, 25)}
+                        </td>
 
-            {invitations?.meta && (
-                <div className="card-section">
-                    <Paginator
-                        meta={invitations.meta}
-                        filters={filterValues}
-                        updateFilters={filterUpdate}
-                        perPageKey={paginatorKey}
-                    />
-                </div>
-            )}
+                        <td className="nowrap">
+                            <strong className="text-strong text-md text-muted-dark">
+                                {invitation.fund?.start_date_locale}
+                            </strong>
+                        </td>
+                        <td className="nowrap">
+                            <strong className="text-strong text-md text-muted-dark">
+                                {invitation.fund?.end_date_locale}
+                            </strong>
+                        </td>
+                        <td className="nowrap">
+                            <Label type={invitation.status_type}>{invitation.status_text}</Label>
+                        </td>
+                        {type === 'invitations' && invitation.can_be_accepted ? (
+                            <td>
+                                <div className="button-group flex-end">
+                                    <div
+                                        className="button button-primary button-sm"
+                                        onClick={() => acceptInvitations([invitation])}>
+                                        <em className="mdi mdi-check-circle icon-start" />
+                                        {translate('provider_funds.labels.accept_invitation')}
+                                    </div>
+                                </div>
+                            </td>
+                        ) : (
+                            <td className={'table-td-actions text-right'}>
+                                <TableEmptyValue />
+                            </td>
+                        )}
+                    </tr>
+                ))}
+            </LoaderTableCard>
         </div>
     );
 }
diff --git a/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsAvailableTable.tsx b/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsAvailableTable.tsx
index cf3d249f2..481ad813b 100644
--- a/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsAvailableTable.tsx
+++ b/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsAvailableTable.tsx
@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import { PaginationData } from '../../../../props/ApiResponses';
 import Organization from '../../../../props/models/Organization';
 import useProviderFundService from '../../../../services/ProviderFundService';
 import useSetProgress from '../../../../hooks/useSetProgress';
-import Paginator from '../../../../modules/paginator/components/Paginator';
 import useAssetUrl from '../../../../hooks/useAssetUrl';
 import { strLimit } from '../../../../helpers/string';
 import TableCheckboxControl from '../../../elements/tables/elements/TableCheckboxControl';
@@ -15,10 +15,8 @@ import SelectControl from '../../../elements/select-control/SelectControl';
 import useTableToggles from '../../../../hooks/useTableToggles';
 import Implementation from '../../../../props/models/Implementation';
 import usePaginatorService from '../../../../modules/paginator/services/usePaginatorService';
-import EmptyCard from '../../../elements/empty-card/EmptyCard';
+import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
 import useTranslate from '../../../../hooks/useTranslate';
-import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
 import usePushApiError from '../../../../hooks/usePushApiError';
 import useFilterNext from '../../../../modules/filter_next/useFilterNext';
 import { NumberParam, StringParam } from 'use-query-params';
@@ -94,19 +92,6 @@ export default function ProviderFundsAvailableTable({
 
     const { resetFilters: resetFilters } = filter;
 
-    const { headElement, configsElement } = useConfigurableTable(providerFundService.getColumnsAvailable(), {
-        filter: filter,
-        sortable: true,
-        trPrepend: (
-            <th className="th-narrow">
-                <TableCheckboxControl
-                    checked={selected.length == funds?.data?.length}
-                    onClick={(e) => toggleAll(e, funds?.data)}
-                />
-            </th>
-        ),
-    });
-
     const fetchFunds = useCallback(() => {
         setSelected([]);
         setLoading(true);
@@ -210,7 +195,7 @@ export default function ProviderFundsAvailableTable({
                     {translate(`provider_funds.title.available`)}
 
                     {!loading && selected.length > 0 && ` (${selected.length}/${funds.data.length})`}
-                    {!loading && selected.length == 0 && ` (${funds.meta.total})`}
+                    {!loading && selected.length == 0 && ` (${funds?.meta?.total})`}
                 </div>
 
                 <div className="card-header-filters">
@@ -298,114 +283,88 @@ export default function ProviderFundsAvailableTable({
                 </div>
             </div>
 
-            {!loading && funds.data.length > 0 && (
-                <div className="card-section">
-                    <div className="card-block card-block-table form">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {funds.data?.map((fund) => (
-                                        <tr
-                                            key={fund.id}
-                                            className={selected.includes(fund.id) ? 'selected' : ''}
-                                            data-dusk={`tableFundsAvailableRow${fund.id}`}>
-                                            <td className="td-narrow">
-                                                <TableCheckboxControl
-                                                    checked={selected.includes(fund.id)}
-                                                    onClick={(e) => toggle(e, fund)}
-                                                />
-                                            </td>
-
-                                            <td>
-                                                <div className="td-collapsable">
-                                                    <div className="collapsable-media">
-                                                        <img
-                                                            className="td-media td-media-sm"
-                                                            src={
-                                                                fund.logo?.sizes?.thumbnail ||
-                                                                assetUrl('/assets/img/placeholders/fund-thumbnail.png')
-                                                            }
-                                                            alt=""
-                                                        />
-                                                    </div>
-                                                    <div className="collapsable-content">
-                                                        <div className="text-primary text-semibold" title={fund.name}>
-                                                            {strLimit(fund.name, 32)}
-                                                        </div>
-                                                        <a
-                                                            href={fund.implementation.url_webshop}
-                                                            target="_blank"
-                                                            className="text-strong text-md text-muted-dark text-inherit"
-                                                            rel="noreferrer">
-                                                            {strLimit(fund.implementation?.name, 32)}
-                                                        </a>
-                                                    </div>
-                                                </div>
-                                            </td>
-
-                                            <td title={fund.organization.name}>
-                                                {strLimit(fund.organization?.name, 25)}
-                                            </td>
-
-                                            <td className="nowrap">
-                                                <strong className="text-strong text-md text-muted-dark">
-                                                    {fund.start_date_locale}
-                                                </strong>
-                                            </td>
-
-                                            <td className="nowrap">
-                                                <strong className="text-strong text-md text-muted-dark">
-                                                    {fund.end_date_locale}
-                                                </strong>
-                                            </td>
-
-                                            <td className={'table-td-actions text-right'}>
-                                                <div className="button-group flex-end">
-                                                    {fund.state != 'closed' && (
-                                                        <button
-                                                            className="button button-primary button-sm"
-                                                            onClick={() => applyFunds([fund])}>
-                                                            <em className="mdi mdi-send-circle-outline icon-start" />
-                                                            {translate('provider_funds.buttons.join')}
-                                                        </button>
-                                                    )}
-                                                </div>
-                                            </td>
-                                        </tr>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
-            )}
-
-            {loading && (
-                <div className="card-section">
-                    <div className="card-loading">
-                        <div className="mdi mdi-loading mdi-spin" />
-                    </div>
-                </div>
-            )}
-
-            {!loading && funds?.meta?.total == 0 && (
-                <EmptyCard type={'card-section'} title={translate(`provider_funds.empty_block.available`)} />
-            )}
-
-            {!loading && funds?.meta && (
-                <div className="card-section">
-                    <Paginator
-                        meta={funds.meta}
-                        filters={filterValues}
-                        updateFilters={filterUpdate}
-                        perPageKey={paginatorKey}
-                    />
-                </div>
-            )}
+            <LoaderTableCard
+                loading={loading}
+                empty={!loading && funds?.meta?.total == 0}
+                emptyTitle={translate(`provider_funds.empty_block.available`)}
+                columns={providerFundService.getColumnsAvailable()}
+                tableOptions={{
+                    filter,
+                    sortable: true,
+                    trPrepend: (
+                        <th className="th-narrow">
+                            <TableCheckboxControl
+                                checked={selected.length == funds?.data?.length}
+                                onClick={(e) => toggleAll(e, funds?.data)}
+                            />
+                        </th>
+                    ),
+                }}
+                paginator={{ key: paginatorKey, data: funds, filterValues, filterUpdate }}>
+                {funds?.data?.map((fund) => (
+                    <tr
+                        key={fund.id}
+                        className={classNames(selected.includes(fund.id) && 'selected')}
+                        data-dusk={`tableFundsAvailableRow${fund.id}`}>
+                        <td className="td-narrow">
+                            <TableCheckboxControl
+                                checked={selected.includes(fund.id)}
+                                onClick={(e) => toggle(e, fund)}
+                            />
+                        </td>
+
+                        <td>
+                            <div className="td-collapsable">
+                                <div className="collapsable-media">
+                                    <img
+                                        className="td-media td-media-sm"
+                                        src={
+                                            fund.logo?.sizes?.thumbnail ||
+                                            assetUrl('/assets/img/placeholders/fund-thumbnail.png')
+                                        }
+                                        alt=""
+                                    />
+                                </div>
+                                <div className="collapsable-content">
+                                    <div className="text-primary text-semibold" title={fund.name}>
+                                        {strLimit(fund.name, 32)}
+                                    </div>
+                                    <a
+                                        href={fund.implementation.url_webshop}
+                                        target="_blank"
+                                        className="text-strong text-md text-muted-dark text-inherit"
+                                        rel="noreferrer">
+                                        {strLimit(fund.implementation?.name, 32)}
+                                    </a>
+                                </div>
+                            </div>
+                        </td>
+
+                        <td title={fund.organization.name}>{strLimit(fund.organization?.name, 25)}</td>
+
+                        <td className="nowrap">
+                            <strong className="text-strong text-md text-muted-dark">{fund.start_date_locale}</strong>
+                        </td>
+
+                        <td className="nowrap">
+                            <strong className="text-strong text-md text-muted-dark">{fund.end_date_locale}</strong>
+                        </td>
+
+                        <td className={'table-td-actions text-right'}>
+                            <div className="button-group flex-end">
+                                {fund.state != 'closed' && (
+                                    <button
+                                        className="button button-primary button-sm"
+                                        onClick={() => applyFunds([fund])}>
+                                        <em className="mdi mdi-send-circle-outline icon-start" />
+                                        {translate('provider_funds.buttons.join')}
+                                    </button>
+                                )}
+                            </div>
+                        </td>
+                    </tr>
+                ))}
+            </LoaderTableCard>
         </div>
     );
 }
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 1d41504de..ffb8b0b12 100644
--- a/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsTable.tsx
+++ b/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsTable.tsx
@@ -1,11 +1,11 @@
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import { PaginationData } from '../../../../props/ApiResponses';
 import FundProvider from '../../../../props/models/FundProvider';
 import Organization from '../../../../props/models/Organization';
 import useProviderFundService from '../../../../services/ProviderFundService';
 import useSetProgress from '../../../../hooks/useSetProgress';
 import usePushSuccess from '../../../../hooks/usePushSuccess';
-import Paginator from '../../../../modules/paginator/components/Paginator';
 import useAssetUrl from '../../../../hooks/useAssetUrl';
 import { strLimit } from '../../../../helpers/string';
 import TableCheckboxControl from '../../../elements/tables/elements/TableCheckboxControl';
@@ -15,10 +15,8 @@ import ModalFundOffers from '../../../modals/ModalFundOffers';
 import ModalFundUnsubscribe from '../../../modals/ModalFundUnsubscribe';
 import useTableToggles from '../../../../hooks/useTableToggles';
 import usePaginatorService from '../../../../modules/paginator/services/usePaginatorService';
-import EmptyCard from '../../../elements/empty-card/EmptyCard';
+import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
 import useTranslate from '../../../../hooks/useTranslate';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
-import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
 import TableRowActions from '../../../elements/tables/TableRowActions';
 import usePushApiError from '../../../../hooks/usePushApiError';
@@ -73,21 +71,6 @@ export default function ProviderFundsTable({
         };
     }, [providerFunds?.data, selected]);
 
-    const { headElement, configsElement } = useConfigurableTable(providerFundService.getColumns(type), {
-        trPrepend: (
-            <Fragment>
-                {type !== 'archived' && (
-                    <th className="th-narrow">
-                        <TableCheckboxControl
-                            checked={selected.length == providerFunds?.data?.length}
-                            onClick={(e) => toggleAll(e, providerFunds?.data)}
-                        />
-                    </th>
-                )}
-            </Fragment>
-        ),
-    });
-
     const viewOffers = useCallback(
         (providerFund: FundProvider) => {
             openModal((modal) => (
@@ -241,7 +224,7 @@ export default function ProviderFundsTable({
                     {translate(`provider_funds.title.${type}`)}
 
                     {!loading && selected.length > 0 && ` (${selected.length}/${providerFunds.data.length})`}
-                    {!loading && selected.length == 0 && ` (${providerFunds.meta.total})`}
+                    {!loading && selected.length == 0 && ` (${providerFunds?.meta?.total})`}
                 </div>
                 <div className="card-header-filters">
                     <div className="block block-inline-filters">
@@ -271,211 +254,181 @@ export default function ProviderFundsTable({
                 </div>
             </div>
 
-            {!loading && providerFunds.data.length > 0 && (
-                <div className="card-section">
-                    <div className="card-block card-block-table form">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {providerFunds.data?.map((providerFund) => (
-                                        <tr
-                                            key={providerFund.id}
-                                            className={selected.includes(providerFund.id) ? 'selected' : ''}
-                                            data-dusk={`${type}TableFundsRow${providerFund.id}`}>
-                                            {type !== 'archived' && (
-                                                <td className="td-narrow">
-                                                    <TableCheckboxControl
-                                                        checked={selected.includes(providerFund.id)}
-                                                        onClick={(e) => toggle(e, providerFund)}
-                                                    />
-                                                </td>
-                                            )}
-                                            <td>
-                                                <div className="td-collapsable">
-                                                    <div className="collapsable-media">
-                                                        <img
-                                                            className="td-media td-media-sm"
-                                                            src={
-                                                                providerFund.fund.logo?.sizes?.thumbnail ||
-                                                                assetUrl('/assets/img/placeholders/fund-thumbnail.png')
-                                                            }
-                                                            alt=""
-                                                        />
-                                                    </div>
-                                                    <div className="collapsable-content">
-                                                        <div
-                                                            className="text-primary text-semibold"
-                                                            title={providerFund.fund.name}>
-                                                            {strLimit(providerFund.fund.name, 32)}
-                                                        </div>
-                                                        <a
-                                                            href={providerFund.fund.implementation.url_webshop}
-                                                            target="_blank"
-                                                            className="text-strong text-md text-muted-dark text-inherit"
-                                                            rel="noreferrer">
-                                                            {strLimit(providerFund.fund.implementation?.name, 32)}
-                                                        </a>
+            <LoaderTableCard
+                loading={loading}
+                empty={!loading && providerFunds?.meta?.total == 0}
+                emptyTitle={translate(`provider_funds.empty_block.${type}`)}
+                columns={providerFundService.getColumns(type)}
+                tableOptions={{
+                    trPrepend: (
+                        <Fragment>
+                            {type !== 'archived' && (
+                                <th className="th-narrow">
+                                    <TableCheckboxControl
+                                        checked={selected.length == providerFunds?.data?.length}
+                                        onClick={(e) => toggleAll(e, providerFunds?.data)}
+                                    />
+                                </th>
+                            )}
+                        </Fragment>
+                    ),
+                }}
+                paginator={{ key: paginatorKey, data: providerFunds, filterValues, filterUpdate }}>
+                {providerFunds?.data?.map((providerFund) => (
+                    <tr
+                        key={providerFund.id}
+                        className={classNames(selected.includes(providerFund.id) && 'selected')}
+                        data-dusk={`${type}TableFundsRow${providerFund.id}`}>
+                        {type !== 'archived' && (
+                            <td className="td-narrow">
+                                <TableCheckboxControl
+                                    checked={selected.includes(providerFund.id)}
+                                    onClick={(e) => toggle(e, providerFund)}
+                                />
+                            </td>
+                        )}
+                        <td>
+                            <div className="td-collapsable">
+                                <div className="collapsable-media">
+                                    <img
+                                        className="td-media td-media-sm"
+                                        src={
+                                            providerFund.fund.logo?.sizes?.thumbnail ||
+                                            assetUrl('/assets/img/placeholders/fund-thumbnail.png')
+                                        }
+                                        alt=""
+                                    />
+                                </div>
+                                <div className="collapsable-content">
+                                    <div className="text-primary text-semibold" title={providerFund.fund.name}>
+                                        {strLimit(providerFund.fund.name, 32)}
+                                    </div>
+                                    <a
+                                        href={providerFund.fund.implementation.url_webshop}
+                                        target="_blank"
+                                        className="text-strong text-md text-muted-dark text-inherit"
+                                        rel="noreferrer">
+                                        {strLimit(providerFund.fund.implementation?.name, 32)}
+                                    </a>
+                                </div>
+                            </div>
+                        </td>
+                        <td title={providerFund.fund?.organization?.name}>
+                            {strLimit(providerFund.fund?.organization?.name, 25)}
+                        </td>
+                        <td className="nowrap">
+                            <strong className="text-strong text-md text-muted-dark">
+                                {providerFund.fund?.start_date_locale}
+                            </strong>
+                        </td>
+                        <td className="nowrap">
+                            <strong className="text-strong text-md text-muted-dark">
+                                {providerFund.fund?.end_date_locale}
+                            </strong>
+                        </td>
+                        {type === 'active' && (
+                            <td className="nowrap">{providerFund.fund?.fund_amount_locale || '-'}</td>
+                        )}
+                        <td>{providerFund.allow_budget ? 'Ja' : 'Nee'}</td>
+                        <td>{providerFund.allow_some_products || providerFund.allow_products ? 'Ja' : 'Nee'}</td>
+                        {!providerFund.fund.archived && !providerFund.fund.expired && (
+                            <td className="nowrap">
+                                {providerFund.state == 'accepted' && (
+                                    <Label type="success">{providerFund.state_locale}</Label>
+                                )}
+
+                                {providerFund.state == 'pending' && (
+                                    <Label type="warning">{providerFund.state_locale}</Label>
+                                )}
+
+                                {providerFund.state == 'rejected' && (
+                                    <Label type="danger">{providerFund.state_locale}</Label>
+                                )}
+
+                                {providerFund.state == 'unsubscribed' && (
+                                    <Label type="danger_light">{providerFund.state_locale}</Label>
+                                )}
+                            </td>
+                        )}
+
+                        {(providerFund.fund.archived || providerFund.fund.expired) && (
+                            <td className="nowrap">
+                                <Label type="default">Archived</Label>
+                            </td>
+                        )}
+
+                        {type !== 'archived' ? (
+                            <td className={'table-td-actions text-right'}>
+                                <TableRowActions
+                                    dataDusk={'btnFundProviderMenu'}
+                                    content={(e) => (
+                                        <div className="dropdown dropdown-actions">
+                                            {providerFund.fund.state != 'closed' &&
+                                                providerFund.state === 'unsubscribed' && (
+                                                    <div
+                                                        className="dropdown-item"
+                                                        data-dusk={`btnApplyFund${providerFund.id}`}
+                                                        title={translate('provider_funds.buttons.join_unsubscribed')}
+                                                        onClick={() => {
+                                                            applyFund(providerFund);
+                                                            e.close();
+                                                        }}>
+                                                        <em className="mdi mdi-send-variant-clock-outline icon-start" />
+                                                        {translate('provider_funds.buttons.join_unsubscribed')}
                                                     </div>
+                                                )}
+
+                                            {providerFund.fund.state != 'closed' && (
+                                                <div
+                                                    className="dropdown-item"
+                                                    title="Bekijk"
+                                                    onClick={() => {
+                                                        viewOffers(providerFund);
+                                                        e.close();
+                                                    }}>
+                                                    <em className="mdi mdi-eye-outline icon-start" />
+                                                    Bekijk
                                                 </div>
-                                            </td>
-                                            <td title={providerFund.fund?.organization?.name}>
-                                                {strLimit(providerFund.fund?.organization?.name, 25)}
-                                            </td>
-                                            <td className="nowrap">
-                                                <strong className="text-strong text-md text-muted-dark">
-                                                    {providerFund.fund?.start_date_locale}
-                                                </strong>
-                                            </td>
-                                            <td className="nowrap">
-                                                <strong className="text-strong text-md text-muted-dark">
-                                                    {providerFund.fund?.end_date_locale}
-                                                </strong>
-                                            </td>
-                                            {type === 'active' && (
-                                                <td className="nowrap">
-                                                    {providerFund.fund?.fund_amount_locale || '-'}
-                                                </td>
-                                            )}
-                                            <td>{providerFund.allow_budget ? 'Ja' : 'Nee'}</td>
-                                            <td>
-                                                {providerFund.allow_some_products || providerFund.allow_products
-                                                    ? 'Ja'
-                                                    : 'Nee'}
-                                            </td>
-                                            {!providerFund.fund.archived && !providerFund.fund.expired && (
-                                                <td className="nowrap">
-                                                    {providerFund.state == 'accepted' && (
-                                                        <Label type="success">{providerFund.state_locale}</Label>
-                                                    )}
-
-                                                    {providerFund.state == 'pending' && (
-                                                        <Label type="warning">{providerFund.state_locale}</Label>
-                                                    )}
-
-                                                    {providerFund.state == 'rejected' && (
-                                                        <Label type="danger">{providerFund.state_locale}</Label>
-                                                    )}
-
-                                                    {providerFund.state == 'unsubscribed' && (
-                                                        <Label type="danger_light">{providerFund.state_locale}</Label>
-                                                    )}
-                                                </td>
                                             )}
 
-                                            {(providerFund.fund.archived || providerFund.fund.expired) && (
-                                                <td className="nowrap">
-                                                    <Label type="default">Archived</Label>
-                                                </td>
+                                            {type == 'active' && (
+                                                <div
+                                                    className="dropdown-item"
+                                                    data-dusk={`btnUnsubscribe${providerFund.id}`}
+                                                    title="Uitschrijven"
+                                                    onClick={() => {
+                                                        unsubscribe(providerFund);
+                                                        e.close();
+                                                    }}>
+                                                    <em className="mdi mdi-progress-close icon-start" />
+                                                    Uitschrijven
+                                                </div>
                                             )}
 
-                                            {type !== 'archived' ? (
-                                                <td className={'table-td-actions text-right'}>
-                                                    <TableRowActions
-                                                        dataDusk={'btnFundProviderMenu'}
-                                                        content={(e) => (
-                                                            <div className="dropdown dropdown-actions">
-                                                                {providerFund.fund.state != 'closed' &&
-                                                                    providerFund.state === 'unsubscribed' && (
-                                                                        <div
-                                                                            className="dropdown-item"
-                                                                            data-dusk={`btnApplyFund${providerFund.id}`}
-                                                                            title={translate(
-                                                                                'provider_funds.buttons.join_unsubscribed',
-                                                                            )}
-                                                                            onClick={() => {
-                                                                                applyFund(providerFund);
-                                                                                e.close();
-                                                                            }}>
-                                                                            <em className="mdi mdi-send-variant-clock-outline icon-start" />
-                                                                            {translate(
-                                                                                'provider_funds.buttons.join_unsubscribed',
-                                                                            )}
-                                                                        </div>
-                                                                    )}
-
-                                                                {providerFund.fund.state != 'closed' && (
-                                                                    <div
-                                                                        className="dropdown-item"
-                                                                        title="Bekijk"
-                                                                        onClick={() => {
-                                                                            viewOffers(providerFund);
-                                                                            e.close();
-                                                                        }}>
-                                                                        <em className="mdi mdi-eye-outline icon-start" />
-                                                                        Bekijk
-                                                                    </div>
-                                                                )}
-
-                                                                {type == 'active' && (
-                                                                    <div
-                                                                        className="dropdown-item"
-                                                                        data-dusk={`btnUnsubscribe${providerFund.id}`}
-                                                                        title="Uitschrijven"
-                                                                        onClick={() => {
-                                                                            unsubscribe(providerFund);
-                                                                            e.close();
-                                                                        }}>
-                                                                        <em className="mdi mdi-progress-close icon-start" />
-                                                                        Uitschrijven
-                                                                    </div>
-                                                                )}
-
-                                                                {providerFund.can_cancel && (
-                                                                    <div
-                                                                        className="dropdown-item"
-                                                                        title="Cancel"
-                                                                        onClick={() => {
-                                                                            cancelApplications([providerFund]);
-                                                                            e.close();
-                                                                        }}>
-                                                                        <em className="mdi mdi-close-circle-outline icon-start" />
-                                                                        Annuleren
-                                                                    </div>
-                                                                )}
-                                                            </div>
-                                                        )}
-                                                    />
-                                                </td>
-                                            ) : (
-                                                <td className={'table-td-actions text-right'}>
-                                                    <TableEmptyValue />
-                                                </td>
+                                            {providerFund.can_cancel && (
+                                                <div
+                                                    className="dropdown-item"
+                                                    title="Cancel"
+                                                    onClick={() => {
+                                                        cancelApplications([providerFund]);
+                                                        e.close();
+                                                    }}>
+                                                    <em className="mdi mdi-close-circle-outline icon-start" />
+                                                    Annuleren
+                                                </div>
                                             )}
-                                        </tr>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
-            )}
-
-            {loading && (
-                <div className="card-section">
-                    <div className="card-loading">
-                        <div className="mdi mdi-loading mdi-spin" />
-                    </div>
-                </div>
-            )}
-
-            {!loading && providerFunds?.meta?.total == 0 && (
-                <EmptyCard type={'card-section'} title={translate(`provider_funds.empty_block.${type}`)} />
-            )}
-
-            {providerFunds?.meta && (
-                <div className="card-section">
-                    <Paginator
-                        meta={providerFunds.meta}
-                        filters={filterValues}
-                        updateFilters={filterUpdate}
-                        perPageKey={paginatorKey}
-                    />
-                </div>
-            )}
+                                        </div>
+                                    )}
+                                />
+                            </td>
+                        ) : (
+                            <td className={'table-td-actions text-right'}>
+                                <TableEmptyValue />
+                            </td>
+                        )}
+                    </tr>
+                ))}
+            </LoaderTableCard>
         </div>
     );
 }
diff --git a/react/src/dashboard/components/pages/provider-overview/ProviderOverview.tsx b/react/src/dashboard/components/pages/provider-overview/ProviderOverview.tsx
index 484af10ae..43b39c915 100644
--- a/react/src/dashboard/components/pages/provider-overview/ProviderOverview.tsx
+++ b/react/src/dashboard/components/pages/provider-overview/ProviderOverview.tsx
@@ -14,6 +14,7 @@ import { hasPermission } from '../../../helpers/utils';
 import ProductsRequiredNotification from './elements/ProductsRequiredNotification';
 import { Permission } from '../../../props/models/Organization';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
+import classNames from 'classnames';
 
 export default function ProviderOverview() {
     const envData = useEnvData();
@@ -101,9 +102,11 @@ export default function ProviderOverview() {
                                             <StateNavLink
                                                 name={DashboardRoutes.PRODUCT_CREATE}
                                                 params={{ organizationId: activeOrganization.id }}
-                                                className={`button button-primary ${
-                                                    productHardLimitReached ? 'disabled' : ''
-                                                }`}
+                                                className={classNames(
+                                                    'button',
+                                                    'button-primary',
+                                                    productHardLimitReached && 'disabled',
+                                                )}
                                                 id="add_product"
                                                 disabled={productHardLimitReached}>
                                                 <em className="mdi mdi-plus-circle icon-start" />
diff --git a/react/src/dashboard/components/pages/reimbursements-view/ReimbursementsView.tsx b/react/src/dashboard/components/pages/reimbursements-view/ReimbursementsView.tsx
index ab54d7e44..db04a656e 100644
--- a/react/src/dashboard/components/pages/reimbursements-view/ReimbursementsView.tsx
+++ b/react/src/dashboard/components/pages/reimbursements-view/ReimbursementsView.tsx
@@ -25,6 +25,7 @@ import usePushApiError from '../../../hooks/usePushApiError';
 import ReimbursementStateLabel from '../../elements/resource-states/ReimbursementStateLabel';
 import { Permission } from '../../../props/models/Organization';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
+import classNames from 'classnames';
 
 export default function ReimbursementsView() {
     const { id } = useParams();
@@ -328,11 +329,10 @@ export default function ReimbursementsView() {
                                                 </div>
                                                 {activeOrganization.bsn_enabled ? (
                                                     <div
-                                                        className={`${
-                                                            reimbursement.identity_bsn
-                                                                ? 'text-semibold text-black'
-                                                                : 'text-semibold text-muted'
-                                                        }`}>
+                                                        className={classNames(
+                                                            'text-semibold',
+                                                            reimbursement.identity_bsn ? 'text-black' : 'text-muted',
+                                                        )}>
                                                         {reimbursement.identity_bsn || 'Geen BSN'}
                                                     </div>
                                                 ) : (
@@ -356,9 +356,10 @@ export default function ReimbursementsView() {
                                                     {translate('reimbursements.labels.employee')}
                                                 </div>
                                                 <div
-                                                    className={`text-semibold ${
-                                                        reimbursement.employee_id ? 'text-black' : 'text-muted'
-                                                    }`}>
+                                                    className={classNames(
+                                                        'text-semibold',
+                                                        reimbursement.employee_id ? 'text-black' : 'text-muted',
+                                                    )}>
                                                     {reimbursement.employee?.email || 'Niet toegewezen'}
                                                 </div>
                                             </td>
diff --git a/react/src/dashboard/components/pages/reimbursements/Reimbursements.tsx b/react/src/dashboard/components/pages/reimbursements/Reimbursements.tsx
index 199252c28..588944cc2 100644
--- a/react/src/dashboard/components/pages/reimbursements/Reimbursements.tsx
+++ b/react/src/dashboard/components/pages/reimbursements/Reimbursements.tsx
@@ -9,9 +9,6 @@ import usePaginatorService from '../../../modules/paginator/services/usePaginato
 import { useFundService } from '../../../services/FundService';
 import FilterItemToggle from '../../elements/tables/elements/FilterItemToggle';
 import SelectControl from '../../elements/select-control/SelectControl';
-import { hasPermission } from '../../../helpers/utils';
-import EmptyCard from '../../elements/empty-card/EmptyCard';
-import { getStateRouteUrl } from '../../../modules/state_router/Router';
 import useReimbursementsExporter from '../../../services/exporters/useReimbursementsExporter';
 import useImplementationService from '../../../services/ImplementationService';
 import DatePickerControl from '../../elements/forms/controls/DatePickerControl';
@@ -25,7 +22,6 @@ import CardHeaderFilter from '../../elements/tables/elements/CardHeaderFilter';
 import useFilterNext from '../../../modules/filter_next/useFilterNext';
 import { createEnumParam, NumberParam, StringParam } from 'use-query-params';
 import ReimbursementsTable from './elements/ReimbursementsTable';
-import { Permission } from '../../../props/models/Organization';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
 import BlockLabelTabs from '../../elements/block-label-tabs/BlockLabelTabs';
 
@@ -365,24 +361,6 @@ export default function Reimbursements() {
                     filterUpdate={filterUpdate}
                 />
             </div>
-
-            {funds?.length == 0 && (
-                <Fragment>
-                    {hasPermission(activeOrganization, Permission.MANAGE_FUNDS) ? (
-                        <EmptyCard
-                            description={'Je hebt momenteel geen fondsen.'}
-                            button={{
-                                text: 'Fonds toevoegen',
-                                to: getStateRouteUrl(DashboardRoutes.ORGANIZATION_FUNDS, {
-                                    organizationId: activeOrganization.id,
-                                }),
-                            }}
-                        />
-                    ) : (
-                        <EmptyCard description={'Je hebt momenteel geen fondsen.'} />
-                    )}
-                </Fragment>
-            )}
         </Fragment>
     );
 }
diff --git a/react/src/dashboard/components/pages/reimbursements/elements/ReimbursementsTable.tsx b/react/src/dashboard/components/pages/reimbursements/elements/ReimbursementsTable.tsx
index aae5814b7..4f273499d 100644
--- a/react/src/dashboard/components/pages/reimbursements/elements/ReimbursementsTable.tsx
+++ b/react/src/dashboard/components/pages/reimbursements/elements/ReimbursementsTable.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
 import Organization from '../../../../props/models/Organization';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
-import Paginator from '../../../../modules/paginator/components/Paginator';
 import { PaginationData } from '../../../../props/ApiResponses';
 import { FilterModel, FilterSetter } from '../../../../modules/filter_next/types/FilterParams';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
@@ -12,7 +10,6 @@ import TableRowActions from '../../../elements/tables/TableRowActions';
 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';
 import { DashboardRoutes } from '../../../../modules/state_router/RouterBuilder';
@@ -34,144 +31,107 @@ export default function ReimbursementsTable({
 }) {
     const reimbursementService = useReimbursementsService();
 
-    const { headElement, configsElement } = useConfigurableTable(reimbursementService.getColumns());
-
     return (
         <LoaderTableCard
+            dusk="reimbursementsList"
             loading={loading}
-            empty={reimbursements.meta.total == 0}
-            emptyTitle={'Geen declaraties gevonden'}>
-            <div className="card-section" data-dusk="reimbursementsList">
-                <div className="card-block card-block-table">
-                    {configsElement}
-
-                    <TableTopScroller>
-                        <table className="table">
-                            {headElement}
-
-                            <tbody>
-                                {reimbursements.data.map((reimbursement) => (
+            empty={reimbursements?.meta?.total == 0}
+            emptyTitle={'Geen declaraties gevonden'}
+            columns={reimbursementService.getColumns()}
+            paginator={{ key: paginatorKey, data: reimbursements, filterValues, filterUpdate }}>
+            {reimbursements?.data?.map((reimbursement) => (
+                <StateNavLink
+                    customElement={'tr'}
+                    name={DashboardRoutes.REIMBURSEMENT}
+                    params={{ id: reimbursement.id, organizationId: organization.id }}
+                    key={reimbursement.id}
+                    dataDusk={`tableReimbursementRow${reimbursement.id}`}
+                    className={classNames('tr-clickable', reimbursement.expired && 'tr-warning')}>
+                    <td>
+                        <div
+                            className="text-primary text-semibold"
+                            data-dusk={`reimbursementIdentityEmail${reimbursement.id}`}>
+                            {strLimit(reimbursement.identity_email, 25) || 'Geen E-mail'}
+                        </div>
+
+                        {organization.bsn_enabled && (
+                            <div className="text-strong text-md text-muted-dark">
+                                {reimbursement.identity_bsn ? 'BSN: ' + reimbursement.identity_bsn : 'Geen BSN'}
+                            </div>
+                        )}
+                    </td>
+                    <td>
+                        <div className="text-primary text-semibold">{strLimit(reimbursement.fund.name, 25)}</div>
+                        <div className="text-strong text-md text-muted-dark">
+                            {strLimit(reimbursement.implementation_name, 25)}
+                        </div>
+                    </td>
+
+                    <td className="nowrap" data-dusk={'reimbursementAmount' + reimbursement.id}>
+                        {reimbursement.amount_locale}
+                    </td>
+
+                    <td>
+                        <div className="text-primary text-semibold">
+                            {reimbursement.created_at_locale.split(' - ')[0]}
+                        </div>
+                        <div className="text-strong text-md text-muted-dark">
+                            {reimbursement.created_at_locale.split(' - ')[1]}
+                        </div>
+                    </td>
+
+                    <td>{reimbursement.lead_time_locale}</td>
+
+                    <td className={classNames(reimbursement.employee ? 'text-primary' : 'text-muted-dark')}>
+                        {strLimit(reimbursement.employee?.email || 'Niet toegewezen', 25)}
+                    </td>
+
+                    <td className={classNames(reimbursement.expired ? 'text-primary' : 'text-muted-dark')}>
+                        {reimbursement.expired ? 'Ja' : 'Nee'}
+                    </td>
+
+                    <td>
+                        <ReimbursementStateLabel
+                            reimbursement={reimbursement}
+                            dusk={'reimbursementState' + reimbursement.id}
+                        />
+                    </td>
+
+                    <td>
+                        {reimbursement.voucher_transaction?.state == 'pending' && (
+                            <Label type="default">{reimbursement.voucher_transaction.state_locale}</Label>
+                        )}
+
+                        {reimbursement.voucher_transaction?.state == 'success' && (
+                            <Label type="success">{reimbursement.voucher_transaction.state_locale}</Label>
+                        )}
+
+                        {reimbursement.voucher_transaction?.state == 'canceled' && (
+                            <Label type="danger">{reimbursement.voucher_transaction.state_locale}</Label>
+                        )}
+
+                        {!reimbursement.voucher_transaction && <TableEmptyValue />}
+                    </td>
+
+                    <td className={'table-td-actions text-right'}>
+                        <TableRowActions
+                            content={() => (
+                                <div className="dropdown dropdown-actions">
                                     <StateNavLink
-                                        customElement={'tr'}
                                         name={DashboardRoutes.REIMBURSEMENT}
-                                        params={{ id: reimbursement.id, organizationId: organization.id }}
-                                        key={reimbursement.id}
-                                        dataDusk={`tableReimbursementRow${reimbursement.id}`}
-                                        className={classNames('tr-clickable', reimbursement.expired && 'tr-warning')}>
-                                        <td>
-                                            {/* Email */}
-                                            <div
-                                                className="text-primary text-semibold"
-                                                data-dusk={`reimbursementIdentityEmail${reimbursement.id}`}>
-                                                {strLimit(reimbursement.identity_email, 25) || 'Geen E-mail'}
-                                            </div>
-
-                                            {/* BSN */}
-                                            {organization.bsn_enabled && (
-                                                <div className="text-strong text-md text-muted-dark">
-                                                    {reimbursement.identity_bsn
-                                                        ? 'BSN: ' + reimbursement.identity_bsn
-                                                        : 'Geen BSN'}
-                                                </div>
-                                            )}
-                                        </td>
-                                        <td>
-                                            <div className="text-primary text-semibold">
-                                                {strLimit(reimbursement.fund.name, 25)}
-                                            </div>
-                                            <div className="text-strong text-md text-muted-dark">
-                                                {strLimit(reimbursement.implementation_name, 25)}
-                                            </div>
-                                        </td>
-
-                                        {/* Amount */}
-                                        <td className="nowrap" data-dusk={'reimbursementAmount' + reimbursement.id}>
-                                            {reimbursement.amount_locale}
-                                        </td>
-
-                                        <td>
-                                            <div className="text-primary text-semibold">
-                                                {reimbursement.created_at_locale.split(' - ')[0]}
-                                            </div>
-                                            <div className="text-strong text-md text-muted-dark">
-                                                {reimbursement.created_at_locale.split(' - ')[1]}
-                                            </div>
-                                        </td>
-
-                                        <td>{reimbursement.lead_time_locale}</td>
-
-                                        <td className={reimbursement.employee ? 'text-primary' : 'text-muted-dark'}>
-                                            {strLimit(reimbursement.employee?.email || 'Niet toegewezen', 25)}
-                                        </td>
-
-                                        <td className={reimbursement.expired ? 'text-primary' : 'text-muted-dark'}>
-                                            {reimbursement.expired ? 'Ja' : 'Nee'}
-                                        </td>
-
-                                        <td>
-                                            <ReimbursementStateLabel
-                                                reimbursement={reimbursement}
-                                                dusk={'reimbursementState' + reimbursement.id}
-                                            />
-                                        </td>
-
-                                        <td>
-                                            {reimbursement.voucher_transaction?.state == 'pending' && (
-                                                <Label type="default">
-                                                    {reimbursement.voucher_transaction.state_locale}
-                                                </Label>
-                                            )}
-
-                                            {reimbursement.voucher_transaction?.state == 'success' && (
-                                                <Label type="success">
-                                                    {reimbursement.voucher_transaction.state_locale}
-                                                </Label>
-                                            )}
-
-                                            {reimbursement.voucher_transaction?.state == 'canceled' && (
-                                                <Label type="danger">
-                                                    {reimbursement.voucher_transaction.state_locale}
-                                                </Label>
-                                            )}
-
-                                            {!reimbursement.voucher_transaction && <TableEmptyValue />}
-                                        </td>
-
-                                        <td className={'table-td-actions text-right'}>
-                                            <TableRowActions
-                                                content={() => (
-                                                    <div className="dropdown dropdown-actions">
-                                                        <StateNavLink
-                                                            name={DashboardRoutes.REIMBURSEMENT}
-                                                            className="dropdown-item"
-                                                            params={{
-                                                                id: reimbursement.id,
-                                                                organizationId: organization.id,
-                                                            }}>
-                                                            <em className="mdi mdi-eye icon-start" /> Bekijken
-                                                        </StateNavLink>
-                                                    </div>
-                                                )}
-                                            />
-                                        </td>
+                                        className="dropdown-item"
+                                        params={{
+                                            id: reimbursement.id,
+                                            organizationId: organization.id,
+                                        }}>
+                                        <em className="mdi mdi-eye icon-start" /> Bekijken
                                     </StateNavLink>
-                                ))}
-                            </tbody>
-                        </table>
-                    </TableTopScroller>
-                </div>
-            </div>
-
-            {reimbursements.meta && (
-                <div className="card-section">
-                    <Paginator
-                        meta={reimbursements.meta}
-                        filters={filterValues}
-                        updateFilters={filterUpdate}
-                        perPageKey={paginatorKey}
-                    />
-                </div>
-            )}
+                                </div>
+                            )}
+                        />
+                    </td>
+                </StateNavLink>
+            ))}
         </LoaderTableCard>
     );
 }
diff --git a/react/src/dashboard/components/pages/reservations-view/elements/ReservationExtraPaymentRefundsCard.tsx b/react/src/dashboard/components/pages/reservations-view/elements/ReservationExtraPaymentRefundsCard.tsx
index 79eb8344b..2339a62b1 100644
--- a/react/src/dashboard/components/pages/reservations-view/elements/ReservationExtraPaymentRefundsCard.tsx
+++ b/react/src/dashboard/components/pages/reservations-view/elements/ReservationExtraPaymentRefundsCard.tsx
@@ -2,20 +2,15 @@ import React from 'react';
 import ExtraPaymentRefund from '../../../../props/models/ExtraPaymentRefund';
 import useTranslate from '../../../../hooks/useTranslate';
 import Label from '../../../elements/image_cropper/Label';
-import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
 import useProductReservationService from '../../../../services/ProductReservationService';
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
+import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
 
 export default function ReservationExtraPaymentRefundsCard({ refunds }: { refunds: Array<ExtraPaymentRefund> }) {
     const translate = useTranslate();
 
     const productReservationService = useProductReservationService();
 
-    const { headElement, configsElement } = useConfigurableTable(
-        productReservationService.getExtraPaymentRefundsColumns(),
-    );
-
     return (
         <div className="card">
             <div className="card-header">
@@ -26,46 +21,33 @@ export default function ReservationExtraPaymentRefundsCard({ refunds }: { refund
                 </div>
             </div>
 
-            <div className="card-section">
-                <div className="card-block card-block-table form">
-                    {configsElement}
-
-                    <TableTopScroller>
-                        <table className="table">
-                            {headElement}
-
-                            <tbody>
-                                {refunds?.map((refund) => (
-                                    <tr key={refund.id}>
-                                        <td>
-                                            <strong className="text-strong text-md text-muted-dark">
-                                                {refund.created_at_locale}
-                                            </strong>
-                                        </td>
-                                        <td>{refund.amount_locale}</td>
-                                        <td>
-                                            {refund.state == 'refunded' && (
-                                                <Label type="success">{refund.state_locale}</Label>
-                                            )}
-
-                                            {['canceled', 'failed'].includes(refund.state) && (
-                                                <Label type="danger">{refund.state_locale}</Label>
-                                            )}
-
-                                            {!['refunded', 'canceled', 'failed'].includes(refund.state) && (
-                                                <Label type="warning">{refund.state_locale}</Label>
-                                            )}
-                                        </td>
-                                        <td className={'table-td-actions text-right'}>
-                                            <TableEmptyValue />
-                                        </td>
-                                    </tr>
-                                ))}
-                            </tbody>
-                        </table>
-                    </TableTopScroller>
-                </div>
-            </div>
+            <LoaderTableCard
+                empty={refunds.length === 0}
+                emptyTitle={'Geen restituties'}
+                columns={productReservationService.getExtraPaymentRefundsColumns()}>
+                {refunds?.map((refund) => (
+                    <tr key={refund.id}>
+                        <td>
+                            <strong className="text-strong text-md text-muted-dark">{refund.created_at_locale}</strong>
+                        </td>
+                        <td>{refund.amount_locale}</td>
+                        <td>
+                            {refund.state == 'refunded' && <Label type="success">{refund.state_locale}</Label>}
+
+                            {['canceled', 'failed'].includes(refund.state) && (
+                                <Label type="danger">{refund.state_locale}</Label>
+                            )}
+
+                            {!['refunded', 'canceled', 'failed'].includes(refund.state) && (
+                                <Label type="warning">{refund.state_locale}</Label>
+                            )}
+                        </td>
+                        <td className={'table-td-actions text-right'}>
+                            <TableEmptyValue />
+                        </td>
+                    </tr>
+                ))}
+            </LoaderTableCard>
         </div>
     );
 }
diff --git a/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationExtraInformationPane.tsx b/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationExtraInformationPane.tsx
index 37f70e1d1..6d9d84c4e 100644
--- a/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationExtraInformationPane.tsx
+++ b/react/src/dashboard/components/pages/reservations-view/elements/panes/ReservationExtraInformationPane.tsx
@@ -1,4 +1,5 @@
 import React, { Dispatch, SetStateAction, useCallback, useMemo } from 'react';
+import classNames from 'classnames';
 import Organization from '../../../../../props/models/Organization';
 import Reservation, { ReservationCustomFieldValue } from '../../../../../props/models/Reservation';
 import KeyValueItem from '../../../../elements/key-value/KeyValueItem';
@@ -107,7 +108,7 @@ export default function ReservationExtraInformationPane({
                     <KeyValueItem key={index} label={field.reservation_field.label}>
                         <BlockInlineEdit
                             onClick={() => editCustomFieldValue(field)}
-                            className={field.file ? 'flex flex-grow' : null}
+                            className={classNames(field.file && 'flex flex-grow')}
                             editDusk={`editCustomFieldBtn${field.id}`}>
                             {field.file ? (
                                 <FileAttachmentsList attachments={[{ file: field.file }]} />
diff --git a/react/src/dashboard/components/pages/reservations/elements/ReservationsTable.tsx b/react/src/dashboard/components/pages/reservations/elements/ReservationsTable.tsx
index 491208bf9..e72755d7c 100644
--- a/react/src/dashboard/components/pages/reservations/elements/ReservationsTable.tsx
+++ b/react/src/dashboard/components/pages/reservations/elements/ReservationsTable.tsx
@@ -1,16 +1,14 @@
 import React, { ReactNode, useMemo } from 'react';
 import { PaginationData } from '../../../../props/ApiResponses';
 import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
 import TableCheckboxControl from '../../../elements/tables/elements/TableCheckboxControl';
-import Paginator from '../../../../modules/paginator/components/Paginator';
 import Organization from '../../../../props/models/Organization';
 import { FilterModel, FilterScope, FilterSetter } from '../../../../modules/filter_next/types/FilterParams';
 import Reservation from '../../../../props/models/Reservation';
-import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
 import useProductReservationService from '../../../../services/ProductReservationService';
 import ReservationsTableRowProvider from './ReservationsTableRowProvider';
 import ReservationsTableRowSponsor from './ReservationsTableRowSponsor';
+import Paginator from '../../../../modules/paginator/components/Paginator';
 
 export default function ReservationsTable({
     fetchReservations,
@@ -52,60 +50,48 @@ export default function ReservationsTable({
         return organization.can_view_provider_extra_payments || hasExtraPaymentsOnPage;
     }, [organization, reservations]);
 
-    const { headElement, configsElement } = useConfigurableTable(
-        productReservationService.getColumns(showExtraPayments, type === 'sponsor'),
-        {
-            filter: filter,
-            sortable: true,
-            trPrepend: toggleAll ? (
-                <th className="th-narrow">
-                    <TableCheckboxControl
-                        checked={selected.length == reservations?.data?.length}
-                        onClick={(e) => toggleAll(e, reservations?.data)}
-                    />
-                </th>
-            ) : null,
-        },
-    );
-
     return (
-        <LoaderTableCard loading={loading} empty={reservations.meta.total == 0} emptyTitle={'Geen reserveringen.'}>
-            {reservations.meta.total > 0 && (
-                <div className="card-section card-section-padless">
-                    {configsElement}
-
-                    <TableTopScroller>
-                        <table className="table form">
-                            {headElement}
-
-                            <tbody>
-                                {reservations.data?.map((reservation) =>
-                                    type === 'sponsor' ? (
-                                        <ReservationsTableRowSponsor
-                                            key={reservation.id}
-                                            organization={organization}
-                                            reservation={reservation}
-                                            showExtraPayments={showExtraPayments}
-                                            selected={selected}
-                                            toggle={toggle}
-                                        />
-                                    ) : (
-                                        <ReservationsTableRowProvider
-                                            key={reservation.id}
-                                            reservation={reservation}
-                                            fetchReservations={fetchReservations}
-                                            organization={organization}
-                                            showExtraPayments={showExtraPayments}
-                                            selected={selected}
-                                            toggle={toggle}
-                                        />
-                                    ),
-                                )}
-                            </tbody>
-                        </table>
-                    </TableTopScroller>
-                </div>
-            )}
+        <>
+            <LoaderTableCard
+                loading={loading}
+                empty={reservations?.meta?.total == 0}
+                emptyTitle={'Geen reserveringen.'}
+                columns={productReservationService.getColumns(showExtraPayments, type === 'sponsor')}
+                tableOptions={{
+                    filter,
+                    sortable: true,
+                    trPrepend: toggleAll ? (
+                        <th className="th-narrow">
+                            <TableCheckboxControl
+                                checked={selected.length == reservations?.data?.length}
+                                onClick={(e) => toggleAll(e, reservations?.data)}
+                            />
+                        </th>
+                    ) : null,
+                }}>
+                {reservations?.data?.map((reservation) =>
+                    type === 'sponsor' ? (
+                        <ReservationsTableRowSponsor
+                            key={reservation.id}
+                            organization={organization}
+                            reservation={reservation}
+                            showExtraPayments={showExtraPayments}
+                            selected={selected}
+                            toggle={toggle}
+                        />
+                    ) : (
+                        <ReservationsTableRowProvider
+                            key={reservation.id}
+                            reservation={reservation}
+                            fetchReservations={fetchReservations}
+                            organization={organization}
+                            showExtraPayments={showExtraPayments}
+                            selected={selected}
+                            toggle={toggle}
+                        />
+                    ),
+                )}
+            </LoaderTableCard>
 
             {children}
 
@@ -119,6 +105,6 @@ export default function ReservationsTable({
                     />
                 </div>
             )}
-        </LoaderTableCard>
+        </>
     );
 }
diff --git a/react/src/dashboard/components/pages/sponsor-product/elements/ProductMonitoredHistoryCard.tsx b/react/src/dashboard/components/pages/sponsor-product/elements/ProductMonitoredHistoryCard.tsx
index 4d7c0e017..9883bca16 100644
--- a/react/src/dashboard/components/pages/sponsor-product/elements/ProductMonitoredHistoryCard.tsx
+++ b/react/src/dashboard/components/pages/sponsor-product/elements/ProductMonitoredHistoryCard.tsx
@@ -3,16 +3,14 @@ import React, { useState } from 'react';
 import useTranslate from '../../../../hooks/useTranslate';
 import BlockLabelTabs from '../../../elements/block-label-tabs/BlockLabelTabs';
 import ProductMonitoredHistoryCardItem from './ProductMonitoredHistoryCardItem';
-import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
 import { useFundService } from '../../../../services/FundService';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
+import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
 
 export default function ProductMonitoredHistoryCard({ product }: { product: SponsorProduct }) {
     const translate = useTranslate();
     const [historyView, setHistoryView] = useState<'compare' | 'diff'>('compare');
 
     const fundService = useFundService();
-    const { headElement, configsElement } = useConfigurableTable(fundService.getProductHistoryColumns());
 
     return (
         <div className="card">
@@ -30,35 +28,14 @@ export default function ProductMonitoredHistoryCard({ product }: { product: Spon
                 />
             </div>
 
-            {product?.monitored_history?.length > 0 && (
-                <div className="card-section">
-                    <div className="card-block card-block-table">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {product?.monitored_history?.map((item, id) => (
-                                        <ProductMonitoredHistoryCardItem
-                                            key={id}
-                                            item={item}
-                                            historyView={historyView}
-                                        />
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
-            )}
-
-            {product?.monitored_history.length == 0 && (
-                <div className="card-section text-center">
-                    <div className="card-subtitle">Er zijn geen wijzigingen geregistreerd.</div>
-                </div>
-            )}
+            <LoaderTableCard
+                empty={product?.monitored_history.length == 0}
+                emptyTitle={'Er zijn geen wijzigingen geregistreerd.'}
+                columns={fundService.getProductHistoryColumns()}>
+                {product?.monitored_history?.map((item, id) => (
+                    <ProductMonitoredHistoryCardItem key={id} item={item} historyView={historyView} />
+                ))}
+            </LoaderTableCard>
         </div>
     );
 }
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 f14f33f6e..67358d299 100644
--- a/react/src/dashboard/components/pages/sponsor-product/elements/ProductMonitoredHistoryCardFunds.tsx
+++ b/react/src/dashboard/components/pages/sponsor-product/elements/ProductMonitoredHistoryCardFunds.tsx
@@ -1,16 +1,15 @@
 import React, { Fragment } from 'react';
 import SponsorProduct from '../../../../props/models/Sponsor/SponsorProduct';
 import TableEntityMain from '../../../elements/tables/elements/TableEntityMain';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
 import TableRowActions from '../../../elements/tables/TableRowActions';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
-import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
 import { useFundService } from '../../../../services/FundService';
 import Organization from '../../../../props/models/Organization';
 import classNames from 'classnames';
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
 import Label from '../../../elements/image_cropper/Label';
 import { DashboardRoutes } from '../../../../modules/state_router/RouterBuilder';
+import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
 
 export default function ProductMonitoredHistoryCardFunds({
     type = 'card',
@@ -22,120 +21,113 @@ export default function ProductMonitoredHistoryCardFunds({
     activeOrganization: Organization;
 }) {
     const fundService = useFundService();
-    const { headElement, configsElement } = useConfigurableTable(fundService.getColumnsProductFunds(), {
-        hasTooltips: type !== 'table',
-    });
 
     const tableElement = (
-        <TableTopScroller>
-            <table className="table">
-                {headElement}
-
-                <tbody>
-                    {product.funds?.map((fund) => (
-                        <StateNavLink
-                            disabled={!fund.fund_provider_id}
-                            name={DashboardRoutes.FUND_PROVIDER_PRODUCT}
-                            params={{
-                                id: product.id,
-                                fundId: fund.id,
-                                fundProviderId: fund.fund_provider_id,
-                                organizationId: fund.organization_id,
-                            }}
-                            className={classNames(
-                                fund.fund_provider_id && 'tr-clickable',
-                                type === 'table' && 'tr-gray',
-                                type === 'table' && 'tr-narrow',
-                            )}
-                            customElement={'tr'}
-                            key={fund.id}>
-                            <td>
-                                <TableEntityMain
-                                    title={fund.name}
-                                    mediaPlaceholder={'fund'}
-                                    subtitle={fund.type_locale}
-                                    media={fund?.logo}
-                                />
-                            </td>
-                            <td>
-                                {fund.implementation ? (
-                                    <Fragment>
-                                        {fund.state === 'approved' ? (
-                                            <a
-                                                title={'Bekijk aanbod op webshop'}
-                                                onClick={(e) => e.stopPropagation()}
-                                                className="text-primary text-semibold flex flex-gap-sm text-underline"
-                                                href={fund.url_product}
-                                                target={'_blank'}
-                                                rel="noreferrer">
-                                                {fund.implementation?.name}
-                                                <em className="mdi mdi-link-variant icon-end" />
-                                            </a>
-                                        ) : (
-                                            fund.implementation?.name
-                                        )}
-                                    </Fragment>
+        <LoaderTableCard
+            empty={product.funds?.length === 0}
+            emptyTitle={'Geen fondsen'}
+            columns={fundService.getColumnsProductFunds()}
+            tableOptions={{ hasTooltips: type !== 'table' }}>
+            {product.funds?.map((fund) => (
+                <StateNavLink
+                    disabled={!fund.fund_provider_id}
+                    name={DashboardRoutes.FUND_PROVIDER_PRODUCT}
+                    params={{
+                        id: product.id,
+                        fundId: fund.id,
+                        fundProviderId: fund.fund_provider_id,
+                        organizationId: fund.organization_id,
+                    }}
+                    className={classNames(
+                        fund.fund_provider_id && 'tr-clickable',
+                        type === 'table' && 'tr-gray',
+                        type === 'table' && 'tr-narrow',
+                    )}
+                    customElement={'tr'}
+                    key={fund.id}>
+                    <td>
+                        <TableEntityMain
+                            title={fund.name}
+                            mediaPlaceholder={'fund'}
+                            subtitle={fund.type_locale}
+                            media={fund?.logo}
+                        />
+                    </td>
+                    <td>
+                        {fund.implementation ? (
+                            <Fragment>
+                                {fund.state === 'approved' ? (
+                                    <a
+                                        title={'Bekijk aanbod op webshop'}
+                                        onClick={(e) => e.stopPropagation()}
+                                        className="text-primary text-semibold flex flex-gap-sm text-underline"
+                                        href={fund.url_product}
+                                        target={'_blank'}
+                                        rel="noreferrer">
+                                        {fund.implementation?.name}
+                                        <em className="mdi mdi-link-variant icon-end" />
+                                    </a>
                                 ) : (
-                                    <TableEmptyValue />
+                                    fund.implementation?.name
                                 )}
-                            </td>
-                            <td>
-                                {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 text-right'}>
-                                <TableRowActions
-                                    disabled={
-                                        !fund.fund_provider_id && !(fund.state === 'approved' && fund.url_product)
-                                    }
-                                    content={() => (
-                                        <div className="dropdown dropdown-actions">
-                                            {fund.fund_provider_id && (
-                                                <StateNavLink
-                                                    name={DashboardRoutes.FUND_PROVIDER_PRODUCT}
-                                                    params={{
-                                                        id: product.id,
-                                                        fundId: fund.id,
-                                                        fundProviderId: fund.fund_provider_id,
-                                                        organizationId: fund.organization_id,
-                                                    }}
-                                                    className="dropdown-item">
-                                                    Bekijk aanbod
-                                                </StateNavLink>
-                                            )}
+                            </Fragment>
+                        ) : (
+                            <TableEmptyValue />
+                        )}
+                    </td>
+                    <td>
+                        {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 text-right'}>
+                        <TableRowActions
+                            disabled={!fund.fund_provider_id && !(fund.state === 'approved' && fund.url_product)}
+                            content={() => (
+                                <div className="dropdown dropdown-actions">
+                                    {fund.fund_provider_id && (
+                                        <StateNavLink
+                                            name={DashboardRoutes.FUND_PROVIDER_PRODUCT}
+                                            params={{
+                                                id: product.id,
+                                                fundId: fund.id,
+                                                fundProviderId: fund.fund_provider_id,
+                                                organizationId: fund.organization_id,
+                                            }}
+                                            className="dropdown-item">
+                                            Bekijk aanbod
+                                        </StateNavLink>
+                                    )}
 
-                                            {fund.fund_provider_id && (
-                                                <StateNavLink
-                                                    name={DashboardRoutes.FUND_PROVIDER}
-                                                    params={{
-                                                        id: fund.fund_provider_id,
-                                                        fundId: fund.id,
-                                                        organizationId: fund.organization_id,
-                                                    }}
-                                                    className="dropdown-item">
-                                                    Bekijk aanbieder
-                                                </StateNavLink>
-                                            )}
+                                    {fund.fund_provider_id && (
+                                        <StateNavLink
+                                            name={DashboardRoutes.FUND_PROVIDER}
+                                            params={{
+                                                id: fund.fund_provider_id,
+                                                fundId: fund.id,
+                                                organizationId: fund.organization_id,
+                                            }}
+                                            className="dropdown-item">
+                                            Bekijk aanbieder
+                                        </StateNavLink>
+                                    )}
 
-                                            {fund.state === 'approved' && fund.url_product && (
-                                                <a
-                                                    className="dropdown-item"
-                                                    href={fund.url_product}
-                                                    target={'_blank'}
-                                                    rel="noreferrer">
-                                                    Bekijk aanbod op webshop
-                                                </a>
-                                            )}
-                                        </div>
+                                    {fund.state === 'approved' && fund.url_product && (
+                                        <a
+                                            className="dropdown-item"
+                                            href={fund.url_product}
+                                            target={'_blank'}
+                                            rel="noreferrer">
+                                            Bekijk aanbod op webshop
+                                        </a>
                                     )}
-                                />
-                            </td>
-                        </StateNavLink>
-                    ))}
-                </tbody>
-            </table>
-        </TableTopScroller>
+                                </div>
+                            )}
+                        />
+                    </td>
+                </StateNavLink>
+            ))}
+        </LoaderTableCard>
     );
 
     if (type === 'table') {
@@ -158,12 +150,7 @@ export default function ProductMonitoredHistoryCardFunds({
                     </div>
                 </div>
             </div>
-            <div className="card-section">
-                <div className="card-block card-block-table">
-                    {configsElement}
-                    {tableElement}
-                </div>
-            </div>
+            {tableElement}
         </div>
     );
 }
diff --git a/react/src/dashboard/components/pages/sponsor-products/SponsorProducts.tsx b/react/src/dashboard/components/pages/sponsor-products/SponsorProducts.tsx
index 4c30529e6..10ec93db7 100644
--- a/react/src/dashboard/components/pages/sponsor-products/SponsorProducts.tsx
+++ b/react/src/dashboard/components/pages/sponsor-products/SponsorProducts.tsx
@@ -1,10 +1,10 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
+import LoaderTableCard from '../../elements/loader-table-card/LoaderTableCard';
 import useSetProgress from '../../../hooks/useSetProgress';
 import useProductService from '../../../services/ProductService';
 import { PaginationData } from '../../../props/ApiResponses';
-import Paginator from '../../../modules/paginator/components/Paginator';
 import usePaginatorService from '../../../modules/paginator/services/usePaginatorService';
 import useTranslate from '../../../hooks/useTranslate';
 import ClickOutside from '../../elements/click-outside/ClickOutside';
@@ -19,9 +19,7 @@ import DatePickerControl from '../../elements/forms/controls/DatePickerControl';
 import { dateFormat, dateParse } from '../../../helpers/dates';
 import { useFundService } from '../../../services/FundService';
 import Fund from '../../../props/models/Fund';
-import EmptyCard from '../../elements/empty-card/EmptyCard';
 import SelectControlOptionsFund from '../../elements/select-control/templates/SelectControlOptionsFund';
-import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
 import BlockLabelTabs from '../../elements/block-label-tabs/BlockLabelTabs';
 
 export default function SponsorProducts() {
@@ -101,10 +99,8 @@ export default function SponsorProducts() {
         },
     );
 
-    const columns = productService.getColumnsSponsor(view);
-    const { headElement, configsElement } = useConfigurableTable(columns);
-
     const { resetFilters: resetFilters } = filter;
+    const columns = productService.getColumnsSponsor(view);
 
     const fetchProducts = useCallback(() => {
         setProgress(0);
@@ -154,7 +150,7 @@ export default function SponsorProducts() {
         <div className="card">
             <div className="card-header">
                 <div className="card-title flex flex-grow">
-                    {translate('products.offers')} ({products.meta.total})
+                    {translate('products.offers')} ({products?.meta?.total})
                 </div>
 
                 <div className="card-header-filters form">
@@ -329,50 +325,31 @@ export default function SponsorProducts() {
                 </div>
             </div>
 
-            {loading ? (
-                <LoadingCard type={'card-section'} />
-            ) : (
-                <Fragment>
-                    {products?.meta?.total > 0 && (
-                        <div className="card-section">
-                            <div className="card-block card-block-table">
-                                {configsElement}
-
-                                {view == 'products' ? (
-                                    <SponsorProductsTable
-                                        columns={columns}
-                                        products={products?.data}
-                                        headElement={headElement}
-                                        activeOrganization={activeOrganization}
-                                    />
-                                ) : (
-                                    <SponsorProductsChangesTable
-                                        columns={columns}
-                                        products={products?.data}
-                                        headElement={headElement}
-                                        activeOrganization={activeOrganization}
-                                    />
-                                )}
-                            </div>
-                        </div>
-                    )}
-
-                    {products?.meta?.total === 0 && (
-                        <EmptyCard title={'Er zijn momenteel geen aanbiedingen.'} type={'card-section'} />
-                    )}
-
-                    {products?.meta && (
-                        <div className="card-section">
-                            <Paginator
-                                meta={products.meta}
-                                filters={filter.values}
-                                updateFilters={filter.update}
-                                perPageKey={paginatorKey}
-                            />
-                        </div>
-                    )}
-                </Fragment>
-            )}
+            <LoaderTableCard
+                loading={loading}
+                empty={products?.meta?.total === 0}
+                emptyTitle={'Er zijn momenteel geen aanbiedingen.'}
+                columns={columns}
+                paginator={{
+                    key: paginatorKey,
+                    data: products,
+                    filterValues: filter.values,
+                    filterUpdate: filter.update,
+                }}>
+                {view == 'products' ? (
+                    <SponsorProductsTable
+                        columns={columns}
+                        products={products?.data}
+                        activeOrganization={activeOrganization}
+                    />
+                ) : (
+                    <SponsorProductsChangesTable
+                        columns={columns}
+                        products={products?.data}
+                        activeOrganization={activeOrganization}
+                    />
+                )}
+            </LoaderTableCard>
         </div>
     );
 }
diff --git a/react/src/dashboard/components/pages/sponsor-products/elements/SponsorProductsChangesTable.tsx b/react/src/dashboard/components/pages/sponsor-products/elements/SponsorProductsChangesTable.tsx
index 737ba0041..e0370f89f 100644
--- a/react/src/dashboard/components/pages/sponsor-products/elements/SponsorProductsChangesTable.tsx
+++ b/react/src/dashboard/components/pages/sponsor-products/elements/SponsorProductsChangesTable.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, ReactNode, useCallback, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useState } from 'react';
 import { strLimit } from '../../../../helpers/string';
 import TableRowActions from '../../../elements/tables/TableRowActions';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
@@ -8,22 +8,18 @@ import { ConfigurableTableColumn } from '../../vouchers/hooks/useConfigurableTab
 import ProductMonitoredHistoryCardFunds from '../../sponsor-product/elements/ProductMonitoredHistoryCardFunds';
 import TableEntityMain from '../../../elements/tables/elements/TableEntityMain';
 import Organization from '../../../../props/models/Organization';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
 import { DashboardRoutes } from '../../../../modules/state_router/RouterBuilder';
 
 export default function SponsorProductsChangesTable({
     columns,
     products = null,
-    headElement = null,
     activeOrganization,
 }: {
     columns: Array<ConfigurableTableColumn>;
     products: Array<SponsorProduct>;
-    headElement: ReactNode;
     activeOrganization: Organization;
 }) {
     const [shownIds, setShownIds] = useState<Array<number>>([]);
-    const tableRef = useRef<HTMLTableElement>(null);
 
     const toggleCollapsed = useCallback((e: { stopPropagation: () => void }, id: number) => {
         e.stopPropagation();
@@ -33,84 +29,70 @@ export default function SponsorProductsChangesTable({
         });
     }, []);
 
-    return (
-        <TableTopScroller onScroll={() => tableRef.current?.click()}>
-            <table className="table">
-                {headElement}
+    return products?.map((product, index) => (
+        <Fragment key={index}>
+            <StateNavLink
+                name={DashboardRoutes.SPONSOR_PRODUCT}
+                params={{ productId: product?.id, organizationId: activeOrganization.id }}
+                className={'tr-clickable'}
+                customElement={'tr'}>
+                <td title={product.name}>
+                    <TableEntityMain
+                        title={strLimit(product.name, 64)}
+                        subtitle={strLimit(product.organization.name, 64)}
+                        media={product.photos[0]}
+                        mediaSize={'md'}
+                        mediaRound={false}
+                        mediaPlaceholder={'product'}
+                        collapsedClicked={(e) => toggleCollapsed(e, product.id)}
+                        collapsed={!shownIds.includes(product.id)}
+                    />
+                </td>
 
-                <tbody>
-                    {products?.map((product, index) => (
-                        <Fragment key={index}>
-                            <StateNavLink
-                                name={DashboardRoutes.SPONSOR_PRODUCT}
-                                params={{ productId: product?.id, organizationId: activeOrganization.id }}
-                                className={'tr-clickable'}
-                                customElement={'tr'}>
-                                <td title={product.name}>
-                                    <TableEntityMain
-                                        title={strLimit(product.name, 64)}
-                                        subtitle={strLimit(product.organization.name, 64)}
-                                        media={product.photos[0]}
-                                        mediaSize={'md'}
-                                        mediaRound={false}
-                                        mediaPlaceholder={'product'}
-                                        collapsedClicked={(e) => toggleCollapsed(e, product.id)}
-                                        collapsed={!shownIds.includes(product.id)}
-                                    />
-                                </td>
+                <td>
+                    <TableDateTime value={product.last_monitored_changed_at_locale} />
+                </td>
 
-                                <td>
-                                    <TableDateTime value={product.last_monitored_changed_at_locale} />
-                                </td>
+                <td>{product.monitored_changes_count}</td>
 
-                                <td>{product.monitored_changes_count}</td>
+                <td
+                    title={product.funds
+                        .filter((item) => item.state === 'approved')
+                        .map((fund) => fund.name)
+                        ?.join(', ')}>
+                    <div className={'text-primary text-semibold'}>
+                        {product.funds.filter((item) => item.state === 'approved').length}/{product.funds.length}
+                    </div>
+                </td>
 
-                                <td
-                                    title={product.funds
-                                        .filter((item) => item.state === 'approved')
-                                        .map((fund) => fund.name)
-                                        ?.join(', ')}>
-                                    <div className={'text-primary text-semibold'}>
-                                        {product.funds.filter((item) => item.state === 'approved').length}/
-                                        {product.funds.length}
-                                    </div>
-                                </td>
+                <td className={'table-td-actions text-right'}>
+                    <TableRowActions
+                        content={() => (
+                            <div className="dropdown dropdown-actions">
+                                <StateNavLink
+                                    className="dropdown-item"
+                                    name={DashboardRoutes.SPONSOR_PRODUCT}
+                                    params={{ productId: product?.id, organizationId: activeOrganization.id }}>
+                                    <em className="mdi mdi-history icon-start" />
+                                    Bekijk aanbod
+                                </StateNavLink>
+                            </div>
+                        )}
+                    />
+                </td>
+            </StateNavLink>
 
-                                <td className={'table-td-actions text-right'}>
-                                    <TableRowActions
-                                        content={() => (
-                                            <div className="dropdown dropdown-actions">
-                                                <StateNavLink
-                                                    className="dropdown-item"
-                                                    name={DashboardRoutes.SPONSOR_PRODUCT}
-                                                    params={{
-                                                        productId: product?.id,
-                                                        organizationId: activeOrganization.id,
-                                                    }}>
-                                                    <em className="mdi mdi-history icon-start" />
-                                                    Bekijk aanbod
-                                                </StateNavLink>
-                                            </div>
-                                        )}
-                                    />
-                                </td>
-                            </StateNavLink>
-
-                            {shownIds?.includes(product.id) && (
-                                <tr>
-                                    <td colSpan={columns.length + 1} className={'td-paddless'}>
-                                        <ProductMonitoredHistoryCardFunds
-                                            type={'table'}
-                                            product={product}
-                                            activeOrganization={activeOrganization}
-                                        />
-                                    </td>
-                                </tr>
-                            )}
-                        </Fragment>
-                    ))}
-                </tbody>
-            </table>
-        </TableTopScroller>
-    );
+            {shownIds?.includes(product.id) && (
+                <tr>
+                    <td colSpan={columns.length + 1} className={'td-paddless'}>
+                        <ProductMonitoredHistoryCardFunds
+                            type={'table'}
+                            product={product}
+                            activeOrganization={activeOrganization}
+                        />
+                    </td>
+                </tr>
+            )}
+        </Fragment>
+    ));
 }
diff --git a/react/src/dashboard/components/pages/sponsor-products/elements/SponsorProductsTable.tsx b/react/src/dashboard/components/pages/sponsor-products/elements/SponsorProductsTable.tsx
index ce85d4df6..a029225fc 100644
--- a/react/src/dashboard/components/pages/sponsor-products/elements/SponsorProductsTable.tsx
+++ b/react/src/dashboard/components/pages/sponsor-products/elements/SponsorProductsTable.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, ReactNode, useCallback, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useState } from 'react';
 import { strLimit } from '../../../../helpers/string';
 import TableRowActions from '../../../elements/tables/TableRowActions';
 import useTranslate from '../../../../hooks/useTranslate';
@@ -10,24 +10,20 @@ import TableEntityMain from '../../../elements/tables/elements/TableEntityMain';
 import { ConfigurableTableColumn } from '../../vouchers/hooks/useConfigurableTable';
 import ProductMonitoredHistoryCardFunds from '../../sponsor-product/elements/ProductMonitoredHistoryCardFunds';
 import Organization from '../../../../props/models/Organization';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
 import { DashboardRoutes } from '../../../../modules/state_router/RouterBuilder';
 
 export default function SponsorProductsTable({
-    columns = null,
+    columns,
     products = null,
-    headElement = null,
     activeOrganization,
 }: {
     columns: Array<ConfigurableTableColumn>;
     products: Array<SponsorProduct>;
-    headElement: ReactNode;
     activeOrganization: Organization;
 }) {
     const translate = useTranslate();
     const [shownIds, setShownIds] = useState<Array<number>>([]);
-    const tableRef = useRef<HTMLTableElement>(null);
 
     const toggleCollapsed = useCallback((e: { stopPropagation: () => void }, id: number) => {
         e.stopPropagation();
@@ -37,112 +33,99 @@ export default function SponsorProductsTable({
         });
     }, []);
 
-    return (
-        <TableTopScroller onScroll={() => tableRef.current?.click()}>
-            <table className="table" ref={tableRef}>
-                {headElement}
+    return products?.map((product) => (
+        <Fragment key={product.id}>
+            <StateNavLink
+                name={DashboardRoutes.SPONSOR_PRODUCT}
+                params={{ productId: product?.id, organizationId: activeOrganization.id }}
+                className={'tr-clickable'}
+                customElement={'tr'}>
+                <td title={product.name}>
+                    <TableEntityMain
+                        title={strLimit(product.name, 64)}
+                        subtitle={strLimit(product.organization.name, 64)}
+                        media={product.photos[0]}
+                        mediaRound={false}
+                        mediaSize={'md'}
+                        mediaPlaceholder={'product'}
+                        collapsedClicked={(e) => toggleCollapsed(e, product.id)}
+                        collapsed={!shownIds.includes(product.id)}
+                    />
+                </td>
 
-                <tbody>
-                    {products?.map((product) => (
-                        <Fragment key={product.id}>
-                            <StateNavLink
-                                name={DashboardRoutes.SPONSOR_PRODUCT}
-                                params={{ productId: product?.id, organizationId: activeOrganization.id }}
-                                className={'tr-clickable'}
-                                customElement={'tr'}>
-                                <td title={product.name}>
-                                    <TableEntityMain
-                                        title={strLimit(product.name, 64)}
-                                        subtitle={strLimit(product.organization.name, 64)}
-                                        media={product.photos[0]}
-                                        mediaRound={false}
-                                        mediaSize={'md'}
-                                        mediaPlaceholder={'product'}
-                                        collapsedClicked={(e) => toggleCollapsed(e, product.id)}
-                                        collapsed={!shownIds.includes(product.id)}
-                                    />
-                                </td>
+                <td>
+                    <TableDateTime value={product.last_monitored_changed_at_locale} />
+                </td>
 
-                                <td>
-                                    <TableDateTime value={product.last_monitored_changed_at_locale} />
-                                </td>
+                <td
+                    title={product.funds
+                        .filter((item) => item.state === 'approved')
+                        .map((fund) => fund.name)
+                        ?.join(', ')}>
+                    <div className={'text-primary text-semibold'}>
+                        {product.funds.filter((item) => item.state === 'approved').length}/{product.funds.length}
+                    </div>
+                </td>
 
-                                <td
-                                    title={product.funds
-                                        .filter((item) => item.state === 'approved')
-                                        .map((fund) => fund.name)
-                                        ?.join(', ')}>
-                                    <div className={'text-primary text-semibold'}>
-                                        {product.funds.filter((item) => item.state === 'approved').length}/
-                                        {product.funds.length}
-                                    </div>
-                                </td>
+                <td>{product.price_locale}</td>
 
-                                <td>{product.price_locale}</td>
+                {product?.price_type === 'informational' ? (
+                    <td>
+                        <TableEmptyValue />
+                    </td>
+                ) : (
+                    <td>
+                        {product.unlimited_stock ? translate('product_edit.labels.unlimited') : product.stock_amount}
+                    </td>
+                )}
 
-                                {product?.price_type === 'informational' ? (
-                                    <td>
-                                        <TableEmptyValue />
-                                    </td>
-                                ) : (
-                                    <td>
-                                        {product.unlimited_stock
-                                            ? translate('product_edit.labels.unlimited')
-                                            : product.stock_amount}
-                                    </td>
-                                )}
+                <td>{product.product_category?.name || <EmptyValue />}</td>
 
-                                <td>{product.product_category?.name || <EmptyValue />}</td>
+                <td>
+                    <TableDateTime value={product.created_at_locale} />
+                </td>
 
-                                <td>
-                                    <TableDateTime value={product.created_at_locale} />
-                                </td>
+                <td className={'table-td-actions text-right'}>
+                    <TableRowActions
+                        content={() => (
+                            <div className="dropdown dropdown-actions">
+                                <StateNavLink
+                                    className="dropdown-item"
+                                    name={DashboardRoutes.SPONSOR_PROVIDER_ORGANIZATION}
+                                    params={{
+                                        organizationId: activeOrganization.id,
+                                        id: product.organization_id,
+                                    }}>
+                                    <em className="mdi mdi-eye icon-start" />
+                                    Bekijk aanbieder
+                                </StateNavLink>
+                                <StateNavLink
+                                    className="dropdown-item"
+                                    name={DashboardRoutes.SPONSOR_PRODUCT}
+                                    params={{
+                                        productId: product?.id,
+                                        organizationId: activeOrganization.id,
+                                    }}>
+                                    <em className="mdi mdi-history icon-start" />
+                                    Bekijk aanbod
+                                </StateNavLink>
+                            </div>
+                        )}
+                    />
+                </td>
+            </StateNavLink>
 
-                                <td className={'table-td-actions text-right'}>
-                                    <TableRowActions
-                                        content={() => (
-                                            <div className="dropdown dropdown-actions">
-                                                <StateNavLink
-                                                    className="dropdown-item"
-                                                    name={DashboardRoutes.SPONSOR_PROVIDER_ORGANIZATION}
-                                                    params={{
-                                                        organizationId: activeOrganization.id,
-                                                        id: product.organization_id,
-                                                    }}>
-                                                    <em className="mdi mdi-eye icon-start" />
-                                                    Bekijk aanbieder
-                                                </StateNavLink>
-                                                <StateNavLink
-                                                    className="dropdown-item"
-                                                    name={DashboardRoutes.SPONSOR_PRODUCT}
-                                                    params={{
-                                                        productId: product?.id,
-                                                        organizationId: activeOrganization.id,
-                                                    }}>
-                                                    <em className="mdi mdi-history icon-start" />
-                                                    Bekijk aanbod
-                                                </StateNavLink>
-                                            </div>
-                                        )}
-                                    />
-                                </td>
-                            </StateNavLink>
-
-                            {shownIds?.includes(product.id) && (
-                                <tr>
-                                    <td colSpan={columns.length + 1} className={'td-paddless'}>
-                                        <ProductMonitoredHistoryCardFunds
-                                            type={'table'}
-                                            product={product}
-                                            activeOrganization={activeOrganization}
-                                        />
-                                    </td>
-                                </tr>
-                            )}
-                        </Fragment>
-                    ))}
-                </tbody>
-            </table>
-        </TableTopScroller>
-    );
+            {shownIds?.includes(product.id) && (
+                <tr>
+                    <td colSpan={columns.length + 1} className={'td-paddless'}>
+                        <ProductMonitoredHistoryCardFunds
+                            type={'table'}
+                            product={product}
+                            activeOrganization={activeOrganization}
+                        />
+                    </td>
+                </tr>
+            )}
+        </Fragment>
+    ));
 }
diff --git a/react/src/dashboard/components/pages/sponsor-provider-organization/SponsorProviderOrganization.tsx b/react/src/dashboard/components/pages/sponsor-provider-organization/SponsorProviderOrganization.tsx
index 90711ede3..bf6b39df3 100644
--- a/react/src/dashboard/components/pages/sponsor-provider-organization/SponsorProviderOrganization.tsx
+++ b/react/src/dashboard/components/pages/sponsor-provider-organization/SponsorProviderOrganization.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useEffect, useRef, useState } from 'react';
+import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import { PaginationData } from '../../../props/ApiResponses';
 import { useParams } from 'react-router';
@@ -6,22 +6,19 @@ import useSetProgress from '../../../hooks/useSetProgress';
 import { useOrganizationService } from '../../../services/OrganizationService';
 import FundProvider from '../../../props/models/FundProvider';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
-import Paginator from '../../../modules/paginator/components/Paginator';
 import FundProviderTableItem from './elements/FundProviderTableItem';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
 import ProviderOrganizationOverview from './elements/ProviderOrganizationOverview';
 import type { SponsorProviderOrganization } from '../../../props/models/Organization';
 import useTranslate from '../../../hooks/useTranslate';
-import EmptyCard from '../../elements/empty-card/EmptyCard';
 import usePushApiError from '../../../hooks/usePushApiError';
-import TableTopScroller from '../../elements/tables/TableTopScroller';
-import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
 import { useFundService } from '../../../services/FundService';
 import SponsorProviderOffices from './elements/SponsorProviderOffices';
 import SponsorProviderEmployees from './elements/SponsorProviderEmployees';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
 import useFilterNext from '../../../modules/filter_next/useFilterNext';
 import { NumberParam, StringParam } from 'use-query-params';
+import LoaderTableCard from '../../elements/loader-table-card/LoaderTableCard';
 
 export default function SponsorProviderOrganization() {
     const { id } = useParams();
@@ -36,6 +33,7 @@ export default function SponsorProviderOrganization() {
 
     const [fundProviders, setFundProviders] = useState<PaginationData<FundProvider>>(null);
     const [providerOrganization, setProviderOrganization] = useState<SponsorProviderOrganization>(null);
+    const [paginatorKey] = useState('fund_providers');
 
     const [filterValues, filterValuesActive, filterUpdate] = useFilterNext<{
         q: string;
@@ -55,10 +53,6 @@ export default function SponsorProviderOrganization() {
         },
     );
 
-    const tableRef = useRef<HTMLTableElement>(null);
-
-    const { headElement, configsElement } = useConfigurableTable(fundService.getProviderFundColumns());
-
     const updateFundProviderInList = useCallback(
         (data: FundProvider, index: number) => {
             const list = { ...fundProviders };
@@ -133,34 +127,20 @@ export default function SponsorProviderOrganization() {
                     </div>
                 </div>
 
-                <div className="card-section card-section-padless">
-                    {configsElement}
-
-                    <TableTopScroller onScroll={() => tableRef.current?.click()}>
-                        <table className="table form">
-                            {headElement}
-
-                            <tbody>
-                                {fundProviders.data.map((fundProvider, index) => (
-                                    <FundProviderTableItem
-                                        key={fundProvider.id}
-                                        fundProvider={fundProvider}
-                                        organization={activeOrganization}
-                                        onChange={(data) => updateFundProviderInList(data, index)}
-                                    />
-                                ))}
-                            </tbody>
-                        </table>
-                    </TableTopScroller>
-                </div>
-
-                {fundProviders.meta.total == 0 && <EmptyCard type={'card-section'} title={'Geen aanmeldingen'} />}
-
-                {fundProviders.meta && (
-                    <div className="card-section card-section-narrow">
-                        <Paginator meta={fundProviders.meta} filters={filterValues} updateFilters={filterUpdate} />
-                    </div>
-                )}
+                <LoaderTableCard
+                    empty={fundProviders?.meta?.total == 0}
+                    emptyTitle={'Geen aanmeldingen'}
+                    columns={fundService.getProviderFundColumns()}
+                    paginator={{ key: paginatorKey, data: fundProviders, filterValues, filterUpdate }}>
+                    {fundProviders?.data?.map((fundProvider, index) => (
+                        <FundProviderTableItem
+                            key={fundProvider.id}
+                            fundProvider={fundProvider}
+                            organization={activeOrganization}
+                            onChange={(data) => updateFundProviderInList(data, index)}
+                        />
+                    ))}
+                </LoaderTableCard>
             </div>
 
             <div className="card">
diff --git a/react/src/dashboard/components/pages/sponsor-provider-organization/elements/FundProviderTableItem.tsx b/react/src/dashboard/components/pages/sponsor-provider-organization/elements/FundProviderTableItem.tsx
index aa363669f..c62d706c2 100644
--- a/react/src/dashboard/components/pages/sponsor-provider-organization/elements/FundProviderTableItem.tsx
+++ b/react/src/dashboard/components/pages/sponsor-provider-organization/elements/FundProviderTableItem.tsx
@@ -12,6 +12,7 @@ import TableRowActions from '../../../elements/tables/TableRowActions';
 import ToggleControl from '../../../elements/forms/controls/ToggleControl';
 import useSetProgress from '../../../../hooks/useSetProgress';
 import { DashboardRoutes } from '../../../../modules/state_router/RouterBuilder';
+import classNames from 'classnames';
 
 export default function FundProviderTableItem({
     fundProvider,
@@ -94,11 +95,13 @@ export default function FundProviderTableItem({
             </td>
             <td>
                 <div
-                    className={`label label-${
-                        { accepted: 'success', pending: 'default', rejected: 'danger', unsubscribed: 'danger-light' }[
-                            fundProvider.state
-                        ]
-                    }`}>
+                    className={classNames(
+                        'label',
+                        fundProvider.state === 'accepted' && 'label-success',
+                        fundProvider.state === 'pending' && 'label-default',
+                        fundProvider.state === 'rejected' && 'label-danger',
+                        fundProvider.state === 'unsubscribed' && 'label-danger-light',
+                    )}>
                     {fundProvider.state_locale}
                 </div>
             </td>
diff --git a/react/src/dashboard/components/pages/sponsor-provider-organization/elements/ProviderOrganizationOverview.tsx b/react/src/dashboard/components/pages/sponsor-provider-organization/elements/ProviderOrganizationOverview.tsx
index 52a6b4c2e..faa0338c6 100644
--- a/react/src/dashboard/components/pages/sponsor-provider-organization/elements/ProviderOrganizationOverview.tsx
+++ b/react/src/dashboard/components/pages/sponsor-provider-organization/elements/ProviderOrganizationOverview.tsx
@@ -8,6 +8,7 @@ import usePushSuccess from '../../../../hooks/usePushSuccess';
 import useSetProgress from '../../../../hooks/useSetProgress';
 import ToggleControl from '../../../elements/forms/controls/ToggleControl';
 import usePushApiError from '../../../../hooks/usePushApiError';
+import classNames from 'classnames';
 
 export default function ProviderOrganizationOverview({
     organization,
@@ -170,9 +171,10 @@ export default function ProviderOrganizationOverview({
                                 <div className="card-block card-block-listing card-block-listing-inline card-block-listing-variant">
                                     <div className="card-block-listing-label">{property.label}</div>
                                     <div
-                                        className={`card-block-listing-value ${
-                                            property.primary ? 'text-primary-light' : ''
-                                        }`}>
+                                        className={classNames(
+                                            'card-block-listing-value',
+                                            property.primary && 'text-primary-light',
+                                        )}>
                                         {property.value}
                                     </div>
                                 </div>
diff --git a/react/src/dashboard/components/pages/sponsor-provider-organization/elements/SponsorProviderEmployees.tsx b/react/src/dashboard/components/pages/sponsor-provider-organization/elements/SponsorProviderEmployees.tsx
index e4d2695e6..041e3ac2d 100644
--- a/react/src/dashboard/components/pages/sponsor-provider-organization/elements/SponsorProviderEmployees.tsx
+++ b/react/src/dashboard/components/pages/sponsor-provider-organization/elements/SponsorProviderEmployees.tsx
@@ -1,51 +1,36 @@
 import React from 'react';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
-import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
 import { useFundService } from '../../../../services/FundService';
-import EmptyCard from '../../../elements/empty-card/EmptyCard';
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
 import Employee from '../../../../props/models/Employee';
 import { strLimit } from '../../../../helpers/string';
+import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
 
 export default function SponsorProviderEmployees({ employees }: { employees: Array<Employee> }) {
     const fundService = useFundService();
 
-    const { headElement, configsElement } = useConfigurableTable(fundService.getProviderEmployeeColumns());
-
     return (
         <div className="card">
             <div className="card-header">
                 <div className="card-title">Medewerkers</div>
             </div>
 
-            {employees.length > 0 ? (
-                <div className="card-section card-section-padless">
-                    {configsElement}
-
-                    <TableTopScroller>
-                        <table className="table">
-                            {headElement}
-
-                            <tbody>
-                                {employees.map((employee) => (
-                                    <tr key={employee.id}>
-                                        {employee.email ? (
-                                            <td>{employee.email}</td>
-                                        ) : (
-                                            <td>{strLimit(employee.identity_address, 32)}</td>
-                                        )}
-                                        <td className={'table-td-actions text-right'}>
-                                            <TableEmptyValue />
-                                        </td>
-                                    </tr>
-                                ))}
-                            </tbody>
-                        </table>
-                    </TableTopScroller>
-                </div>
-            ) : (
-                <EmptyCard type={'card-section'} title={'Geen medewerkers'} />
-            )}
+            <LoaderTableCard
+                empty={employees.length === 0}
+                emptyTitle={'Geen medewerkers'}
+                columns={fundService.getProviderEmployeeColumns()}>
+                {employees.map((employee) => (
+                    <tr key={employee.id}>
+                        {employee.email ? (
+                            <td>{employee.email}</td>
+                        ) : (
+                            <td>{strLimit(employee.identity_address, 32)}</td>
+                        )}
+                        <td className={'table-td-actions text-right'}>
+                            <TableEmptyValue />
+                        </td>
+                    </tr>
+                ))}
+            </LoaderTableCard>
         </div>
     );
 }
diff --git a/react/src/dashboard/components/pages/sponsor-provider-organization/elements/SponsorProviderOffices.tsx b/react/src/dashboard/components/pages/sponsor-provider-organization/elements/SponsorProviderOffices.tsx
index 5f0a59c06..f36891a69 100644
--- a/react/src/dashboard/components/pages/sponsor-provider-organization/elements/SponsorProviderOffices.tsx
+++ b/react/src/dashboard/components/pages/sponsor-provider-organization/elements/SponsorProviderOffices.tsx
@@ -1,51 +1,33 @@
 import React from 'react';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
-import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
+import classNames from 'classnames';
 import { useFundService } from '../../../../services/FundService';
-import EmptyCard from '../../../elements/empty-card/EmptyCard';
 import Office from '../../../../props/models/Office';
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
+import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
 
 export default function SponsorProviderOffices({ offices }: { offices: Array<Office> }) {
     const fundService = useFundService();
 
-    const { headElement, configsElement } = useConfigurableTable(fundService.getProviderOfficeColumns());
-
     return (
         <div className="card">
             <div className="card-header">
                 <div className="card-title">Vestigingen</div>
             </div>
 
-            {offices.length > 0 ? (
-                <div className="card-section card-section-padless">
-                    {configsElement}
-
-                    <TableTopScroller>
-                        <table className="table">
-                            {headElement}
-
-                            <tbody>
-                                {offices.map((office) => (
-                                    <tr key={office.id}>
-                                        <td className={!office.address ? 'text-muted' : ''}>
-                                            {office.address || 'n.v.t.'}
-                                        </td>
-                                        <td className={`${!office.phone ? 'text-muted' : ''}`}>
-                                            {office.phone || 'n.v.t.'}
-                                        </td>
-                                        <td className={'table-td-actions text-right'}>
-                                            <TableEmptyValue />
-                                        </td>
-                                    </tr>
-                                ))}
-                            </tbody>
-                        </table>
-                    </TableTopScroller>
-                </div>
-            ) : (
-                <EmptyCard type={'card-section'} title={'Geen vestigingen'} />
-            )}
+            <LoaderTableCard
+                empty={offices.length === 0}
+                emptyTitle={'Geen vestigingen'}
+                columns={fundService.getProviderOfficeColumns()}>
+                {offices.map((office) => (
+                    <tr key={office.id}>
+                        <td className={classNames(!office.address && 'text-muted')}>{office.address || 'n.v.t.'}</td>
+                        <td className={classNames(!office.phone && 'text-muted')}>{office.phone || 'n.v.t.'}</td>
+                        <td className={'table-td-actions text-right'}>
+                            <TableEmptyValue />
+                        </td>
+                    </tr>
+                ))}
+            </LoaderTableCard>
         </div>
     );
 }
diff --git a/react/src/dashboard/components/pages/sponsor-provider-organizations/SponsorProviderOrganizations.tsx b/react/src/dashboard/components/pages/sponsor-provider-organizations/SponsorProviderOrganizations.tsx
index 9cc53ec81..c7a425305 100644
--- a/react/src/dashboard/components/pages/sponsor-provider-organizations/SponsorProviderOrganizations.tsx
+++ b/react/src/dashboard/components/pages/sponsor-provider-organizations/SponsorProviderOrganizations.tsx
@@ -173,7 +173,7 @@ export default function SponsorProviderOrganizations() {
             <div className="card-header">
                 <div className="flex flex-grow">
                     <div className="card-title flex flex-grow">
-                        {translate('provider_organizations.header.title')} ({providerOrganizations.meta.total})
+                        {translate('provider_organizations.header.title')} ({providerOrganizations?.meta?.total})
                     </div>
                 </div>
 
@@ -434,12 +434,12 @@ export default function SponsorProviderOrganizations() {
                                 {providerOrganizations && (
                                     <button
                                         className="button button-primary button-wide"
-                                        disabled={providerOrganizations.meta.total == 0}
+                                        disabled={providerOrganizations?.meta?.total == 0}
                                         data-dusk="export"
                                         onClick={() => exportList()}>
                                         <em className="mdi mdi-download icon-start" />
                                         {translate('components.dropdown.export', {
-                                            total: providerOrganizations.meta.total,
+                                            total: providerOrganizations?.meta?.total,
                                         })}
                                     </button>
                                 )}
@@ -451,7 +451,7 @@ export default function SponsorProviderOrganizations() {
 
             <LoaderTableCard
                 loading={loading}
-                empty={providerOrganizations.meta.total == 0}
+                empty={providerOrganizations?.meta?.total == 0}
                 emptyTitle={translate(`provider_organizations.empty_title.${filterActiveValues.state_group}`)}
                 emptyDescription={translate(
                     `provider_organizations.empty_description.${filterActiveValues.state_group}`,
@@ -464,7 +464,7 @@ export default function SponsorProviderOrganizations() {
                             <table className="table">
                                 {headElement}
 
-                                {providerOrganizations.data.map((providerOrganization) => (
+                                {providerOrganizations?.data?.map((providerOrganization) => (
                                     <ProvidersTableItem
                                         key={providerOrganization.id}
                                         organization={activeOrganization}
@@ -476,7 +476,7 @@ export default function SponsorProviderOrganizations() {
                     </div>
                 </div>
 
-                {providerOrganizations.meta.total > 0 && (
+                {providerOrganizations?.meta?.total > 0 && (
                     <div className="card-section">
                         <Paginator
                             meta={providerOrganizations.meta}
diff --git a/react/src/dashboard/components/pages/sponsor-provider-organizations/elements/ProvidersTableItemFunds.tsx b/react/src/dashboard/components/pages/sponsor-provider-organizations/elements/ProvidersTableItemFunds.tsx
index f8903b2fb..3a977e66a 100644
--- a/react/src/dashboard/components/pages/sponsor-provider-organizations/elements/ProvidersTableItemFunds.tsx
+++ b/react/src/dashboard/components/pages/sponsor-provider-organizations/elements/ProvidersTableItemFunds.tsx
@@ -11,6 +11,7 @@ import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
 import { useOrganizationService } from '../../../../services/OrganizationService';
 import { DashboardRoutes } from '../../../../modules/state_router/RouterBuilder';
 import { FilterModel, FilterSetter } from '../../../../modules/filter_next/types/FilterParams';
+import classNames from 'classnames';
 
 export default function ProvidersTableItemFunds({
     filterValues,
@@ -76,14 +77,13 @@ export default function ProvidersTableItemFunds({
                                         </td>
                                         <td>
                                             <div
-                                                className={`label label-${
-                                                    {
-                                                        accepted: 'success',
-                                                        pending: 'default',
-                                                        rejected: 'danger',
-                                                        unsubscribed: 'danger-light',
-                                                    }[fundProvider.state]
-                                                }`}>
+                                                className={classNames(
+                                                    'label',
+                                                    fundProvider.state === 'accepted' && 'label-success',
+                                                    fundProvider.state === 'pending' && 'label-default',
+                                                    fundProvider.state === 'rejected' && 'label-danger',
+                                                    fundProvider.state === 'unsubscribed' && 'label-danger-light',
+                                                )}>
                                                 {fundProvider.state_locale}
                                             </div>
                                         </td>
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 c6ff0157b..964e1b9a1 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
@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import { strLimit } from '../../../../helpers/string';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
-import Paginator from '../../../../modules/paginator/components/Paginator';
 import Transaction from '../../../../props/models/Transaction';
 import { PaginationData } from '../../../../props/ApiResponses';
 import useTransactionExporter from '../../../../services/exporters/useTransactionExporter';
@@ -15,11 +15,10 @@ import LoadingCard from '../../../elements/loading-card/LoadingCard';
 import useTranslate from '../../../../hooks/useTranslate';
 import usePushApiError from '../../../../hooks/usePushApiError';
 import Label from '../../../elements/image_cropper/Label';
-import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
 import { DashboardRoutes } from '../../../../modules/state_router/RouterBuilder';
 import useFilterNext from '../../../../modules/filter_next/useFilterNext';
 import { NumberParam, StringParam } from 'use-query-params';
+import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
 
 export default function TransactionBulkTransactionsTable({
     organization,
@@ -61,11 +60,6 @@ export default function TransactionBulkTransactionsTable({
         },
     );
 
-    const { headElement, configsElement } = useConfigurableTable(transactionService.getBulkTransactionsColumns(), {
-        filter,
-        sortable: true,
-    });
-
     const exportTransactions = useCallback(() => {
         transactionExporter.exportData(organization.id, {
             ...filterValuesActive,
@@ -104,7 +98,7 @@ export default function TransactionBulkTransactionsTable({
         <div className="card">
             <div className="card-header">
                 <div className="flex flex-grow card-title">
-                    {`${translate('transactions.header.title')} (${transactions.meta.total})`}
+                    {`${translate('transactions.header.title')} (${transactions?.meta?.total})`}
                 </div>
                 <div className="card-header-filters">
                     <div className="block block-inline-filters">
@@ -115,84 +109,66 @@ export default function TransactionBulkTransactionsTable({
                     </div>
                 </div>
             </div>
-            <div className="card-section">
-                <div className="card-block card-block-table">
-                    {configsElement}
-
-                    <TableTopScroller>
-                        <table className="table">
-                            {headElement}
-
-                            <tbody>
-                                {transactions?.data.map((transaction) => (
-                                    <tr key={transaction.id}>
-                                        <td>{transaction.id}</td>
-
-                                        <td title={transaction.uid || '-'}>{strLimit(transaction.uid || '-', 25)}</td>
-
-                                        <td>
-                                            <StateNavLink
-                                                name={DashboardRoutes.TRANSACTION}
-                                                params={{
-                                                    organizationId: organization.id,
-                                                    address: transaction.address,
-                                                }}
-                                                className="text-primary-light">
-                                                {transaction.amount_locale}
-                                            </StateNavLink>
-                                        </td>
-
-                                        <td>
-                                            <div className="text-primary text-semibold">
-                                                {transaction.created_at_locale.split(' - ')[0]}
-                                            </div>
-                                            <div className="text-strong text-md text-muted-dark">
-                                                {transaction.created_at_locale.split(' - ')[1]}
-                                            </div>
-                                        </td>
-
-                                        <td>{strLimit(transaction.fund.name, 25)}</td>
-
-                                        <td className={transaction.organization ? '' : 'text-muted'}>
-                                            {strLimit(transaction.organization?.name || '-', 25) || '-'}
-                                        </td>
-
-                                        <td>{strLimit(transaction.product?.name || '-', 25) || '-'}</td>
-
-                                        <td>
-                                            <Label type={transaction.state == 'success' ? 'success' : 'default'}>
-                                                {transaction.state_locale}
-                                            </Label>
-                                        </td>
-                                        <td>
-                                            <StateNavLink
-                                                name={DashboardRoutes.TRANSACTION}
-                                                params={{
-                                                    organizationId: organization.id,
-                                                    address: transaction.address,
-                                                }}
-                                                className="button button-sm button-primary button-icon pull-right">
-                                                <em className="mdi mdi-eye-outline icon-start" />
-                                            </StateNavLink>
-                                        </td>
-                                    </tr>
-                                ))}
-                            </tbody>
-                        </table>
-                    </TableTopScroller>
-                </div>
-            </div>
-
-            {transactions?.meta.last_page > 1 && (
-                <div className="card-section">
-                    <Paginator
-                        meta={transactions.meta}
-                        filters={filterValues}
-                        updateFilters={filterUpdate}
-                        perPageKey={perPageKey}
-                    />
-                </div>
-            )}
+            <LoaderTableCard
+                empty={transactions?.meta?.total == 0}
+                emptyTitle={'Geen transacties gevonden'}
+                columns={transactionService.getBulkTransactionsColumns()}
+                tableOptions={{ filter, sortable: true }}
+                paginator={{ key: perPageKey, data: transactions, filterValues, filterUpdate }}>
+                {transactions?.data?.map((transaction) => (
+                    <tr key={transaction.id}>
+                        <td>{transaction.id}</td>
+
+                        <td title={transaction.uid || '-'}>{strLimit(transaction.uid || '-', 25)}</td>
+
+                        <td>
+                            <StateNavLink
+                                name={DashboardRoutes.TRANSACTION}
+                                params={{
+                                    organizationId: organization.id,
+                                    address: transaction.address,
+                                }}
+                                className="text-primary-light">
+                                {transaction.amount_locale}
+                            </StateNavLink>
+                        </td>
+
+                        <td>
+                            <div className="text-primary text-semibold">
+                                {transaction.created_at_locale.split(' - ')[0]}
+                            </div>
+                            <div className="text-strong text-md text-muted-dark">
+                                {transaction.created_at_locale.split(' - ')[1]}
+                            </div>
+                        </td>
+
+                        <td>{strLimit(transaction.fund.name, 25)}</td>
+
+                        <td className={classNames(!transaction.organization && 'text-muted')}>
+                            {strLimit(transaction.organization?.name || '-', 25) || '-'}
+                        </td>
+
+                        <td>{strLimit(transaction.product?.name || '-', 25) || '-'}</td>
+
+                        <td>
+                            <Label type={transaction.state == 'success' ? 'success' : 'default'}>
+                                {transaction.state_locale}
+                            </Label>
+                        </td>
+                        <td>
+                            <StateNavLink
+                                name={DashboardRoutes.TRANSACTION}
+                                params={{
+                                    organizationId: organization.id,
+                                    address: transaction.address,
+                                }}
+                                className="button button-sm button-primary button-icon pull-right">
+                                <em className="mdi mdi-eye-outline icon-start" />
+                            </StateNavLink>
+                        </td>
+                    </tr>
+                ))}
+            </LoaderTableCard>
         </div>
     );
 }
diff --git a/react/src/dashboard/components/pages/transaction-settings/TransactionSettings.tsx b/react/src/dashboard/components/pages/transaction-settings/TransactionSettings.tsx
index bba5460a4..0b84f8a97 100644
--- a/react/src/dashboard/components/pages/transaction-settings/TransactionSettings.tsx
+++ b/react/src/dashboard/components/pages/transaction-settings/TransactionSettings.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, useMemo, useState } from 'react';
+import React, { Fragment, useContext, useMemo, useState } from 'react';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import usePushSuccess from '../../../hooks/usePushSuccess';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
@@ -9,8 +9,10 @@ import SelectControl from '../../elements/select-control/SelectControl';
 import Tooltip from '../../elements/tooltip/Tooltip';
 import usePushApiError from '../../../hooks/usePushApiError';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
+import { mainContext } from '../../../contexts/MainContext';
 
 export default function TransactionSettings() {
+    const { setOrganizationData } = useContext(mainContext);
     const activeOrganization = useActiveOrganization();
 
     const pushSuccess = usePushSuccess();
@@ -49,7 +51,13 @@ export default function TransactionSettings() {
     const form = useFormBuilder(activeOrganization.bank_statement_details, (values) => {
         organizationService
             .updateBankFields(activeOrganization.id, values)
-            .then(() => pushSuccess('Opgeslagen!'))
+            .then((res) => {
+                pushSuccess('Opgeslagen!');
+
+                setOrganizationData(activeOrganization.id, {
+                    bank_statement_details: res.data.data.bank_statement_details,
+                });
+            })
             .catch(pushApiError)
             .finally(() => form.setIsLocked(false));
     });
diff --git a/react/src/dashboard/components/pages/transactions-view/elements/PayoutTransactionDetails.tsx b/react/src/dashboard/components/pages/transactions-view/elements/PayoutTransactionDetails.tsx
index b7944cc41..ffab0f7bb 100644
--- a/react/src/dashboard/components/pages/transactions-view/elements/PayoutTransactionDetails.tsx
+++ b/react/src/dashboard/components/pages/transactions-view/elements/PayoutTransactionDetails.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import Tooltip from '../../../elements/tooltip/Tooltip';
 import LoadingCard from '../../../elements/loading-card/LoadingCard';
 import useTranslate from '../../../../hooks/useTranslate';
@@ -73,7 +74,7 @@ export default function PayoutTransactionDetails({ transaction }: { transaction:
                                     <div className="keyvalue-item">
                                         <div className="keyvalue-key">IBAN (van)</div>
                                         <div className="keyvalue-value">
-                                            <span className={transaction.iban_final ? '' : 'text-muted-dark'}>
+                                            <span className={classNames(!transaction.iban_final && 'text-muted-dark')}>
                                                 {transaction.iban_from}
                                             </span>
                                             {!transaction.iban_final && (
@@ -88,11 +89,11 @@ export default function PayoutTransactionDetails({ transaction }: { transaction:
                                         <div className="keyvalue-key">IBAN (naar)</div>
                                         <div className="keyvalue-value">
                                             <span
-                                                className={
-                                                    !transaction.iban_final && transaction.target != 'iban'
-                                                        ? 'text-muted-dark'
-                                                        : ''
-                                                }>
+                                                className={classNames(
+                                                    !transaction.iban_final &&
+                                                        transaction.target != 'iban' &&
+                                                        'text-muted-dark',
+                                                )}>
                                                 {transaction.iban_to}
                                             </span>
 
@@ -108,11 +109,11 @@ export default function PayoutTransactionDetails({ transaction }: { transaction:
                                         <div className="keyvalue-key">IBAN naam (naar)</div>
                                         <div className="keyvalue-value">
                                             <span
-                                                className={
-                                                    !transaction.iban_final && transaction.target != 'iban'
-                                                        ? 'text-muted-dark'
-                                                        : ''
-                                                }>
+                                                className={classNames(
+                                                    !transaction.iban_final &&
+                                                        transaction.target != 'iban' &&
+                                                        'text-muted-dark',
+                                                )}>
                                                 {transaction.iban_to_name}
                                             </span>
                                             {!transaction.iban_final && transaction.target != 'iban' && (
diff --git a/react/src/dashboard/components/pages/transactions-view/elements/panes/TransactionDetailsPane.tsx b/react/src/dashboard/components/pages/transactions-view/elements/panes/TransactionDetailsPane.tsx
index 13d19e38c..4078cef24 100644
--- a/react/src/dashboard/components/pages/transactions-view/elements/panes/TransactionDetailsPane.tsx
+++ b/react/src/dashboard/components/pages/transactions-view/elements/panes/TransactionDetailsPane.tsx
@@ -3,6 +3,7 @@ import useTransactionService from '../../../../../services/TransactionService';
 import useProductReservationService from '../../../../../services/ProductReservationService';
 import Reservation from '../../../../../props/models/Reservation';
 import React, { Fragment, useCallback, useEffect, useMemo } from 'react';
+import classNames from 'classnames';
 import useEnvData from '../../../../../hooks/useEnvData';
 import useActiveOrganization from '../../../../../hooks/useActiveOrganization';
 import StateNavLink from '../../../../../modules/state_router/StateNavLink';
@@ -222,7 +223,7 @@ export default function TransactionDetailsPane({
                     {transaction.iban_from && (
                         <KeyValueItem label={translate('financial_dashboard_transaction.labels.iban_from')}>
                             <Fragment>
-                                <span className={transaction.iban_final ? '' : 'text-muted-dark'}>
+                                <span className={classNames(!transaction.iban_final && 'text-muted-dark')}>
                                     {transaction.iban_from}
                                 </span>
                                 {!transaction.iban_final && (
@@ -238,9 +239,9 @@ export default function TransactionDetailsPane({
                         <KeyValueItem label={translate('financial_dashboard_transaction.labels.iban_to')}>
                             <Fragment>
                                 <span
-                                    className={
-                                        !transaction.iban_final && transaction.target != 'iban' ? 'text-muted-dark' : ''
-                                    }>
+                                    className={classNames(
+                                        !transaction.iban_final && transaction.target != 'iban' && 'text-muted-dark',
+                                    )}>
                                     {transaction.iban_to}
                                 </span>
 
@@ -257,9 +258,9 @@ export default function TransactionDetailsPane({
                         <KeyValueItem label={translate('financial_dashboard_transaction.labels.iban_to_name')}>
                             <Fragment>
                                 <span
-                                    className={
-                                        !transaction.iban_final && transaction.target != 'iban' ? 'text-muted-dark' : ''
-                                    }>
+                                    className={classNames(
+                                        !transaction.iban_final && transaction.target != 'iban' && 'text-muted-dark',
+                                    )}>
                                     {transaction.iban_to_name}
                                 </span>
                                 {!transaction.iban_final && transaction.target != 'iban' && (
diff --git a/react/src/dashboard/components/pages/transactions/Transactions.tsx b/react/src/dashboard/components/pages/transactions/Transactions.tsx
index 6dd1a6fc9..378ccd029 100644
--- a/react/src/dashboard/components/pages/transactions/Transactions.tsx
+++ b/react/src/dashboard/components/pages/transactions/Transactions.tsx
@@ -8,12 +8,9 @@ import useSetProgress from '../../../hooks/useSetProgress';
 import useEnvData from '../../../hooks/useEnvData';
 import useTransactionBulkService from '../../../services/TransactionBulkService';
 import { PaginationData } from '../../../props/ApiResponses';
-import { strLimit } from '../../../helpers/string';
 import usePushSuccess from '../../../hooks/usePushSuccess';
 import TransactionBulk from '../../../props/models/TransactionBulk';
 import useTransactionExporter from '../../../services/exporters/useTransactionExporter';
-import EmptyCard from '../../elements/empty-card/EmptyCard';
-import Paginator from '../../../modules/paginator/components/Paginator';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
 import { useFundService } from '../../../services/FundService';
 import useProviderFundService from '../../../services/ProviderFundService';
@@ -22,28 +19,22 @@ import FilterItemToggle from '../../elements/tables/elements/FilterItemToggle';
 import SelectControl from '../../elements/select-control/SelectControl';
 import DatePickerControl from '../../elements/forms/controls/DatePickerControl';
 import CardHeaderFilter from '../../elements/tables/elements/CardHeaderFilter';
-import StateNavLink from '../../../modules/state_router/StateNavLink';
-import TranslateHtml from '../../elements/translate-html/TranslateHtml';
 import { hasPermission } from '../../../helpers/utils';
 import useTransactionBulkExporter from '../../../services/exporters/useTransactionBulkExporter';
 import { dateFormat, dateParse } from '../../../helpers/dates';
 import ModalVoucherTransactionsUpload from '../../modals/ModalVoucherTransactionsUpload';
 import usePaginatorService from '../../../modules/paginator/services/usePaginatorService';
 import useTranslate from '../../../hooks/useTranslate';
-import TableEmptyValue from '../../elements/table-empty-value/TableEmptyValue';
-import TableTopScroller from '../../elements/tables/TableTopScroller';
-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';
 import useConfirmDangerAction from '../../../hooks/useConfirmDangerAction';
 import { Permission } from '../../../props/models/Organization';
-import TransactionBulksCard from './elements/TransactionBulksCard';
 import { DashboardRoutes } from '../../../modules/state_router/RouterBuilder';
 import useFilterNext from '../../../modules/filter_next/useFilterNext';
 import { createEnumParam, NumberParam, StringParam } from 'use-query-params';
 import BlockLabelTabs from '../../elements/block-label-tabs/BlockLabelTabs';
+import TransactionsTableSection from './elements/TransactionsTableSection';
+import TransactionBulksTableSection from './elements/TransactionBulksTableSection';
+import StateNavLink from '../../../modules/state_router/StateNavLink';
 
 export default function Transactions() {
     const envData = useEnvData();
@@ -85,7 +76,7 @@ export default function Transactions() {
         return funds?.filter((fund: Fund) => fund.allow_direct_payments).length > 0;
     }, [funds]);
 
-    const [viewTypes] = useState<Array<{ key: string; label: string }>>([
+    const [viewTypes] = useState<Array<{ key: 'transactions' | 'bulks'; label: string }>>([
         { key: 'transactions', label: 'Individueel' },
         { key: 'bulks', label: 'Bulk' },
     ]);
@@ -184,12 +175,6 @@ export default function Transactions() {
         },
     );
 
-    const { headElement, configsElement } = useConfigurableTable(transactionService.getColumns(isSponsor, isProvider), {
-        filter: filter,
-        sortable: true,
-        sortableExclude: ['method', 'branch_name', 'branch_number', 'amount_extra'],
-    });
-
     const [bulkFilterValues, bulkFilterValuesActive, bulkFilterUpdate, bulkFilter] = useFilterNext<{
         from?: string;
         to?: string;
@@ -445,7 +430,7 @@ export default function Transactions() {
 
                 <div className="card-header-filters">
                     <div className="block block-inline-filters">
-                        {hasDirectPayments && (
+                        {hasDirectPayments && viewType.key == 'transactions' && (
                             <button
                                 type="button"
                                 className="button button-primary button-sm"
@@ -833,329 +818,35 @@ export default function Transactions() {
                 </div>
             </div>
 
-            {viewType.key == 'transactions' && transactions.meta.total > 0 && (
-                <div className="card-section">
-                    <div className="card-block card-block-table">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {transactions.data.map((transaction) => (
-                                        <StateNavLink
-                                            customElement={'tr'}
-                                            className={'tr-clickable'}
-                                            key={transaction.id}
-                                            name={DashboardRoutes.TRANSACTION}
-                                            params={{
-                                                organizationId: activeOrganization.id,
-                                                address: transaction.address,
-                                            }}
-                                            dataDusk={`tableTransactionRow${transaction.id}`}>
-                                            <td>{transaction.id}</td>
-
-                                            {isSponsor && (
-                                                <td title={transaction.uid || '-'}>
-                                                    {strLimit(transaction.uid || '-', 32)}
-                                                </td>
-                                            )}
-                                            <td>
-                                                <StateNavLink
-                                                    name={DashboardRoutes.TRANSACTION}
-                                                    params={{
-                                                        address: transaction.address,
-                                                        organizationId: activeOrganization.id,
-                                                    }}
-                                                    className="text-primary-light">
-                                                    {transaction.amount_locale}
-                                                </StateNavLink>
-                                            </td>
-                                            {isProvider && (
-                                                <td>
-                                                    {transaction?.reservation?.amount_extra > 0
-                                                        ? 'iDeal + Tegoed'
-                                                        : 'Tegoed'}
-                                                </td>
-                                            )}
-                                            {isProvider && (
-                                                <td>
-                                                    {transaction?.branch_name && (
-                                                        <div className="text-primary">{transaction?.branch_name}</div>
-                                                    )}
-
-                                                    {transaction?.branch_id && (
-                                                        <div>
-                                                            ID <strong>{transaction?.branch_id}</strong>
-                                                        </div>
-                                                    )}
-
-                                                    {!transaction.branch_id && !transaction.branch_name && (
-                                                        <div className={'text-muted'}>Geen...</div>
-                                                    )}
-                                                </td>
-                                            )}
-                                            {isProvider && (
-                                                <td>
-                                                    <div className={transaction?.branch_number ? '' : 'text-muted'}>
-                                                        {strLimit(transaction.branch_number?.toString(), 32) ||
-                                                            'Geen...'}
-                                                    </div>
-                                                </td>
-                                            )}
-                                            {isProvider && (
-                                                <td>
-                                                    {transaction?.reservation?.amount_extra > 0
-                                                        ? transaction?.reservation?.amount_extra_locale
-                                                        : '-'}
-                                                </td>
-                                            )}
-                                            <td>
-                                                <div className={'text-semibold text-primary'}>
-                                                    {transaction.created_at_locale.split(' - ')[0]}
-                                                </div>
-                                                <div className={'text-strong text-md text-muted-dark'}>
-                                                    {transaction.created_at_locale.split(' - ')[1]}
-                                                </div>
-                                            </td>
-                                            <td title={transaction.fund.name || ''}>
-                                                {strLimit(transaction.fund.name, 25)}
-                                            </td>
-                                            {isProvider && (
-                                                <td title={transaction.product?.name || '-'}>
-                                                    {transaction.product?.name ? (
-                                                        strLimit(transaction.product?.name || '', 25)
-                                                    ) : (
-                                                        <TableEmptyValue />
-                                                    )}
-                                                </td>
-                                            )}
-                                            {isSponsor && (
-                                                <td>
-                                                    <div className="text-semibold text-primary">
-                                                        {transaction.payment_type_locale.title}
-                                                    </div>
-                                                    <div
-                                                        className="text-strong text-md text-muted-dark"
-                                                        title={transaction.payment_type_locale.subtitle || ''}>
-                                                        {strLimit(transaction.payment_type_locale.subtitle)}
-                                                    </div>
-                                                </td>
-                                            )}
-                                            {isSponsor && (
-                                                <Fragment>
-                                                    {transaction.organization ? (
-                                                        <td title={transaction.organization.name}>
-                                                            {strLimit(transaction.organization.name, 25)}
-                                                        </td>
-                                                    ) : (
-                                                        <td>
-                                                            <TableEmptyValue />
-                                                        </td>
-                                                    )}
-                                                </Fragment>
-                                            )}
-
-                                            {isSponsor && (
-                                                <td>
-                                                    {transaction.non_cancelable_at_locale ? (
-                                                        <div className={'text-semibold text-primary'}>
-                                                            {transaction.non_cancelable_at_locale}
-                                                        </div>
-                                                    ) : (
-                                                        <TableEmptyValue />
-                                                    )}
-                                                </td>
-                                            )}
-
-                                            {isSponsor && (
-                                                <td>
-                                                    {transaction.execution_date_locale ? (
-                                                        <div className={'text-semibold text-primary'}>
-                                                            {transaction.execution_date_locale}
-                                                        </div>
-                                                    ) : (
-                                                        <TableEmptyValue />
-                                                    )}
-                                                </td>
-                                            )}
-
-                                            {isSponsor && transaction.voucher_transaction_bulk_id && (
-                                                <td>
-                                                    <StateNavLink
-                                                        name={DashboardRoutes.TRANSACTION_BULK}
-                                                        params={{
-                                                            organizationId: activeOrganization.id,
-                                                            id: transaction.voucher_transaction_bulk_id,
-                                                        }}
-                                                        className="text-primary-light">
-                                                        {`#${transaction.voucher_transaction_bulk_id}`}
-                                                    </StateNavLink>
-                                                </td>
-                                            )}
-                                            {isSponsor && !transaction.voucher_transaction_bulk_id && (
-                                                <td>
-                                                    {transaction.transfer_in > 0 &&
-                                                    transaction.state == 'pending' &&
-                                                    transaction.attempts < 3 ? (
-                                                        <div>In afwachting</div>
-                                                    ) : (
-                                                        <TableEmptyValue />
-                                                    )}
-                                                </td>
-                                            )}
-                                            {isSponsor && (
-                                                <td>
-                                                    {(transaction.bulk_state == 'rejected' ||
-                                                        transaction.bulk_state == 'error') && (
-                                                        <Label type="danger">{transaction.bulk_state_locale}</Label>
-                                                    )}
-
-                                                    {(transaction.bulk_state == 'draft' ||
-                                                        transaction.bulk_state == 'pending') && (
-                                                        <Label type="default">{transaction.bulk_state_locale}</Label>
-                                                    )}
-
-                                                    {transaction.bulk_state == 'accepted' && (
-                                                        <Label type="success">{transaction.bulk_state_locale}</Label>
-                                                    )}
-
-                                                    {!transaction.bulk_state && <TableEmptyValue />}
-                                                </td>
-                                            )}
-                                            <td data-dusk="transactionState">
-                                                <TransactionStateLabel transaction={transaction} />
-                                            </td>
-                                            <td>
-                                                {transaction.transfer_in > 0 && transaction.state == 'pending' ? (
-                                                    <div className="text-muted-dark">
-                                                        <em className="mdi mdi-clock-outline"> </em>
-                                                        {transaction.transfer_in} dagen resterend
-                                                    </div>
-                                                ) : (
-                                                    <TableEmptyValue />
-                                                )}
-                                            </td>
-                                            <td className={'table-td-actions text-right'}>
-                                                <TableRowActions
-                                                    content={() => (
-                                                        <div className="dropdown dropdown-actions">
-                                                            <StateNavLink
-                                                                className="dropdown-item"
-                                                                name={DashboardRoutes.TRANSACTION}
-                                                                params={{
-                                                                    organizationId: activeOrganization.id,
-                                                                    address: transaction.address,
-                                                                }}>
-                                                                <em className={'mdi mdi-eye icon-start'} />
-                                                                Bekijken
-                                                            </StateNavLink>
-                                                        </div>
-                                                    )}
-                                                />
-                                            </td>
-                                        </StateNavLink>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
-            )}
-
-            {!isSponsor && transactions.meta?.total > 0 && viewType.key == 'transactions' && (
-                <div className="card-section">
-                    <div className="flex flex-horizontal">
-                        <div className="flex flex-grow">
-                            <div className="flex flex-vertical flex-center">
-                                <TranslateHtml
-                                    i18n={'transactions.labels.total_amount'}
-                                    values={{ total_amount: transactions.meta.total_amount_locale }}
-                                />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            )}
-
-            {isSponsor &&
-                pendingBulkingMeta?.total > 0 &&
-                hasPermission(activeOrganization, Permission.MANAGE_TRANSACTION_BULKS) && (
-                    <div className="card-section" hidden={viewType.key !== 'transactions'}>
-                        <div className="flex flex-vertical">
-                            <div className="card-text" data-dusk="pendingBulkingMetaText">
-                                <TranslateHtml
-                                    i18n={'transactions.labels.bulk_total_amount'}
-                                    values={{
-                                        total: pendingBulkingMeta.total,
-                                        total_amount: pendingBulkingMeta.total_amount_locale,
-                                    }}
-                                />
-                            </div>
-                            <button
-                                className="button button-primary"
-                                data-dusk="bulkPendingNow"
-                                onClick={() => bulkPendingNow()}
-                                disabled={buildingBulks}>
-                                {buildingBulks ? (
-                                    <em className="mdi mdi-spin mdi-loading icon-start" />
-                                ) : (
-                                    <em className="mdi mdi-cube-send icon-start" />
-                                )}
-                                Maak nu een bulk betaalopdrachten
-                            </button>
-                        </div>
-                    </div>
-                )}
-
-            {viewType.key == 'transactions' && transactions.meta.total == 0 && (
-                <EmptyCard
-                    type={'card-section'}
-                    title={isSponsor ? 'Geen betaalopdrachten gevonden' : 'Geen transacties gevonden'}
-                />
-            )}
-
-            {viewType.key == 'transactions' && transactions?.meta && (
-                <div className="card-section" hidden={transactions?.meta?.total < 1}>
-                    <Paginator
-                        meta={transactions.meta}
-                        filters={filterValues}
-                        updateFilters={filterUpdate}
-                        perPageKey={paginatorTransactionsKey}
-                    />
-                </div>
-            )}
-
-            {viewType.key == 'bulks' && transactionBulks.meta.total > 0 && (
-                <TransactionBulksCard
-                    bulks={transactionBulks.data}
+            {viewType.key == 'transactions' && (
+                <TransactionsTableSection
+                    transactions={transactions}
                     organization={activeOrganization}
-                    filter={bulkFilter}
+                    isSponsor={isSponsor}
+                    isProvider={isProvider}
+                    columns={transactionService.getColumns(isSponsor, isProvider)}
+                    filter={filter}
+                    filterValues={filterValues}
+                    filterUpdate={filterUpdate}
+                    paginatorKey={paginatorTransactionsKey}
+                    pendingBulkingMeta={pendingBulkingMeta}
+                    canManageBulks={isSponsor && hasPermission(activeOrganization, Permission.MANAGE_TRANSACTION_BULKS)}
+                    buildingBulks={buildingBulks}
+                    onBulkPendingNow={bulkPendingNow}
                 />
             )}
 
-            {viewType.key === 'bulks' && transactionBulks.meta.total == 0 && (
-                <EmptyCard
-                    type={'card-section'}
-                    title={'Geen bulktransacties gevonden'}
-                    description={[
-                        'Bulk betaalopdrachten worden dagelijks om 09:00 gegereneerd en bevatten alle nog niet uitbetaalde transacties uit de wachtrij.',
-                        'Momenteel zijn er geen bulk transacties beschikbaar.',
-                    ].join('\n')}
+            {viewType.key === 'bulks' && (
+                <TransactionBulksTableSection
+                    bulks={transactionBulks}
+                    organization={activeOrganization}
+                    columns={transactionBulkService.getColumns()}
+                    bulkFilter={bulkFilter}
+                    bulkFilterValues={bulkFilterValues}
+                    bulkFilterUpdate={bulkFilterUpdate}
+                    paginatorKey={paginatorTransactionBulkKey}
                 />
             )}
-
-            {transactionBulks && viewType.key == 'bulks' && transactionBulks?.meta && (
-                <div className="card-section" hidden={transactionBulks?.meta?.total < 1}>
-                    <Paginator
-                        meta={transactionBulks.meta}
-                        filters={bulkFilterValues}
-                        updateFilters={bulkFilterUpdate}
-                        perPageKey={paginatorTransactionBulkKey}
-                    />
-                </div>
-            )}
         </div>
     );
 }
diff --git a/react/src/dashboard/components/pages/transactions/elements/TransactionBulksCard.tsx b/react/src/dashboard/components/pages/transactions/elements/TransactionBulksCard.tsx
deleted file mode 100644
index d067a1823..000000000
--- a/react/src/dashboard/components/pages/transactions/elements/TransactionBulksCard.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import React from 'react';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
-import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
-import StateNavLink from '../../../../modules/state_router/StateNavLink';
-import TransactionBulk from '../../../../props/models/TransactionBulk';
-import Label from '../../../elements/image_cropper/Label';
-import TableRowActions from '../../../elements/tables/TableRowActions';
-import Organization from '../../../../props/models/Organization';
-import { FilterModel, FilterScope } from '../../../../modules/filter_next/types/FilterParams';
-import useTransactionBulkService from '../../../../services/TransactionBulkService';
-import { DashboardRoutes } from '../../../../modules/state_router/RouterBuilder';
-
-export default function TransactionBulksCard({
-    bulks,
-    filter,
-    organization,
-}: {
-    bulks: Array<TransactionBulk>;
-    filter: FilterScope<FilterModel>;
-    organization: Organization;
-}) {
-    const transactionBulkService = useTransactionBulkService();
-
-    const { headElement, configsElement } = useConfigurableTable(transactionBulkService.getColumns(), {
-        filter,
-        sortable: true,
-    });
-
-    return (
-        <div className="card-section">
-            <div className="card-block card-block-table">
-                {configsElement}
-
-                <TableTopScroller>
-                    <table className="table">
-                        {headElement}
-
-                        <tbody>
-                            {bulks?.map((transactionBulk) => (
-                                <StateNavLink
-                                    customElement={'tr'}
-                                    className={'tr-clickable'}
-                                    name={DashboardRoutes.TRANSACTION_BULK}
-                                    params={{
-                                        organizationId: organization.id,
-                                        id: transactionBulk.id,
-                                    }}
-                                    key={transactionBulk.id}
-                                    dataDusk={`transactionBulkRow${transactionBulk.id}`}>
-                                    <td>{transactionBulk.id}</td>
-                                    <td className="text-primary-light">
-                                        {transactionBulk.voucher_transactions_amount_locale}
-                                    </td>
-                                    <td>
-                                        <div className="text-semibold text-primary">
-                                            {transactionBulk.created_at_locale.split(' - ')[0]}
-                                        </div>
-                                        <div className="text-strong text-md text-muted-dark">
-                                            {transactionBulk.created_at_locale.split(' - ')[1]}
-                                        </div>
-                                    </td>
-                                    <td>{transactionBulk.voucher_transactions_count}</td>
-                                    <td>
-                                        {transactionBulk.state === 'rejected' && (
-                                            <Label type="danger">{transactionBulk.state_locale}</Label>
-                                        )}
-
-                                        {transactionBulk.state === 'error' && (
-                                            <Label type="danger">{transactionBulk.state_locale}</Label>
-                                        )}
-
-                                        {transactionBulk.state === 'draft' && (
-                                            <Label type="default">{transactionBulk.state_locale}</Label>
-                                        )}
-
-                                        {transactionBulk.state === 'accepted' && (
-                                            <Label type="success">{transactionBulk.state_locale}</Label>
-                                        )}
-
-                                        {transactionBulk.state === 'pending' && (
-                                            <Label type="default">{transactionBulk.state_locale}</Label>
-                                        )}
-                                    </td>
-
-                                    <td className={'table-td-actions text-right'}>
-                                        <TableRowActions
-                                            content={() => (
-                                                <div className="dropdown dropdown-actions">
-                                                    <StateNavLink
-                                                        className="dropdown-item"
-                                                        name={DashboardRoutes.TRANSACTION_BULK}
-                                                        params={{
-                                                            organizationId: organization.id,
-                                                            id: transactionBulk.id,
-                                                        }}>
-                                                        <em className={'mdi mdi-eye icon-start'} />
-                                                        Bekijken
-                                                    </StateNavLink>
-                                                </div>
-                                            )}
-                                        />
-                                    </td>
-                                </StateNavLink>
-                            ))}
-                        </tbody>
-                    </table>
-                </TableTopScroller>
-            </div>
-        </div>
-    );
-}
diff --git a/react/src/dashboard/components/pages/transactions/elements/TransactionBulksTableSection.tsx b/react/src/dashboard/components/pages/transactions/elements/TransactionBulksTableSection.tsx
new file mode 100644
index 000000000..bf728e5d9
--- /dev/null
+++ b/react/src/dashboard/components/pages/transactions/elements/TransactionBulksTableSection.tsx
@@ -0,0 +1,121 @@
+import React from 'react';
+import { PaginationData } from '../../../../props/ApiResponses';
+import TransactionBulk from '../../../../props/models/TransactionBulk';
+import Organization from '../../../../props/models/Organization';
+import { FilterModel, FilterScope, FilterSetter } from '../../../../modules/filter_next/types/FilterParams';
+import { ConfigurableTableColumn } from '../../vouchers/hooks/useConfigurableTable';
+import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
+import StateNavLink from '../../../../modules/state_router/StateNavLink';
+import { DashboardRoutes } from '../../../../modules/state_router/RouterBuilder';
+import Label from '../../../elements/image_cropper/Label';
+import TableRowActions from '../../../elements/tables/TableRowActions';
+import Paginator from '../../../../modules/paginator/components/Paginator';
+
+export default function TransactionBulksTableSection({
+    bulks,
+    organization,
+    columns,
+    bulkFilter,
+    bulkFilterValues,
+    bulkFilterUpdate,
+    paginatorKey,
+}: {
+    bulks: PaginationData<TransactionBulk>;
+    organization: Organization;
+    columns: Array<ConfigurableTableColumn>;
+    bulkFilter: FilterScope<FilterModel>;
+    bulkFilterValues: FilterModel;
+    bulkFilterUpdate: FilterSetter;
+    paginatorKey: string;
+}) {
+    return (
+        <div>
+            <LoaderTableCard
+                empty={bulks?.meta?.total == 0}
+                emptyTitle={'Geen bulktransacties gevonden'}
+                emptyDescription={[
+                    'Bulk betaalopdrachten worden dagelijks om 09:00 gegereneerd en bevatten alle nog niet ' +
+                        'uitbetaalde transacties uit de wachtrij.',
+                    'Momenteel zijn er geen bulk transacties beschikbaar.',
+                ].join('\n')}
+                columns={columns}
+                tableOptions={{ filter: bulkFilter, sortable: true }}>
+                {bulks?.data?.map((transactionBulk) => (
+                    <StateNavLink
+                        customElement={'tr'}
+                        className={'tr-clickable'}
+                        name={DashboardRoutes.TRANSACTION_BULK}
+                        params={{
+                            organizationId: organization.id,
+                            id: transactionBulk.id,
+                        }}
+                        key={transactionBulk.id}
+                        dataDusk={`transactionBulkRow${transactionBulk.id}`}>
+                        <td>{transactionBulk.id}</td>
+                        <td className="text-primary-light">{transactionBulk.voucher_transactions_amount_locale}</td>
+                        <td>
+                            <div className="text-semibold text-primary">
+                                {transactionBulk.created_at_locale.split(' - ')[0]}
+                            </div>
+                            <div className="text-strong text-md text-muted-dark">
+                                {transactionBulk.created_at_locale.split(' - ')[1]}
+                            </div>
+                        </td>
+                        <td>{transactionBulk.voucher_transactions_count}</td>
+                        <td>
+                            {transactionBulk.state === 'rejected' && (
+                                <Label type="danger">{transactionBulk.state_locale}</Label>
+                            )}
+
+                            {transactionBulk.state === 'error' && (
+                                <Label type="danger">{transactionBulk.state_locale}</Label>
+                            )}
+
+                            {transactionBulk.state === 'draft' && (
+                                <Label type="default">{transactionBulk.state_locale}</Label>
+                            )}
+
+                            {transactionBulk.state === 'accepted' && (
+                                <Label type="success">{transactionBulk.state_locale}</Label>
+                            )}
+
+                            {transactionBulk.state === 'pending' && (
+                                <Label type="default">{transactionBulk.state_locale}</Label>
+                            )}
+                        </td>
+
+                        <td className={'table-td-actions text-right'}>
+                            <TableRowActions
+                                content={() => (
+                                    <div className="dropdown dropdown-actions">
+                                        <StateNavLink
+                                            className="dropdown-item"
+                                            name={DashboardRoutes.TRANSACTION_BULK}
+                                            params={{
+                                                organizationId: organization.id,
+                                                id: transactionBulk.id,
+                                            }}>
+                                            <em className={'mdi mdi-eye icon-start'} />
+                                            Bekijken
+                                        </StateNavLink>
+                                    </div>
+                                )}
+                            />
+                        </td>
+                    </StateNavLink>
+                ))}
+            </LoaderTableCard>
+
+            {bulks?.meta && (
+                <div className="card-section" hidden={bulks?.meta?.total < 1}>
+                    <Paginator
+                        meta={bulks.meta}
+                        filters={bulkFilterValues}
+                        updateFilters={bulkFilterUpdate}
+                        perPageKey={paginatorKey}
+                    />
+                </div>
+            )}
+        </div>
+    );
+}
diff --git a/react/src/dashboard/components/pages/transactions/elements/TransactionsTableSection.tsx b/react/src/dashboard/components/pages/transactions/elements/TransactionsTableSection.tsx
new file mode 100644
index 000000000..cf910a522
--- /dev/null
+++ b/react/src/dashboard/components/pages/transactions/elements/TransactionsTableSection.tsx
@@ -0,0 +1,321 @@
+import React, { Fragment } from 'react';
+import classNames from 'classnames';
+import { PaginationData } from '../../../../props/ApiResponses';
+import Transaction from '../../../../props/models/Transaction';
+import Organization from '../../../../props/models/Organization';
+import { FilterModel, FilterScope, FilterSetter } from '../../../../modules/filter_next/types/FilterParams';
+import { ConfigurableTableColumn } from '../../vouchers/hooks/useConfigurableTable';
+import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
+import StateNavLink from '../../../../modules/state_router/StateNavLink';
+import { DashboardRoutes } from '../../../../modules/state_router/RouterBuilder';
+import { strLimit } from '../../../../helpers/string';
+import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
+import TableRowActions from '../../../elements/tables/TableRowActions';
+import TransactionStateLabel from '../../../elements/resource-states/TransactionStateLabel';
+import Label from '../../../elements/image_cropper/Label';
+import TranslateHtml from '../../../elements/translate-html/TranslateHtml';
+import Paginator from '../../../../modules/paginator/components/Paginator';
+
+export default function TransactionsTableSection({
+    transactions,
+    organization,
+    isSponsor,
+    isProvider,
+    columns,
+    filter,
+    filterValues,
+    filterUpdate,
+    paginatorKey,
+    pendingBulkingMeta,
+    canManageBulks,
+    buildingBulks,
+    onBulkPendingNow,
+}: {
+    transactions: PaginationData<Transaction>;
+    organization: Organization;
+    isSponsor: boolean;
+    isProvider: boolean;
+    columns: Array<ConfigurableTableColumn>;
+    filter: FilterScope<FilterModel>;
+    filterValues: FilterModel;
+    filterUpdate: FilterSetter;
+    paginatorKey: string;
+    pendingBulkingMeta?: {
+        total_amount_locale?: string;
+        total_amount?: string;
+        total: number;
+    };
+    canManageBulks: boolean;
+    buildingBulks: boolean;
+    onBulkPendingNow: () => void;
+}) {
+    return (
+        <Fragment>
+            <LoaderTableCard
+                empty={transactions?.meta?.total == 0}
+                emptyTitle={isSponsor ? 'Geen betaalopdrachten gevonden' : 'Geen transacties gevonden'}
+                columns={columns}
+                tableOptions={{
+                    filter,
+                    sortable: true,
+                    sortableExclude: ['method', 'branch_name', 'branch_number', 'amount_extra'],
+                }}>
+                {transactions?.data?.map((transaction) => (
+                    <StateNavLink
+                        customElement={'tr'}
+                        className={'tr-clickable'}
+                        key={transaction.id}
+                        name={DashboardRoutes.TRANSACTION}
+                        params={{
+                            organizationId: organization.id,
+                            address: transaction.address,
+                        }}
+                        dataDusk={`tableTransactionRow${transaction.id}`}>
+                        <td>{transaction.id}</td>
+
+                        {isSponsor && <td title={transaction.uid || '-'}>{strLimit(transaction.uid || '-', 32)}</td>}
+                        <td>
+                            <StateNavLink
+                                name={DashboardRoutes.TRANSACTION}
+                                params={{
+                                    address: transaction.address,
+                                    organizationId: organization.id,
+                                }}
+                                className="text-primary-light">
+                                {transaction.amount_locale}
+                            </StateNavLink>
+                        </td>
+                        {isProvider && (
+                            <td>{transaction?.reservation?.amount_extra > 0 ? 'iDeal + Tegoed' : 'Tegoed'}</td>
+                        )}
+                        {isProvider && (
+                            <td>
+                                {transaction?.branch_name && (
+                                    <div className="text-primary">{transaction?.branch_name}</div>
+                                )}
+
+                                {transaction?.branch_id && (
+                                    <div>
+                                        ID <strong>{transaction?.branch_id}</strong>
+                                    </div>
+                                )}
+
+                                {!transaction.branch_id && !transaction.branch_name && (
+                                    <div className={'text-muted'}>Geen...</div>
+                                )}
+                            </td>
+                        )}
+                        {isProvider && (
+                            <td>
+                                <div className={classNames(!transaction?.branch_number && 'text-muted')}>
+                                    {strLimit(transaction.branch_number?.toString(), 32) || 'Geen...'}
+                                </div>
+                            </td>
+                        )}
+                        {isProvider && (
+                            <td>
+                                {transaction?.reservation?.amount_extra > 0
+                                    ? transaction?.reservation?.amount_extra_locale
+                                    : '-'}
+                            </td>
+                        )}
+                        <td>
+                            <div className={'text-semibold text-primary'}>
+                                {transaction.created_at_locale.split(' - ')[0]}
+                            </div>
+                            <div className={'text-strong text-md text-muted-dark'}>
+                                {transaction.created_at_locale.split(' - ')[1]}
+                            </div>
+                        </td>
+                        <td title={transaction.fund.name || ''}>{strLimit(transaction.fund.name, 25)}</td>
+                        {isProvider && (
+                            <td title={transaction.product?.name || '-'}>
+                                {transaction.product?.name ? (
+                                    strLimit(transaction.product?.name || '', 25)
+                                ) : (
+                                    <TableEmptyValue />
+                                )}
+                            </td>
+                        )}
+                        {isSponsor && (
+                            <td>
+                                <div className="text-semibold text-primary">
+                                    {transaction.payment_type_locale.title}
+                                </div>
+                                <div
+                                    className="text-strong text-md text-muted-dark"
+                                    title={transaction.payment_type_locale.subtitle || ''}>
+                                    {strLimit(transaction.payment_type_locale.subtitle)}
+                                </div>
+                            </td>
+                        )}
+                        {isSponsor && (
+                            <Fragment>
+                                {transaction.organization ? (
+                                    <td title={transaction.organization.name}>
+                                        {strLimit(transaction.organization.name, 25)}
+                                    </td>
+                                ) : (
+                                    <td>
+                                        <TableEmptyValue />
+                                    </td>
+                                )}
+                            </Fragment>
+                        )}
+
+                        {isSponsor && (
+                            <td>
+                                {transaction.non_cancelable_at_locale ? (
+                                    <div className={'text-semibold text-primary'}>
+                                        {transaction.non_cancelable_at_locale}
+                                    </div>
+                                ) : (
+                                    <TableEmptyValue />
+                                )}
+                            </td>
+                        )}
+
+                        {isSponsor && (
+                            <td>
+                                {transaction.execution_date_locale ? (
+                                    <div className={'text-semibold text-primary'}>
+                                        {transaction.execution_date_locale}
+                                    </div>
+                                ) : (
+                                    <TableEmptyValue />
+                                )}
+                            </td>
+                        )}
+
+                        {isSponsor && transaction.voucher_transaction_bulk_id && (
+                            <td>
+                                <StateNavLink
+                                    name={DashboardRoutes.TRANSACTION_BULK}
+                                    params={{
+                                        organizationId: organization.id,
+                                        id: transaction.voucher_transaction_bulk_id,
+                                    }}
+                                    className="text-primary-light">
+                                    {`#${transaction.voucher_transaction_bulk_id}`}
+                                </StateNavLink>
+                            </td>
+                        )}
+                        {isSponsor && !transaction.voucher_transaction_bulk_id && (
+                            <td>
+                                {transaction.transfer_in > 0 &&
+                                transaction.state == 'pending' &&
+                                transaction.attempts < 3 ? (
+                                    <div>In afwachting</div>
+                                ) : (
+                                    <TableEmptyValue />
+                                )}
+                            </td>
+                        )}
+                        {isSponsor && (
+                            <td>
+                                {(transaction.bulk_state == 'rejected' || transaction.bulk_state == 'error') && (
+                                    <Label type="danger">{transaction.bulk_state_locale}</Label>
+                                )}
+
+                                {(transaction.bulk_state == 'draft' || transaction.bulk_state == 'pending') && (
+                                    <Label type="default">{transaction.bulk_state_locale}</Label>
+                                )}
+
+                                {transaction.bulk_state == 'accepted' && (
+                                    <Label type="success">{transaction.bulk_state_locale}</Label>
+                                )}
+
+                                {!transaction.bulk_state && <TableEmptyValue />}
+                            </td>
+                        )}
+                        <td data-dusk="transactionState">
+                            <TransactionStateLabel transaction={transaction} />
+                        </td>
+                        <td>
+                            {transaction.transfer_in > 0 && transaction.state == 'pending' ? (
+                                <div className="text-muted-dark">
+                                    <em className="mdi mdi-clock-outline"> </em>
+                                    {transaction.transfer_in} dagen resterend
+                                </div>
+                            ) : (
+                                <TableEmptyValue />
+                            )}
+                        </td>
+                        <td className={'table-td-actions text-right'}>
+                            <TableRowActions
+                                content={() => (
+                                    <div className="dropdown dropdown-actions">
+                                        <StateNavLink
+                                            className="dropdown-item"
+                                            name={DashboardRoutes.TRANSACTION}
+                                            params={{
+                                                organizationId: organization.id,
+                                                address: transaction.address,
+                                            }}>
+                                            <em className={'mdi mdi-eye icon-start'} />
+                                            Bekijken
+                                        </StateNavLink>
+                                    </div>
+                                )}
+                            />
+                        </td>
+                    </StateNavLink>
+                ))}
+            </LoaderTableCard>
+
+            {!isSponsor && transactions.meta?.total > 0 && (
+                <div className="card-section">
+                    <div className="flex flex-horizontal">
+                        <div className="flex flex-grow">
+                            <div className="flex flex-vertical flex-center">
+                                <TranslateHtml
+                                    i18n={'transactions.labels.total_amount'}
+                                    values={{ total_amount: transactions?.meta?.total_amount_locale }}
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            {pendingBulkingMeta?.total > 0 && canManageBulks && (
+                <div className="card-section">
+                    <div className="flex flex-vertical">
+                        <div className="card-text" data-dusk="pendingBulkingMetaText">
+                            <TranslateHtml
+                                i18n={'transactions.labels.bulk_total_amount'}
+                                values={{
+                                    total: pendingBulkingMeta.total,
+                                    total_amount: pendingBulkingMeta.total_amount_locale,
+                                }}
+                            />
+                        </div>
+                        <button
+                            className="button button-primary"
+                            data-dusk="bulkPendingNow"
+                            onClick={onBulkPendingNow}
+                            disabled={buildingBulks}>
+                            {buildingBulks ? (
+                                <em className="mdi mdi-spin mdi-loading icon-start" />
+                            ) : (
+                                <em className="mdi mdi-cube-send icon-start" />
+                            )}
+                            Maak nu een bulk betaalopdrachten
+                        </button>
+                    </div>
+                </div>
+            )}
+
+            {transactions?.meta && (
+                <div className="card-section" hidden={transactions?.meta?.total < 1}>
+                    <Paginator
+                        meta={transactions.meta}
+                        filters={filterValues}
+                        updateFilters={filterUpdate}
+                        perPageKey={paginatorKey}
+                    />
+                </div>
+            )}
+        </Fragment>
+    );
+}
diff --git a/react/src/dashboard/components/pages/vouchers-view/elements/VoucherRecordsCard.tsx b/react/src/dashboard/components/pages/vouchers-view/elements/VoucherRecordsCard.tsx
index 74355a102..b44a534b6 100644
--- a/react/src/dashboard/components/pages/vouchers-view/elements/VoucherRecordsCard.tsx
+++ b/react/src/dashboard/components/pages/vouchers-view/elements/VoucherRecordsCard.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import SponsorVoucher from '../../../../props/models/Sponsor/SponsorVoucher';
 import Organization, { Permission } from '../../../../props/models/Organization';
 import useOpenModal from '../../../../hooks/useOpenModal';
-import Paginator from '../../../../modules/paginator/components/Paginator';
 import ModalVoucherRecordEdit from '../../../modals/ModalVoucherRecordEdit';
 import useVoucherRecordService from '../../../../services/VoucherRecordService';
 import { PaginationData } from '../../../../props/ApiResponses';
@@ -14,13 +14,11 @@ import usePushSuccess from '../../../../hooks/usePushSuccess';
 import { hasPermission } from '../../../../helpers/utils';
 import useTranslate from '../../../../hooks/useTranslate';
 import useSetProgress from '../../../../hooks/useSetProgress';
-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 TableRowActions from '../../../elements/tables/TableRowActions';
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
 import useFilterNext from '../../../../modules/filter_next/useFilterNext';
+import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
 
 export default function VoucherRecordsCard({
     voucher,
@@ -54,11 +52,6 @@ export default function VoucherRecordsCard({
         order_dir: 'asc',
     });
 
-    const { headElement, configsElement } = useConfigurableTable(voucherRecordService.getColumns(), {
-        filter,
-        sortable: true,
-    });
-
     const fetchRecords = useCallback(() => {
         setProgress(0);
 
@@ -124,7 +117,7 @@ export default function VoucherRecordsCard({
             <div className="card-header">
                 <div className="flex flex-grow card-title">
                     {translate('voucher_records.header.title')}
-                    {records.meta ? ` (${records.meta.total})` : ''}
+                    {records?.meta ? ` (${records?.meta?.total})` : ''}
                 </div>
                 <div className="card-header-filters">
                     <div className="block block-inline-filters form">
@@ -147,71 +140,43 @@ export default function VoucherRecordsCard({
                 </div>
             </div>
 
-            {records.data.length > 0 && (
-                <div className="card-section">
-                    <div className="card-block card-block-table">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {records.data.map((record, index: number) => (
-                                        <tr key={index}>
-                                            <td className="td-narrow nowrap">{record.id}</td>
-                                            <td className="nowrap">{record.record_type.name}</td>
-                                            <td>{record.value_locale}</td>
-                                            <td className="nowrap">{record.created_at_locale}</td>
-                                            <td className={record.note ? '' : 'text-muted'}>
-                                                {record.note || 'Geen notitie'}
-                                            </td>
-
-                                            <td className={'table-td-actions text-right'}>
-                                                {hasPermission(organization, Permission.MANAGE_VOUCHERS) ? (
-                                                    <TableRowActions
-                                                        content={() => (
-                                                            <div className="dropdown dropdown-actions">
-                                                                <a
-                                                                    className="dropdown-item"
-                                                                    onClick={() => editRecord(record)}>
-                                                                    <div className="mdi mdi-pencil-outline icon-start" />
-                                                                    Bewerking
-                                                                </a>
-                                                                <a
-                                                                    className="dropdown-item"
-                                                                    onClick={() => deleteRecord(record)}>
-                                                                    <div className="mdi mdi-delete-outline icon-start" />
-                                                                    Verwijderen
-                                                                </a>
-                                                            </div>
-                                                        )}
-                                                    />
-                                                ) : (
-                                                    <TableEmptyValue />
-                                                )}
-                                            </td>
-                                        </tr>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
-            )}
-
-            {records.meta.total == 0 ? (
-                <EmptyCard title={'Geen persoonsgegevens gevonden'} type={'card-section'} />
-            ) : (
-                <div className="card-section">
-                    <Paginator
-                        meta={records.meta}
-                        filters={filterValues}
-                        perPageKey={paginatorKey}
-                        updateFilters={filterUpdate}
-                    />
-                </div>
-            )}
+            <LoaderTableCard
+                empty={records?.meta?.total == 0}
+                emptyTitle={'Geen persoonsgegevens gevonden'}
+                columns={voucherRecordService.getColumns()}
+                tableOptions={{ filter, sortable: true }}
+                paginator={{ key: paginatorKey, data: records, filterValues, filterUpdate }}>
+                {records?.data?.map((record, index: number) => (
+                    <tr key={index}>
+                        <td className="td-narrow nowrap">{record.id}</td>
+                        <td className="nowrap">{record.record_type.name}</td>
+                        <td>{record.value_locale}</td>
+                        <td className="nowrap">{record.created_at_locale}</td>
+                        <td className={classNames(!record.note && 'text-muted')}>{record.note || 'Geen notitie'}</td>
+
+                        <td className={'table-td-actions text-right'}>
+                            {hasPermission(organization, Permission.MANAGE_VOUCHERS) ? (
+                                <TableRowActions
+                                    content={() => (
+                                        <div className="dropdown dropdown-actions">
+                                            <a className="dropdown-item" onClick={() => editRecord(record)}>
+                                                <div className="mdi mdi-pencil-outline icon-start" />
+                                                Bewerking
+                                            </a>
+                                            <a className="dropdown-item" onClick={() => deleteRecord(record)}>
+                                                <div className="mdi mdi-delete-outline icon-start" />
+                                                Verwijderen
+                                            </a>
+                                        </div>
+                                    )}
+                                />
+                            ) : (
+                                <TableEmptyValue />
+                            )}
+                        </td>
+                    </tr>
+                ))}
+            </LoaderTableCard>
         </div>
     );
 }
diff --git a/react/src/dashboard/components/pages/vouchers-view/elements/VoucherTransactionsCard.tsx b/react/src/dashboard/components/pages/vouchers-view/elements/VoucherTransactionsCard.tsx
index 8398a2392..a7bf490f8 100644
--- a/react/src/dashboard/components/pages/vouchers-view/elements/VoucherTransactionsCard.tsx
+++ b/react/src/dashboard/components/pages/vouchers-view/elements/VoucherTransactionsCard.tsx
@@ -1,7 +1,7 @@
 import Transaction from '../../../../props/models/Transaction';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import useEnvData from '../../../../hooks/useEnvData';
-import Paginator from '../../../../modules/paginator/components/Paginator';
 import { currencyFormat, strLimit } from '../../../../helpers/string';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import useTransactionService from '../../../../services/TransactionService';
@@ -9,14 +9,12 @@ import Organization from '../../../../props/models/Organization';
 import { PaginationData } from '../../../../props/ApiResponses';
 import LoadingCard from '../../../elements/loading-card/LoadingCard';
 import useSetProgress from '../../../../hooks/useSetProgress';
-import EmptyCard from '../../../elements/empty-card/EmptyCard';
 import Label from '../../../elements/image_cropper/Label';
-import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
 import TableRowActions from '../../../elements/tables/TableRowActions';
 import { DashboardRoutes } from '../../../../modules/state_router/RouterBuilder';
 import useFilterNext from '../../../../modules/filter_next/useFilterNext';
 import { FilterModel } from '../../../../modules/filter_next/types/FilterParams';
+import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
 
 export default function VoucherTransactionsCard({
     blockTitle,
@@ -34,6 +32,7 @@ export default function VoucherTransactionsCard({
     const transactionService = useTransactionService();
 
     const [transactions, setTransactions] = useState<PaginationData<Transaction>>(null);
+    const [paginatorKey] = useState('voucher_transactions');
 
     const isSponsor = useMemo(() => {
         return envData.client_type == 'sponsor';
@@ -41,11 +40,6 @@ export default function VoucherTransactionsCard({
 
     const [filterValues, filterValuesActive, filterUpdate, filter] = useFilterNext(filters);
 
-    const { headElement, configsElement } = useConfigurableTable(transactionService.getColumnsForVoucher(isSponsor), {
-        filter,
-        sortable: true,
-    });
-
     const fetchTransactions = useCallback(() => {
         setProgress(100);
 
@@ -73,102 +67,79 @@ export default function VoucherTransactionsCard({
         <div className="card">
             <div className="card-header">
                 <div className="card-title">
-                    {blockTitle || 'Transactions'} ({transactions.meta.total})
+                    {blockTitle || 'Transactions'} ({transactions?.meta?.total})
                 </div>
             </div>
 
-            {transactions.data.length > 0 && (
-                <div className="card-section">
-                    <div className="card-block card-block-table">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {transactions.data.map((transaction) => (
-                                        <tr key={transaction.id}>
-                                            <td>{transaction.id}</td>
-                                            <td title={transaction.uid || '-'}>
-                                                {strLimit(transaction.uid || '-', 25)}
-                                            </td>
-                                            <td>
-                                                <StateNavLink
-                                                    name={DashboardRoutes.TRANSACTION}
-                                                    className="text-primary-light"
-                                                    params={{
-                                                        organizationId: organization.id,
-                                                        address: transaction.address,
-                                                    }}>
-                                                    {currencyFormat(parseFloat(transaction.amount))}
-                                                </StateNavLink>
-                                            </td>
-                                            <td>
-                                                <strong className="text-primary">
-                                                    {transaction.created_at_locale.split(' - ')[0]}
-                                                </strong>
-                                                <br />
-                                                <strong className="text-strong text-md text-muted-dark">
-                                                    {transaction.created_at_locale.split(' - ')[1]}
-                                                </strong>
-                                            </td>
-                                            <td title={transaction.fund.name || ''}>
-                                                {strLimit(transaction.fund.name, 25)}
-                                            </td>
-                                            <td>{transaction.target_locale}</td>
-                                            {isSponsor && (
-                                                <td
-                                                    className={transaction.organization ? '' : 'text-muted'}
-                                                    title={transaction.organization?.name || ''}>
-                                                    {strLimit(transaction.organization?.name || '-', 25)}
-                                                </td>
-                                            )}
-                                            <td title={transaction.product?.name || ''}>
-                                                {strLimit(transaction.product?.name || '-', 25)}
-                                            </td>
-                                            <td>
-                                                {transaction.state == 'success' ? (
-                                                    <Label type="success">{transaction.state_locale}</Label>
-                                                ) : (
-                                                    <Label type="default">{transaction.state_locale}</Label>
-                                                )}
-                                            </td>
-
-                                            <td className={'table-td-actions text-right'}>
-                                                <TableRowActions
-                                                    content={() => (
-                                                        <div className="dropdown dropdown-actions">
-                                                            <StateNavLink
-                                                                name={DashboardRoutes.TRANSACTION}
-                                                                className="dropdown-item"
-                                                                params={{
-                                                                    address: transaction.address,
-                                                                    organizationId: organization.id,
-                                                                }}>
-                                                                <em className="mdi mdi-eye-outline icon-start" />
-                                                                Bekijken
-                                                            </StateNavLink>
-                                                        </div>
-                                                    )}
-                                                />
-                                            </td>
-                                        </tr>
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
-            )}
-
-            {transactions.meta.total === 0 ? (
-                <EmptyCard title={'Geen transacties gevonden'} type={'card-section'} />
-            ) : (
-                <div className="card-section">
-                    <Paginator meta={transactions.meta} filters={filterValues} updateFilters={filterUpdate} />
-                </div>
-            )}
+            <LoaderTableCard
+                empty={transactions?.meta?.total === 0}
+                emptyTitle={'Geen transacties gevonden'}
+                columns={transactionService.getColumnsForVoucher(isSponsor)}
+                tableOptions={{ filter, sortable: true }}
+                paginator={{ key: paginatorKey, data: transactions, filterValues, filterUpdate }}>
+                {transactions?.data?.map((transaction) => (
+                    <tr key={transaction.id}>
+                        <td>{transaction.id}</td>
+                        <td title={transaction.uid || '-'}>{strLimit(transaction.uid || '-', 25)}</td>
+                        <td>
+                            <StateNavLink
+                                name={DashboardRoutes.TRANSACTION}
+                                className="text-primary-light"
+                                params={{
+                                    organizationId: organization.id,
+                                    address: transaction.address,
+                                }}>
+                                {currencyFormat(parseFloat(transaction.amount))}
+                            </StateNavLink>
+                        </td>
+                        <td>
+                            <strong className="text-primary">{transaction.created_at_locale.split(' - ')[0]}</strong>
+                            <br />
+                            <strong className="text-strong text-md text-muted-dark">
+                                {transaction.created_at_locale.split(' - ')[1]}
+                            </strong>
+                        </td>
+                        <td title={transaction.fund.name || ''}>{strLimit(transaction.fund.name, 25)}</td>
+                        <td>{transaction.target_locale}</td>
+                        {isSponsor && (
+                            <td
+                                className={classNames(!transaction.organization && 'text-muted')}
+                                title={transaction.organization?.name || ''}>
+                                {strLimit(transaction.organization?.name || '-', 25)}
+                            </td>
+                        )}
+                        <td title={transaction.product?.name || ''}>
+                            {strLimit(transaction.product?.name || '-', 25)}
+                        </td>
+                        <td>
+                            {transaction.state == 'success' ? (
+                                <Label type="success">{transaction.state_locale}</Label>
+                            ) : (
+                                <Label type="default">{transaction.state_locale}</Label>
+                            )}
+                        </td>
+
+                        <td className={'table-td-actions text-right'}>
+                            <TableRowActions
+                                content={() => (
+                                    <div className="dropdown dropdown-actions">
+                                        <StateNavLink
+                                            name={DashboardRoutes.TRANSACTION}
+                                            className="dropdown-item"
+                                            params={{
+                                                address: transaction.address,
+                                                organizationId: organization.id,
+                                            }}>
+                                            <em className="mdi mdi-eye-outline icon-start" />
+                                            Bekijken
+                                        </StateNavLink>
+                                    </div>
+                                )}
+                            />
+                        </td>
+                    </tr>
+                ))}
+            </LoaderTableCard>
         </div>
     );
 }
diff --git a/react/src/dashboard/components/pages/vouchers/Vouchers.tsx b/react/src/dashboard/components/pages/vouchers/Vouchers.tsx
index 1ff0b9a74..a0dae68b6 100644
--- a/react/src/dashboard/components/pages/vouchers/Vouchers.tsx
+++ b/react/src/dashboard/components/pages/vouchers/Vouchers.tsx
@@ -174,7 +174,7 @@ export default function Vouchers() {
 
     return (
         <div className="card" data-dusk={`tableVoucherContent${filterValues?.fund_id || ''}`}>
-            <div className={classNames(`card-header`, loading && 'card-header-inactive')}>
+            <div className={classNames('card-header', loading && 'card-header-inactive')}>
                 <div className="card-title flex flex-grow" data-dusk="vouchersTitle">
                     {translate('vouchers.header.title')} ({vouchers?.meta?.total})
                 </div>
diff --git a/react/src/dashboard/components/pages/vouchers/elements/VouchersTable.tsx b/react/src/dashboard/components/pages/vouchers/elements/VouchersTable.tsx
index 80a51f29c..94be6200a 100644
--- a/react/src/dashboard/components/pages/vouchers/elements/VouchersTable.tsx
+++ b/react/src/dashboard/components/pages/vouchers/elements/VouchersTable.tsx
@@ -2,11 +2,8 @@ import React from 'react';
 import SponsorVoucher from '../../../../props/models/Sponsor/SponsorVoucher';
 import Organization from '../../../../props/models/Organization';
 import Fund from '../../../../props/models/Fund';
-import TableTopScroller from '../../../elements/tables/TableTopScroller';
 import VouchersTableRow from './VouchersTableRow';
-import Paginator from '../../../../modules/paginator/components/Paginator';
 import { PaginationData } from '../../../../props/ApiResponses';
-import useConfigurableTable from '../hooks/useConfigurableTable';
 import useVoucherService from '../../../../services/VoucherService';
 import { FilterModel, FilterSetter } from '../../../../modules/filter_next/types/FilterParams';
 import LoaderTableCard from '../../../elements/loader-table-card/LoaderTableCard';
@@ -32,46 +29,22 @@ export default function VouchersTable({
 }) {
     const voucherService = useVoucherService();
 
-    const { headElement, configsElement } = useConfigurableTable(voucherService.getColumns());
-
     return (
-        <LoaderTableCard loading={loading} empty={vouchers.meta.total == 0} emptyTitle={'Geen vouchers gevonden'}>
-            {!loading && vouchers.data.length > 0 && (
-                <div className="card-section">
-                    <div className="card-block card-block-table">
-                        {configsElement}
-
-                        <TableTopScroller>
-                            <table className="table">
-                                {headElement}
-
-                                <tbody>
-                                    {vouchers.data.map((voucher) => (
-                                        <VouchersTableRow
-                                            funds={funds}
-                                            key={voucher.id}
-                                            voucher={voucher}
-                                            fetchVouchers={fetchVouchers}
-                                            organization={organization}
-                                        />
-                                    ))}
-                                </tbody>
-                            </table>
-                        </TableTopScroller>
-                    </div>
-                </div>
-            )}
-
-            {vouchers.meta && (
-                <div className="card-section">
-                    <Paginator
-                        meta={vouchers.meta}
-                        filters={filterValues}
-                        updateFilters={filterUpdate}
-                        perPageKey={paginatorKey}
-                    />
-                </div>
-            )}
+        <LoaderTableCard
+            loading={loading}
+            empty={vouchers?.meta?.total == 0}
+            emptyTitle={'Geen vouchers gevonden'}
+            columns={voucherService.getColumns()}
+            paginator={{ key: paginatorKey, data: vouchers, filterValues, filterUpdate }}>
+            {vouchers?.data?.map((voucher) => (
+                <VouchersTableRow
+                    funds={funds}
+                    key={voucher.id}
+                    voucher={voucher}
+                    fetchVouchers={fetchVouchers}
+                    organization={organization}
+                />
+            ))}
         </LoaderTableCard>
     );
 }
diff --git a/react/src/dashboard/components/pages/vouchers/elements/VouchersTableNoFundsBlock.tsx b/react/src/dashboard/components/pages/vouchers/elements/VouchersTableNoFundsBlock.tsx
index e372f83c8..10ca6a439 100644
--- a/react/src/dashboard/components/pages/vouchers/elements/VouchersTableNoFundsBlock.tsx
+++ b/react/src/dashboard/components/pages/vouchers/elements/VouchersTableNoFundsBlock.tsx
@@ -1,5 +1,4 @@
 import EmptyCard from '../../../elements/empty-card/EmptyCard';
-import { getStateRouteUrl } from '../../../../modules/state_router/Router';
 import React from 'react';
 import { hasPermission } from '../../../../helpers/utils';
 import Organization, { Permission } from '../../../../props/models/Organization';
@@ -11,7 +10,8 @@ export default function VouchersTableNoFundsBlock({ organization }: { organizati
             description={'Je hebt momenteel geen fondsen.'}
             button={{
                 text: 'Fonds toevoegen',
-                to: getStateRouteUrl(DashboardRoutes.ORGANIZATION_FUNDS, { organizationId: organization.id }),
+                state: DashboardRoutes.ORGANIZATION_FUNDS,
+                stateParams: { organizationId: organization.id },
             }}
         />
     ) : (
diff --git a/react/src/dashboard/components/pages/vouchers/elements/VouchersTableRow.tsx b/react/src/dashboard/components/pages/vouchers/elements/VouchersTableRow.tsx
index 1a5ffea53..291b3a311 100644
--- a/react/src/dashboard/components/pages/vouchers/elements/VouchersTableRow.tsx
+++ b/react/src/dashboard/components/pages/vouchers/elements/VouchersTableRow.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useCallback } from 'react';
+import classNames from 'classnames';
 import SponsorVoucher from '../../../../props/models/Sponsor/SponsorVoucher';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import Organization, { Permission } from '../../../../props/models/Organization';
@@ -190,14 +191,20 @@ export default function VouchersTableRow({
                                 voucher.state != 'deactivated' && (
                                     <Fragment>
                                         <a
-                                            className={`dropdown-item ${voucher.state === 'active' ? 'disabled' : ''}`}
+                                            className={classNames(
+                                                'dropdown-item',
+                                                voucher.state === 'active' && 'disabled',
+                                            )}
                                             onClick={onOpenAction}>
                                             <em className="mdi mdi-bookmark icon-start" />
                                             Activeren
                                         </a>
 
                                         <a
-                                            className={`dropdown-item ${voucher.state === 'pending' ? 'disabled' : ''}`}
+                                            className={classNames(
+                                                'dropdown-item',
+                                                voucher.state === 'pending' && 'disabled',
+                                            )}
                                             onClick={onOpenAction}>
                                             <em className="mdi mdi-qrcode icon-start" />
                                             QR-code
diff --git a/react/src/dashboard/i18n/nl/i18n-modals-danger_zone.js b/react/src/dashboard/i18n/nl/i18n-modals-danger_zone.js
index 956a3befa..81d590896 100644
--- a/react/src/dashboard/i18n/nl/i18n-modals-danger_zone.js
+++ b/react/src/dashboard/i18n/nl/i18n-modals-danger_zone.js
@@ -17,6 +17,7 @@ import remove_reservation_field from './modals/danger-zone/remove-reservation-fi
 import remove_mollie_connection from './modals/danger-zone/remove-mollie-connection';
 import exclude_pre_check_fund from './modals/danger-zone/exclude_pre_check_fund';
 import remove_prevalidation_request from './modals/danger-zone/remove-prevalidation-request';
+import confirm_extra_payment_refund from './modals/danger-zone/confirm-extra-payment-refund';
 
 export default {
     remove_provider_application,
@@ -38,4 +39,5 @@ export default {
     remove_mollie_connection,
     exclude_pre_check_fund,
     remove_prevalidation_request,
+    confirm_extra_payment_refund,
 };
diff --git a/react/src/dashboard/i18n/nl/modals/danger-zone/confirm-extra-payment-refund.js b/react/src/dashboard/i18n/nl/modals/danger-zone/confirm-extra-payment-refund.js
new file mode 100644
index 000000000..9e45c69b8
--- /dev/null
+++ b/react/src/dashboard/i18n/nl/modals/danger-zone/confirm-extra-payment-refund.js
@@ -0,0 +1,9 @@
+export default {
+    title: 'Bankrekening verwijderen?',
+    description:
+        'Je staat op het punt een bankrekening te verwijderen. Deze actie kan niet ongedaan worden gemaakt, weet je zeker dat je door wilt gaan?',
+    buttons: {
+        cancel: 'Annuleren',
+        confirm: 'Bevestigen',
+    },
+};
diff --git a/react/src/dashboard/layout/Layout.tsx b/react/src/dashboard/layout/Layout.tsx
index 8eb366e33..8bf8bd7c6 100644
--- a/react/src/dashboard/layout/Layout.tsx
+++ b/react/src/dashboard/layout/Layout.tsx
@@ -14,6 +14,7 @@ import { Libraries, LoadScript } from '@react-google-maps/api';
 import useEnvData from '../hooks/useEnvData';
 import Printable from '../modules/printable/components/Printable';
 import ErrorBoundaryHandler from '../components/elements/error-boundary-handler/ErrorBoundaryHandler';
+import classNames from 'classnames';
 
 export const Layout = ({ children }: { children: React.ReactElement }) => {
     const { modals } = useContext(modalsContext);
@@ -43,9 +44,11 @@ export const Layout = ({ children }: { children: React.ReactElement }) => {
         <LoadScript googleMapsApiKey={envData?.config?.google_maps_api_key} libraries={libraries}>
             <ErrorBoundaryHandler type={'main'} front={'dashboard'}>
                 <div
-                    className={`app ${route?.state?.name == 'sign-in' ? 'landing-root' : ''} ${
-                        [LayoutType.landingClearNew].includes(layout) ? 'signup-layout signup-layout-new' : ''
-                    }`}
+                    className={classNames(
+                        'app',
+                        route?.state?.name == 'sign-in' && 'landing-root',
+                        [LayoutType.landingClearNew].includes(layout) && 'signup-layout signup-layout-new',
+                    )}
                     ref={pageScrollRef}
                     style={{
                         width: '100%',
@@ -61,7 +64,7 @@ export const Layout = ({ children }: { children: React.ReactElement }) => {
                         {layout == LayoutType.dashboard && activeOrganization && <LayoutAside />}
 
                         {isReady && (
-                            <section className={`app app-content`}>
+                            <section className="app app-content">
                                 <ErrorBoundaryHandler
                                     type={
                                         [LayoutType.landingClearNew, LayoutType.landingClear].includes(layout)
diff --git a/react/src/dashboard/layout/elements/LayoutHeader.tsx b/react/src/dashboard/layout/elements/LayoutHeader.tsx
index b5631b5a5..d6a333b9c 100644
--- a/react/src/dashboard/layout/elements/LayoutHeader.tsx
+++ b/react/src/dashboard/layout/elements/LayoutHeader.tsx
@@ -32,6 +32,7 @@ import useAssetUrl from '../../hooks/useAssetUrl';
 import useThumbnailUrl from '../../hooks/useThumbnailUrl';
 import useAuthIdentity2FAState from '../../hooks/useAuthIdentity2FAState';
 import { DashboardRoutes } from '../../modules/state_router/RouterBuilder';
+import classNames from 'classnames';
 
 interface IdentityMenuItemProps {
     url?: string;
@@ -46,7 +47,7 @@ interface IdentityMenuItemProps {
 const IdentityMenuItem = ({ url, href, name, icon, dusk, active, onClick }: IdentityMenuItemProps) => {
     if (url) {
         return (
-            <NavLink to={url} data-dusk={dusk} className={() => `auth-user-menu-item ${active ? 'active' : ''}`}>
+            <NavLink to={url} data-dusk={dusk} className={() => classNames('auth-user-menu-item', active && 'active')}>
                 <div className="auth-user-menu-item-icon">{icon}</div>
                 {name}
             </NavLink>
@@ -54,7 +55,11 @@ const IdentityMenuItem = ({ url, href, name, icon, dusk, active, onClick }: Iden
     }
 
     return (
-        <a href={href} data-dusk={dusk} className={`auth-user-menu-item ${active ? 'active' : ''}`} onClick={onClick}>
+        <a
+            href={href}
+            data-dusk={dusk}
+            className={classNames('auth-user-menu-item', active && 'active')}
+            onClick={onClick}>
             <div className="auth-user-menu-item-icon">{icon}</div>
             {name}
         </a>
@@ -172,7 +177,12 @@ export const LayoutHeader = () => {
                             />
 
                             <div className="auth-user-caret">
-                                <em className={showIdentityMenu ? 'mdi mdi-chevron-up' : 'mdi mdi-chevron-down'} />
+                                <em
+                                    className={classNames(
+                                        'mdi',
+                                        showIdentityMenu ? 'mdi-chevron-up' : 'mdi-chevron-down',
+                                    )}
+                                />
                             </div>
 
                             {showIdentityMenu && (
diff --git a/react/src/dashboard/layout/elements/aside/elements/LayoutAsideNavGroup.tsx b/react/src/dashboard/layout/elements/aside/elements/LayoutAsideNavGroup.tsx
index 2d781d77c..b40e2e1ef 100644
--- a/react/src/dashboard/layout/elements/aside/elements/LayoutAsideNavGroup.tsx
+++ b/react/src/dashboard/layout/elements/aside/elements/LayoutAsideNavGroup.tsx
@@ -124,9 +124,7 @@ export default function LayoutAsideNavGroup({
                             });
                         }
                     }}>
-                    {hasItems && (
-                        <em className={classNames('mdi', classNames(isOpen ? 'mdi-chevron-up' : 'mdi-chevron-down'))} />
-                    )}
+                    {hasItems && <em className={classNames('mdi', isOpen ? 'mdi-chevron-up' : 'mdi-chevron-down')} />}
                 </div>
             </StateNavLink>
 
diff --git a/react/src/dashboard/modules/paginator/components/Paginator.tsx b/react/src/dashboard/modules/paginator/components/Paginator.tsx
index 777ae8645..051b12765 100644
--- a/react/src/dashboard/modules/paginator/components/Paginator.tsx
+++ b/react/src/dashboard/modules/paginator/components/Paginator.tsx
@@ -98,7 +98,7 @@ export default function Paginator({
     }, [meta?.current_page, loadingPage]);
 
     return (
-        <div className={`table-pagination form ${className}`}>
+        <div className={classNames('table-pagination', 'form', className)}>
             {meta.from && meta.to && (
                 <div className={perPageKey && 'form'}>
                     <div className="table-pagination-counter">
@@ -131,7 +131,7 @@ export default function Paginator({
                     onKeyDown={clickOnKeyEnter}
                     tabIndex={meta.current_page === 1 ? undefined : 0}
                     disabled={loading || meta.current_page === 1}
-                    className={`table-pagination-button`}>
+                    className="table-pagination-button">
                     {translate('paginator.buttons.first')}
                 </button>
                 {pages.map((page) => (
@@ -157,7 +157,7 @@ export default function Paginator({
                     onKeyDown={clickOnKeyEnter}
                     disabled={loading || meta.current_page === meta.last_page}
                     tabIndex={meta.current_page === meta.last_page ? undefined : 0}
-                    className={`table-pagination-button`}>
+                    className="table-pagination-button">
                     {translate('paginator.buttons.last')}
                 </button>
             </div>
diff --git a/react/src/dashboard/modules/push_notifications/components/PushNotificationsGroup.tsx b/react/src/dashboard/modules/push_notifications/components/PushNotificationsGroup.tsx
index 4aeed4238..35d664b93 100644
--- a/react/src/dashboard/modules/push_notifications/components/PushNotificationsGroup.tsx
+++ b/react/src/dashboard/modules/push_notifications/components/PushNotificationsGroup.tsx
@@ -70,7 +70,12 @@ export default function PushNotificationsGroup({
                 {shownNotifications?.map((notification) => (
                     <div
                         key={notification.id}
-                        className={classNames('notification', `notification-${notification.type}`)}
+                        className={classNames(
+                            'notification',
+                            notification.type === 'success' && 'notification-success',
+                            notification.type === 'danger' && 'notification-danger',
+                            notification.type === 'info' && 'notification-info',
+                        )}
                         role="status"
                         data-dusk={`${notification.type}Notification`}>
                         {notification.icon && <em className={`notification-icon mdi mdi-${notification.icon}`} />}
diff --git a/react/src/props/elements/ButtonType.ts b/react/src/props/elements/ButtonType.ts
index 1258ce004..f7c67c2b6 100644
--- a/react/src/props/elements/ButtonType.ts
+++ b/react/src/props/elements/ButtonType.ts
@@ -1,8 +1,22 @@
 import React from 'react';
 
+export type ButtonVariant =
+    | 'default'
+    | 'default-dashed'
+    | 'dashed'
+    | 'primary'
+    | 'primary-light'
+    | 'primary-outline'
+    | 'primary-variant'
+    | 'secondary'
+    | 'danger'
+    | 'text'
+    | 'text-primary'
+    | 'text-padless';
+
 type ButtonType = {
     text?: string;
-    type?: string;
+    type?: ButtonVariant;
     icon?: string;
     iconEnd?: boolean;
     onClick: (
diff --git a/react/src/webshop/components/elements/announcements/Announcements.tsx b/react/src/webshop/components/elements/announcements/Announcements.tsx
index 5e297aafd..660d8fb7c 100644
--- a/react/src/webshop/components/elements/announcements/Announcements.tsx
+++ b/react/src/webshop/components/elements/announcements/Announcements.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import Announcement from '../../../../dashboard/props/models/Announcement';
 import Markdown from '../markdown/Markdown';
 
@@ -44,9 +45,12 @@ export default function Announcements({ announcements }: { announcements?: Array
             {listActive?.map((announcement) => (
                 <div
                     key={announcement.id}
-                    className={`block block-announcement ${
-                        'announcement-' + announcement.type + (announcement.dismissed ? ' dismissed' : '')
-                    }`}>
+                    className={classNames(
+                        'block',
+                        'block-announcement',
+                        `announcement-${announcement.type}`,
+                        announcement.dismissed && 'dismissed',
+                    )}>
                     {announcement.title && (
                         <div className="announcement-title">
                             {(announcement.type == 'default' || announcement.type == 'primary') && (
diff --git a/react/src/webshop/components/elements/app-links/AppLinks.tsx b/react/src/webshop/components/elements/app-links/AppLinks.tsx
index 0e1ef441d..dd6cb574e 100644
--- a/react/src/webshop/components/elements/app-links/AppLinks.tsx
+++ b/react/src/webshop/components/elements/app-links/AppLinks.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import useEnvData from '../../../hooks/useEnvData';
 import useAssetUrl from '../../../hooks/useAssetUrl';
 import useTranslate from '../../../../dashboard/hooks/useTranslate';
@@ -25,7 +26,7 @@ export default function AppLinks({
     const translate = useTranslate();
 
     return (
-        <div className={`block block-app_links ${className} ${type ? `block-app_links-${type}` : ''}`}>
+        <div className={classNames('block', 'block-app_links', className, type === 'lg' && 'block-app_links-lg')}>
             {showAndroidButton && (
                 <a
                     href={envData?.config?.android_link}
diff --git a/react/src/webshop/components/elements/block-card-2fa-warning/BlockCard2FAWarning.tsx b/react/src/webshop/components/elements/block-card-2fa-warning/BlockCard2FAWarning.tsx
index 29e2cf810..e31a89593 100644
--- a/react/src/webshop/components/elements/block-card-2fa-warning/BlockCard2FAWarning.tsx
+++ b/react/src/webshop/components/elements/block-card-2fa-warning/BlockCard2FAWarning.tsx
@@ -1,6 +1,7 @@
 import React, { useMemo, useState } from 'react';
 import Fund from '../../../props/models/Fund';
 import useTranslate from '../../../../dashboard/hooks/useTranslate';
+import classNames from 'classnames';
 
 export default function BlockCard2FAWarning({
     fund,
@@ -59,7 +60,12 @@ export default function BlockCard2FAWarning({
                 )}
 
                 {hasRestrictions && (
-                    <div className={`block-card-actions ${buttonPosition}`}>
+                    <div
+                        className={classNames(
+                            'block-card-actions',
+                            buttonPosition === 'top' && 'block-card-actions-top',
+                            buttonPosition === 'bottom' && 'block-card-actions-bottom',
+                        )}>
                         {showMore2FADetails ? (
                             <div className="button button-text" onClick={() => setShowMore2FADetails(false)}>
                                 {translate('global.card_2fa_warning.2fa_policy.show_less')}
diff --git a/react/src/webshop/components/elements/block-loader/BlockLoader.tsx b/react/src/webshop/components/elements/block-loader/BlockLoader.tsx
index ac7f91eb0..15567207f 100644
--- a/react/src/webshop/components/elements/block-loader/BlockLoader.tsx
+++ b/react/src/webshop/components/elements/block-loader/BlockLoader.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
+import classNames from 'classnames';
 
 export default function BlockLoader({ type }: { type?: 'full' }) {
     return (
-        <div className={`block block-loader ${type == 'full' ? 'block-loader-full' : ''}`}>
+        <div className={classNames('block', 'block-loader', type == 'full' && 'block-loader-full')}>
             <div className="loader-content">
                 <div className={'loader-bars'}>
                     <div className={'loader-bar'} />
diff --git a/react/src/webshop/components/elements/block-organization-offices/BlockOrganizationOffices.tsx b/react/src/webshop/components/elements/block-organization-offices/BlockOrganizationOffices.tsx
index 80031b0c2..bdadce1d2 100644
--- a/react/src/webshop/components/elements/block-organization-offices/BlockOrganizationOffices.tsx
+++ b/react/src/webshop/components/elements/block-organization-offices/BlockOrganizationOffices.tsx
@@ -13,7 +13,7 @@ export default function BlockOrganizationOffices({ provider }: { provider: Provi
 
     return (
         <div className="block block-organization-offices">
-            <div className={`organization-pane`}>
+            <div className="organization-pane">
                 <div className="organization-pane-info">
                     <div className="organization-logo">
                         <img
@@ -46,12 +46,12 @@ export default function BlockOrganizationOffices({ provider }: { provider: Provi
                     aria-controls={'organization-offices-list'}
                     onClick={() => setShowOffices(!showOffices)}>
                     <div className="organization-chevron">
-                        <em className={`mdi ${showOffices ? 'mdi-chevron-up' : 'mdi-chevron-right'}`} />
+                        <em className={classNames('mdi', showOffices ? 'mdi-chevron-up' : 'mdi-chevron-right')} />
                     </div>
                     <div className="organization-total-offices">
                         {translate('list_blocks.provider_item_list.show_locations')}
                     </div>
-                    <div className={classNames(`organization-total-offices-count`, showOffices && 'active')}>
+                    <div className={classNames('organization-total-offices-count', showOffices && 'active')}>
                         {provider.offices.length}
                     </div>
                 </button>
diff --git a/react/src/webshop/components/elements/block-panel-group/PaneGroupPanel.tsx b/react/src/webshop/components/elements/block-panel-group/PaneGroupPanel.tsx
index f5d252726..1cf974f65 100644
--- a/react/src/webshop/components/elements/block-panel-group/PaneGroupPanel.tsx
+++ b/react/src/webshop/components/elements/block-panel-group/PaneGroupPanel.tsx
@@ -1,4 +1,5 @@
 import React, { ReactNode, Ref, useId, useState } from 'react';
+import classNames from 'classnames';
 import useTranslate from '../../../../dashboard/hooks/useTranslate';
 
 type PaneGroupIcon =
@@ -50,7 +51,10 @@ export default function PaneGroupPanel({
                 <h2 className="panel-header-title" id={titleId}>
                     {title}
                 </h2>
-                <em className={`mdi ${isOpen ? 'mdi-chevron-down' : 'mdi-chevron-right'}`} aria-hidden="true" />
+                <em
+                    className={classNames('mdi', isOpen ? 'mdi-chevron-down' : 'mdi-chevron-right')}
+                    aria-hidden="true"
+                />
                 <span className="sr-only">
                     {isOpen ? translate('product.labels.collapse_section') : translate('product.labels.expand_section')}
                 </span>
diff --git a/react/src/webshop/components/elements/block-voucher-records/BlockVoucherRecords.tsx b/react/src/webshop/components/elements/block-voucher-records/BlockVoucherRecords.tsx
index f173b6a4f..294a09307 100644
--- a/react/src/webshop/components/elements/block-voucher-records/BlockVoucherRecords.tsx
+++ b/react/src/webshop/components/elements/block-voucher-records/BlockVoucherRecords.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import classNames from 'classnames';
 import Voucher from '../../../../dashboard/props/models/Voucher';
 import useTranslate from '../../../../dashboard/hooks/useTranslate';
 
@@ -17,9 +18,12 @@ export default function BlockVoucherRecords({
 
     return (
         <div
-            className={`block block-voucher-records ${toggle ? 'block-voucher-records-toggle' : ''} ${
-                compact ? 'block-voucher-records-compact' : ''
-            }`}>
+            className={classNames(
+                'block',
+                'block-voucher-records',
+                toggle && 'block-voucher-records-toggle',
+                compact && 'block-voucher-records-compact',
+            )}>
             {toggle && (
                 <div className="records-toggle clickable" onClick={() => setShowRecords(!showRecords)}>
                     {showRecords
diff --git a/react/src/webshop/components/elements/empty-block/EmptyBlock.tsx b/react/src/webshop/components/elements/empty-block/EmptyBlock.tsx
index 1c76339fa..920c0b225 100644
--- a/react/src/webshop/components/elements/empty-block/EmptyBlock.tsx
+++ b/react/src/webshop/components/elements/empty-block/EmptyBlock.tsx
@@ -4,6 +4,7 @@ import IconFundRequest from '../../../../../assets/forus-webshop/resources/_webs
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import ButtonType from '../../../../props/elements/ButtonType';
 import { WebshopRoutes } from '../../../modules/state_router/RouterBuilder';
+import classNames from 'classnames';
 
 export default function EmptyBlock({
     title,
@@ -48,7 +49,22 @@ export default function EmptyBlock({
             {button && (
                 <div className="block-actions">
                     <button
-                        className={`button button-${button.type}`}
+                        className={classNames(
+                            'button',
+                            button.type === 'default' && 'button-default',
+                            button.type === 'primary' && 'button-primary',
+                            button.type === 'primary-outline' && 'button-primary-outline',
+                            button.type === 'primary-light' && 'button-primary-light',
+                            button.type === 'primary-variant' && 'button-primary-variant',
+                            button.type === 'secondary' && 'button-secondary',
+                            button.type === 'danger' && 'button-danger',
+                            button.type === 'text' && 'button-text',
+                            button.type === 'text-primary' && 'button-text-primary',
+                            button.type === 'text-padless' && 'button-text-padless',
+                            button.type === 'dashed' && 'button-dashed',
+                            button.type === 'default-dashed' && 'button-default-dashed',
+                            button.className,
+                        )}
                         onClick={button.onClick}
                         data-dusk="btnEmptyBlock">
                         {button.icon && !button.iconEnd && (
diff --git a/react/src/webshop/components/elements/forms/FormGroup.tsx b/react/src/webshop/components/elements/forms/FormGroup.tsx
index 59fd5f925..81cdbbf77 100644
--- a/react/src/webshop/components/elements/forms/FormGroup.tsx
+++ b/react/src/webshop/components/elements/forms/FormGroup.tsx
@@ -25,7 +25,7 @@ export default function FormGroup({
     return (
         <div className={classNames('form-group', error && 'form-group-error', className)} hidden={hidden}>
             {label && (
-                <label htmlFor={input_id} className={classNames(`form-label`, required && 'form-label-required')}>
+                <label htmlFor={input_id} className={classNames('form-label', required && 'form-label-required')}>
                     {label}
                 </label>
             )}
diff --git a/react/src/webshop/components/elements/input-radio-control/InputRadioControl.tsx b/react/src/webshop/components/elements/input-radio-control/InputRadioControl.tsx
index 54bdb3cbc..1eff4a292 100644
--- a/react/src/webshop/components/elements/input-radio-control/InputRadioControl.tsx
+++ b/react/src/webshop/components/elements/input-radio-control/InputRadioControl.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import classNames from 'classnames';
 import { uniqueId } from 'lodash';
 
 export default function InputRadioControl({
@@ -25,9 +26,7 @@ export default function InputRadioControl({
     return (
         <label
             htmlFor={inputId}
-            className={`radio ${narrow ? 'radio-narrow' : ''} ${compact ? 'radio-compact' : ''} ${
-                fill ? 'radio-fill' : ''
-            }`}>
+            className={classNames('radio', narrow && 'radio-narrow', compact && 'radio-compact', fill && 'radio-fill')}>
             <input
                 id={inputId}
                 name="name"
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 cd8a5d4f4..30a023d82 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
@@ -1,4 +1,5 @@
 import React, { Fragment, useState } from 'react';
+import classNames from 'classnames';
 import useAssetUrl from '../../../../../hooks/useAssetUrl';
 import useTranslate from '../../../../../../dashboard/hooks/useTranslate';
 import StateNavLink from '../../../../../modules/state_router/StateNavLink';
@@ -88,7 +89,11 @@ export default function FundsListItemList({
                                         ? translate('list_blocks.fund_item_list.show_less')
                                         : translate('list_blocks.fund_item_list.show_more')}
                                     <em
-                                        className={`mdi ${showMore ? 'mdi-chevron-up' : 'mdi-chevron-down'} icon-right`}
+                                        className={classNames(
+                                            'mdi',
+                                            showMore ? 'mdi-chevron-up' : 'mdi-chevron-down',
+                                            'icon-right',
+                                        )}
                                     />
                                 </button>
                             )}
diff --git a/react/src/webshop/components/elements/lists/funds-list/templates/FundsListItemPreCheck.tsx b/react/src/webshop/components/elements/lists/funds-list/templates/FundsListItemPreCheck.tsx
index 9c123565f..68503605c 100644
--- a/react/src/webshop/components/elements/lists/funds-list/templates/FundsListItemPreCheck.tsx
+++ b/react/src/webshop/components/elements/lists/funds-list/templates/FundsListItemPreCheck.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useCallback, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import useAssetUrl from '../../../../../hooks/useAssetUrl';
 import { PreCheckCriteria, PreCheckTotalsFund } from '../../../../../services/types/PreCheckTotals';
 import { useNavigateState } from '../../../../../modules/state_router/Router';
@@ -71,10 +72,12 @@ export default function FundsListItemPreCheck({ fund }: { fund?: PreCheckTotalsF
         <div
             data-search-item="1"
             data-dusk={`listFundsPreCheckRow${fund.id}`}
-            className={`fund-item ${fund.parent ? 'fund-item-child' : ''} ${
-                fund.children.length > 0 ? 'fund-item-parent' : ''
-            }`}>
-            <div className={`fund-content ${showMoreRequestInfo ? 'fund-content-expanded' : ''}`}>
+            className={classNames(
+                'fund-item',
+                fund.parent && 'fund-item-child',
+                fund.children.length > 0 && 'fund-item-parent',
+            )}>
+            <div className={classNames('fund-content', showMoreRequestInfo && 'fund-content-expanded')}>
                 <div className="fund-photo">
                     <img
                         src={
@@ -159,15 +162,16 @@ export default function FundsListItemPreCheck({ fund }: { fund?: PreCheckTotalsF
                 )}
             </div>
 
-            <div className={`fund-actions ${showMoreRequestInfo ? 'expanded' : ''}`}>
+            <div className={classNames('fund-actions', showMoreRequestInfo && 'expanded')}>
                 <div className="fund-request-block">
                     <div className="fund-request-block-progress">
                         <div className="fund-request-block-progress-title">{progressStatusTitle}</div>
                         <div className="fund-request-block-progress-bar">
                             <div
-                                className={`fund-request-block-progress-bar-value ${
-                                    criteriaValidPercentage <= 49 ? 'fund-request-block-progress-bar-value-low' : ''
-                                }`}
+                                className={classNames(
+                                    'fund-request-block-progress-bar-value',
+                                    criteriaValidPercentage <= 49 && 'fund-request-block-progress-bar-value-low',
+                                )}
                                 style={{ width: `${criteriaValidPercentage}%` }}
                             />
                         </div>
@@ -242,13 +246,11 @@ export default function FundsListItemPreCheck({ fund }: { fund?: PreCheckTotalsF
                             {fund.criteria?.map((criterion) => (
                                 <div
                                     key={criterion.id}
-                                    className={`fund-pre-check-info-list-item ${
-                                        criterion.is_valid ? 'criteria-valid' : ''
-                                    } ${
-                                        criterion.is_knock_out && !criterion.is_valid
-                                            ? 'criteria-invalid-knock-out'
-                                            : ''
-                                    }`}>
+                                    className={classNames(
+                                        'fund-pre-check-info-list-item',
+                                        criterion.is_valid && 'criteria-valid',
+                                        criterion.is_knock_out && !criterion.is_valid && 'criteria-invalid-knock-out',
+                                    )}>
                                     <div className="fund-pre-check-info-list-item-content">
                                         <div className="fund-pre-check-info-list-item-icon">
                                             {criterion.is_valid ? (
diff --git a/react/src/webshop/components/elements/lists/products-list/templates/ProductsListItemGrid.tsx b/react/src/webshop/components/elements/lists/products-list/templates/ProductsListItemGrid.tsx
index 49759ecc0..d8d70e64c 100644
--- a/react/src/webshop/components/elements/lists/products-list/templates/ProductsListItemGrid.tsx
+++ b/react/src/webshop/components/elements/lists/products-list/templates/ProductsListItemGrid.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import Product from '../../../../../props/models/Product';
 import useAssetUrl from '../../../../../hooks/useAssetUrl';
 import useAuthIdentity from '../../../../../hooks/useAuthIdentity';
@@ -36,7 +37,7 @@ export default function ProductsListItemGrid({
                     onKeyDown={clickOnKeyEnter}
                     role={'button'}
                     tabIndex={0}
-                    className={`block block-bookmark-toggle ${product.bookmarked ? 'active' : ''}`}
+                    className={classNames('block', 'block-bookmark-toggle', product.bookmarked && 'active')}
                     aria-label={translate('list_blocks.product_item.bookmark')}
                     aria-pressed={product.bookmarked}>
                     {product.bookmarked ? (
diff --git a/react/src/webshop/components/elements/lists/products-list/templates/ProductsListItemList.tsx b/react/src/webshop/components/elements/lists/products-list/templates/ProductsListItemList.tsx
index 6c90b7a74..db50b8adf 100644
--- a/react/src/webshop/components/elements/lists/products-list/templates/ProductsListItemList.tsx
+++ b/react/src/webshop/components/elements/lists/products-list/templates/ProductsListItemList.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment } from 'react';
+import classNames from 'classnames';
 import Product from '../../../../../props/models/Product';
 import useAssetUrl from '../../../../../hooks/useAssetUrl';
 import useAuthIdentity from '../../../../../hooks/useAuthIdentity';
@@ -51,7 +52,7 @@ export default function ProductsListItemList({
                     <div className="product-details-bookmark">
                         {authIdentity && (
                             <div
-                                className={`block block-bookmark-toggle ${product.bookmarked ? 'active' : ''}`}
+                                className={classNames('block', 'block-bookmark-toggle', product.bookmarked && 'active')}
                                 onClick={toggleBookmark}
                                 onKeyDown={clickOnKeyEnter}
                                 role={'button'}
diff --git a/react/src/webshop/components/elements/lists/providers-list/templates/ProvidersListItemList.tsx b/react/src/webshop/components/elements/lists/providers-list/templates/ProvidersListItemList.tsx
index 2298c37f5..f936c3b88 100644
--- a/react/src/webshop/components/elements/lists/providers-list/templates/ProvidersListItemList.tsx
+++ b/react/src/webshop/components/elements/lists/providers-list/templates/ProvidersListItemList.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import classNames from 'classnames';
 import useAssetUrl from '../../../../../hooks/useAssetUrl';
 import StateNavLink from '../../../../../modules/state_router/StateNavLink';
 import Provider from '../../../../../props/models/Provider';
@@ -19,7 +20,7 @@ export default function ProvidersListItemList({
 
     return (
         <div className="organization-item" data-dusk={`listProvidersRow${provider.id}`} data-search-item="1">
-            <div className={`organization-pane`}>
+            <div className="organization-pane">
                 <StateNavLink
                     name={WebshopRoutes.PROVIDER}
                     params={{ id: provider.id }}
@@ -54,12 +55,12 @@ export default function ProvidersListItemList({
                     role="button"
                     tabIndex={0}>
                     <div className="organization-chevron">
-                        <em className={`mdi ${showOffices ? 'mdi-chevron-up' : 'mdi-chevron-down'}`} />
+                        <em className={classNames('mdi', showOffices ? 'mdi-chevron-up' : 'mdi-chevron-down')} />
                     </div>
                     <div className="organization-total-offices">
                         {translate('list_blocks.provider_item_list.show_locations')}
                     </div>
-                    <div className={`organization-total-offices-count ${showOffices ? 'active' : ''}`}>
+                    <div className={classNames('organization-total-offices-count', showOffices && 'active')}>
                         {provider.offices.length}
                     </div>
                 </div>
diff --git a/react/src/webshop/components/elements/markdown/Markdown.tsx b/react/src/webshop/components/elements/markdown/Markdown.tsx
index f4e872044..f9b9fabbd 100644
--- a/react/src/webshop/components/elements/markdown/Markdown.tsx
+++ b/react/src/webshop/components/elements/markdown/Markdown.tsx
@@ -108,7 +108,14 @@ export default function Markdown({
             role={role}
             aria-level={ariaLevel}
             style={{ fontSize: fontSize ? `${fontSize}px` : undefined }}
-            className={classNames('block', 'block-markdown', align && `block-markdown-${align}`, className)}
+            className={classNames(
+                'block',
+                'block-markdown',
+                align === 'left' && 'block-markdown-left',
+                align === 'center' && 'block-markdown-center',
+                align === 'right' && 'block-markdown-right',
+                className,
+            )}
             dangerouslySetInnerHTML={{ __html: content }}
         />
     );
diff --git a/react/src/webshop/components/elements/profile-menu/ProfileMenu.tsx b/react/src/webshop/components/elements/profile-menu/ProfileMenu.tsx
index 539cff964..80baea668 100644
--- a/react/src/webshop/components/elements/profile-menu/ProfileMenu.tsx
+++ b/react/src/webshop/components/elements/profile-menu/ProfileMenu.tsx
@@ -7,6 +7,7 @@ import useAppConfigs from '../../../hooks/useAppConfigs';
 import useAuthIdentity2FAState from '../../../hooks/useAuthIdentity2FAState';
 import useAuthIdentity from '../../../hooks/useAuthIdentity';
 import { WebshopRoutes } from '../../../modules/state_router/RouterBuilder';
+import classNames from 'classnames';
 
 export default function ProfileMenu({ className }: { className?: string }) {
     const envData = useEnvData();
@@ -18,7 +19,7 @@ export default function ProfileMenu({ className }: { className?: string }) {
     const navigateState = useNavigateState();
 
     return (
-        <div className={`profile-menu ${className || ''}`}>
+        <div className={classNames('profile-menu', className)}>
             <StateNavLink
                 name={WebshopRoutes.VOUCHERS}
                 className="profile-menu-item"
diff --git a/react/src/webshop/components/elements/select-control/templates/SelectControlOptionsVouchers.tsx b/react/src/webshop/components/elements/select-control/templates/SelectControlOptionsVouchers.tsx
index 82fe75175..85b044cf5 100644
--- a/react/src/webshop/components/elements/select-control/templates/SelectControlOptionsVouchers.tsx
+++ b/react/src/webshop/components/elements/select-control/templates/SelectControlOptionsVouchers.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useMemo, useRef, useState } from 'react';
+import classNames from 'classnames';
 import { uniqueId } from 'lodash';
 import { SelectControlOptionsProp } from '../../../../../dashboard/components/elements/select-control/SelectControl';
 import ClickOutside from '../../../../../dashboard/components/elements/click-outside/ClickOutside';
@@ -46,7 +47,7 @@ export default function SelectControlOptionsVouchers<T>({
     return (
         <div
             id={id}
-            className={'select-control ' + (className ? className : '') + (disabled ? ' select-control-disabled' : '')}
+            className={classNames('select-control', className, disabled && 'select-control-disabled')}
             role="button"
             aria-haspopup="listbox"
             aria-expanded={showOptions}
@@ -56,14 +57,17 @@ export default function SelectControlOptionsVouchers<T>({
             ref={selectorRef}
             onKeyDown={disabled ? undefined : onKeyDown}
             onBlur={disabled ? undefined : onBlur}>
-            <div className={['select-control-input', showOptions ? 'options' : ''].filter((item) => item).join(' ')}>
+            <div className={classNames('select-control-input', showOptions && 'options')}>
                 {/* Placeholder */}
                 <label
                     htmlFor={controlId}
                     role="presentation"
-                    className={`block block-vouchers block-vouchers-select ${
-                        showOptions ? 'block-vouchers-select-open' : ''
-                    }`}
+                    className={classNames(
+                        'block',
+                        'block-vouchers',
+                        'block-vouchers-select',
+                        showOptions && 'block-vouchers-select-open',
+                    )}
                     ref={placeholderRef}
                     data-dusk={dusk || 'voucherSelector'}
                     onClick={disabled ? undefined : searchOption}
diff --git a/react/src/webshop/components/elements/tooltip/Tooltip.tsx b/react/src/webshop/components/elements/tooltip/Tooltip.tsx
index 3742b46fd..8bbc4681f 100644
--- a/react/src/webshop/components/elements/tooltip/Tooltip.tsx
+++ b/react/src/webshop/components/elements/tooltip/Tooltip.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import useTranslate from '../../../../dashboard/hooks/useTranslate';
+import classNames from 'classnames';
 
 export default function Tooltip({ text, className }: { text: string; className?: string }) {
     const translate = useTranslate();
@@ -9,7 +10,7 @@ export default function Tooltip({ text, className }: { text: string; className?:
             <div className="tooltip-icon" aria-label={translate(text)} role="button" tabIndex={0}>
                 <em className="mdi mdi-information-variant-circle" />
             </div>
-            <div className={`tooltip ${className}`}>{translate(text)}</div>
+            <div className={classNames('tooltip', className)}>{translate(text)}</div>
         </div>
     );
 }
diff --git a/react/src/webshop/components/elements/top-navbar/TopNavbarSearch.tsx b/react/src/webshop/components/elements/top-navbar/TopNavbarSearch.tsx
index 51816b4ca..a08273a5e 100644
--- a/react/src/webshop/components/elements/top-navbar/TopNavbarSearch.tsx
+++ b/react/src/webshop/components/elements/top-navbar/TopNavbarSearch.tsx
@@ -163,7 +163,7 @@ export default function TopNavbarSearch({ autoFocus = false }: { autoFocus?: boo
     }, [currentState?.state?.name, clearSearch]);
 
     return (
-        <div className={classNames(`block block-navbar-search`, dropdown && 'block-navbar-search-results')}>
+        <div className={classNames('block', 'block-navbar-search', dropdown && 'block-navbar-search-results')}>
             <form
                 onSubmit={(e) => {
                     e?.preventDefault();
@@ -177,7 +177,7 @@ export default function TopNavbarSearch({ autoFocus = false }: { autoFocus?: boo
                     navigateState(WebshopRoutes.SEARCH, {}, { q: filterValues.q });
                     document.querySelector<HTMLInputElement>('#main_search')?.focus();
                 }}
-                className={`search-form form ${resultsAll?.length > 0 ? 'search-form-found' : ''}`}>
+                className={classNames('search-form', 'form', resultsAll?.length > 0 && 'search-form-found')}>
                 <ClickOutside onClickOutside={hideSearchBox}>
                     <div
                         className="search-area"
diff --git a/react/src/webshop/components/elements/top-navbar/desktop/TopNavbarDesktopMenuUser.tsx b/react/src/webshop/components/elements/top-navbar/desktop/TopNavbarDesktopMenuUser.tsx
index 4836ca350..724fd5219 100644
--- a/react/src/webshop/components/elements/top-navbar/desktop/TopNavbarDesktopMenuUser.tsx
+++ b/react/src/webshop/components/elements/top-navbar/desktop/TopNavbarDesktopMenuUser.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useContext, useRef } from 'react';
+import classNames from 'classnames';
 import useTranslate from '../../../../../dashboard/hooks/useTranslate';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import { clickOnKeyEnter } from '../../../../../dashboard/helpers/wcag';
@@ -77,7 +78,7 @@ export const TopNavbarDesktopMenuUser = () => {
                 </div>
 
                 <div className="navbar-desktop-user-caret">
-                    <em className={`mdi ${userMenuOpened ? 'mdi-chevron-up' : 'mdi-chevron-down'}`} />
+                    <em className={classNames('mdi', userMenuOpened ? 'mdi-chevron-up' : 'mdi-chevron-down')} />
                 </div>
 
                 {userMenuOpened && (
diff --git a/react/src/webshop/components/modals/Modal2FADeactivate.tsx b/react/src/webshop/components/modals/Modal2FADeactivate.tsx
index acdd6ad64..d9a76c04c 100644
--- a/react/src/webshop/components/modals/Modal2FADeactivate.tsx
+++ b/react/src/webshop/components/modals/Modal2FADeactivate.tsx
@@ -145,7 +145,7 @@ export default function Modal2FADeactivate({
                 'modal',
                 'modal-animated',
                 'modal-2fa-setup',
-                modal.loading ? '' : 'modal-loaded',
+                !modal.loading && 'modal-loaded',
                 className,
             )}>
             <div className="modal-backdrop" onClick={cancel} />
@@ -204,7 +204,12 @@ export default function Modal2FADeactivate({
                                             onClick={() => resendCode()}
                                             disabled={timer?.time > 0}>
                                             <div
-                                                className={`mdi mdi-refresh icon-start ${sendingCode ? 'mdi-spin' : ''}`}
+                                                className={classNames(
+                                                    'mdi',
+                                                    'mdi-refresh',
+                                                    'icon-start',
+                                                    sendingCode && 'mdi-spin',
+                                                )}
                                             />
                                             {translate('modal_2fa_deactivate.resend_code')}
                                             {timer?.time > 0 && (
diff --git a/react/src/webshop/components/modals/Modal2FASetup.tsx b/react/src/webshop/components/modals/Modal2FASetup.tsx
index a1b3284fc..49df6af7b 100644
--- a/react/src/webshop/components/modals/Modal2FASetup.tsx
+++ b/react/src/webshop/components/modals/Modal2FASetup.tsx
@@ -306,7 +306,7 @@ export default function Modal2FASetup({
                 'modal',
                 'modal-animated',
                 'modal-2fa-setup',
-                modal.loading ? '' : 'modal-loaded',
+                !modal.loading && 'modal-loaded',
                 className,
             )}>
             <div className="modal-backdrop" onClick={cancel} />
@@ -545,7 +545,12 @@ export default function Modal2FASetup({
                                         onClick={() => resendCode()}
                                         disabled={timer?.time > 0}>
                                         <div
-                                            className={`mdi mdi-refresh icon-start ${sendingCode ? 'mdi-spin' : ''}`}
+                                            className={classNames(
+                                                'mdi',
+                                                'mdi-refresh',
+                                                'icon-start',
+                                                sendingCode && 'mdi-spin',
+                                            )}
                                         />
                                         {translate('modal_2fa_setup.resend_code')}
                                         {timer?.time > 0 && (
@@ -646,7 +651,12 @@ export default function Modal2FASetup({
                                         onClick={() => resendCode()}
                                         disabled={timer?.time > 0}>
                                         <div
-                                            className={`mdi mdi-refresh icon-start ${sendingCode ? 'mdi-spin' : ''}`}
+                                            className={classNames(
+                                                'mdi',
+                                                'mdi-refresh',
+                                                'icon-start',
+                                                sendingCode && 'mdi-spin',
+                                            )}
                                         />
                                         {translate('modal_2fa_setup.resend_code')}
                                         {timer?.time > 0 && (
diff --git a/react/src/webshop/components/modals/ModalAuthPincode.tsx b/react/src/webshop/components/modals/ModalAuthPincode.tsx
index f3a856ffb..e2c3e451c 100644
--- a/react/src/webshop/components/modals/ModalAuthPincode.tsx
+++ b/react/src/webshop/components/modals/ModalAuthPincode.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../../dashboard/modules/modals/context/ModalContext';
 import useTranslate from '../../../dashboard/hooks/useTranslate';
 import useAppConfigs from '../../hooks/useAppConfigs';
@@ -64,7 +65,9 @@ export default function ModalAuthPincode({ modal }: { modal: ModalState }) {
     );
 
     return (
-        <div className={`modal modal-pin-code modal-animated  ${modal.loading ? '' : 'modal-loaded'}`} role="dialog">
+        <div
+            className={classNames('modal', 'modal-pin-code', 'modal-animated', !modal.loading && 'modal-loaded')}
+            role="dialog">
             <div
                 className="modal-backdrop"
                 onClick={modal.close}
diff --git a/react/src/webshop/components/modals/ModalDeactivateVoucher.tsx b/react/src/webshop/components/modals/ModalDeactivateVoucher.tsx
index 5f009d5cd..4771b6d08 100644
--- a/react/src/webshop/components/modals/ModalDeactivateVoucher.tsx
+++ b/react/src/webshop/components/modals/ModalDeactivateVoucher.tsx
@@ -1,4 +1,5 @@
 import React, { useMemo, useState } from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../../dashboard/modules/modals/context/ModalContext';
 import useFormBuilder from '../../../dashboard/hooks/useFormBuilder';
 import FormError from '../../../dashboard/components/elements/forms/errors/FormError';
@@ -52,7 +53,7 @@ export default function ModalDeactivateVoucher({
     });
 
     return (
-        <div className={`modal modal-animated  ${modal.loading ? '' : 'modal-loaded'}`} role="dialog">
+        <div className={classNames('modal', 'modal-animated', !modal.loading && 'modal-loaded')} role="dialog">
             <div
                 className="modal-backdrop"
                 onClick={modal.close}
diff --git a/react/src/webshop/components/modals/ModalFundHelp.tsx b/react/src/webshop/components/modals/ModalFundHelp.tsx
index 661a548b8..921e890f7 100644
--- a/react/src/webshop/components/modals/ModalFundHelp.tsx
+++ b/react/src/webshop/components/modals/ModalFundHelp.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../../dashboard/modules/modals/context/ModalContext';
 import { clickOnKeyEnter } from '../../../dashboard/helpers/wcag';
 import Fund from '../../props/models/Fund';
@@ -14,7 +15,7 @@ export default function ModalFundHelp({ modal, fund }: { modal: ModalState; fund
     const translate = useTranslate();
 
     return (
-        <div className={`modal modal-fund-help modal-animated ${modal.loading ? '' : 'modal-loaded'}`}>
+        <div className={classNames('modal', 'modal-fund-help', 'modal-animated', !modal.loading && 'modal-loaded')}>
             <div className="modal-backdrop" onClick={modal.close} aria-label={translate('modal_fund_help.close')} />
             <div className="modal-window">
                 <div
diff --git a/react/src/webshop/components/modals/ModalFundRequestClarificationResponse.tsx b/react/src/webshop/components/modals/ModalFundRequestClarificationResponse.tsx
index bffc09f75..4af69d6dc 100644
--- a/react/src/webshop/components/modals/ModalFundRequestClarificationResponse.tsx
+++ b/react/src/webshop/components/modals/ModalFundRequestClarificationResponse.tsx
@@ -27,7 +27,7 @@ export default function ModalFundRequestClarificationResponse({
     const [shownClarificationForms, setShownClarificationForms] = useState(clarification?.id ? [clarification.id] : []);
 
     return (
-        <div className={classNames(`modal modal-animated`, !modal.loading && 'modal-loaded')} role="dialog">
+        <div className={classNames('modal', 'modal-animated', !modal.loading && 'modal-loaded')} role="dialog">
             <div
                 className="modal-backdrop"
                 onClick={modal.close}
diff --git a/react/src/webshop/components/modals/ModalIdentityProxyExpired.tsx b/react/src/webshop/components/modals/ModalIdentityProxyExpired.tsx
index 5f2d07ea4..53326fc8a 100644
--- a/react/src/webshop/components/modals/ModalIdentityProxyExpired.tsx
+++ b/react/src/webshop/components/modals/ModalIdentityProxyExpired.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../../dashboard/modules/modals/context/ModalContext';
 import useTranslate from '../../../dashboard/hooks/useTranslate';
 import { useNavigateState } from '../../modules/state_router/Router';
@@ -21,7 +22,12 @@ export default function ModalIdentityProxyExpired({ modal }: { modal: ModalState
 
     return (
         <div
-            className={`modal modal-identity-proxy-expired modal-animated  ${modal.loading ? '' : 'modal-loaded'}`}
+            className={classNames(
+                'modal',
+                'modal-identity-proxy-expired',
+                'modal-animated',
+                !modal.loading && 'modal-loaded',
+            )}
             role="dialog">
             <div
                 className="modal-backdrop"
diff --git a/react/src/webshop/components/modals/ModalImagePreview.tsx b/react/src/webshop/components/modals/ModalImagePreview.tsx
index df303983a..719d4cf99 100644
--- a/react/src/webshop/components/modals/ModalImagePreview.tsx
+++ b/react/src/webshop/components/modals/ModalImagePreview.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../../dashboard/modules/modals/context/ModalContext';
 import useTranslate from '../../../dashboard/hooks/useTranslate';
 import { clickOnKeyEnter } from '../../../dashboard/helpers/wcag';
@@ -7,7 +8,7 @@ export default function ModalImagePreview({ modal, imageSrc }: { modal: ModalSta
     const translate = useTranslate();
 
     return (
-        <div className={`modal modal-animated modal-file-preview ${modal.loading ? '' : 'modal-loaded'}`}>
+        <div className={classNames('modal', 'modal-animated', 'modal-file-preview', !modal.loading && 'modal-loaded')}>
             <div
                 className="modal-backdrop"
                 onClick={modal.close}
diff --git a/react/src/webshop/components/modals/ModalNotification.tsx b/react/src/webshop/components/modals/ModalNotification.tsx
index 7e8bb1128..754ed54cf 100644
--- a/react/src/webshop/components/modals/ModalNotification.tsx
+++ b/react/src/webshop/components/modals/ModalNotification.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useRef, useState, ReactElement } from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../../dashboard/modules/modals/context/ModalContext';
 import useTranslate from '../../../dashboard/hooks/useTranslate';
 import { clickOnKeyEnter } from '../../../dashboard/helpers/wcag';
@@ -78,7 +79,13 @@ export default function ModalNotification({
 
     return (
         <div
-            className={`modal modal-notification modal-animated ${className} ${modal.loading ? '' : 'modal-loaded'}`}
+            className={classNames(
+                'modal',
+                'modal-notification',
+                'modal-animated',
+                className,
+                !modal.loading && 'modal-loaded',
+            )}
             role="dialog">
             <div
                 className="modal-backdrop"
@@ -104,7 +111,14 @@ export default function ModalNotification({
                 <div className="modal-body">
                     <div className="modal-section">
                         {mdiIconClass && (
-                            <div className={`modal-section-icon modal-section-icon-${mdiIconType}`}>
+                            <div
+                                className={classNames(
+                                    'modal-section-icon',
+                                    mdiIconType === 'primary' && 'modal-section-icon-primary',
+                                    mdiIconType === 'warning' && 'modal-section-icon-warning',
+                                    mdiIconType === 'success' && 'modal-section-icon-success',
+                                    mdiIconType === 'default' && 'modal-section-icon-default',
+                                )}>
                                 {mdiIconType && mdiIconClass && <div className={`mdi mdi-${mdiIconClass}`} />}
                             </div>
                         )}
diff --git a/react/src/webshop/components/modals/ModalOpenInMe.tsx b/react/src/webshop/components/modals/ModalOpenInMe.tsx
index 87123993b..b99e031a6 100644
--- a/react/src/webshop/components/modals/ModalOpenInMe.tsx
+++ b/react/src/webshop/components/modals/ModalOpenInMe.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../../dashboard/modules/modals/context/ModalContext';
 import useTranslate from '../../../dashboard/hooks/useTranslate';
 import useAppConfigs from '../../hooks/useAppConfigs';
@@ -63,7 +64,9 @@ export default function ModalOpenInMe({ modal }: { modal: ModalState }) {
     );
 
     return (
-        <div className={`modal modal-open-in-me modal-animated  ${modal.loading ? '' : 'modal-loaded'}`} role="dialog">
+        <div
+            className={classNames('modal', 'modal-open-in-me', 'modal-animated', !modal.loading && 'modal-loaded')}
+            role="dialog">
             <div
                 className="modal-backdrop"
                 onClick={modal.close}
diff --git a/react/src/webshop/components/modals/ModalPdfPreview.tsx b/react/src/webshop/components/modals/ModalPdfPreview.tsx
index 8c077c52a..42c76dadb 100644
--- a/react/src/webshop/components/modals/ModalPdfPreview.tsx
+++ b/react/src/webshop/components/modals/ModalPdfPreview.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../../dashboard/modules/modals/context/ModalContext';
 import PdfPreview from '../../../dashboard/components/elements/pdf-preview/PdfPreview';
 import { clickOnKeyEnter } from '../../../dashboard/helpers/wcag';
@@ -16,7 +17,14 @@ export default function ModalPdfPreview({
     const translate = useTranslate();
 
     return (
-        <div className={`modal modal-animated modal-file-preview ${className} ${modal.loading ? '' : 'modal-loaded'}`}>
+        <div
+            className={classNames(
+                'modal',
+                'modal-animated',
+                'modal-file-preview',
+                className,
+                !modal.loading && 'modal-loaded',
+            )}>
             <div className="modal-backdrop" onClick={modal.close} aria-label={translate('pdf_preview.buttons.close')} />
 
             <div className="modal-window">
diff --git a/react/src/webshop/components/modals/ModalPhysicalCardType.tsx b/react/src/webshop/components/modals/ModalPhysicalCardType.tsx
index cec3850a1..46fbda59d 100644
--- a/react/src/webshop/components/modals/ModalPhysicalCardType.tsx
+++ b/react/src/webshop/components/modals/ModalPhysicalCardType.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useState } from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../../dashboard/modules/modals/context/ModalContext';
 import useTranslate from '../../../dashboard/hooks/useTranslate';
 import Voucher from '../../../dashboard/props/models/Voucher';
@@ -176,7 +177,8 @@ export default function ModalPhysicalCardType({
     }, [requestPhysicalCardForm]);
 
     return (
-        <div className={`modal modal-animated modal-physical-cards ${modal.loading ? '' : 'modal-loaded'}`}>
+        <div
+            className={classNames('modal', 'modal-animated', 'modal-physical-cards', !modal.loading && 'modal-loaded')}>
             <div className="modal-backdrop" onClick={modal.close} />
 
             {state == 'card_code' && (
diff --git a/react/src/webshop/components/modals/ModalPhysicalCardUnlink.tsx b/react/src/webshop/components/modals/ModalPhysicalCardUnlink.tsx
index 310ed8a70..6496ec205 100644
--- a/react/src/webshop/components/modals/ModalPhysicalCardUnlink.tsx
+++ b/react/src/webshop/components/modals/ModalPhysicalCardUnlink.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useState } from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../../dashboard/modules/modals/context/ModalContext';
 import useTranslate from '../../../dashboard/hooks/useTranslate';
 import Voucher from '../../../dashboard/props/models/Voucher';
@@ -48,7 +49,8 @@ export default function ModalPhysicalCardUnlink({
     }, [modal, onClose]);
 
     return (
-        <div className={`modal modal-animated modal-physical-cards ${modal.loading ? '' : 'modal-loaded'}`}>
+        <div
+            className={classNames('modal', 'modal-animated', 'modal-physical-cards', !modal.loading && 'modal-loaded')}>
             <div
                 className="modal-backdrop"
                 onClick={modal.close}
diff --git a/react/src/webshop/components/modals/ModalProductReserveCancel.tsx b/react/src/webshop/components/modals/ModalProductReserveCancel.tsx
index 2bd158c31..87ab35856 100644
--- a/react/src/webshop/components/modals/ModalProductReserveCancel.tsx
+++ b/react/src/webshop/components/modals/ModalProductReserveCancel.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment } from 'react';
+import classNames from 'classnames';
 import useAppConfigs from '../../hooks/useAppConfigs';
 import Reservation from '../../../dashboard/props/models/Reservation';
 import { ModalState } from '../../../dashboard/modules/modals/context/ModalContext';
@@ -21,7 +22,7 @@ export default function ModalProductReserveCancel({
 
     return (
         <div
-            className={`modal modal-product-reserve modal-animated ${modal.loading ? '' : 'modal-loaded'}`}
+            className={classNames('modal', 'modal-product-reserve', 'modal-animated', !modal.loading && 'modal-loaded')}
             data-dusk="modalProductReserveCancel">
             <div
                 className="modal-backdrop"
diff --git a/react/src/webshop/components/modals/ModalReimbursementConfirm.tsx b/react/src/webshop/components/modals/ModalReimbursementConfirm.tsx
index 01eba724b..db48d1e7c 100644
--- a/react/src/webshop/components/modals/ModalReimbursementConfirm.tsx
+++ b/react/src/webshop/components/modals/ModalReimbursementConfirm.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../../dashboard/modules/modals/context/ModalContext';
 import Reimbursement from '../../props/models/Reimbursement';
 import ReimbursementDetailsCard from '../pages/reimbursements/elements/ReimbursementDetailsCard';
@@ -23,7 +24,12 @@ export default function ModalReimbursementConfirm({
 
     return (
         <div
-            className={`modal modal-reimbursement-confirm modal-animated ${modal.loading ? '' : 'modal-loaded'}`}
+            className={classNames(
+                'modal',
+                'modal-reimbursement-confirm',
+                'modal-animated',
+                !modal.loading && 'modal-loaded',
+            )}
             data-dusk="modalReimbursementConfirmation"
             aria-describedby="pinCodeDialogSubtitle"
             aria-labelledby="pinCodeDialogTitle"
diff --git a/react/src/webshop/components/modals/ModalShareVoucher.tsx b/react/src/webshop/components/modals/ModalShareVoucher.tsx
index 9aa6df2f9..3d26556e2 100644
--- a/react/src/webshop/components/modals/ModalShareVoucher.tsx
+++ b/react/src/webshop/components/modals/ModalShareVoucher.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../../dashboard/modules/modals/context/ModalContext';
 import useTranslate from '../../../dashboard/hooks/useTranslate';
 import useFormBuilder from '../../../dashboard/hooks/useFormBuilder';
@@ -48,7 +49,7 @@ export default function ModalShareVoucher({ modal, voucher }: { modal: ModalStat
     );
 
     return (
-        <div className={`modal modal-animated  ${modal.loading ? '' : 'modal-loaded'}`} role="dialog">
+        <div className={classNames('modal', 'modal-animated', !modal.loading && 'modal-loaded')} role="dialog">
             <div
                 className="modal-backdrop"
                 onClick={modal.close}
diff --git a/react/src/webshop/components/modals/ModalVoucherPayout.tsx b/react/src/webshop/components/modals/ModalVoucherPayout.tsx
index de60ea2c5..9a3e39402 100644
--- a/react/src/webshop/components/modals/ModalVoucherPayout.tsx
+++ b/react/src/webshop/components/modals/ModalVoucherPayout.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../../dashboard/modules/modals/context/ModalContext';
 import useTranslate from '../../../dashboard/hooks/useTranslate';
 import useFormBuilder from '../../../dashboard/hooks/useFormBuilder';
@@ -196,7 +197,7 @@ export default function ModalVoucherPayout({
     ]);
 
     return (
-        <div className={`modal modal-animated  ${modal.loading ? '' : 'modal-loaded'}`} role="dialog">
+        <div className={classNames('modal', 'modal-animated', !modal.loading && 'modal-loaded')} role="dialog">
             <div className="modal-backdrop" onClick={modal.close} aria-label="Close modal" role="button" />
 
             {state === 'form' && (
diff --git a/react/src/webshop/components/modals/modal-photo-cropper/ModalPhotoCropper.tsx b/react/src/webshop/components/modals/modal-photo-cropper/ModalPhotoCropper.tsx
index f4b2c9326..07bf17182 100644
--- a/react/src/webshop/components/modals/modal-photo-cropper/ModalPhotoCropper.tsx
+++ b/react/src/webshop/components/modals/modal-photo-cropper/ModalPhotoCropper.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import classNames from 'classnames';
 import { ModalState } from '../../../../dashboard/modules/modals/context/ModalContext';
 import usePushDanger from '../../../../dashboard/hooks/usePushDanger';
 import { cover } from '../../../../dashboard/components/elements/image_cropper/helpers/image';
@@ -292,7 +293,7 @@ export default function ModalPhotoCropper({
 
     return (
         <div
-            className={`modal modal-animated modal-photo-cropper ${modal.loading ? '' : 'modal-loaded'}`}
+            className={classNames('modal', 'modal-animated', 'modal-photo-cropper', !modal.loading && 'modal-loaded')}
             data-dusk={'modalPhotoCropper'}>
             <div className="modal-backdrop" onClick={modal.close} />
             <div className="modal-window">
@@ -320,9 +321,10 @@ export default function ModalPhotoCropper({
                                 {cropperFiles?.map((file, index) => (
                                     <div
                                         key={file.uid}
-                                        className={`cropper-preview-container ${
-                                            index !== fileIndex ? 'cropper-preview-container-inactive' : ''
-                                        }`}>
+                                        className={classNames(
+                                            'cropper-preview-container',
+                                            index !== fileIndex && 'cropper-preview-container-inactive',
+                                        )}>
                                         {file.is_image && file.file && (
                                             <ModalPhotoCropperControl file={file} onCropperChange={onCropperChange} />
                                         )}
@@ -360,7 +362,10 @@ export default function ModalPhotoCropper({
                                             role="button"
                                             tabIndex={0}
                                             onKeyDown={clickOnKeyEnter}
-                                            className={`cropper-pagination-item ${index === fileIndex ? 'active' : ''}`}
+                                            className={classNames(
+                                                'cropper-pagination-item',
+                                                index === fileIndex && 'active',
+                                            )}
                                             onClick={() => setFileIndex(index)}
                                             aria-label={translate('modal_photo_cropper.number', { number: index + 1 })}
                                         />
diff --git a/react/src/webshop/components/modals/modal-product-reserve/ModalProductReserve.tsx b/react/src/webshop/components/modals/modal-product-reserve/ModalProductReserve.tsx
index 45a45da92..7f40eaa5c 100644
--- a/react/src/webshop/components/modals/modal-product-reserve/ModalProductReserve.tsx
+++ b/react/src/webshop/components/modals/modal-product-reserve/ModalProductReserve.tsx
@@ -553,9 +553,12 @@ export default function ModalProductReserve({
 
                         <div className="modal-section">
                             <div
-                                className={`block block-vouchers block-vouchers-padding ${
-                                    vouchersList.length === 1 ? 'block-vouchers-compact' : ''
-                                }`}>
+                                className={classNames(
+                                    'block',
+                                    'block-vouchers',
+                                    'block-vouchers-padding',
+                                    vouchersList.length === 1 && 'block-vouchers-compact',
+                                )}>
                                 {vouchersList?.map((voucher) => (
                                     <div
                                         key={voucher.id}
@@ -821,9 +824,10 @@ export default function ModalProductReserve({
                                                         active: field.showInfo,
                                                     })}>
                                                     <div
-                                                        className={`form-group-info-control ${
-                                                            field.description ? 'has-info-btn' : ''
-                                                        }`}>
+                                                        className={classNames(
+                                                            'form-group-info-control',
+                                                            field.description && 'has-info-btn',
+                                                        )}>
                                                         {field.type === 'text' && (
                                                             <input
                                                                 className="form-control"
@@ -1194,9 +1198,10 @@ export default function ModalProductReserve({
                                                     </div>
                                                     <div
                                                         data-dusk={`overviewValueCustomField${field.key}`}
-                                                        className={`overview-item-value ${
-                                                            !form.values[fieldKey] ? 'overview-item-value-empty' : ''
-                                                        }`}>
+                                                        className={classNames(
+                                                            'overview-item-value',
+                                                            !form.values[fieldKey] && 'overview-item-value-empty',
+                                                        )}>
                                                         {field.type === 'date'
                                                             ? dateFormat(
                                                                   dateParse(form.values[fieldKey]),
@@ -1210,9 +1215,10 @@ export default function ModalProductReserve({
                                                     <div className="overview-item-label">{field.label}</div>
                                                     <div
                                                         data-dusk={`overviewValueCustomField${field.key}`}
-                                                        className={`overview-item-value ${
-                                                            !customFieldValue ? 'overview-item-value-empty' : ''
-                                                        }`}>
+                                                        className={classNames(
+                                                            'overview-item-value',
+                                                            !customFieldValue && 'overview-item-value-empty',
+                                                        )}>
                                                         {field.type === 'file' && customFieldFile ? (
                                                             <FileUploader
                                                                 type="product_reservation_custom_field"
diff --git a/react/src/webshop/components/pages/auth/Start.tsx b/react/src/webshop/components/pages/auth/Start.tsx
index f935aa4fe..25ef273e7 100644
--- a/react/src/webshop/components/pages/auth/Start.tsx
+++ b/react/src/webshop/components/pages/auth/Start.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import { authContext } from '../../../contexts/AuthContext';
 import { useNavigateState, useStateHref, useStateParams } from '../../../modules/state_router/Router';
 import { useAuthService } from '../../../services/AuthService';
@@ -442,9 +443,10 @@ export default function Start() {
                         {state === 'start' && (
                             <div className="block block-sign_up">
                                 <div
-                                    className={`block-wrapper ${
-                                        !envData.config.flags?.startPage?.combineColumns ? 'block-wrapper-lg' : ''
-                                    }`}>
+                                    className={classNames(
+                                        'block-wrapper',
+                                        !envData.config.flags?.startPage?.combineColumns && 'block-wrapper-lg',
+                                    )}>
                                     <h1 className="block-title">
                                         {translate(
                                             `signup.items.${envData.client_key}.title`,
@@ -458,7 +460,11 @@ export default function Start() {
                                             {envData.config?.flags?.startPage?.combineColumns ? (
                                                 <div className="sign_up-row">
                                                     <div className="sign_up-col">
-                                                        <div className={`sign_up-options ${loading ? 'disabled' : ''}`}>
+                                                        <div
+                                                            className={classNames(
+                                                                'sign_up-options',
+                                                                loading && 'disabled',
+                                                            )}>
                                                             {inlineEmailForm(false)}
 
                                                             {!envData.config.flags.startPage.hideSignUpQrCodeOption &&
@@ -476,7 +482,11 @@ export default function Start() {
                                                                 {translate('auth.sign_in_up_title')}
                                                             </div>
                                                         </h2>
-                                                        <div className={`sign_up-options ${loading ? 'disabled' : ''}`}>
+                                                        <div
+                                                            className={classNames(
+                                                                'sign_up-options',
+                                                                loading && 'disabled',
+                                                            )}>
                                                             {appConfigs.digid &&
                                                                 !envData.config?.flags?.startPage
                                                                     ?.hideSignUpDigidOption &&
@@ -496,7 +506,11 @@ export default function Start() {
                                                                 )}
                                                             </div>
                                                         </h2>
-                                                        <div className={`sign_up-options ${loading ? 'disabled' : ''}`}>
+                                                        <div
+                                                            className={classNames(
+                                                                'sign_up-options',
+                                                                loading && 'disabled',
+                                                            )}>
                                                             {appConfigs.digid &&
                                                                 envData.config?.flags?.startPage
                                                                     ?.hideSignInDigidOption &&
diff --git a/react/src/webshop/components/pages/bookmarked-products/BookmarkedProducts.tsx b/react/src/webshop/components/pages/bookmarked-products/BookmarkedProducts.tsx
index 2c77a1f30..017d400c1 100644
--- a/react/src/webshop/components/pages/bookmarked-products/BookmarkedProducts.tsx
+++ b/react/src/webshop/components/pages/bookmarked-products/BookmarkedProducts.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import EmptyBlock from '../../elements/empty-block/EmptyBlock';
 import Paginator from '../../../../dashboard/modules/paginator/components/Paginator';
 import BlockShowcaseProfile from '../../elements/block-showcase/BlockShowcaseProfile';
@@ -92,9 +93,11 @@ export default function BookmarkedProducts() {
                             </div>*/}
                             <div className="label-tab-set">
                                 <div
-                                    className={`label-tab label-tab-sm ${
-                                        filterValues.display_type == 'grid' ? 'active' : ''
-                                    }`}
+                                    className={classNames(
+                                        'label-tab',
+                                        'label-tab-sm',
+                                        filterValues.display_type == 'grid' && 'active',
+                                    )}
                                     onClick={() => filterUpdate({ display_type: 'grid' })}
                                     aria-pressed={filterValues.display_type == 'grid'}
                                     role="button">
@@ -102,9 +105,11 @@ export default function BookmarkedProducts() {
                                     {translate('bookmarked_products.view_grid')}
                                 </div>
                                 <div
-                                    className={`label-tab label-tab-sm ${
-                                        filterValues.display_type == 'list' ? 'active' : ''
-                                    }`}
+                                    className={classNames(
+                                        'label-tab',
+                                        'label-tab-sm',
+                                        filterValues.display_type == 'list' && 'active',
+                                    )}
                                     onClick={() => filterUpdate({ display_type: 'list' })}
                                     aria-pressed={filterValues.display_type == 'list'}
                                     role="button">
diff --git a/react/src/webshop/components/pages/cms-pages/Accessibility.tsx b/react/src/webshop/components/pages/cms-pages/Accessibility.tsx
index e2e2c54c2..e26432be6 100644
--- a/react/src/webshop/components/pages/cms-pages/Accessibility.tsx
+++ b/react/src/webshop/components/pages/cms-pages/Accessibility.tsx
@@ -6,6 +6,7 @@ import BlockShowcase from '../../elements/block-showcase/BlockShowcase';
 import useTranslate from '../../../../dashboard/hooks/useTranslate';
 import TranslateHtml from '../../../../dashboard/components/elements/translate-html/TranslateHtml';
 import { WebshopRoutes } from '../../../modules/state_router/RouterBuilder';
+import classNames from 'classnames';
 
 export default function Accessibility() {
     const envData = useEnvData();
@@ -33,9 +34,11 @@ export default function Accessibility() {
             {page && (
                 <div className="section">
                     <div
-                        className={`flex flex-vertical ${
-                            page.description_position == 'after' ? 'flex-vertical-reverse' : ''
-                        }`}>
+                        className={classNames(
+                            'flex',
+                            'flex-vertical',
+                            page.description_position == 'after' && 'flex-vertical-reverse',
+                        )}>
                         {page && <CmsBlocks page={page} largeMarkdown={true} />}
 
                         {(!page.description_html || page.description_position !== 'replace') && (
diff --git a/react/src/webshop/components/pages/cms-pages/Privacy.tsx b/react/src/webshop/components/pages/cms-pages/Privacy.tsx
index 45dde27ee..4d83623ce 100644
--- a/react/src/webshop/components/pages/cms-pages/Privacy.tsx
+++ b/react/src/webshop/components/pages/cms-pages/Privacy.tsx
@@ -6,6 +6,7 @@ import useTranslate from '../../../../dashboard/hooks/useTranslate';
 import TranslateHtml from '../../../../dashboard/components/elements/translate-html/TranslateHtml';
 import BlockShowcase from '../../elements/block-showcase/BlockShowcase';
 import { WebshopRoutes } from '../../../modules/state_router/RouterBuilder';
+import classNames from 'classnames';
 
 export default function Privacy() {
     const envData = useEnvData();
@@ -22,9 +23,11 @@ export default function Privacy() {
             {page && (
                 <div className="section">
                     <div
-                        className={`flex flex-vertical ${
-                            page.description_position == 'after' ? 'flex-vertical-reverse' : ''
-                        }`}>
+                        className={classNames(
+                            'flex',
+                            'flex-vertical',
+                            page.description_position == 'after' && 'flex-vertical-reverse',
+                        )}>
                         {page && <CmsBlocks page={page} largeMarkdown={true} />}
 
                         {(!page.description_html || page.description_position !== 'replace') && (
diff --git a/react/src/webshop/components/pages/cms-pages/ProvidersSignUp.tsx b/react/src/webshop/components/pages/cms-pages/ProvidersSignUp.tsx
index 25eb2dbcc..7bd1f207c 100644
--- a/react/src/webshop/components/pages/cms-pages/ProvidersSignUp.tsx
+++ b/react/src/webshop/components/pages/cms-pages/ProvidersSignUp.tsx
@@ -7,6 +7,7 @@ import BlockShowcase from '../../elements/block-showcase/BlockShowcase';
 import CmsBlocks from '../../elements/cms-blocks/CmsBlocks';
 import useTranslate from '../../../../dashboard/hooks/useTranslate';
 import { WebshopRoutes } from '../../../modules/state_router/RouterBuilder';
+import classNames from 'classnames';
 
 export default function ProvidersSignUp() {
     const page = useCmsPage('provider');
@@ -42,9 +43,11 @@ export default function ProvidersSignUp() {
             ]}>
             {page && (
                 <div
-                    className={`flex flex-vertical ${
-                        page.description_position == 'after' ? 'flex-vertical-reverse' : ''
-                    }`}>
+                    className={classNames(
+                        'flex',
+                        'flex-vertical',
+                        page.description_position == 'after' && 'flex-vertical-reverse',
+                    )}>
                     {page && <CmsBlocks page={page} largeMarkdown={true} />}
 
                     {(!page.description_html || page.description_position !== 'replace') && (
diff --git a/react/src/webshop/components/pages/fund-requests-show/FundRequestsShow.tsx b/react/src/webshop/components/pages/fund-requests-show/FundRequestsShow.tsx
index 294fdb271..9a764dbbc 100644
--- a/react/src/webshop/components/pages/fund-requests-show/FundRequestsShow.tsx
+++ b/react/src/webshop/components/pages/fund-requests-show/FundRequestsShow.tsx
@@ -169,7 +169,7 @@ export default function FundRequestsShow() {
                     </div>
 
                     {(fundRequest.payouts?.length > 0 || fundRequest.vouchers?.length > 0) && (
-                        <div className={`card card-collapsable ${showCreditInfo ? 'open' : ''}`}>
+                        <div className={classNames('card', 'card-collapsable', showCreditInfo && 'open')}>
                             <div
                                 className="card-header"
                                 onClick={() => setShowCreditInfo(!showCreditInfo)}
@@ -256,7 +256,7 @@ export default function FundRequestsShow() {
                     />
 
                     {fundRequest.state === 'declined' && (
-                        <div className={`card card-collapsable ${showDeclinedNote ? 'open' : ''}`}>
+                        <div className={classNames('card', 'card-collapsable', showDeclinedNote && 'open')}>
                             <div
                                 className="card-header"
                                 onClick={() => setShowDeclinedNote(!showDeclinedNote)}
diff --git a/react/src/webshop/components/pages/fund-requests/FundRequests.tsx b/react/src/webshop/components/pages/fund-requests/FundRequests.tsx
index f37d0cab2..d2dea8783 100644
--- a/react/src/webshop/components/pages/fund-requests/FundRequests.tsx
+++ b/react/src/webshop/components/pages/fund-requests/FundRequests.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import useTranslate from '../../../../dashboard/hooks/useTranslate';
 import Paginator from '../../../../dashboard/modules/paginator/components/Paginator';
 import useSetProgress from '../../../../dashboard/hooks/useSetProgress';
@@ -95,7 +96,11 @@ export default function FundRequests() {
                         <div className="block block-label-tabs form pull-right">
                             <div className="label-tab-set">
                                 <div
-                                    className={`label-tab label-tab-sm ${!filterValues.archived ? 'active' : ''}`}
+                                    className={classNames(
+                                        'label-tab',
+                                        'label-tab-sm',
+                                        !filterValues.archived && 'active',
+                                    )}
                                     role="button"
                                     data-dusk="fundRequestsFilterActive"
                                     onClick={() => filterUpdate({ archived: false })}
@@ -104,7 +109,11 @@ export default function FundRequests() {
                                     {translate('fund_requests.filters.active')}
                                 </div>
                                 <div
-                                    className={`label-tab label-tab-sm ${filterValues.archived ? 'active' : ''}`}
+                                    className={classNames(
+                                        'label-tab',
+                                        'label-tab-sm',
+                                        filterValues.archived && 'active',
+                                    )}
                                     role="button"
                                     data-dusk="fundRequestsFilterArchived"
                                     onClick={() => filterUpdate({ archived: true })}
diff --git a/react/src/webshop/components/pages/funds-activate/FundActivate.tsx b/react/src/webshop/components/pages/funds-activate/FundActivate.tsx
index fcb90e795..934b98721 100644
--- a/react/src/webshop/components/pages/funds-activate/FundActivate.tsx
+++ b/react/src/webshop/components/pages/funds-activate/FundActivate.tsx
@@ -719,7 +719,7 @@ export default function FundActivate() {
                                         <div className="form-group text-center">
                                             <button
                                                 data-dusk="codeFormSubmit"
-                                                className={`button button-primary`}
+                                                className="button button-primary"
                                                 disabled={codeForm.values.code.length != 8 || codeForm.isLoading}
                                                 type="submit">
                                                 {translate('popup_auth.buttons.submit')}
diff --git a/react/src/webshop/components/pages/funds-pre-check/FundsPreCheck.tsx b/react/src/webshop/components/pages/funds-pre-check/FundsPreCheck.tsx
index a19929629..ae321f338 100644
--- a/react/src/webshop/components/pages/funds-pre-check/FundsPreCheck.tsx
+++ b/react/src/webshop/components/pages/funds-pre-check/FundsPreCheck.tsx
@@ -282,7 +282,7 @@ export default function FundsPreCheck() {
 
     const PreCheckProgress = useCallback(
         ({ id, title = true }: { id?: string; title?: boolean }) => (
-            <div id={id} className={`pre-check-progress ${totals ? 'pre-check-progress-complete' : ''}`}>
+            <div className={classNames('pre-check-progress', totals && 'pre-check-progress-complete')} id={id}>
                 {totals && (
                     <a
                         className="pre-check-progress-header"
diff --git a/react/src/webshop/components/pages/funds-request/elements/FundRequestProgress.tsx b/react/src/webshop/components/pages/funds-request/elements/FundRequestProgress.tsx
index ef0d948e4..e867adf4a 100644
--- a/react/src/webshop/components/pages/funds-request/elements/FundRequestProgress.tsx
+++ b/react/src/webshop/components/pages/funds-request/elements/FundRequestProgress.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import useTranslate from '../../../../../dashboard/hooks/useTranslate';
 
 export default function FundRequestProgress({
@@ -13,11 +14,13 @@ export default function FundRequestProgress({
     const translate = useTranslate();
 
     return (
-        <div className={`sign_up-progress ${criteriaSteps.length >= 5 ? 'sign_up-progress-compact' : ''}`}>
+        <div className={classNames('sign_up-progress', criteriaSteps.length >= 5 && 'sign_up-progress-compact')}>
             <div
-                className={`sign_up-step sign_up-step-info ${
-                    step < steps.indexOf(criteriaSteps[0]) ? 'sign_up-step-active' : 'sign_up-step-done'
-                }`}
+                className={classNames(
+                    'sign_up-step',
+                    'sign_up-step-info',
+                    step < steps.indexOf(criteriaSteps[0]) ? 'sign_up-step-active' : 'sign_up-step-done',
+                )}
                 aria-hidden="true">
                 <div className="sign_up-step-border" />
                 <div className="mdi mdi-information-outline" />
@@ -26,10 +29,11 @@ export default function FundRequestProgress({
             {criteriaSteps?.map((_, index) => (
                 <div
                     key={index}
-                    className={`sign_up-step ${
-                        step == steps.indexOf(_) && steps.includes(_) ? 'sign_up-step-active' : ''
-                    }
-                    ${step > steps.indexOf(_) ? 'sign_up-step-done' : ''}`}
+                    className={classNames(
+                        'sign_up-step',
+                        step == steps.indexOf(_) && steps.includes(_) && 'sign_up-step-active',
+                        step > steps.indexOf(_) && 'sign_up-step-done',
+                    )}
                     aria-hidden="true">
                     <div className="sign_up-step-border" />
                     <div className="sign-up-step-block">
diff --git a/react/src/webshop/components/pages/funds-show/FundsShow.tsx b/react/src/webshop/components/pages/funds-show/FundsShow.tsx
index f4d1b0b89..69b9d3245 100644
--- a/react/src/webshop/components/pages/funds-show/FundsShow.tsx
+++ b/react/src/webshop/components/pages/funds-show/FundsShow.tsx
@@ -25,6 +25,7 @@ import usePayoutTransactionService from '../../../services/PayoutTransactionServ
 import PayoutTransaction from '../../../../dashboard/props/models/PayoutTransaction';
 import Section from '../../elements/sections/Section';
 import { WebshopRoutes } from '../../../modules/state_router/RouterBuilder';
+import classNames from 'classnames';
 
 export default function FundsShow() {
     const { id } = useParams();
@@ -217,9 +218,12 @@ export default function FundsShow() {
                                 <div className="button-group">
                                     {fund.external_link_text && fund.external_link_url && (
                                         <a
-                                            className={`button button ${
-                                                fundMeta.linkPrimaryButton ? 'button-primary' : 'button-primary-outline'
-                                            }`}
+                                            className={classNames(
+                                                'button',
+                                                fundMeta.linkPrimaryButton
+                                                    ? 'button-primary'
+                                                    : 'button-primary-outline',
+                                            )}
                                             target="_blank"
                                             href={fund.external_link_url}
                                             rel="noreferrer">
diff --git a/react/src/webshop/components/pages/funds-show/elements/FundProductsBlock.tsx b/react/src/webshop/components/pages/funds-show/elements/FundProductsBlock.tsx
index a7e87523f..1195a6a1f 100644
--- a/react/src/webshop/components/pages/funds-show/elements/FundProductsBlock.tsx
+++ b/react/src/webshop/components/pages/funds-show/elements/FundProductsBlock.tsx
@@ -31,7 +31,7 @@ export default function FundProductsBlock({ fund }: { fund: Fund }) {
     return (
         <Fragment>
             {products && (!fund.description_html || fund.description_position !== 'replace') && (
-                <BlockProducts display={'grid'} products={products.data} filters={{ fund_id: fund.id }} />
+                <BlockProducts display={'grid'} products={products.data} filters={{ fund_ids: [fund.id] }} />
             )}
         </Fragment>
     );
diff --git a/react/src/webshop/components/pages/identity-emails/PreferencesEmails.tsx b/react/src/webshop/components/pages/identity-emails/PreferencesEmails.tsx
index 28adea1df..1a1a2c606 100644
--- a/react/src/webshop/components/pages/identity-emails/PreferencesEmails.tsx
+++ b/react/src/webshop/components/pages/identity-emails/PreferencesEmails.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import useTranslate from '../../../../dashboard/hooks/useTranslate';
 import useAuthIdentity2FAState from '../../../hooks/useAuthIdentity2FAState';
 import IdentityEmail from '../../../../dashboard/props/models/IdentityEmail';
@@ -170,7 +171,13 @@ export default function PreferencesEmails() {
                                     <div className="block block-user_emails">
                                         <div className="user_email-item">
                                             <div className="user_email-icon">
-                                                <em className={`mdi mdi-at ${email.primary ? 'text-primary' : ''}`} />
+                                                <em
+                                                    className={classNames(
+                                                        'mdi',
+                                                        'mdi-at',
+                                                        email.primary && 'text-primary',
+                                                    )}
+                                                />
                                             </div>
                                             <div className="user_email-details">
                                                 <div
diff --git a/react/src/webshop/components/pages/payouts/elements/PayoutCardOverview.tsx b/react/src/webshop/components/pages/payouts/elements/PayoutCardOverview.tsx
index 90722b79d..e940f5693 100644
--- a/react/src/webshop/components/pages/payouts/elements/PayoutCardOverview.tsx
+++ b/react/src/webshop/components/pages/payouts/elements/PayoutCardOverview.tsx
@@ -22,7 +22,7 @@ export default function PayoutCardOverview({ payout, className }: { payout: Payo
                 aria-expanded={showMore}
                 aria-controls="payout-details-extra">
                 {showMore ? translate('payouts.buttons.show_less') : translate('payouts.buttons.show_more')}
-                <em className={`mdi ${showMore ? 'mdi-chevron-up' : 'mdi-chevron-down'} icon-right`} />
+                <em className={classNames('mdi', showMore ? 'mdi-chevron-up' : 'mdi-chevron-down', 'icon-right')} />
             </button>
 
             {showMore && (
diff --git a/react/src/webshop/components/pages/physical_cards/PhysicalCards.tsx b/react/src/webshop/components/pages/physical_cards/PhysicalCards.tsx
index 7c5a8c470..aefc1d00f 100644
--- a/react/src/webshop/components/pages/physical_cards/PhysicalCards.tsx
+++ b/react/src/webshop/components/pages/physical_cards/PhysicalCards.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import BlockShowcaseProfile from '../../elements/block-showcase/BlockShowcaseProfile';
 import useTranslate from '../../../../dashboard/hooks/useTranslate';
 import useFilter from '../../../../dashboard/hooks/useFilter';
@@ -78,7 +79,11 @@ export default function PhysicalCards() {
                         <div className="block block-label-tabs form pull-right">
                             <div className="label-tab-set">
                                 <div
-                                    className={`label-tab label-tab-sm ${filter.values.archived ? '' : 'active'}`}
+                                    className={classNames(
+                                        'label-tab',
+                                        'label-tab-sm',
+                                        !filter.values.archived && 'active',
+                                    )}
                                     onClick={() => filter.update({ archived: 0 })}
                                     onKeyDown={clickOnKeyEnter}
                                     tabIndex={0}
@@ -88,7 +93,11 @@ export default function PhysicalCards() {
                                     {translate('physical_cards.filters.active')}
                                 </div>
                                 <div
-                                    className={`label-tab label-tab-sm ${filter.values.archived ? 'active' : ''}`}
+                                    className={classNames(
+                                        'label-tab',
+                                        'label-tab-sm',
+                                        filter.values.archived && 'active',
+                                    )}
                                     onClick={() => filter.update({ archived: 1 })}
                                     onKeyDown={clickOnKeyEnter}
                                     tabIndex={0}
diff --git a/react/src/webshop/components/pages/products-show/elements/ProductMedia.tsx b/react/src/webshop/components/pages/products-show/elements/ProductMedia.tsx
index f03944c80..f4a54d1dc 100644
--- a/react/src/webshop/components/pages/products-show/elements/ProductMedia.tsx
+++ b/react/src/webshop/components/pages/products-show/elements/ProductMedia.tsx
@@ -52,7 +52,7 @@ export default function ProductMedia({ product }: { product: Product }) {
                         <div className="product-overview-media-items-list">
                             {photos.map((media, i) => (
                                 <div
-                                    className={classNames(`product-overview-media-item`, i === activeIndex && 'active')}
+                                    className={classNames('product-overview-media-item', i === activeIndex && 'active')}
                                     key={media.uid}
                                     role="button"
                                     tabIndex={0}
diff --git a/react/src/webshop/components/pages/products/Products.tsx b/react/src/webshop/components/pages/products/Products.tsx
index 836efd208..d87162474 100644
--- a/react/src/webshop/components/pages/products/Products.tsx
+++ b/react/src/webshop/components/pages/products/Products.tsx
@@ -245,7 +245,11 @@ export default function Products() {
                     {authIdentity && (
                         <div className="showcase-aside-tabs">
                             <div
-                                className={`showcase-aside-tab clickable ${!filterValues?.bookmarked ? 'active' : ''}`}
+                                className={classNames(
+                                    'showcase-aside-tab',
+                                    'clickable',
+                                    !filterValues?.bookmarked && 'active',
+                                )}
                                 onClick={() => filterUpdate({ bookmarked: false })}
                                 onKeyDown={clickOnKeyEnter}
                                 tabIndex={0}
@@ -255,7 +259,11 @@ export default function Products() {
                                 {translate('products.filters.all_products')}
                             </div>
                             <div
-                                className={`showcase-aside-tab clickable ${filterValues?.bookmarked ? 'active' : ''}`}
+                                className={classNames(
+                                    'showcase-aside-tab',
+                                    'clickable',
+                                    filterValues?.bookmarked && 'active',
+                                )}
                                 onClick={() => filterUpdate({ bookmarked: true })}
                                 onKeyDown={clickOnKeyEnter}
                                 role="button"
diff --git a/react/src/webshop/components/pages/providers-office/ProvidersOffice.tsx b/react/src/webshop/components/pages/providers-office/ProvidersOffice.tsx
index 5b05ebdf8..818b79838 100644
--- a/react/src/webshop/components/pages/providers-office/ProvidersOffice.tsx
+++ b/react/src/webshop/components/pages/providers-office/ProvidersOffice.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import { useParams } from 'react-router';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import useAppConfigs from '../../../hooks/useAppConfigs';
@@ -117,7 +118,7 @@ export default function ProvidersOffice() {
                         </div>
                     )}
 
-                    <div className={`office-content ${!appConfigs.show_office_map ? 'office-content-top' : ''}`}>
+                    <div className={classNames('office-content', !appConfigs.show_office_map && 'office-content-top')}>
                         <div className="block block-pane">
                             <div className="pane-head">
                                 <h1 className="sr-only">{office.address}</h1>
@@ -232,7 +233,10 @@ export default function ProvidersOffice() {
 
                                     <div className="organization-chevron">
                                         <div
-                                            className={`mdi ${showOffices ? 'mdi-chevron-up' : 'mdi-chevron-right'}`}
+                                            className={classNames(
+                                                'mdi',
+                                                showOffices ? 'mdi-chevron-up' : 'mdi-chevron-right',
+                                            )}
                                             role="button"
                                             aria-expanded={showOffices}
                                             aria-label={translate('providers_office.providers.show_more')}
diff --git a/react/src/webshop/components/pages/providers-show/ProvidersShow.tsx b/react/src/webshop/components/pages/providers-show/ProvidersShow.tsx
index 49095668d..d98a50a33 100644
--- a/react/src/webshop/components/pages/providers-show/ProvidersShow.tsx
+++ b/react/src/webshop/components/pages/providers-show/ProvidersShow.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import { ErrorResponse, useParams } from 'react-router';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import useAppConfigs from '../../../hooks/useAppConfigs';
@@ -116,7 +117,10 @@ export default function ProvidersShow() {
                 <Section type={'default'}>
                     <div className="block block-provider">
                         <div
-                            className={`provider-content ${appConfigs.show_provider_map ? '' : 'provider-content-top'}`}>
+                            className={classNames(
+                                'provider-content',
+                                !appConfigs.show_provider_map && 'provider-content-top',
+                            )}>
                             <div className="block block-pane">
                                 <div className="pane-head">
                                     <h1 className="sr-only">{provider.name}</h1>
diff --git a/react/src/webshop/components/pages/reimbursements/Reimbursements.tsx b/react/src/webshop/components/pages/reimbursements/Reimbursements.tsx
index d9321bc44..2cb87a58b 100644
--- a/react/src/webshop/components/pages/reimbursements/Reimbursements.tsx
+++ b/react/src/webshop/components/pages/reimbursements/Reimbursements.tsx
@@ -195,7 +195,11 @@ export default function Reimbursements() {
 
                             <div className="label-tab-set">
                                 <div
-                                    className={`label-tab label-tab-sm ${!filterValues.archived ? 'active' : ''}`}
+                                    className={classNames(
+                                        'label-tab',
+                                        'label-tab-sm',
+                                        !filterValues.archived && 'active',
+                                    )}
                                     role="button"
                                     data-dusk="reimbursementsFilterActive"
                                     onClick={() => filterUpdate({ archived: 0 })}
@@ -203,7 +207,11 @@ export default function Reimbursements() {
                                     {translate('reimbursements.types.active')}
                                 </div>
                                 <div
-                                    className={`label-tab label-tab-sm ${filterValues.archived ? 'active' : ''}`}
+                                    className={classNames(
+                                        'label-tab',
+                                        'label-tab-sm',
+                                        filterValues.archived && 'active',
+                                    )}
                                     onClick={() => filterUpdate({ archived: 1 })}
                                     role="button"
                                     data-dusk="reimbursementsFilterArchived"
diff --git a/react/src/webshop/components/pages/reimbursements/elements/ReimbursementCard.tsx b/react/src/webshop/components/pages/reimbursements/elements/ReimbursementCard.tsx
index 7c23a2687..e185e5083 100644
--- a/react/src/webshop/components/pages/reimbursements/elements/ReimbursementCard.tsx
+++ b/react/src/webshop/components/pages/reimbursements/elements/ReimbursementCard.tsx
@@ -11,6 +11,7 @@ import { useReimbursementService } from '../../../../services/ReimbursementServi
 import IconReimbursement from '../../../../../../assets/forus-webshop/resources/_webshop-common/assets/img/icon-reimbursement.svg';
 import useTranslate from '../../../../../dashboard/hooks/useTranslate';
 import { WebshopRoutes } from '../../../../modules/state_router/RouterBuilder';
+import classNames from 'classnames';
 
 export default function ReimbursementCard({
     onDelete,
@@ -70,7 +71,13 @@ export default function ReimbursementCard({
             dataDusk={`listReimbursementsRow${reimbursement.id}`}
             dataAttributes={{ 'data-search-item': 1 }}>
             <div
-                className={`reimbursement-image reimbursement-image-${reimbursement.state}`}
+                className={classNames(
+                    'reimbursement-image',
+                    reimbursement.state === 'draft' && 'reimbursement-image-draft',
+                    reimbursement.state === 'pending' && 'reimbursement-image-pending',
+                    reimbursement.state === 'approved' && 'reimbursement-image-approved',
+                    reimbursement.state === 'declined' && 'reimbursement-image-declined',
+                )}
                 role="img"
                 aria-hidden={!reimbursement?.files?.[0]?.preview}>
                 {!reimbursement?.files?.[0]?.preview ? (
diff --git a/react/src/webshop/components/pages/reimbursements/elements/ReimbursementDetailsCard.tsx b/react/src/webshop/components/pages/reimbursements/elements/ReimbursementDetailsCard.tsx
index d0e48c8a7..b1214433d 100644
--- a/react/src/webshop/components/pages/reimbursements/elements/ReimbursementDetailsCard.tsx
+++ b/react/src/webshop/components/pages/reimbursements/elements/ReimbursementDetailsCard.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useCallback, useState } from 'react';
+import classNames from 'classnames';
 import Reimbursement from '../../../../props/models/Reimbursement';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import { currencyFormat } from '../../../../../dashboard/helpers/string';
@@ -46,9 +47,10 @@ export default function ReimbursementDetailsCard({
                                     {reimbursement.files.map((file, index) => (
                                         <div
                                             key={file.uid}
-                                            className={`media-pagination-item ${
-                                                index === previewIndex ? 'active' : ''
-                                            }`}
+                                            className={classNames(
+                                                'media-pagination-item',
+                                                index === previewIndex && 'active',
+                                            )}
                                             onClick={() => setPreviewIndex(index)}
                                         />
                                     ))}
diff --git a/react/src/webshop/components/pages/reservations-show/ReservationsShow.tsx b/react/src/webshop/components/pages/reservations-show/ReservationsShow.tsx
index 34f9c4c56..31c2729df 100644
--- a/react/src/webshop/components/pages/reservations-show/ReservationsShow.tsx
+++ b/react/src/webshop/components/pages/reservations-show/ReservationsShow.tsx
@@ -108,7 +108,15 @@ export default function ReservationsShow() {
                                             <h1 className="reservation-title">
                                                 {translate('reservation.details.title')}
                                             </h1>
-                                            <div className={`label label-${stateData.stateClass}`}>
+                                            <div
+                                                className={classNames(
+                                                    'label',
+                                                    stateData.stateClass === 'warning' && 'label-warning',
+                                                    stateData.stateClass === 'success' && 'label-success',
+                                                    stateData.stateClass === 'default' && 'label-default',
+                                                    stateData.stateClass === 'waiting' && 'label-waiting',
+                                                    stateData.stateClass === 'danger' && 'label-danger',
+                                                )}>
                                                 {stateData.stateText}
                                             </div>
                                         </div>
@@ -255,7 +263,7 @@ export default function ReservationsShow() {
                     </div>
 
                     {reservation.extra_payment && (
-                        <div className={classNames(`card card-collapsable`, showReservationExtraAmount && 'open')}>
+                        <div className={classNames('card', 'card-collapsable', showReservationExtraAmount && 'open')}>
                             <div
                                 className="card-header"
                                 onClick={() => setShowReservationExtraAmount(!showReservationExtraAmount)}>
@@ -457,7 +465,7 @@ export default function ReservationsShow() {
                     )}
 
                     {reservation?.extra_payment?.refunds?.length > 0 && (
-                        <div className={classNames(`card card-collapsable`, showReservationRefunds && 'open')}>
+                        <div className={classNames('card', 'card-collapsable', showReservationRefunds && 'open')}>
                             <div
                                 className="card-header"
                                 onClick={() => setShowReservationRefunds(!showReservationRefunds)}>
diff --git a/react/src/webshop/components/pages/reservations/Reservations.tsx b/react/src/webshop/components/pages/reservations/Reservations.tsx
index c25f876bc..0500c971f 100644
--- a/react/src/webshop/components/pages/reservations/Reservations.tsx
+++ b/react/src/webshop/components/pages/reservations/Reservations.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import BlockShowcaseProfile from '../../elements/block-showcase/BlockShowcaseProfile';
 import SelectControl from '../../../../dashboard/components/elements/select-control/SelectControl';
 import useTranslate from '../../../../dashboard/hooks/useTranslate';
@@ -213,7 +214,11 @@ export default function Reservations() {
                             <div className="block block-label-tabs form pull-right">
                                 <div className="label-tab-set">
                                     <div
-                                        className={`label-tab label-tab-sm ${!filterValues.archived ? 'active' : ''}`}
+                                        className={classNames(
+                                            'label-tab',
+                                            'label-tab-sm',
+                                            !filterValues.archived && 'active',
+                                        )}
                                         onClick={() => filterUpdate({ archived: 0 })}
                                         aria-pressed={!filterValues.archived}
                                         data-dusk="reservationsFilterActive"
@@ -221,7 +226,11 @@ export default function Reservations() {
                                         {translate('reservations.types.active')}
                                     </div>
                                     <div
-                                        className={`label-tab label-tab-sm ${filterValues.archived ? 'active' : ''}`}
+                                        className={classNames(
+                                            'label-tab',
+                                            'label-tab-sm',
+                                            filterValues.archived && 'active',
+                                        )}
                                         onClick={() => filterUpdate({ archived: 1 })}
                                         aria-pressed={!!filterValues.archived}
                                         data-dusk="reservationsFilterArchived"
diff --git a/react/src/webshop/components/pages/reservations/elements/ReservationCard.tsx b/react/src/webshop/components/pages/reservations/elements/ReservationCard.tsx
index 04204f5ae..671e46461 100644
--- a/react/src/webshop/components/pages/reservations/elements/ReservationCard.tsx
+++ b/react/src/webshop/components/pages/reservations/elements/ReservationCard.tsx
@@ -7,6 +7,7 @@ import useTranslate from '../../../../../dashboard/hooks/useTranslate';
 import usePayReservationExtra from '../hooks/usePayReservationExtra';
 import useCancelReservation from '../hooks/useCancelReservation';
 import { WebshopRoutes } from '../../../../modules/state_router/RouterBuilder';
+import classNames from 'classnames';
 
 export default function ReservationCard({
     reservation,
@@ -91,7 +92,14 @@ export default function ReservationCard({
                                         </div>
                                     )}
                                     <div
-                                        className={`label label-${stateData.stateClass}`}
+                                        className={classNames(
+                                            'label',
+                                            stateData.stateClass === 'warning' && 'label-warning',
+                                            stateData.stateClass === 'success' && 'label-success',
+                                            stateData.stateClass === 'default' && 'label-default',
+                                            stateData.stateClass === 'waiting' && 'label-waiting',
+                                            stateData.stateClass === 'danger' && 'label-danger',
+                                        )}
                                         data-dusk={stateData.stateDusk}>
                                         {stateData.stateText}
                                     </div>
diff --git a/react/src/webshop/components/pages/reservations/hooks/useComposeStateAndExpires.tsx b/react/src/webshop/components/pages/reservations/hooks/useComposeStateAndExpires.tsx
index 7dd116cbd..b73f443ed 100644
--- a/react/src/webshop/components/pages/reservations/hooks/useComposeStateAndExpires.tsx
+++ b/react/src/webshop/components/pages/reservations/hooks/useComposeStateAndExpires.tsx
@@ -17,7 +17,7 @@ export default function useComposeStateAndExpires() {
 
             const data: {
                 stateText?: string;
-                stateClass?: string;
+                stateClass?: 'warning' | 'success' | 'default' | 'waiting' | 'danger';
                 stateDusk?: string;
                 expiresIn?: number;
             } = {
diff --git a/react/src/webshop/components/pages/search/Search.tsx b/react/src/webshop/components/pages/search/Search.tsx
index 9cefb6efd..c0916c50c 100644
--- a/react/src/webshop/components/pages/search/Search.tsx
+++ b/react/src/webshop/components/pages/search/Search.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
 import useTranslate from '../../../../dashboard/hooks/useTranslate';
 import useAuthIdentity from '../../../hooks/useAuthIdentity';
 import { SearchItem, useSearchService } from '../../../services/SearchService';
@@ -394,7 +395,11 @@ export default function Search() {
 
                                 <div className="label-tab-set">
                                     <div
-                                        className={`label-tab label-tab-sm ${displayType == 'list' ? 'active' : ''}`}
+                                        className={classNames(
+                                            'label-tab',
+                                            'label-tab-sm',
+                                            displayType == 'list' && 'active',
+                                        )}
                                         onClick={() => setDisplayType('list')}
                                         onKeyDown={clickOnKeyEnter}
                                         tabIndex={0}
@@ -404,7 +409,11 @@ export default function Search() {
                                         {translate('search.view.list')}
                                     </div>
                                     <div
-                                        className={`label-tab label-tab-sm ${displayType == 'grid' ? 'active' : ''}`}
+                                        className={classNames(
+                                            'label-tab',
+                                            'label-tab-sm',
+                                            displayType == 'grid' && 'active',
+                                        )}
                                         onClick={() => setDisplayType('grid')}
                                         onKeyDown={clickOnKeyEnter}
                                         tabIndex={0}
diff --git a/react/src/webshop/components/pages/search/elements/SearchItemsList.tsx b/react/src/webshop/components/pages/search/elements/SearchItemsList.tsx
index 17f00ed5a..ff4b6dc78 100644
--- a/react/src/webshop/components/pages/search/elements/SearchItemsList.tsx
+++ b/react/src/webshop/components/pages/search/elements/SearchItemsList.tsx
@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react';
+import classNames from 'classnames';
 import Voucher from '../../../../../dashboard/props/models/Voucher';
 import { useProductService } from '../../../../services/ProductService';
 import { strLimit } from '../../../../../dashboard/helpers/string';
@@ -37,7 +38,7 @@ export default function SearchItemsList({
     }, []);
 
     return (
-        <div className={`block block-search-results ${display === 'grid' ? 'block-search-results-grid' : ''}`}>
+        <div className={classNames('block', 'block-search-results', display === 'grid' && 'block-search-results-grid')}>
             {items?.map((item, index) => (
                 <div className="search-wrapper" key={index}>
                     {item.item_type === 'product' && (
diff --git a/react/src/webshop/components/pages/vouchers-show/elements/VoucherProducts.tsx b/react/src/webshop/components/pages/vouchers-show/elements/VoucherProducts.tsx
index 4087c554b..e29f1cefd 100644
--- a/react/src/webshop/components/pages/vouchers-show/elements/VoucherProducts.tsx
+++ b/react/src/webshop/components/pages/vouchers-show/elements/VoucherProducts.tsx
@@ -46,5 +46,5 @@ export default function VoucherProducts({ voucher }: { voucher: Voucher }) {
     if (!showProducts || !products) {
         return;
     }
-    return <BlockProducts products={products.data} filters={{ fund_id: voucher.fund_id }} />;
+    return <BlockProducts products={products.data} filters={{ fund_ids: [voucher.fund_id] }} />;
 }
diff --git a/react/src/webshop/components/pages/vouchers-show/elements/VoucherTransactionsCard.tsx b/react/src/webshop/components/pages/vouchers-show/elements/VoucherTransactionsCard.tsx
index 7e1067eec..dc9fa24ba 100644
--- a/react/src/webshop/components/pages/vouchers-show/elements/VoucherTransactionsCard.tsx
+++ b/react/src/webshop/components/pages/vouchers-show/elements/VoucherTransactionsCard.tsx
@@ -17,7 +17,7 @@ export default function VoucherTransactionsCard({ voucher }: { voucher: Voucher
                 {voucherCard.transactionsList?.map((transaction) => (
                     <div
                         key={transaction.unique_id}
-                        className={classNames(`transactions-item`, transaction.incoming && 'transactions-item-out')}>
+                        className={classNames('transactions-item', transaction.incoming && 'transactions-item-out')}>
                         <div className="transactions-item-icon">
                             <TransactionIconBg aria-hidden="true" />
 
diff --git a/react/src/webshop/components/pages/vouchers/Vouchers.tsx b/react/src/webshop/components/pages/vouchers/Vouchers.tsx
index 0dad21ad9..599f7cb1d 100644
--- a/react/src/webshop/components/pages/vouchers/Vouchers.tsx
+++ b/react/src/webshop/components/pages/vouchers/Vouchers.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import classNames from 'classnames';
 import BlockShowcaseProfile from '../../elements/block-showcase/BlockShowcaseProfile';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import useTranslate from '../../../../dashboard/hooks/useTranslate';
@@ -104,7 +105,11 @@ export default function Vouchers() {
                         <div className="block block-label-tabs form pull-right">
                             <div className="label-tab-set">
                                 <div
-                                    className={`label-tab label-tab-sm ${filterValues.archived ? '' : 'active'}`}
+                                    className={classNames(
+                                        'label-tab',
+                                        'label-tab-sm',
+                                        !filterValues.archived && 'active',
+                                    )}
                                     onClick={() => filterUpdate({ archived: 0 })}
                                     onKeyDown={clickOnKeyEnter}
                                     tabIndex={0}
@@ -114,7 +119,11 @@ export default function Vouchers() {
                                     {translate('vouchers.filters.active')}
                                 </div>
                                 <div
-                                    className={`label-tab label-tab-sm ${filterValues.archived ? 'active' : ''}`}
+                                    className={classNames(
+                                        'label-tab',
+                                        'label-tab-sm',
+                                        filterValues.archived && 'active',
+                                    )}
                                     onClick={() => filterUpdate({ archived: 1 })}
                                     onKeyDown={clickOnKeyEnter}
                                     tabIndex={0}
diff --git a/react/src/webshop/components/pages/vouchers/elements/VoucherCard.tsx b/react/src/webshop/components/pages/vouchers/elements/VoucherCard.tsx
index 4a0a49190..94686fc58 100644
--- a/react/src/webshop/components/pages/vouchers/elements/VoucherCard.tsx
+++ b/react/src/webshop/components/pages/vouchers/elements/VoucherCard.tsx
@@ -1,4 +1,5 @@
 import React, { Fragment, useCallback } from 'react';
+import classNames from 'classnames';
 import Voucher from '../../../../../dashboard/props/models/Voucher';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import { useVoucherService } from '../../../../services/VoucherService';
@@ -97,7 +98,7 @@ export default function VoucherCard({
                         )}
 
                         {voucherCard.type == 'product' && !voucher.expired && (
-                            <div className={`label ${voucherCard.used ? 'label-warning' : 'label-success'}`}>
+                            <div className={classNames('label', voucherCard.used ? 'label-warning' : 'label-success')}>
                                 {!voucherCard.used
                                     ? translate('vouchers.card.unused')
                                     : translate('vouchers.card.used')}
diff --git a/react/src/webshop/hooks/useMobileLangSelector.tsx b/react/src/webshop/hooks/useMobileLangSelector.tsx
index 01328dba5..7a0fd3f6f 100644
--- a/react/src/webshop/hooks/useMobileLangSelector.tsx
+++ b/react/src/webshop/hooks/useMobileLangSelector.tsx
@@ -36,7 +36,7 @@ export default function useMobileLangSelector() {
                         {`${languageResource.locale.toUpperCase()} - ${languageResource.name}`}
                     </div>
                     <div className="mobile-menu-languages-header-toggle">
-                        <em className={showOptions ? 'mdi mdi-chevron-down' : 'mdi mdi-chevron-right'} />
+                        <em className={classNames('mdi', showOptions ? 'mdi-chevron-down' : 'mdi-chevron-right')} />
                     </div>
                 </div>
 
diff --git a/react/src/webshop/layout/elements/LayoutFooter.tsx b/react/src/webshop/layout/elements/LayoutFooter.tsx
index 7e7c965b4..a78052d3a 100644
--- a/react/src/webshop/layout/elements/LayoutFooter.tsx
+++ b/react/src/webshop/layout/elements/LayoutFooter.tsx
@@ -97,11 +97,12 @@ export default function LayoutFooter() {
 
                         <div className="col col-md-3 footer-col footer-col-last">
                             <div
-                                className={`flex flex-vertical ${
-                                    appConfigs?.pages?.footer_app_info?.description_position == 'after'
-                                        ? 'flex-vertical-reverse'
-                                        : ''
-                                }`}>
+                                className={classNames(
+                                    'flex',
+                                    'flex-vertical',
+                                    appConfigs?.pages?.footer_app_info?.description_position == 'after' &&
+                                        'flex-vertical-reverse',
+                                )}>
                                 {appConfigs?.pages?.footer_app_info?.description_html && (
                                     <div className="block block-markdown">
                                         <Markdown content={appConfigs?.pages?.footer_app_info?.description_html} />