diff --git a/package-lock.json b/package-lock.json
index 8e6d0e2a4..b53e7da72 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -72,13 +72,13 @@
         "@typescript-eslint/eslint-plugin": "^8.18",
         "@typescript-eslint/parser": "^8.8",
         "babel-eslint": "^10.0.3",
-        "babel-loader": "^9.1.2",
+        "babel-loader": "^10.0.0",
         "babel-plugin-syntax-trailing-function-commas": "^6.22.0",
         "babelify": "^10.0.0",
         "browserify": "^17.0.0",
         "classnames": "^2.5.1",
         "compression-webpack-plugin": "^11.1.0",
-        "copy-webpack-plugin": "^12.0.2",
+        "copy-webpack-plugin": "^13.0.0",
         "css-loader": "^7.1.2",
         "eslint": "^9.19.0",
         "eslint-config-prettier": "^10.0.1",
@@ -88,7 +88,7 @@
         "eslint-plugin-prettier": "^5.0.0",
         "eslint-plugin-react": "^7.37.2",
         "eslint-plugin-react-hooks": "^5.0.0",
-        "eslint-webpack-plugin": "^4.2.0",
+        "eslint-webpack-plugin": "^5.0.0",
         "html-loader": "^5.1.0",
         "html-webpack-plugin": "^5.6.0",
         "prettier": "3.3.3",
@@ -2658,18 +2658,6 @@
       "integrity": "sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==",
       "dev": true
     },
-    "node_modules/@sindresorhus/merge-streams": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@sindresorhus/merge-streams/-/merge-streams-2.3.0.tgz",
-      "integrity": "sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==",
-      "dev": true,
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/@smithy/eventstream-codec": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@smithy/eventstream-codec/-/eventstream-codec-1.1.0.tgz",
@@ -3194,10 +3182,11 @@
       "license": "MIT"
     },
     "node_modules/@types/eslint": {
-      "version": "8.56.12",
-      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.12.tgz",
-      "integrity": "sha512-03ruubjWyOHlmljCVoxSuNDdmfZDzsrrz0P2LeJsOXr+ZwFQ+0yQIwNCwt/GYhV7Z31fgtXJTAEs+FYlEL851g==",
+      "version": "9.6.1",
+      "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
+      "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -4654,20 +4643,20 @@
       }
     },
     "node_modules/babel-loader": {
-      "version": "9.1.3",
-      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-9.1.3.tgz",
-      "integrity": "sha512-xG3ST4DglodGf8qSwv0MdeWLhrDsw/32QMdTO5T1ZIp9gQur0HkCyFs7Awskr10JKXFXwpAhiCuYX5oGXnRGbw==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-10.0.0.tgz",
+      "integrity": "sha512-z8jt+EdS61AMw22nSfoNJAZ0vrtmhPRVi6ghL3rCeRZI8cdNYFiV5xeV3HbE7rlZZNmGH8BVccwWt8/ED0QOHA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "find-cache-dir": "^4.0.0",
-        "schema-utils": "^4.0.0"
+        "find-up": "^5.0.0"
       },
       "engines": {
-        "node": ">= 14.15.0"
+        "node": "^18.20.0 || ^20.10.0 || >=22.0.0"
       },
       "peerDependencies": {
         "@babel/core": "^7.12.0",
-        "webpack": ">=5"
+        "webpack": ">=5.61.0"
       }
     },
     "node_modules/babel-plugin-polyfill-corejs2": {
@@ -5419,12 +5408,6 @@
         "node": ">=14"
       }
     },
-    "node_modules/common-path-prefix": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/common-path-prefix/-/common-path-prefix-3.0.0.tgz",
-      "integrity": "sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==",
-      "dev": true
-    },
     "node_modules/compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@@ -5586,17 +5569,17 @@
       "dev": true
     },
     "node_modules/copy-webpack-plugin": {
-      "version": "12.0.2",
-      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-12.0.2.tgz",
-      "integrity": "sha512-SNwdBeHyII+rWvee/bTnAYyO8vfVdcSTud4EIb6jcZ8inLeWucJE0DnxXQBjlQ5zlteuuvooGQy3LIyGxhvlOA==",
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-13.0.0.tgz",
+      "integrity": "sha512-FgR/h5a6hzJqATDGd9YG41SeDViH+0bkHn6WNXCi5zKAZkeESeSxLySSsFLHqLEVCh0E+rITmCf0dusXWYukeQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "fast-glob": "^3.3.2",
         "glob-parent": "^6.0.1",
-        "globby": "^14.0.0",
         "normalize-path": "^3.0.0",
         "schema-utils": "^4.2.0",
-        "serialize-javascript": "^6.0.2"
+        "serialize-javascript": "^6.0.2",
+        "tinyglobby": "^0.2.12"
       },
       "engines": {
         "node": ">= 18.12.0"
@@ -5609,50 +5592,6 @@
         "webpack": "^5.1.0"
       }
     },
-    "node_modules/copy-webpack-plugin/node_modules/globby": {
-      "version": "14.0.2",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-14.0.2.tgz",
-      "integrity": "sha512-s3Fq41ZVh7vbbe2PN3nrW7yC7U7MFVc5c98/iTl9c2GawNMKx/J648KQRW6WKkuU8GIbbh2IXfIRQjOZnXcTnw==",
-      "dev": true,
-      "dependencies": {
-        "@sindresorhus/merge-streams": "^2.1.0",
-        "fast-glob": "^3.3.2",
-        "ignore": "^5.2.4",
-        "path-type": "^5.0.0",
-        "slash": "^5.1.0",
-        "unicorn-magic": "^0.1.0"
-      },
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/copy-webpack-plugin/node_modules/path-type": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/path-type/-/path-type-5.0.0.tgz",
-      "integrity": "sha512-5HviZNaZcfqP95rwpv+1HDgUamezbqdSYTyzjTvwtJSnIH+3vnbmWsItli8OFEndS984VT55M3jduxZbX351gg==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/copy-webpack-plugin/node_modules/slash": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/slash/-/slash-5.1.0.tgz",
-      "integrity": "sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==",
-      "dev": true,
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/core-js": {
       "version": "2.6.12",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
@@ -6968,19 +6907,20 @@
       }
     },
     "node_modules/eslint-webpack-plugin": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-webpack-plugin/-/eslint-webpack-plugin-4.2.0.tgz",
-      "integrity": "sha512-rsfpFQ01AWQbqtjgPRr2usVRxhWDuG0YDYcG8DJOteD3EFnpeuYuOwk0PQiN7PRBTqS6ElNdtPZPggj8If9WnA==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-webpack-plugin/-/eslint-webpack-plugin-5.0.0.tgz",
+      "integrity": "sha512-iDhXf2r55KO1UhMfpus8oGp93wdNF+934q5kEkwa7qn3BH9f51QEC11xQidt+8jfqRnEYYZa2/8lhac7U/vqWw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@types/eslint": "^8.56.10",
+        "@types/eslint": "^9.6.1",
         "jest-worker": "^29.7.0",
-        "micromatch": "^4.0.5",
+        "micromatch": "^4.0.8",
         "normalize-path": "^3.0.0",
-        "schema-utils": "^4.2.0"
+        "schema-utils": "^4.3.0"
       },
       "engines": {
-        "node": ">= 14.15.0"
+        "node": ">= 18.12.0"
       },
       "funding": {
         "type": "opencollective",
@@ -7431,22 +7371,6 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "dev": true
     },
-    "node_modules/find-cache-dir": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-4.0.0.tgz",
-      "integrity": "sha512-9ZonPT4ZAK4a+1pUPVPZJapbi7O5qbbJPdYw/NOQWZZbVLdDTYM3A4R9z/DpAM08IDaFGsvPgiGZ82WEwUDWjg==",
-      "dev": true,
-      "dependencies": {
-        "common-path-prefix": "^3.0.0",
-        "pkg-dir": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -10431,103 +10355,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/pkg-dir": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-7.0.0.tgz",
-      "integrity": "sha512-Ie9z/WINcxxLp27BKOCHGde4ITq9UklYKDzVo1nhk5sqGEXU3FpkwP5GM2voTGJkGd9B3Otl+Q4uwSOeSUtOBA==",
-      "dev": true,
-      "dependencies": {
-        "find-up": "^6.3.0"
-      },
-      "engines": {
-        "node": ">=14.16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/pkg-dir/node_modules/find-up": {
-      "version": "6.3.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-6.3.0.tgz",
-      "integrity": "sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==",
-      "dev": true,
-      "dependencies": {
-        "locate-path": "^7.1.0",
-        "path-exists": "^5.0.0"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/pkg-dir/node_modules/locate-path": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-7.2.0.tgz",
-      "integrity": "sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==",
-      "dev": true,
-      "dependencies": {
-        "p-locate": "^6.0.0"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/pkg-dir/node_modules/p-limit": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-4.0.0.tgz",
-      "integrity": "sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==",
-      "dev": true,
-      "dependencies": {
-        "yocto-queue": "^1.0.0"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/pkg-dir/node_modules/p-locate": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-6.0.0.tgz",
-      "integrity": "sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==",
-      "dev": true,
-      "dependencies": {
-        "p-limit": "^4.0.0"
-      },
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/pkg-dir/node_modules/path-exists": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-5.0.0.tgz",
-      "integrity": "sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==",
-      "dev": true,
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      }
-    },
-    "node_modules/pkg-dir/node_modules/yocto-queue": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-1.1.1.tgz",
-      "integrity": "sha512-b4JR1PFR10y1mKjhHY9LaGo6tmrgjit7hxVIeAmyMw3jegXR4dhYqLaQF5zMXZxY7tLpMyJeLjr1C4rLmkVe8g==",
-      "dev": true,
-      "engines": {
-        "node": ">=12.20"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/possible-typed-array-names": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.0.0.tgz",
@@ -11512,10 +11339,11 @@
       }
     },
     "node_modules/schema-utils": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.2.0.tgz",
-      "integrity": "sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.0.tgz",
+      "integrity": "sha512-Gf9qqc58SpCA/xdziiHz35F4GNIWYWZrEshUc/G/r5BnLph6xpKuLeoJoQuj5WfBIx/eQLf+hmVPYHaxJu7V2g==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/json-schema": "^7.0.9",
         "ajv": "^8.9.0",
@@ -11523,7 +11351,7 @@
         "ajv-keywords": "^5.1.0"
       },
       "engines": {
-        "node": ">= 12.13.0"
+        "node": ">= 10.13.0"
       },
       "funding": {
         "type": "opencollective",
@@ -12661,6 +12489,51 @@
         "node": ">=0.6.0"
       }
     },
+    "node_modules/tinyglobby": {
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.12.tgz",
+      "integrity": "sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.4.3",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.4.3",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.3.tgz",
+      "integrity": "sha512-PMXmW2y1hDDfTSRc9gaXIuCCRpuoz3Kaz8cUelp3smouvfT632ozg2vrT6lJsHKKOF59YLbOGfAWGUcKEfRMQw==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -13073,18 +12946,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/unicorn-magic": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/unicorn-magic/-/unicorn-magic-0.1.0.tgz",
-      "integrity": "sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
diff --git a/package.json b/package.json
index 28b02ab3b..3433d454c 100644
--- a/package.json
+++ b/package.json
@@ -46,13 +46,13 @@
     "@typescript-eslint/eslint-plugin": "^8.18",
     "@typescript-eslint/parser": "^8.8",
     "babel-eslint": "^10.0.3",
-    "babel-loader": "^9.1.2",
+    "babel-loader": "^10.0.0",
     "babel-plugin-syntax-trailing-function-commas": "^6.22.0",
     "babelify": "^10.0.0",
     "browserify": "^17.0.0",
     "classnames": "^2.5.1",
     "compression-webpack-plugin": "^11.1.0",
-    "copy-webpack-plugin": "^12.0.2",
+    "copy-webpack-plugin": "^13.0.0",
     "css-loader": "^7.1.2",
     "eslint": "^9.19.0",
     "eslint-config-prettier": "^10.0.1",
@@ -62,7 +62,7 @@
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
-    "eslint-webpack-plugin": "^4.2.0",
+    "eslint-webpack-plugin": "^5.0.0",
     "html-loader": "^5.1.0",
     "html-webpack-plugin": "^5.6.0",
     "prettier": "3.3.3",
diff --git a/react/assets/forus-platform/scss/_common/dashboard.scss b/react/assets/forus-platform/scss/_common/dashboard.scss
index 7726510c4..d6410b501 100644
--- a/react/assets/forus-platform/scss/_common/dashboard.scss
+++ b/react/assets/forus-platform/scss/_common/dashboard.scss
@@ -904,9 +904,10 @@ body {
         }
 
         .mdi {
-            margin-right: 5px;
+            margin-right: 7px;
             font-size: 20px;
-            line-height: inherit;
+            line-height: 30px;
+            height: 30px;
         }
 
         &.card-title-sm {
@@ -928,82 +929,75 @@ body {
     .card-header {
         padding: 15px 20px 14px;
         position: relative;
-        @include cf();
-
-        &:not(.card-header-next) {
-            .card-header-drown,
-            .block.block-label-tabs,
-            .form-control,
-            .button {
-                margin-top: -2px;
-                margin-bottom: -2px;
-            }
-        }
+        display: flex;
+        flex-direction: row;
+        align-items: center;
 
-        &.card-header-next {
+        .card-header-filters {
             display: flex;
             flex-direction: row;
+            gap: 10px;
+            align-items: center;
 
-            .card-header-filters {
+            .block-inline-filters {
                 display: flex;
                 flex-direction: row;
                 gap: 10px;
                 align-items: center;
 
-                .block-inline-filters {
-                    display: flex;
-                    flex-direction: row;
-                    gap: 10px;
-                    align-items: center;
+                .form-control:not(.select-control) {
+                    min-height: auto !important;
 
-                    .form-control:not(.select-control) {
-                        &:not([type='radio']):not([type='checkbox']) {
-                            height: 30px;
-                            padding: 0 10px;
-                            line-height: 28px;
-                        }
+                    &:not([type='radio']):not([type='checkbox']) {
+                        height: 30px;
+                        padding: 0 10px;
+                        line-height: 28px;
                     }
+                }
 
-                    .form-group-inline > .form-label {
-                        padding-top: 5px;
-                        padding-bottom: 5px;
-                    }
+                .form-group-inline > .form-label {
+                    padding-top: 5px;
+                    padding-bottom: 5px;
+                }
 
-                    .select-control {
-                        height: auto;
+                .block-label-tabs {
+                    .label-tab {
+                        height: 30px;
+                        line-height: 24px;
+                        padding-top: 2px;
+                        padding-bottom: 2px;
+                        font-size: 12px;
 
-                        .form-control:not([type='radio']):not([type='checkbox']) {
-                            padding-right: 30px;
+                        .mdi {
+                            font-size: 1.36em;
+                            line-height: 24px;
                         }
                     }
+                }
+
+                .select-control {
+                    min-height: auto !important;
 
-                    & > * {
-                        margin: 0 0 0 0;
+                    .form-control:not([type='radio']):not([type='checkbox']) {
+                        padding-right: 30px;
                     }
                 }
-            }
 
-            .card-header-actions {
-                margin: -1px 0;
-                display: flex;
-                flex-direction: column;
-                gap: 5px;
+                & > * {
+                    margin: 0 0 0 0;
+                }
             }
+        }
 
-            .block-label-tabs {
-                margin-left: 0;
-            }
+        .card-header-actions {
+            margin: -1px 0;
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
         }
 
-        .card-header-drown {
-            .block.block-label-tabs,
-            .form-group,
-            .block.block-inline-filters .form-group,
-            .form-control,
-            .button {
-                margin-top: 0;
-                margin-bottom: 0;
-            }
+        .block-label-tabs {
+            margin-left: 0;
         }
 
         .button {
@@ -1035,13 +1029,12 @@ body {
         }
 
         &.card-header-md {
-            padding: 15px 20px;
-
             .card-title {
                 font: 600 14px / 21px var(--base-font);
 
                 .mdi {
                     margin-right: 0;
+                    margin-left: -15px;
                     color: #646f79;
                 }
             }
diff --git a/react/assets/forus-webshop/scss/_common/components/_form.scss b/react/assets/forus-webshop/scss/_common/components/_form.scss
index ef09e65ae..b3466aa33 100644
--- a/react/assets/forus-webshop/scss/_common/components/_form.scss
+++ b/react/assets/forus-webshop/scss/_common/components/_form.scss
@@ -1084,6 +1084,14 @@
             &.has-info-btn {
                 .form-control:not([type='radio']):not([type='checkbox']) {
                     padding-right: 45px;
+
+                    &.select-control {
+                        .select-control-input {
+                            .select-control-icon {
+                                right: 45px;
+                            }
+                        }
+                    }
                 }
             }
         }
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 26642b61a..d2aea914c 100644
--- a/react/src/dashboard/components/elements/block-card-emails/BlockCardEmails.tsx
+++ b/react/src/dashboard/components/elements/block-card-emails/BlockCardEmails.tsx
@@ -86,25 +86,21 @@ export default function BlockCardEmails({
     return (
         <div className="card">
             <div className="card-header">
-                <div className="flex flex-horizontal">
-                    <div className="flex flex-vertical flex-grow flex-center">
-                        <div className="card-title">
-                            Berichten&nbsp;
-                            <span className="span-count">{emailLogs?.meta?.total}</span>
-                        </div>
-                    </div>
-                    <div className="flex flex-row">
-                        <div className="block block-inline-filters">
-                            <div className="form">
-                                <div className="form-group">
-                                    <input
-                                        type="search"
-                                        className="form-control"
-                                        placeholder="Zoeken"
-                                        value={filterValues.q}
-                                        onChange={(e) => filterUpdate({ q: e.target.value })}
-                                    />
-                                </div>
+                <div className="flex flex-grow card-title">
+                    Berichten&nbsp;
+                    <span className="span-count">{emailLogs?.meta?.total}</span>
+                </div>
+                <div className="card-header-filters">
+                    <div className="block block-inline-filters">
+                        <div className="form">
+                            <div className="form-group">
+                                <input
+                                    type="search"
+                                    className="form-control"
+                                    placeholder="Zoeken"
+                                    value={filterValues.q}
+                                    onChange={(e) => filterUpdate({ q: e.target.value })}
+                                />
                             </div>
                         </div>
                     </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 b056a3cdd..c3281c64f 100644
--- a/react/src/dashboard/components/elements/block-card-notes/BlockCardNotes.tsx
+++ b/react/src/dashboard/components/elements/block-card-notes/BlockCardNotes.tsx
@@ -1,11 +1,10 @@
 import FilterModel from '../../../types/FilterModel';
 import FormValuesModel from '../../../types/FormValuesModel';
 import { useCallback, useEffect, useState } from 'react';
-import { ApiResponse, ApiResponseSingle, PaginationData, ResponseError } from '../../../props/ApiResponses';
+import { ApiResponse, ApiResponseSingle, PaginationData } from '../../../props/ApiResponses';
 import Paginator from '../../../modules/paginator/components/Paginator';
 import useFilter from '../../../hooks/useFilter';
 import React from 'react';
-import usePushDanger from '../../../hooks/usePushDanger';
 import useOpenModal from '../../../hooks/useOpenModal';
 import ModalDangerZone from '../../modals/ModalDangerZone';
 import usePushSuccess from '../../../hooks/usePushSuccess';
@@ -18,6 +17,7 @@ import usePaginatorService from '../../../modules/paginator/services/usePaginato
 import useTranslate from '../../../hooks/useTranslate';
 import LoaderTableCard from '../loader-table-card/LoaderTableCard';
 import TableRowActions from '../tables/TableRowActions';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function BlockCardNotes({
     isAssigned,
@@ -36,9 +36,9 @@ export default function BlockCardNotes({
 
     const openModal = useOpenModal();
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const paginatorService = usePaginatorService();
 
@@ -79,7 +79,7 @@ export default function BlockCardNotes({
                                     filter.touch();
                                     pushSuccess('Gelukt!', 'Notitie verwijderd.');
                                 })
-                                .catch((res: ResponseError) => pushDanger('Foutmelding!', res.data.message))
+                                .catch(pushApiError)
                                 .finally(() => setProgress(100));
                         },
                         text: translate('modals.danger_zone.remove_note.buttons.confirm'),
@@ -87,7 +87,7 @@ export default function BlockCardNotes({
                 />
             ));
         },
-        [deleteNote, filter, openModal, pushDanger, pushSuccess, setProgress, translate],
+        [deleteNote, filter, openModal, pushApiError, pushSuccess, setProgress, translate],
     );
 
     const onAddNote = useCallback(() => {
@@ -120,7 +120,7 @@ export default function BlockCardNotes({
 
     return (
         <div className="card">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="card-title flex flex-grow">
                     {translate('notes.header.title')}({notes.meta.total})
                 </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 9d72752cc..605735fbd 100644
--- a/react/src/dashboard/components/elements/block-reimbursement-categories/BlockReimbursementCategories.tsx
+++ b/react/src/dashboard/components/elements/block-reimbursement-categories/BlockReimbursementCategories.tsx
@@ -122,25 +122,21 @@ export default function BlockReimbursementCategories({
         <div className="card card-last">
             {!compact && (
                 <div className="card-header">
-                    <div className="flex">
-                        <div className="flex flex-grow">
-                            <div className="card-title">
-                                {categories?.meta
-                                    ? `Declaratie categorieën (${categories?.meta.total})`
-                                    : `Declaratie categorieën`}
-                            </div>
-                        </div>
+                    <div className="flex flex-grow card-title">
+                        {categories?.meta
+                            ? `Declaratie categorieën (${categories?.meta.total})`
+                            : `Declaratie categorieën`}
+                    </div>
 
-                        <div className="flex">
-                            <div className="block block-inline-filters">
-                                <a
-                                    className="button button-primary button-sm"
-                                    id="add_reimbursement_category"
-                                    onClick={() => editReimbursementCategory()}>
-                                    <em className="mdi mdi-plus-circle icon-start" />
-                                    {translate('Toevoegen')}
-                                </a>
-                            </div>
+                    <div className="card-header-filters">
+                        <div className="block block-inline-filters">
+                            <a
+                                className="button button-primary button-sm"
+                                id="add_reimbursement_category"
+                                onClick={() => editReimbursementCategory()}>
+                                <em className="mdi mdi-plus-circle icon-start" />
+                                {translate('Toevoegen')}
+                            </a>
                         </div>
                     </div>
                 </div>
diff --git a/react/src/dashboard/components/elements/card/Card.tsx b/react/src/dashboard/components/elements/card/Card.tsx
index 44f816d2a..6fedce4a7 100644
--- a/react/src/dashboard/components/elements/card/Card.tsx
+++ b/react/src/dashboard/components/elements/card/Card.tsx
@@ -18,7 +18,7 @@ export default function Card({
 }) {
     return (
         <div className={'card'}>
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="card-title flex flex-grow">{title}</div>
                 <div className="card-header-actions">
                     {buttons && (
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 1de27927d..f1636333a 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
@@ -18,13 +18,9 @@ export default function FundsProviderProductsRequiredTable({
     return (
         <div className="card card-no-shadow card-bordered card-overflow-hidden">
             <div className="card-header card-header-md clickable" onClick={() => setShowFunds(!showFunds)}>
-                <div className="flex-row">
-                    <div className="flex-col flex-grow">
-                        <div className="card-title">
-                            <div className={`mdi ${showFunds ? 'mdi-menu-down' : 'mdi-menu-right'}`} />
-                            <div>Fondsen die vereisen dat u een aanbod plaatst ({funds.length})</div>
-                        </div>
-                    </div>
+                <div className="card-title">
+                    <div className={`mdi ${showFunds ? 'mdi-menu-down' : 'mdi-menu-right'}`} />
+                    <div>Fondsen die vereisen dat u een aanbod plaatst ({funds.length})</div>
                 </div>
             </div>
 
diff --git a/react/src/dashboard/components/elements/tables/EventLogsTable.tsx b/react/src/dashboard/components/elements/tables/EventLogsTable.tsx
index d1f2e6c05..aef82c1dc 100644
--- a/react/src/dashboard/components/elements/tables/EventLogsTable.tsx
+++ b/react/src/dashboard/components/elements/tables/EventLogsTable.tsx
@@ -135,7 +135,7 @@ export default function EventLogsTable({
 
     return (
         <div className="card">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="card-title flex flex-grow">
                     {title || 'Activiteitenlogboek'} ({logs.meta.total})
                 </div>
diff --git a/react/src/dashboard/components/modals/Modal2FADeactivate.tsx b/react/src/dashboard/components/modals/Modal2FADeactivate.tsx
index 1607dc5b2..688df6559 100644
--- a/react/src/dashboard/components/modals/Modal2FADeactivate.tsx
+++ b/react/src/dashboard/components/modals/Modal2FADeactivate.tsx
@@ -9,6 +9,8 @@ import PincodeControl from '../elements/forms/controls/PincodeControl';
 import Auth2FAInfoBox from '../elements/auth2fa-info-box/Auth2FAInfoBox';
 import useTimer from '../../hooks/useTimer';
 import classNames from 'classnames';
+import usePushApiError from '../../hooks/usePushApiError';
+import { ResponseError } from '../../props/ApiResponses';
 
 export default function Modal2FADeactivate({
     modal,
@@ -31,6 +33,7 @@ export default function Modal2FADeactivate({
 
     const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
+    const pushApiError = usePushApiError();
     const timer = useTimer();
     const { setTimer } = timer;
 
@@ -50,13 +53,11 @@ export default function Modal2FADeactivate({
 
             identity2FAService
                 .send(auth2FA.uuid)
-                .then(
-                    () => (notify ? pushSuccess('Gelukt!', 'We hebben de code opnieuw verstuurd.') : false),
-                    (res) => pushDanger('Mislukt!', res?.data?.message),
-                )
+                .then(() => (notify ? pushSuccess('Gelukt!', 'We hebben de code opnieuw verstuurd.') : false))
+                .catch(pushApiError)
                 .then(() => setSendingCode(false));
         },
-        [auth2FA?.uuid, blockResend, identity2FAService, pushDanger, pushSuccess],
+        [auth2FA?.uuid, blockResend, identity2FAService, pushApiError, pushSuccess],
     );
 
     const deactivateProvider = useCallback(() => {
@@ -75,16 +76,24 @@ export default function Modal2FADeactivate({
                 setStep('success');
                 setErrorCode(null);
             })
-            .catch((res) => {
-                setErrorCode(res?.data?.errors?.code || null);
-                pushDanger(
-                    res.status === 404
-                        ? 'Er is een fout opgetreden. Vernieuw de pagina.'
-                        : res.data?.message || 'Unknown error.',
-                );
+            .catch((err: ResponseError) => {
+                setErrorCode(err?.data?.errors?.code || null);
+                if (err.status === 404) {
+                    return pushDanger('Er is een fout opgetreden. Vernieuw de pagina.');
+                }
+
+                pushApiError(err);
             })
             .finally(() => window.setTimeout(() => setDeactivating(false), 1000));
-    }, [auth2FA.provider_type.key, auth2FA.uuid, confirmationCode, deactivating, identity2FAService, pushDanger]);
+    }, [
+        auth2FA.provider_type.key,
+        auth2FA.uuid,
+        confirmationCode,
+        deactivating,
+        identity2FAService,
+        pushDanger,
+        pushApiError,
+    ]);
 
     const cancel = useCallback(() => {
         onCancel?.();
diff --git a/react/src/dashboard/components/modals/Modal2FASetup.tsx b/react/src/dashboard/components/modals/Modal2FASetup.tsx
index 556e5d50f..01766869a 100644
--- a/react/src/dashboard/components/modals/Modal2FASetup.tsx
+++ b/react/src/dashboard/components/modals/Modal2FASetup.tsx
@@ -2,7 +2,6 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import { useIdentity2FAService } from '../../services/Identity2FAService';
 import Identity2FA from '../../props/models/Identity2FA';
-import usePushDanger from '../../hooks/usePushDanger';
 import usePushSuccess from '../../hooks/usePushSuccess';
 import Identity2FAState from '../../props/models/Identity2FAState';
 import SelectControl from '../elements/select-control/SelectControl';
@@ -16,6 +15,7 @@ import useTimer from '../../hooks/useTimer';
 import { ResponseError } from '../../props/ApiResponses';
 import Auth2FAInfoBox from '../elements/auth2fa-info-box/Auth2FAInfoBox';
 import classNames from 'classnames';
+import usePushApiError from '../../hooks/usePushApiError';
 
 export default function Modal2FASetup({
     modal,
@@ -55,8 +55,8 @@ export default function Modal2FASetup({
     const [step, setStep] = useState(null);
     const identity2FAService = useIdentity2FAService();
 
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
+    const pushApiError = usePushApiError();
     const timer = useTimer();
     const { setTimer } = timer;
 
@@ -106,34 +106,32 @@ export default function Modal2FASetup({
                 type: 'phone',
                 phone: parseInt(phoneNumber?.toString().replace(/\D/g, '') || 0),
             })
-            .then(
-                (res) => {
-                    goToStep('provider_confirmation');
-                    setAuth2FA(res.data?.data);
-                    blockResend();
-                },
-                (res) => {
-                    setPhoneNumberError(res?.data?.errors?.phone);
-                    pushDanger('Mislukt!', res.data?.message || 'Unknown error.');
-                },
-            );
-    }, [blockResend, goToStep, identity2FAService, phoneNumber, pushDanger]);
+            .then((res) => {
+                goToStep('provider_confirmation');
+                setAuth2FA(res.data?.data);
+                blockResend();
+            })
+            .catch((err: ResponseError) => {
+                setPhoneNumberError(err?.data?.errors?.phone);
+                pushApiError(err);
+            });
+    }, [blockResend, goToStep, identity2FAService, phoneNumber, pushApiError]);
 
     const makeAuthenticator2FA = useCallback(() => {
-        identity2FAService.store({ type: 'authenticator' }).then(
-            (res) => {
+        identity2FAService
+            .store({ type: 'authenticator' })
+            .then((res) => {
                 setAuth2FA(res.data?.data);
                 goToStep('provider_select');
-            },
-            (res: ResponseError) => {
-                pushDanger(res.data?.message || 'Unknown error.');
+            })
+            .catch((err: ResponseError) => {
+                pushApiError(err);
 
-                if (res.status == 429) {
+                if (err.status == 429) {
                     cancel();
                 }
-            },
-        );
-    }, [cancel, goToStep, identity2FAService, pushDanger]);
+            });
+    }, [cancel, goToStep, identity2FAService, pushApiError]);
 
     const submitPhoneNumber = useCallback(() => {
         makePhone2FA();
@@ -157,12 +155,12 @@ export default function Modal2FASetup({
                 setActivateAuthErrors(null);
                 goToStep('success');
             })
-            .catch((res) => {
-                setActivateAuthErrors(res.data?.errors?.code);
-                pushDanger(res.data?.message || 'Unknown error.');
+            .catch((err: ResponseError) => {
+                setActivateAuthErrors(err.data?.errors?.code);
+                pushApiError(err);
             })
             .finally(() => unlock());
-    }, [auth2FA, confirmationCode, goToStep, identity2FAService, lock, provider, pushDanger, unlock]);
+    }, [auth2FA, confirmationCode, goToStep, identity2FAService, lock, provider, pushApiError, unlock]);
 
     const verifyAuthProvider = useCallback(() => {
         if (!auth2FA || lock()) {
@@ -175,12 +173,12 @@ export default function Modal2FASetup({
                 setVerifyAuthErrors(null);
                 goToStep('success');
             })
-            .catch((res) => {
-                setVerifyAuthErrors(res.data?.errors?.code);
-                pushDanger(res.data?.message || 'Unknown error.');
+            .catch((err: ResponseError) => {
+                setVerifyAuthErrors(err.data?.errors?.code);
+                pushApiError(err);
             })
             .finally(() => unlock());
-    }, [auth2FA, confirmationCode, goToStep, identity2FAService, lock, pushDanger, unlock]);
+    }, [auth2FA, confirmationCode, goToStep, identity2FAService, lock, pushApiError, unlock]);
 
     const resendCode = useCallback(
         (notify = true) => {
@@ -193,13 +191,11 @@ export default function Modal2FASetup({
 
             identity2FAService
                 .send(auth2FA.uuid)
-                .then(
-                    () => (notify ? pushSuccess('Gelukt!', 'We hebben de code opnieuw verstuurd.') : false),
-                    (res) => pushDanger('Mislukt!', res?.data?.message),
-                )
+                .then(() => (notify ? pushSuccess('Gelukt!', 'We hebben de code opnieuw verstuurd.') : false))
+                .catch(pushApiError)
                 .then(() => setSendingCode(false));
         },
-        [auth2FA?.uuid, blockResend, identity2FAService, pushDanger, pushSuccess],
+        [auth2FA?.uuid, blockResend, identity2FAService, pushApiError, pushSuccess],
     );
 
     const onKeyDown = useCallback(
diff --git a/react/src/dashboard/components/modals/ModalAddNote.tsx b/react/src/dashboard/components/modals/ModalAddNote.tsx
index ba06792e3..9705e5991 100644
--- a/react/src/dashboard/components/modals/ModalAddNote.tsx
+++ b/react/src/dashboard/components/modals/ModalAddNote.tsx
@@ -6,8 +6,8 @@ import FormValuesModel from '../../types/FormValuesModel';
 import { ApiResponseSingle, ResponseError } from '../../props/ApiResponses';
 import Note from '../../props/models/Note';
 import useSetProgress from '../../hooks/useSetProgress';
-import usePushDanger from '../../hooks/usePushDanger';
 import classNames from 'classnames';
+import usePushApiError from '../../hooks/usePushApiError';
 
 export default function ModalAddNote({
     modal,
@@ -24,7 +24,7 @@ export default function ModalAddNote({
     storeNote: (values: FormValuesModel) => Promise<ApiResponseSingle<Note>>;
     onCreated: (note?: Note) => void;
 }) {
-    const pushDanger = usePushDanger();
+    const pushApiError = usePushApiError();
     const setProgress = useSetProgress();
 
     const form = useFormBuilder({ description: '' }, () => {
@@ -38,7 +38,7 @@ export default function ModalAddNote({
             .catch((err: ResponseError) => {
                 form.setErrors(err?.data?.errors);
                 form.setIsLocked(false);
-                pushDanger('Mislukt!', err?.data?.message);
+                pushApiError(err);
             })
             .finally(() => setProgress(100));
     });
diff --git a/react/src/dashboard/components/modals/ModalAddPhysicalCard.tsx b/react/src/dashboard/components/modals/ModalAddPhysicalCard.tsx
index b4a667de7..02ade7909 100644
--- a/react/src/dashboard/components/modals/ModalAddPhysicalCard.tsx
+++ b/react/src/dashboard/components/modals/ModalAddPhysicalCard.tsx
@@ -11,7 +11,7 @@ import { usePhysicalCardService } from '../../services/PhysicalCardService';
 import { ResponseError } from '../../props/ApiResponses';
 import useTranslate from '../../hooks/useTranslate';
 import TranslateHtml from '../elements/translate-html/TranslateHtml';
-import usePushDanger from '../../hooks/usePushDanger';
+import usePushApiError from '../../hooks/usePushApiError';
 
 export default function ModalAddPhysicalCard({
     modal,
@@ -27,7 +27,7 @@ export default function ModalAddPhysicalCard({
     organization: Organization;
 }) {
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
+    const pushApiError = usePushApiError();
     const setProgress = useSetProgress();
 
     const physicalCardService = usePhysicalCardService();
@@ -48,7 +48,7 @@ export default function ModalAddPhysicalCard({
             })
             .catch((err: ResponseError) => {
                 form.setIsLocked(false);
-                pushDanger('Mislukt!', err.data.message);
+                pushApiError(err);
 
                 if (err.status === 429) {
                     return form.setErrors({ code: [err.data.message] });
diff --git a/react/src/dashboard/components/modals/ModalCreatePrevalidation.tsx b/react/src/dashboard/components/modals/ModalCreatePrevalidation.tsx
index 74c9ae46b..07dc57934 100644
--- a/react/src/dashboard/components/modals/ModalCreatePrevalidation.tsx
+++ b/react/src/dashboard/components/modals/ModalCreatePrevalidation.tsx
@@ -13,8 +13,8 @@ import PrevalidationRecord from '../../props/models/PrevalidationRecord';
 import { ResponseError } from '../../props/ApiResponses';
 import { dateFormat, dateParse } from '../../helpers/dates';
 import useSetProgress from '../../hooks/useSetProgress';
-import usePushDanger from '../../hooks/usePushDanger';
 import TableEmptyValue from '../elements/table-empty-value/TableEmptyValue';
+import usePushApiError from '../../hooks/usePushApiError';
 
 export default function ModalCreatePrevalidation({
     fund,
@@ -29,7 +29,7 @@ export default function ModalCreatePrevalidation({
     recordTypes: Array<RecordType>;
     onCreated: () => void;
 }) {
-    const pushDanger = usePushDanger();
+    const pushApiError = usePushApiError();
     const setProgress = useSetProgress();
     const prevalidationService = usePrevalidationService();
 
@@ -120,7 +120,7 @@ export default function ModalCreatePrevalidation({
                 .catch((err: ResponseError) => {
                     form.setErrors(err.data.errors);
                     form.setIsLocked(false);
-                    pushDanger('Mislukt!', err.data.message);
+                    pushApiError(err);
                     setVerificationRequested(false);
                 })
                 .finally(() => setProgress(100));
diff --git a/react/src/dashboard/components/modals/ModalFundProviderChatSponsor.tsx b/react/src/dashboard/components/modals/ModalFundProviderChatSponsor.tsx
index d8a7b79e9..5df7505ad 100644
--- a/react/src/dashboard/components/modals/ModalFundProviderChatSponsor.tsx
+++ b/react/src/dashboard/components/modals/ModalFundProviderChatSponsor.tsx
@@ -10,10 +10,9 @@ import FundProviderChatMessage from '../../props/models/FundProviderChatMessage'
 import Fund from '../../props/models/Fund';
 import FundProvider from '../../props/models/FundProvider';
 import useFundProviderChatService from '../../services/FundProviderChatService';
-import { ResponseError } from '../../props/ApiResponses';
-import usePushDanger from '../../hooks/usePushDanger';
 import useSetProgress from '../../hooks/useSetProgress';
 import SponsorProduct from '../../props/models/Sponsor/SponsorProduct';
+import usePushApiError from '../../hooks/usePushApiError';
 
 export default function ModalFundProviderChatSponsor({
     modal,
@@ -34,7 +33,7 @@ export default function ModalFundProviderChatSponsor({
 }) {
     const envData = useEnvData();
 
-    const pushDanger = usePushDanger();
+    const pushApiError = usePushApiError();
     const setProgress = useSetProgress();
 
     const fundProviderChatService = useFundProviderChatService();
@@ -70,12 +69,10 @@ export default function ModalFundProviderChatSponsor({
                     setMessages(Object.values(groupBy(res.data.data, 'date')));
                     setTimeoutValue(setTimeout(() => scrollTheChat(forceScroll), 50));
                 })
-                .catch((res: ResponseError) => {
-                    pushDanger('Mislukt!', res.data.message);
-                })
+                .catch(pushApiError)
                 .finally(() => setProgress(100));
         },
-        [fundProviderChatService, organization.id, fund.id, fundProvider.id, chat.id, pushDanger, setProgress],
+        [fundProviderChatService, organization.id, fund.id, fundProvider.id, chat.id, setProgress, pushApiError],
     );
 
     const form = useFormBuilder(
diff --git a/react/src/dashboard/components/modals/ModalFundTopUp.tsx b/react/src/dashboard/components/modals/ModalFundTopUp.tsx
index aa78e78b0..a90820767 100644
--- a/react/src/dashboard/components/modals/ModalFundTopUp.tsx
+++ b/react/src/dashboard/components/modals/ModalFundTopUp.tsx
@@ -1,13 +1,13 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { ModalState } from '../../modules/modals/context/ModalContext';
 import { ResponseError } from '../../props/ApiResponses';
-import usePushDanger from '../../hooks/usePushDanger';
 import Fund from '../../props/models/Fund';
 import { useFundService } from '../../services/FundService';
 import useActiveOrganization from '../../hooks/useActiveOrganization';
 import { useClipboardService } from '../../services/ClipboardService';
 import usePushSuccess from '../../hooks/usePushSuccess';
 import useTranslate from '../../hooks/useTranslate';
+import usePushApiError from '../../hooks/usePushApiError';
 
 export default function ModalFundTopUp({
     fund,
@@ -21,8 +21,8 @@ export default function ModalFundTopUp({
     className?: string;
 }) {
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
+    const pushApiError = usePushApiError();
     const activeOrganization = useActiveOrganization();
 
     const fundService = useFundService();
@@ -53,10 +53,10 @@ export default function ModalFundTopUp({
                 setLoaded(true);
             })
             .catch((err: ResponseError) => {
-                pushDanger(err.data.message);
+                pushApiError(err);
                 closeModal();
             });
-    }, [activeOrganization.id, closeModal, fund.id, fundService, modal, pushDanger]);
+    }, [activeOrganization.id, closeModal, fund.id, fundService, modal, pushApiError]);
 
     return (
         <div className={`modal modal-md modal-animated ${modal.loading ? 'modal-loading' : ''} ${className}`}>
diff --git a/react/src/dashboard/components/modals/ModalFundUnsubscribe.tsx b/react/src/dashboard/components/modals/ModalFundUnsubscribe.tsx
index bde30e913..6a84afa35 100644
--- a/react/src/dashboard/components/modals/ModalFundUnsubscribe.tsx
+++ b/react/src/dashboard/components/modals/ModalFundUnsubscribe.tsx
@@ -5,7 +5,6 @@ import Organization from '../../props/models/Organization';
 import { ResponseError } from '../../props/ApiResponses';
 import useFormBuilder from '../../hooks/useFormBuilder';
 import usePushSuccess from '../../hooks/usePushSuccess';
-import usePushDanger from '../../hooks/usePushDanger';
 import FormError from '../elements/forms/errors/FormError';
 import DatePickerControl from '../elements/forms/controls/DatePickerControl';
 import { dateFormat, dateParse } from '../../helpers/dates';
@@ -15,6 +14,7 @@ import { addDays } from 'date-fns';
 import { clickOnKeyEnter } from '../../helpers/wcag';
 import useTranslate from '../../hooks/useTranslate';
 import classNames from 'classnames';
+import usePushApiError from '../../hooks/usePushApiError';
 
 export default function ModalFundUnsubscribe({
     modal,
@@ -32,9 +32,9 @@ export default function ModalFundUnsubscribe({
     const [dateMin] = useState(addDays(new Date(), 1));
 
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const fundUnsubscribeService = useFundUnsubscribeService();
 
@@ -54,7 +54,7 @@ export default function ModalFundUnsubscribe({
                     onUnsubscribe?.();
                 })
                 .catch((err: ResponseError) => {
-                    pushDanger('Er is iets mis gegaan.', 'Probeer het probleem op te lossen en opnieuw te versturen.');
+                    pushApiError(err);
                     form.setErrors(err.data.errors);
                 })
                 .finally(() => {
diff --git a/react/src/dashboard/components/modals/ModalOrderPhysicalCard.tsx b/react/src/dashboard/components/modals/ModalOrderPhysicalCard.tsx
index 6869bcbf0..8cb7278b1 100644
--- a/react/src/dashboard/components/modals/ModalOrderPhysicalCard.tsx
+++ b/react/src/dashboard/components/modals/ModalOrderPhysicalCard.tsx
@@ -7,7 +7,7 @@ import FormError from '../elements/forms/errors/FormError';
 import { usePhysicalCardsRequestService } from '../../services/PhysicalCardsRequestService';
 import useTranslate from '../../hooks/useTranslate';
 import { ResponseError } from '../../props/ApiResponses';
-import usePushDanger from '../../hooks/usePushDanger';
+import usePushApiError from '../../hooks/usePushApiError';
 
 export default function ModalOrderPhysicalCard({
     modal,
@@ -21,7 +21,7 @@ export default function ModalOrderPhysicalCard({
     onRequested: () => void;
 }) {
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
+    const pushApiError = usePushApiError();
     const setProgress = useSetProgress();
 
     const physicalCardsRequestService = usePhysicalCardsRequestService();
@@ -56,7 +56,7 @@ export default function ModalOrderPhysicalCard({
                 .catch((err: ResponseError) => {
                     form.setIsLocked(false);
                     form.setErrors(err.data.errors);
-                    pushDanger('Mislukt!', err.data.message);
+                    pushApiError(err);
                     setState('form');
                 })
                 .finally(() => setProgress(100));
@@ -83,11 +83,11 @@ export default function ModalOrderPhysicalCard({
                 })
                 .catch((err: ResponseError) => {
                     form.setErrors(err.data.errors);
-                    pushDanger('Mislukt!', err.data.message);
+                    pushApiError(err);
                 })
                 .finally(() => setProgress(100));
         },
-        [form, physicalCardsRequestService, pushDanger, setProgress, voucher.address, voucher.fund.organization_id],
+        [form, physicalCardsRequestService, pushApiError, setProgress, voucher.address, voucher.fund.organization_id],
     );
 
     return (
diff --git a/react/src/dashboard/components/modals/ModalReimbursementCategoryEdit.tsx b/react/src/dashboard/components/modals/ModalReimbursementCategoryEdit.tsx
index b8dab2151..bb3e9d25e 100644
--- a/react/src/dashboard/components/modals/ModalReimbursementCategoryEdit.tsx
+++ b/react/src/dashboard/components/modals/ModalReimbursementCategoryEdit.tsx
@@ -5,10 +5,10 @@ import useFormBuilder from '../../hooks/useFormBuilder';
 import { useReimbursementCategoryService } from '../../services/ReimbursementCategoryService';
 import useActiveOrganization from '../../hooks/useActiveOrganization';
 import usePushSuccess from '../../hooks/usePushSuccess';
-import usePushDanger from '../../hooks/usePushDanger';
 import useSetProgress from '../../hooks/useSetProgress';
 import FormError from '../elements/forms/errors/FormError';
 import { ResponseError } from '../../props/ApiResponses';
+import usePushApiError from '../../hooks/usePushApiError';
 
 export default function ModalReimbursementCategoryEdit({
     modal,
@@ -25,7 +25,7 @@ export default function ModalReimbursementCategoryEdit({
 }) {
     const activeOrganization = useActiveOrganization();
 
-    const pushDanger = usePushDanger();
+    const pushApiError = usePushApiError();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
 
@@ -49,7 +49,7 @@ export default function ModalReimbursementCategoryEdit({
                     onSubmit?.();
                 })
                 .catch((err: ResponseError) => {
-                    pushDanger('Mislukt!', err.data?.message);
+                    pushApiError(err);
                     form.setErrors(err.data?.errors);
                     form.setIsLocked(false);
                 })
diff --git a/react/src/dashboard/components/modals/ModalReimbursementDetailsEdit.tsx b/react/src/dashboard/components/modals/ModalReimbursementDetailsEdit.tsx
index 611847ef6..2925d8c0f 100644
--- a/react/src/dashboard/components/modals/ModalReimbursementDetailsEdit.tsx
+++ b/react/src/dashboard/components/modals/ModalReimbursementDetailsEdit.tsx
@@ -7,7 +7,6 @@ import useFormBuilder from '../../hooks/useFormBuilder';
 import { useReimbursementsService } from '../../services/ReimbursementService';
 import { useReimbursementCategoryService } from '../../services/ReimbursementCategoryService';
 import usePushSuccess from '../../hooks/usePushSuccess';
-import usePushDanger from '../../hooks/usePushDanger';
 import useSetProgress from '../../hooks/useSetProgress';
 import FormError from '../elements/forms/errors/FormError';
 import SelectControlOptions from '../elements/select-control/templates/SelectControlOptions';
@@ -15,6 +14,7 @@ import SelectControl from '../elements/select-control/SelectControl';
 import ReimbursementCategory from '../../props/models/ReimbursementCategory';
 import useOpenModal from '../../hooks/useOpenModal';
 import ModalReimbursementCategoriesEdit from '../modals/ModalReimbursementCategoriesEdit';
+import usePushApiError from '../../hooks/usePushApiError';
 
 export default function ModalReimbursementDetailsEdit({
     modal,
@@ -32,7 +32,7 @@ export default function ModalReimbursementDetailsEdit({
     className?: string;
 }) {
     const openModal = useOpenModal();
-    const pushDanger = usePushDanger();
+    const pushApiError = usePushApiError();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
 
@@ -61,7 +61,7 @@ export default function ModalReimbursementDetailsEdit({
                     modal.close();
                 })
                 .catch((err: ResponseError) => {
-                    pushDanger('Mislukt!', err.data.message);
+                    pushApiError(err);
                     form.setErrors(err.data.errors);
                     form.setIsLocked(false);
                 })
@@ -75,9 +75,9 @@ export default function ModalReimbursementDetailsEdit({
         reimbursementCategoryService
             .list(organization.id, { per_page: 100 })
             .then((res) => setCategories([{ id: null, name: 'Geen categorie' }, ...res.data.data]))
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [organization.id, pushDanger, reimbursementCategoryService, setProgress]);
+    }, [organization.id, pushApiError, reimbursementCategoryService, setProgress]);
 
     const manageCategories = useCallback(() => {
         setShowModal(false);
diff --git a/react/src/dashboard/components/modals/ModalReimbursementResolve.tsx b/react/src/dashboard/components/modals/ModalReimbursementResolve.tsx
index 6f6122382..57fe9d7cd 100644
--- a/react/src/dashboard/components/modals/ModalReimbursementResolve.tsx
+++ b/react/src/dashboard/components/modals/ModalReimbursementResolve.tsx
@@ -7,9 +7,9 @@ import useFormBuilder from '../../hooks/useFormBuilder';
 import { useReimbursementsService } from '../../services/ReimbursementService';
 import useSetProgress from '../../hooks/useSetProgress';
 import usePushSuccess from '../../hooks/usePushSuccess';
-import usePushDanger from '../../hooks/usePushDanger';
 import CheckboxControl from '../elements/forms/controls/CheckboxControl';
 import Tooltip from '../elements/tooltip/Tooltip';
+import usePushApiError from '../../hooks/usePushApiError';
 
 export default function ModalReimbursementResolve({
     modal,
@@ -26,8 +26,8 @@ export default function ModalReimbursementResolve({
     onSubmit: (res: ApiResponseSingle<Reimbursement>) => void;
     className?: string;
 }) {
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
+    const pushApiError = usePushApiError();
     const setProgress = useSetProgress();
 
     const reimbursementService = useReimbursementsService();
@@ -63,7 +63,7 @@ export default function ModalReimbursementResolve({
                 .catch((err: ResponseError) => {
                     form.setErrors(err.data?.errors);
                     form.setIsLocked(false);
-                    pushDanger('Mislukt!', err.data?.message);
+                    pushApiError(err);
                 })
                 .finally(() => setProgress(100));
         },
diff --git a/react/src/dashboard/components/modals/ModalSocialMediaEdit.tsx b/react/src/dashboard/components/modals/ModalSocialMediaEdit.tsx
index 1724dfdde..b684011fe 100644
--- a/react/src/dashboard/components/modals/ModalSocialMediaEdit.tsx
+++ b/react/src/dashboard/components/modals/ModalSocialMediaEdit.tsx
@@ -11,8 +11,8 @@ import ImplementationSocialMedia from '../../props/models/ImplementationSocialMe
 import Implementation from '../../props/models/Implementation';
 import useImplementationSocialMediaService from '../../services/ImplementationSocialMediaService';
 import usePushSuccess from '../../hooks/usePushSuccess';
-import usePushDanger from '../../hooks/usePushDanger';
 import useSetProgress from '../../hooks/useSetProgress';
+import usePushApiError from '../../hooks/usePushApiError';
 
 export default function ModalSocialMediaEdit({
     modal,
@@ -31,8 +31,8 @@ export default function ModalSocialMediaEdit({
     organization: Organization;
     implementation: Implementation;
 }) {
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
+    const pushApiError = usePushApiError();
     const setProgress = useSetProgress();
 
     const implementationSocialMediaService = useImplementationSocialMediaService();
@@ -69,9 +69,9 @@ export default function ModalSocialMediaEdit({
                     onSubmit();
                     modal.close();
                 })
-                .catch((res: ResponseError) => {
-                    pushDanger('Error!', res?.data?.message);
-                    form.setErrors(res.data.errors);
+                .catch((err: ResponseError) => {
+                    pushApiError(err);
+                    form.setErrors(err.data.errors);
                 })
                 .finally(() => {
                     form.setIsLocked(false);
diff --git a/react/src/dashboard/components/modals/ModalVoucherCreate.tsx b/react/src/dashboard/components/modals/ModalVoucherCreate.tsx
index 7707a3dd8..83e250034 100644
--- a/react/src/dashboard/components/modals/ModalVoucherCreate.tsx
+++ b/react/src/dashboard/components/modals/ModalVoucherCreate.tsx
@@ -23,6 +23,7 @@ import ModalNotification from './ModalNotification';
 import SelectControlOptionsFund from '../elements/select-control/templates/SelectControlOptionsFund';
 import FormGroupInfo from '../elements/forms/elements/FormGroupInfo';
 import TranslateHtml from '../elements/translate-html/TranslateHtml';
+import usePushApiError from '../../hooks/usePushApiError';
 
 export default function ModalVoucherCreate({
     funds,
@@ -43,6 +44,7 @@ export default function ModalVoucherCreate({
     const openModal = useOpenModal();
     const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const voucherService = useVoucherService();
     const productService = useProductService();
@@ -126,7 +128,7 @@ export default function ModalVoucherCreate({
                     .catch((err: ResponseError) => {
                         form.setErrors(err.data.errors);
                         form.setIsLocked(false);
-                        pushDanger('Mislukt!', err.data.message);
+                        pushApiError(err);
                     })
                     .finally(() => {
                         setProgress(100);
@@ -197,7 +199,7 @@ export default function ModalVoucherCreate({
                     }
                 })
                 .catch((err: ResponseError) => {
-                    pushDanger('Mislukt!', err.data.message);
+                    pushApiError(err);
                     form.setErrors(err.data.errors);
                     form.setIsLocked(false);
                 })
diff --git a/react/src/dashboard/components/modals/ModalVoucherQRCode.tsx b/react/src/dashboard/components/modals/ModalVoucherQRCode.tsx
index ff49be3bb..461b035fe 100644
--- a/react/src/dashboard/components/modals/ModalVoucherQRCode.tsx
+++ b/react/src/dashboard/components/modals/ModalVoucherQRCode.tsx
@@ -5,7 +5,6 @@ import FormError from '../elements/forms/errors/FormError';
 import Voucher from '../../props/models/Voucher';
 import useVoucherService from '../../services/VoucherService';
 import useActiveOrganization from '../../hooks/useActiveOrganization';
-import usePushDanger from '../../hooks/usePushDanger';
 import QrCode from '../elements/qr-code/QrCode';
 import SelectControl from '../elements/select-control/SelectControl';
 import { ResponseError } from '../../props/ApiResponses';
@@ -16,6 +15,7 @@ import VoucherQrCodePrintable from '../../../webshop/components/printable/Vouche
 import useOpenPrintable from '../../hooks/useOpenPrintable';
 import useAssetUrl from '../../hooks/useAssetUrl';
 import Fund from '../../props/models/Fund';
+import usePushApiError from '../../hooks/usePushApiError';
 
 export default function ModalVoucherQRCode({
     fund,
@@ -36,8 +36,8 @@ export default function ModalVoucherQRCode({
 }) {
     const assetUrl = useAssetUrl();
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const openPrintable = useOpenPrintable();
     const activeOrganization = useActiveOrganization();
 
@@ -78,10 +78,10 @@ export default function ModalVoucherQRCode({
                     onAssigned(res.data.data);
                     setSuccess(true);
                 })
-                .catch((res: ResponseError) => {
-                    form.setErrors(res.data.errors);
+                .catch((err: ResponseError) => {
+                    form.setErrors(err.data.errors);
                     form.setIsLocked(false);
-                    pushDanger('Error!', res.data.message);
+                    pushApiError(err);
                 })
                 .finally(() => {
                     form.setIsLocked(false);
diff --git a/react/src/dashboard/components/modals/ModalVoucherRecordEdit.tsx b/react/src/dashboard/components/modals/ModalVoucherRecordEdit.tsx
index 0cb89fb3e..a122541c7 100644
--- a/react/src/dashboard/components/modals/ModalVoucherRecordEdit.tsx
+++ b/react/src/dashboard/components/modals/ModalVoucherRecordEdit.tsx
@@ -10,11 +10,12 @@ import Organization from '../../props/models/Organization';
 import { useRecordTypeService } from '../../services/RecordTypeService';
 import RecordType from '../../props/models/RecordType';
 import useVoucherRecordService from '../../services/VoucherRecordService';
-import usePushDanger from '../../hooks/usePushDanger';
 import usePushSuccess from '../../hooks/usePushSuccess';
 import VoucherRecord from '../../props/models/VoucherRecord';
 import { dateFormat, dateParse } from '../../helpers/dates';
 import DatePickerControl from '../elements/forms/controls/DatePickerControl';
+import usePushApiError from '../../hooks/usePushApiError';
+import { ResponseError } from '../../props/ApiResponses';
 
 export default function ModalVoucherRecordEdit({
     modal,
@@ -31,9 +32,9 @@ export default function ModalVoucherRecordEdit({
     className?: string;
     organization: Organization;
 }) {
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const recordTypeService = useRecordTypeService();
     const voucherRecordService = useVoucherRecordService();
@@ -68,9 +69,9 @@ export default function ModalVoucherRecordEdit({
                     pushSuccess('Gelukt!', 'Persoonsgegeven is toegevoegd!');
                     modal.close();
                 })
-                .catch((res) => {
-                    form.setErrors(res.data?.errors);
-                    pushDanger('Foutmelding!', res.data.message);
+                .catch((err: ResponseError) => {
+                    form.setErrors(err.data?.errors);
+                    pushApiError(err);
                 })
                 .finally(() => form.setIsLocked(false));
         },
@@ -100,9 +101,9 @@ export default function ModalVoucherRecordEdit({
         voucherRecordService
             .list(organization.id, voucher.id, { per_page: 100 })
             .then((res) => setExistingRecordTypes(res.data.data.map((record) => record.record_type_key)))
-            .catch((res) => pushDanger('Mislukt!', res.data.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [organization.id, setProgress, voucher.id, voucherRecordService, pushDanger]);
+    }, [organization.id, setProgress, voucher.id, voucherRecordService, pushApiError]);
 
     useEffect(() => {
         fetchExistingRecordTypes();
diff --git a/react/src/dashboard/components/modals/ModalVoucherTransaction/ModalVoucherTransaction.tsx b/react/src/dashboard/components/modals/ModalVoucherTransaction/ModalVoucherTransaction.tsx
index 559307582..ac3a09976 100644
--- a/react/src/dashboard/components/modals/ModalVoucherTransaction/ModalVoucherTransaction.tsx
+++ b/react/src/dashboard/components/modals/ModalVoucherTransaction/ModalVoucherTransaction.tsx
@@ -9,7 +9,6 @@ import Fund from '../../../props/models/Fund';
 import { useOrganizationService } from '../../../services/OrganizationService';
 import { useReimbursementsService } from '../../../services/ReimbursementService';
 import useVoucherService from '../../../services/VoucherService';
-import usePushDanger from '../../../hooks/usePushDanger';
 import SelectControl from '../../elements/select-control/SelectControl';
 import SelectControlOptions from '../../elements/select-control/templates/SelectControlOptions';
 import FormError from '../../elements/forms/errors/FormError';
@@ -18,6 +17,8 @@ import ModalVoucherTransactionPreview from './ModalVoucherTransactionPreview';
 import Reimbursement from '../../../props/models/Reimbursement';
 import useSetProgress from '../../../hooks/useSetProgress';
 import useTranslate from '../../../hooks/useTranslate';
+import usePushApiError from '../../../hooks/usePushApiError';
+import { ResponseError } from '../../../props/ApiResponses';
 import InfoBox from '../../elements/info-box/InfoBox';
 
 type ReimbursementLocale = Partial<Reimbursement & { id?: number; name: string }>;
@@ -39,8 +40,8 @@ export default function ModalVoucherTransaction({
 }) {
     const translate = useTranslate();
 
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const fundService = useFundService();
     const voucherService = useVoucherService();
@@ -155,10 +156,10 @@ export default function ModalVoucherTransaction({
                     setState('finish');
                     onCreated?.();
                 })
-                .catch((res) => {
-                    form.setErrors(res.data.errors);
+                .catch((err: ResponseError) => {
+                    form.setErrors(err.data.errors);
                     setState('form');
-                    pushDanger('Mislukt!', res.data.message);
+                    pushApiError(err);
                 })
                 .finally(() => {
                     setProgress(100);
diff --git a/react/src/dashboard/components/pages/auth/SignUpProvider.tsx b/react/src/dashboard/components/pages/auth/SignUpProvider.tsx
index 9a5db6dfa..989ebf1e2 100644
--- a/react/src/dashboard/components/pages/auth/SignUpProvider.tsx
+++ b/react/src/dashboard/components/pages/auth/SignUpProvider.tsx
@@ -46,9 +46,9 @@ import useFilter from '../../../hooks/useFilter';
 import useDemoTransactionService from '../../../services/DemoTransactionService';
 import { uniq } from 'lodash';
 import useAppConfigs from '../../../hooks/useAppConfigs';
-import usePushDanger from '../../../hooks/usePushDanger';
 import useTranslate from '../../../hooks/useTranslate';
 import SignUpFooter from '../../../../webshop/components/elements/sign-up/SignUpFooter';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 type OfficeLocal = Office & { edit?: boolean };
 
@@ -58,7 +58,7 @@ export default function SignUpProvider() {
     const appConfigs = useAppConfigs();
 
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
+    const pushApiError = usePushApiError();
 
     const [printDebug] = useState(false);
 
@@ -347,13 +347,13 @@ export default function SignUpProvider() {
                                         });
                                     });
                                 })
-                                .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message));
+                                .catch(pushApiError);
                         },
                     }}
                 />
             ));
         },
-        [officeService, openModal, pushDanger],
+        [officeService, openModal, pushApiError],
     );
 
     const addOffice = useCallback(() => {
diff --git a/react/src/dashboard/components/pages/bank-connections/BankConnections.tsx b/react/src/dashboard/components/pages/bank-connections/BankConnections.tsx
index e8a9c57b1..4c10e57c3 100644
--- a/react/src/dashboard/components/pages/bank-connections/BankConnections.tsx
+++ b/react/src/dashboard/components/pages/bank-connections/BankConnections.tsx
@@ -19,6 +19,7 @@ import useConfirmBankConnectionDisable from './hooks/useConfirmBankConnectionDis
 import useConfirmBankNewConnection from './hooks/useConfirmBankNewConnection';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
 import EmptyCard from '../../elements/empty-card/EmptyCard';
+import usePushApiError from '../../../hooks/usePushApiError';
 import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
 import TableTopScroller from '../../elements/tables/TableTopScroller';
 
@@ -29,6 +30,7 @@ export default function BankConnections() {
     const openModal = useOpenModal();
     const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
+    const pushApiError = usePushApiError();
 
     const confirmBankNewConnection = useConfirmBankNewConnection();
     const confirmBankConnectionDisable = useConfirmBankConnectionDisable();
@@ -67,9 +69,9 @@ export default function BankConnections() {
 
     const onRequestError = useCallback(
         (err: ResponseError) => {
-            pushDanger('Error', err.data.message || 'Er is iets misgegaan, probeer het later opnieuw.');
+            pushApiError(err, 'Er is iets misgegaan, probeer het later opnieuw.');
         },
-        [pushDanger],
+        [pushApiError],
     );
 
     const fetchBanks = useCallback(() => {
diff --git a/react/src/dashboard/components/pages/bi-connection/BiConnection.tsx b/react/src/dashboard/components/pages/bi-connection/BiConnection.tsx
index 304a0ce52..388154bb9 100644
--- a/react/src/dashboard/components/pages/bi-connection/BiConnection.tsx
+++ b/react/src/dashboard/components/pages/bi-connection/BiConnection.tsx
@@ -11,7 +11,6 @@ import { useBiConnectionService } from '../../../services/BiConnectionService';
 import { chunk } from 'lodash';
 import ModalDangerZone from '../../modals/ModalDangerZone';
 import useOpenModal from '../../../hooks/useOpenModal';
-import usePushDanger from '../../../hooks/usePushDanger';
 import usePushSuccess from '../../../hooks/usePushSuccess';
 import BiConnectionDataType from '../../../props/models/BiConnectionDataType';
 import { StringParam } from 'use-query-params';
@@ -25,6 +24,7 @@ import LoadingCard from '../../elements/loading-card/LoadingCard';
 import InfoBox from '../../elements/info-box/InfoBox';
 import FormGroupInfo from '../../elements/forms/elements/FormGroupInfo';
 import BlockLabelTabs from '../../elements/block-label-tabs/BlockLabelTabs';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function BiConnection() {
     const auth2FAState = useAuthIdentity2FAState();
@@ -33,9 +33,9 @@ export default function BiConnection() {
 
     const openModal = useOpenModal();
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const biConnectionService = useBiConnectionService();
 
@@ -106,7 +106,7 @@ export default function BiConnection() {
                         filtersUpdate({ view_type: 'security' });
                     }
 
-                    pushDanger(err.data?.message || 'Onbekende foutmelding!');
+                    pushApiError(err);
                 })
                 .finally(() => {
                     setIpError(null);
@@ -152,10 +152,10 @@ export default function BiConnection() {
                     setConnection(res.data.data);
                     pushSuccess('Opgeslagen!');
                 })
-                .catch((err: ResponseError) => pushDanger(err.data?.message || 'Foutmelding!'))
+                .catch(pushApiError)
                 .finally(() => setProgress(100));
         });
-    }, [setProgress, activeOrganization.id, askConfirmation, biConnectionService, pushDanger, pushSuccess]);
+    }, [setProgress, activeOrganization.id, askConfirmation, biConnectionService, pushApiError, pushSuccess]);
 
     const addIp = useCallback(() => {
         if (!ip) {
@@ -262,7 +262,7 @@ export default function BiConnection() {
 
             <div className="card">
                 <form className="form">
-                    <div className="card-header card-header-next">
+                    <div className="card-header">
                         <div className="card-title flex flex-grow">{translate('bi_connection.title')}</div>
                         <BlockLabelTabs
                             value={filterValues.view_type}
diff --git a/react/src/dashboard/components/pages/csv_validations/CsvValidations.tsx b/react/src/dashboard/components/pages/csv_validations/CsvValidations.tsx
index 4cb40c764..1eee831f2 100644
--- a/react/src/dashboard/components/pages/csv_validations/CsvValidations.tsx
+++ b/react/src/dashboard/components/pages/csv_validations/CsvValidations.tsx
@@ -63,10 +63,10 @@ export default function CsvValidations() {
     return (
         <Fragment>
             <div className="card form">
-                <div className="card-header flex">
+                <div className="card-header">
                     <div className="card-title flex-grow">{translate('csv_validation.header.title')}</div>
 
-                    <div className="flex">
+                    <div className="card-header-filters">
                         <div className="block block-inline-filters">
                             <div className="form">
                                 <div className="form-group">
diff --git a/react/src/dashboard/components/pages/csv_validations/elements/CSVUpload.tsx b/react/src/dashboard/components/pages/csv_validations/elements/CSVUpload.tsx
index 95b391fdf..6f94f600e 100644
--- a/react/src/dashboard/components/pages/csv_validations/elements/CSVUpload.tsx
+++ b/react/src/dashboard/components/pages/csv_validations/elements/CSVUpload.tsx
@@ -17,6 +17,7 @@ import { ResponseError } from '../../../../props/ApiResponses';
 import { fileSize } from '../../../../helpers/string';
 import classNames from 'classnames';
 import { fileToText } from '../../../../helpers/utils';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 type RowDataPropData = { [key: string]: string };
 
@@ -40,6 +41,7 @@ export default function CSVUpload({
     const translate = useTranslate();
     const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
+    const pushApiError = usePushApiError();
 
     const fileService = useFileService();
     const fundService = useFundService();
@@ -354,7 +356,7 @@ export default function CSVUpload({
                                     : pushDanger('Onbekende error.');
                             }
 
-                            pushDanger('Onbekende error.');
+                            pushApiError(err, 'Onbekende error.');
                             reject();
                         });
                 };
@@ -372,6 +374,7 @@ export default function CSVUpload({
             showInvalidRows,
             updateProgressBarValue,
             csvFile,
+            pushApiError,
         ],
     );
 
@@ -533,7 +536,7 @@ export default function CSVUpload({
                             : pushDanger('Onbekende error.');
                     }
 
-                    pushDanger('Onbekende error.');
+                    pushApiError(err, 'Onbekende error.');
                 });
         };
 
@@ -549,6 +552,7 @@ export default function CSVUpload({
         pushSuccess,
         showInvalidRows,
         updateProgressBarValue,
+        pushApiError,
     ]);
 
     const onConfirmUpload = useCallback(() => {
diff --git a/react/src/dashboard/components/pages/csv_validations/elements/PrevalidatedTable.tsx b/react/src/dashboard/components/pages/csv_validations/elements/PrevalidatedTable.tsx
index b75007949..3c06b82a0 100644
--- a/react/src/dashboard/components/pages/csv_validations/elements/PrevalidatedTable.tsx
+++ b/react/src/dashboard/components/pages/csv_validations/elements/PrevalidatedTable.tsx
@@ -208,7 +208,7 @@ export default function PrevalidatedTable({
 
     return (
         <div className="card form">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="card-title flex flex-grow">{translate('prevalidated_table.header.title')}</div>
                 <div className="card-header-filters">
                     <div className="block block-inline-filters ">
diff --git a/react/src/dashboard/components/pages/employees/Employees.tsx b/react/src/dashboard/components/pages/employees/Employees.tsx
index 965ced62e..f2091e528 100644
--- a/react/src/dashboard/components/pages/employees/Employees.tsx
+++ b/react/src/dashboard/components/pages/employees/Employees.tsx
@@ -14,11 +14,10 @@ import ModalTransferOrganizationOwnership from '../../modals/ModalTransferOrgani
 import ModalExportTypeLegacy from '../../modals/ModalExportTypeLegacy';
 import { format } from 'date-fns';
 import { useFileService } from '../../../services/FileService';
-import { PaginationData, ResponseError } from '../../../props/ApiResponses';
+import { PaginationData } from '../../../props/ApiResponses';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
 import useAuthIdentity from '../../../hooks/useAuthIdentity';
 import usePushSuccess from '../../../hooks/usePushSuccess';
-import usePushDanger from '../../../hooks/usePushDanger';
 import useOpenModal from '../../../hooks/useOpenModal';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import useEnvData from '../../../hooks/useEnvData';
@@ -41,7 +40,6 @@ export default function Employees() {
 
     const translate = useTranslate();
     const openModal = useOpenModal();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
     const pushApiError = usePushApiError();
@@ -131,19 +129,17 @@ export default function Employees() {
 
     const doExport = useCallback(
         (exportType: string) => {
-            employeeService.export(activeOrganization.id, { ...filter.activeValues, export_type: exportType }).then(
-                (res) => {
+            employeeService
+                .export(activeOrganization.id, { ...filter.activeValues, export_type: exportType })
+                .then((res) => {
                     const dateTime = format(new Date(), 'yyyy-MM-dd HH:mm:ss');
                     const fileName = `${envData.client_type}_${activeOrganization.name}_employees_${dateTime}.${exportType}`;
 
                     fileService.downloadFile(fileName, res.data, res.headers['content-type']);
-                },
-                (res: ResponseError) => {
-                    pushDanger('Mislukt!', res.data.message);
-                },
-            );
+                })
+                .catch(pushApiError);
         },
-        [pushDanger, fileService, filter.activeValues, activeOrganization, employeeService, envData.client_type],
+        [pushApiError, fileService, filter.activeValues, activeOrganization, employeeService, envData.client_type],
     );
 
     const exportEmployees = useCallback(() => {
@@ -195,14 +191,14 @@ export default function Employees() {
                                     pushSuccess('Gelukt!', 'Medewerker verwijderd.');
                                     modal.close();
                                 })
-                                .catch((res: ResponseError) => pushDanger(res.data.message));
+                                .catch(pushApiError);
                         },
                         text: translate('modals.danger_zone.remove_organization_employees.buttons.confirm'),
                     }}
                 />
             ));
         },
-        [openModal, translate, employeeService, activeOrganization.id, filter, pushSuccess, pushDanger],
+        [openModal, translate, employeeService, activeOrganization.id, filter, pushSuccess, pushApiError],
     );
 
     const canEditEmployee = useCallback(
@@ -229,7 +225,7 @@ export default function Employees() {
 
     return (
         <div className="card">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="card-title flex flex-grow">Medewerkers ({employees?.meta.total})</div>
                 <div className="card-header-filters">
                     <div className="block block-inline-filters">
diff --git a/react/src/dashboard/components/pages/extra-payments-view/ExtraPaymentsView.tsx b/react/src/dashboard/components/pages/extra-payments-view/ExtraPaymentsView.tsx
index b6991a81c..ae2d83d7b 100644
--- a/react/src/dashboard/components/pages/extra-payments-view/ExtraPaymentsView.tsx
+++ b/react/src/dashboard/components/pages/extra-payments-view/ExtraPaymentsView.tsx
@@ -1,7 +1,6 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
-import usePushDanger from '../../../hooks/usePushDanger';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import { hasPermission } from '../../../helpers/utils';
 import useSetProgress from '../../../hooks/useSetProgress';
@@ -16,6 +15,7 @@ import ExtraPayment from '../../../props/models/ExtraPayment';
 import ReservationExtraPaymentDetails from '../reservations-view/elements/ReservationExtraPaymentDetails';
 import useTranslate from '../../../hooks/useTranslate';
 import TableEmptyValue from '../../elements/table-empty-value/TableEmptyValue';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function ExtraPaymentsView() {
     const { id } = useParams();
@@ -27,8 +27,8 @@ export default function ExtraPaymentsView() {
     const productReservationService = useProductReservationService();
 
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const [transaction, setTransaction] = useState<Transaction>(null);
     const [extraPayment, setExtraPayment] = useState<ExtraPayment>(null);
@@ -41,10 +41,10 @@ export default function ExtraPaymentsView() {
             transactionService
                 .show(envData.client_type, activeOrganization.id, transaction_address)
                 .then((res) => setTransaction(res.data.data))
-                .catch((res) => pushDanger('Mislukt!', res.data?.message))
+                .catch(pushApiError)
                 .finally(() => setProgress(100));
         },
-        [activeOrganization.id, envData.client_type, pushDanger, setProgress, transactionService],
+        [activeOrganization.id, envData.client_type, pushApiError, setProgress, transactionService],
     );
 
     const fetchExtraPayment = useCallback(
@@ -54,10 +54,10 @@ export default function ExtraPaymentsView() {
             extraPaymentService
                 .read(activeOrganization.id, extra_payment_id)
                 .then((res) => setExtraPayment(res.data.data))
-                .catch((res) => pushDanger('Mislukt!', res.data?.message))
+                .catch(pushApiError)
                 .finally(() => setProgress(100));
         },
-        [activeOrganization.id, extraPaymentService, pushDanger, setProgress],
+        [activeOrganization.id, extraPaymentService, pushApiError, setProgress],
     );
 
     useEffect(() => {
@@ -95,24 +95,28 @@ export default function ExtraPaymentsView() {
 
             <div className="card">
                 <div className="card-header">
-                    <div className="card-title">
-                        <div className="flex-grow">
-                            <span className="text-muted">Product name:&nbsp;</span>
-                            {extraPayment.reservation.product.name}
-                            &nbsp;&nbsp;
+                    <div className="flex flex-vertical">
+                        <div className="card-title">
+                            <div className="flex-grow">
+                                <span className="text-muted">Product name:&nbsp;</span>
+                                {extraPayment.reservation.product.name}
+                                &nbsp;&nbsp;
+                            </div>
+                            <div className="flex-center">
+                                {extraPayment.reservation.expired ? (
+                                    <label className="label label-danger-light">Expired</label>
+                                ) : (
+                                    <label className={`label ${stateClass}`}>
+                                        {extraPayment.reservation.state_locale}
+                                    </label>
+                                )}
+                            </div>
                         </div>
-                        <div className="flex-center">
-                            {extraPayment.reservation.expired ? (
-                                <label className="label label-danger-light">Expired</label>
-                            ) : (
-                                <label className={`label ${stateClass}`}>{extraPayment.reservation.state_locale}</label>
-                            )}
-                        </div>
-                    </div>
-                    <div className="card-subtitle">
-                        <div className="flex">
-                            <div className="mdi mdi-clock-outline" />
-                            {extraPayment.reservation.created_at_locale}
+                        <div className="card-subtitle">
+                            <div className="flex">
+                                <div className="mdi mdi-clock-outline" />
+                                {extraPayment.reservation.created_at_locale}
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/react/src/dashboard/components/pages/extra-payments/ExtraPayments.tsx b/react/src/dashboard/components/pages/extra-payments/ExtraPayments.tsx
index 2cfd4b1e5..ac3690a8c 100644
--- a/react/src/dashboard/components/pages/extra-payments/ExtraPayments.tsx
+++ b/react/src/dashboard/components/pages/extra-payments/ExtraPayments.tsx
@@ -93,7 +93,7 @@ export default function ExtraPayments() {
 
     return (
         <div className="card">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="card-title flex flex-grow">
                     {translate('extra_payments.header.title')} ({extraPayments.meta.total})
                 </div>
diff --git a/react/src/dashboard/components/pages/features/Features.tsx b/react/src/dashboard/components/pages/features/Features.tsx
index 48fecf9d5..6d088acfe 100644
--- a/react/src/dashboard/components/pages/features/Features.tsx
+++ b/react/src/dashboard/components/pages/features/Features.tsx
@@ -156,42 +156,36 @@ export default function Features() {
             </div>
             <div className="card">
                 <div className="card-header">
-                    <div className="flex">
-                        <div className="flex flex-grow">
-                            <div className="card-title">Onze functionaliteiten</div>
-                        </div>
-                        <div className="flex">
-                            <div className="flex-row">
-                                <div className="block block-inline-filters">
-                                    <div className="form">
-                                        <div className="block block-label-tabs">
-                                            <div className="label-tab-set">
-                                                {activeOptions?.map((viewType) => (
-                                                    <div
-                                                        key={viewType.value}
-                                                        className={`label-tab label-tab-sm ${
-                                                            filter.values.state == viewType.value ? 'active' : ''
-                                                        }`}
-                                                        onClick={() => filter.update({ state: viewType.value })}>
-                                                        {viewType.name}
-                                                    </div>
-                                                ))}
+                    <div className="card-title flex flex-grow">Onze functionaliteiten</div>
+                    <div className="card-header-filters">
+                        <div className="block block-inline-filters">
+                            <div className="form">
+                                <div className="block block-label-tabs">
+                                    <div className="label-tab-set">
+                                        {activeOptions?.map((viewType) => (
+                                            <div
+                                                key={viewType.value}
+                                                className={`label-tab label-tab-sm ${
+                                                    filter.values.state == viewType.value ? 'active' : ''
+                                                }`}
+                                                onClick={() => filter.update({ state: viewType.value })}>
+                                                {viewType.name}
                                             </div>
-                                        </div>
-                                    </div>
-                                    <div className="form">
-                                        <div className="form-group">
-                                            <input
-                                                className="form-control"
-                                                type="text"
-                                                value={filter.values.q}
-                                                placeholder={translate('features.labels.search')}
-                                                onChange={(e) => filter.update({ q: e.target.value })}
-                                            />
-                                        </div>
+                                        ))}
                                     </div>
                                 </div>
                             </div>
+                            <div className="form">
+                                <div className="form-group">
+                                    <input
+                                        className="form-control"
+                                        type="text"
+                                        value={filter.values.q}
+                                        placeholder={translate('features.labels.search')}
+                                        onChange={(e) => filter.update({ q: e.target.value })}
+                                    />
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/react/src/dashboard/components/pages/feedback/Feedback.tsx b/react/src/dashboard/components/pages/feedback/Feedback.tsx
index 6bfdeca3f..6c17461c2 100644
--- a/react/src/dashboard/components/pages/feedback/Feedback.tsx
+++ b/react/src/dashboard/components/pages/feedback/Feedback.tsx
@@ -6,11 +6,11 @@ import SelectControl from '../../elements/select-control/SelectControl';
 import SelectControlOptions from '../../elements/select-control/templates/SelectControlOptions';
 import useFeedbackService from '../../../services/FeedbackService';
 import CheckboxControl from '../../elements/forms/controls/CheckboxControl';
-import usePushDanger from '../../../hooks/usePushDanger';
 import useAssetUrl from '../../../hooks/useAssetUrl';
 import { ResponseError } from '../../../props/ApiResponses';
 import useAuthIdentity from '../../../hooks/useAuthIdentity';
 import useTranslate from '../../../hooks/useTranslate';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function Feedback() {
     const envData = useEnvData();
@@ -18,7 +18,7 @@ export default function Feedback() {
 
     const assetUrl = useAssetUrl();
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
+    const pushApiError = usePushApiError();
 
     const feedbackService = useFeedbackService();
 
@@ -48,7 +48,7 @@ export default function Feedback() {
                 .then(() => setState('success'))
                 .catch((err: ResponseError) => {
                     if (err.status == 429) {
-                        pushDanger(err?.data?.message);
+                        pushApiError(err);
                     }
 
                     if (err.status != 422) {
diff --git a/react/src/dashboard/components/pages/financial-dashboard-overview/FinancialDashboardOverview.tsx b/react/src/dashboard/components/pages/financial-dashboard-overview/FinancialDashboardOverview.tsx
index da070827d..f397ed874 100644
--- a/react/src/dashboard/components/pages/financial-dashboard-overview/FinancialDashboardOverview.tsx
+++ b/react/src/dashboard/components/pages/financial-dashboard-overview/FinancialDashboardOverview.tsx
@@ -3,15 +3,14 @@ import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import FinancialOverviewFundsTable from './elements/FinancialOverviewFundsTable';
 import FinancialOverviewFundsBudgetTable from './elements/FinancialOverviewFundsBudgetTable';
 import useTranslate from '../../../hooks/useTranslate';
-import { ResponseError } from '../../../props/ApiResponses';
-import usePushDanger from '../../../hooks/usePushDanger';
 import { useFundService } from '../../../services/FundService';
 import Fund from '../../../props/models/Fund';
 import { FinancialOverview } from '../financial-dashboard/types/FinancialStatisticTypes';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function FinancialDashboardOverview() {
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
+    const pushApiError = usePushApiError();
 
     const fundService = useFundService();
     const activeOrganization = useActiveOrganization();
@@ -32,10 +31,10 @@ export default function FinancialDashboardOverview() {
                 fundService
                     .list(activeOrganization.id, { stats: 'all', per_page: 100, year: year })
                     .then((res) => resolve(res.data.data.filter((fund) => fund.state !== 'waiting')))
-                    .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message)),
+                    .catch(pushApiError),
             );
         },
-        [activeOrganization.id, fundService, pushDanger],
+        [activeOrganization.id, fundService, pushApiError],
     );
 
     const fetchFinancialOverview = useCallback(
@@ -44,10 +43,10 @@ export default function FinancialDashboardOverview() {
                 fundService
                     .financialOverview(activeOrganization.id, { stats: 'all', year })
                     .then((res) => resolve(res.data))
-                    .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message));
+                    .catch(pushApiError);
             });
         },
-        [activeOrganization.id, fundService, pushDanger],
+        [activeOrganization.id, fundService, pushApiError],
     );
 
     return (
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 88565b199..d84085d55 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
@@ -68,7 +68,7 @@ export default function FinancialOverviewFundsBudgetTable({
 
     return (
         <div className="card card-financial">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="card-title flex flex-grow tooltipped">
                     Tegoeden
                     <Tooltip text={'De tegoeden die zijn toegekend via het systeem met de huidige status.'} />
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 b0351921c..9ca4a6331 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
@@ -62,7 +62,7 @@ export default function FinancialOverviewFundsTable({
 
     return (
         <div className="card card-financial form">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="card-title flex flex-grow tooltipped">
                     Saldo en uitgaven
                     <Tooltip text={'Saldo en uitgaven van de gekoppelde bankrekening per fonds.'} />
diff --git a/react/src/dashboard/components/pages/financial-dashboard-overview/hooks/useExportFunds.tsx b/react/src/dashboard/components/pages/financial-dashboard-overview/hooks/useExportFunds.tsx
index 50d133407..da9d1a85c 100644
--- a/react/src/dashboard/components/pages/financial-dashboard-overview/hooks/useExportFunds.tsx
+++ b/react/src/dashboard/components/pages/financial-dashboard-overview/hooks/useExportFunds.tsx
@@ -1,19 +1,18 @@
 import React, { useCallback } from 'react';
 import ModalExportTypeLegacy from '../../../modals/ModalExportTypeLegacy';
 import { format } from 'date-fns';
-import { ResponseError } from '../../../../props/ApiResponses';
 import useOpenModal from '../../../../hooks/useOpenModal';
 import { useFileService } from '../../../../services/FileService';
 import { useFundService } from '../../../../services/FundService';
 import Organization from '../../../../props/models/Organization';
 import useEnvData from '../../../../hooks/useEnvData';
-import usePushDanger from '../../../../hooks/usePushDanger';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 export default function useExportFunds(organization: Organization) {
     const envData = useEnvData();
 
     const openModal = useOpenModal();
-    const pushDanger = usePushDanger();
+    const pushApiError = usePushApiError();
 
     const fileService = useFileService();
     const fundService = useFundService();
@@ -34,9 +33,9 @@ export default function useExportFunds(organization: Organization) {
 
                     fileService.downloadFile(fileName, res.data, fileType);
                 })
-                .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message));
+                .catch(pushApiError);
         },
-        [fundService, organization.id, organization.name, envData.client_type, fileService, pushDanger],
+        [fundService, organization.id, organization.name, envData.client_type, fileService, pushApiError],
     );
 
     return useCallback(
diff --git a/react/src/dashboard/components/pages/financial-dashboard/FinancialDashboard.tsx b/react/src/dashboard/components/pages/financial-dashboard/FinancialDashboard.tsx
index 7f87535ca..6f417d6f9 100644
--- a/react/src/dashboard/components/pages/financial-dashboard/FinancialDashboard.tsx
+++ b/react/src/dashboard/components/pages/financial-dashboard/FinancialDashboard.tsx
@@ -8,16 +8,15 @@ import FinancialFilters, { FinancialFiltersQuery } from './elements/FinancialFil
 import { useFundService } from '../../../services/FundService';
 import useSetProgress from '../../../hooks/useSetProgress';
 import { ProviderFinancialStatistics, ProviderFinancialFilterOptions } from './types/FinancialStatisticTypes';
-import usePushDanger from '../../../hooks/usePushDanger';
-import { ResponseError } from '../../../props/ApiResponses';
 import useTranslate from '../../../hooks/useTranslate';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function FinancialDashboard() {
     const activeOrganization = useActiveOrganization();
 
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const fundService = useFundService();
 
@@ -33,17 +32,17 @@ export default function FinancialDashboard() {
             fundService
                 .readFinances(activeOrganization.id, externalFilters)
                 .then((res) => setChartData(res.data))
-                .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message))
+                .catch(pushApiError)
                 .finally(() => setProgress(100));
         }
-    }, [activeOrganization.id, fundService, externalFilters, setProgress, pushDanger]);
+    }, [activeOrganization.id, fundService, externalFilters, setProgress, pushApiError]);
 
     useEffect(() => {
         fundService
             .readFinances(activeOrganization.id, { filters: 1 })
             .then((res) => setOptions(res.data.filters))
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message));
-    }, [activeOrganization.id, fundService, pushDanger]);
+            .catch(pushApiError);
+    }, [activeOrganization.id, fundService, pushApiError]);
 
     if (!options) {
         return <LoadingCard />;
diff --git a/react/src/dashboard/components/pages/financial-dashboard/elements/FinancialChart.tsx b/react/src/dashboard/components/pages/financial-dashboard/elements/FinancialChart.tsx
index da53d45ca..7bd974c5c 100644
--- a/react/src/dashboard/components/pages/financial-dashboard/elements/FinancialChart.tsx
+++ b/react/src/dashboard/components/pages/financial-dashboard/elements/FinancialChart.tsx
@@ -65,10 +65,8 @@ export default function FinancialChart({ chartData }: { chartData: ProviderFinan
 
     return (
         <div className="card">
-            <div className="card-header flex">
-                <div className="flex flex-grow">
-                    <div className="card-title">Grafiek</div>
-                </div>
+            <div className="card-header">
+                <div className="card-title flex flex-grow">Grafiek</div>
                 <div className="flex block block-label-tabs">
                     <div
                         className={`label-tab ${field === 'amount' ? 'active' : ''}`}
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 291d4c96d..de4dff124 100644
--- a/react/src/dashboard/components/pages/financial-dashboard/elements/ProviderFinancialTable.tsx
+++ b/react/src/dashboard/components/pages/financial-dashboard/elements/ProviderFinancialTable.tsx
@@ -8,19 +8,19 @@ import useActiveOrganization from '../../../../hooks/useActiveOrganization';
 import { useOrganizationService } from '../../../../services/OrganizationService';
 import LoadingCard from '../../../elements/loading-card/LoadingCard';
 import { uniqueId } from 'lodash';
-import { PaginationData, ResponseError } from '../../../../props/ApiResponses';
+import { PaginationData } from '../../../../props/ApiResponses';
 import { format } from 'date-fns';
 import { useFileService } from '../../../../services/FileService';
-import usePushDanger from '../../../../hooks/usePushDanger';
 import { FinancialFiltersQuery } from './FinancialFilters';
 import { ProviderFinancial } from '../types/FinancialStatisticTypes';
 import EmptyCard from '../../../elements/empty-card/EmptyCard';
 import TableTopScroller from '../../../elements/tables/TableTopScroller';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 type ProviderFinancialLocal = ProviderFinancial & { id: string };
 
 export default function ProviderFinancialTable({ externalFilters }: { externalFilters?: FinancialFiltersQuery }) {
-    const pushDanger = usePushDanger();
+    const pushApiError = usePushApiError();
     const activeOrganization = useActiveOrganization();
 
     const fileService = useFileService();
@@ -46,7 +46,7 @@ export default function ProviderFinancialTable({ externalFilters }: { externalFi
 
                 fileService.downloadFile(fileName, res.data, fileType);
             })
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message));
+            .catch(pushApiError);
     }, [
         organizationService,
         activeOrganization.id,
@@ -54,7 +54,7 @@ export default function ProviderFinancialTable({ externalFilters }: { externalFi
         externalFilters,
         filter?.activeValues,
         fileService,
-        pushDanger,
+        pushApiError,
     ]);
 
     const toggleTransactionsTable = useCallback((id: string) => {
@@ -80,8 +80,8 @@ export default function ProviderFinancialTable({ externalFilters }: { externalFi
                     data: res.data.data.map((provider) => ({ id: uniqueId(), ...provider })),
                 });
             })
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message));
-    }, [organizationService, activeOrganization?.id, filter?.activeValues, externalFilters, pushDanger]);
+            .catch(pushApiError);
+    }, [organizationService, activeOrganization?.id, filter?.activeValues, externalFilters, pushApiError]);
 
     useEffect(() => fetchProviderFinances(), [fetchProviderFinances]);
 
@@ -94,11 +94,10 @@ export default function ProviderFinancialTable({ externalFilters }: { externalFi
             {providersFinances.data.length > 0 && (
                 <div className="card">
                     <div className="card-header">
-                        <div className="flex-row">
-                            <div className="flex-col flex-grow">
-                                <div className="card-title">Aanbieders</div>
-                            </div>
-                            <div className="flex-col">
+                        <div className="flex flex-grow card-title">Aanbieders</div>
+
+                        <div className="card-header-filters">
+                            <div className="block block-inline-filters">
                                 <button className="button button-primary" onClick={() => financeProvidersExport()}>
                                     <em className="mdi mdi-download icon-start" />
                                     <span>Exporteren</span>
diff --git a/react/src/dashboard/components/pages/financial-dashboard/elements/ProviderFinancialTablesTransactions.tsx b/react/src/dashboard/components/pages/financial-dashboard/elements/ProviderFinancialTablesTransactions.tsx
index c15bbde60..1df3b6dd3 100644
--- a/react/src/dashboard/components/pages/financial-dashboard/elements/ProviderFinancialTablesTransactions.tsx
+++ b/react/src/dashboard/components/pages/financial-dashboard/elements/ProviderFinancialTablesTransactions.tsx
@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import ThSortable from '../../../elements/tables/ThSortable';
 import { strLimit } from '../../../../helpers/string';
 import Transaction from '../../../../props/models/Transaction';
-import { PaginationData, ResponseError } from '../../../../props/ApiResponses';
+import { PaginationData } from '../../../../props/ApiResponses';
 import Paginator from '../../../../modules/paginator/components/Paginator';
 import { useNavigateState } from '../../../../modules/state_router/Router';
 import useEnvData from '../../../../hooks/useEnvData';
@@ -12,10 +12,10 @@ import Organization from '../../../../props/models/Organization';
 import LoadingCard from '../../../elements/loading-card/LoadingCard';
 import useTransactionService from '../../../../services/TransactionService';
 import useSetProgress from '../../../../hooks/useSetProgress';
-import usePushDanger from '../../../../hooks/usePushDanger';
 import EmptyCard from '../../../elements/empty-card/EmptyCard';
 import useTranslate from '../../../../hooks/useTranslate';
 import TableTopScroller from '../../../elements/tables/TableTopScroller';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 export default function ProviderFinancialTablesTransactions({
     provider,
@@ -29,8 +29,8 @@ export default function ProviderFinancialTablesTransactions({
     const envData = useEnvData();
 
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const navigateState = useNavigateState();
 
     const paginatorService = usePaginatorService();
@@ -66,7 +66,7 @@ export default function ProviderFinancialTablesTransactions({
         transactionService
             .list(panelType, organization.id, { ...externalFilters, ...filter.activeValues })
             .then((res) => setTransactions(res.data))
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
     }, [
         setProgress,
@@ -75,7 +75,7 @@ export default function ProviderFinancialTablesTransactions({
         organization.id,
         filter?.activeValues,
         externalFilters,
-        pushDanger,
+        pushApiError,
     ]);
 
     useEffect(() => {
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 59b9bd40b..c82159d0e 100644
--- a/react/src/dashboard/components/pages/fund-backoffice-edit/FundBackofficeEdit.tsx
+++ b/react/src/dashboard/components/pages/fund-backoffice-edit/FundBackofficeEdit.tsx
@@ -15,6 +15,7 @@ import Tooltip from '../../elements/tooltip/Tooltip';
 import SelectControlOptions from '../../elements/select-control/templates/SelectControlOptions';
 import SelectControl from '../../elements/select-control/SelectControl';
 import useTranslate from '../../../hooks/useTranslate';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function FundBackofficeEdit() {
     const { fundId } = useParams();
@@ -24,6 +25,7 @@ export default function FundBackofficeEdit() {
     const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const fundService = useFundService();
 
@@ -96,7 +98,7 @@ export default function FundBackofficeEdit() {
                 })
                 .catch((err: ResponseError) => {
                     form.setErrors(err.data.errors);
-                    pushDanger('Mislukt!', err.data.message);
+                    pushApiError(err);
                 })
                 .finally(() => {
                     form.setIsLocked(false);
@@ -151,8 +153,8 @@ export default function FundBackofficeEdit() {
                     );
                 }
             })
-            .catch((res: ResponseError) => pushDanger('Mislukt!', res.data.message));
-    }, [fundService, activeOrganization.id, fundId, pushSuccess, pushDanger]);
+            .catch(pushApiError);
+    }, [fundService, activeOrganization.id, fundId, pushSuccess, pushDanger, pushApiError]);
 
     const fetchImplementation = useCallback(() => {
         setProgress(0);
@@ -160,9 +162,9 @@ export default function FundBackofficeEdit() {
         fundService
             .read(activeOrganization.id, parseInt(fundId))
             .then((res) => setFund(res.data.data))
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [setProgress, fundService, activeOrganization.id, fundId, pushDanger]);
+    }, [setProgress, fundService, activeOrganization.id, fundId, pushApiError]);
 
     useEffect(() => {
         fetchImplementation();
@@ -208,13 +210,11 @@ export default function FundBackofficeEdit() {
 
             <div className="card">
                 <form className="form" onSubmit={form.submit}>
-                    <div className="card-header form">
-                        <div className="flex-row">
-                            <div className="flex flex-grow">
-                                <div className="card-title">Backoffice integratie</div>
-                            </div>
+                    <div className="card-header">
+                        <div className="flex flex-grow card-title">Backoffice integratie</div>
 
-                            <div className="flex">
+                        <div className="card-header-filters">
+                            <div className="block block-inline-filters">
                                 <div className="form-group">
                                     {isDirty && (
                                         <div className="button button-text button-sm button-disabled button-disabled-visible">
diff --git a/react/src/dashboard/components/pages/fund-provider-product-subsidy-edit/FundProviderProductSubsidyEdit.tsx b/react/src/dashboard/components/pages/fund-provider-product-subsidy-edit/FundProviderProductSubsidyEdit.tsx
index d7e3d3683..f608351b0 100644
--- a/react/src/dashboard/components/pages/fund-provider-product-subsidy-edit/FundProviderProductSubsidyEdit.tsx
+++ b/react/src/dashboard/components/pages/fund-provider-product-subsidy-edit/FundProviderProductSubsidyEdit.tsx
@@ -4,10 +4,8 @@ import { useParams } from 'react-router-dom';
 import SponsorProduct, { DealHistory } from '../../../props/models/Sponsor/SponsorProduct';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
-import { ResponseError } from '../../../props/ApiResponses';
 import { useNavigateState } from '../../../modules/state_router/Router';
 import usePushSuccess from '../../../hooks/usePushSuccess';
-import usePushDanger from '../../../hooks/usePushDanger';
 import { currencyFormat, strLimit } from '../../../helpers/string';
 import Tooltip from '../../elements/tooltip/Tooltip';
 import useSetProgress from '../../../hooks/useSetProgress';
@@ -17,15 +15,16 @@ import FundProvider from '../../../props/models/FundProvider';
 import { NumberParam, useQueryParam } from 'use-query-params';
 import FundProviderProductEditor from '../fund-provider-product-view/elements/FundProviderProductEditor';
 import useTranslate from '../../../hooks/useTranslate';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function FundProviderProductSubsidyEdit() {
     const { id, fundId, fundProviderId } = useParams();
     const activeOrganization = useActiveOrganization();
 
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const navigateState = useNavigateState();
 
     const fundService = useFundService();
@@ -45,9 +44,9 @@ export default function FundProviderProductSubsidyEdit() {
         fundService
             .getProviderProduct(activeOrganization.id, parseInt(fundId), parseInt(fundProviderId), parseInt(id))
             .then((res) => setProduct(res.data.data))
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [fundService, activeOrganization.id, fundId, fundProviderId, id, pushDanger, setProgress]);
+    }, [fundService, activeOrganization.id, fundId, fundProviderId, id, pushApiError, setProgress]);
 
     const onCancel = useCallback(() => {
         navigateState('fund-provider-product', {
@@ -78,9 +77,9 @@ export default function FundProviderProductSubsidyEdit() {
         fundService
             .readProvider(activeOrganization.id, parseInt(fundId), parseInt(fundProviderId))
             .then((res) => setFundProvider(res.data.data))
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [setProgress, fundService, activeOrganization.id, fundId, fundProviderId, pushDanger]);
+    }, [setProgress, fundService, activeOrganization.id, fundId, fundProviderId, pushApiError]);
 
     const fetchFund = useCallback(() => {
         setProgress(0);
@@ -88,9 +87,9 @@ export default function FundProviderProductSubsidyEdit() {
         fundService
             .readPublic(parseInt(fundId))
             .then((res) => setFund(res.data.data))
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data?.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [fundId, fundService, pushDanger, setProgress]);
+    }, [fundId, fundService, pushApiError, setProgress]);
 
     useEffect(() => {
         fetchFund();
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 36a674830..f98b89fcd 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
@@ -4,11 +4,9 @@ import { useParams } from 'react-router-dom';
 import SponsorProduct, { DealHistory } from '../../../props/models/Sponsor/SponsorProduct';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
-import { ResponseError } from '../../../props/ApiResponses';
 import FundProviderChat from '../../../props/models/FundProviderChat';
 import useOpenModal from '../../../hooks/useOpenModal';
 import usePushSuccess from '../../../hooks/usePushSuccess';
-import usePushDanger from '../../../hooks/usePushDanger';
 import { strLimit } from '../../../helpers/string';
 import Tooltip from '../../elements/tooltip/Tooltip';
 import FundProviderProductEditor from './elements/FundProviderProductEditor';
@@ -24,15 +22,16 @@ import ModalFundProviderChatMessage from '../../modals/ModalFundProviderChatMess
 import useTranslate from '../../../hooks/useTranslate';
 import ProductDetailsBlock from '../products-view/elements/ProductDetailsBlock';
 import ToggleControl from '../../elements/forms/controls/ToggleControl';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function FundProviderProductView() {
     const { id, fundId, fundProviderId } = useParams();
 
     const translate = useTranslate();
     const openModal = useOpenModal();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const activeOrganization = useActiveOrganization();
     const { updateProduct, disableProduct } = useUpdateProduct();
 
@@ -101,10 +100,10 @@ export default function FundProviderProductView() {
             );
 
             return setProduct(res.data.data);
-        } catch (res) {
-            return pushDanger('Mislukt!', res.data.message);
+        } catch (err) {
+            return pushApiError(err);
         }
-    }, [fundService, activeOrganization.id, fundId, fundProviderId, id, pushDanger]);
+    }, [fundService, activeOrganization.id, fundId, fundProviderId, id, pushApiError]);
 
     const resetLimits = useCallback(
         (deal: DealHistory) => {
@@ -128,15 +127,15 @@ export default function FundProviderProductView() {
                         setFundProvider(res.data.data);
                         fetchProduct().then(() => pushSuccess('De limieten zijn hersteld.'));
                     })
-                    .catch((err: ResponseError) => pushDanger('Foutmelding!', err.data.message))
+                    .catch(pushApiError)
                     .finally(() => setDeal(null));
             });
         },
         [
             fund?.id,
-            pushDanger,
             pushSuccess,
             fundService,
+            pushApiError,
             fetchProduct,
             fundProvider?.id,
             confirmDangerAction,
@@ -180,9 +179,9 @@ export default function FundProviderProductView() {
                 product_id: parseInt(id),
             })
             .then((res) => setFundProviderProductChat(res.data.data[0] || null))
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [fundProviderChatService, activeOrganization.id, fundId, fundProviderId, id, pushDanger, setProgress]);
+    }, [fundProviderChatService, activeOrganization.id, fundId, fundProviderId, id, pushApiError, setProgress]);
 
     const showTheChat = useCallback(() => {
         if (!fundProviderProductChat) {
@@ -227,9 +226,9 @@ export default function FundProviderProductView() {
         fundService
             .readProvider(activeOrganization.id, parseInt(fundId), parseInt(fundProviderId))
             .then((res) => setFundProvider(res.data.data))
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [setProgress, fundService, activeOrganization.id, fundId, fundProviderId, pushDanger]);
+    }, [setProgress, fundService, activeOrganization.id, fundId, fundProviderId, pushApiError]);
 
     const fetchFund = useCallback(() => {
         setProgress(0);
@@ -237,9 +236,9 @@ export default function FundProviderProductView() {
         fundService
             .readPublic(parseInt(fundId))
             .then((res) => setFund(res.data.data))
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data?.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [fundId, fundService, pushDanger, setProgress]);
+    }, [fundId, fundService, pushApiError, setProgress]);
 
     useEffect(() => {
         fetchFund();
@@ -464,9 +463,7 @@ export default function FundProviderProductView() {
                 (fund.type == 'subsidies' || showHistory || productHasLimits) && (
                     <div className="card">
                         <div className="card-header">
-                            <div className="card-title">
-                                <div className="ellipsis">{`Lopende en verlopen acties op ${product.name}`}</div>
-                            </div>
+                            <div className="card-title">{`Lopende en verlopen acties op: ${product.name}`}</div>
                         </div>
                         <div className="card-section card-section-padless">
                             <div className="table-wrapper">
diff --git a/react/src/dashboard/components/pages/fund-provider-product-view/elements/FundProviderProductEditor.tsx b/react/src/dashboard/components/pages/fund-provider-product-view/elements/FundProviderProductEditor.tsx
index db166996b..b7b683357 100644
--- a/react/src/dashboard/components/pages/fund-provider-product-view/elements/FundProviderProductEditor.tsx
+++ b/react/src/dashboard/components/pages/fund-provider-product-view/elements/FundProviderProductEditor.tsx
@@ -106,22 +106,18 @@ export default function FundProviderProductEditor({
         <div className="card">
             <form className="form" onSubmit={form.submit}>
                 <div className="card-header">
-                    <div className="flex flex-horizontal">
-                        <div className="flex flex-grow">
-                            <div className="card-title">Subsidie starten</div>
-                        </div>
+                    <div className="flex flex-grow card-title">Subsidie starten</div>
 
-                        {deal?.active && onReset && (
-                            <div className="flex">
-                                <div className="block block-inline-filters">
-                                    <button className="button button-text" type="button" onClick={() => onReset(deal)}>
-                                        <div className="mdi mdi-trash-can-outline icon-start" />
-                                        Remove restriction
-                                    </button>
-                                </div>
+                    {deal?.active && onReset && (
+                        <div className="card-header-filters">
+                            <div className="block block-inline-filters">
+                                <button className="button button-danger" type="button" onClick={() => onReset(deal)}>
+                                    <div className="mdi mdi-trash-can-outline icon-start" />
+                                    Beperking verwijderen
+                                </button>
                             </div>
-                        )}
-                    </div>
+                        </div>
+                    )}
                 </div>
                 <div className="card-section card-section-primary form">
                     <div className="row">
diff --git a/react/src/dashboard/components/pages/fund-provider/FundProvider.tsx b/react/src/dashboard/components/pages/fund-provider/FundProvider.tsx
index b1f63f2b1..dccd979a2 100644
--- a/react/src/dashboard/components/pages/fund-provider/FundProvider.tsx
+++ b/react/src/dashboard/components/pages/fund-provider/FundProvider.tsx
@@ -1,8 +1,6 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
-import { ResponseError } from '../../../props/ApiResponses';
 import { useParams } from 'react-router-dom';
-import usePushDanger from '../../../hooks/usePushDanger';
 import useSetProgress from '../../../hooks/useSetProgress';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
@@ -18,14 +16,15 @@ import SubsidyFundProducts from './elements/SubsidyFundProducts';
 import Fund from '../../../props/models/Fund';
 import useTranslate from '../../../hooks/useTranslate';
 import ToggleControl from '../../elements/forms/controls/ToggleControl';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function FundProvider() {
     const { fundId, id } = useParams();
 
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const activeOrganization = useActiveOrganization();
 
     const fundService = useFundService();
@@ -44,10 +43,10 @@ export default function FundProvider() {
                     pushSuccess('Opgeslagen!');
                     setFundProvider(res.data.data);
                 })
-                .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message))
+                .catch(pushApiError)
                 .finally(() => setSubmittingAllow(false));
         },
-        [fundProvider, fundService, pushDanger, pushSuccess],
+        [fundProvider, fundService, pushApiError, pushSuccess],
     );
 
     const fetchFundProvider = useCallback(() => {
@@ -56,9 +55,9 @@ export default function FundProvider() {
         fundService
             .readProvider(activeOrganization.id, parseInt(fundId), parseInt(id))
             .then((res) => setFundProvider(res.data.data))
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [setProgress, fundService, activeOrganization.id, fundId, id, pushDanger]);
+    }, [setProgress, fundService, activeOrganization.id, fundId, id, pushApiError]);
 
     const fetchFund = useCallback(() => {
         setProgress(0);
@@ -66,9 +65,9 @@ export default function FundProvider() {
         fundService
             .readPublic(parseInt(fundId))
             .then((res) => setFund(res.data.data))
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data?.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [fundId, fundService, pushDanger, setProgress]);
+    }, [fundId, fundService, pushApiError, setProgress]);
 
     useEffect(() => {
         fetchFund();
diff --git a/react/src/dashboard/components/pages/fund-provider/elements/BudgetFundProducts.tsx b/react/src/dashboard/components/pages/fund-provider/elements/BudgetFundProducts.tsx
index 1567cc48b..81ed43b3f 100644
--- a/react/src/dashboard/components/pages/fund-provider/elements/BudgetFundProducts.tsx
+++ b/react/src/dashboard/components/pages/fund-provider/elements/BudgetFundProducts.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { PaginationData, ResponseError } from '../../../../props/ApiResponses';
-import usePushDanger from '../../../../hooks/usePushDanger';
+import { PaginationData } from '../../../../props/ApiResponses';
 import FundProvider from '../../../../props/models/FundProvider';
 import Organization from '../../../../props/models/Organization';
 import useFilter from '../../../../hooks/useFilter';
@@ -14,6 +13,7 @@ import useAssetUrl from '../../../../hooks/useAssetUrl';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import EmptyCard from '../../../elements/empty-card/EmptyCard';
 import SponsorProduct from '../../../../props/models/Sponsor/SponsorProduct';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 type ProductLocal = SponsorProduct & {
     allowed: boolean;
@@ -29,8 +29,8 @@ export default function BudgetFundProducts({
     onChange: (data: FundProvider) => void;
 }) {
     const assetUrl = useAssetUrl();
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const { updateProduct } = useUpdateProduct();
 
     const fundService = useFundService();
@@ -78,9 +78,9 @@ export default function BudgetFundProducts({
                     data: res.data.data.map((product) => mapProduct(product)),
                 }),
             )
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [setProgress, fundService, fundProvider, filter.activeValues, mapProduct, pushDanger]);
+    }, [setProgress, fundService, fundProvider, filter.activeValues, mapProduct, pushApiError]);
 
     useEffect(() => fetchProducts(), [fetchProducts]);
 
@@ -89,26 +89,18 @@ export default function BudgetFundProducts({
     }
 
     return (
-        <div className="card">
+        <div className="card form">
             <div className="card-header">
-                <div className="flex-row">
-                    <div className="flex-col">
-                        <div className="card-title">Aanbod in beheer {fundProvider.organization.name}</div>
-                    </div>
-                    <div className="flex-col">
-                        <div className="card-header-drown">
-                            <div className="block block-inline-filters">
-                                <div className="form">
-                                    <div className="form-group">
-                                        <input
-                                            className="form-control"
-                                            value={filter.values.q}
-                                            onChange={(e) => filter.update({ q: e.target.value })}
-                                            placeholder="Zoeken"
-                                        />
-                                    </div>
-                                </div>
-                            </div>
+                <div className="flex flex-grow card-title">Aanbod in beheer {fundProvider.organization.name}</div>
+                <div className="card-header-filters">
+                    <div className="block block-inline-filters">
+                        <div className="form-group">
+                            <input
+                                className="form-control"
+                                value={filter.values.q}
+                                onChange={(e) => filter.update({ q: e.target.value })}
+                                placeholder="Zoeken"
+                            />
                         </div>
                     </div>
                 </div>
diff --git a/react/src/dashboard/components/pages/fund-provider/elements/BudgetFundSponsorProducts.tsx b/react/src/dashboard/components/pages/fund-provider/elements/BudgetFundSponsorProducts.tsx
index 097bf64c4..fd519c5e7 100644
--- a/react/src/dashboard/components/pages/fund-provider/elements/BudgetFundSponsorProducts.tsx
+++ b/react/src/dashboard/components/pages/fund-provider/elements/BudgetFundSponsorProducts.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { PaginationData, ResponseError } from '../../../../props/ApiResponses';
-import usePushDanger from '../../../../hooks/usePushDanger';
+import { PaginationData } from '../../../../props/ApiResponses';
 import FundProvider from '../../../../props/models/FundProvider';
 import Organization from '../../../../props/models/Organization';
 import useFilter from '../../../../hooks/useFilter';
@@ -13,6 +12,7 @@ import useUpdateProduct from '../hooks/useUpdateProduct';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import EmptyCard from '../../../elements/empty-card/EmptyCard';
 import SponsorProduct from '../../../../props/models/Sponsor/SponsorProduct';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 type ProductLocal = SponsorProduct & {
     allowed: boolean;
@@ -27,8 +27,8 @@ export default function BudgetFundSponsorProducts({
     organization: Organization;
     onChange: (data: FundProvider) => void;
 }) {
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const { updateProduct, deleteProduct } = useUpdateProduct();
 
     const organizationService = useOrganizationService();
@@ -71,12 +71,12 @@ export default function BudgetFundSponsorProducts({
                     data: res.data.data.map((product) => mapProduct(product)),
                 }),
             )
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
     }, [
         mapProduct,
-        pushDanger,
         setProgress,
+        pushApiError,
         organization.id,
         filter.activeValues,
         organizationService,
@@ -97,11 +97,12 @@ export default function BudgetFundSponsorProducts({
     }
 
     return (
-        <div className="card">
+        <div className="card form">
             <div className="card-header">
-                <div className="row">
-                    <div className="col-lg-8 flex">
-                        <div className="card-title">Aanbod in beheer van {organization.name}</div>
+                <div className="fle flex-grow card-title">Aanbod in beheer van {organization.name}</div>
+
+                <div className="card-header-filters">
+                    <div className="block block-inline-filters">
                         <StateNavLink
                             name={'fund-provider-product-create'}
                             params={{
@@ -109,25 +110,17 @@ export default function BudgetFundSponsorProducts({
                                 fundProviderId: fundProvider.id,
                                 organizationId: organization.id,
                             }}
-                            className="button button-text button-text button-text-muted">
+                            className="button button-primary">
                             <em className="mdi mdi-plus-circle icon-start" />
                             Voeg een aanbod toe
                         </StateNavLink>
-                    </div>
-                    <div className="col-lg-4">
-                        <div className="card-header-drown">
-                            <div className="block block-inline-filters">
-                                <div className="form">
-                                    <div className="form-group">
-                                        <input
-                                            className="form-control"
-                                            value={filter.values.q}
-                                            onChange={(e) => filter.update({ q: e.target.value })}
-                                            placeholder="Zoeken"
-                                        />
-                                    </div>
-                                </div>
-                            </div>
+                        <div className="form-group">
+                            <input
+                                className="form-control"
+                                value={filter.values.q}
+                                onChange={(e) => filter.update({ q: e.target.value })}
+                                placeholder="Zoeken"
+                            />
                         </div>
                     </div>
                 </div>
diff --git a/react/src/dashboard/components/pages/fund-provider/elements/SubsidyFundProducts.tsx b/react/src/dashboard/components/pages/fund-provider/elements/SubsidyFundProducts.tsx
index 0f2e7a12a..d42ca6829 100644
--- a/react/src/dashboard/components/pages/fund-provider/elements/SubsidyFundProducts.tsx
+++ b/react/src/dashboard/components/pages/fund-provider/elements/SubsidyFundProducts.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { PaginationData, ResponseError } from '../../../../props/ApiResponses';
-import usePushDanger from '../../../../hooks/usePushDanger';
+import { PaginationData } from '../../../../props/ApiResponses';
 import FundProvider from '../../../../props/models/FundProvider';
 import Organization from '../../../../props/models/Organization';
 import useFilter from '../../../../hooks/useFilter';
@@ -13,6 +12,7 @@ import TableRowActions from '../../../elements/tables/TableRowActions';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import EmptyCard from '../../../elements/empty-card/EmptyCard';
 import SponsorProduct, { DealHistory } from '../../../../props/models/Sponsor/SponsorProduct';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 type ProductLocal = SponsorProduct & {
     allowed: boolean;
@@ -28,8 +28,8 @@ export default function SubsidyFundProducts({
     organization: Organization;
     onChange: (data: FundProvider) => void;
 }) {
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const { disableProduct } = useUpdateProduct();
 
     const fundService = useFundService();
@@ -74,9 +74,9 @@ export default function SubsidyFundProducts({
                     data: res.data.data.map((product) => mapProduct(product)),
                 }),
             )
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [setProgress, fundService, fundProvider, filter.activeValues, mapProduct, pushDanger]);
+    }, [setProgress, fundService, fundProvider, filter.activeValues, mapProduct, pushApiError]);
 
     useEffect(() => fetchProducts(), [fetchProducts]);
 
@@ -85,26 +85,19 @@ export default function SubsidyFundProducts({
     }
 
     return (
-        <div className="card">
+        <div className="card form">
             <div className="card-header">
-                <div className="flex-row">
-                    <div className="flex-col">
-                        <div className="card-title">Aanbod in beheer van {fundProvider.organization.name}</div>
-                    </div>
-                    <div className="flex-col">
-                        <div className="card-header-drown">
-                            <div className="block block-inline-filters">
-                                <div className="form">
-                                    <div className="form-group">
-                                        <input
-                                            className="form-control"
-                                            value={filter.values.q}
-                                            onChange={(e) => filter.update({ q: e.target.value })}
-                                            placeholder="Zoeken"
-                                        />
-                                    </div>
-                                </div>
-                            </div>
+                <div className="flex flex-grow card-title">Aanbod in beheer van {fundProvider.organization.name}</div>
+
+                <div className="card-header-filters">
+                    <div className="block block-inline-filters">
+                        <div className="form-group">
+                            <input
+                                className="form-control"
+                                value={filter.values.q}
+                                onChange={(e) => filter.update({ q: e.target.value })}
+                                placeholder="Zoeken"
+                            />
                         </div>
                     </div>
                 </div>
diff --git a/react/src/dashboard/components/pages/fund-provider/elements/SubsidyFundSponsorProducts.tsx b/react/src/dashboard/components/pages/fund-provider/elements/SubsidyFundSponsorProducts.tsx
index f21240395..c5ea540b5 100644
--- a/react/src/dashboard/components/pages/fund-provider/elements/SubsidyFundSponsorProducts.tsx
+++ b/react/src/dashboard/components/pages/fund-provider/elements/SubsidyFundSponsorProducts.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { PaginationData, ResponseError } from '../../../../props/ApiResponses';
-import usePushDanger from '../../../../hooks/usePushDanger';
+import { PaginationData } from '../../../../props/ApiResponses';
 import FundProvider from '../../../../props/models/FundProvider';
 import Organization from '../../../../props/models/Organization';
 import useFilter from '../../../../hooks/useFilter';
@@ -14,6 +13,7 @@ import useAssetUrl from '../../../../hooks/useAssetUrl';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import EmptyCard from '../../../elements/empty-card/EmptyCard';
 import SponsorProduct, { DealHistory } from '../../../../props/models/Sponsor/SponsorProduct';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 type ProductLocal = SponsorProduct & {
     allowed: boolean;
@@ -30,8 +30,8 @@ export default function SubsidyFundSponsorProducts({
     onChange: (data: FundProvider) => void;
 }) {
     const assetUrl = useAssetUrl();
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const { disableProduct, deleteProduct } = useUpdateProduct();
 
@@ -72,12 +72,12 @@ export default function SubsidyFundSponsorProducts({
                     data: res.data.data.map((product) => mapProduct(product)),
                 }),
             )
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
     }, [
         mapProduct,
-        pushDanger,
         setProgress,
+        pushApiError,
         organization.id,
         organizationService,
         filter.activeValues,
@@ -98,12 +98,12 @@ export default function SubsidyFundSponsorProducts({
     }
 
     return (
-        <div className="card">
+        <div className="card form">
             <div className="card-header">
-                <div className="row">
-                    <div className="col-lg-8 flex">
-                        <div className="card-title">Aanbod in beheer van {organization.name}</div>
+                <div className="fle flex-grow card-title">Aanbod in beheer van {organization.name}</div>
 
+                <div className="card-header-filters">
+                    <div className="block block-inline-filters">
                         <StateNavLink
                             name={'fund-provider-product-create'}
                             params={{
@@ -111,25 +111,17 @@ export default function SubsidyFundSponsorProducts({
                                 fundProviderId: fundProvider.id,
                                 organizationId: organization.id,
                             }}
-                            className="button button-text button-text button-text-muted">
+                            className="button button-primary">
                             <em className="mdi mdi-plus-circle icon-start" />
                             Voeg een aanbod toe
                         </StateNavLink>
-                    </div>
-                    <div className="col-lg-4">
-                        <div className="card-header-drown">
-                            <div className="block block-inline-filters">
-                                <div className="form">
-                                    <div className="form-group">
-                                        <input
-                                            className="form-control"
-                                            value={filter.values.q || ''}
-                                            onChange={(e) => filter.update({ q: e.target.value })}
-                                            placeholder="Zoeken"
-                                        />
-                                    </div>
-                                </div>
-                            </div>
+                        <div className="form-group">
+                            <input
+                                className="form-control"
+                                value={filter.values.q || ''}
+                                onChange={(e) => filter.update({ q: e.target.value })}
+                                placeholder="Zoeken"
+                            />
                         </div>
                     </div>
                 </div>
diff --git a/react/src/dashboard/components/pages/fund-provider/hooks/useUpdateProduct.tsx b/react/src/dashboard/components/pages/fund-provider/hooks/useUpdateProduct.tsx
index b463fb0dc..d9e7621fc 100644
--- a/react/src/dashboard/components/pages/fund-provider/hooks/useUpdateProduct.tsx
+++ b/react/src/dashboard/components/pages/fund-provider/hooks/useUpdateProduct.tsx
@@ -1,6 +1,5 @@
 import React, { useCallback } from 'react';
 import { ApiResponseSingle, ResponseError } from '../../../../props/ApiResponses';
-import usePushDanger from '../../../../hooks/usePushDanger';
 import { useFundService } from '../../../../services/FundService';
 import FundProvider from '../../../../props/models/FundProvider';
 import useStopActionConfirmation from './useStopActionConfirmation';
@@ -11,13 +10,14 @@ import useOpenModal from '../../../../hooks/useOpenModal';
 import { useOrganizationService } from '../../../../services/OrganizationService';
 import useTranslate from '../../../../hooks/useTranslate';
 import SponsorProduct from '../../../../props/models/Sponsor/SponsorProduct';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 export default function useUpdateProduct() {
     const translate = useTranslate();
     const openModal = useOpenModal();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const fundService = useFundService();
+    const pushApiError = usePushApiError();
     const stopActionConfirmation = useStopActionConfirmation();
 
     const organizationService = useOrganizationService();
@@ -35,12 +35,12 @@ export default function useUpdateProduct() {
                         resolve(res.data.data);
                     })
                     .catch((err: ResponseError) => {
-                        pushDanger('Mislukt!', err.data.message);
+                        pushApiError(err);
                         reject();
                     });
             });
         },
-        [fundService, pushDanger, pushSuccess],
+        [fundService, pushApiError, pushSuccess],
     );
 
     const disableProduct = useCallback(
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 e48de0adb..0142515b5 100644
--- a/react/src/dashboard/components/pages/fund-requests-view/FundRequestsView.tsx
+++ b/react/src/dashboard/components/pages/fund-requests-view/FundRequestsView.tsx
@@ -4,7 +4,6 @@ import { useFundRequestValidatorService } from '../../../services/FundRequestVal
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import FundRequest from '../../../props/models/FundRequest';
 import useSetProgress from '../../../hooks/useSetProgress';
-import usePushDanger from '../../../hooks/usePushDanger';
 import usePushSuccess from '../../../hooks/usePushSuccess';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
@@ -46,7 +45,6 @@ export default function FundRequestsView() {
 
     const openModal = useOpenModal();
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const pushApiError = usePushApiError();
     const setProgress = useSetProgress();
@@ -350,11 +348,8 @@ export default function FundRequestsView() {
                     pushSuccess('Gelukt!', 'U bent nu toegewezen aan deze aanvraag.');
                     reloadRequest();
                 })
-                .catch((res) => {
-                    pushDanger('Mislukt!', 'U kunt op dit moment geen aanvullingsverzoek doen.');
-                    console.error(res);
-                }),
-        [fundRequestService, activeOrganization?.id, fundRequestMeta?.id, pushSuccess, reloadRequest, pushDanger],
+                .catch(pushApiError),
+        [fundRequestService, activeOrganization?.id, fundRequestMeta?.id, pushSuccess, reloadRequest, pushApiError],
     );
 
     const requestResignAllEmployeesAsSupervisor = useCallback(() => {
@@ -364,10 +359,8 @@ export default function FundRequestsView() {
                 pushSuccess('Gelukt!', 'U heeft zich afgemeld van deze aanvraag.');
                 reloadRequest();
             })
-            .catch((res: ResponseError) => {
-                pushDanger('Mislukt!', res?.data?.message);
-            });
-    }, [activeOrganization.id, fundRequestMeta, fundRequestService, pushDanger, pushSuccess, reloadRequest]);
+            .catch(pushApiError);
+    }, [activeOrganization.id, fundRequestMeta, fundRequestService, pushApiError, pushSuccess, reloadRequest]);
 
     const requestResign = useCallback(() => {
         if (!fundRequestMeta.can_resign) {
@@ -380,14 +373,12 @@ export default function FundRequestsView() {
                 pushSuccess('Gelukt!', 'U heeft zich afgemeld van deze aanvraag.');
                 reloadRequest();
             })
-            .catch(() => {
-                pushDanger('Mislukt!', 'U kunt u zelf niet van deze aanvraag afhalen.');
-            });
+            .catch(pushApiError);
     }, [
         activeOrganization,
         fundRequestMeta,
         fundRequestService,
-        pushDanger,
+        pushApiError,
         pushSuccess,
         reloadRequest,
         requestResignAllEmployeesAsSupervisor,
@@ -480,7 +471,7 @@ export default function FundRequestsView() {
             </div>
 
             <div className="card">
-                <div className="card-header card-header-next">
+                <div className="card-header">
                     <div className="card-title flex flex-grow flex-gap">
                         <Icon />
 
@@ -686,21 +677,20 @@ export default function FundRequestsView() {
 
             <div className="card">
                 <div className="card-header">
-                    <div className="flex flex-horizontal">
-                        <div className="flex flex-vertical flex-center flex-grow">
-                            <div className="card-title">
-                                {translate('validation_requests.labels.records')} ({fundRequestMeta.records.length})
-                            </div>
-                        </div>
-                        {fundRequestMeta.can_add_partner_bsn && (
-                            <div className="flex flex-row">
+                    <div className="flex flex-grow card-title">
+                        {translate('validation_requests.labels.records')} ({fundRequestMeta.records.length})
+                    </div>
+
+                    {fundRequestMeta.can_add_partner_bsn && (
+                        <div className="card-header-filters">
+                            <div className="block block-inline-filters">
                                 <button className="button button-primary button-sm" onClick={appendRecord}>
                                     <em className="mdi mdi-plus icon-start" />
                                     {translate('validation_requests.buttons.add_partner_bsn')}
                                 </button>
                             </div>
-                        )}
-                    </div>
+                        </div>
+                    )}
                 </div>
                 <div className="card-section">
                     <div className="card-block card-block-table card-block-request-record">
diff --git a/react/src/dashboard/components/pages/fund-requests-view/elements/FundRequestPerson.tsx b/react/src/dashboard/components/pages/fund-requests-view/elements/FundRequestPerson.tsx
index 12518b387..5aa3af0c0 100644
--- a/react/src/dashboard/components/pages/fund-requests-view/elements/FundRequestPerson.tsx
+++ b/react/src/dashboard/components/pages/fund-requests-view/elements/FundRequestPerson.tsx
@@ -1,10 +1,10 @@
 import Organization from '../../../../props/models/Organization';
-import usePushDanger from '../../../../hooks/usePushDanger';
 import useSetProgress from '../../../../hooks/useSetProgress';
 import React, { useCallback, useState } from 'react';
 import { useFundRequestValidatorService } from '../../../../services/FundRequestValidatorService';
 import FundRequest from '../../../../props/models/FundRequest';
 import useTranslate from '../../../../hooks/useTranslate';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 type FundRequestLocal = FundRequest & { bsn_expanded?: boolean };
 
@@ -16,8 +16,8 @@ export default function FundRequestPerson({
     organization: Organization;
 }) {
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const [fundRequest, setFundRequest] = useState<FundRequestLocal>(request);
     const [fetchingPerson, setFetchingPerson] = useState(null);
@@ -67,23 +67,22 @@ export default function FundRequestPerson({
                     fundRequest.bsn_expanded = true;
                     setBreadcrumbs(fundRequest);
                 })
-                .catch((res) => pushDanger('Mislukt', res.data.message))
+                .catch(pushApiError)
                 .finally(() => {
                     setFetchingPerson(false);
                     setProgress(100);
                 });
         },
-        [fetchingPerson, fundRequestService, organization.id, pushDanger, setProgress],
+        [fetchingPerson, fundRequestService, organization.id, pushApiError, setProgress],
     );
 
     return (
         <div>
             <div className="card-header">
-                <div className="flex-row">
-                    <div className="flex flex-vertical flex-center">
-                        <div className="card-heading text-muted text-muted-dark">Persoonlijke gegevens &nbsp;</div>
-                    </div>
-                    <div className="flex flex-col flex-end">
+                <div className="flex flex-grow card-title">Persoonlijke gegevens &nbsp;</div>
+
+                <div className="card-header-filters">
+                    <div className="block block-inline-filters">
                         {fundRequest.bsn_expanded ? (
                             <button
                                 className="button button-default button-sm"
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 3a1f40473..9c809b6a3 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
@@ -8,7 +8,7 @@ export default function FundRequestRecordHistoryTab({ record }: { record: FundRe
     return (
         <div className="card">
             <div className="card-header">
-                <div className="card-title pull-left">
+                <div className="card-title">
                     {translate('validation_request_details.labels.history', { count: record.history.length })}
                 </div>
             </div>
diff --git a/react/src/dashboard/components/pages/fund-requests/FundRequests.tsx b/react/src/dashboard/components/pages/fund-requests/FundRequests.tsx
index dd0befcf8..3037bbe75 100644
--- a/react/src/dashboard/components/pages/fund-requests/FundRequests.tsx
+++ b/react/src/dashboard/components/pages/fund-requests/FundRequests.tsx
@@ -12,14 +12,13 @@ import { format } from 'date-fns';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
 import 'react-datepicker/dist/react-datepicker.css';
 import DatePickerControl from '../../elements/forms/controls/DatePickerControl';
-import { PaginationData, ResponseError } from '../../../props/ApiResponses';
+import { PaginationData } from '../../../props/ApiResponses';
 import ModalExportTypeLegacy from '../../modals/ModalExportTypeLegacy';
 import { useFileService } from '../../../services/FileService';
 import useEnvData from '../../../hooks/useEnvData';
 import useAppConfigs from '../../../hooks/useAppConfigs';
 import useOpenModal from '../../../hooks/useOpenModal';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
-import usePushDanger from '../../../hooks/usePushDanger';
 import useSetProgress from '../../../hooks/useSetProgress';
 import { dateFormat, dateParse } from '../../../helpers/dates';
 import usePaginatorService from '../../../modules/paginator/services/usePaginatorService';
@@ -37,7 +36,6 @@ export default function FundRequests() {
     const appConfigs = useAppConfigs();
     const activeOrganization = useActiveOrganization();
 
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
     const pushApiError = usePushApiError();
     const navigate = useNavigate();
@@ -156,20 +154,18 @@ export default function FundRequests() {
 
     const doExport = useCallback(
         (exportType: string) => {
-            fundRequestService.export(activeOrganization.id, { ...filterActiveValues, export_type: exportType }).then(
-                (res) => {
+            fundRequestService
+                .export(activeOrganization.id, { ...filterActiveValues, export_type: exportType })
+                .then((res) => {
                     const dateTime = format(new Date(), 'yyyy-MM-dd HH:mm:ss');
                     const fileType = res.headers['content-type'] + ';charset=utf-8;';
                     const fileName = `${envData.client_type}_${activeOrganization.name}_fund-requests_${dateTime}.${exportType}`;
 
                     fileService.downloadFile(fileName, res.data, fileType);
-                },
-                (res: ResponseError) => {
-                    pushDanger('Mislukt!', res.data.message);
-                },
-            );
+                })
+                .catch(pushApiError);
         },
-        [fundRequestService, activeOrganization, filterActiveValues, envData.client_type, fileService, pushDanger],
+        [fundRequestService, activeOrganization, filterActiveValues, envData.client_type, fileService, pushApiError],
     );
 
     const exportRequests = useCallback(() => {
@@ -194,7 +190,7 @@ export default function FundRequests() {
 
     return (
         <div className="card" data-dusk="fundRequestsPageContent">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="card-title flex flex-grow">
                     {translate('validation_requests.header.title')} ({fundRequests.meta.total})
                 </div>
diff --git a/react/src/dashboard/components/pages/identities/Identities.tsx b/react/src/dashboard/components/pages/identities/Identities.tsx
index 05d9697c4..45062cf64 100644
--- a/react/src/dashboard/components/pages/identities/Identities.tsx
+++ b/react/src/dashboard/components/pages/identities/Identities.tsx
@@ -173,7 +173,7 @@ export default function Identities() {
 
     return (
         <div className="card">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="card-title flex flex-grow">
                     {translate('identities.header.title')} ({identities.meta.total})
                 </div>
diff --git a/react/src/dashboard/components/pages/identitities-show/cards/IdentityVouchersCard.tsx b/react/src/dashboard/components/pages/identitities-show/cards/IdentityVouchersCard.tsx
index b8993ce18..87ffb3226 100644
--- a/react/src/dashboard/components/pages/identitities-show/cards/IdentityVouchersCard.tsx
+++ b/react/src/dashboard/components/pages/identitities-show/cards/IdentityVouchersCard.tsx
@@ -1,9 +1,8 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import Organization from '../../../../props/models/Organization';
-import { PaginationData, ResponseError } from '../../../../props/ApiResponses';
+import { PaginationData } from '../../../../props/ApiResponses';
 import Voucher from '../../../../props/models/Voucher';
 import useVoucherService from '../../../../services/VoucherService';
-import usePushDanger from '../../../../hooks/usePushDanger';
 import SponsorIdentity from '../../../../props/models/Sponsor/SponsorIdentity';
 import useSetProgress from '../../../../hooks/useSetProgress';
 import LoadingCard from '../../../elements/loading-card/LoadingCard';
@@ -11,6 +10,7 @@ import Card from '../../../elements/card/Card';
 import VouchersTable from '../../vouchers/elements/VouchersTable';
 import useFilterNext from '../../../../modules/filter_next/useFilterNext';
 import useVoucherTableOptions from '../../vouchers/hooks/useVoucherTableOptions';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 export default function IdentityVouchersCard({
     organization,
@@ -19,8 +19,8 @@ export default function IdentityVouchersCard({
     organization: Organization;
     identity: SponsorIdentity;
 }) {
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const voucherService = useVoucherService();
 
     const { funds } = useVoucherTableOptions(organization);
@@ -44,12 +44,12 @@ export default function IdentityVouchersCard({
         voucherService
             .index(organization.id, filterValuesActive)
             .then((res) => setVouchers(res.data))
-            .catch((err: ResponseError) => pushDanger('Error!', err.data.message))
+            .catch(pushApiError)
             .finally(() => {
                 setProgress(100);
                 setLoading(false);
             });
-    }, [filterValuesActive, organization.id, pushDanger, voucherService, setProgress]);
+    }, [filterValuesActive, organization.id, pushApiError, voucherService, setProgress]);
 
     useEffect(() => {
         fetchVouchers();
diff --git a/react/src/dashboard/components/pages/identity-preferences/PreferencesNotifications.tsx b/react/src/dashboard/components/pages/identity-preferences/PreferencesNotifications.tsx
index d31ab1f1a..16271d58e 100644
--- a/react/src/dashboard/components/pages/identity-preferences/PreferencesNotifications.tsx
+++ b/react/src/dashboard/components/pages/identity-preferences/PreferencesNotifications.tsx
@@ -8,16 +8,16 @@ import NotificationPreferenceCard from './elements/NotificationPreferenceCard';
 import useEnvData from '../../../hooks/useEnvData';
 import useSetProgress from '../../../hooks/useSetProgress';
 import usePushSuccess from '../../../hooks/usePushSuccess';
-import usePushDanger from '../../../hooks/usePushDanger';
 import useTranslate from '../../../hooks/useTranslate';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function PreferencesNotifications() {
     const envData = useEnvData();
 
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const emailPreferenceService = useEmailPreferenceService();
 
@@ -92,15 +92,15 @@ export default function PreferencesNotifications() {
 
     const updatePreferences = useCallback(
         (data) => {
-            emailPreferenceService.update(data).then(
-                (res) => {
+            emailPreferenceService
+                .update(data)
+                .then((res) => {
                     pushSuccess('Opgeslagen!');
                     setPreferences(filterOptions(res.data.data));
-                },
-                (res) => pushDanger('Mislukt!', res.data.message),
-            );
+                })
+                .catch(pushApiError);
         },
-        [emailPreferenceService, filterOptions, pushDanger, pushSuccess],
+        [emailPreferenceService, filterOptions, pushApiError, pushSuccess],
     );
 
     const toggleSubscription = useCallback(
diff --git a/react/src/dashboard/components/pages/identity-security/Security2FA.tsx b/react/src/dashboard/components/pages/identity-security/Security2FA.tsx
index 3c976c21f..f70a13c5b 100644
--- a/react/src/dashboard/components/pages/identity-security/Security2FA.tsx
+++ b/react/src/dashboard/components/pages/identity-security/Security2FA.tsx
@@ -7,20 +7,20 @@ import useFormBuilder from '../../../hooks/useFormBuilder';
 import SelectControlOptions from '../../elements/select-control/templates/SelectControlOptions';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
 import usePushSuccess from '../../../hooks/usePushSuccess';
-import usePushDanger from '../../../hooks/usePushDanger';
 import useSetProgress from '../../../hooks/useSetProgress';
 import Modal2FASetup from '../../modals/Modal2FASetup';
 import Modal2FADeactivate from '../../modals/Modal2FADeactivate';
 import { authContext } from '../../../contexts/AuthContext';
 import { ResponseError } from '../../../props/ApiResponses';
 import useAssetUrl from '../../../hooks/useAssetUrl';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function Security2FA() {
     const assetUrl = useAssetUrl();
     const openModal = useOpenModal();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const { updateIdentity } = useContext(authContext);
     const identity2FAService = useIdentity2FAService();
     const [auth2FAState, setAuth2FAState] = useState<Identity2FAState>(null);
@@ -51,7 +51,7 @@ export default function Security2FA() {
             })
             .catch((err: ResponseError) => {
                 form.setErrors(err.data.errors);
-                pushDanger('Error', err.data?.message || 'Onbekende foutmelding.');
+                pushApiError(err, 'Onbekende foutmelding.');
             })
             .finally(() => {
                 form.setIsLocked(false);
@@ -66,15 +66,13 @@ export default function Security2FA() {
 
         identity2FAService
             .status()
-            .then(
-                (res) => {
-                    updateIdentity().then();
-                    setAuth2FAState(res.data.data);
-                },
-                (err) => pushDanger('Mislukt!', err.data?.message || 'Unknown error.'),
-            )
+            .then((res) => {
+                updateIdentity().then();
+                setAuth2FAState(res.data.data);
+            })
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [identity2FAService, setProgress, pushDanger, updateIdentity]);
+    }, [identity2FAService, setProgress, pushApiError, updateIdentity]);
 
     const setupAuth2FA = useCallback(
         (type: string) => {
diff --git a/react/src/dashboard/components/pages/identity-security/SecuritySessions.tsx b/react/src/dashboard/components/pages/identity-security/SecuritySessions.tsx
index af40e562c..7c247dea1 100644
--- a/react/src/dashboard/components/pages/identity-security/SecuritySessions.tsx
+++ b/react/src/dashboard/components/pages/identity-security/SecuritySessions.tsx
@@ -13,16 +13,16 @@ import { mainContext } from '../../../contexts/MainContext';
 import useSetProgress from '../../../hooks/useSetProgress';
 import useOpenModal from '../../../hooks/useOpenModal';
 import usePushSuccess from '../../../hooks/usePushSuccess';
-import usePushDanger from '../../../hooks/usePushDanger';
 import useAuthIdentity2FAState from '../../../hooks/useAuthIdentity2FAState';
 import Auth2FARestriction from '../../elements/auth2fa-restriction/Auth2FARestriction';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function SecuritySessions() {
     const openModal = useOpenModal();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
     const navigate = useNavigate();
+    const pushApiError = usePushApiError();
     const authIdentity2FAState = useAuthIdentity2FAState();
 
     const { signOut } = useContext(authContext);
@@ -79,13 +79,11 @@ export default function SecuritySessions() {
 
                 sessionService
                     .terminate(session.uid)
-                    .then(
-                        () => {
-                            fetchSessions();
-                            pushSuccess('Terminated!');
-                        },
-                        (e) => pushDanger('Mislukt!', e.data?.message),
-                    )
+                    .then(() => {
+                        fetchSessions();
+                        pushSuccess('Terminated!');
+                    })
+                    .catch(pushApiError)
                     .finally(() => setProgress(100));
             };
 
@@ -100,7 +98,7 @@ export default function SecuritySessions() {
                 />
             ));
         },
-        [fetchSessions, sessionService, openModal, pushDanger, pushSuccess, setProgress],
+        [fetchSessions, sessionService, openModal, pushApiError, pushSuccess, setProgress],
     );
 
     const terminateAllSessions = useCallback(() => {
@@ -110,15 +108,13 @@ export default function SecuritySessions() {
 
             sessionService
                 .terminateAll()
-                .then(
-                    () => {
-                        signOut();
-                        clearAll();
-                        navigate(getStateRouteUrl('home'));
-                        pushSuccess('Terminated!');
-                    },
-                    (e) => pushDanger('Mislukt!', e.data?.message),
-                )
+                .then(() => {
+                    signOut();
+                    clearAll();
+                    navigate(getStateRouteUrl('home'));
+                    pushSuccess('Terminated!');
+                })
+                .catch(pushApiError)
                 .finally(() => setProgress(100));
         };
 
@@ -132,7 +128,7 @@ export default function SecuritySessions() {
                 buttonSubmit={{ onClick: () => onDone(modal) }}
             />
         ));
-    }, [clearAll, navigate, openModal, pushDanger, pushSuccess, sessionService, setProgress, signOut]);
+    }, [clearAll, navigate, openModal, pushApiError, pushSuccess, sessionService, setProgress, signOut]);
 
     useEffect(() => {
         if (authIdentity2FAState?.restrictions?.sessions?.restricted == false) {
diff --git a/react/src/dashboard/components/pages/implementations-cms-page/ImplementationsCmsPageCreate.tsx b/react/src/dashboard/components/pages/implementations-cms-page/ImplementationsCmsPageCreate.tsx
index dedaa8c60..a5efc129d 100644
--- a/react/src/dashboard/components/pages/implementations-cms-page/ImplementationsCmsPageCreate.tsx
+++ b/react/src/dashboard/components/pages/implementations-cms-page/ImplementationsCmsPageCreate.tsx
@@ -1,14 +1,13 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
-import usePushDanger from '../../../hooks/usePushDanger';
-import { ResponseError } from '../../../props/ApiResponses';
 import useImplementationService from '../../../services/ImplementationService';
 import Implementation from '../../../props/models/Implementation';
 import ImplementationsCmsPageForm from './elements/ImplementationsCmsPageForm';
 import { StringParam, useQueryParam } from 'use-query-params';
 import { useNavigateState } from '../../../modules/state_router/Router';
 import { useParams } from 'react-router-dom';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function ImplementationsCmsPageCreate() {
     const { implementationId } = useParams();
@@ -16,7 +15,7 @@ export default function ImplementationsCmsPageCreate() {
     const activeOrganization = useActiveOrganization();
 
     const navigateState = useNavigateState();
-    const pushDanger = usePushDanger();
+    const pushApiError = usePushApiError();
 
     const implementationService = useImplementationService();
 
@@ -35,8 +34,8 @@ export default function ImplementationsCmsPageCreate() {
 
                 setImplementation(res.data.data);
             })
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message));
-    }, [implementationService, activeOrganization.id, implementationId, type, navigateState, pushDanger]);
+            .catch(pushApiError);
+    }, [implementationService, activeOrganization.id, implementationId, type, navigateState, pushApiError]);
 
     useEffect(() => {
         fetchImplementation();
diff --git a/react/src/dashboard/components/pages/implementations-cms-page/ImplementationsCmsPageEdit.tsx b/react/src/dashboard/components/pages/implementations-cms-page/ImplementationsCmsPageEdit.tsx
index 5c9e8f1e6..83d276d4d 100644
--- a/react/src/dashboard/components/pages/implementations-cms-page/ImplementationsCmsPageEdit.tsx
+++ b/react/src/dashboard/components/pages/implementations-cms-page/ImplementationsCmsPageEdit.tsx
@@ -1,7 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
-import usePushDanger from '../../../hooks/usePushDanger';
 import { ResponseError } from '../../../props/ApiResponses';
 import useImplementationService from '../../../services/ImplementationService';
 import { useParams } from 'react-router-dom';
@@ -11,12 +10,13 @@ import ImplementationPage from '../../../props/models/ImplementationPage';
 import useImplementationPageService from '../../../services/ImplementationPageService';
 import { useNavigateState } from '../../../modules/state_router/Router';
 import useSetProgress from '../../../hooks/useSetProgress';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function ImplementationsCmsPageEdit() {
     const { implementationId, id } = useParams();
 
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const navigateState = useNavigateState();
     const activeOrganization = useActiveOrganization();
 
@@ -37,10 +37,10 @@ export default function ImplementationsCmsPageEdit() {
                     return navigateState('implementations', { organizationId: activeOrganization.id });
                 }
 
-                pushDanger('Mislukt!', err.data.message);
+                pushApiError(err);
             })
             .finally(() => setProgress(100));
-    }, [activeOrganization.id, implementationId, implementationService, navigateState, pushDanger, setProgress]);
+    }, [activeOrganization.id, implementationId, implementationService, navigateState, pushApiError, setProgress]);
 
     const fetchPage = useCallback(
         (id) => {
@@ -49,10 +49,10 @@ export default function ImplementationsCmsPageEdit() {
             implementationPageService
                 .read(activeOrganization.id, implementation.id, id)
                 .then((res) => setPage(res.data.data))
-                .catch((res: ResponseError) => pushDanger('Mislukt!', res.data.message))
+                .catch(pushApiError)
                 .finally(() => setProgress(100));
         },
-        [activeOrganization.id, implementation?.id, implementationPageService, pushDanger, setProgress],
+        [activeOrganization.id, implementation?.id, implementationPageService, pushApiError, setProgress],
     );
 
     useEffect(() => {
diff --git a/react/src/dashboard/components/pages/implementations-cms-page/elements/ImplementationsBlockEditorItem.tsx b/react/src/dashboard/components/pages/implementations-cms-page/elements/ImplementationsBlockEditorItem.tsx
index f5393ac91..7abaa3158 100644
--- a/react/src/dashboard/components/pages/implementations-cms-page/elements/ImplementationsBlockEditorItem.tsx
+++ b/react/src/dashboard/components/pages/implementations-cms-page/elements/ImplementationsBlockEditorItem.tsx
@@ -1,15 +1,15 @@
 import React, { Fragment, useMemo, useCallback, useState } from 'react';
-import { ResponseError, ResponseErrorData } from '../../../../props/ApiResponses';
+import { ResponseErrorData } from '../../../../props/ApiResponses';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import ImplementationPageBlock from '../../../../props/models/ImplementationPageBlock';
 import MarkdownEditor from '../../../elements/forms/markdown-editor/MarkdownEditor';
 import FormError from '../../../elements/forms/errors/FormError';
 import { useMediaService } from '../../../../services/MediaService';
-import usePushDanger from '../../../../hooks/usePushDanger';
 import PhotoSelector from '../../../elements/photo-selector/PhotoSelector';
 import SelectControlOptions from '../../../elements/select-control/templates/SelectControlOptions';
 import SelectControl from '../../../elements/select-control/SelectControl';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 export default function ImplementationsBlockEditorItem({
     id,
@@ -30,7 +30,7 @@ export default function ImplementationsBlockEditorItem({
     unCollapsedList: Array<string>;
     setUnCollapsedList: React.Dispatch<React.SetStateAction<Array<string>>>;
 }) {
-    const pushDanger = usePushDanger();
+    const pushApiError = usePushApiError();
 
     const mediaService = useMediaService();
 
@@ -57,9 +57,9 @@ export default function ImplementationsBlockEditorItem({
                 .then((res) => {
                     onChange({ media_uid: res.data.data.uid });
                 })
-                .catch((err: ResponseError) => pushDanger('Error!', err.data.message));
+                .catch(pushApiError);
         },
-        [mediaService, onChange, pushDanger],
+        [mediaService, onChange, pushApiError],
     );
 
     return (
diff --git a/react/src/dashboard/components/pages/implementations-cms-page/elements/ImplementationsCmsHomeProductsBlockEditor.tsx b/react/src/dashboard/components/pages/implementations-cms-page/elements/ImplementationsCmsHomeProductsBlockEditor.tsx
index 06acc96fe..23cc1de8f 100644
--- a/react/src/dashboard/components/pages/implementations-cms-page/elements/ImplementationsCmsHomeProductsBlockEditor.tsx
+++ b/react/src/dashboard/components/pages/implementations-cms-page/elements/ImplementationsCmsHomeProductsBlockEditor.tsx
@@ -5,9 +5,9 @@ import { ApiResponseSingle, ResponseError } from '../../../../props/ApiResponses
 import useImplementationPageService from '../../../../services/ImplementationPageService';
 import Implementation from '../../../../props/models/Implementation';
 import Organization from '../../../../props/models/Organization';
-import usePushDanger from '../../../../hooks/usePushDanger';
 import useSetProgress from '../../../../hooks/useSetProgress';
 import FormError from '../../../elements/forms/errors/FormError';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 export default function ImplementationsCmsHomeProductsBlockEditor({
     pageBlock,
@@ -22,8 +22,8 @@ export default function ImplementationsCmsHomeProductsBlockEditor({
     implementation: Implementation;
     activeOrganization: Organization;
 }) {
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const implementationPageService = useImplementationPageService();
 
@@ -54,7 +54,7 @@ export default function ImplementationsCmsHomeProductsBlockEditor({
                 .catch((err: ResponseError) => {
                     resolve(false);
                     setErrors(err.data.errors);
-                    pushDanger('Mislukt!', err.data.message);
+                    pushApiError(err);
                 })
                 .finally(() => setProgress(100));
         });
@@ -63,7 +63,7 @@ export default function ImplementationsCmsHomeProductsBlockEditor({
         implementation.id,
         implementationPageService,
         pageBlock,
-        pushDanger,
+        pushApiError,
         setPageBlock,
         setProgress,
     ]);
diff --git a/react/src/dashboard/components/pages/implementations-cms-page/elements/ImplementationsCmsPageForm.tsx b/react/src/dashboard/components/pages/implementations-cms-page/elements/ImplementationsCmsPageForm.tsx
index 189012691..c487f1478 100644
--- a/react/src/dashboard/components/pages/implementations-cms-page/elements/ImplementationsCmsPageForm.tsx
+++ b/react/src/dashboard/components/pages/implementations-cms-page/elements/ImplementationsCmsPageForm.tsx
@@ -22,6 +22,7 @@ import Faq from '../../../../props/models/Faq';
 import { uniqueId } from 'lodash';
 import LoadingCard from '../../../elements/loading-card/LoadingCard';
 import ImplementationsCmsHomeProductsBlockEditor from './ImplementationsCmsHomeProductsBlockEditor';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 export default function ImplementationsCmsPageForm({
     page,
@@ -36,6 +37,7 @@ export default function ImplementationsCmsPageForm({
     const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const navigateState = useNavigateState();
     const activeOrganization = useActiveOrganization();
 
@@ -146,7 +148,7 @@ export default function ImplementationsCmsPageForm({
                 })
                 .catch((err: ResponseError) => {
                     form.setErrors(err.data.errors);
-                    pushDanger('Mislukt!', err.data.message);
+                    pushApiError(err);
                 })
                 .finally(() => {
                     setProgress(100);
@@ -167,9 +169,9 @@ export default function ImplementationsCmsPageForm({
                         },
                     );
                 })
-                .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message));
+                .catch(pushApiError);
         },
-        [implementation, implementationPageService, pushDanger],
+        [implementation, implementationPageService, pushApiError],
     );
 
     useEffect(() => {
@@ -222,23 +224,28 @@ export default function ImplementationsCmsPageForm({
 
             <div className="card">
                 <form className="form" onSubmit={form.submit}>
-                    <div className="card-header flex-row">
-                        <div className="card-title">{translate(`implementation_edit.labels.${pageType}`)}</div>
-                        <div className="flex flex-grow flex-end">
-                            {(page?.state == 'public' || pageTypeConfig.type === 'static') && (
-                                <a
-                                    className="button button-text button-sm"
-                                    href={pageTypeConfig.webshop_url}
-                                    rel="noreferrer"
-                                    target="_blank">
-                                    Bekijk pagina
-                                    <em className="mdi mdi-open-in-new icon-end" />
-                                </a>
-                            )}
-
-                            <button className="button button-primary button-sm" type="submit">
-                                {translate('funds_edit.buttons.confirm')}
-                            </button>
+                    <div className="card-header">
+                        <div className="flex flex-grow card-title">
+                            {translate(`implementation_edit.labels.${pageType}`)}
+                        </div>
+
+                        <div className="card-header-filters">
+                            <div className="block block-inline-filters">
+                                {(page?.state == 'public' || pageTypeConfig.type === 'static') && (
+                                    <a
+                                        className="button button-text button-sm"
+                                        href={pageTypeConfig.webshop_url}
+                                        rel="noreferrer"
+                                        target="_blank">
+                                        Bekijk pagina
+                                        <em className="mdi mdi-open-in-new icon-end" />
+                                    </a>
+                                )}
+
+                                <button className="button button-primary button-sm" type="submit">
+                                    {translate('funds_edit.buttons.confirm')}
+                                </button>
+                            </div>
                         </div>
                     </div>
 
diff --git a/react/src/dashboard/components/pages/implementations-cms/ImplementationsCms.tsx b/react/src/dashboard/components/pages/implementations-cms/ImplementationsCms.tsx
index e1582d42c..4adbaa64c 100644
--- a/react/src/dashboard/components/pages/implementations-cms/ImplementationsCms.tsx
+++ b/react/src/dashboard/components/pages/implementations-cms/ImplementationsCms.tsx
@@ -3,7 +3,6 @@ import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
 import useFormBuilder from '../../../hooks/useFormBuilder';
 import usePushSuccess from '../../../hooks/usePushSuccess';
-import usePushDanger from '../../../hooks/usePushDanger';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import FormError from '../../elements/forms/errors/FormError';
 import useSetProgress from '../../../hooks/useSetProgress';
@@ -26,15 +25,16 @@ import PhotoSelectorData from '../../elements/photo-selector/types/PhotoSelector
 import useTranslate from '../../../hooks/useTranslate';
 import FormGroupInfo from '../../elements/forms/elements/FormGroupInfo';
 import FormGroup from '../../elements/forms/controls/FormGroup';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function ImplementationsCms() {
     const { id } = useParams();
 
     const translate = useTranslate();
     const openModal = useOpenModal();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const activeOrganization = useActiveOrganization();
 
     const mediaService = useMediaService();
@@ -139,11 +139,7 @@ export default function ImplementationsCms() {
             const header_text_color = bannerMeta.auto_text_color ? 'auto' : bannerMeta.header_text_color;
 
             if (resetMedia && values.banner_media_uid) {
-                mediaService
-                    .delete(values.banner_media_uid)
-                    .catch((res: ResponseError) =>
-                        pushDanger('Error, could not delete banner image!', res.data.message),
-                    );
+                mediaService.delete(values.banner_media_uid).catch(pushApiError);
             }
 
             implementationService
@@ -163,7 +159,7 @@ export default function ImplementationsCms() {
                 })
                 .catch((err: ResponseError) => {
                     form.setErrors(err.data.errors);
-                    pushDanger('Mislukt!', err.data.message);
+                    pushApiError(err);
                 })
                 .finally(() => {
                     setProgress(100);
@@ -218,10 +214,10 @@ export default function ImplementationsCms() {
                     setResetMedia(false);
                     formUpdate({ banner_media_uid: res.data.data.uid });
                 })
-                .catch((res: ResponseError) => pushDanger('Error!', res.data.message))
+                .catch(pushApiError)
                 .finally(() => setBannerMeta((meta) => ({ ...meta, mediaLoading: false })));
         },
-        [mediaService, pushDanger, formUpdate],
+        [mediaService, pushApiError, formUpdate],
     );
 
     const resetBanner = useCallback(() => {
@@ -234,8 +230,8 @@ export default function ImplementationsCms() {
         implementationService
             .read(activeOrganization.id, parseInt(id))
             .then((res) => setImplementation(res.data.data))
-            .catch((res: ResponseError) => pushDanger('Mislukt!', res.data.message));
-    }, [activeOrganization.id, implementationService, id, pushDanger]);
+            .catch(pushApiError);
+    }, [activeOrganization.id, implementationService, id, pushApiError]);
 
     useEffect(() => {
         if (implementation) {
@@ -318,10 +314,10 @@ export default function ImplementationsCms() {
 
             <div className="card">
                 <form className="form" onSubmit={form.submit}>
-                    <div className="card-header card-header-next">
+                    <div className="card-header">
                         <div className="card-title flex flex-grow">{translate('implementation_edit.header.title')}</div>
-                        <div className="card-header-actions">
-                            <div className="button-group">
+                        <div className="card-header-filters">
+                            <div className="block block-inline-filters">
                                 <a
                                     className="button button-text button-sm"
                                     href={implementation.url_webshop}
diff --git a/react/src/dashboard/components/pages/implementations-cms/elements/ImplementationsCmsPages.tsx b/react/src/dashboard/components/pages/implementations-cms/elements/ImplementationsCmsPages.tsx
index 33bd4b849..9509defcd 100644
--- a/react/src/dashboard/components/pages/implementations-cms/elements/ImplementationsCmsPages.tsx
+++ b/react/src/dashboard/components/pages/implementations-cms/elements/ImplementationsCmsPages.tsx
@@ -1,9 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import LoadingCard from '../../../elements/loading-card/LoadingCard';
 import usePushSuccess from '../../../../hooks/usePushSuccess';
-import usePushDanger from '../../../../hooks/usePushDanger';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
-import { ResponseError } from '../../../../props/ApiResponses';
 import useOpenModal from '../../../../hooks/useOpenModal';
 import ModalNotification from '../../../modals/ModalNotification';
 import useImplementationPageService from '../../../../services/ImplementationPageService';
@@ -12,12 +10,13 @@ import ThSortable from '../../../elements/tables/ThSortable';
 import ImplementationPage from '../../../../props/models/ImplementationPage';
 import useTranslate from '../../../../hooks/useTranslate';
 import { keyBy } from 'lodash';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 export default function ImplementationsCmsPages({ implementation }: { implementation: Implementation }) {
     const translate = useTranslate();
     const openModal = useOpenModal();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
+    const pushApiError = usePushApiError();
 
     const implementationPageService = useImplementationPageService();
 
@@ -31,8 +30,8 @@ export default function ImplementationsCmsPages({ implementation }: { implementa
         implementationPageService
             .list(implementation.organization_id, implementation.id)
             .then((res) => setPagesByKey(keyBy(res.data.data, 'page_type')))
-            .catch((res: ResponseError) => pushDanger('Mislukt!', res.data.message));
-    }, [implementation, implementationPageService, pushDanger]);
+            .catch(pushApiError);
+    }, [implementation, implementationPageService, pushApiError]);
 
     const deletePage = useCallback(
         (page) => {
@@ -53,14 +52,14 @@ export default function ImplementationsCmsPages({ implementation }: { implementa
                                     fetchPages();
                                     pushSuccess('Success!', 'Implementation page delete!');
                                 })
-                                .catch((res: ResponseError) => pushDanger('Mislukt!', res.data.message));
+                                .catch(pushApiError);
                         },
                     }}
                     buttonCancel={{ onClick: () => modal.close() }}
                 />
             ));
         },
-        [fetchPages, implementationPageService, openModal, pushDanger, pushSuccess],
+        [fetchPages, implementationPageService, openModal, pushApiError, pushSuccess],
     );
 
     useEffect(() => {
diff --git a/react/src/dashboard/components/pages/implementations-config/ImplementationsConfig.tsx b/react/src/dashboard/components/pages/implementations-config/ImplementationsConfig.tsx
index 16eea9f17..775f21e88 100644
--- a/react/src/dashboard/components/pages/implementations-config/ImplementationsConfig.tsx
+++ b/react/src/dashboard/components/pages/implementations-config/ImplementationsConfig.tsx
@@ -3,7 +3,6 @@ import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
 import useFormBuilder from '../../../hooks/useFormBuilder';
 import usePushSuccess from '../../../hooks/usePushSuccess';
-import usePushDanger from '../../../hooks/usePushDanger';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import FormError from '../../elements/forms/errors/FormError';
 import useSetProgress from '../../../hooks/useSetProgress';
@@ -13,14 +12,15 @@ import { useParams } from 'react-router-dom';
 import Implementation from '../../../props/models/Implementation';
 import { useNavigateState } from '../../../modules/state_router/Router';
 import useTranslate from '../../../hooks/useTranslate';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function ImplementationsConfig() {
     const { id } = useParams();
 
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const navigateState = useNavigateState();
     const activeOrganization = useActiveOrganization();
 
@@ -58,7 +58,7 @@ export default function ImplementationsConfig() {
             })
             .catch((err: ResponseError) => {
                 form.setErrors(err.data.errors);
-                pushDanger('Mislukt!', err.data.message);
+                pushApiError(err);
             })
             .finally(() => {
                 setProgress(100);
@@ -72,14 +72,14 @@ export default function ImplementationsConfig() {
         implementationService
             .read(activeOrganization.id, parseInt(id))
             .then((res) => setImplementation(res.data.data))
-            .catch((res: ResponseError) => {
-                if (res.status === 403) {
+            .catch((err: ResponseError) => {
+                if (err.status === 403) {
                     return navigateState('implementations', { organizationId: activeOrganization.id });
                 }
 
-                pushDanger('Mislukt!', res.data.message);
+                pushApiError(err);
             });
-    }, [implementationService, activeOrganization.id, navigateState, id, pushDanger]);
+    }, [implementationService, activeOrganization.id, navigateState, id, pushApiError]);
 
     useEffect(() => {
         fetchImplementation();
@@ -132,13 +132,12 @@ export default function ImplementationsConfig() {
                 <div className="breadcrumb-item active">Implementation page configs</div>
             </div>
 
-            <div className="card">
-                <form className="form" onSubmit={form.submit}>
-                    <div className="card-header flex flex-horizontal">
-                        <div className="flex flex-grow">
-                            <div className="card-title">{translate('implementation_edit.header.title')}</div>
-                        </div>
-                        <div className="flex">
+            <form className="card form" onSubmit={form.submit}>
+                <div className="card-header">
+                    <div className="flex flex-grow card-title">{translate('implementation_edit.header.title')}</div>
+
+                    <div className="card-header-filters">
+                        <div className="block block-inline-filters">
                             <a
                                 className="button button-text button-sm"
                                 href={implementation.url_webshop}
@@ -153,74 +152,70 @@ export default function ImplementationsConfig() {
                             </button>
                         </div>
                     </div>
-
-                    {configs.map((config) => (
-                        <div key={config.page} className="card-section card-section-primary card-section-settings">
-                            <div className="card-title">{translate(`implementation_config.pages.${config.page}`)}</div>
-                            <div className="block block-toggles">
-                                <div className="toggle-row">
-                                    <div className="row">
-                                        {config.blocks.map((block, index, arr) => (
-                                            <div
-                                                key={block}
-                                                className={`col col-xs-12 ${
-                                                    config.blocks.length % 2 == 0 || !(index === arr.length - 1)
-                                                        ? 'col-lg-6'
-                                                        : ''
-                                                } ${
-                                                    config.blocks.length % 2 && index === arr.length - 1
-                                                        ? 'col-lg-12'
-                                                        : ''
-                                                }`}>
-                                                <div className={`toggle-item ${form.values[block] ? 'active' : ''}`}>
-                                                    <div className="toggle-label">
-                                                        <div className="flex flex-vertical">
-                                                            <div>
-                                                                {translate(`implementation_config.blocks.${block}`)}
-                                                            </div>
-                                                            <FormError error={form.errors[block]} />
-                                                        </div>
+                </div>
+
+                {configs.map((config) => (
+                    <div key={config.page} className="card-section card-section-primary card-section-settings">
+                        <div className="card-title">{translate(`implementation_config.pages.${config.page}`)}</div>
+                        <div className="block block-toggles">
+                            <div className="toggle-row">
+                                <div className="row">
+                                    {config.blocks.map((block, index, arr) => (
+                                        <div
+                                            key={block}
+                                            className={`col col-xs-12 ${
+                                                config.blocks.length % 2 == 0 || !(index === arr.length - 1)
+                                                    ? 'col-lg-6'
+                                                    : ''
+                                            } ${
+                                                config.blocks.length % 2 && index === arr.length - 1 ? 'col-lg-12' : ''
+                                            }`}>
+                                            <div className={`toggle-item ${form.values[block] ? 'active' : ''}`}>
+                                                <div className="toggle-label">
+                                                    <div className="flex flex-vertical">
+                                                        <div>{translate(`implementation_config.blocks.${block}`)}</div>
+                                                        <FormError error={form.errors[block]} />
                                                     </div>
-                                                    <label className="form-toggle" htmlFor={block}>
-                                                        <input
-                                                            id={block}
-                                                            type="checkbox"
-                                                            checked={form.values[block]}
-                                                            onChange={(e) => {
-                                                                form.update({ [block]: e.target.checked });
-                                                            }}
-                                                        />
-
-                                                        <div className="form-toggle-inner flex-end">
-                                                            <div className="toggle-input">
-                                                                <div className="toggle-input-dot" />
-                                                            </div>
-                                                        </div>
-                                                    </label>
                                                 </div>
+                                                <label className="form-toggle" htmlFor={block}>
+                                                    <input
+                                                        id={block}
+                                                        type="checkbox"
+                                                        checked={form.values[block]}
+                                                        onChange={(e) => {
+                                                            form.update({ [block]: e.target.checked });
+                                                        }}
+                                                    />
+
+                                                    <div className="form-toggle-inner flex-end">
+                                                        <div className="toggle-input">
+                                                            <div className="toggle-input-dot" />
+                                                        </div>
+                                                    </div>
+                                                </label>
                                             </div>
-                                        ))}
-                                    </div>
+                                        </div>
+                                    ))}
                                 </div>
                             </div>
                         </div>
-                    ))}
-
-                    <div className="card-section card-section-primary">
-                        <div className="button-group flex-center">
-                            <StateNavLink
-                                name={'implementations-cms'}
-                                params={{ id: implementation.id, organizationId: activeOrganization.id }}
-                                className="button button-default">
-                                {translate('funds_edit.buttons.cancel')}
-                            </StateNavLink>
-                            <button className="button button-primary" type="submit">
-                                {translate('funds_edit.buttons.confirm')}
-                            </button>
-                        </div>
                     </div>
-                </form>
-            </div>
+                ))}
+
+                <div className="card-section card-section-primary">
+                    <div className="button-group flex-center">
+                        <StateNavLink
+                            name={'implementations-cms'}
+                            params={{ id: implementation.id, organizationId: activeOrganization.id }}
+                            className="button button-default">
+                            {translate('funds_edit.buttons.cancel')}
+                        </StateNavLink>
+                        <button className="button button-primary" type="submit">
+                            {translate('funds_edit.buttons.confirm')}
+                        </button>
+                    </div>
+                </div>
+            </form>
         </Fragment>
     );
 }
diff --git a/react/src/dashboard/components/pages/implementations-cookies/ImplementationsCookies.tsx b/react/src/dashboard/components/pages/implementations-cookies/ImplementationsCookies.tsx
index 4b962076d..d416ab744 100644
--- a/react/src/dashboard/components/pages/implementations-cookies/ImplementationsCookies.tsx
+++ b/react/src/dashboard/components/pages/implementations-cookies/ImplementationsCookies.tsx
@@ -1,18 +1,18 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
-import usePushDanger from '../../../hooks/usePushDanger';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import { ResponseError } from '../../../props/ApiResponses';
 import useImplementationService from '../../../services/ImplementationService';
 import { useParams } from 'react-router-dom';
 import Implementation from '../../../props/models/Implementation';
 import { getStateRouteUrl, useNavigateState } from '../../../modules/state_router/Router';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function ImplementationsCookies() {
     const { id } = useParams();
 
-    const pushDanger = usePushDanger();
+    const pushApiError = usePushApiError();
     const navigateState = useNavigateState();
     const activeOrganization = useActiveOrganization();
 
@@ -24,16 +24,16 @@ export default function ImplementationsCookies() {
         implementationService
             .read(activeOrganization.id, parseInt(id))
             .then((res) => setImplementation(res.data.data))
-            .catch((res: ResponseError) => {
-                if (res.status === 403) {
+            .catch((err: ResponseError) => {
+                if (err.status === 403) {
                     return navigateState(
                         getStateRouteUrl('implementations', { organizationId: activeOrganization.id }),
                     );
                 }
 
-                pushDanger('Mislukt!', res.data.message);
+                pushApiError(err);
             });
-    }, [activeOrganization.id, id, implementationService, navigateState, pushDanger]);
+    }, [activeOrganization.id, id, implementationService, navigateState, pushApiError]);
 
     useEffect(() => {
         fetchImplementation();
@@ -65,12 +65,8 @@ export default function ImplementationsCookies() {
 
             <div className="card">
                 <div className="card-header">
-                    <div className="card-title flex flex-horizontal flex-align-items-center">
-                        <div className="flex flex-grow">Cookiemelding</div>
-                        <div className="flex">
-                            <div className="label label-success">Actief</div>
-                        </div>
-                    </div>
+                    <div className="flex flex-grow card-title">Cookiemelding</div>
+                    <div className="label label-success">Actief</div>
                 </div>
 
                 <div className="card-section">
diff --git a/react/src/dashboard/components/pages/implementations-cookies/ImplementationsTranslations.tsx b/react/src/dashboard/components/pages/implementations-cookies/ImplementationsTranslations.tsx
index 8d64f8d1f..f222c562d 100644
--- a/react/src/dashboard/components/pages/implementations-cookies/ImplementationsTranslations.tsx
+++ b/react/src/dashboard/components/pages/implementations-cookies/ImplementationsTranslations.tsx
@@ -1,7 +1,6 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
-import usePushDanger from '../../../hooks/usePushDanger';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import { ResponseError } from '../../../props/ApiResponses';
 import useImplementationService from '../../../services/ImplementationService';
@@ -17,7 +16,6 @@ import usePushSuccess from '../../../hooks/usePushSuccess';
 export default function ImplementationsTranslations() {
     const { id } = useParams();
 
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
     const pushSuccess = usePushSuccess();
     const pushApiError = usePushApiError();
@@ -31,8 +29,8 @@ export default function ImplementationsTranslations() {
         implementationService
             .read(activeOrganization.id, parseInt(id))
             .then((res) => setImplementation(res.data.data))
-            .catch((res: ResponseError) => pushDanger('Mislukt!', res.data.message));
-    }, [activeOrganization.id, id, implementationService, pushDanger]);
+            .catch(pushApiError);
+    }, [activeOrganization.id, id, implementationService, pushApiError]);
 
     const form = useFormBuilder({ languages: [] }, () => {
         setProgress(0);
diff --git a/react/src/dashboard/components/pages/implementations-digid/ImplementationsDigid.tsx b/react/src/dashboard/components/pages/implementations-digid/ImplementationsDigid.tsx
index 36da9e6ce..f1b2933da 100644
--- a/react/src/dashboard/components/pages/implementations-digid/ImplementationsDigid.tsx
+++ b/react/src/dashboard/components/pages/implementations-digid/ImplementationsDigid.tsx
@@ -3,7 +3,6 @@ import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
 import useFormBuilder from '../../../hooks/useFormBuilder';
 import usePushSuccess from '../../../hooks/usePushSuccess';
-import usePushDanger from '../../../hooks/usePushDanger';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import FormError from '../../elements/forms/errors/FormError';
 import useSetProgress from '../../../hooks/useSetProgress';
@@ -13,14 +12,15 @@ import { useParams } from 'react-router-dom';
 import Implementation from '../../../props/models/Implementation';
 import { useNavigateState } from '../../../modules/state_router/Router';
 import useTranslate from '../../../hooks/useTranslate';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function ImplementationsDigid() {
     const { id } = useParams();
 
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const navigateState = useNavigateState();
     const activeOrganization = useActiveOrganization();
 
@@ -52,7 +52,7 @@ export default function ImplementationsDigid() {
                 })
                 .catch((err: ResponseError) => {
                     form.setErrors(err.data.errors);
-                    pushDanger('Mislukt!', err.data.message);
+                    pushApiError(err);
                 })
                 .finally(() => {
                     setProgress(100);
@@ -67,14 +67,14 @@ export default function ImplementationsDigid() {
         implementationService
             .read(activeOrganization.id, parseInt(id))
             .then((res) => setImplementation(res.data.data))
-            .catch((res: ResponseError) => {
-                if (res.status === 403) {
+            .catch((err: ResponseError) => {
+                if (err.status === 403) {
                     return navigateState('implementations', { organizationId: activeOrganization.id });
                 }
 
-                pushDanger('Mislukt!', res.data.message);
+                pushApiError(err);
             });
-    }, [implementationService, activeOrganization.id, id, pushDanger, navigateState]);
+    }, [implementationService, activeOrganization.id, id, pushApiError, navigateState]);
 
     useEffect(() => {
         fetchImplementation();
diff --git a/react/src/dashboard/components/pages/implementations-email/ImplementationsEmail.tsx b/react/src/dashboard/components/pages/implementations-email/ImplementationsEmail.tsx
index 81f6d8b36..c5f8603b5 100644
--- a/react/src/dashboard/components/pages/implementations-email/ImplementationsEmail.tsx
+++ b/react/src/dashboard/components/pages/implementations-email/ImplementationsEmail.tsx
@@ -3,7 +3,6 @@ import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
 import useFormBuilder from '../../../hooks/useFormBuilder';
 import usePushSuccess from '../../../hooks/usePushSuccess';
-import usePushDanger from '../../../hooks/usePushDanger';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import FormError from '../../elements/forms/errors/FormError';
 import useSetProgress from '../../../hooks/useSetProgress';
@@ -13,14 +12,15 @@ import { useParams } from 'react-router-dom';
 import Implementation from '../../../props/models/Implementation';
 import { getStateRouteUrl, useNavigateState } from '../../../modules/state_router/Router';
 import useTranslate from '../../../hooks/useTranslate';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function ImplementationsEmail() {
     const { id } = useParams();
 
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const navigateState = useNavigateState();
     const activeOrganization = useActiveOrganization();
 
@@ -43,7 +43,7 @@ export default function ImplementationsEmail() {
             })
             .catch((err: ResponseError) => {
                 form.setErrors(err.data.errors);
-                pushDanger('Mislukt!', err.data.message);
+                pushApiError(err);
             })
             .finally(() => {
                 setProgress(100);
@@ -57,16 +57,16 @@ export default function ImplementationsEmail() {
         implementationService
             .read(activeOrganization.id, parseInt(id))
             .then((res) => setImplementation(res.data.data))
-            .catch((res: ResponseError) => {
-                if (res.status === 403) {
+            .catch((err: ResponseError) => {
+                if (err.status === 403) {
                     return navigateState(
                         getStateRouteUrl('implementations', { organizationId: activeOrganization.id }),
                     );
                 }
 
-                pushDanger('Mislukt!', res.data.message);
+                pushApiError(err);
             });
-    }, [activeOrganization.id, id, implementationService, navigateState, pushDanger]);
+    }, [activeOrganization.id, id, implementationService, navigateState, pushApiError]);
 
     useEffect(() => {
         fetchImplementation();
diff --git a/react/src/dashboard/components/pages/implementations-notifications-branding/ImplementationsNotificationsBranding.tsx b/react/src/dashboard/components/pages/implementations-notifications-branding/ImplementationsNotificationsBranding.tsx
index 24df71784..703fc8fdb 100644
--- a/react/src/dashboard/components/pages/implementations-notifications-branding/ImplementationsNotificationsBranding.tsx
+++ b/react/src/dashboard/components/pages/implementations-notifications-branding/ImplementationsNotificationsBranding.tsx
@@ -1,7 +1,6 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
-import usePushDanger from '../../../hooks/usePushDanger';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import { ResponseError } from '../../../props/ApiResponses';
 import useImplementationService from '../../../services/ImplementationService';
@@ -18,14 +17,15 @@ import usePushSuccess from '../../../hooks/usePushSuccess';
 import { useParams } from 'react-router-dom';
 import { useNavigateState } from '../../../modules/state_router/Router';
 import useTranslate from '../../../hooks/useTranslate';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function ImplementationsNotificationsBranding() {
     const { id } = useParams();
 
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const navigateState = useNavigateState();
     const activeOrganization = useActiveOrganization();
 
@@ -57,11 +57,11 @@ export default function ImplementationsNotificationsBranding() {
                 })
                 .catch((err: ResponseError) => {
                     resolve(null);
-                    pushDanger('Mislukt!', err.data.message);
+                    pushApiError(err);
                 })
                 .finally(() => setProgress(100));
         });
-    }, [implementation?.email_logo, media, mediaFile, mediaService, pushDanger, setProgress]);
+    }, [implementation?.email_logo, media, mediaFile, mediaService, pushApiError, setProgress]);
 
     const form = useFormBuilder(
         {
@@ -96,7 +96,7 @@ export default function ImplementationsNotificationsBranding() {
                 .catch((err: ResponseError) => {
                     form.setIsLocked(false);
                     form.setErrors(err.data.errors);
-                    pushDanger('Mislukt!', 'Er zijn een aantal problemen opgetreden, probeer het opnieuw!');
+                    pushApiError(err);
                 })
                 .finally(() => setProgress(100));
         },
@@ -108,8 +108,8 @@ export default function ImplementationsNotificationsBranding() {
         implementationService
             .read(activeOrganization.id, parseInt(id))
             .then((res) => setImplementation(res.data.data))
-            .catch((res: ResponseError) => pushDanger('Mislukt!', res.data.message));
-    }, [implementationService, activeOrganization.id, id, pushDanger]);
+            .catch(pushApiError);
+    }, [implementationService, activeOrganization.id, id, pushApiError]);
 
     useEffect(() => {
         if (implementation) {
diff --git a/react/src/dashboard/components/pages/implementations-notifications-edit/ImplementationsNotificationsEdit.tsx b/react/src/dashboard/components/pages/implementations-notifications-edit/ImplementationsNotificationsEdit.tsx
index 0f8ece55f..98a978faa 100644
--- a/react/src/dashboard/components/pages/implementations-notifications-edit/ImplementationsNotificationsEdit.tsx
+++ b/react/src/dashboard/components/pages/implementations-notifications-edit/ImplementationsNotificationsEdit.tsx
@@ -1,8 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
-import usePushDanger from '../../../hooks/usePushDanger';
-import { ResponseError } from '../../../props/ApiResponses';
 import useImplementationService from '../../../services/ImplementationService';
 import Implementation from '../../../props/models/Implementation';
 import useImplementationNotificationService from '../../../services/ImplementationNotificationService';
@@ -14,12 +12,13 @@ import { useFundService } from '../../../services/FundService';
 import Fund from '../../../props/models/Fund';
 import useTranslate from '../../../hooks/useTranslate';
 import useSetProgress from '../../../hooks/useSetProgress';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function ImplementationsNotificationsEdit() {
     const { id, implementationId } = useParams();
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const activeOrganization = useActiveOrganization();
 
     const fundService = useFundService();
@@ -38,9 +37,9 @@ export default function ImplementationsNotificationsEdit() {
         implementationService
             .read(activeOrganization.id, parseInt(implementationId))
             .then((res) => setImplementation(res.data.data))
-            .catch((res: ResponseError) => pushDanger('Mislukt!', res.data.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [implementationService, activeOrganization.id, implementationId, pushDanger, setProgress]);
+    }, [implementationService, activeOrganization.id, implementationId, pushApiError, setProgress]);
 
     const fetchNotification = useCallback(() => {
         setProgress(0);
@@ -48,13 +47,13 @@ export default function ImplementationsNotificationsEdit() {
         implementationNotificationsService
             .read(activeOrganization.id, parseInt(implementationId), parseInt(id), { fund_id: fund?.id })
             .then((res) => setNotification(res.data.data))
-            .catch((res: ResponseError) => pushDanger('Mislukt!', res.data.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
     }, [
         id,
         fund?.id,
-        pushDanger,
         setProgress,
+        pushApiError,
         implementationId,
         activeOrganization.id,
         implementationNotificationsService,
@@ -71,10 +70,10 @@ export default function ImplementationsNotificationsEdit() {
                     stats: 'min',
                 })
                 .then((res) => setFunds([{ id: null, name: 'Alle fondsen' }, ...res.data.data]))
-                .catch((res: ResponseError) => pushDanger('Mislukt!', res.data.message))
+                .catch(pushApiError)
                 .finally(() => setProgress(100));
         }
-    }, [setProgress, implementation, fundService, activeOrganization.id, pushDanger]);
+    }, [setProgress, implementation, fundService, activeOrganization.id, pushApiError]);
 
     useEffect(() => {
         fetchImplementation();
diff --git a/react/src/dashboard/components/pages/implementations-notifications-edit/elements/SystemNotificationEditor.tsx b/react/src/dashboard/components/pages/implementations-notifications-edit/elements/SystemNotificationEditor.tsx
index f8e56e244..f52cc83a2 100644
--- a/react/src/dashboard/components/pages/implementations-notifications-edit/elements/SystemNotificationEditor.tsx
+++ b/react/src/dashboard/components/pages/implementations-notifications-edit/elements/SystemNotificationEditor.tsx
@@ -132,17 +132,14 @@ export default function SystemNotificationEditor({
         <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-row">
-                        <div className="flex flex-pad flex-grow">
-                            <div className={`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>
-                            </div>
-                        </div>
-
-                        {notification.editable && (
-                            <div className="flex flex-pad flex-vertical flex-center">
+                    <div className={`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>
+                    </div>
+                    {notification.editable && (
+                        <div className="card-header-filters">
+                            <div className="block block-inline-filters">
                                 <ToggleControl
                                     id={'enable_all'}
                                     className="form-toggle-danger"
@@ -152,8 +149,8 @@ export default function SystemNotificationEditor({
                                     labelRight={false}
                                 />
                             </div>
-                        )}
-                    </div>
+                        </div>
+                    )}
                 </div>
 
                 {funds && funds.length > 0 && (
diff --git a/react/src/dashboard/components/pages/implementations-notifications-edit/elements/SystemNotificationTemplateEditor.tsx b/react/src/dashboard/components/pages/implementations-notifications-edit/elements/SystemNotificationTemplateEditor.tsx
index 0d98589be..26c02e7e4 100644
--- a/react/src/dashboard/components/pages/implementations-notifications-edit/elements/SystemNotificationTemplateEditor.tsx
+++ b/react/src/dashboard/components/pages/implementations-notifications-edit/elements/SystemNotificationTemplateEditor.tsx
@@ -8,7 +8,6 @@ import usePushSuccess from '../../../../hooks/usePushSuccess';
 import Organization from '../../../../props/models/Organization';
 import SystemNotification from '../../../../props/models/SystemNotification';
 import Fund from '../../../../props/models/Fund';
-import usePushDanger from '../../../../hooks/usePushDanger';
 import useFormBuilder from '../../../../hooks/useFormBuilder';
 import ModalDangerZone from '../../../modals/ModalDangerZone';
 import useOpenModal from '../../../../hooks/useOpenModal';
@@ -21,6 +20,7 @@ import useTranslate from '../../../../hooks/useTranslate';
 import NotificationTemplate from '../../../../props/models/NotificationTemplate';
 import { uniqueId } from 'lodash';
 import useSetProgress from '../../../../hooks/useSetProgress';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 type Variables = { [key: string]: string };
 
@@ -51,9 +51,9 @@ export default function SystemNotificationTemplateEditor({
 }) {
     const translate = useTranslate();
     const openModal = useOpenModal();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const implementationNotificationsService = useImplementationNotificationService();
 
@@ -187,15 +187,15 @@ export default function SystemNotificationTemplateEditor({
                     cancelTemplateEdit();
                     pushSuccess('Opgeslagen', `${header.title} sjabloon opgeslagen.`);
                 })
-                .catch((res: ResponseError) => {
-                    if (res.status === 422) {
+                .catch((err: ResponseError) => {
+                    if (err.status === 422) {
                         setFormErrors({
-                            subject: res.data?.errors['templates.0.title'],
-                            content: res.data?.errors['templates.0.content'],
+                            subject: err.data?.errors['templates.0.title'],
+                            content: err.data?.errors['templates.0.content'],
                         });
                     }
 
-                    pushDanger('Fout!', 'Er is iets fout gegaan.');
+                    pushApiError(err);
                 })
                 .finally(() => {
                     form.setIsLocked(false);
@@ -206,10 +206,10 @@ export default function SystemNotificationTemplateEditor({
             form,
             compose,
             onChange,
-            pushDanger,
             pushSuccess,
             setProgress,
             markdownRaw,
+            pushApiError,
             header.title,
             organization.id,
             notification.id,
@@ -346,14 +346,12 @@ export default function SystemNotificationTemplateEditor({
         <div className="card card-collapsed">
             {compose ? (
                 <div className="card-header">
-                    <div className="flex flex-row">
-                        <div className="flex flex-pad flex-grow">
-                            <div className="card-title">
-                                <em className={`mdi mdi-${header.icon}`} />
-                                <span>{header.title}</span>
-                            </div>
-                        </div>
-                        <div className="flex flex-pad flex-end">
+                    <div className="flex flex-grow card-title">
+                        <em className={`mdi mdi-${header.icon}`} />
+                        <span>{header.title}</span>
+                    </div>
+                    <div className="card-header-filters">
+                        <div className="block block-inline-filters">
                             {edit ? (
                                 <button
                                     className="button button-default button-sm button-flat"
@@ -376,18 +374,16 @@ export default function SystemNotificationTemplateEditor({
                 </div>
             ) : (
                 <div className={`card-header ${enable && notification.enable_all ? '' : 'card-header-danger'}`}>
-                    <div className="flex flex-row">
-                        <div className="flex flex-pad flex-grow">
-                            <div className="card-title">
-                                <em className={`mdi mdi-${header.icon}`} />
-                                <span>{header.title}</span>
-                                &nbsp;
-                                {fund && <span>({fund.name})</span>}
-                            </div>
-                        </div>
+                    <div className="flex flex-grow card-title">
+                        <em className={`mdi mdi-${header.icon}`} />
+                        <span>{header.title}</span>
+                        &nbsp;
+                        {fund && <span>({fund.name})</span>}
+                    </div>
 
-                        {notification.editable && !edit && (
-                            <div className="flex flex-pad flex-vertical flex-center">
+                    {notification.editable && !edit && (
+                        <div className="card-header-filters">
+                            <div className="block block-inline-filters">
                                 <ToggleControl
                                     id={'enable_' + type}
                                     className={`form-toggle-danger ${notification.enable_all ? '' : 'form-toggle-off'}`}
@@ -403,10 +399,12 @@ export default function SystemNotificationTemplateEditor({
                                     }}
                                 />
                             </div>
-                        )}
+                        </div>
+                    )}
 
-                        {edit && (
-                            <div className="flex flex-pad flex-end">
+                    {edit && (
+                        <div className="card-header-filters">
+                            <div className="block block-inline-filters">
                                 <button
                                     className="button button-danger button-sm button-flat"
                                     onClick={() => resetToDefault()}>
@@ -421,8 +419,8 @@ export default function SystemNotificationTemplateEditor({
                                     Annuleren
                                 </button>
                             </div>
-                        )}
-                    </div>
+                        </div>
+                    )}
                 </div>
             )}
 
diff --git a/react/src/dashboard/components/pages/implementations-notifications-send/ImplementationsNotificationsSend.tsx b/react/src/dashboard/components/pages/implementations-notifications-send/ImplementationsNotificationsSend.tsx
index a1f7458ca..1e5f701d1 100644
--- a/react/src/dashboard/components/pages/implementations-notifications-send/ImplementationsNotificationsSend.tsx
+++ b/react/src/dashboard/components/pages/implementations-notifications-send/ImplementationsNotificationsSend.tsx
@@ -2,7 +2,6 @@ import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
 import usePushSuccess from '../../../hooks/usePushSuccess';
-import usePushDanger from '../../../hooks/usePushDanger';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import useSetProgress from '../../../hooks/useSetProgress';
 import { PaginationData, ResponseError, ResponseErrorData } from '../../../props/ApiResponses';
@@ -28,6 +27,7 @@ import SystemNotification from '../../../props/models/SystemNotification';
 import useFundIdentitiesExportService from '../../../services/exports/useFundIdentitiesExportService';
 import useTranslate from '../../../hooks/useTranslate';
 import EmptyCard from '../../elements/empty-card/EmptyCard';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function ImplementationsNotificationsSend() {
     const { id } = useParams();
@@ -35,9 +35,9 @@ export default function ImplementationsNotificationsSend() {
 
     const openModal = useOpenModal();
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const navigateState = useNavigateState();
 
     const paginatorService = usePaginatorService();
@@ -201,14 +201,14 @@ export default function ImplementationsNotificationsSend() {
     );
 
     const onError = useCallback(
-        (res: ResponseError) => {
-            pushDanger('Error!', res.data.message);
+        (err: ResponseError) => {
+            pushApiError(err);
 
-            if (res.status === 422) {
-                setErrors(res.data.errors);
+            if (err.status === 422) {
+                setErrors(err.data.errors);
             }
         },
-        [pushDanger],
+        [pushApiError],
     );
 
     const submit = useCallback(() => {
@@ -328,11 +328,11 @@ export default function ImplementationsNotificationsSend() {
 
                 setImplementation(res.data.data);
             })
-            .catch((res: ResponseError) => pushDanger('Mislukt!', res.data.message));
+            .catch(pushApiError);
     }, [
         id,
         navigateState,
-        pushDanger,
+        pushApiError,
         implementationService,
         activeOrganization.id,
         activeOrganization.allow_custom_fund_notifications,
@@ -345,8 +345,8 @@ export default function ImplementationsNotificationsSend() {
                 setFunds(res.data.data);
                 setFund(res.data.data[0]);
             })
-            .catch((res: ResponseError) => pushDanger('Mislukt!', res.data.message));
-    }, [fundService, activeOrganization.id, implementation?.id, pushDanger]);
+            .catch(pushApiError);
+    }, [fundService, activeOrganization.id, implementation?.id, pushApiError]);
 
     const fetchFundIdentities = useCallback(() => {
         if (fund) {
@@ -355,13 +355,13 @@ export default function ImplementationsNotificationsSend() {
             fundService
                 .listIdentities(activeOrganization.id, fund.id, identitiesFilters.activeValues)
                 .then((res) => setIdentities(res.data))
-                .catch((res: ResponseError) => pushDanger('Mislukt!', res.data.message))
+                .catch(pushApiError)
                 .finally(() => {
                     setLastIdentitiesQuery(identitiesFilters.activeValues.q);
                     setProgress(100);
                 });
         }
-    }, [fund, setProgress, fundService, activeOrganization.id, identitiesFilters?.activeValues, pushDanger]);
+    }, [fund, setProgress, fundService, activeOrganization.id, identitiesFilters?.activeValues, pushApiError]);
 
     useEffect(() => {
         if (implementation) {
@@ -401,14 +401,12 @@ export default function ImplementationsNotificationsSend() {
 
                 <div className="card">
                     <div className="card-header">
-                        <div className="flex">
-                            <div className="flex flex-grow">
-                                <div className="card-title">
-                                    <em className="mdi mdi-account-multiple-outline" />
-                                    Kies een doelgroep
-                                </div>
-                            </div>
-                            <div className="flex">
+                        <div className="flex flex-grow card-title">
+                            <em className="mdi mdi-account-multiple-outline" />
+                            Kies een doelgroep
+                        </div>
+                        <div className="card-header-filters">
+                            <div className="block block-inline-filters">
                                 {targetGroup == 'identities' &&
                                     hasPermission(activeOrganization, 'manage_vouchers') && (
                                         <div
@@ -421,27 +419,19 @@ export default function ImplementationsNotificationsSend() {
                                         </div>
                                     )}
 
-                                <div className="flex">
-                                    <div>
-                                        <div className="block block-label-tabs">
-                                            <div className="label-tab-set">
-                                                <div
-                                                    className={`label-tab ${
-                                                        targetGroup === 'identities' ? 'active' : ''
-                                                    }`}
-                                                    onClick={() => setTargetGroup('identities')}>
-                                                    <div className="mdi mdi-account-multiple-outline label-tab-icon-start" />
-                                                    Aanvragers
-                                                </div>
-                                                <div
-                                                    className={`label-tab ${
-                                                        targetGroup === 'providers' ? 'active' : ''
-                                                    }`}
-                                                    onClick={() => setTargetGroup('providers')}>
-                                                    <div className="mdi mdi-store-outline label-tab-icon-start" />
-                                                    Aanbieders
-                                                </div>
-                                            </div>
+                                <div className="block block-label-tabs">
+                                    <div className="label-tab-set">
+                                        <div
+                                            className={`label-tab ${targetGroup === 'identities' ? 'active' : ''}`}
+                                            onClick={() => setTargetGroup('identities')}>
+                                            <div className="mdi mdi-account-multiple-outline label-tab-icon-start" />
+                                            Aanvragers
+                                        </div>
+                                        <div
+                                            className={`label-tab ${targetGroup === 'providers' ? 'active' : ''}`}
+                                            onClick={() => setTargetGroup('providers')}>
+                                            <div className="mdi mdi-store-outline label-tab-icon-start" />
+                                            Aanbieders
                                         </div>
                                     </div>
                                 </div>
diff --git a/react/src/dashboard/components/pages/implementations-notifications/ImplementationsNotifications.tsx b/react/src/dashboard/components/pages/implementations-notifications/ImplementationsNotifications.tsx
index 97ca74a73..9042d443a 100644
--- a/react/src/dashboard/components/pages/implementations-notifications/ImplementationsNotifications.tsx
+++ b/react/src/dashboard/components/pages/implementations-notifications/ImplementationsNotifications.tsx
@@ -1,9 +1,8 @@
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
-import usePushDanger from '../../../hooks/usePushDanger';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
-import { PaginationData, ResponseError } from '../../../props/ApiResponses';
+import { PaginationData } from '../../../props/ApiResponses';
 import useImplementationService from '../../../services/ImplementationService';
 import Implementation from '../../../props/models/Implementation';
 import Tooltip from '../../elements/tooltip/Tooltip';
@@ -12,12 +11,13 @@ import useImplementationNotificationService from '../../../services/Implementati
 import SystemNotification from '../../../props/models/SystemNotification';
 import useTranslate from '../../../hooks/useTranslate';
 import EmptyCard from '../../elements/empty-card/EmptyCard';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function ImplementationsNotifications() {
     const activeOrganization = useActiveOrganization();
 
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
+    const pushApiError = usePushApiError();
 
     const implementationService = useImplementationService();
     const implementationNotificationsService = useImplementationNotificationService();
@@ -124,15 +124,15 @@ export default function ImplementationsNotifications() {
         implementationNotificationsService
             .list(activeOrganization.id, implementation.id)
             .then((res) => setNotifications(res.data))
-            .catch((res: ResponseError) => pushDanger('Mislukt!', res.data.message));
-    }, [implementationNotificationsService, activeOrganization.id, implementation?.id, pushDanger]);
+            .catch(pushApiError);
+    }, [implementationNotificationsService, activeOrganization.id, implementation?.id, pushApiError]);
 
     const fetchImplementations = useCallback(() => {
         implementationService
             .list(activeOrganization.id)
             .then((res) => setImplementations(res.data))
-            .catch((res: ResponseError) => pushDanger('Mislukt!', res.data.message));
-    }, [implementationService, activeOrganization.id, pushDanger]);
+            .catch(pushApiError);
+    }, [implementationService, activeOrganization.id, pushApiError]);
 
     useEffect(() => {
         fetchImplementations();
diff --git a/react/src/dashboard/components/pages/implementations-social-media/ImplementationsSocialMedia.tsx b/react/src/dashboard/components/pages/implementations-social-media/ImplementationsSocialMedia.tsx
index 0f65e6316..233445d65 100644
--- a/react/src/dashboard/components/pages/implementations-social-media/ImplementationsSocialMedia.tsx
+++ b/react/src/dashboard/components/pages/implementations-social-media/ImplementationsSocialMedia.tsx
@@ -2,7 +2,6 @@ import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
 import usePushSuccess from '../../../hooks/usePushSuccess';
-import usePushDanger from '../../../hooks/usePushDanger';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import useSetProgress from '../../../hooks/useSetProgress';
 import { PaginationData, ResponseError } from '../../../props/ApiResponses';
@@ -22,14 +21,15 @@ import useFilterNext from '../../../modules/filter_next/useFilterNext';
 import { NumberParam } from 'use-query-params';
 import { useParams } from 'react-router-dom';
 import EmptyCard from '../../elements/empty-card/EmptyCard';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function ImplementationsSocialMedia() {
     const { id } = useParams();
 
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const navigateState = useNavigateState();
     const openModal = useOpenModal();
     const activeOrganization = useActiveOrganization();
@@ -65,9 +65,9 @@ export default function ImplementationsSocialMedia() {
                     return navigateState('implementations', { organizationId: activeOrganization.id });
                 }
 
-                pushDanger('Mislukt!', err.data.message);
+                pushApiError(err);
             });
-    }, [implementationService, activeOrganization.id, id, pushDanger, navigateState]);
+    }, [implementationService, activeOrganization.id, id, pushApiError, navigateState]);
 
     const fetchSocialMedias = useCallback(() => {
         if (implementation) {
@@ -76,7 +76,7 @@ export default function ImplementationsSocialMedia() {
             implementationSocialMediaService
                 .list(activeOrganization.id, implementation.id, filterActiveValues)
                 .then((res) => setSocialMedias(res.data))
-                .catch((res: ResponseError) => pushDanger('Mislukt!', res.data.message))
+                .catch(pushApiError)
                 .finally(() => setProgress(100));
         }
     }, [
@@ -84,7 +84,7 @@ export default function ImplementationsSocialMedia() {
         filterActiveValues,
         implementation,
         implementationSocialMediaService,
-        pushDanger,
+        pushApiError,
         setProgress,
     ]);
 
@@ -127,9 +127,7 @@ export default function ImplementationsSocialMedia() {
                                     pushSuccess('Opgeslagen!');
                                     fetchSocialMedias();
                                 })
-                                .catch((err: ResponseError) => {
-                                    pushDanger('Error!', err?.data?.message);
-                                })
+                                .catch(pushApiError)
                                 .finally(() => {
                                     setProgress(100);
                                 });
@@ -147,7 +145,7 @@ export default function ImplementationsSocialMedia() {
             implementation?.id,
             pushSuccess,
             fetchSocialMedias,
-            pushDanger,
+            pushApiError,
         ],
     );
 
@@ -187,20 +185,18 @@ export default function ImplementationsSocialMedia() {
 
             <div className="card">
                 <div className="card-header">
-                    <div className="flex">
-                        <div className="flex flex-grow">
-                            <div className="card-title">{`Social media links (${socialMedias.meta.total})`}</div>
-                        </div>
-                        <div className="flex">
-                            <div className="block block-inline-filters">
-                                <a
-                                    className="button button-primary button-sm"
-                                    onClick={() => editSocialMedia()}
-                                    id="add_social_media">
-                                    <em className="mdi mdi-plus-circle icon-start" />
-                                    Toevoegen
-                                </a>
-                            </div>
+                    <div className="flex flex-grow card-title">
+                        <div className="card-title">{`Social media links (${socialMedias.meta.total})`}</div>
+                    </div>
+                    <div className="card-header-filters">
+                        <div className="block block-inline-filters">
+                            <a
+                                className="button button-primary button-sm"
+                                onClick={() => editSocialMedia()}
+                                id="add_social_media">
+                                <em className="mdi mdi-plus-circle icon-start" />
+                                Toevoegen
+                            </a>
                         </div>
                     </div>
                 </div>
diff --git a/react/src/dashboard/components/pages/implementations-view/ImplementationsView.tsx b/react/src/dashboard/components/pages/implementations-view/ImplementationsView.tsx
index f3e2de71c..ce516eff0 100644
--- a/react/src/dashboard/components/pages/implementations-view/ImplementationsView.tsx
+++ b/react/src/dashboard/components/pages/implementations-view/ImplementationsView.tsx
@@ -2,7 +2,6 @@ import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import useImplementationService from '../../../services/ImplementationService';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import { PaginationData, ResponseError } from '../../../props/ApiResponses';
-import usePushDanger from '../../../hooks/usePushDanger';
 import { useNavigate, useParams } from 'react-router-dom';
 import useAssetUrl from '../../../hooks/useAssetUrl';
 import { hasPermission } from '../../../helpers/utils';
@@ -19,14 +18,15 @@ 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';
 
 export default function ImplementationsView() {
     const { id } = useParams();
 
     const navigate = useNavigate();
     const assetUrl = useAssetUrl();
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const activeOrganization = useActiveOrganization();
 
@@ -42,14 +42,14 @@ export default function ImplementationsView() {
         implementationService
             .read(activeOrganization.id, parseInt(id))
             .then((res) => setImplementation(res.data.data))
-            .catch((res: ResponseError) => {
-                if (res.status === 403) {
+            .catch((err: ResponseError) => {
+                if (err.status === 403) {
                     navigate(getStateRouteUrl('implementations', { organizationId: activeOrganization.id }));
                 }
 
-                pushDanger('Mislukt!', res.data.message);
+                pushApiError(err);
             });
-    }, [activeOrganization.id, id, implementationService, navigate, pushDanger]);
+    }, [activeOrganization.id, id, implementationService, navigate, pushApiError]);
 
     const { headElement, configsElement } = useConfigurableTable(implementationService.getColumns());
 
@@ -59,9 +59,9 @@ export default function ImplementationsView() {
         fundService
             .list(activeOrganization.id, { implementation_id: parseInt(id), ...filter.activeValues })
             .then((res) => setFunds(res.data))
-            .catch((res: ResponseError) => pushDanger('Mislukt!', res.data.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [setProgress, fundService, activeOrganization.id, id, filter.activeValues, pushDanger]);
+    }, [setProgress, fundService, activeOrganization.id, id, filter.activeValues, pushApiError]);
 
     useEffect(() => {
         fetchImplementation();
@@ -167,7 +167,7 @@ export default function ImplementationsView() {
             </div>
 
             <div className="card card-collapsed">
-                <div className="card-header card-header-next">
+                <div className="card-header">
                     <div className="card-title flex flex-grow">Fonds gekoppeld aan webshop</div>
                     <div className="card-header-filters">
                         <div className="block block-inline-filters">
diff --git a/react/src/dashboard/components/pages/implementations/Implementations.tsx b/react/src/dashboard/components/pages/implementations/Implementations.tsx
index 532fa5ace..fd33eaa66 100644
--- a/react/src/dashboard/components/pages/implementations/Implementations.tsx
+++ b/react/src/dashboard/components/pages/implementations/Implementations.tsx
@@ -1,8 +1,7 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import useImplementationService from '../../../services/ImplementationService';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
-import { PaginationData, ResponseError } from '../../../props/ApiResponses';
-import usePushDanger from '../../../hooks/usePushDanger';
+import { PaginationData } from '../../../props/ApiResponses';
 import { useNavigateState } from '../../../modules/state_router/Router';
 import useFilter from '../../../hooks/useFilter';
 import usePaginatorService from '../../../modules/paginator/services/usePaginatorService';
@@ -12,10 +11,11 @@ import StateNavLink from '../../../modules/state_router/StateNavLink';
 import Implementation from '../../../props/models/Implementation';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
 import EmptyCard from '../../elements/empty-card/EmptyCard';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function Implementations() {
     const assetUrl = useAssetUrl();
-    const pushDanger = usePushDanger();
+    const pushApiError = usePushApiError();
     const navigateState = useNavigateState();
     const activeOrganization = useActiveOrganization();
 
@@ -44,8 +44,8 @@ export default function Implementations() {
         implementationService
             .list(activeOrganization.id, filter.activeValues)
             .then((res) => setImplementations(res.data))
-            .catch((res: ResponseError) => pushDanger('Mislukt!', res.data.message));
-    }, [activeOrganization.id, filter.activeValues, implementationService, pushDanger]);
+            .catch(pushApiError);
+    }, [activeOrganization.id, filter.activeValues, implementationService, pushApiError]);
 
     useEffect(() => {
         fetchImplementations();
@@ -58,23 +58,17 @@ export default function Implementations() {
     return (
         <div className="card card-collapsed">
             <div className="card-header">
-                <div className="flex">
-                    <div className="flex flex-grow">
-                        <div className="card-title">Webshops</div>
-                    </div>
-                    <div className="flex">
-                        <div className="block block-inline-filters">
-                            <div className="form">
-                                <div className="form-group">
-                                    <input
-                                        type="text"
-                                        value={filter.values.q}
-                                        placeholder="Zoeken"
-                                        className="form-control"
-                                        onChange={(e) => filter.update({ q: e.target.value })}
-                                    />
-                                </div>
-                            </div>
+                <div className="flex flex-grow card-title">Webshops</div>
+                <div className="card-header-filters">
+                    <div className="block block-inline-filters form">
+                        <div className="form-group">
+                            <input
+                                type="text"
+                                value={filter.values.q}
+                                placeholder="Zoeken"
+                                className="form-control"
+                                onChange={(e) => filter.update({ q: e.target.value })}
+                            />
                         </div>
                     </div>
                 </div>
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 2d44e2c34..73169f84c 100644
--- a/react/src/dashboard/components/pages/offices-edit/elements/OfficesForm.tsx
+++ b/react/src/dashboard/components/pages/offices-edit/elements/OfficesForm.tsx
@@ -6,7 +6,6 @@ import { NavLink } from 'react-router-dom';
 import { getStateRouteUrl, useNavigateState } from '../../../../modules/state_router/Router';
 import { useMediaService } from '../../../../services/MediaService';
 import LoadingCard from '../../../elements/loading-card/LoadingCard';
-import usePushDanger from '../../../../hooks/usePushDanger';
 import usePushSuccess from '../../../../hooks/usePushSuccess';
 import useSetProgress from '../../../../hooks/useSetProgress';
 import ScheduleControl from './ScheduleControl';
@@ -17,12 +16,13 @@ import OfficeSchedule from '../../../../props/models/OfficeSchedule';
 import { ResponseError } from '../../../../props/ApiResponses';
 import Media from '../../../../props/models/Media';
 import useTranslate from '../../../../hooks/useTranslate';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 export default function OfficesForm({ organization, id }: { organization: Organization; id?: number }) {
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const navigateState = useNavigateState();
 
     const mediaService = useMediaService();
@@ -83,17 +83,15 @@ export default function OfficesForm({ organization, id }: { organization: Organi
                 : officeService.store(organization.id, { ...values, media_uid });
 
             promise
-                .then(
-                    () => {
-                        navigateState('offices', { organizationId: organization.id });
-                        pushSuccess('Gelukt!');
-                    },
-                    (err: ResponseError) => {
-                        form.setIsLocked(false);
-                        form.setErrors(err.data.errors);
-                        pushDanger('Mislukt!', err.data.message);
-                    },
-                )
+                .then(() => {
+                    navigateState('offices', { organizationId: organization.id });
+                    pushSuccess('Gelukt!');
+                })
+                .catch((err: ResponseError) => {
+                    form.setIsLocked(false);
+                    form.setErrors(err.data.errors);
+                    pushApiError(err);
+                })
                 .finally(() => setProgress(100));
         });
     });
diff --git a/react/src/dashboard/components/pages/offices/Offices.tsx b/react/src/dashboard/components/pages/offices/Offices.tsx
index 511564df6..a601056ef 100644
--- a/react/src/dashboard/components/pages/offices/Offices.tsx
+++ b/react/src/dashboard/components/pages/offices/Offices.tsx
@@ -16,9 +16,8 @@ import ModalDangerZone from '../../modals/ModalDangerZone';
 import useSetProgress from '../../../hooks/useSetProgress';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import usePushSuccess from '../../../hooks/usePushSuccess';
-import usePushDanger from '../../../hooks/usePushDanger';
-import { ResponseError } from '../../../props/ApiResponses';
 import useTranslate from '../../../hooks/useTranslate';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 interface OfficeLocal extends Office {
     scheduleByDay: { [key: string]: OfficeSchedule };
@@ -34,7 +33,7 @@ export default function Offices() {
     const officeService = useOfficeService();
     const setProgress = useSetProgress();
     const pushSuccess = usePushSuccess();
-    const pushDanger = usePushDanger();
+    const pushApiError = usePushApiError();
 
     const [weekDays] = useState(officeService.scheduleWeekDays());
     const [offices, setOffices] = useState<Array<OfficeLocal>>(null);
@@ -79,7 +78,7 @@ export default function Offices() {
                                     fetchOffices();
                                     pushSuccess('Vestiging is verwijderd.');
                                 })
-                                .catch((err: ResponseError) => pushDanger(err.data.message));
+                                .catch(pushApiError);
                         },
                     }}
                     buttonCancel={{
@@ -88,7 +87,7 @@ export default function Offices() {
                 />
             ));
         },
-        [fetchOffices, officeService, openModal, pushDanger, pushSuccess, translate],
+        [fetchOffices, officeService, openModal, pushApiError, pushSuccess, translate],
     );
 
     const confirmHasEmployees = useCallback(() => {
@@ -211,7 +210,7 @@ export default function Offices() {
 
             {offices && (
                 <div className="card">
-                    <div className="card-header card-header-next">
+                    <div className="card-header">
                         <div className="card-title flex flex-grow">
                             {translate('offices.labels.offices')} ({offices?.length})
                         </div>
diff --git a/react/src/dashboard/components/pages/organizations-edit/elements/OrganizationForm.tsx b/react/src/dashboard/components/pages/organizations-edit/elements/OrganizationForm.tsx
index dbeaa5920..259865c50 100644
--- a/react/src/dashboard/components/pages/organizations-edit/elements/OrganizationForm.tsx
+++ b/react/src/dashboard/components/pages/organizations-edit/elements/OrganizationForm.tsx
@@ -15,7 +15,6 @@ import { useNavigateState } from '../../../../modules/state_router/Router';
 import { useMediaService } from '../../../../services/MediaService';
 import LoadingCard from '../../../elements/loading-card/LoadingCard';
 import useAuthIdentity from '../../../../hooks/useAuthIdentity';
-import usePushDanger from '../../../../hooks/usePushDanger';
 import usePushSuccess from '../../../../hooks/usePushSuccess';
 import useSetProgress from '../../../../hooks/useSetProgress';
 import MarkdownEditor from '../../../elements/forms/markdown-editor/MarkdownEditor';
@@ -25,6 +24,7 @@ import useEnvData from '../../../../hooks/useEnvData';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import Media from '../../../../props/models/Media';
 import useTranslate from '../../../../hooks/useTranslate';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 export default function OrganizationForm() {
     const { organizationId } = useParams();
@@ -34,9 +34,9 @@ export default function OrganizationForm() {
     const authIdentity = useAuthIdentity();
 
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const envData = useEnvData();
     const isProvider = useMemo(() => envData?.client_type === 'provider', [envData?.client_type]);
@@ -133,7 +133,7 @@ export default function OrganizationForm() {
                 .catch((err: ResponseError) => {
                     form.setIsLocked(false);
                     form.setErrors(err.data.errors);
-                    pushDanger('Mislukt!', err.data.message);
+                    pushApiError(err);
                 })
                 .finally(() => setProgress(100));
         });
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 ab2862b2d..5b261a763 100644
--- a/react/src/dashboard/components/pages/organizations-funds-edit/OrganizationsFundsEdit.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-edit/OrganizationsFundsEdit.tsx
@@ -43,6 +43,7 @@ import Media from '../../../props/models/Media';
 import RecordType from '../../../props/models/RecordType';
 import FaqEditor from '../../elements/faq-editor-funds/FaqEditor';
 import FormGroupInfo from '../../elements/forms/elements/FormGroupInfo';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function OrganizationsFundsEdit() {
     const { fundId } = useParams();
@@ -55,6 +56,7 @@ export default function OrganizationsFundsEdit() {
     const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
     const pushSuccess = usePushSuccess();
+    const pushApiError = usePushApiError();
     const navigateState = useNavigateState();
 
     const tagService = useTagService();
@@ -156,11 +158,11 @@ export default function OrganizationsFundsEdit() {
                 .store('fund_logo', mediaFile)
                 .then((res) => res.data?.data)
                 .catch((err: ResponseError) => {
-                    pushDanger('Mislukt!', err.data?.message || 'Onbekende foutmelding!');
+                    pushApiError(err);
                     return null;
                 });
         },
-        [mediaService, pushDanger],
+        [mediaService, pushApiError],
     );
 
     const form = useFormBuilder<{
diff --git a/react/src/dashboard/components/pages/organizations-funds-security/OrganizationsFundsSecurity.tsx b/react/src/dashboard/components/pages/organizations-funds-security/OrganizationsFundsSecurity.tsx
index 41ac5f946..45ea431fc 100644
--- a/react/src/dashboard/components/pages/organizations-funds-security/OrganizationsFundsSecurity.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-security/OrganizationsFundsSecurity.tsx
@@ -6,7 +6,6 @@ import { useParams } from 'react-router-dom';
 import useSetProgress from '../../../hooks/useSetProgress';
 import usePushSuccess from '../../../hooks/usePushSuccess';
 import { useFundService } from '../../../services/FundService';
-import usePushDanger from '../../../hooks/usePushDanger';
 import { ResponseError } from '../../../props/ApiResponses';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import SelectControl from '../../elements/select-control/SelectControl';
@@ -14,15 +13,16 @@ import SelectControlOptions from '../../elements/select-control/templates/Select
 import OrganizationsFundsSecurityAuth2FAForm from './elements/OrganizationsFundsSecurityAuth2FAForm';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
 import useTranslate from '../../../hooks/useTranslate';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function OrganizationsFundsSecurity() {
     const fundId = parseInt(useParams().fundId);
     const activeOrganization = useActiveOrganization();
 
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const fundService = useFundService();
 
@@ -49,7 +49,7 @@ export default function OrganizationsFundsSecurity() {
             .update(activeOrganization.id, fundId, values)
             .then(() => pushSuccess('Opgeslagen!'))
             .catch((err: ResponseError) => {
-                pushDanger('Mislukt!', err.data?.message || 'Onbekende foutmelding.');
+                pushApiError(err);
                 form.setErrors(err.data.errors);
             })
             .finally(() => {
diff --git a/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowConfigsCard.tsx b/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowConfigsCard.tsx
index 5d3ea6cea..9f54a6bd1 100644
--- a/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowConfigsCard.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowConfigsCard.tsx
@@ -7,8 +7,8 @@ import FormError from '../../../elements/forms/errors/FormError';
 import { useFundService } from '../../../../services/FundService';
 import { ResponseError } from '../../../../props/ApiResponses';
 import usePushSuccess from '../../../../hooks/usePushSuccess';
-import usePushDanger from '../../../../hooks/usePushDanger';
 import useSetProgress from '../../../../hooks/useSetProgress';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 export default function OrganizationsFundsShowConfigsCard({
     fund,
@@ -17,9 +17,9 @@ export default function OrganizationsFundsShowConfigsCard({
     fund: Fund;
     setFund: React.Dispatch<React.SetStateAction<Fund>>;
 }) {
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const fundService = useFundService();
 
@@ -80,7 +80,7 @@ export default function OrganizationsFundsShowConfigsCard({
                     });
                 })
                 .catch((err: ResponseError) => {
-                    pushDanger('Mislukt!', err.data?.message || 'Onbekende foutmelding.');
+                    pushApiError(err);
                     form.setErrors(err.data.errors);
                 })
                 .finally(() => {
diff --git a/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowDetailsCard.tsx b/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowDetailsCard.tsx
index 3ed073dc2..d724ecb2f 100644
--- a/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowDetailsCard.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowDetailsCard.tsx
@@ -52,7 +52,7 @@ export default function OrganizationsFundsShowDetailsCard({
 
     return (
         <div className="card">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="flex flex-grow">
                     <div className="card-title">{translate(`funds_show.labels.base_card.header.${viewType}`)}</div>
                 </div>
diff --git a/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowFundRequestConfigCard.tsx b/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowFundRequestConfigCard.tsx
index b3cf6ab8d..c51c742e8 100644
--- a/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowFundRequestConfigCard.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowFundRequestConfigCard.tsx
@@ -8,10 +8,10 @@ import FormGroupInfo from '../../../elements/forms/elements/FormGroupInfo';
 import MarkdownEditor from '../../../elements/forms/markdown-editor/MarkdownEditor';
 import Fund from '../../../../props/models/Fund';
 import { ResponseError } from '../../../../props/ApiResponses';
-import usePushDanger from '../../../../hooks/usePushDanger';
 import { useFundService } from '../../../../services/FundService';
 import usePushSuccess from '../../../../hooks/usePushSuccess';
 import classNames from 'classnames';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 export default function OrganizationsFundsShowFundRequestConfigCard({
     fund,
@@ -21,9 +21,9 @@ export default function OrganizationsFundsShowFundRequestConfigCard({
     setFund: React.Dispatch<React.SetStateAction<Fund>>;
 }) {
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const fundService = useFundService();
 
@@ -72,7 +72,7 @@ export default function OrganizationsFundsShowFundRequestConfigCard({
                     form.setErrors({});
                 })
                 .catch((err: ResponseError) => {
-                    pushDanger('Mislukt!', err.data?.message || 'Onbekende foutmelding.');
+                    pushApiError(err);
                     form.setErrors(err.data.errors);
                 })
                 .finally(() => {
diff --git a/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowFundRequestCriteriaCard.tsx b/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowFundRequestCriteriaCard.tsx
index 2af663609..e29b4c564 100644
--- a/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowFundRequestCriteriaCard.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowFundRequestCriteriaCard.tsx
@@ -1,14 +1,13 @@
 import React, { useCallback, useState } from 'react';
 import useSetProgress from '../../../../hooks/useSetProgress';
 import Fund from '../../../../props/models/Fund';
-import { ResponseError } from '../../../../props/ApiResponses';
-import usePushDanger from '../../../../hooks/usePushDanger';
 import { useFundService } from '../../../../services/FundService';
 import usePushSuccess from '../../../../hooks/usePushSuccess';
 import FundCriteriaEditor from '../../../elements/fund-criteria-editor/FundCriteriaEditor';
 import RecordType from '../../../../props/models/RecordType';
 import FundCriterion from '../../../../props/models/FundCriterion';
 import classNames from 'classnames';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 export default function OrganizationsFundsShowFundRequestCriteriaCard({
     fund,
@@ -19,9 +18,9 @@ export default function OrganizationsFundsShowFundRequestCriteriaCard({
     setFund: React.Dispatch<React.SetStateAction<Fund>>;
     recordTypes: Array<RecordType>;
 }) {
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const fundService = useFundService();
 
@@ -37,10 +36,10 @@ export default function OrganizationsFundsShowFundRequestCriteriaCard({
                     fund.criteria = Object.assign(fund.criteria, res.data.data.criteria);
                     pushSuccess('Opgeslagen!');
                 })
-                .catch((err: ResponseError) => pushDanger(err.data.message || 'Error!'))
+                .catch(pushApiError)
                 .finally(() => setProgress(100));
         },
-        [fund, fundService, pushDanger, pushSuccess, setProgress],
+        [fund, fundService, pushApiError, pushSuccess, setProgress],
     );
 
     return (
diff --git a/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowIdentitiesCard.tsx b/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowIdentitiesCard.tsx
index afec898ca..35c5e3825 100644
--- a/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowIdentitiesCard.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowIdentitiesCard.tsx
@@ -73,7 +73,7 @@ export default function OrganizationsFundsShowIdentitiesCard({
 
     return (
         <div className="card">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="flex flex-grow">
                     <div className="card-title">
                         {translate(`funds_show.titles.${viewType}`)}
diff --git a/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowImplementationsCard.tsx b/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowImplementationsCard.tsx
index 39ac087dc..fb5e91898 100644
--- a/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowImplementationsCard.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowImplementationsCard.tsx
@@ -70,7 +70,7 @@ export default function OrganizationsFundsShowImplementationsCard({
 
     return (
         <div className="card">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="flex flex-grow">
                     <div className="card-title">
                         {translate(`funds_show.titles.${viewType}`)}
diff --git a/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowTopUpsCard.tsx b/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowTopUpsCard.tsx
index cdf234661..fea77e421 100644
--- a/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowTopUpsCard.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds-show/elements/OrganizationsFundsShowTopUpsCard.tsx
@@ -72,7 +72,7 @@ export default function OrganizationsFundsShowTopUpsCard({
 
     return (
         <div className="card">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="flex flex-grow">
                     <div className="card-title">
                         {translate(`funds_show.titles.${viewType}`)}
diff --git a/react/src/dashboard/components/pages/organizations-funds/OrganizationFunds.tsx b/react/src/dashboard/components/pages/organizations-funds/OrganizationFunds.tsx
index 6e02a9b6e..887657889 100644
--- a/react/src/dashboard/components/pages/organizations-funds/OrganizationFunds.tsx
+++ b/react/src/dashboard/components/pages/organizations-funds/OrganizationFunds.tsx
@@ -1,5 +1,5 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
-import { PaginationData, ResponseError } from '../../../props/ApiResponses';
+import { PaginationData } from '../../../props/ApiResponses';
 import Fund from '../../../props/models/Fund';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import { hasPermission } from '../../../helpers/utils';
@@ -18,7 +18,6 @@ import Implementation from '../../../props/models/Implementation';
 import { strLimit } from '../../../helpers/string';
 import TableRowActions from '../../elements/tables/TableRowActions';
 import usePushSuccess from '../../../hooks/usePushSuccess';
-import usePushDanger from '../../../hooks/usePushDanger';
 import ModalDangerZone from '../../modals/ModalDangerZone';
 import useOpenModal from '../../../hooks/useOpenModal';
 import { StringParam, useQueryParams, withDefault } from 'use-query-params';
@@ -31,13 +30,14 @@ 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';
 
 export default function OrganizationFunds() {
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
     const pushSuccess = usePushSuccess();
     const openModal = useOpenModal();
+    const pushApiError = usePushApiError();
     const activeOrganization = useActiveOrganization();
 
     const fundService = useFundService();
@@ -140,11 +140,11 @@ export default function OrganizationFunds() {
                         setQueryParams({ funds_type: 'archived' });
                         pushSuccess('Opgeslagen!');
                     })
-                    .catch((err: ResponseError) => pushDanger(err.data.message || 'Error!'))
+                    .catch(pushApiError)
                     .finally(() => setProgress(100));
             });
         },
-        [askConfirmation, fundService, pushDanger, pushSuccess, setProgress, setQueryParams],
+        [askConfirmation, fundService, pushApiError, pushSuccess, setProgress, setQueryParams],
     );
 
     const restoreFund = useCallback(
@@ -161,11 +161,11 @@ export default function OrganizationFunds() {
                         setQueryParams({ funds_type: 'active' });
                         pushSuccess('Opgeslagen!');
                     })
-                    .catch((err: ResponseError) => pushDanger(err.data.message || 'Error!'))
+                    .catch(pushApiError)
                     .finally(() => setProgress(100));
             });
         },
-        [askConfirmation, fundService, pushDanger, pushSuccess, setProgress, setQueryParams],
+        [askConfirmation, fundService, pushApiError, pushSuccess, setProgress, setQueryParams],
     );
 
     const topUpModal = useCallback(
@@ -197,7 +197,7 @@ export default function OrganizationFunds() {
 
     return (
         <div className="card">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="card-title flex flex-grow" data-dusk="fundsTitle">
                     {translate('components.organization_funds.title')} ({funds.meta.total})
                 </div>
diff --git a/react/src/dashboard/components/pages/organizations-security/OrganizationsSecurity.tsx b/react/src/dashboard/components/pages/organizations-security/OrganizationsSecurity.tsx
index 3f6c4c0e0..6fb2f340b 100644
--- a/react/src/dashboard/components/pages/organizations-security/OrganizationsSecurity.tsx
+++ b/react/src/dashboard/components/pages/organizations-security/OrganizationsSecurity.tsx
@@ -7,12 +7,12 @@ import useFormBuilder from '../../../hooks/useFormBuilder';
 import FormError from '../../elements/forms/errors/FormError';
 import { useOrganizationService } from '../../../services/OrganizationService';
 import usePushSuccess from '../../../hooks/usePushSuccess';
-import usePushDanger from '../../../hooks/usePushDanger';
 import { mainContext } from '../../../contexts/MainContext';
 import useSetProgress from '../../../hooks/useSetProgress';
 import CheckboxControl from '../../elements/forms/controls/CheckboxControl';
 import { authContext } from '../../../contexts/AuthContext';
 import { StringParam, useQueryParam } from 'use-query-params';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function OrganizationsSecurity() {
     const activeOrganization = useActiveOrganization();
@@ -20,9 +20,9 @@ export default function OrganizationsSecurity() {
     const { updateIdentity } = useContext(authContext);
     const { setActiveOrganization } = useContext(mainContext);
 
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const [viewType = 'employees', setViewType] = useQueryParam('view_type', StringParam, {
         removeDefaultsFromUrl: true,
@@ -60,17 +60,15 @@ export default function OrganizationsSecurity() {
 
             organizationService
                 .update(activeOrganization.id, form.values)
-                .then(
-                    (res) => {
-                        pushSuccess('Opgeslagen!');
-                        setActiveOrganization(Object.assign(activeOrganization, res.data.data));
-                        updateIdentity().then();
-                    },
-                    (err) => {
-                        pushDanger('Mislukt!', err.data?.message || 'Onbekende foutmelding.');
-                        form.setErrors(err.data.errors);
-                    },
-                )
+                .then((res) => {
+                    pushSuccess('Opgeslagen!');
+                    setActiveOrganization(Object.assign(activeOrganization, res.data.data));
+                    updateIdentity().then();
+                })
+                .catch((err) => {
+                    pushApiError(err);
+                    form.setErrors(err.data.errors);
+                })
                 .finally(() => {
                     setProgress(100);
                     form.setIsLocked(false);
@@ -89,7 +87,7 @@ export default function OrganizationsSecurity() {
                 </div>
                 <div className="card">
                     <form className="form" onSubmit={form.submit}>
-                        <div className="card-header card-header-next">
+                        <div className="card-header">
                             <div className="flex flex-grow">
                                 {viewType == 'employees' && (
                                     <div className="card-title">Tweefactorauthenticatie voor medewerkers</div>
diff --git a/react/src/dashboard/components/pages/payment-methods/PaymentMethods.tsx b/react/src/dashboard/components/pages/payment-methods/PaymentMethods.tsx
index 2e85cad8e..922a24efe 100644
--- a/react/src/dashboard/components/pages/payment-methods/PaymentMethods.tsx
+++ b/react/src/dashboard/components/pages/payment-methods/PaymentMethods.tsx
@@ -20,6 +20,7 @@ import MollieConnectionProfileDetails from './elements/MollieConnectionProfileDe
 import MollieConnectionForm from './elements/MollieConnectionForm';
 import CheckboxControl from '../../elements/forms/controls/CheckboxControl';
 import useTranslate from '../../../hooks/useTranslate';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function PaymentMethods() {
     const activeOrganization = useActiveOrganization();
@@ -30,6 +31,7 @@ export default function PaymentMethods() {
     const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const [loaded, setLoaded] = useState(false);
     const [privacy, setPrivacy] = useState(false);
@@ -38,12 +40,10 @@ export default function PaymentMethods() {
     const [fetchingMollieAccount, setFetchingMollieAccount] = useState(false);
 
     const onResponseError = useCallback(
-        (err: ResponseError & ResponseErrorThrottled, fallbackMessage = 'Onbekende foutmelding!') => {
-            return err.status === 429
-                ? pushDanger(err.data.meta.title, err.data.meta.message)
-                : pushDanger('Mislukt!', err.data?.message || fallbackMessage);
+        (err: ResponseError & ResponseErrorThrottled) => {
+            return err.status === 429 ? pushDanger(err.data.meta.title, err.data.meta.message) : pushApiError(err);
         },
-        [pushDanger],
+        [pushDanger, pushApiError],
     );
 
     const connect = useCallback(() => {
diff --git a/react/src/dashboard/components/pages/payment-methods/elements/MollieConnectionProfileDetails.tsx b/react/src/dashboard/components/pages/payment-methods/elements/MollieConnectionProfileDetails.tsx
index 891e97e47..7594fa50b 100644
--- a/react/src/dashboard/components/pages/payment-methods/elements/MollieConnectionProfileDetails.tsx
+++ b/react/src/dashboard/components/pages/payment-methods/elements/MollieConnectionProfileDetails.tsx
@@ -97,22 +97,21 @@ export default function MollieConnectionProfileDetails({
             {mollieConnection.profile_active ? (
                 <div className="card">
                     <div className="card-header">
-                        <div className="flex">
-                            <div className="flex flex-grow">
-                                <div className="card-title">
-                                    {translate('mollie_connection.titles.current_profile_information')}
-                                </div>
+                        <div className="flex flex-grow card-title">
+                            {translate('mollie_connection.titles.current_profile_information')}
+                        </div>
+                        <div className="card-header-filters">
+                            <div className="block block-inline-filters">
+                                {mollieConnection.profiles.length && (
+                                    <MollieConnectionProfileSelector
+                                        profiles={mollieConnection.profiles}
+                                        currentProfile={currentProfile}
+                                        currentProfileId={currentProfileId}
+                                        onSelect={(currentProfileId) => setCurrentProfileId(currentProfileId)}
+                                        onChange={() => updateCurrentProfile(currentProfileId)}
+                                    />
+                                )}
                             </div>
-
-                            {mollieConnection.profiles.length && (
-                                <MollieConnectionProfileSelector
-                                    profiles={mollieConnection.profiles}
-                                    currentProfile={currentProfile}
-                                    currentProfileId={currentProfileId}
-                                    onSelect={(currentProfileId) => setCurrentProfileId(currentProfileId)}
-                                    onChange={() => updateCurrentProfile(currentProfileId)}
-                                />
-                            )}
                         </div>
                     </div>
 
@@ -140,22 +139,21 @@ export default function MollieConnectionProfileDetails({
                 <div className="card">
                     <form className="form" onSubmit={form.submit}>
                         <div className="card-header">
-                            <div className="flex">
-                                <div className="flex flex-grow">
-                                    <div className="card-title">
-                                        {translate('mollie_connection.header_update_profile.title')}
-                                    </div>
+                            <div className="flex flex-grow card-title">
+                                {translate('mollie_connection.header_update_profile.title')}
+                            </div>
+                            <div className="card-header-filters">
+                                <div className="block block-inline-filters">
+                                    {mollieConnection.profiles.length > 0 && (
+                                        <MollieConnectionProfileSelector
+                                            profiles={mollieConnection.profiles}
+                                            currentProfile={currentProfile}
+                                            currentProfileId={currentProfileId}
+                                            onSelect={(currentProfileId) => setCurrentProfileId(currentProfileId)}
+                                            onChange={() => updateCurrentProfile(currentProfileId)}
+                                        />
+                                    )}
                                 </div>
-
-                                {mollieConnection.profiles.length > 0 && (
-                                    <MollieConnectionProfileSelector
-                                        profiles={mollieConnection.profiles}
-                                        currentProfile={currentProfile}
-                                        currentProfileId={currentProfileId}
-                                        onSelect={(currentProfileId) => setCurrentProfileId(currentProfileId)}
-                                        onChange={() => updateCurrentProfile(currentProfileId)}
-                                    />
-                                )}
                             </div>
                         </div>
 
diff --git a/react/src/dashboard/components/pages/payment-methods/elements/MollieConnectionProfileSelector.tsx b/react/src/dashboard/components/pages/payment-methods/elements/MollieConnectionProfileSelector.tsx
index 31770590a..d255b4cc0 100644
--- a/react/src/dashboard/components/pages/payment-methods/elements/MollieConnectionProfileSelector.tsx
+++ b/react/src/dashboard/components/pages/payment-methods/elements/MollieConnectionProfileSelector.tsx
@@ -20,30 +20,28 @@ export default function MollieConnectionProfileSelector({
     const translate = useTranslate();
 
     return (
-        <div className="flex">
-            <div className="block block-inline-filters">
-                <div className="form">
-                    <div className="form-group">
-                        <SelectControl
-                            className="form-control inline-filter-control"
-                            propKey={'id'}
-                            placeholder={translate('mollie_connection.labels.current_profile')}
-                            options={profiles}
-                            value={currentProfileId}
-                            onChange={(currentProfileId: number) => onSelect(currentProfileId)}
-                            optionsComponent={SelectControlOptions}
-                        />
-                    </div>
+        <div className="flex flex-horizontal">
+            <div className="form">
+                <div className="form-group">
+                    <SelectControl
+                        className="form-control inline-filter-control"
+                        propKey={'id'}
+                        placeholder={translate('mollie_connection.labels.current_profile')}
+                        options={profiles}
+                        value={currentProfileId}
+                        onChange={(currentProfileId: number) => onSelect(currentProfileId)}
+                        optionsComponent={SelectControlOptions}
+                    />
                 </div>
-
-                <button
-                    className="button button-primary"
-                    disabled={!currentProfileId || (currentProfile && currentProfileId == currentProfile.id)}
-                    type="button"
-                    onClick={() => onChange()}>
-                    {translate('mollie_connection.buttons.change_profile')}
-                </button>
             </div>
+
+            <button
+                className="button button-primary"
+                disabled={!currentProfileId || (currentProfile && currentProfileId == currentProfile.id)}
+                type="button"
+                onClick={() => onChange()}>
+                {translate('mollie_connection.buttons.change_profile')}
+            </button>
         </div>
     );
 }
diff --git a/react/src/dashboard/components/pages/payouts/Payouts.tsx b/react/src/dashboard/components/pages/payouts/Payouts.tsx
index ac7aff8c1..090ba3e63 100644
--- a/react/src/dashboard/components/pages/payouts/Payouts.tsx
+++ b/react/src/dashboard/components/pages/payouts/Payouts.tsx
@@ -158,7 +158,7 @@ export default function Payouts() {
 
     return (
         <div className="card">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="card-title flex flex-grow">
                     {translate('payouts.header.title')} ({transactions.meta.total})
                 </div>
diff --git a/react/src/dashboard/components/pages/pre-check/PreCheck.tsx b/react/src/dashboard/components/pages/pre-check/PreCheck.tsx
index 87b2d8ced..de79dccd1 100644
--- a/react/src/dashboard/components/pages/pre-check/PreCheck.tsx
+++ b/react/src/dashboard/components/pages/pre-check/PreCheck.tsx
@@ -18,7 +18,6 @@ import useImplementationService from '../../../services/ImplementationService';
 import { useFundService } from '../../../services/FundService';
 import usePreCheckService from '../../../services/PreCheckService';
 import { useMediaService } from '../../../services/MediaService';
-import usePushDanger from '../../../hooks/usePushDanger';
 import usePushSuccess from '../../../hooks/usePushSuccess';
 import PreCheckRecord from '../../../props/models/PreCheckRecord';
 import { uniqueId } from 'lodash';
@@ -28,15 +27,16 @@ import useAssetUrl from '../../../hooks/useAssetUrl';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import InfoBox from '../../elements/info-box/InfoBox';
 import PreCheckExclusionsCard from './cards/PreCheckExclusionsCard';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function PreCheck() {
     const activeOrganization = useActiveOrganization();
 
     const assetUrl = useAssetUrl();
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const navigateState = useNavigateState();
 
     const fundService = useFundService();
@@ -97,7 +97,7 @@ export default function PreCheck() {
                 })
                 .catch((err: ResponseError) => {
                     preCheckForm.setErrors(err.data.errors);
-                    pushDanger(err.data?.message || 'Onbekende foutmelding!');
+                    pushApiError(err);
                 })
                 .finally(() => preCheckForm.setIsLocked(false));
         },
@@ -124,7 +124,7 @@ export default function PreCheck() {
                 })
                 .catch((err: ResponseError) => {
                     bannerForm.setErrors(err.data.errors);
-                    pushDanger(err.data?.message || 'Onbekende foutmelding!');
+                    pushApiError(err);
                 })
                 .finally(() => bannerForm.setIsLocked(false));
         },
@@ -149,14 +149,14 @@ export default function PreCheck() {
                     .store('pre_check_banner', mediaFile)
                     .then((res) => res.data?.data)
                     .catch((err: ResponseError) => {
-                        pushDanger('Mislukt!', err.data?.message || 'Onbekende foutmelding!');
+                        pushApiError(err);
                         return null;
                     });
             }
 
             return null;
         },
-        [deleteMedia, implementation?.pre_check_banner?.uid, mediaService, pushDanger],
+        [deleteMedia, implementation?.pre_check_banner?.uid, mediaService, pushApiError],
     );
 
     const transformPreCheckRecordTypes = useCallback((recordTypes) => {
@@ -285,7 +285,7 @@ export default function PreCheck() {
     return (
         <Fragment>
             <form className="card form" onSubmit={preCheckForm.submit}>
-                <div className="card-header card-header-next">
+                <div className="card-header">
                     <div className="card-title flex flex-grow">{translate('funds_pre_check.header.title')}</div>
 
                     <div className="button-group">
@@ -459,7 +459,7 @@ export default function PreCheck() {
             />
 
             <form className="card form" onSubmit={bannerForm.submit}>
-                <div className="card-header card-header-next">
+                <div className="card-header">
                     <div className="card-title">Homepagina banner</div>
                 </div>
 
diff --git a/react/src/dashboard/components/pages/pre-check/cards/PreCheckExclusionsCard.tsx b/react/src/dashboard/components/pages/pre-check/cards/PreCheckExclusionsCard.tsx
index f15687325..6a6c1729c 100644
--- a/react/src/dashboard/components/pages/pre-check/cards/PreCheckExclusionsCard.tsx
+++ b/react/src/dashboard/components/pages/pre-check/cards/PreCheckExclusionsCard.tsx
@@ -105,7 +105,7 @@ export default function PreCheckExclusionsCard({
 
     return (
         <div className="card">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="card-title flex flex-grow" onClick={() => setShowExcludedFunds(!showExcludedFunds)}>
                     Afwijkend en uitsluitend ({excludedFunds?.length})
                 </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 491f7dc1a..ebafe2f85 100644
--- a/react/src/dashboard/components/pages/products-edit/elements/ProductsForm.tsx
+++ b/react/src/dashboard/components/pages/products-edit/elements/ProductsForm.tsx
@@ -5,7 +5,6 @@ import FormError from '../../../elements/forms/errors/FormError';
 import { useNavigateState } from '../../../../modules/state_router/Router';
 import { useMediaService } from '../../../../services/MediaService';
 import LoadingCard from '../../../elements/loading-card/LoadingCard';
-import usePushDanger from '../../../../hooks/usePushDanger';
 import usePushSuccess from '../../../../hooks/usePushSuccess';
 import useSetProgress from '../../../../hooks/useSetProgress';
 import Organization from '../../../../props/models/Organization';
@@ -33,6 +32,7 @@ import useTranslate from '../../../../hooks/useTranslate';
 import TranslateHtml from '../../../elements/translate-html/TranslateHtml';
 import FormGroupInfo from '../../../elements/forms/elements/FormGroupInfo';
 import SponsorProduct from '../../../../props/models/Sponsor/SponsorProduct';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 export default function ProductsForm({
     organization,
@@ -46,9 +46,9 @@ export default function ProductsForm({
     id?: number;
 }) {
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const [alreadyConfirmed, setAlreadyConfirmed] = useState<boolean>(false);
     const [mediaFile, setMediaFile] = useState<Blob>(null);
@@ -329,7 +329,7 @@ export default function ProductsForm({
                 .catch((err: ResponseError) => {
                     form.setIsLocked(false);
                     form.setErrors(err.data.errors);
-                    pushDanger('Mislukt!', err.data.message);
+                    pushApiError(err);
                 })
                 .finally(() => setProgress(100));
         });
diff --git a/react/src/dashboard/components/pages/products-view/ProductView.tsx b/react/src/dashboard/components/pages/products-view/ProductView.tsx
index 17737a5bb..4c8f91184 100644
--- a/react/src/dashboard/components/pages/products-view/ProductView.tsx
+++ b/react/src/dashboard/components/pages/products-view/ProductView.tsx
@@ -9,8 +9,7 @@ import useProductChatService from '../../../services/ProductChatService';
 import { useNavigateState } from '../../../modules/state_router/Router';
 import useOpenModal from '../../../hooks/useOpenModal';
 import Product from '../../../props/models/Product';
-import { PaginationData } from '../../../props/ApiResponses';
-import usePushDanger from '../../../hooks/usePushDanger';
+import { PaginationData, ResponseError } from '../../../props/ApiResponses';
 import usePushSuccess from '../../../hooks/usePushSuccess';
 import useFilter from '../../../hooks/useFilter';
 import ModalNotification from '../../modals/ModalNotification';
@@ -22,6 +21,7 @@ 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';
 
 type ProductFundLocal = ProductFund & {
     chat?: FundProviderChat;
@@ -46,8 +46,8 @@ export default function ProductView() {
     const [fundToggles, setFundToggles] = useState({});
     const [paginatorKey] = useState('product_funds');
 
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
+    const pushApiError = usePushApiError();
 
     const filter = useFilter({
         q: '',
@@ -87,9 +87,9 @@ export default function ProductView() {
             productService
                 .updateExclusions(product.organization_id, product.id, values)
                 .then(() => pushSuccess('Opgeslagen!'))
-                .catch(() => pushDanger('Fout! Er ging iets mis.'));
+                .catch((err: ResponseError) => pushApiError(err));
         },
-        [product, productService, pushDanger, pushSuccess],
+        [product, productService, pushApiError, pushSuccess],
     );
 
     const mapFundsWithChats = useCallback(
@@ -210,21 +210,19 @@ export default function ProductView() {
 
             <div className="card">
                 <div className="card-header">
-                    <div className="flex-row">
-                        <div className="flex-col flex-grow">
-                            <div className="card-title">Fondsen</div>
-                        </div>
-                        <div className="flex-col flex-grow block block-inline-filters">
-                            <div className="form">
-                                <div className="form-group">
-                                    <input
-                                        className="form-control"
-                                        type="text"
-                                        placeholder="Zoeken"
-                                        value={filter.values.q}
-                                        onChange={(e) => filter.update({ q: e.target.value })}
-                                    />
-                                </div>
+                    <div className="flex flex-grow flex-grow">
+                        <div className="card-title">Fondsen</div>
+                    </div>
+                    <div className="card-header-filters">
+                        <div className="block block-inline-filters form">
+                            <div className="form-group">
+                                <input
+                                    className="form-control"
+                                    type="text"
+                                    placeholder="Zoeken"
+                                    value={filter.values.q}
+                                    onChange={(e) => filter.update({ q: e.target.value })}
+                                />
                             </div>
                         </div>
                     </div>
diff --git a/react/src/dashboard/components/pages/products/Products.tsx b/react/src/dashboard/components/pages/products/Products.tsx
index 2ca3a1da7..f70968be6 100644
--- a/react/src/dashboard/components/pages/products/Products.tsx
+++ b/react/src/dashboard/components/pages/products/Products.tsx
@@ -109,7 +109,7 @@ export default function Products() {
 
     return (
         <div className="card">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="card-title flex flex-grow">
                     {translate('products.offers')} ({products.meta.total})
                 </div>
diff --git a/react/src/dashboard/components/pages/provider-funds/ProviderFunds.tsx b/react/src/dashboard/components/pages/provider-funds/ProviderFunds.tsx
index 521daf2fe..1ed1febd8 100644
--- a/react/src/dashboard/components/pages/provider-funds/ProviderFunds.tsx
+++ b/react/src/dashboard/components/pages/provider-funds/ProviderFunds.tsx
@@ -2,17 +2,16 @@ import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
 import useProviderFundService from '../../../services/ProviderFundService';
-import { ResponseError } from '../../../props/ApiResponses';
-import usePushDanger from '../../../hooks/usePushDanger';
 import ProviderFundsTable from './elements/ProviderFundsTable';
 import ProviderFundUnsubscriptionsTable from './elements/ProviderFundUnsubscriptionsTable';
 import ProviderFundsAvailableTable from './elements/ProviderFundsAvailableTable';
 import ProviderFundInvitationsTable from './elements/ProviderFundInvitationsTable';
 import useTranslate from '../../../hooks/useTranslate';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function ProviderFunds() {
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
+    const pushApiError = usePushApiError();
     const activeOrganization = useActiveOrganization();
     const providerFundService = useProviderFundService();
 
@@ -23,8 +22,8 @@ export default function ProviderFunds() {
         providerFundService
             .listAvailableFunds(activeOrganization.id, { per_page: 1 })
             .then((res) => setFundsAvailable(res.data))
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data?.message));
-    }, [activeOrganization.id, providerFundService, pushDanger]);
+            .catch(pushApiError);
+    }, [activeOrganization.id, providerFundService, pushApiError]);
 
     useEffect(() => {
         fetchFunds();
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 3c25efa47..7c545e7e0 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,8 @@
 import React, { Fragment, useCallback, useEffect, useMemo, useState } from 'react';
 import useFilter from '../../../../hooks/useFilter';
-import { PaginationData, ResponseError } from '../../../../props/ApiResponses';
+import { PaginationData } from '../../../../props/ApiResponses';
 import Organization from '../../../../props/models/Organization';
 import useSetProgress from '../../../../hooks/useSetProgress';
-import usePushDanger from '../../../../hooks/usePushDanger';
 import usePushSuccess from '../../../../hooks/usePushSuccess';
 import Paginator from '../../../../modules/paginator/components/Paginator';
 import useAssetUrl from '../../../../hooks/useAssetUrl';
@@ -18,6 +17,7 @@ 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';
 
 type FundProviderInvitationLocal = FundProviderInvitation & {
     status_class?: string;
@@ -37,9 +37,9 @@ export default function ProviderFundInvitationsTable({
 
     const assetUrl = useAssetUrl();
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const paginatorService = usePaginatorService();
     const fundProviderInvitationsService = useFundProviderInvitationsService();
@@ -88,13 +88,13 @@ export default function ProviderFundInvitationsTable({
 
             Promise.all(promises)
                 .then(() => pushSuccess('Uitnodiging succesvol geaccepteerd!'))
-                .catch((err: ResponseError) => pushDanger('Mislukt!', err.data?.message))
+                .catch(pushApiError)
                 .finally(() => {
                     filter.touch();
                     onChange?.();
                 });
         },
-        [filter, fundProviderInvitationsService, onChange, organization.id, pushDanger, pushSuccess],
+        [filter, fundProviderInvitationsService, onChange, organization.id, pushApiError, pushSuccess],
     );
 
     const mapProviderFunds = useCallback(
@@ -145,12 +145,12 @@ export default function ProviderFundInvitationsTable({
                     meta: res.data.meta,
                 }),
             )
-            .catch((err) => pushDanger('Mislukt!', err.data?.message));
-    }, [fetchInvitations, filter.activeValues, mapProviderFunds, pushDanger, setSelected]);
+            .catch(pushApiError);
+    }, [fetchInvitations, filter.activeValues, mapProviderFunds, pushApiError, setSelected]);
 
     return (
         <div className="card">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="card-title flex flex-grow">
                     {translate(`provider_funds.title.${type}`)}
 
diff --git a/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundUnsubscriptionsTable.tsx b/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundUnsubscriptionsTable.tsx
index dd3ceabba..ba35d302c 100644
--- a/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundUnsubscriptionsTable.tsx
+++ b/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundUnsubscriptionsTable.tsx
@@ -3,7 +3,6 @@ import useFilter from '../../../../hooks/useFilter';
 import { PaginationData } from '../../../../props/ApiResponses';
 import Organization from '../../../../props/models/Organization';
 import useSetProgress from '../../../../hooks/useSetProgress';
-import usePushDanger from '../../../../hooks/usePushDanger';
 import usePushSuccess from '../../../../hooks/usePushSuccess';
 import Paginator from '../../../../modules/paginator/components/Paginator';
 import useAssetUrl from '../../../../hooks/useAssetUrl';
@@ -26,6 +25,7 @@ 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 usePushApiError from '../../../../hooks/usePushApiError';
 
 type FundProviderUnsubscribeLocal = FundProviderUnsubscribe & {
     showTooltip?: boolean;
@@ -43,9 +43,9 @@ export default function ProviderFundUnsubscriptionsTable({
     const assetUrl = useAssetUrl();
     const translate = useTranslate();
     const openModal = useOpenModal();
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
     const pushSuccess = usePushSuccess();
+    const pushApiError = usePushApiError();
 
     const paginatorService = usePaginatorService();
     const fundUnsubscribeService = useFundUnsubscribeService();
@@ -111,7 +111,7 @@ export default function ProviderFundUnsubscriptionsTable({
 
                             Promise.all(promises)
                                 .then(() => pushSuccess('Opgeslagen!'))
-                                .catch((res) => pushDanger('Error!', res?.data?.message))
+                                .catch(pushApiError)
                                 .finally(() => {
                                     filter.touch();
                                     modal.close();
@@ -126,7 +126,7 @@ export default function ProviderFundUnsubscriptionsTable({
                 />
             ));
         },
-        [filter, fundUnsubscribeService, onChange, openModal, organization.id, pushDanger, pushSuccess, translate],
+        [filter, fundUnsubscribeService, onChange, openModal, organization.id, pushApiError, pushSuccess, translate],
     );
 
     const fetchUnsubscriptions = useCallback(
@@ -147,12 +147,12 @@ export default function ProviderFundUnsubscriptionsTable({
 
         fetchUnsubscriptions(filter.activeValues)
             .then((res) => setFundUnsubscriptions(res.data))
-            .catch((err) => pushDanger('Mislukt!', err.data?.message));
-    }, [fetchUnsubscriptions, filter.activeValues, pushDanger, setSelected]);
+            .catch(pushApiError);
+    }, [fetchUnsubscriptions, filter.activeValues, pushApiError, setSelected]);
 
     return (
         <div className="card">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="card-title flex flex-grow">
                     {translate(`fund_unsubscriptions.title`)}
 
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 085acdcde..4051f9f09 100644
--- a/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsAvailableTable.tsx
+++ b/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsAvailableTable.tsx
@@ -4,7 +4,6 @@ import { PaginationData } from '../../../../props/ApiResponses';
 import Organization from '../../../../props/models/Organization';
 import useProviderFundService from '../../../../services/ProviderFundService';
 import useSetProgress from '../../../../hooks/useSetProgress';
-import usePushDanger from '../../../../hooks/usePushDanger';
 import Paginator from '../../../../modules/paginator/components/Paginator';
 import useAssetUrl from '../../../../hooks/useAssetUrl';
 import { strLimit } from '../../../../helpers/string';
@@ -24,6 +23,7 @@ import EmptyCard from '../../../elements/empty-card/EmptyCard';
 import useTranslate from '../../../../hooks/useTranslate';
 import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
 import TableTopScroller from '../../../elements/tables/TableTopScroller';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 export default function ProviderFundsAvailableTable({
     organization,
@@ -38,8 +38,8 @@ export default function ProviderFundsAvailableTable({
 
     const assetUrl = useAssetUrl();
     const setProgress = useSetProgress();
-    const pushDanger = usePushDanger();
     const openModal = useOpenModal();
+    const pushApiError = usePushApiError();
 
     const paginatorService = usePaginatorService();
     const providerFundService = useProviderFundService();
@@ -124,7 +124,7 @@ export default function ProviderFundsAvailableTable({
                     successApplying();
                     setSelected([]);
                 })
-                .catch((err) => pushDanger('Mislukt!', err.data?.message))
+                .catch(pushApiError)
                 .finally(() => {
                     filter.touch();
                     onChange?.();
@@ -137,7 +137,7 @@ export default function ProviderFundsAvailableTable({
             organization.id,
             organization.offices_count,
             providerFundService,
-            pushDanger,
+            pushApiError,
             setSelected,
             successApplying,
         ],
@@ -200,12 +200,12 @@ export default function ProviderFundsAvailableTable({
                     ];
                 });
             })
-            .catch((err) => pushDanger('Mislukt!', err.data?.message));
-    }, [fetchFunds, filter.activeValues, organization, pushDanger, setSelected, translate]);
+            .catch(pushApiError);
+    }, [fetchFunds, filter.activeValues, organization, pushApiError, setSelected, translate]);
 
     return (
         <div className="card">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="card-title flex flex-grow">
                     {translate(`provider_funds.title.available`)}
 
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 deb5a1cdc..f12fcbc62 100644
--- a/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsTable.tsx
+++ b/react/src/dashboard/components/pages/provider-funds/elements/ProviderFundsTable.tsx
@@ -5,7 +5,6 @@ import FundProvider from '../../../../props/models/FundProvider';
 import Organization from '../../../../props/models/Organization';
 import useProviderFundService from '../../../../services/ProviderFundService';
 import useSetProgress from '../../../../hooks/useSetProgress';
-import usePushDanger from '../../../../hooks/usePushDanger';
 import usePushSuccess from '../../../../hooks/usePushSuccess';
 import Paginator from '../../../../modules/paginator/components/Paginator';
 import useAssetUrl from '../../../../hooks/useAssetUrl';
@@ -24,6 +23,7 @@ import useConfigurableTable from '../../vouchers/hooks/useConfigurableTable';
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
 import TableRowActions from '../../../elements/tables/TableRowActions';
 import classNames from 'classnames';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 export default function ProviderFundsTable({
     type,
@@ -39,9 +39,9 @@ export default function ProviderFundsTable({
     const assetUrl = useAssetUrl();
     const translate = useTranslate();
     const openModal = useOpenModal();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const paginatorService = usePaginatorService();
     const providerFundService = useProviderFundService();
@@ -119,7 +119,7 @@ export default function ProviderFundsTable({
 
                                 Promise.all(promises)
                                     .then(() => pushSuccess('Opgeslagen!'))
-                                    .catch((err) => pushDanger('Mislukt!', err.data?.message))
+                                    .catch(pushApiError)
                                     .finally(() => {
                                         setProgress(100);
                                         filter.touch();
@@ -137,7 +137,7 @@ export default function ProviderFundsTable({
             openModal,
             organization.id,
             providerFundService,
-            pushDanger,
+            pushApiError,
             pushSuccess,
             setProgress,
             translate,
@@ -186,12 +186,12 @@ export default function ProviderFundsTable({
 
         fetchFunds(filter.activeValues)
             .then((res) => setProviderFunds(res.data))
-            .catch((err) => pushDanger('Mislukt!', err.data?.message));
-    }, [fetchFunds, filter.activeValues, pushDanger, setSelected]);
+            .catch(pushApiError);
+    }, [fetchFunds, filter.activeValues, pushApiError, setSelected]);
 
     return (
         <div className="card">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="card-title flex flex-grow">
                     {translate(`provider_funds.title.${type}`)}
 
diff --git a/react/src/dashboard/components/pages/reimbursements-view/ReimbursementsView.tsx b/react/src/dashboard/components/pages/reimbursements-view/ReimbursementsView.tsx
index 4bc0ddd73..60b68c34f 100644
--- a/react/src/dashboard/components/pages/reimbursements-view/ReimbursementsView.tsx
+++ b/react/src/dashboard/components/pages/reimbursements-view/ReimbursementsView.tsx
@@ -1,7 +1,6 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
-import usePushDanger from '../../../hooks/usePushDanger';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import useSetProgress from '../../../hooks/useSetProgress';
 import useOpenModal from '../../../hooks/useOpenModal';
@@ -15,12 +14,13 @@ import TransactionDetails from '../transactions-view/elements/TransactionDetails
 import { hasPermission } from '../../../helpers/utils';
 import BlockCardNotes from '../../elements/block-card-notes/BlockCardNotes';
 import Note from '../../../props/models/Note';
-import { ApiResponseSingle, ResponseError } from '../../../props/ApiResponses';
+import { ApiResponseSingle } from '../../../props/ApiResponses';
 import ModalReimbursementResolve from '../../modals/ModalReimbursementResolve';
 import ModalReimbursementDetailsEdit from '../../modals/ModalReimbursementDetailsEdit';
 import useFilePreview from '../../../services/helpers/useFilePreview';
 import { useFileService } from '../../../services/FileService';
 import useTranslate from '../../../hooks/useTranslate';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function ReimbursementsView() {
     const { id } = useParams();
@@ -30,10 +30,10 @@ export default function ReimbursementsView() {
 
     const openModal = useOpenModal();
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
     const filePreview = useFilePreview();
+    const pushApiError = usePushApiError();
 
     const fileService = useFileService();
     const reimbursementService = useReimbursementsService();
@@ -52,9 +52,9 @@ export default function ReimbursementsView() {
         reimbursementService
             .show(activeOrganization.id, parseInt(id))
             .then((res) => setReimbursement(res.data.data))
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data?.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [setProgress, reimbursementService, activeOrganization.id, id, pushDanger]);
+    }, [setProgress, reimbursementService, activeOrganization.id, id, pushApiError]);
 
     const handleOnReimbursementUpdated = useCallback(
         (promise: Promise<ApiResponseSingle<Reimbursement>>, successMessage: string = null) => {
@@ -65,12 +65,10 @@ export default function ReimbursementsView() {
                     setReimbursement(res.data.data);
                     pushSuccess('Success!', successMessage);
                 })
-                .catch((err: ResponseError) => {
-                    pushDanger(err.data?.title || 'Foutmelding!', err.data?.message || 'Onbekende foutmelding!');
-                })
+                .catch(pushApiError)
                 .finally(() => setProgress(100));
         },
-        [pushDanger, pushSuccess, setProgress],
+        [pushApiError, pushSuccess, setProgress],
     );
 
     const assign = useCallback(() => {
@@ -109,10 +107,10 @@ export default function ReimbursementsView() {
             fileService
                 .download(file)
                 .then((res) => fileService.downloadFile(file.original_name, res.data))
-                .catch((err: ResponseError) => pushDanger('Mislukt!', err.data?.message))
+                .catch(pushApiError)
                 .finally(() => setProgress(100));
         },
-        [fileService, pushDanger, setProgress],
+        [fileService, pushApiError, setProgress],
     );
 
     const hasFilePreview = useCallback((file) => {
@@ -194,129 +192,131 @@ export default function ReimbursementsView() {
                 <div className="card">
                     {reimbursement.expired && (
                         <div className="card-header card-header-warning card-header-sm">
-                            <div className="card-title text-small">
-                                <strong>Waarschuwing!</strong>&nbsp; Het fonds of tegoed van deze declaratie is verlopen
-                                of het saldo is niet meer toereikend. De decalartie kan niet meer worden behandeld.
+                            <div className="flex flex-vertical card-title">
+                                <strong>Waarschuwing!</strong>
+                                <small>
+                                    Het fonds of tegoed van deze declaratie is verlopen of het saldo is niet meer
+                                    toereikend. De decalartie kan niet meer worden behandeld.
+                                </small>
                             </div>
                         </div>
                     )}
 
                     {reimbursement.deactivated && (
                         <div className="card-header card-header-warning card-header-sm">
-                            <div className="card-title text-small">
-                                <strong>Waarschuwing!</strong>&nbsp; Het tegoed is gedeactiveerd. Om de declaratie te
-                                behandelen moet het tegoed opnieuw worden geactiveerd.
+                            <div className="flex flex-vertical card-title">
+                                <strong>Waarschuwing!</strong>
+                                <small>
+                                    Het tegoed is gedeactiveerd. Om de declaratie te behandelen moet het tegoed opnieuw
+                                    worden geactiveerd.
+                                </small>
                             </div>
                         </div>
                     )}
 
                     <div className="card-header">
-                        <div className="flex">
-                            <div className="flex flex-grow">
-                                <div className="flex flex-vertical">
-                                    <div className="card-title">
-                                        <div className="flex">
-                                            <div className="flex flex-vertical">
-                                                <div className="flex">
-                                                    <span className="text-muted">NR:&nbsp;</span>
-                                                    {reimbursement.code} &nbsp;
-                                                </div>
+                        <div className="flex flex-grow">
+                            <div className="flex flex-vertical">
+                                <div className="card-title">
+                                    <div className="flex">
+                                        <div className="flex flex-vertical">
+                                            <div className="flex">
+                                                <span className="text-muted">NR:&nbsp;</span>
+                                                {reimbursement.code} &nbsp;
                                             </div>
+                                        </div>
 
-                                            <div className="flex flex-vertical flex-center">
-                                                <div className="flex flex-horizontal">
-                                                    {!reimbursement.expired && (
-                                                        <label
-                                                            className={`label ${
-                                                                stateLabels[reimbursement.state] || ''
-                                                            }`}>
-                                                            {reimbursement.state_locale}
-                                                        </label>
-                                                    )}
+                                        <div className="flex flex-vertical flex-center">
+                                            <div className="flex flex-horizontal">
+                                                {!reimbursement.expired && (
+                                                    <label
+                                                        className={`label ${stateLabels[reimbursement.state] || ''}`}>
+                                                        {reimbursement.state_locale}
+                                                    </label>
+                                                )}
 
-                                                    {reimbursement.expired && (
-                                                        <label className="label label-danger-light">
-                                                            {reimbursement.expired}
-                                                        </label>
-                                                    )}
-                                                </div>
+                                                {reimbursement.expired && (
+                                                    <label className="label label-danger-light">
+                                                        {reimbursement.expired}
+                                                    </label>
+                                                )}
                                             </div>
                                         </div>
                                     </div>
+                                </div>
 
-                                    <div className="card-subtitle">
-                                        <div className="flex">
-                                            <div className="mdi mdi-clock-outline" />
-                                            {reimbursement.created_at_locale}
-                                        </div>
+                                <div className="card-subtitle">
+                                    <div className="flex">
+                                        <div className="mdi mdi-clock-outline" />
+                                        {reimbursement.created_at_locale}
                                     </div>
                                 </div>
                             </div>
+                        </div>
 
-                            {reimbursement.state === 'pending' && (
-                                <div className="flex flex-self-start">
-                                    <div className="flex-row">
-                                        {!reimbursement.employee &&
-                                            !reimbursement.expired &&
-                                            !reimbursement.deactivated && (
-                                                <div className="button-group" data-dusk="reimbursementAssign">
+                        {reimbursement.state === 'pending' && (
+                            <div className="card-header-filters flex-self-start">
+                                <div className="block block-inline-filters">
+                                    {!reimbursement.employee &&
+                                        !reimbursement.expired &&
+                                        !reimbursement.deactivated && (
+                                            <div className="button-group" data-dusk="reimbursementAssign">
+                                                <div
+                                                    className="button button-primary button-sm"
+                                                    onClick={() => assign()}>
+                                                    <em className="mdi mdi-account-plus-outline icon-start" />
+                                                    Toewijzen aan mij
+                                                </div>
+                                            </div>
+                                        )}
+
+                                    {reimbursement.employee &&
+                                        reimbursement.employee.identity_address == authIdentity.address && (
+                                            <div className="button-group">
+                                                {!reimbursement.expired && !reimbursement.deactivated && (
                                                     <div
                                                         className="button button-primary button-sm"
-                                                        onClick={() => assign()}>
-                                                        <em className="mdi mdi-account-plus-outline icon-start" />
-                                                        Toewijzen aan mij
+                                                        data-dusk="reimbursementApprove"
+                                                        onClick={() => resolve(true)}>
+                                                        <em className="mdi mdi-check-circle icon-start" />
+                                                        Accepteren
                                                     </div>
-                                                </div>
-                                            )}
-
-                                        {reimbursement.employee &&
-                                            reimbursement.employee.identity_address == authIdentity.address && (
-                                                <div className="button-group">
-                                                    {!reimbursement.expired && !reimbursement.deactivated && (
-                                                        <div
-                                                            className="button button-primary button-sm"
-                                                            data-dusk="reimbursementApprove"
-                                                            onClick={() => resolve(true)}>
-                                                            <em className="mdi mdi-check-circle icon-start" />
-                                                            Accepteren
-                                                        </div>
-                                                    )}
-
-                                                    {!reimbursement.expired && !reimbursement.deactivated && (
-                                                        <div
-                                                            className="button button-default button-sm"
-                                                            data-dusk="reimbursementDecline"
-                                                            onClick={() => resolve(false)}>
-                                                            <em className="mdi mdi-close-circle icon-start" />
-                                                            Weigeren
-                                                        </div>
-                                                    )}
+                                                )}
 
+                                                {!reimbursement.expired && !reimbursement.deactivated && (
                                                     <div
-                                                        className="button button-primary-light button-sm"
-                                                        data-dusk="reimbursementResign"
-                                                        onClick={() => resign()}>
-                                                        <em className="mdi mdi-account-minus icon-start" />
-                                                        Meld af
+                                                        className="button button-default button-sm"
+                                                        data-dusk="reimbursementDecline"
+                                                        onClick={() => resolve(false)}>
+                                                        <em className="mdi mdi-close-circle icon-start" />
+                                                        Weigeren
                                                     </div>
+                                                )}
+
+                                                <div
+                                                    className="button button-primary-light button-sm"
+                                                    data-dusk="reimbursementResign"
+                                                    onClick={() => resign()}>
+                                                    <em className="mdi mdi-account-minus icon-start" />
+                                                    Meld af
                                                 </div>
-                                            )}
+                                            </div>
+                                        )}
 
-                                        {reimbursement.employee &&
-                                            reimbursement.employee.identity_address != authIdentity.address && (
-                                                <div className="card-title">
-                                                    <div className="text-small">
-                                                        Assigned to:&nbsp;
-                                                        <span className="text-primary text-strong">
-                                                            {reimbursement.employee.email}
-                                                        </span>
-                                                    </div>
+                                    {reimbursement.employee &&
+                                        reimbursement.employee.identity_address != authIdentity.address && (
+                                            <div className="card-title">
+                                                <div className="text-small">
+                                                    Assigned to:&nbsp;
+                                                    <span className="text-primary text-strong">
+                                                        {reimbursement.employee.email}
+                                                    </span>
                                                 </div>
-                                            )}
-                                    </div>
+                                            </div>
+                                        )}
                                 </div>
-                            )}
-                        </div>
+                            </div>
+                        )}
                     </div>
 
                     <div className="card-section">
@@ -549,7 +549,7 @@ export default function ReimbursementsView() {
 
             {reimbursement && (
                 <div className="card">
-                    <div className="card-header card-header-next">
+                    <div className="card-header">
                         <div className="card-title flex flex-grow">Extra informatie</div>
                         <div className="block block-inline-filters">
                             {reimbursement.employee?.identity_address === authIdentity.address && (
diff --git a/react/src/dashboard/components/pages/reimbursements/Reimbursements.tsx b/react/src/dashboard/components/pages/reimbursements/Reimbursements.tsx
index 9d13c9ddc..5f44bf681 100644
--- a/react/src/dashboard/components/pages/reimbursements/Reimbursements.tsx
+++ b/react/src/dashboard/components/pages/reimbursements/Reimbursements.tsx
@@ -161,7 +161,7 @@ export default function Reimbursements() {
     return (
         <Fragment>
             <div className="card">
-                <div className="card-header card-header-next">
+                <div className="card-header">
                     <div className="flex flex-grow">
                         <div className="card-title">
                             {translate('reimbursements.header.title')} ({reimbursements?.meta?.total})
diff --git a/react/src/dashboard/components/pages/reservations-settings/ReservationsSettings.tsx b/react/src/dashboard/components/pages/reservations-settings/ReservationsSettings.tsx
index df2e3ce94..972440ab1 100644
--- a/react/src/dashboard/components/pages/reservations-settings/ReservationsSettings.tsx
+++ b/react/src/dashboard/components/pages/reservations-settings/ReservationsSettings.tsx
@@ -4,7 +4,6 @@ import LoadingCard from '../../elements/loading-card/LoadingCard';
 import { useOrganizationService } from '../../../services/OrganizationService';
 import useFormBuilder from '../../../hooks/useFormBuilder';
 import usePushSuccess from '../../../hooks/usePushSuccess';
-import usePushDanger from '../../../hooks/usePushDanger';
 import useUpdateActiveOrganization from '../../../hooks/useUpdateActiveOrganization';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import SelectControl from '../../elements/select-control/SelectControl';
@@ -16,15 +15,16 @@ import useSetProgress from '../../../hooks/useSetProgress';
 import { uniqueId } from 'lodash';
 import { ResponseError } from '../../../props/ApiResponses';
 import useTranslate from '../../../hooks/useTranslate';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function ReservationsSettings() {
     const translate = useTranslate();
     const activeOrganization = useActiveOrganization();
     const updateActiveOrganization = useUpdateActiveOrganization();
 
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const organizationService = useOrganizationService();
 
@@ -70,7 +70,7 @@ export default function ReservationsSettings() {
                 })
                 .catch((err: ResponseError) => {
                     form.setErrors(err.data.errors);
-                    pushDanger('Mislukt!', err.data.message);
+                    pushApiError(err);
                 })
                 .finally(() => {
                     setProgress(100);
@@ -95,131 +95,129 @@ export default function ReservationsSettings() {
                 </StateNavLink>
                 <div className="breadcrumb-item active">Reservering instellingen</div>
             </div>
-            <div className="card">
-                <form className="form" onSubmit={form.submit}>
-                    <div className="card-header flex flex-horizontal">
-                        <div className="flex flex-grow">
-                            <div className="card-title">{translate('reservation_settings.header.title')}</div>
-                        </div>
-                        <div className="flex">
+            <form className="card form" onSubmit={form.submit}>
+                <div className="card-header">
+                    <div className="flex flex-grow card-title">{translate('reservation_settings.header.title')}</div>
+                    <div className="card-header-filters">
+                        <div className="block block-inline-filters">
                             <button className="button button-primary button-sm" type="submit">
                                 {translate('reservation_settings.buttons.confirm')}
                             </button>
                         </div>
                     </div>
-                    <div className="card-section card-section-primary card-section-settings">
-                        <div className="row">
-                            <div className="col-xs-12 col-lg-8">
-                                <div className="form-group form-group-inline">
-                                    <label className="form-label" htmlFor="reservation_phone">
-                                        {translate('reservation_settings.labels.phone')}
-                                    </label>
-                                    <div className="form-offset">
-                                        <SelectControl
-                                            value={form.values.reservation_phone}
-                                            propKey={'value'}
-                                            propValue={'label'}
-                                            onChange={(value: 'no' | 'optional' | 'required') =>
-                                                form.update({ reservation_phone: value })
-                                            }
-                                            options={reservationFieldOptions}
-                                            optionsComponent={SelectControlOptions}
-                                        />
-                                        <FormError error={form.errors.reservation_phone} />
-                                    </div>
+                </div>
+                <div className="card-section card-section-primary card-section-settings">
+                    <div className="row">
+                        <div className="col-xs-12 col-lg-8">
+                            <div className="form-group form-group-inline">
+                                <label className="form-label" htmlFor="reservation_phone">
+                                    {translate('reservation_settings.labels.phone')}
+                                </label>
+                                <div className="form-offset">
+                                    <SelectControl
+                                        value={form.values.reservation_phone}
+                                        propKey={'value'}
+                                        propValue={'label'}
+                                        onChange={(value: 'no' | 'optional' | 'required') =>
+                                            form.update({ reservation_phone: value })
+                                        }
+                                        options={reservationFieldOptions}
+                                        optionsComponent={SelectControlOptions}
+                                    />
+                                    <FormError error={form.errors.reservation_phone} />
                                 </div>
-                                <div className="form-group form-group-inline">
-                                    <label className="form-label" htmlFor="reservation_address">
-                                        {translate('reservation_settings.labels.address')}
-                                    </label>
-                                    <div className="form-offset">
-                                        <SelectControl
-                                            value={form.values.reservation_address}
-                                            propKey={'value'}
-                                            propValue={'label'}
-                                            onChange={(value: 'no' | 'optional' | 'required') =>
-                                                form.update({ reservation_address: value })
-                                            }
-                                            options={reservationFieldOptions}
-                                            optionsComponent={SelectControlOptions}
-                                        />
-                                        <FormError error={form.errors.reservation_address} />
-                                    </div>
+                            </div>
+                            <div className="form-group form-group-inline">
+                                <label className="form-label" htmlFor="reservation_address">
+                                    {translate('reservation_settings.labels.address')}
+                                </label>
+                                <div className="form-offset">
+                                    <SelectControl
+                                        value={form.values.reservation_address}
+                                        propKey={'value'}
+                                        propValue={'label'}
+                                        onChange={(value: 'no' | 'optional' | 'required') =>
+                                            form.update({ reservation_address: value })
+                                        }
+                                        options={reservationFieldOptions}
+                                        optionsComponent={SelectControlOptions}
+                                    />
+                                    <FormError error={form.errors.reservation_address} />
                                 </div>
+                            </div>
 
-                                <div className="form-group form-group-inline">
-                                    <label className="form-label" htmlFor="reservation_birth_date">
-                                        {translate('reservation_settings.labels.birth_date')}
-                                    </label>
-                                    <div className="form-offset">
-                                        <SelectControl
-                                            value={form.values.reservation_birth_date}
-                                            propKey={'value'}
-                                            propValue={'label'}
-                                            onChange={(value: 'no' | 'optional' | 'required') =>
-                                                form.update({ reservation_birth_date: value })
-                                            }
-                                            options={reservationFieldOptions}
-                                            optionsComponent={SelectControlOptions}
-                                        />
-                                        <FormError error={form.errors.reservation_birth_date} />
-                                    </div>
+                            <div className="form-group form-group-inline">
+                                <label className="form-label" htmlFor="reservation_birth_date">
+                                    {translate('reservation_settings.labels.birth_date')}
+                                </label>
+                                <div className="form-offset">
+                                    <SelectControl
+                                        value={form.values.reservation_birth_date}
+                                        propKey={'value'}
+                                        propValue={'label'}
+                                        onChange={(value: 'no' | 'optional' | 'required') =>
+                                            form.update({ reservation_birth_date: value })
+                                        }
+                                        options={reservationFieldOptions}
+                                        optionsComponent={SelectControlOptions}
+                                    />
+                                    <FormError error={form.errors.reservation_birth_date} />
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <div className="card-section card-section-primary">
-                        <div className="form-group form-group-inline">
-                            <label className="form-label">{translate('reservation_settings.labels.fields')}</label>
-                            <div className="form-offset">
-                                <ReservationFieldsEditor fields={fields} onChange={setFields} errors={form.errors} />
-                            </div>
+                </div>
+                <div className="card-section card-section-primary">
+                    <div className="form-group form-group-inline">
+                        <label className="form-label">{translate('reservation_settings.labels.fields')}</label>
+                        <div className="form-offset">
+                            <ReservationFieldsEditor fields={fields} onChange={setFields} errors={form.errors} />
                         </div>
                     </div>
+                </div>
 
-                    {activeOrganization.can_receive_extra_payments &&
-                        hasPermission(activeOrganization, 'manage_payment_methods') && (
-                            <div className="card-section card-section-primary card-section-settings">
-                                <div className="row">
-                                    <div className="col-xs-12 col-lg-8">
-                                        <div className="form-group form-group-inline">
-                                            <label className="form-label" htmlFor="reservation_birth_date">
-                                                {translate('reservation_settings.labels.extra_payments')}
-                                            </label>
-                                            <div className="form-offset">
-                                                <SelectControl
-                                                    value={form.values.reservation_allow_extra_payments}
-                                                    propKey={'value'}
-                                                    propValue={'label'}
-                                                    onChange={(value: boolean) =>
-                                                        form.update({ reservation_allow_extra_payments: value })
-                                                    }
-                                                    options={extraPaymentsOptions}
-                                                    optionsComponent={SelectControlOptions}
-                                                />
-                                                <FormError error={form.errors.reservation_allow_extra_payments} />
-                                            </div>
+                {activeOrganization.can_receive_extra_payments &&
+                    hasPermission(activeOrganization, 'manage_payment_methods') && (
+                        <div className="card-section card-section-primary card-section-settings">
+                            <div className="row">
+                                <div className="col-xs-12 col-lg-8">
+                                    <div className="form-group form-group-inline">
+                                        <label className="form-label" htmlFor="reservation_birth_date">
+                                            {translate('reservation_settings.labels.extra_payments')}
+                                        </label>
+                                        <div className="form-offset">
+                                            <SelectControl
+                                                value={form.values.reservation_allow_extra_payments}
+                                                propKey={'value'}
+                                                propValue={'label'}
+                                                onChange={(value: boolean) =>
+                                                    form.update({ reservation_allow_extra_payments: value })
+                                                }
+                                                options={extraPaymentsOptions}
+                                                optionsComponent={SelectControlOptions}
+                                            />
+                                            <FormError error={form.errors.reservation_allow_extra_payments} />
                                         </div>
                                     </div>
                                 </div>
                             </div>
-                        )}
-
-                    <div className="card-section card-section-primary">
-                        <div className="button-group flex-center">
-                            <StateNavLink
-                                name={'reservations'}
-                                params={{ organizationId: activeOrganization.id }}
-                                className="button button-default">
-                                {translate('reservation_settings.buttons.cancel')}
-                            </StateNavLink>
-                            <button className="button button-primary" type="submit">
-                                {translate('reservation_settings.buttons.confirm')}
-                            </button>
                         </div>
+                    )}
+
+                <div className="card-section card-section-primary">
+                    <div className="button-group flex-center">
+                        <StateNavLink
+                            name={'reservations'}
+                            params={{ organizationId: activeOrganization.id }}
+                            className="button button-default">
+                            {translate('reservation_settings.buttons.cancel')}
+                        </StateNavLink>
+                        <button className="button button-primary" type="submit">
+                            {translate('reservation_settings.buttons.confirm')}
+                        </button>
                     </div>
-                </form>
-            </div>
+                </div>
+            </form>
         </Fragment>
     );
 }
diff --git a/react/src/dashboard/components/pages/reservations-view/ReservationsView.tsx b/react/src/dashboard/components/pages/reservations-view/ReservationsView.tsx
index a2850c0ab..b5b2cd516 100644
--- a/react/src/dashboard/components/pages/reservations-view/ReservationsView.tsx
+++ b/react/src/dashboard/components/pages/reservations-view/ReservationsView.tsx
@@ -2,7 +2,6 @@ import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
 import usePushSuccess from '../../../hooks/usePushSuccess';
-import usePushDanger from '../../../hooks/usePushDanger';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import { hasPermission } from '../../../helpers/utils';
 import useSetProgress from '../../../hooks/useSetProgress';
@@ -20,6 +19,7 @@ import ReservationExtraPaymentRefunds from './elements/ReservationExtraPaymentRe
 import ReservationExtraPaymentDetails from './elements/ReservationExtraPaymentDetails';
 import useTranslate from '../../../hooks/useTranslate';
 import TableEmptyValue from '../../elements/table-empty-value/TableEmptyValue';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function ReservationsView() {
     const { id } = useParams();
@@ -28,9 +28,9 @@ export default function ReservationsView() {
     const activeOrganization = useActiveOrganization();
 
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const transactionService = useTransactionService();
     const productReservationService = useProductReservationService();
@@ -50,10 +50,10 @@ export default function ReservationsView() {
             transactionService
                 .show(envData.client_type, activeOrganization.id, transaction_address)
                 .then((res) => setTransaction(res.data.data))
-                .catch((res) => pushDanger('Mislukt!', res.data?.message))
+                .catch(pushApiError)
                 .finally(() => setProgress(100));
         },
-        [activeOrganization.id, envData.client_type, pushDanger, setProgress, transactionService],
+        [activeOrganization.id, envData.client_type, pushApiError, setProgress, transactionService],
     );
 
     const fetchReservation = useCallback(
@@ -63,14 +63,14 @@ export default function ReservationsView() {
             productReservationService
                 .read(activeOrganization.id, reservation_id)
                 .then((res) => setReservation(res.data.data))
-                .catch((res) => pushDanger('Mislukt!', res.data?.message))
+                .catch(pushApiError)
                 .finally(() => setProgress(100));
         },
-        [activeOrganization.id, productReservationService, pushDanger, setProgress],
+        [activeOrganization.id, productReservationService, pushApiError, setProgress],
     );
 
     const acceptReservation = useCallback(
-        (reservation) => {
+        (reservation: Reservation) => {
             confirmReservationApproval(reservation, () => {
                 setProgress(0);
 
@@ -85,7 +85,7 @@ export default function ReservationsView() {
                             fetchTransaction(reservation.voucher_transaction?.address);
                         }
                     })
-                    .catch((res) => pushDanger('Mislukt!', res.data?.message))
+                    .catch(pushApiError)
                     .then(() => setProgress(100));
             });
         },
@@ -94,14 +94,14 @@ export default function ReservationsView() {
             confirmReservationApproval,
             fetchTransaction,
             productReservationService,
-            pushDanger,
+            pushApiError,
             pushSuccess,
             setProgress,
         ],
     );
 
     const rejectReservation = useCallback(
-        (reservation) => {
+        (reservation: Reservation) => {
             if (reservation.extra_payment?.is_paid && !reservation.extra_payment?.is_fully_refunded) {
                 return showRejectInfoExtraPaid();
             }
@@ -113,7 +113,7 @@ export default function ReservationsView() {
                         pushSuccess('Opgeslagen!');
                         setReservation(res.data.data);
                     })
-                    .catch((res) => pushDanger('Mislukt!', res.data?.message))
+                    .catch(pushApiError)
                     .then(() => setProgress(100));
             });
         },
@@ -121,7 +121,7 @@ export default function ReservationsView() {
             activeOrganization.id,
             confirmReservationRejection,
             productReservationService,
-            pushDanger,
+            pushApiError,
             pushSuccess,
             setProgress,
             showRejectInfoExtraPaid,
@@ -173,60 +173,59 @@ export default function ReservationsView() {
 
             <div className="card">
                 <div className="card-header">
-                    <div className="flex">
-                        <div className="flex flex-grow">
-                            <div className="flex flex-vertical">
-                                <div className="card-title">
-                                    <div className="flex">
-                                        <div className="flex flex-vertical">
-                                            <div className="flex">
-                                                <span className="text-muted">Product name:&nbsp;</span>
-                                                {reservation.product.name}
-                                                &nbsp;&nbsp;
-                                            </div>
+                    <div className="flex flex-grow">
+                        <div className="flex flex-vertical">
+                            <div className="card-title">
+                                <div className="flex">
+                                    <div className="flex flex-vertical">
+                                        <div className="flex">
+                                            <span className="text-muted">Product name:&nbsp;</span>
+                                            {reservation.product.name}
+                                            &nbsp;&nbsp;
                                         </div>
-                                        <div className="flex flex-vertical flex-center">
-                                            <div className="flex flex-horizontal">
-                                                {reservation.expired ? (
-                                                    <label className="label label-danger-light">Expired</label>
-                                                ) : (
-                                                    <label className={`label ${stateClass}`}>
-                                                        {reservation.state_locale}
-                                                    </label>
-                                                )}
-                                            </div>
+                                    </div>
+                                    <div className="flex flex-vertical flex-center">
+                                        <div className="flex flex-horizontal">
+                                            {reservation.expired ? (
+                                                <label className="label label-danger-light">Expired</label>
+                                            ) : (
+                                                <label className={`label ${stateClass}`}>
+                                                    {reservation.state_locale}
+                                                </label>
+                                            )}
                                         </div>
                                     </div>
                                 </div>
-                                <div className="card-subtitle">
-                                    <div className="flex">
-                                        <div className="mdi mdi-clock-outline" />
-                                        {reservation.created_at_locale}
-                                    </div>
+                            </div>
+                            <div className="card-subtitle">
+                                <div className="flex">
+                                    <div className="mdi mdi-clock-outline" />
+                                    {reservation.created_at_locale}
                                 </div>
                             </div>
                         </div>
-                        <div className="flex flex-self-start">
-                            <div className="flex-row">
-                                <div className="button-group">
-                                    {reservation.acceptable && (
-                                        <div
-                                            className="button button-primary button-sm"
-                                            onClick={() => acceptReservation(reservation)}>
-                                            <em className="mdi mdi-check icon-start" />
-                                            Accepteer
-                                        </div>
-                                    )}
-
-                                    {reservation.rejectable && (
-                                        <div
-                                            className="button button-danger button-sm"
-                                            onClick={() => rejectReservation(reservation)}>
-                                            <em className="mdi mdi-close icon-start" />
-                                            Weiger
-                                        </div>
-                                    )}
-                                </div>
+                    </div>
+
+                    <div className="card-header-filters flex-self-start">
+                        <div className="block block-inline-filters">
+                            <div className="button-group">
+                                {reservation.acceptable && (
+                                    <div
+                                        className="button button-primary button-sm"
+                                        onClick={() => acceptReservation(reservation)}>
+                                        <em className="mdi mdi-check icon-start" />
+                                        Accepteer
+                                    </div>
+                                )}
+
+                                {reservation.rejectable && (
+                                    <div
+                                        className="button button-danger button-sm"
+                                        onClick={() => rejectReservation(reservation)}>
+                                        <em className="mdi mdi-close icon-start" />
+                                        Weiger
+                                    </div>
+                                )}
                             </div>
                         </div>
                     </div>
diff --git a/react/src/dashboard/components/pages/reservations-view/elements/ReservationExtraPaymentDetails.tsx b/react/src/dashboard/components/pages/reservations-view/elements/ReservationExtraPaymentDetails.tsx
index 1858d6bf8..b83c21578 100644
--- a/react/src/dashboard/components/pages/reservations-view/elements/ReservationExtraPaymentDetails.tsx
+++ b/react/src/dashboard/components/pages/reservations-view/elements/ReservationExtraPaymentDetails.tsx
@@ -5,13 +5,12 @@ import ExtraPayment from '../../../../props/models/ExtraPayment';
 import KeyValueItem from '../../../elements/key-value/KeyValueItem';
 import useSetProgress from '../../../../hooks/useSetProgress';
 import usePushSuccess from '../../../../hooks/usePushSuccess';
-import usePushDanger from '../../../../hooks/usePushDanger';
 import useProductReservationService from '../../../../services/ProductReservationService';
-import { ResponseError } from '../../../../props/ApiResponses';
 import ModalDangerZone from '../../../modals/ModalDangerZone';
 import useOpenModal from '../../../../hooks/useOpenModal';
 import useEnvData from '../../../../hooks/useEnvData';
 import useTranslate from '../../../../hooks/useTranslate';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 export default function ReservationExtraPaymentDetails({
     payment,
@@ -29,9 +28,9 @@ export default function ReservationExtraPaymentDetails({
 
     const openModal = useOpenModal();
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
     const pushSuccess = usePushSuccess();
+    const pushApiError = usePushApiError();
 
     const productReservationService = useProductReservationService();
 
@@ -44,9 +43,9 @@ export default function ReservationExtraPaymentDetails({
                 onUpdate(res.data.data);
                 pushSuccess('Opgeslagen!');
             })
-            .catch((err: ResponseError) => pushDanger(err.data.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [setProgress, productReservationService, organization.id, reservation.id, onUpdate, pushSuccess, pushDanger]);
+    }, [setProgress, productReservationService, organization.id, reservation.id, onUpdate, pushSuccess, pushApiError]);
 
     const refundExtraPayment = useCallback(
         function () {
@@ -69,7 +68,7 @@ export default function ReservationExtraPaymentDetails({
                                     onUpdate(res.data.data);
                                     pushSuccess('Refund created!');
                                 })
-                                .catch((err: ResponseError) => pushDanger(err.data.message))
+                                .catch(pushApiError)
                                 .finally(() => {
                                     setProgress(100);
                                     modal.close();
@@ -84,9 +83,9 @@ export default function ReservationExtraPaymentDetails({
             translate,
             onUpdate,
             openModal,
-            pushDanger,
             setProgress,
             pushSuccess,
+            pushApiError,
             reservation.id,
             organization.id,
             productReservationService,
@@ -96,13 +95,11 @@ export default function ReservationExtraPaymentDetails({
     return (
         <div className="card">
             <div className="card-header">
-                <div className="flex">
-                    <div className="flex flex-grow">
-                        <div className="card-title">Transactie details van de bijbetaling</div>
-                    </div>
+                <div className="flex flex-grow card-title">Transactie details van de bijbetaling</div>
 
-                    {isProvider && (
-                        <div className="button-group">
+                {isProvider && (
+                    <div className="card-header-filters">
+                        <div className="block block-inline-filters">
                             {!reservation.canceled && (
                                 <button className="button button-primary button-sm" onClick={() => fetchExtraPayment()}>
                                     <em className="mdi mdi-autorenew icon-start"></em>
@@ -120,8 +117,8 @@ export default function ReservationExtraPaymentDetails({
                                 </button>
                             )}
                         </div>
-                    )}
-                </div>
+                    </div>
+                )}
             </div>
 
             <div className="card-section">
diff --git a/react/src/dashboard/components/pages/reservations-view/elements/ReservationExtraPaymentRefunds.tsx b/react/src/dashboard/components/pages/reservations-view/elements/ReservationExtraPaymentRefunds.tsx
index 29c798406..c5a18f5fa 100644
--- a/react/src/dashboard/components/pages/reservations-view/elements/ReservationExtraPaymentRefunds.tsx
+++ b/react/src/dashboard/components/pages/reservations-view/elements/ReservationExtraPaymentRefunds.tsx
@@ -8,14 +8,10 @@ export default function ReservationExtraPaymentRefunds({ refunds }: { refunds: A
     return (
         <div className="card">
             <div className="card-header">
-                <div className="flex">
-                    <div className="flex flex-grow">
-                        <div className="card-title">
-                            <span>{translate('reservation.header.refunds.title')}</span>
-                            &nbsp;
-                            <span className="span-count">{refunds.length}</span>
-                        </div>
-                    </div>
+                <div className="card-title">
+                    <span>{translate('reservation.header.refunds.title')}</span>
+                    &nbsp;
+                    <span className="span-count">{refunds.length}</span>
                 </div>
             </div>
 
diff --git a/react/src/dashboard/components/pages/reservations/Reservations.tsx b/react/src/dashboard/components/pages/reservations/Reservations.tsx
index 364e49fb9..1ee515f7b 100644
--- a/react/src/dashboard/components/pages/reservations/Reservations.tsx
+++ b/react/src/dashboard/components/pages/reservations/Reservations.tsx
@@ -12,7 +12,6 @@ import Paginator from '../../../modules/paginator/components/Paginator';
 import useProductReservationService from '../../../services/ProductReservationService';
 import Reservation from '../../../props/models/Reservation';
 import usePushSuccess from '../../../hooks/usePushSuccess';
-import usePushDanger from '../../../hooks/usePushDanger';
 import { useOrganizationService } from '../../../services/OrganizationService';
 import ModalDangerZone from '../../modals/ModalDangerZone';
 import useProductReservationsExportService from '../../../services/exports/useProductReservationsExportService';
@@ -40,6 +39,7 @@ import useTranslate from '../../../hooks/useTranslate';
 import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
 import TableTopScroller from '../../elements/tables/TableTopScroller';
 import TableRowActions from '../../elements/tables/TableRowActions';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function Reservations() {
     const activeOrganization = useActiveOrganization();
@@ -48,9 +48,9 @@ export default function Reservations() {
 
     const openModal = useOpenModal();
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const productService = useProductService();
     const paginatorService = usePaginatorService();
@@ -147,13 +147,13 @@ export default function Reservations() {
     const acceptReservation = useCallback(
         (reservation: Reservation) => {
             confirmReservationApproval(reservation as Reservation, () => {
-                productReservationService.accept(activeOrganization.id, reservation.id).then(
-                    () => {
+                productReservationService
+                    .accept(activeOrganization.id, reservation.id)
+                    .then(() => {
                         pushSuccess('Opgeslagen!');
                         fetchAllReservations();
-                    },
-                    (res) => pushDanger(res.data.message),
-                );
+                    })
+                    .catch(pushApiError);
             });
         },
         [
@@ -161,7 +161,7 @@ export default function Reservations() {
             confirmReservationApproval,
             fetchAllReservations,
             productReservationService,
-            pushDanger,
+            pushApiError,
             pushSuccess,
         ],
     );
@@ -173,18 +173,18 @@ export default function Reservations() {
             }
 
             confirmReservationRejection(reservation, () => {
-                productReservationService.reject(activeOrganization.id, reservation.id).then(
-                    () => {
+                productReservationService
+                    .reject(activeOrganization.id, reservation.id)
+                    .then(() => {
                         pushSuccess('Opgeslagen!');
                         fetchAllReservations();
-                    },
-                    (res) => pushDanger(res.data.message),
-                );
+                    })
+                    .catch(pushApiError);
             });
         },
         [
-            pushDanger,
             pushSuccess,
+            pushApiError,
             activeOrganization.id,
             fetchAllReservations,
             showReservationRejectInfoExtraPaid,
@@ -205,7 +205,7 @@ export default function Reservations() {
                         setAcceptByDefault(res.data.data.reservations_auto_accept);
                         pushSuccess('Opgeslagen!');
                     })
-                    .catch(() => pushDanger('Er is iets misgegaan!'));
+                    .catch(pushApiError);
             };
 
             const onDisable = () => {
@@ -216,7 +216,7 @@ export default function Reservations() {
                         setAcceptByDefault(res.data.data.reservations_auto_accept);
                         pushSuccess('Opgeslagen!');
                     })
-                    .catch(() => pushDanger('Er is iets misgegaan!'));
+                    .catch(pushApiError);
             };
 
             const onCancel = () => {
@@ -259,7 +259,7 @@ export default function Reservations() {
                 />
             ));
         },
-        [activeOrganization, updateActiveOrganization, openModal, organizationService, pushDanger, pushSuccess],
+        [activeOrganization, updateActiveOrganization, openModal, organizationService, pushApiError, pushSuccess],
     );
 
     const makeReservation = useCallback(() => {
@@ -289,13 +289,13 @@ export default function Reservations() {
     const archiveReservation = useCallback(
         (reservation: Reservation) => {
             confirmReservationArchive(reservation as Reservation, () => {
-                productReservationService.archive(activeOrganization.id, reservation.id).then(
-                    () => {
+                productReservationService
+                    .archive(activeOrganization.id, reservation.id)
+                    .then(() => {
                         pushSuccess('Opgeslagen!');
                         fetchAllReservations();
-                    },
-                    (res) => pushDanger(res.data.message),
-                );
+                    })
+                    .catch(pushApiError);
             });
         },
         [
@@ -303,7 +303,7 @@ export default function Reservations() {
             confirmReservationArchive,
             fetchAllReservations,
             productReservationService,
-            pushDanger,
+            pushApiError,
             pushSuccess,
         ],
     );
@@ -311,13 +311,13 @@ export default function Reservations() {
     const unarchiveReservation = useCallback(
         (reservation: Reservation) => {
             confirmReservationUnarchive(reservation as Reservation, () => {
-                productReservationService.unarchive(activeOrganization.id, reservation.id).then(
-                    () => {
+                productReservationService
+                    .unarchive(activeOrganization.id, reservation.id)
+                    .then(() => {
                         pushSuccess('Opgeslagen!');
                         fetchAllReservations();
-                    },
-                    (res) => pushDanger(res.data.message),
-                );
+                    })
+                    .catch(pushApiError);
             });
         },
         [
@@ -325,7 +325,7 @@ export default function Reservations() {
             confirmReservationUnarchive,
             fetchAllReservations,
             productReservationService,
-            pushDanger,
+            pushApiError,
             pushSuccess,
         ],
     );
@@ -361,7 +361,7 @@ export default function Reservations() {
 
     return (
         <div className="card">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="card-title flex flex-grow" data-dusk="reservationsTitle">
                     {translate('reservations.header.title')} ({reservations?.meta?.total})
                 </div>
diff --git a/react/src/dashboard/components/pages/reservations/elements/ReservationFieldItem.tsx b/react/src/dashboard/components/pages/reservations/elements/ReservationFieldItem.tsx
index 925f993b7..ce67e504a 100644
--- a/react/src/dashboard/components/pages/reservations/elements/ReservationFieldItem.tsx
+++ b/react/src/dashboard/components/pages/reservations/elements/ReservationFieldItem.tsx
@@ -34,6 +34,7 @@ export default function ReservationFieldItem({
     const [types] = useState([
         { key: 'text', name: 'Tekst' },
         { key: 'number', name: 'Nummer' },
+        { key: 'boolean', name: 'Ja / Nee' },
     ]);
 
     const askConfirmation = useCallback(
diff --git a/react/src/dashboard/components/pages/sponsor-fund-unsubscriptions/SponsorFundUnsubscriptions.tsx b/react/src/dashboard/components/pages/sponsor-fund-unsubscriptions/SponsorFundUnsubscriptions.tsx
index 28aedd2d0..61b93c5d1 100644
--- a/react/src/dashboard/components/pages/sponsor-fund-unsubscriptions/SponsorFundUnsubscriptions.tsx
+++ b/react/src/dashboard/components/pages/sponsor-fund-unsubscriptions/SponsorFundUnsubscriptions.tsx
@@ -1,10 +1,9 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
-import { PaginationData, ResponseError } from '../../../props/ApiResponses';
+import { PaginationData } from '../../../props/ApiResponses';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import usePaginatorService from '../../../modules/paginator/services/usePaginatorService';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
 import useSetProgress from '../../../hooks/useSetProgress';
-import usePushDanger from '../../../hooks/usePushDanger';
 import { createEnumParam, NumberParam } from 'use-query-params';
 import Paginator from '../../../modules/paginator/components/Paginator';
 import useFundUnsubscribeService from '../../../services/FundUnsubscribeService';
@@ -15,12 +14,13 @@ import LoaderTableCard from '../../elements/loader-table-card/LoaderTableCard';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
 import TableTopScroller from '../../elements/tables/TableTopScroller';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function SponsorFundUnsubscriptions() {
     const activeOrganization = useActiveOrganization();
 
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const paginatorService = usePaginatorService();
     const fundUnsubscribeService = useFundUnsubscribeService();
@@ -65,12 +65,12 @@ export default function SponsorFundUnsubscriptions() {
         fundUnsubscribeService
             .listSponsor(activeOrganization.id, filterActiveValues)
             .then((res) => setFundUnsubscribes(res.data))
-            .catch((err: ResponseError) => pushDanger(err.data.message))
+            .catch(pushApiError)
             .finally(() => {
                 setProgress(100);
                 setLoading(false);
             });
-    }, [activeOrganization.id, filterActiveValues, fundUnsubscribeService, pushDanger, setProgress]);
+    }, [activeOrganization.id, filterActiveValues, fundUnsubscribeService, pushApiError, setProgress]);
 
     useEffect(() => {
         fetchFundUnsubscribes();
@@ -91,7 +91,7 @@ export default function SponsorFundUnsubscriptions() {
             </StateNavLink>
 
             <div className="card">
-                <div className="card-header card-header-next">
+                <div className="card-header">
                     <div className="card-title flex flex-grow">Afmeldingen ({fundUnsubscribes.meta.total})</div>
                     <div className="card-header-filters">
                         <div className="block block-label-tabs pull-right">
diff --git a/react/src/dashboard/components/pages/sponsor-product-edit/SponsorProductsCreate.tsx b/react/src/dashboard/components/pages/sponsor-product-edit/SponsorProductsCreate.tsx
index f0cb03f1b..806534a67 100644
--- a/react/src/dashboard/components/pages/sponsor-product-edit/SponsorProductsCreate.tsx
+++ b/react/src/dashboard/components/pages/sponsor-product-edit/SponsorProductsCreate.tsx
@@ -1,21 +1,20 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import { useParams } from 'react-router-dom';
-import { ResponseError } from '../../../props/ApiResponses';
 import ProductsForm from '../products-edit/elements/ProductsForm';
 import { useFundService } from '../../../services/FundService';
-import usePushDanger from '../../../hooks/usePushDanger';
 import useSetProgress from '../../../hooks/useSetProgress';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
 import { NumberParam, useQueryParam } from 'use-query-params';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function SponsorProductsCreate() {
     const { fundId, fundProviderId } = useParams();
 
     const [sourceId] = useQueryParam('source_id', NumberParam);
 
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const activeOrganization = useActiveOrganization();
 
     const fundService = useFundService();
@@ -27,9 +26,9 @@ export default function SponsorProductsCreate() {
         fundService
             .readProvider(activeOrganization.id, parseInt(fundId), parseInt(fundProviderId))
             .then((res) => setFundProvider(res.data.data))
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [setProgress, fundService, activeOrganization.id, fundId, fundProviderId, pushDanger]);
+    }, [setProgress, fundService, activeOrganization.id, fundId, fundProviderId, pushApiError]);
 
     useEffect(() => {
         fetchFundProvider();
diff --git a/react/src/dashboard/components/pages/sponsor-product-edit/SponsorProductsEdit.tsx b/react/src/dashboard/components/pages/sponsor-product-edit/SponsorProductsEdit.tsx
index 07c31fdca..7905a7411 100644
--- a/react/src/dashboard/components/pages/sponsor-product-edit/SponsorProductsEdit.tsx
+++ b/react/src/dashboard/components/pages/sponsor-product-edit/SponsorProductsEdit.tsx
@@ -1,17 +1,16 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import { useParams } from 'react-router-dom';
-import usePushDanger from '../../../hooks/usePushDanger';
 import useSetProgress from '../../../hooks/useSetProgress';
 import { useFundService } from '../../../services/FundService';
-import { ResponseError } from '../../../props/ApiResponses';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
 import ProductsForm from '../products-edit/elements/ProductsForm';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function SponsorProductsEdit() {
     const { id, fundId, fundProviderId } = useParams();
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const activeOrganization = useActiveOrganization();
 
     const fundService = useFundService();
@@ -23,9 +22,9 @@ export default function SponsorProductsEdit() {
         fundService
             .readProvider(activeOrganization.id, parseInt(fundId), parseInt(fundProviderId))
             .then((res) => setFundProvider(res.data.data))
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [setProgress, fundService, activeOrganization.id, fundId, fundProviderId, pushDanger]);
+    }, [setProgress, fundService, activeOrganization.id, fundId, fundProviderId, pushApiError]);
 
     useEffect(() => {
         fetchFundProvider();
diff --git a/react/src/dashboard/components/pages/sponsor-product/SponsorProductView.tsx b/react/src/dashboard/components/pages/sponsor-product/SponsorProductView.tsx
index 1dfd32688..df78f551e 100644
--- a/react/src/dashboard/components/pages/sponsor-product/SponsorProductView.tsx
+++ b/react/src/dashboard/components/pages/sponsor-product/SponsorProductView.tsx
@@ -9,11 +9,13 @@ import ProductDetailsBlock from '../products-view/elements/ProductDetailsBlock';
 import SponsorProduct from '../../../props/models/Sponsor/SponsorProduct';
 import ProductMonitoredHistoryCard from './elements/ProductMonitoredHistoryCard';
 import ProductMonitoredHistoryCardFunds from './elements/ProductMonitoredHistoryCardFunds';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function SponsorProductView() {
     const { productId } = useParams();
 
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const productService = useProductService();
     const activeOrganization = useActiveOrganization();
@@ -26,8 +28,9 @@ export default function SponsorProductView() {
         productService
             .sponsorProduct(activeOrganization.id, parseInt(productId))
             .then((res) => setProduct(res.data.data))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [activeOrganization.id, productService, productId, setProgress]);
+    }, [activeOrganization.id, productService, productId, setProgress, pushApiError]);
 
     useEffect(() => {
         fetchProduct();
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 21994aee9..452ff63c8 100644
--- a/react/src/dashboard/components/pages/sponsor-product/elements/ProductMonitoredHistoryCard.tsx
+++ b/react/src/dashboard/components/pages/sponsor-product/elements/ProductMonitoredHistoryCard.tsx
@@ -10,7 +10,7 @@ export default function ProductMonitoredHistoryCard({ product }: { product: Spon
 
     return (
         <div className="card">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="card-title flex flex-grow">
                     {translate('sponsor_products.labels.logs')} ({product.monitored_history?.length})
                 </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 133c4d3c0..3baec30b4 100644
--- a/react/src/dashboard/components/pages/sponsor-product/elements/ProductMonitoredHistoryCardFunds.tsx
+++ b/react/src/dashboard/components/pages/sponsor-product/elements/ProductMonitoredHistoryCardFunds.tsx
@@ -150,7 +150,7 @@ export default function ProductMonitoredHistoryCardFunds({
 
     return (
         <div className="card">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="card-title flex flex-grow">Fondsen</div>
                 <div className="card-header-filters">
                     <div className="block block-inline-filters">
diff --git a/react/src/dashboard/components/pages/sponsor-products/SponsorProducts.tsx b/react/src/dashboard/components/pages/sponsor-products/SponsorProducts.tsx
index 944762eb3..625f5929a 100644
--- a/react/src/dashboard/components/pages/sponsor-products/SponsorProducts.tsx
+++ b/react/src/dashboard/components/pages/sponsor-products/SponsorProducts.tsx
@@ -153,7 +153,7 @@ export default function SponsorProducts() {
 
     return (
         <div className="card">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 <div className="card-title flex flex-grow">
                     {translate('products.offers')} ({products.meta.total})
                 </div>
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 5c2e5077f..fb8a888e1 100644
--- a/react/src/dashboard/components/pages/sponsor-provider-organization/SponsorProviderOrganization.tsx
+++ b/react/src/dashboard/components/pages/sponsor-provider-organization/SponsorProviderOrganization.tsx
@@ -1,9 +1,8 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import useFilter from '../../../hooks/useFilter';
-import { PaginationData, ResponseError } from '../../../props/ApiResponses';
+import { PaginationData } from '../../../props/ApiResponses';
 import { useParams } from 'react-router-dom';
-import usePushDanger from '../../../hooks/usePushDanger';
 import useSetProgress from '../../../hooks/useSetProgress';
 import { useOrganizationService } from '../../../services/OrganizationService';
 import FundProvider from '../../../props/models/FundProvider';
@@ -16,13 +15,14 @@ import type { SponsorProviderOrganization } from '../../../props/models/Organiza
 import { strLimit } from '../../../helpers/string';
 import useTranslate from '../../../hooks/useTranslate';
 import EmptyCard from '../../elements/empty-card/EmptyCard';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function SponsorProviderOrganization() {
     const { id } = useParams();
 
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const activeOrganization = useActiveOrganization();
 
     const organizationService = useOrganizationService();
@@ -47,9 +47,9 @@ export default function SponsorProviderOrganization() {
         organizationService
             .listProviders(activeOrganization.id, { ...filter.activeValues, organization_id: id })
             .then((res) => setFundProviders(res.data))
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [setProgress, organizationService, activeOrganization.id, filter.activeValues, id, pushDanger]);
+    }, [setProgress, organizationService, activeOrganization.id, filter.activeValues, id, pushApiError]);
 
     const fetchProviderOrganization = useCallback(() => {
         setProgress(0);
@@ -57,9 +57,9 @@ export default function SponsorProviderOrganization() {
         organizationService
             .providerOrganization(activeOrganization.id, parseInt(id))
             .then((res) => setProviderOrganization(res.data.data))
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data?.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [activeOrganization.id, id, organizationService, pushDanger, setProgress]);
+    }, [activeOrganization.id, id, organizationService, pushApiError, setProgress]);
 
     useEffect(() => {
         fetchFundProviders();
@@ -90,24 +90,17 @@ export default function SponsorProviderOrganization() {
 
             <div className="card">
                 <div className="card-header">
-                    <div className="flex-row">
-                        <div className="flex-col">
-                            <div className="card-title">Fondsen en aanbod</div>
-                        </div>
-                        <div className="flex-col">
-                            <div className="card-header-drown">
-                                <div className="block block-inline-filters">
-                                    <div className="form">
-                                        <div className="form-group">
-                                            <input
-                                                className="form-control"
-                                                value={filter.values.q}
-                                                onChange={(e) => filter.update({ q: e.target.value })}
-                                                placeholder="Zoeken"
-                                            />
-                                        </div>
-                                    </div>
-                                </div>
+                    <div className="flex flex-grow card-title">Fondsen en aanbod</div>
+
+                    <div className="card-header-filters">
+                        <div className="block block-inline-filters form">
+                            <div className="form-group">
+                                <input
+                                    className="form-control"
+                                    value={filter.values.q}
+                                    onChange={(e) => filter.update({ q: e.target.value })}
+                                    placeholder="Zoeken"
+                                />
                             </div>
                         </div>
                     </div>
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 8cff64a16..016c77e02 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
@@ -1,6 +1,4 @@
 import React, { Fragment, useCallback, useState } from 'react';
-import { ResponseError } from '../../../../props/ApiResponses';
-import usePushDanger from '../../../../hooks/usePushDanger';
 import { useFundService } from '../../../../services/FundService';
 import usePushSuccess from '../../../../hooks/usePushSuccess';
 import FundProvider from '../../../../props/models/FundProvider';
@@ -8,6 +6,7 @@ import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import Organization from '../../../../props/models/Organization';
 import useConfirmFundProviderUpdate from '../hooks/useConfirmFundProviderUpdate';
 import useAssetUrl from '../../../../hooks/useAssetUrl';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 export default function FundProviderTableItem({
     fundProvider,
@@ -20,7 +19,7 @@ export default function FundProviderTableItem({
 }) {
     const pushSuccess = usePushSuccess();
     const assetUrl = useAssetUrl();
-    const pushDanger = usePushDanger();
+    const pushApiError = usePushApiError();
     const confirmFundProviderUpdate = useConfirmFundProviderUpdate();
 
     const fundService = useFundService();
@@ -39,9 +38,9 @@ export default function FundProviderTableItem({
                     pushSuccess('Opgeslagen!');
                     onChange(res.data.data);
                 })
-                .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message));
+                .catch(pushApiError);
         },
-        [fundService, onChange, pushDanger, pushSuccess],
+        [fundService, onChange, pushApiError, pushSuccess],
     );
 
     const updateFundProviderExcluded = useCallback(
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 5965d44f0..b2b548240 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
@@ -2,13 +2,12 @@ import React, { Fragment, useCallback, useMemo, useState } from 'react';
 import FundProvider from '../../../../props/models/FundProvider';
 import Organization, { SponsorProviderOrganization } from '../../../../props/models/Organization';
 import useAssetUrl from '../../../../hooks/useAssetUrl';
-import { ResponseError } from '../../../../props/ApiResponses';
 import useConfirmFundProviderUpdate from '../hooks/useConfirmFundProviderUpdate';
 import { useFundService } from '../../../../services/FundService';
-import usePushDanger from '../../../../hooks/usePushDanger';
 import usePushSuccess from '../../../../hooks/usePushSuccess';
 import useSetProgress from '../../../../hooks/useSetProgress';
 import ToggleControl from '../../../elements/forms/controls/ToggleControl';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 export default function ProviderOrganizationOverview({
     organization,
@@ -20,9 +19,9 @@ export default function ProviderOrganizationOverview({
     setFundProvider?: React.Dispatch<React.SetStateAction<FundProvider>>;
 }) {
     const assetUrl = useAssetUrl();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const confirmFundProviderUpdate = useConfirmFundProviderUpdate();
 
     const fundService = useFundService();
@@ -75,10 +74,10 @@ export default function ProviderOrganizationOverview({
                     pushSuccess('Opgeslagen!');
                     setFundProvider(res.data.data);
                 })
-                .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message))
+                .catch(pushApiError)
                 .finally(() => setProgress(100));
         },
-        [fundProvider, fundService, setFundProvider, pushDanger, pushSuccess, setProgress],
+        [fundProvider, fundService, setFundProvider, pushApiError, pushSuccess, setProgress],
     );
 
     const updateFundProviderAllow = useCallback(
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 b3fa10018..ec8e466ba 100644
--- a/react/src/dashboard/components/pages/sponsor-provider-organizations/SponsorProviderOrganizations.tsx
+++ b/react/src/dashboard/components/pages/sponsor-provider-organizations/SponsorProviderOrganizations.tsx
@@ -1,8 +1,7 @@
 import React, { Fragment, useCallback, useEffect, useState } from 'react';
 import { useFileService } from '../../../services/FileService';
-import { PaginationData, ResponseError } from '../../../props/ApiResponses';
+import { PaginationData } from '../../../props/ApiResponses';
 import LoadingCard from '../../elements/loading-card/LoadingCard';
-import usePushDanger from '../../../hooks/usePushDanger';
 import useOpenModal from '../../../hooks/useOpenModal';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import usePaginatorService from '../../../modules/paginator/services/usePaginatorService';
@@ -30,13 +29,14 @@ import Paginator from '../../../modules/paginator/components/Paginator';
 import useConfigurableTable from '../vouchers/hooks/useConfigurableTable';
 import TableTopScroller from '../../elements/tables/TableTopScroller';
 import classNames from 'classnames';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function SponsorProviderOrganizations() {
     const translate = useTranslate();
 
     const openModal = useOpenModal();
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const activeOrganization = useActiveOrganization();
 
     const fileService = useFileService();
@@ -119,9 +119,9 @@ export default function SponsorProviderOrganizations() {
         implementationService
             .list(activeOrganization.id, { per_page: 100 })
             .then((res) => setImplementations([{ id: null, name: 'Alle implementaties' }, ...res.data.data]))
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [activeOrganization.id, implementationService, pushDanger, setProgress]);
+    }, [activeOrganization.id, implementationService, pushApiError, setProgress]);
 
     const fetchFunds = useCallback(() => {
         setProgress(0);
@@ -129,9 +129,9 @@ export default function SponsorProviderOrganizations() {
         fundService
             .list(activeOrganization.id, { per_page: 100 })
             .then((res) => setFunds([{ id: null, name: 'Alle fondsen' }, ...res.data.data]))
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [activeOrganization.id, fundService, pushDanger, setProgress]);
+    }, [activeOrganization.id, fundService, pushApiError, setProgress]);
 
     const fetchProviderOrganizations = useCallback(() => {
         setLoading(true);
@@ -148,12 +148,12 @@ export default function SponsorProviderOrganizations() {
         organizationService
             .providerOrganizations(activeOrganization.id, query)
             .then((res) => setProviderOrganizations(res.data))
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message))
+            .catch(pushApiError)
             .finally(() => {
                 setLoading(false);
                 setProgress(100);
             });
-    }, [activeOrganization.id, filterActiveValues, organizationService, pushDanger, setProgress]);
+    }, [activeOrganization.id, filterActiveValues, organizationService, pushApiError, setProgress]);
 
     const fetchFundUnsubscribes = useCallback(() => {
         setProgress(0);
@@ -165,9 +165,9 @@ export default function SponsorProviderOrganizations() {
                 setRequestsExpired(res.data.data.filter((item) => item.state == 'overdue').length);
                 setRequestsPending(res.data.data.filter((item) => item.state == 'pending').length);
             })
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [activeOrganization.id, fundUnsubscribeService, pushDanger, setProgress]);
+    }, [activeOrganization.id, fundUnsubscribeService, pushApiError, setProgress]);
 
     const doExport = useCallback(
         (exportType: string) => {
@@ -179,9 +179,9 @@ export default function SponsorProviderOrganizations() {
 
                     fileService.downloadFile(fileName, res.data, res.headers['content-type']);
                 })
-                .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message));
+                .catch(pushApiError);
         },
-        [pushDanger, fileService, filterActiveValues, activeOrganization, organizationService],
+        [pushApiError, fileService, filterActiveValues, activeOrganization, organizationService],
     );
 
     const exportList = useCallback(() => {
@@ -251,7 +251,7 @@ export default function SponsorProviderOrganizations() {
             )}
 
             <div className="card">
-                <div className="card-header card-header-next">
+                <div className="card-header">
                     <div className="flex flex-grow">
                         <div className="card-title flex flex-grow">
                             {translate('provider_organizations.header.title')} ({providerOrganizations.meta.total})
diff --git a/react/src/dashboard/components/pages/sponsor-provider-organizations/elements/ProvidersTableItem.tsx b/react/src/dashboard/components/pages/sponsor-provider-organizations/elements/ProvidersTableItem.tsx
index 73177d8e8..2c48694f6 100644
--- a/react/src/dashboard/components/pages/sponsor-provider-organizations/elements/ProvidersTableItem.tsx
+++ b/react/src/dashboard/components/pages/sponsor-provider-organizations/elements/ProvidersTableItem.tsx
@@ -1,16 +1,16 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { strLimit } from '../../../../helpers/string';
-import { PaginationData, ResponseError } from '../../../../props/ApiResponses';
+import { PaginationData } from '../../../../props/ApiResponses';
 import Organization, { SponsorProviderOrganization } from '../../../../props/models/Organization';
 import ProvidersTableItemFunds from './ProvidersTableItemFunds';
 import { useOrganizationService } from '../../../../services/OrganizationService';
-import usePushDanger from '../../../../hooks/usePushDanger';
 import useFilter from '../../../../hooks/useFilter';
 import FundProvider from '../../../../props/models/FundProvider';
 import useSetProgress from '../../../../hooks/useSetProgress';
 import useTranslate from '../../../../hooks/useTranslate';
 import StateNavLink from '../../../../modules/state_router/StateNavLink';
 import TableRowActions from '../../../elements/tables/TableRowActions';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 export default function ProvidersTableItem({
     organization,
@@ -20,8 +20,8 @@ export default function ProvidersTableItem({
     providerOrganization: SponsorProviderOrganization;
 }) {
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const organizationService = useOrganizationService();
 
@@ -36,9 +36,9 @@ export default function ProvidersTableItem({
         organizationService
             .listProviders(organization.id, filter.activeValues)
             .then((res) => setFundProviders(res.data))
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [filter.activeValues, organization.id, organizationService, pushDanger, setProgress]);
+    }, [filter.activeValues, organization.id, organizationService, pushApiError, setProgress]);
 
     useEffect(() => {
         if (showFundProviders) {
diff --git a/react/src/dashboard/components/pages/transaction-bulks-view/TransactionBulksView.tsx b/react/src/dashboard/components/pages/transaction-bulks-view/TransactionBulksView.tsx
index b489d2dc9..607e43059 100644
--- a/react/src/dashboard/components/pages/transaction-bulks-view/TransactionBulksView.tsx
+++ b/react/src/dashboard/components/pages/transaction-bulks-view/TransactionBulksView.tsx
@@ -20,6 +20,7 @@ import TransactionBulkTransactionsTable from './elements/TransactionBulkTransact
 import Bank from '../../../props/models/Bank';
 import { ResponseError } from '../../../props/ApiResponses';
 import useTranslate from '../../../hooks/useTranslate';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function TransactionBulksView() {
     const envData = useEnvData();
@@ -30,6 +31,7 @@ export default function TransactionBulksView() {
     const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const transactionBulkService = useTransactionBulkService();
     const exporterService = useMakeExporterService();
@@ -170,9 +172,9 @@ export default function TransactionBulksView() {
 
     const onError = useCallback(
         (err: ResponseError = null) => {
-            pushDanger('Mislukt!', err?.data?.message || 'Er ging iets mis!');
+            pushApiError(err);
         },
-        [pushDanger],
+        [pushApiError],
     );
 
     const resetPaymentRequest = useCallback(() => {
@@ -269,14 +271,14 @@ export default function TransactionBulksView() {
                     pushSuccess(`Succes!`, `De bulk lijst is handmatig geaccepteerd.`);
                     fetchTransactionBulk();
                 })
-                .catch((res) => pushDanger('Mislukt!', res?.data?.message || 'Er ging iets mis!'))
+                .catch(pushApiError)
                 .finally(() => setProgress(100));
         });
     }, [
         activeOrganization.id,
         confirmSetPaidExport,
         fetchTransactionBulk,
-        pushDanger,
+        pushApiError,
         pushSuccess,
         setProgress,
         transactionBulk?.id,
@@ -321,85 +323,77 @@ export default function TransactionBulksView() {
 
             <div className="card">
                 <div className="card-header">
-                    <div className="flex-row">
-                        <div className="flex flex-grow">
-                            <div className="card-title">
-                                {translate('financial_dashboard_transaction.labels.details')}
-                            </div>
-                        </div>
+                    <div className="flex flex-grow card-title">
+                        {translate('financial_dashboard_transaction.labels.details')}
+                    </div>
+                    {canManageBulks && (
+                        <div className="card-header-filters">
+                            <div className="block block-inline-filters">
+                                {transactionBulk.bank.key === 'bng' && (
+                                    <Fragment>
+                                        {transactionBulk.state == 'draft' && (
+                                            <Fragment>
+                                                {/* Export SEPA file */}
+                                                {activeOrganization.allow_manual_bulk_processing && (
+                                                    <button
+                                                        className="button button-default button-sm"
+                                                        onClick={() => exportSepa()}>
+                                                        <em className="mdi mdi-download icon-start" />
+                                                        SEPA-bestand exporteren
+                                                    </button>
+                                                )}
 
-                        {canManageBulks && (
-                            <div className="flex">
-                                <div className="button-group">
-                                    {transactionBulk.bank.key === 'bng' && (
-                                        <Fragment>
-                                            {transactionBulk.state == 'draft' && (
-                                                <Fragment>
-                                                    {/* Export SEPA file */}
-                                                    {activeOrganization.allow_manual_bulk_processing && (
-                                                        <button
-                                                            className="button button-default button-sm"
-                                                            onClick={() => exportSepa()}>
-                                                            <em className="mdi mdi-download icon-start" />
-                                                            SEPA-bestand exporteren
-                                                        </button>
+                                                {/* BNG: Submit bulk to BNG */}
+                                                <button
+                                                    className="button button-primary button-sm"
+                                                    onClick={() => submitPaymentRequestToBNG()}
+                                                    disabled={submittingBulk || resettingBulk}>
+                                                    {!submittingBulk && (
+                                                        <em className="mdi mdi-circle-multiple-outline icon-start" />
                                                     )}
+                                                    {submittingBulk && (
+                                                        <em className="mdi mdi-reload mdi-spin icon-start" />
+                                                    )}
+                                                    Verstuur de bulk naar BNG
+                                                </button>
 
-                                                    {/* BNG: Submit bulk to BNG */}
+                                                {/* Set paid */}
+                                                {transactionBulk.is_exported && (
                                                     <button
-                                                        className="button button-primary button-sm"
-                                                        onClick={() => submitPaymentRequestToBNG()}
-                                                        disabled={submittingBulk || resettingBulk}>
-                                                        {!submittingBulk && (
-                                                            <em className="mdi mdi-circle-multiple-outline icon-start" />
-                                                        )}
-                                                        {submittingBulk && (
-                                                            <em className="mdi mdi-reload mdi-spin icon-start" />
-                                                        )}
-                                                        Verstuur de bulk naar BNG
+                                                        className="button button-danger button-sm"
+                                                        onClick={() => acceptManually()}>
+                                                        <em className="mdi mdi-alert-outline icon-start" />
+                                                        Markeer de bulk lijst en de transacties als betaald.
                                                     </button>
+                                                )}
+                                            </Fragment>
+                                        )}
+                                    </Fragment>
+                                )}
 
-                                                    {/* Set paid */}
-                                                    {transactionBulk.is_exported && (
-                                                        <button
-                                                            className="button button-danger button-sm"
-                                                            onClick={() => acceptManually()}>
-                                                            <em className="mdi mdi-alert-outline icon-start" />
-                                                            Markeer de bulk lijst en de transacties als betaald.
-                                                        </button>
-                                                    )}
-                                                </Fragment>
-                                            )}
-                                        </Fragment>
-                                    )}
+                                {((transactionBulk.bank.key === 'bng' && transactionBulk.state == 'pending') ||
+                                    (transactionBulk.bank.key === 'bunq' && transactionBulk.state == 'rejected')) && (
+                                    <button
+                                        className="button button-text button-narrow button-sm"
+                                        onClick={() => resetPaymentRequest()}
+                                        disabled={submittingBulk || resettingBulk}>
+                                        <em className="mdi mdi-lock-reset icon-start" />
+                                        Verstuur bulktransactie opnieuw
+                                    </button>
+                                )}
 
-                                    {((transactionBulk.bank.key === 'bng' && transactionBulk.state == 'pending') ||
-                                        (transactionBulk.bank.key === 'bunq' &&
-                                            transactionBulk.state == 'rejected')) && (
-                                        <button
-                                            className="button button-text button-narrow button-sm"
-                                            onClick={() => resetPaymentRequest()}
-                                            disabled={submittingBulk || resettingBulk}>
-                                            <em className="mdi mdi-lock-reset icon-start" />
-                                            Verstuur bulktransactie opnieuw
-                                        </button>
+                                {/* BNG: Auth url button */}
+                                {transactionBulk.bank.key === 'bng' &&
+                                    transactionBulk.state === 'pending' &&
+                                    transactionBulk.auth_url && (
+                                        <a className="button button-primary button-sm" href={transactionBulk.auth_url}>
+                                            <em className="mdi mdi-link icon-start" />
+                                            Transactie autoriseren
+                                        </a>
                                     )}
-
-                                    {/* BNG: Auth url button */}
-                                    {transactionBulk.bank.key === 'bng' &&
-                                        transactionBulk.state === 'pending' &&
-                                        transactionBulk.auth_url && (
-                                            <a
-                                                className="button button-primary button-sm"
-                                                href={transactionBulk.auth_url}>
-                                                <em className="mdi mdi-link icon-start" />
-                                                Transactie autoriseren
-                                            </a>
-                                        )}
-                                </div>
                             </div>
-                        )}
-                    </div>
+                        </div>
+                    )}
                 </div>
                 <div className="card-section">
                     <div className="flex">
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 290168bc5..003156bf1 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
@@ -11,11 +11,11 @@ import TransactionBulk from '../../../../props/models/TransactionBulk';
 import useTransactionService from '../../../../services/TransactionService';
 import useFilter from '../../../../hooks/useFilter';
 import usePaginatorService from '../../../../modules/paginator/services/usePaginatorService';
-import usePushDanger from '../../../../hooks/usePushDanger';
 import useSetProgress from '../../../../hooks/useSetProgress';
 import useEnvData from '../../../../hooks/useEnvData';
 import LoadingCard from '../../../elements/loading-card/LoadingCard';
 import useTranslate from '../../../../hooks/useTranslate';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 export default function TransactionBulkTransactionsTable({
     organization,
@@ -27,8 +27,8 @@ export default function TransactionBulkTransactionsTable({
     const envData = useEnvData();
 
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const paginationService = usePaginatorService();
     const transactionService = useTransactionService();
@@ -61,10 +61,10 @@ export default function TransactionBulkTransactionsTable({
                     voucher_transaction_bulk_id: id,
                 })
                 .then((res) => setTransactions(res.data))
-                .catch((res) => pushDanger('Mislukt!', res.data?.message))
+                .catch(pushApiError)
                 .finally(() => setProgress(100));
         },
-        [setProgress, transactionService, envData.client_type, organization.id, filter.activeValues, pushDanger],
+        [setProgress, transactionService, envData.client_type, organization.id, filter.activeValues, pushApiError],
     );
 
     useEffect(() => {
@@ -80,13 +80,11 @@ export default function TransactionBulkTransactionsTable({
     return (
         <div className="card">
             <div className="card-header">
-                <div className="flex-row">
-                    <div className="flex flex-grow">
-                        <div className="card-title">
-                            {`${translate('transactions.header.title')} (${transactions.meta.total})`}
-                        </div>
-                    </div>
-                    <div className="flex">
+                <div className="flex flex-grow card-title">
+                    {`${translate('transactions.header.title')} (${transactions.meta.total})`}
+                </div>
+                <div className="card-header-filters">
+                    <div className="block block-inline-filters">
                         <button className="button button-primary button-sm" onClick={() => exportTransactions()}>
                             <em className="mdi mdi-download icon-start" />
                             Exporteren
diff --git a/react/src/dashboard/components/pages/transaction-settings/TransactionSettings.tsx b/react/src/dashboard/components/pages/transaction-settings/TransactionSettings.tsx
index 82f8151b3..63d4bbe5b 100644
--- a/react/src/dashboard/components/pages/transaction-settings/TransactionSettings.tsx
+++ b/react/src/dashboard/components/pages/transaction-settings/TransactionSettings.tsx
@@ -1,21 +1,20 @@
 import React, { Fragment, useMemo, useState } from 'react';
 import useActiveOrganization from '../../../hooks/useActiveOrganization';
 import usePushSuccess from '../../../hooks/usePushSuccess';
-import usePushDanger from '../../../hooks/usePushDanger';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import CheckboxControl from '../../elements/forms/controls/CheckboxControl';
 import useFormBuilder from '../../../hooks/useFormBuilder';
 import { useOrganizationService } from '../../../services/OrganizationService';
-import { ResponseError } from '../../../props/ApiResponses';
 import SelectControlOptions from '../../elements/select-control/templates/SelectControlOptions';
 import SelectControl from '../../elements/select-control/SelectControl';
 import Tooltip from '../../elements/tooltip/Tooltip';
+import usePushApiError from '../../../hooks/usePushApiError';
 
 export default function TransactionSettings() {
     const activeOrganization = useActiveOrganization();
 
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
+    const pushApiError = usePushApiError();
 
     const organizationService = useOrganizationService();
 
@@ -50,7 +49,7 @@ export default function TransactionSettings() {
         organizationService
             .updateBankFields(activeOrganization.id, values)
             .then(() => pushSuccess('Opgeslagen!'))
-            .catch((e: ResponseError) => pushDanger('Mislukt!', e?.data.message || 'Onbekende foutmelding.'))
+            .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 645202eab..b7944cc41 100644
--- a/react/src/dashboard/components/pages/transactions-view/elements/PayoutTransactionDetails.tsx
+++ b/react/src/dashboard/components/pages/transactions-view/elements/PayoutTransactionDetails.tsx
@@ -18,11 +18,7 @@ export default function PayoutTransactionDetails({ transaction }: { transaction:
         <div className="block block-transaction-details">
             <div className="card card-wrapped">
                 <div className="card-header">
-                    <div className="flex">
-                        <div className="flex flex-grow">
-                            <div className="card-title">{translate('payouts.labels.details')}</div>
-                        </div>
-                    </div>
+                    <div className="card-title">{translate('payouts.labels.details')}</div>
                 </div>
                 <div className="card-section">
                     <div className="flex">
diff --git a/react/src/dashboard/components/pages/transactions-view/elements/TransactionDetails.tsx b/react/src/dashboard/components/pages/transactions-view/elements/TransactionDetails.tsx
index d311c95e6..3fb0b2c48 100644
--- a/react/src/dashboard/components/pages/transactions-view/elements/TransactionDetails.tsx
+++ b/react/src/dashboard/components/pages/transactions-view/elements/TransactionDetails.tsx
@@ -11,12 +11,12 @@ import Tooltip from '../../../elements/tooltip/Tooltip';
 import useOpenModal from '../../../../hooks/useOpenModal';
 import ModalDangerZone from '../../../modals/ModalDangerZone';
 import usePushSuccess from '../../../../hooks/usePushSuccess';
-import usePushDanger from '../../../../hooks/usePushDanger';
 import useShowRejectInfoExtraPaid from '../../../../services/helpers/reservations/useShowRejectInfoExtraPaid';
 import LoadingCard from '../../../elements/loading-card/LoadingCard';
 import useTranslate from '../../../../hooks/useTranslate';
 import TableEmptyValue from '../../../elements/table-empty-value/TableEmptyValue';
 import TransactionStateLabel from '../../../elements/resource-states/TransactionStateLabel';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 export default function TransactionDetails({
     transaction,
@@ -39,8 +39,8 @@ export default function TransactionDetails({
     const assetUrl = useAssetUrl();
     const openModal = useOpenModal();
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
+    const pushApiError = usePushApiError();
     const showRejectInfoExtraPaid = useShowRejectInfoExtraPaid();
 
     const isSponsor = useMemo(() => envData.client_type == 'sponsor', [envData.client_type]);
@@ -76,14 +76,14 @@ export default function TransactionDetails({
                             text: 'Bevestigen',
                             onClick: () => {
                                 modal.close();
-                                productReservationService.reject(activeOrganization.id, reservation.id).then(
-                                    () => {
+                                productReservationService
+                                    .reject(activeOrganization.id, reservation.id)
+                                    .then(() => {
                                         pushSuccess('Opgeslagen!');
                                         fetchTransaction().then((res) => setTransaction(res.data.data));
                                         onUpdate?.();
-                                    },
-                                    (res) => pushDanger(res.data.message),
-                                );
+                                    })
+                                    .catch(pushApiError);
                             },
                         }}
                     />
@@ -96,7 +96,7 @@ export default function TransactionDetails({
             onUpdate,
             openModal,
             productReservationService,
-            pushDanger,
+            pushApiError,
             pushSuccess,
             setTransaction,
             showRejectInfoExtraPaid,
@@ -153,40 +153,37 @@ export default function TransactionDetails({
             )}
             <div className="card card-wrapped">
                 <div className="card-header">
-                    <div className="flex">
-                        <div className="flex flex-grow">
-                            <div className="card-title">
-                                {translate('financial_dashboard_transaction.labels.details')}
-                            </div>
-                        </div>
-                        <div className="flex">
-                            <div className="block block-inline-filters">
-                                {showDetailsPageButton && (
-                                    <StateNavLink
-                                        name={'transaction'}
-                                        className="button button-primary"
-                                        activeExact={true}
-                                        params={{
-                                            organizationId: activeOrganization.id,
-                                            address: transaction.address,
-                                        }}>
-                                        <em className="mdi mdi-eye-outline icon-start" />
-                                        Transactie details
-                                    </StateNavLink>
-                                )}
-                                {transaction.voucher_id && transaction.target !== 'payout' && isSponsor && (
-                                    <StateNavLink
-                                        name={'vouchers-show'}
-                                        params={{
-                                            organizationId: activeOrganization.id,
-                                            id: transaction.product_reservation?.voucher_id || transaction.voucher_id,
-                                        }}
-                                        className="button button-primary">
-                                        <em className="mdi mdi-eye-outline icon-start" />
-                                        Tegoed details
-                                    </StateNavLink>
-                                )}
-                            </div>
+                    <div className="flex flex-grow card-title">
+                        {translate('financial_dashboard_transaction.labels.details')}
+                    </div>
+
+                    <div className="card-header-filters">
+                        <div className="block block-inline-filters">
+                            {showDetailsPageButton && (
+                                <StateNavLink
+                                    name={'transaction'}
+                                    className="button button-primary"
+                                    activeExact={true}
+                                    params={{
+                                        organizationId: activeOrganization.id,
+                                        address: transaction.address,
+                                    }}>
+                                    <em className="mdi mdi-eye-outline icon-start" />
+                                    Transactie details
+                                </StateNavLink>
+                            )}
+                            {transaction.voucher_id && transaction.target !== 'payout' && isSponsor && (
+                                <StateNavLink
+                                    name={'vouchers-show'}
+                                    params={{
+                                        organizationId: activeOrganization.id,
+                                        id: transaction.product_reservation?.voucher_id || transaction.voucher_id,
+                                    }}
+                                    className="button button-primary">
+                                    <em className="mdi mdi-eye-outline icon-start" />
+                                    Tegoed details
+                                </StateNavLink>
+                            )}
                         </div>
                     </div>
                 </div>
diff --git a/react/src/dashboard/components/pages/transactions/Transactions.tsx b/react/src/dashboard/components/pages/transactions/Transactions.tsx
index ac61e3ed9..96e7c6d2f 100644
--- a/react/src/dashboard/components/pages/transactions/Transactions.tsx
+++ b/react/src/dashboard/components/pages/transactions/Transactions.tsx
@@ -11,7 +11,6 @@ import useTransactionBulkService from '../../../services/TransactionBulkService'
 import { PaginationData } from '../../../props/ApiResponses';
 import ModalDangerZone from '../../modals/ModalDangerZone';
 import { strLimit } from '../../../helpers/string';
-import usePushDanger from '../../../hooks/usePushDanger';
 import usePushSuccess from '../../../hooks/usePushSuccess';
 import TransactionBulk from '../../../props/models/TransactionBulk';
 import useTransactionExportService from '../../../services/exports/useTransactionExportService';
@@ -40,15 +39,16 @@ 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';
 
 export default function Transactions() {
     const envData = useEnvData();
 
     const openModal = useOpenModal();
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
     const navigateState = useNavigateState();
     const paginatorService = usePaginatorService();
     const activeOrganization = useActiveOrganization();
@@ -310,7 +310,7 @@ export default function Transactions() {
                         pushSuccess(`Succes!`, `Accepteer de transactie in uw mobiele app van bunq.`);
                     }
                 })
-                .catch((res) => pushDanger('Bulk betaalopdrachten mislukt', res.data.message || 'Er ging iets mis!'))
+                .catch(pushApiError)
                 .finally(() => {
                     setBuildingBulks(false);
                     updateHasPendingBulking();
@@ -322,7 +322,7 @@ export default function Transactions() {
         confirmBulkNow,
         filter.activeValues,
         navigateState,
-        pushDanger,
+        pushApiError,
         pushSuccess,
         setProgress,
         transactionBulkService,
@@ -365,7 +365,7 @@ export default function Transactions() {
 
     return (
         <div className="card">
-            <div className="card-header card-header-next">
+            <div className="card-header">
                 {viewType.key == 'transactions' ? (
                     <div className="card-title flex flex-grow">
                         {isSponsor
diff --git a/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx b/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx
index a6179d854..4d6136464 100644
--- a/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx
+++ b/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx
@@ -239,7 +239,7 @@ export default function VouchersViewComponent() {
     }, [fetchVoucher, openModal, voucher]);
 
     const submitLimitMultiplier = useCallback(
-        (value) => {
+        (value: number) => {
             openModal((modal) => (
                 <ModalDangerZone
                     modal={modal}
@@ -260,7 +260,7 @@ export default function VouchersViewComponent() {
                                     setVoucher(res.data.data);
                                     pushSuccess('Opgeslagen!');
                                 })
-                                .catch((err: ResponseError) => pushDanger('Mislukt!', err.data?.message))
+                                .catch(pushApiError)
                                 .finally(() => setProgress(100));
                         },
                         text: translate('modals.danger_zone.increase_limit_multiplier.buttons.confirm'),
@@ -268,7 +268,7 @@ export default function VouchersViewComponent() {
                 />
             ));
         },
-        [activeOrganization.id, openModal, pushDanger, pushSuccess, setProgress, translate, voucher, voucherService],
+        [activeOrganization.id, openModal, pushApiError, pushSuccess, setProgress, translate, voucher, voucherService],
     );
 
     useEffect(() => {
@@ -307,124 +307,105 @@ export default function VouchersViewComponent() {
 
             <div className="card">
                 <div className="card-header">
-                    <div className="flex">
-                        <div className="flex flex-grow">
-                            <div className="card-title">
-                                <div className="flex flex-vertical flex-center">
-                                    <div className="flex flex-vertical flex-center">#{voucher.number}</div>
-                                </div>
-                                <div className="flex flex-vertical flex-center">
-                                    {!voucher.expired && voucher.state == 'active' && (
-                                        <div className="tag tag-success tag-sm">{voucher.state_locale}</div>
-                                    )}
-                                </div>
-                                <div className="flex flex-vertical flex-center">
-                                    {!voucher.expired && voucher.state == 'pending' && (
-                                        <div className="tag tag-default tag-sm">{voucher.state_locale}</div>
-                                    )}
-                                </div>
-                                <div className="flex flex-vertical flex-center">
-                                    {!voucher.expired && voucher.state == 'deactivated' && (
-                                        <div className="tag tag-danger tag-sm">{voucher.state_locale}</div>
-                                    )}
-                                </div>
-                                <div className="flex flex-vertical flex-center">
-                                    {voucher.expired && (
-                                        <div className="tag tag-warning tag-sm">
-                                            {translate('vouchers.labels.expired')}
-                                        </div>
-                                    )}
-                                </div>
-                            </div>
+                    <div className="flex flex-grow card-title">
+                        <div className="flex flex-vertical flex-center">
+                            <div className="flex flex-vertical flex-center">#{voucher.number}</div>
+                        </div>
+                        <div className="flex flex-vertical flex-center">
+                            {!voucher.expired && voucher.state == 'active' && (
+                                <div className="tag tag-success tag-sm">{voucher.state_locale}</div>
+                            )}
+                        </div>
+                        <div className="flex flex-vertical flex-center">
+                            {!voucher.expired && voucher.state == 'pending' && (
+                                <div className="tag tag-default tag-sm">{voucher.state_locale}</div>
+                            )}
                         </div>
+                        <div className="flex flex-vertical flex-center">
+                            {!voucher.expired && voucher.state == 'deactivated' && (
+                                <div className="tag tag-danger tag-sm">{voucher.state_locale}</div>
+                            )}
+                        </div>
+                        <div className="flex flex-vertical flex-center">
+                            {voucher.expired && (
+                                <div className="tag tag-warning tag-sm">{translate('vouchers.labels.expired')}</div>
+                            )}
+                        </div>
+                    </div>
+                    {hasPermission(activeOrganization, 'manage_vouchers') && (
+                        <div className="card-header-filters">
+                            <div className="block block-inline-filters">
+                                {showMakeTransactionButton && fund?.allow_voucher_top_ups && (
+                                    <div className="button button-default button-sm" onClick={makeTopUpTransaction}>
+                                        <em className="mdi mdi-cash-plus icon-start" />
+                                        {translate('vouchers.buttons.make_top_up_transaction')}
+                                    </div>
+                                )}
 
-                        {hasPermission(activeOrganization, 'manage_vouchers') && (
-                            <div className="flex flex-self-start">
-                                <div className="flex-row">
-                                    <div className="button-group">
-                                        {showMakeTransactionButton && fund?.allow_voucher_top_ups && (
-                                            <div
-                                                className="button button-default button-sm"
-                                                onClick={makeTopUpTransaction}>
-                                                <em className="mdi mdi-cash-plus icon-start" />
-                                                {translate('vouchers.buttons.make_top_up_transaction')}
-                                            </div>
-                                        )}
-
-                                        {showMakeTransactionButton && (
-                                            <div className="button button-primary button-sm" onClick={makeTransaction}>
-                                                <em className="mdi mdi-cash-fast icon-start" />
-                                                {translate('vouchers.buttons.make_transaction')}
-                                            </div>
-                                        )}
-
-                                        {!voucher.expired && voucher.state === 'active' && (
-                                            <div className="button button-danger button-sm" onClick={deactivateVoucher}>
-                                                <em className="mdi mdi-close icon-start" />
-                                                Deactiveren
-                                            </div>
-                                        )}
-
-                                        {!voucher.expired &&
-                                            voucher.state === 'deactivated' &&
-                                            !voucher.is_external && (
-                                                <div
-                                                    className="button button-danger button-sm"
-                                                    onClick={activateVoucher}>
-                                                    <em className="mdi mdi-alert-outline icon-start" />
-                                                    Activeren
-                                                </div>
-                                            )}
+                                {showMakeTransactionButton && (
+                                    <div className="button button-primary button-sm" onClick={makeTransaction}>
+                                        <em className="mdi mdi-cash-fast icon-start" />
+                                        {translate('vouchers.buttons.make_transaction')}
+                                    </div>
+                                )}
 
-                                        {physicalCardsAvailable && !voucher.expired && (
-                                            <div
-                                                className="button button-default button-sm"
-                                                onClick={orderPhysicalCard}>
-                                                <em className="mdi mdi-card-text-outline icon-start" />
-                                                Plastic pas bestellen
-                                            </div>
-                                        )}
-
-                                        {physicalCardsAvailable && !voucher.physical_card && (
-                                            <div className="button button-default button-sm" onClick={addPhysicalCard}>
-                                                <em className="mdi mdi-ticket-account icon-start" />
-                                                {translate('vouchers.buttons.physical_card_add')}
-                                            </div>
-                                        )}
-
-                                        {physicalCardsAvailable && voucher.physical_card && (
-                                            <div
-                                                className="button button-default button-sm"
-                                                onClick={deletePhysicalCard}>
-                                                <em className="mdi mdi-ticket-account icon-start" />
-                                                {translate('vouchers.buttons.physical_card_delete')}
-                                            </div>
-                                        )}
-
-                                        {!voucher.expired &&
-                                            !voucher.is_granted &&
-                                            voucher.state === 'pending' &&
-                                            !voucher.is_external && (
-                                                <div className="button button-primary button-sm" onClick={onOpenAction}>
-                                                    <em className="mdi mdi-clipboard-account icon-start " />
-                                                    {translate('vouchers.buttons.activate')}
-                                                </div>
-                                            )}
+                                {!voucher.expired && voucher.state === 'active' && (
+                                    <div className="button button-danger button-sm" onClick={deactivateVoucher}>
+                                        <em className="mdi mdi-close icon-start" />
+                                        Deactiveren
+                                    </div>
+                                )}
 
-                                        {!voucher.is_granted &&
-                                            !voucher.expired &&
-                                            voucher.state === 'active' &&
-                                            !voucher.is_external && (
-                                                <div className="button button-primary button-sm" onClick={onOpenAction}>
-                                                    <em className="mdi mdi-qrcode icon-start " />
-                                                    {translate('vouchers.labels.qr_code')}
-                                                </div>
-                                            )}
+                                {!voucher.expired && voucher.state === 'deactivated' && !voucher.is_external && (
+                                    <div className="button button-danger button-sm" onClick={activateVoucher}>
+                                        <em className="mdi mdi-alert-outline icon-start" />
+                                        Activeren
                                     </div>
-                                </div>
+                                )}
+
+                                {physicalCardsAvailable && !voucher.expired && (
+                                    <div className="button button-default button-sm" onClick={orderPhysicalCard}>
+                                        <em className="mdi mdi-card-text-outline icon-start" />
+                                        Plastic pas bestellen
+                                    </div>
+                                )}
+
+                                {physicalCardsAvailable && !voucher.physical_card && (
+                                    <div className="button button-default button-sm" onClick={addPhysicalCard}>
+                                        <em className="mdi mdi-ticket-account icon-start" />
+                                        {translate('vouchers.buttons.physical_card_add')}
+                                    </div>
+                                )}
+
+                                {physicalCardsAvailable && voucher.physical_card && (
+                                    <div className="button button-default button-sm" onClick={deletePhysicalCard}>
+                                        <em className="mdi mdi-ticket-account icon-start" />
+                                        {translate('vouchers.buttons.physical_card_delete')}
+                                    </div>
+                                )}
+
+                                {!voucher.expired &&
+                                    !voucher.is_granted &&
+                                    voucher.state === 'pending' &&
+                                    !voucher.is_external && (
+                                        <div className="button button-primary button-sm" onClick={onOpenAction}>
+                                            <em className="mdi mdi-clipboard-account icon-start " />
+                                            {translate('vouchers.buttons.activate')}
+                                        </div>
+                                    )}
+
+                                {!voucher.is_granted &&
+                                    !voucher.expired &&
+                                    voucher.state === 'active' &&
+                                    !voucher.is_external && (
+                                        <div className="button button-primary button-sm" onClick={onOpenAction}>
+                                            <em className="mdi mdi-qrcode icon-start " />
+                                            {translate('vouchers.labels.qr_code')}
+                                        </div>
+                                    )}
                             </div>
-                        )}
-                    </div>
+                        </div>
+                    )}
                 </div>
 
                 <div className="card-section">
@@ -525,13 +506,7 @@ export default function VouchersViewComponent() {
 
             <div className="card">
                 <div className="card-header">
-                    <div className="flex">
-                        <div className="flex flex-grow">
-                            <div className="card-title">
-                                <div className="flex flex-vertical flex-center">Tegoed details</div>
-                            </div>
-                        </div>
-                    </div>
+                    <div className="flex flex-grow card-title">Tegoed details</div>
                 </div>
 
                 <div className="card-section">
diff --git a/react/src/dashboard/components/pages/vouchers-view/elements/VoucherRecords.tsx b/react/src/dashboard/components/pages/vouchers-view/elements/VoucherRecords.tsx
index b7328032c..dd6550db5 100644
--- a/react/src/dashboard/components/pages/vouchers-view/elements/VoucherRecords.tsx
+++ b/react/src/dashboard/components/pages/vouchers-view/elements/VoucherRecords.tsx
@@ -16,16 +16,16 @@ import usePushSuccess from '../../../../hooks/usePushSuccess';
 import { hasPermission } from '../../../../helpers/utils';
 import useTranslate from '../../../../hooks/useTranslate';
 import useSetProgress from '../../../../hooks/useSetProgress';
-import usePushDanger from '../../../../hooks/usePushDanger';
 import EmptyCard from '../../../elements/empty-card/EmptyCard';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 export default function VoucherRecords({ voucher, organization }: { voucher: Voucher; organization: Organization }) {
     const translate = useTranslate();
 
     const openModal = useOpenModal();
-    const pushDanger = usePushDanger();
     const pushSuccess = usePushSuccess();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const paginatorService = usePaginatorService();
     const voucherRecordService = useVoucherRecordService();
@@ -46,9 +46,9 @@ export default function VoucherRecords({ voucher, organization }: { voucher: Vou
         voucherRecordService
             .list(organization.id, voucher.id, filter.activeValues)
             .then((res) => setRecords(res.data))
-            .catch((res) => pushDanger('Mislukt!', res.data.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [filter.activeValues, organization.id, setProgress, voucher.id, voucherRecordService, pushDanger]);
+    }, [filter.activeValues, organization.id, setProgress, voucher.id, voucherRecordService, pushApiError]);
 
     const editRecord = useCallback(
         (record: VoucherRecord = null) => {
@@ -103,34 +103,27 @@ export default function VoucherRecords({ voucher, organization }: { voucher: Vou
     return (
         <div className="card">
             <div className="card-header">
-                <div className="flex">
-                    <div className="flex flex-grow">
-                        <div className="card-title">
-                            {translate('voucher_records.header.title')}
-                            {records.meta ? ` (${records.meta.total})` : ''}
+                <div className="flex flex-grow card-title">
+                    {translate('voucher_records.header.title')}
+                    {records.meta ? ` (${records.meta.total})` : ''}
+                </div>
+                <div className="card-header-filters">
+                    <div className="block block-inline-filters form">
+                        <div className="form-group">
+                            <input
+                                className="form-control"
+                                type="search"
+                                value={filter.values.q}
+                                placeholder={translate('voucher_records.labels.search')}
+                                onChange={(e) => filter.update({ q: e.target.value })}
+                            />
                         </div>
-                    </div>
-                    <div className="flex">
-                        <div className="block block-inline-filters">
-                            <div className="form">
-                                <div className="form-group">
-                                    <input
-                                        className="form-control"
-                                        type="search"
-                                        value={filter.values.q}
-                                        placeholder={translate('voucher_records.labels.search')}
-                                        onChange={(e) => filter.update({ q: e.target.value })}
-                                    />
-                                </div>
+                        {hasPermission(organization, 'manage_vouchers') && (
+                            <div className="button button-primary button-sm" onClick={() => editRecord()}>
+                                <em className="mdi mdi-plus-circle icon-start" />
+                                {translate('voucher_records.buttons.add_record')}
                             </div>
-
-                            {hasPermission(organization, 'manage_vouchers') && (
-                                <div className="button button-primary button-sm" onClick={() => editRecord()}>
-                                    <em className="mdi mdi-plus-circle icon-start" />
-                                    {translate('voucher_records.buttons.add_record')}
-                                </div>
-                            )}
-                        </div>
+                        )}
                     </div>
                 </div>
             </div>
diff --git a/react/src/dashboard/components/pages/vouchers-view/elements/VoucherTransactions.tsx b/react/src/dashboard/components/pages/vouchers-view/elements/VoucherTransactions.tsx
index beda765ae..7ad944108 100644
--- a/react/src/dashboard/components/pages/vouchers-view/elements/VoucherTransactions.tsx
+++ b/react/src/dashboard/components/pages/vouchers-view/elements/VoucherTransactions.tsx
@@ -65,12 +65,8 @@ export default function VoucherTransactions({
     return (
         <div className="card">
             <div className="card-header">
-                <div className="flex">
-                    <div className="flex flex-grow">
-                        <div className="card-title">
-                            {blockTitle || 'Transactions'} ({transactions.meta.total})
-                        </div>
-                    </div>
+                <div className="card-title">
+                    {blockTitle || 'Transactions'} ({transactions.meta.total})
                 </div>
             </div>
 
diff --git a/react/src/dashboard/components/pages/vouchers/Vouchers.tsx b/react/src/dashboard/components/pages/vouchers/Vouchers.tsx
index 52adaae8e..3e73bd138 100644
--- a/react/src/dashboard/components/pages/vouchers/Vouchers.tsx
+++ b/react/src/dashboard/components/pages/vouchers/Vouchers.tsx
@@ -173,7 +173,7 @@ export default function Vouchers() {
 
     return (
         <div className="card" data-dusk={`vouchersCard${filterValues?.fund_id || ''}`}>
-            <div className={classNames(`card-header card-header-next`, 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/VoucherRecordsEditor.tsx b/react/src/dashboard/components/pages/vouchers/elements/VoucherRecordsEditor.tsx
index 3ce51707f..80047b5c5 100644
--- a/react/src/dashboard/components/pages/vouchers/elements/VoucherRecordsEditor.tsx
+++ b/react/src/dashboard/components/pages/vouchers/elements/VoucherRecordsEditor.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import Record from '../../../../props/models/Record';
-import { ResponseError, ResponseErrorData } from '../../../../props/ApiResponses';
+import { ResponseErrorData } from '../../../../props/ApiResponses';
 import DatePickerControl from '../../../elements/forms/controls/DatePickerControl';
 import { dateFormat, dateParse } from '../../../../helpers/dates';
 import FormError from '../../../elements/forms/errors/FormError';
@@ -8,8 +8,8 @@ import { useRecordTypeService } from '../../../../services/RecordTypeService';
 import SelectControl from '../../../elements/select-control/SelectControl';
 import useTranslate from '../../../../hooks/useTranslate';
 import useSetProgress from '../../../../hooks/useSetProgress';
-import usePushDanger from '../../../../hooks/usePushDanger';
 import RecordType from '../../../../props/models/RecordType';
+import usePushApiError from '../../../../hooks/usePushApiError';
 
 export default function VoucherRecordsEditor({
     errors,
@@ -21,8 +21,8 @@ export default function VoucherRecordsEditor({
     setRecords: (records: Array<Record>) => void;
 }) {
     const translate = useTranslate();
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const recordTypeService = useRecordTypeService();
 
@@ -60,9 +60,9 @@ export default function VoucherRecordsEditor({
                 setRecordTypes(types);
                 setRecordType(types[0]);
             })
-            .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message))
+            .catch(pushApiError)
             .finally(() => setProgress(100));
-    }, [pushDanger, recordTypeService, setProgress]);
+    }, [pushApiError, recordTypeService, setProgress]);
 
     useEffect(() => {
         fetchRecordTypes();
diff --git a/react/src/dashboard/hooks/usePushApiError.tsx b/react/src/dashboard/hooks/usePushApiError.tsx
index b09374793..2130e2514 100644
--- a/react/src/dashboard/hooks/usePushApiError.tsx
+++ b/react/src/dashboard/hooks/usePushApiError.tsx
@@ -3,20 +3,33 @@ import { useCallback } from 'react';
 import { ResponseError } from '../props/ApiResponses';
 import { useNavigateState } from '../modules/state_router/Router';
 import useActiveOrganization from './useActiveOrganization';
+import useTranslate from './useTranslate';
 
 export default function usePushApiError(redirectStateName?: string) {
+    const translate = useTranslate();
     const pushDanger = usePushDanger();
     const navigateSate = useNavigateState();
     const activeOrganization = useActiveOrganization();
 
     return useCallback(
-        (err: ResponseError) => {
-            pushDanger('Mislukt!', err?.data?.message);
+        (err: ResponseError, defaultMessage?: string) => {
+            const titleCodes = {
+                0: 'server_error',
+                403: 'forbidden',
+                404: 'not_found',
+                422: 'validation_error',
+                500: 'server_error',
+            };
+
+            const title = translate(`errors.api.title.${titleCodes[err.status] || 'default'}`);
+            const message = err?.data?.message || defaultMessage || translate('errors.api.description');
+
+            pushDanger(title, message);
 
             if (redirectStateName) {
                 return navigateSate(redirectStateName, { organizationId: activeOrganization?.id });
             }
         },
-        [activeOrganization?.id, navigateSate, pushDanger, redirectStateName],
+        [activeOrganization?.id, navigateSate, pushDanger, redirectStateName, translate],
     );
 }
diff --git a/react/src/dashboard/i18n/i18n-nl.js b/react/src/dashboard/i18n/i18n-nl.js
index 35f6a3a62..a1bfa12ee 100644
--- a/react/src/dashboard/i18n/i18n-nl.js
+++ b/react/src/dashboard/i18n/i18n-nl.js
@@ -3,6 +3,7 @@ import modals from './nl/i18n-modals';
 import modals_danger_zone from './nl/i18n-modals-danger_zone';
 import components from './nl/i18n-components';
 import block_exception from './nl/blocks/block-exception.json';
+import api_errors from './nl/errors/api';
 
 export default {
     test: '{{name}} {{foo}}',
@@ -2049,4 +2050,7 @@ export default {
     blocks: {
         block_exception,
     },
+    errors: {
+        api: api_errors,
+    },
 };
diff --git a/react/src/dashboard/i18n/nl/errors/api.js b/react/src/dashboard/i18n/nl/errors/api.js
new file mode 100644
index 000000000..f1997ba48
--- /dev/null
+++ b/react/src/dashboard/i18n/nl/errors/api.js
@@ -0,0 +1,10 @@
+export default {
+    title: {
+        server_error: 'Er ging iets mis',
+        validation_error: 'Het is niet gelukt',
+        forbidden: 'Pagina niet beschikbaar',
+        not_found: 'Pagina niet gevonden',
+        default: 'Er ging iets mis',
+    },
+    description: 'Probeer het opnieuw. Lukt het niet, neem dan contact op met support.',
+};
diff --git a/react/src/dashboard/services/exports/useFundIdentitiesExportService.tsx b/react/src/dashboard/services/exports/useFundIdentitiesExportService.tsx
index 5c2f388ed..9de3befa7 100644
--- a/react/src/dashboard/services/exports/useFundIdentitiesExportService.tsx
+++ b/react/src/dashboard/services/exports/useFundIdentitiesExportService.tsx
@@ -1,15 +1,15 @@
 import React, { useCallback } from 'react';
-import usePushDanger from '../../hooks/usePushDanger';
 import useSetProgress from '../../hooks/useSetProgress';
 import useOpenModal from '../../hooks/useOpenModal';
 import ModalExportDataSelect from '../../components/modals/ModalExportDataSelect';
 import useMakeExporterService from './useMakeExporterService';
 import { useFundService } from '../FundService';
+import usePushApiError from '../../hooks/usePushApiError';
 
 export default function useFundIdentitiesExportService() {
     const openModal = useOpenModal();
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
+    const pushApiError = usePushApiError();
 
     const fundService = useFundService();
     const { makeSections, saveExportedData } = useMakeExporterService();
@@ -25,7 +25,7 @@ export default function useFundIdentitiesExportService() {
                 fundService
                     .exportIdentities(organization_id, fund_id, queryFilters)
                     .then((res) => saveExportedData(data, organization_id, res))
-                    .catch((res) => pushDanger('Mislukt!', res.data.message))
+                    .catch(pushApiError)
                     .finally(() => setProgress(100));
             };
 
@@ -35,7 +35,7 @@ export default function useFundIdentitiesExportService() {
                 ));
             });
         },
-        [makeSections, openModal, pushDanger, saveExportedData, setProgress, fundService],
+        [makeSections, openModal, pushApiError, saveExportedData, setProgress, fundService],
     );
 
     return { exportData };
diff --git a/react/src/dashboard/services/exports/useIdentityExportService.tsx b/react/src/dashboard/services/exports/useIdentityExportService.tsx
index 8c11ff8c3..070c57743 100644
--- a/react/src/dashboard/services/exports/useIdentityExportService.tsx
+++ b/react/src/dashboard/services/exports/useIdentityExportService.tsx
@@ -1,15 +1,15 @@
 import React, { useCallback } from 'react';
-import usePushDanger from '../../hooks/usePushDanger';
 import useSetProgress from '../../hooks/useSetProgress';
 import useOpenModal from '../../hooks/useOpenModal';
 import ModalExportDataSelect from '../../components/modals/ModalExportDataSelect';
 import useMakeExporterService from './useMakeExporterService';
 import useSponsorIdentitiesService from '../SponsorIdentitesService';
+import usePushApiError from '../../hooks/usePushApiError';
 
 export default function useIdentityExportService() {
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
     const openModal = useOpenModal();
+    const pushApiError = usePushApiError();
 
     const identityService = useSponsorIdentitiesService();
     const { makeSections, saveExportedData } = useMakeExporterService();
@@ -26,7 +26,7 @@ export default function useIdentityExportService() {
                 identityService
                     .export(organization_id, queryFilters)
                     .then((res) => saveExportedData(data, organization_id, res))
-                    .catch((res) => pushDanger('Mislukt!', res.data.message))
+                    .catch(pushApiError)
                     .finally(() => setProgress(100));
             };
 
@@ -36,7 +36,7 @@ export default function useIdentityExportService() {
                 ));
             });
         },
-        [makeSections, openModal, pushDanger, saveExportedData, setProgress, identityService],
+        [makeSections, openModal, pushApiError, saveExportedData, setProgress, identityService],
     );
 
     return { exportData };
diff --git a/react/src/dashboard/services/exports/useProductReservationsExportService.tsx b/react/src/dashboard/services/exports/useProductReservationsExportService.tsx
index e52251921..1e81970ab 100644
--- a/react/src/dashboard/services/exports/useProductReservationsExportService.tsx
+++ b/react/src/dashboard/services/exports/useProductReservationsExportService.tsx
@@ -1,16 +1,15 @@
 import React, { useCallback } from 'react';
-import usePushDanger from '../../hooks/usePushDanger';
 import useSetProgress from '../../hooks/useSetProgress';
 import useOpenModal from '../../hooks/useOpenModal';
 import ModalExportDataSelect from '../../components/modals/ModalExportDataSelect';
 import useProductReservationService from '../ProductReservationService';
 import useMakeExporterService from './useMakeExporterService';
-import { ResponseError } from '../../props/ApiResponses';
+import usePushApiError from '../../hooks/usePushApiError';
 
 export default function useProductReservationsExportService() {
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
     const openModal = useOpenModal();
+    const pushApiError = usePushApiError();
 
     const productReservationService = useProductReservationService();
     const { makeSections, saveExportedData } = useMakeExporterService();
@@ -27,7 +26,7 @@ export default function useProductReservationsExportService() {
                 productReservationService
                     .export(organization_id, queryFilters)
                     .then((res) => saveExportedData(data, organization_id, res))
-                    .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message))
+                    .catch(pushApiError)
                     .finally(() => setProgress(100));
             };
 
@@ -37,7 +36,7 @@ export default function useProductReservationsExportService() {
                 ));
             });
         },
-        [makeSections, openModal, pushDanger, saveExportedData, setProgress, productReservationService],
+        [makeSections, openModal, pushApiError, saveExportedData, setProgress, productReservationService],
     );
 
     return { exportData };
diff --git a/react/src/dashboard/services/exports/useReimbursementExportService.tsx b/react/src/dashboard/services/exports/useReimbursementExportService.tsx
index 5cecb1412..2c27f9d24 100644
--- a/react/src/dashboard/services/exports/useReimbursementExportService.tsx
+++ b/react/src/dashboard/services/exports/useReimbursementExportService.tsx
@@ -1,15 +1,15 @@
 import React, { useCallback } from 'react';
-import usePushDanger from '../../hooks/usePushDanger';
 import useSetProgress from '../../hooks/useSetProgress';
 import useOpenModal from '../../hooks/useOpenModal';
 import ModalExportDataSelect from '../../components/modals/ModalExportDataSelect';
 import { useReimbursementsService } from '../ReimbursementService';
 import useMakeExporterService from './useMakeExporterService';
+import usePushApiError from '../../hooks/usePushApiError';
 
 export default function useReimbursementsExportService() {
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
     const openModal = useOpenModal();
+    const pushApiError = usePushApiError();
 
     const reimbursementService = useReimbursementsService();
     const { makeSections, saveExportedData } = useMakeExporterService();
@@ -26,7 +26,7 @@ export default function useReimbursementsExportService() {
                 reimbursementService
                     .export(organization_id, queryFilters)
                     .then((res) => saveExportedData(data, organization_id, res))
-                    .catch((res) => pushDanger('Mislukt!', res.data.message))
+                    .catch(pushApiError)
                     .finally(() => setProgress(100));
             };
 
@@ -36,7 +36,7 @@ export default function useReimbursementsExportService() {
                 ));
             });
         },
-        [makeSections, openModal, pushDanger, saveExportedData, setProgress, reimbursementService],
+        [makeSections, openModal, pushApiError, saveExportedData, setProgress, reimbursementService],
     );
 
     return { exportData };
diff --git a/react/src/dashboard/services/exports/useTransactionBulkExportService.tsx b/react/src/dashboard/services/exports/useTransactionBulkExportService.tsx
index c7d41bfb0..7f3d062c2 100644
--- a/react/src/dashboard/services/exports/useTransactionBulkExportService.tsx
+++ b/react/src/dashboard/services/exports/useTransactionBulkExportService.tsx
@@ -1,16 +1,15 @@
 import React, { useCallback } from 'react';
-import usePushDanger from '../../hooks/usePushDanger';
 import useSetProgress from '../../hooks/useSetProgress';
 import useOpenModal from '../../hooks/useOpenModal';
 import ModalExportDataSelect from '../../components/modals/ModalExportDataSelect';
 import useTransactionBulkService from '../TransactionBulkService';
 import useMakeExporterService from './useMakeExporterService';
-import { ResponseError } from '../../props/ApiResponses';
+import usePushApiError from '../../hooks/usePushApiError';
 
 export default function useTransactionBulkExportService() {
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
     const openModal = useOpenModal();
+    const pushApiError = usePushApiError();
 
     const transactionBulkService = useTransactionBulkService();
     const { makeSections, saveExportedData } = useMakeExporterService();
@@ -27,7 +26,7 @@ export default function useTransactionBulkExportService() {
                 transactionBulkService
                     .export(organization_id, queryFilters)
                     .then((res) => saveExportedData(data, organization_id, res))
-                    .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message))
+                    .catch(pushApiError)
                     .finally(() => setProgress(100));
             };
 
@@ -37,7 +36,7 @@ export default function useTransactionBulkExportService() {
                 ));
             });
         },
-        [makeSections, openModal, pushDanger, saveExportedData, setProgress, transactionBulkService],
+        [makeSections, openModal, pushApiError, saveExportedData, setProgress, transactionBulkService],
     );
 
     return { exportData };
diff --git a/react/src/dashboard/services/exports/useTransactionExportService.tsx b/react/src/dashboard/services/exports/useTransactionExportService.tsx
index 3cab9af69..9368c6362 100644
--- a/react/src/dashboard/services/exports/useTransactionExportService.tsx
+++ b/react/src/dashboard/services/exports/useTransactionExportService.tsx
@@ -1,17 +1,17 @@
 import React, { useCallback } from 'react';
-import usePushDanger from '../../hooks/usePushDanger';
 import useSetProgress from '../../hooks/useSetProgress';
 import useEnvData from '../../hooks/useEnvData';
 import useTransactionService from '../TransactionService';
 import useOpenModal from '../../hooks/useOpenModal';
 import ModalExportDataSelect from '../../components/modals/ModalExportDataSelect';
 import useMakeExporterService from './useMakeExporterService';
+import usePushApiError from '../../hooks/usePushApiError';
 
 export default function useTransactionExportService() {
     const envData = useEnvData();
-    const pushDanger = usePushDanger();
     const setProgress = useSetProgress();
     const openModal = useOpenModal();
+    const pushApiError = usePushApiError();
 
     const transactionService = useTransactionService();
     const { makeSections, saveExportedData } = useMakeExporterService();
@@ -28,7 +28,7 @@ export default function useTransactionExportService() {
                 transactionService
                     .export(envData.client_type, organization_id, queryFilters)
                     .then((res) => saveExportedData(data, organization_id, res))
-                    .catch((res) => pushDanger('Mislukt!', res.data.message))
+                    .catch(pushApiError)
                     .finally(() => setProgress(100));
             };
 
@@ -38,7 +38,7 @@ export default function useTransactionExportService() {
                 ));
             });
         },
-        [envData.client_type, makeSections, openModal, pushDanger, saveExportedData, setProgress, transactionService],
+        [envData.client_type, makeSections, openModal, pushApiError, saveExportedData, setProgress, transactionService],
     );
 
     return { exportData };
diff --git a/react/src/dashboard/services/exports/useVoucherExportService.tsx b/react/src/dashboard/services/exports/useVoucherExportService.tsx
index 7e0c765de..52e0438bb 100644
--- a/react/src/dashboard/services/exports/useVoucherExportService.tsx
+++ b/react/src/dashboard/services/exports/useVoucherExportService.tsx
@@ -8,10 +8,10 @@ import useVoucherService from '../VoucherService';
 import { useFileService } from '../FileService';
 import JSZip from 'jszip';
 import { uniqueId } from 'lodash';
-import { ResponseError } from '../../props/ApiResponses';
 import QRCode from 'easyqrcodejs';
 import useTranslate from '../../hooks/useTranslate';
 import usePushSuccess from '../../hooks/usePushSuccess';
+import usePushApiError from '../../hooks/usePushApiError';
 
 export default function useVoucherExportService() {
     const pushDanger = usePushDanger();
@@ -19,6 +19,7 @@ export default function useVoucherExportService() {
     const setProgress = useSetProgress();
     const openModal = useOpenModal();
     const translate = useTranslate();
+    const pushApiError = usePushApiError();
 
     const voucherService = useVoucherService();
     const fileService = useFileService();
@@ -170,7 +171,7 @@ export default function useVoucherExportService() {
                             }, console.error)
                             .finally(() => setProgress(100));
                     })
-                    .catch((err: ResponseError) => pushDanger('Mislukt!', err.data.message))
+                    .catch(pushApiError)
                     .finally(() => setProgress(100));
             };
 
@@ -199,6 +200,7 @@ export default function useVoucherExportService() {
             saveExportedData,
             setProgress,
             voucherService,
+            pushApiError,
         ],
     );
 
diff --git a/react/src/dashboard/services/helpers/useFilePreview.tsx b/react/src/dashboard/services/helpers/useFilePreview.tsx
index 8375f37c2..0eafc00ab 100644
--- a/react/src/dashboard/services/helpers/useFilePreview.tsx
+++ b/react/src/dashboard/services/helpers/useFilePreview.tsx
@@ -2,14 +2,13 @@ import React, { useCallback } from 'react';
 import ModalPdfPreview from '../../components/modals/ModalPdfPreview';
 import ModalImagePreview from '../../components/modals/ModalImagePreview';
 import useOpenModal from '../../hooks/useOpenModal';
-import usePushDanger from '../../hooks/usePushDanger';
 import File from '../../props/models/File';
 import { useFileService } from '../FileService';
-import { ResponseError } from '../../props/ApiResponses';
+import usePushApiError from '../../hooks/usePushApiError';
 
 export default function useFilePreview() {
     const openModal = useOpenModal();
-    const pushDanger = usePushDanger();
+    const pushApiError = usePushApiError();
 
     const fileService = useFileService();
 
@@ -21,11 +20,11 @@ export default function useFilePreview() {
                     .then((res) => {
                         openModal((modal) => <ModalPdfPreview modal={modal} rawPdfFile={res.data} />);
                     })
-                    .catch((err: ResponseError) => pushDanger('Mislukt!', err.data?.message));
+                    .catch(pushApiError);
             } else if (['png', 'jpeg', 'jpg'].includes(file.ext)) {
                 openModal((modal) => <ModalImagePreview modal={modal} imageSrc={file.url} />);
             }
         },
-        [fileService, openModal, pushDanger],
+        [fileService, openModal, pushApiError],
     );
 }
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 28e6a6753..2190f88a9 100644
--- a/react/src/webshop/components/modals/modal-product-reserve/ModalProductReserve.tsx
+++ b/react/src/webshop/components/modals/modal-product-reserve/ModalProductReserve.tsx
@@ -30,6 +30,7 @@ import { useProfileService } from '../../../../dashboard/services/ProfileService
 import { ErrorResponse } from 'react-router-dom';
 import usePushSuccess from '../../../../dashboard/hooks/usePushSuccess';
 import classNames from 'classnames';
+import SelectControl from '../../../../dashboard/components/elements/select-control/SelectControl';
 
 type VoucherType = Voucher & {
     amount_extra: number;
@@ -137,6 +138,14 @@ export default function ModalProductReserve({
     const [emptyText] = useState(translate('modal_reserve_product.confirm_notes.labels.empty'));
     const [voucher, setVoucher] = useState<VoucherType>(null);
 
+    const customFieldBooleanOptions = useMemo(() => {
+        return [
+            { key: null, name: translate('form.placeholders.select_option') },
+            { key: 'Nee', name: 'Nee' },
+            { key: 'Ja', name: 'Ja' },
+        ];
+    }, [translate]);
+
     const addressFilled = useCallback((address: AddressType) => {
         return !!(address?.city && address?.street && address?.house_nr && address?.postal_code);
     }, []);
@@ -782,6 +791,20 @@ export default function ModalProductReserve({
                                                             data-dusk={field.dusk}
                                                         />
                                                     )}
+                                                    {field.type === 'boolean' && (
+                                                        <SelectControl
+                                                            propKey={'key'}
+                                                            value={form.values.custom_fields?.[field.key] ?? null}
+                                                            onChange={(value: string) => {
+                                                                form.values.custom_fields =
+                                                                    form.values.custom_fields || {};
+                                                                form.values.custom_fields[field.key] = value;
+                                                                form.update({ ...form.values });
+                                                            }}
+                                                            data-dusk={field.dusk}
+                                                            options={customFieldBooleanOptions}
+                                                        />
+                                                    )}
                                                 </div>
 
                                                 {field.description && (
diff --git a/react/src/webshop/i18n/nl/components/form.mjs b/react/src/webshop/i18n/nl/components/form.mjs
index 2999b1383..31cf67ba4 100644
--- a/react/src/webshop/i18n/nl/components/form.mjs
+++ b/react/src/webshop/i18n/nl/components/form.mjs
@@ -1,4 +1,7 @@
 export default {
     required: 'Verplicht',
     optional: 'Optioneel',
+    placeholders: {
+        select_option: 'Selecteer optie',
+    },
 };
diff --git a/webpack.config.js b/webpack.config.js
index 3e4fa3128..11efb7e8f 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -303,7 +303,7 @@ module.exports = (env, argv) => {
                 failOnError: true,
                 failOnWarning: true,
                 cache: true,
-                resolvePluginsRelativeTo: __dirname,
+                configType: 'eslintrc',
             }),
         ].filter((plugin) => plugin),