From c192991d04317cbb0938d1568f439a7f35f373f8 Mon Sep 17 00:00:00 2001
From: Yaroslav Kosterin <ateamcms@gmail.com>
Date: Thu, 13 Feb 2025 19:28:00 +0200
Subject: [PATCH 01/23] add tests for product page actions, login scenarios,
 fund request conditional steps

---
 .../components/pages/auth/IdentityRestore.tsx     |  2 +-
 .../products-show/elements/ProductFundsCard.tsx   | 15 ++++++++++-----
 .../pages/vouchers-show/VouchersShow.tsx          |  6 ++++--
 .../components/pages/vouchers/Vouchers.tsx        |  2 +-
 react/src/webshop/services/AuthService.ts         |  2 +-
 5 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/react/src/webshop/components/pages/auth/IdentityRestore.tsx b/react/src/webshop/components/pages/auth/IdentityRestore.tsx
index 751a9bbb0..11bb3ffe4 100644
--- a/react/src/webshop/components/pages/auth/IdentityRestore.tsx
+++ b/react/src/webshop/components/pages/auth/IdentityRestore.tsx
@@ -43,7 +43,7 @@ export default function IdentityRestore({ confirmation = false }: { confirmation
 
             if (target[0] == targetVoucher) {
                 if (target?.[1]) {
-                    navigateState('voucher', { address: target[1] });
+                    navigateState('voucher', { number: target[1] });
                 } else {
                     navigateState('start');
                 }
diff --git a/react/src/webshop/components/pages/products-show/elements/ProductFundsCard.tsx b/react/src/webshop/components/pages/products-show/elements/ProductFundsCard.tsx
index 21a605acf..2cfab472e 100644
--- a/react/src/webshop/components/pages/products-show/elements/ProductFundsCard.tsx
+++ b/react/src/webshop/components/pages/products-show/elements/ProductFundsCard.tsx
@@ -118,7 +118,7 @@ export default function ProductFundsCard({
                     <div className="pane-section pane-section-collapsed">
                         <div className="product-funds-list">
                             {listFunds.map((fund) => (
-                                <div key={fund.id} className="fund-item" data-dusk="fundItem">
+                                <div key={fund.id} className="fund-item" data-dusk={`fundItem${fund.id}`}>
                                     <div className="fund-item-section fund-item-section-details text-left">
                                         <div className="fund-item-media">
                                             <img
@@ -247,6 +247,7 @@ export default function ProductFundsCard({
                                                 }`}
                                                 target="_blank"
                                                 href={fund.external_link_url}
+                                                data-dusk="externalLink"
                                                 rel="noreferrer">
                                                 {fund.external_link_text}
                                                 <em className="mdi mdi-arrow-right icon-right" aria-hidden="true" />
@@ -258,7 +259,8 @@ export default function ProductFundsCard({
                                             <StateNavLink
                                                 name={'fund-activate'}
                                                 params={{ id: fund.id }}
-                                                className="button button-primary">
+                                                className="button button-primary"
+                                                dataDusk="fundRequest">
                                                 {fund.request_btn_text}
                                                 <em className="mdi mdi-arrow-right icon-right" aria-hidden="true" />
                                             </StateNavLink>
@@ -269,7 +271,8 @@ export default function ProductFundsCard({
                                             <StateNavLink
                                                 name={'fund-requests'}
                                                 params={{ id: fund.id }}
-                                                className="button button-primary-outline">
+                                                className="button button-primary-outline"
+                                                dataDusk="fundRequests">
                                                 {translate('funds.buttons.is_pending')}
                                             </StateNavLink>
                                         </div>
@@ -279,7 +282,8 @@ export default function ProductFundsCard({
                                             <button
                                                 type="button"
                                                 className="button button-primary"
-                                                onClick={() => requestFund(fund)}>
+                                                onClick={() => requestFund(fund)}
+                                                data-dusk="fundActivate">
                                                 {translate('funds.buttons.is_applicable')}
                                                 <em className="mdi mdi-arrow-right icon-right" aria-hidden="true" />
                                             </button>
@@ -291,6 +295,7 @@ export default function ProductFundsCard({
                                                 <StateNavLink
                                                     name="voucher"
                                                     params={{ number: fund.vouchers[0].number }}
+                                                    dataDusk="voucherButton"
                                                     className="button button-primary">
                                                     {translate(
                                                         `funds.buttons.${fund.key}.already_received`,
@@ -305,7 +310,7 @@ export default function ProductFundsCard({
                                                     <div className="fund-item-section-label">
                                                         {translate('product.funds.not_available_label')}
                                                     </div>
-                                                    <div className="fund-item-section-value">
+                                                    <div className="fund-item-section-value" data-dusk="notAvailable">
                                                         {translate('product.funds.not_available_value')}
                                                     </div>
                                                 </Fragment>
diff --git a/react/src/webshop/components/pages/vouchers-show/VouchersShow.tsx b/react/src/webshop/components/pages/vouchers-show/VouchersShow.tsx
index d673aec1b..d4f32c1f7 100644
--- a/react/src/webshop/components/pages/vouchers-show/VouchersShow.tsx
+++ b/react/src/webshop/components/pages/vouchers-show/VouchersShow.tsx
@@ -258,8 +258,10 @@ export default function VouchersShow() {
     );
 
     useEffect(() => {
-        fetchVoucher();
-    }, [fetchVoucher]);
+        if (authIdentity) {
+            fetchVoucher();
+        }
+    }, [fetchVoucher, authIdentity]);
 
     useEffect(() => {
         if (voucher && !voucher.product && ['budget', 'subsidies'].includes(voucher?.fund?.type)) {
diff --git a/react/src/webshop/components/pages/vouchers/Vouchers.tsx b/react/src/webshop/components/pages/vouchers/Vouchers.tsx
index f6c9a154a..fde35534d 100644
--- a/react/src/webshop/components/pages/vouchers/Vouchers.tsx
+++ b/react/src/webshop/components/pages/vouchers/Vouchers.tsx
@@ -110,7 +110,7 @@ export default function Vouchers() {
             {vouchers && (
                 <Fragment>
                     {vouchers.data.length > 0 && (
-                        <div className="block block-vouchers">
+                        <div className="block block-vouchers" data-dusk="vouchersList">
                             {vouchers.data.map((voucher) => (
                                 <VoucherCard
                                     key={voucher.id}
diff --git a/react/src/webshop/services/AuthService.ts b/react/src/webshop/services/AuthService.ts
index 1968fcf38..8e0c2eceb 100644
--- a/react/src/webshop/services/AuthService.ts
+++ b/react/src/webshop/services/AuthService.ts
@@ -65,7 +65,7 @@ export function useAuthService() {
             }
 
             if (target && target[0] == 'voucher') {
-                navigateState('voucher', { address: target[1] });
+                navigateState('voucher', { number: target[1] });
                 return true;
             }
 

From 1a9ba3be6e1d14320136a28c9d4130290c38691a Mon Sep 17 00:00:00 2001
From: Yaroslav Kosterin <ateamcms@gmail.com>
Date: Sun, 23 Mar 2025 09:56:03 +0200
Subject: [PATCH 02/23] add reservation fields autotest

---
 .../ModalProductReserve.tsx                   | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

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 2190f88a9..b8018abc8 100644
--- a/react/src/webshop/components/modals/modal-product-reserve/ModalProductReserve.tsx
+++ b/react/src/webshop/components/modals/modal-product-reserve/ModalProductReserve.tsx
@@ -300,7 +300,7 @@ export default function ModalProductReserve({
                 }
 
                 if (product.reservation.birth_date !== 'no') {
-                    fields.push(makeReservationField('birth_date', 'date'));
+                    fields.push(makeReservationField('birth_date', 'date', 'birthDate'));
                 }
 
                 const _fields = [...fields, ...customFields];
@@ -801,7 +801,7 @@ export default function ModalProductReserve({
                                                                 form.values.custom_fields[field.key] = value;
                                                                 form.update({ ...form.values });
                                                             }}
-                                                            data-dusk={field.dusk}
+                                                            dusk={field.dusk}
                                                             options={customFieldBooleanOptions}
                                                         />
                                                     )}
@@ -811,6 +811,7 @@ export default function ModalProductReserve({
                                                     <Fragment>
                                                         <div
                                                             className="form-group-info-button"
+                                                            data-dusk={`${field.dusk}InfoBtn`}
                                                             onClick={(e) => {
                                                                 e.stopPropagation();
                                                                 setFields((fields) => {
@@ -858,14 +859,16 @@ export default function ModalProductReserve({
                                         )}
 
                                         {!field.custom && field.type === 'date' && (
-                                            <DatePickerControl
-                                                value={dateParse(form.values[field.key])}
-                                                dateMax={dateMinLimit}
-                                                dateFormat={'dd-MM-yyyy'}
-                                                onChange={(date: Date) => {
-                                                    form.update({ [field.key]: dateFormat(date) });
-                                                }}
-                                            />
+                                            <div data-dusk={field.dusk}>
+                                                <DatePickerControl
+                                                    value={dateParse(form.values[field.key])}
+                                                    dateMax={dateMinLimit}
+                                                    dateFormat={'dd-MM-yyyy'}
+                                                    onChange={(date: Date) => {
+                                                        form.update({ [field.key]: dateFormat(date) });
+                                                    }}
+                                                />
+                                            </div>
                                         )}
 
                                         {field.custom ? (
@@ -1122,11 +1125,13 @@ export default function ModalProductReserve({
                                                     )}
                                                 </div>
                                                 <div
+                                                    data-dusk={`overviewValueCustomField${field.key}`}
                                                     className={`overview-item-value ${
                                                         !form.values[field.key] ? 'overview-item-value-empty' : ''
                                                     }`}>
                                                     {field.type === 'date'
-                                                        ? dateFormat(dateParse(form.values[field.key]), 'dd-MM-yyyy')
+                                                        ? dateFormat(dateParse(form.values[field.key]), 'dd-MM-yyyy') ||
+                                                          emptyText
                                                         : form.values[field.key] || emptyText}
                                                 </div>
                                             </Fragment>
@@ -1134,6 +1139,7 @@ export default function ModalProductReserve({
                                             <Fragment>
                                                 <div className="overview-item-label">{field.label}</div>
                                                 <div
+                                                    data-dusk={`overviewValueCustomField${field.key}`}
                                                     className={`overview-item-value ${
                                                         !form.values.custom_fields[field.key]
                                                             ? 'overview-item-value-empty'

From edff25070c0d1c5fe4c6679715502f9774d0023c Mon Sep 17 00:00:00 2001
From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com>
Date: Tue, 1 Apr 2025 19:03:38 +0000
Subject: [PATCH 03/23] Bump pdfjs-dist from 4.2.67 to 5.1.91

Bumps [pdfjs-dist](https://github.com/mozilla/pdf.js) from 4.2.67 to 5.1.91.
- [Release notes](https://github.com/mozilla/pdf.js/releases)
- [Commits](https://github.com/mozilla/pdf.js/compare/v4.2.67...v5.1.91)

---
updated-dependencies:
- dependency-name: pdfjs-dist
  dependency-version: 5.1.91
  dependency-type: direct:production
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
---
 package-lock.json | 694 +++++++++++++---------------------------------
 package.json      |   2 +-
 2 files changed, 197 insertions(+), 499 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4dc3a4741..96e8cd4cb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,7 +34,7 @@
         "libphonenumber-js": "^1.10.41",
         "lodash": "^4.17.21",
         "papaparse": "^5.4.1",
-        "pdfjs-dist": "4.2",
+        "pdfjs-dist": "5.1",
         "qrcode.react": "^4.1.0",
         "query-string": "^9.1.0",
         "react": "^18.1.0",
@@ -2501,54 +2501,6 @@
       "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==",
       "dev": true
     },
-    "node_modules/@mapbox/node-pre-gyp": {
-      "version": "1.0.11",
-      "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz",
-      "integrity": "sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==",
-      "optional": true,
-      "dependencies": {
-        "detect-libc": "^2.0.0",
-        "https-proxy-agent": "^5.0.0",
-        "make-dir": "^3.1.0",
-        "node-fetch": "^2.6.7",
-        "nopt": "^5.0.0",
-        "npmlog": "^5.0.1",
-        "rimraf": "^3.0.2",
-        "semver": "^7.3.5",
-        "tar": "^6.1.11"
-      },
-      "bin": {
-        "node-pre-gyp": "bin/node-pre-gyp"
-      }
-    },
-    "node_modules/@mapbox/node-pre-gyp/node_modules/rimraf": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-      "deprecated": "Rimraf versions prior to v4 are no longer supported",
-      "optional": true,
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/@mapbox/node-pre-gyp/node_modules/semver": {
-      "version": "7.6.3",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
-      "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==",
-      "optional": true,
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/@mdi/font": {
       "version": "7.4.47",
       "resolved": "https://registry.npmjs.org/@mdi/font/-/font-7.4.47.tgz",
@@ -2573,6 +2525,188 @@
       "resolved": "https://registry.npmjs.org/@mixmark-io/domino/-/domino-2.2.0.tgz",
       "integrity": "sha512-Y28PR25bHXUg88kCV7nivXrP2Nj2RueZ3/l/jdx6J9f8J4nsEGcgX0Qe6lt7Pa+J79+kPiJU3LguR6O/6zrLOw=="
     },
+    "node_modules/@napi-rs/canvas": {
+      "version": "0.1.68",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas/-/canvas-0.1.68.tgz",
+      "integrity": "sha512-LQESrePLEBLvhuFkXx9jjBXRC2ClYsO5mqQ1m/puth5z9SOuM3N/B3vDuqnC3RJFktDktyK9khGvo7dTkqO9uQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@napi-rs/canvas-android-arm64": "0.1.68",
+        "@napi-rs/canvas-darwin-arm64": "0.1.68",
+        "@napi-rs/canvas-darwin-x64": "0.1.68",
+        "@napi-rs/canvas-linux-arm-gnueabihf": "0.1.68",
+        "@napi-rs/canvas-linux-arm64-gnu": "0.1.68",
+        "@napi-rs/canvas-linux-arm64-musl": "0.1.68",
+        "@napi-rs/canvas-linux-riscv64-gnu": "0.1.68",
+        "@napi-rs/canvas-linux-x64-gnu": "0.1.68",
+        "@napi-rs/canvas-linux-x64-musl": "0.1.68",
+        "@napi-rs/canvas-win32-x64-msvc": "0.1.68"
+      }
+    },
+    "node_modules/@napi-rs/canvas-android-arm64": {
+      "version": "0.1.68",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-android-arm64/-/canvas-android-arm64-0.1.68.tgz",
+      "integrity": "sha512-h1KcSR4LKLfRfzeBH65xMxbWOGa1OtMFQbCMVlxPCkN1Zr+2gK+70pXO5ktojIYcUrP6KDcOwoc8clho5ccM/w==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-arm64": {
+      "version": "0.1.68",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-arm64/-/canvas-darwin-arm64-0.1.68.tgz",
+      "integrity": "sha512-/VURlrAD4gDoxW1GT/b0nP3fRz/fhxmHI/xznTq2FTwkQLPOlLkDLCvTmQ7v6LtGKdc2Ed6rvYpRan+JXThInQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-darwin-x64": {
+      "version": "0.1.68",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-darwin-x64/-/canvas-darwin-x64-0.1.68.tgz",
+      "integrity": "sha512-tEpvGR6vCLTo1Tx9wmDnoOKROpw57wiCWwCpDOuVlj/7rqEJOUYr9ixW4aRJgmeGBrZHgevI0EURys2ER6whmg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm-gnueabihf": {
+      "version": "0.1.68",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm-gnueabihf/-/canvas-linux-arm-gnueabihf-0.1.68.tgz",
+      "integrity": "sha512-U9xbJsumPOiAYeAFZMlHf62b9dGs2HJ6Q5xt7xTB0uEyPeurwhgYBWGgabdsEidyj38YuzI/c3LGBbSQB3vagw==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-gnu": {
+      "version": "0.1.68",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-gnu/-/canvas-linux-arm64-gnu-0.1.68.tgz",
+      "integrity": "sha512-KFkn8wEm3mPnWD4l8+OUUkxylSJuN5q9PnJRZJgv15RtCA1bgxIwTkBhI/+xuyVMcHqON9sXq7cDkEJtHm35dg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-arm64-musl": {
+      "version": "0.1.68",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-arm64-musl/-/canvas-linux-arm64-musl-0.1.68.tgz",
+      "integrity": "sha512-IQzts91rCdOALXBWQxLZRCEDrfFTGDtNRJMNu+2SKZ1uT8cmPQkPwVk5rycvFpvgAcmiFiOSCp1aRrlfU8KPpQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-riscv64-gnu": {
+      "version": "0.1.68",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-riscv64-gnu/-/canvas-linux-riscv64-gnu-0.1.68.tgz",
+      "integrity": "sha512-e9AS5UttoIKqXSmBzKZdd3NErSVyOEYzJfNOCGtafGk1//gibTwQXGlSXmAKuErqMp09pyk9aqQRSYzm1AQfBw==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-gnu": {
+      "version": "0.1.68",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-gnu/-/canvas-linux-x64-gnu-0.1.68.tgz",
+      "integrity": "sha512-Pa/I36VE3j57I3Obhrr+J48KGFfkZk2cJN/2NmW/vCgmoF7kCP6aTVq5n+cGdGWLd/cN9CJ9JvNwEoMRDghu0g==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-linux-x64-musl": {
+      "version": "0.1.68",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-linux-x64-musl/-/canvas-linux-x64-musl-0.1.68.tgz",
+      "integrity": "sha512-9c6rkc5195wNxuUHJdf4/mmnq433OQey9TNvQ9LspJazvHbfSkTij8wtKjASVQsJyPDva4fkWOeV/OQ7cLw0GQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@napi-rs/canvas-win32-x64-msvc": {
+      "version": "0.1.68",
+      "resolved": "https://registry.npmjs.org/@napi-rs/canvas-win32-x64-msvc/-/canvas-win32-x64-msvc-0.1.68.tgz",
+      "integrity": "sha512-Fc5Dez23u0FoSATurT6/w1oMytiRnKWEinHivdMvXpge6nG4YvhrASrtqMk8dGJMVQpHr8QJYF45rOrx2YU2Aw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -4557,12 +4691,6 @@
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ=="
     },
-    "node_modules/abbrev": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
-      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
-      "optional": true
-    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -4651,18 +4779,6 @@
         "node": ">=8.9"
       }
     },
-    "node_modules/agent-base": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
-      "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==",
-      "optional": true,
-      "dependencies": {
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6.0.0"
-      }
-    },
     "node_modules/ajv": {
       "version": "8.17.1",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
@@ -4724,7 +4840,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -4742,40 +4858,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/aproba": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
-      "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
-      "optional": true
-    },
-    "node_modules/are-we-there-yet": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
-      "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
-      "deprecated": "This package is no longer supported.",
-      "optional": true,
-      "dependencies": {
-        "delegates": "^1.0.0",
-        "readable-stream": "^3.6.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/are-we-there-yet/node_modules/readable-stream": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
-      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
-      "optional": true,
-      "dependencies": {
-        "inherits": "^2.0.3",
-        "string_decoder": "^1.1.1",
-        "util-deprecate": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -5607,21 +5689,6 @@
         }
       ]
     },
-    "node_modules/canvas": {
-      "version": "2.11.2",
-      "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.11.2.tgz",
-      "integrity": "sha512-ItanGBMrmRV7Py2Z+Xhs7cT+FNt5K0vPL4p9EZ/UX/Mu7hFbkxSjKF2KVtPwX7UYWp7dRKnrTvReflgrItJbdw==",
-      "hasInstallScript": true,
-      "optional": true,
-      "dependencies": {
-        "@mapbox/node-pre-gyp": "^1.0.0",
-        "nan": "^2.17.0",
-        "simple-get": "^3.0.3"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/chart.js": {
       "version": "4.4.4",
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.4.tgz",
@@ -5669,15 +5736,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/chownr": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
-      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
-      "optional": true,
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
@@ -5774,15 +5832,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/color-support": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
-      "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
-      "optional": true,
-      "bin": {
-        "color-support": "bin.js"
-      }
-    },
     "node_modules/colorette": {
       "version": "2.0.20",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz",
@@ -5958,12 +6007,6 @@
       "integrity": "sha512-ZMkYO/LkF17QvCPqM0gxw8yUzigAOZOSWSHg91FH6orS7vcEj5dVZTidN2fQ14yBSdg97RqhSNwLUXInd52OTA==",
       "dev": true
     },
-    "node_modules/console-control-strings": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-      "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
-      "optional": true
-    },
     "node_modules/constants-browserify": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz",
@@ -6376,7 +6419,7 @@
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
       "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "ms": "^2.1.3"
       },
@@ -6397,18 +6440,6 @@
         "node": ">=14.16"
       }
     },
-    "node_modules/decompress-response": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz",
-      "integrity": "sha512-jOSne2qbyE+/r8G1VU+G/82LBs2Fs4LAsTiLSHOCOMZQl2OKZ6i8i4IyHemTe+/yIXOtTcRQMzPcgyhoFlqPkw==",
-      "optional": true,
-      "dependencies": {
-        "mimic-response": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -6582,12 +6613,6 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/delegates": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-      "integrity": "sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==",
-      "optional": true
-    },
     "node_modules/depd": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
@@ -6632,15 +6657,6 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
-    "node_modules/detect-libc": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
-      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
-      "optional": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/detect-node": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz",
@@ -7921,36 +7937,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/fs-minipass": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
-      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
-      "optional": true,
-      "dependencies": {
-        "minipass": "^3.0.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/fs-minipass/node_modules/minipass": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "optional": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/fs-minipass/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "optional": true
-    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -8006,27 +7992,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/gauge": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/gauge/-/gauge-3.0.2.tgz",
-      "integrity": "sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==",
-      "deprecated": "This package is no longer supported.",
-      "optional": true,
-      "dependencies": {
-        "aproba": "^1.0.3 || ^2.0.0",
-        "color-support": "^1.1.2",
-        "console-control-strings": "^1.0.0",
-        "has-unicode": "^2.0.1",
-        "object-assign": "^4.1.1",
-        "signal-exit": "^3.0.0",
-        "string-width": "^4.2.3",
-        "strip-ansi": "^6.0.1",
-        "wide-align": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -8238,12 +8203,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/has-unicode": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-      "integrity": "sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==",
-      "optional": true
-    },
     "node_modules/hash-base": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/hash-base/-/hash-base-3.0.4.tgz",
@@ -8547,19 +8506,6 @@
       "integrity": "sha512-J+FkSdyD+0mA0N+81tMotaRMfSL9SGi+xpD3T6YApKsc3bGSXJlfXri3VyFOeYkfLRQisDk1W+jIFFKBeUBbBg==",
       "dev": true
     },
-    "node_modules/https-proxy-agent": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz",
-      "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==",
-      "optional": true,
-      "dependencies": {
-        "agent-base": "6",
-        "debug": "4"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/hyperdyperid": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/hyperdyperid/-/hyperdyperid-1.2.0.tgz",
@@ -9065,15 +9011,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "optional": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-generator-function": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.0.10.tgz",
@@ -9863,21 +9800,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/make-dir": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-      "optional": true,
-      "dependencies": {
-        "semver": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -10018,18 +9940,6 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/mimic-response": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-2.1.0.tgz",
-      "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==",
-      "optional": true,
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -10062,58 +9972,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/minipass": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
-      "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
-      "optional": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/minizlib": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
-      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
-      "optional": true,
-      "dependencies": {
-        "minipass": "^3.0.0",
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/minizlib/node_modules/minipass": {
-      "version": "3.3.6",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.3.6.tgz",
-      "integrity": "sha512-DxiNidxSEK+tHG6zOIklvNOwm3hvCrbUrdtzY74U6HKTJxvIDfOUL5W5P2Ghd3DTkhhKPYGqeNUIh5qcM4YBfw==",
-      "optional": true,
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/minizlib/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "optional": true
-    },
-    "node_modules/mkdirp": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
-      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
-      "optional": true,
-      "bin": {
-        "mkdirp": "bin/cmd.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/mkdirp-classic": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
@@ -10153,7 +10011,7 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/multicast-dns": {
       "version": "7.2.5",
@@ -10168,12 +10026,6 @@
         "multicast-dns": "cli.js"
       }
     },
-    "node_modules/nan": {
-      "version": "2.20.0",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.20.0.tgz",
-      "integrity": "sha512-bk3gXBZDGILuuo/6sKtr0DQmSThYHLtNCdSdXk9YkxD/jK6X2vmCyyXBBxyqZ4XcnzTyYEAThfX3DCEnLf6igw==",
-      "optional": true
-    },
     "node_modules/nanoid": {
       "version": "3.3.8",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
@@ -10223,26 +10075,6 @@
         "tslib": "^2.0.3"
       }
     },
-    "node_modules/node-fetch": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
-      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
-      "optional": true,
-      "dependencies": {
-        "whatwg-url": "^5.0.0"
-      },
-      "engines": {
-        "node": "4.x || >=6.0.0"
-      },
-      "peerDependencies": {
-        "encoding": "^0.1.0"
-      },
-      "peerDependenciesMeta": {
-        "encoding": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/node-forge": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.1.tgz",
@@ -10257,21 +10089,6 @@
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
       "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g=="
     },
-    "node_modules/nopt": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
-      "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
-      "optional": true,
-      "dependencies": {
-        "abbrev": "1"
-      },
-      "bin": {
-        "nopt": "bin/nopt.js"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -10281,19 +10098,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/npmlog": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-5.0.1.tgz",
-      "integrity": "sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==",
-      "deprecated": "This package is no longer supported.",
-      "optional": true,
-      "dependencies": {
-        "are-we-there-yet": "^2.0.0",
-        "console-control-strings": "^1.1.0",
-        "gauge": "^3.0.0",
-        "set-blocking": "^2.0.0"
-      }
-    },
     "node_modules/nth-check": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
@@ -10718,15 +10522,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/path2d": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/path2d/-/path2d-0.2.1.tgz",
-      "integrity": "sha512-Fl2z/BHvkTNvkuBzYTpTuirHZg6wW9z8+4SND/3mDTEcYbbNKWAy21dz9D3ePNNwrrK8pqZO5vLPZ1hLF6T7XA==",
-      "optional": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/pbkdf2": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/pbkdf2/-/pbkdf2-3.1.2.tgz",
@@ -10744,15 +10539,15 @@
       }
     },
     "node_modules/pdfjs-dist": {
-      "version": "4.2.67",
-      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-4.2.67.tgz",
-      "integrity": "sha512-rJmuBDFpD7cqC8WIkQUEClyB4UAH05K4AsyewToMTp2gSy3Rrx8c1ydAVqlJlGv3yZSOrhEERQU/4ScQQFlLHA==",
+      "version": "5.1.91",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-5.1.91.tgz",
+      "integrity": "sha512-qSIADdagooJB4wWCBnrBJjRvASevmxL0BwafvOuKJG5uTQdYoFBrhrRYnucKNiSc9qS6JIk0hC5y1yktFljXkA==",
+      "license": "Apache-2.0",
       "engines": {
-        "node": ">=18"
+        "node": ">=20"
       },
       "optionalDependencies": {
-        "canvas": "^2.11.2",
-        "path2d": "^0.2.0"
+        "@napi-rs/canvas": "^0.1.67"
       }
     },
     "node_modules/picocolors": {
@@ -11825,7 +11620,7 @@
       "version": "6.3.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
       "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
-      "devOptional": true,
+      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -11984,12 +11779,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/set-blocking": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-      "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
-      "optional": true
-    },
     "node_modules/set-function-length": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
@@ -12120,17 +11909,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/signal-exit": {
-      "version": "3.0.7",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
-      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
-      "optional": true
-    },
     "node_modules/simple-concat": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
       "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
-      "devOptional": true,
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -12146,17 +11929,6 @@
         }
       ]
     },
-    "node_modules/simple-get": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.1.tgz",
-      "integrity": "sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==",
-      "optional": true,
-      "dependencies": {
-        "decompress-response": "^4.2.0",
-        "once": "^1.3.1",
-        "simple-concat": "^1.0.0"
-      }
-    },
     "node_modules/simple-html-tokenizer": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/simple-html-tokenizer/-/simple-html-tokenizer-0.1.1.tgz",
@@ -12366,31 +12138,11 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
       "integrity": "sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "safe-buffer": "~5.2.0"
       }
     },
-    "node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "optional": true,
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "optional": true
-    },
     "node_modules/string.prototype.matchall": {
       "version": "4.0.11",
       "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.11.tgz",
@@ -12480,7 +12232,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -12729,29 +12481,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/tar": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-6.2.1.tgz",
-      "integrity": "sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==",
-      "optional": true,
-      "dependencies": {
-        "chownr": "^2.0.0",
-        "fs-minipass": "^2.0.0",
-        "minipass": "^5.0.0",
-        "minizlib": "^2.1.1",
-        "mkdirp": "^1.0.3",
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/tar/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
-      "optional": true
-    },
     "node_modules/terser": {
       "version": "5.32.0",
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.32.0.tgz",
@@ -12999,12 +12728,6 @@
         "node": ">=0.6"
       }
     },
-    "node_modules/tr46": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
-      "optional": true
-    },
     "node_modules/tree-dump": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/tree-dump/-/tree-dump-1.0.2.tgz",
@@ -13649,12 +13372,6 @@
       "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-3.5.2.tgz",
       "integrity": "sha512-c0rhqNcHXRkY/ogGDJQxZ9Im9D19hDihbzSQJrsioex+KnFgmMzBiy57Z1EjkhX/+OjyBpclDCzz2ITtjokFmg=="
     },
-    "node_modules/webidl-conversions": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
-      "optional": true
-    },
     "node_modules/webpack": {
       "version": "5.94.0",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.94.0.tgz",
@@ -13927,16 +13644,6 @@
         "node": ">=0.8.0"
       }
     },
-    "node_modules/whatwg-url": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-      "optional": true,
-      "dependencies": {
-        "tr46": "~0.0.3",
-        "webidl-conversions": "^3.0.0"
-      }
-    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -14033,15 +13740,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/wide-align": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
-      "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
-      "optional": true,
-      "dependencies": {
-        "string-width": "^1.0.2 || 2 || 3 || 4"
-      }
-    },
     "node_modules/wildcard": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/wildcard/-/wildcard-2.0.1.tgz",
diff --git a/package.json b/package.json
index c4616a635..55dde2abc 100644
--- a/package.json
+++ b/package.json
@@ -104,7 +104,7 @@
     "libphonenumber-js": "^1.10.41",
     "lodash": "^4.17.21",
     "papaparse": "^5.4.1",
-    "pdfjs-dist": "4.2",
+    "pdfjs-dist": "5.1",
     "qrcode.react": "^4.1.0",
     "query-string": "^9.1.0",
     "react": "^18.1.0",

From 300516617d35868683219a9869ebb48562e90f32 Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Thu, 10 Apr 2025 22:40:27 +0300
Subject: [PATCH 04/23] remove custom css

---
 .../assets/img/splash-faq.png                 | Bin 37253 -> 0 bytes
 .../scss/_common/blocks/block-markdown.scss   |   9 +
 .../scss/_common/dashboard.scss               |   8 +-
 .../forus-platform/scss/_common/landing.scss  | 448 -----------
 .../_webshop-common/assets/img/splash-faq.png | Bin 37253 -> 0 bytes
 .../assets/img/splash-faq.png                 | Bin 42399 -> 0 bytes
 .../scss/_common/layout/_footer.scss          | 392 ----------
 .../sections/blocks/block-show-more.scss      |  16 -
 .../scss/_common/sections/blocks/map.scss     |  74 --
 .../sections/blocks/records_create.scss       | 210 ------
 .../_common/sections/blocks/shops_map.scss    | 223 ------
 .../_common/sections/blocks/transactions.scss | 196 -----
 .../scss/_common/sections/blocks/voucher.scss | 698 ------------------
 .../_common/sections/blocks/vouchers.scss     | 542 --------------
 .../scss/_common/sections/faq.scss            | 261 -------
 .../scss/_common/sections/flow.scss           | 274 -------
 .../scss/_common/sections/funds-cms.scss      |   0
 .../scss/_common/sections/map.scss            |   6 -
 .../scss/_common/sections/products.scss       |  98 ---
 .../scss/_common/sections/steps.scss          | 206 ------
 .../scss/_common/sections/vouchers.scss       |  22 -
 .../scss/berkelland/components/_buttons.scss  |  20 -
 .../scss/berkelland/includes/shame.scss       |  23 -
 .../scss/berkelland/sections/blocks/map.scss  |   9 -
 .../berkelland/sections/blocks/products.scss  |   4 -
 .../berkelland/sections/blocks/profile.scss   |  64 --
 .../berkelland/sections/blocks/shops_map.scss |  26 -
 .../sections/blocks/transactions.scss         |  21 -
 .../berkelland/sections/blocks/voucher.scss   |  12 -
 .../berkelland/sections/blocks/vouchers.scss  |  19 -
 .../scss/berkelland/sections/faq.scss         |  18 -
 .../scss/berkelland/sections/steps.scss       |  25 -
 .../scss/berkelland/sections/vouchers.scss    |   8 -
 .../scss/ede/includes/shame.scss              | 174 -----
 .../ede/sections/blocks/block-provider.scss   |   9 -
 .../scss/eemsdelta/includes/shame.scss        |   9 -
 .../sections/blocks/block-navbar-search.scss  |  24 -
 .../scss/geertruidenberg/includes/shame.scss  |  80 --
 .../goereeoverflakkee/includes/buttons.scss   |  10 -
 .../scss/goereeoverflakkee/includes/form.scss |  10 -
 .../sections/blocks/block-breadcrumbs.scss    |  10 -
 .../sections/blocks/block-cms-funds.scss      |  42 --
 .../sections/blocks/block-copyrights.scss     |   5 -
 .../sections/blocks/block-footer.scss         |   7 -
 .../sections/blocks/block-map.scss            |  24 -
 .../sections/blocks/block-markdown.scss       |   3 -
 .../sections/blocks/block-mobile-menu.scss    |  15 -
 .../sections/blocks/block-navbar-search.scss  |  15 -
 .../sections/blocks/block-organizations.scss  |  36 -
 .../sections/blocks/block-pane.scss           |  28 -
 .../sections/blocks/block-product.scss        |  32 -
 .../sections/blocks/block-products-list.scss  |   4 -
 .../sections/blocks/block-products.scss       |   4 -
 .../sections/blocks/block-profile.scss        |  35 -
 .../scss/goereeoverflakkee/sections/faq.scss  |  12 -
 .../scss/goereeoverflakkee/sections/flow.scss |   6 -
 .../groningen/components/_breadcrumbs.scss    |  29 -
 .../scss/groningen/components/_buttons.scss   |  29 -
 .../scss/groningen/layout/_footer.scss        |  90 ---
 .../sections/blocks/block-navbar-search.scss  |  20 -
 .../sections/blocks/block-show-more.scss      |  12 -
 .../scss/groningen/sections/blocks/map.scss   |  12 -
 .../groningen/sections/blocks/profile.scss    |  64 --
 .../groningen/sections/blocks/shops_map.scss  |  26 -
 .../sections/blocks/transactions.scss         |  21 -
 .../groningen/sections/blocks/voucher.scss    |  12 -
 .../groningen/sections/blocks/vouchers.scss   |  19 -
 .../scss/groningen/sections/faq.scss          |  18 -
 .../scss/groningen/sections/steps.scss        |  35 -
 .../scss/groningen/sections/vouchers.scss     |   8 -
 .../components/_buttons.scss                  |  15 -
 .../hartvanwestbrabant/includes/shame.scss    |  13 -
 .../sections/blocks/block-lang-control.scss   |   7 -
 .../scss/heumen/includes/shame.scss           |   9 -
 .../scss/includes/blocks/_block.scss          |  11 +
 .../blocks/block-2fa-restriction.scss         |   0
 .../blocks/block-about-me_app.scss            |   0
 .../blocks/block-accessibility.scss           |   0
 .../blocks/block-action-card.scss             |   1 +
 .../blocks/block-announcement.scss            |   0
 .../blocks/block-app_download.scss            |   0
 .../blocks/block-app_links.scss               |   0
 .../blocks/block-auth-2fa.scss                |   0
 .../blocks/block-auth-widget.scss             |   0
 .../blocks/block-banner.scss                  |   0
 .../blocks/block-bookmark-toggle.scss         |   0
 .../blocks/block-card-table.scss              |   0
 .../blocks/block-cms-funds.scss               |  40 +-
 .../blocks/block-cms.scss                     |   0
 .../blocks/block-cookie-banner.scss           |   0
 .../blocks/block-data-list.scss               |   0
 .../blocks/block-empty.scss                   |  10 +-
 .../blocks/block-error-page.scss              |   0
 .../blocks/block-exception.scss               |   0
 .../scss/includes/blocks/block-faq.scss       | 172 +++++
 .../blocks/block-file-uploader.scss           |   0
 .../blocks/block-fund-pre-check-result.scss   |  12 +-
 .../blocks/block-fund-pre-check.scss          |   0
 .../blocks/block-fund-request.scss            |   0
 .../blocks/block-fund-requests.scss           |   4 +-
 .../blocks/block-fund.scss                    |   2 +-
 .../blocks/block-funds-list.scss              |   4 +-
 .../blocks/block-info-box.scss                |   0
 .../blocks/block-key-value-list.scss          |   0
 .../blocks/block-label-tabs.scss              |   0
 .../blocks/block-lang-control.scss            |   2 +-
 .../blocks/block-loader.scss                  |   0
 .../blocks/block-map-office-card.scss         |   0
 .../blocks/block-map_card.scss                |   3 +-
 .../blocks/block-markdown.scss                |  32 +-
 .../blocks/block-mobile-menu.scss             |  18 -
 .../blocks/block-navbar-desktop.scss          |   2 +-
 .../blocks/block-navbar-mobile.scss           |   0
 .../blocks/block-navbar-search.scss           |   8 +-
 .../blocks/block-notifications-table.scss     |   0
 .../blocks/block-office.scss                  |   0
 .../blocks/block-offices.scss                 |   0
 .../blocks/block-organization-info.scss       |  35 +-
 .../blocks/block-organizations.scss           |   8 +-
 .../blocks/block-page-loading-bar.scss        |   0
 .../blocks/block-pane.scss                    |  13 +-
 .../blocks/block-payouts.scss                 |   4 +-
 .../blocks/block-pincode.scss                 |   0
 .../blocks/block-pre-check-banner.scss        |   0
 .../blocks/block-preferences.scss             |   0
 .../blocks/block-products-list.scss           |  17 +-
 .../blocks/block-products.scss                |  23 +-
 .../blocks/block-profile.scss                 | 100 +--
 .../blocks/block-provider.scss                |  16 +-
 .../blocks/block-push-notifications.scss      |   0
 .../blocks/block-qr-code.scss                 |   0
 .../blocks/block-reimbursement.scss           |   0
 .../blocks/block-reimbursements.scss          |   2 +-
 .../blocks/block-reservation-address.scss     |   0
 .../blocks/block-reservation.scss             |   0
 .../blocks/block-reservations.scss            |   2 +-
 .../blocks/block-schedule-list.scss           |   0
 .../blocks/block-search-results.scss          |   0
 .../blocks/block-sessions.scss                |   0
 .../scss/includes/blocks/block-show-more.scss |  30 +
 .../blocks/block-showcase.scss                |   4 +
 .../blocks/block-sign_up-help.scss            |   0
 .../blocks/block-sign_up-provider.scss        |   0
 .../blocks/block-sign_up.scss                 |   0
 .../blocks/block-sitemap.scss                 |   2 +-
 .../blocks/block-skip-links.scss}             |   2 +-
 .../blocks/block-user-emails.scss             |   6 +-
 .../blocks/block-voucher-records.scss         |   0
 .../blocks/block-warning.scss                 |   0
 .../sections => includes}/blocks/cards.scss   |   0
 .../blocks/fund-add-records.scss              |   0
 .../blocks/fund_criteria.scss                 |   0
 .../scss/includes/blocks/map.scss             |  80 ++
 .../blocks/phone-number.scss                  |   0
 .../sections => includes}/blocks/product.scss |  27 +-
 .../blocks/record_categories.scss             |   0
 .../sections => includes}/blocks/records.scss |   0
 .../scss/includes/blocks/transactions.scss    | 190 +++++
 .../blocks/validations.scss                   |   0
 .../blocks/validators.scss                    |   4 +-
 .../blocks/voucher-product.scss               |   0
 .../scss/includes/blocks/voucher.scss         | 693 +++++++++++++++++
 .../scss/includes/blocks/vouchers.scss        | 539 ++++++++++++++
 .../components/_breadcrumbs.scss              |   0
 .../components/_buttons.scss                  |  61 +-
 .../components/_carrousel.scss                |   0
 .../components/_dropdown.scss                 |   0
 .../components/_form.scss                     |  19 +-
 .../components/_label.scss                    |  33 +-
 .../components/_map-card.scss                 |   0
 .../components/_modals.scss                   |   0
 .../components/_printables.scss               |   0
 .../components/_tooltip.scss                  |   0
 .../components/_triangle.scss                 |   0
 .../components/_ui-controls.scss              |   0
 .../components/button-groups.scss             |   0
 .../components/card.scss                      |   4 +-
 .../components/flex-grid.scss                 |   0
 .../components/frame-director.scss            |   0
 .../components/rate.scss                      |   0
 .../components/table-pagination.scss          |   0
 .../components/table.scss                     |   0
 .../includes/common.scss                      |   6 +
 .../includes/helpers.scss                     |   0
 .../includes/placeholders.scss                |   0
 .../includes/resetter.scss                    |  50 +-
 .../{_common => includes}/includes/shame.scss |  49 +-
 .../includes/third-party.scss                 |   0
 .../includes/typgography.scss                 |   0
 .../scss/includes/layout/_footer.scss         | 283 +++++++
 .../{_common => includes}/layout/_grid.scss   |   0
 .../{_common => includes}/layout/_header.scss |   5 +-
 .../modals/modal-2fa-setup.scss               |   0
 .../modals/modal-file-preview.scss            |   0
 .../modals/modal-fund-help.scss               |   0
 .../modals/modal-notification.scss            |   0
 .../modals/modal-open-in-me.scss              |   0
 .../modals/modal-photo-cropper.scss           |   0
 .../modals/modal-physical-cards.scss          |   0
 .../modals/modal-pin-code.scss                |   0
 .../modals/modal-product-reserve.scss         |   0
 .../scss/includes/pages/voucher.scss          |  12 +
 .../scss/includes/sections/_section.scss      |  20 +
 .../sections/section-breadcrumbs.scss         |   7 +
 .../scss/includes/sections/section-cms.scss   |   6 +
 .../scss/includes/sections/section-faq.scss   |   7 +
 .../includes/sections/section-footer.scss     |  10 +
 .../scss/includes/sections/section-map.scss   |   7 +
 .../includes/sections/section-products.scss   |   7 +
 .../includes/sections/section-profile.scss    |   7 +
 .../sections/section-voucher-details.scss     |   7 +
 .../scss/kerstpakket/components/_buttons.scss |   8 -
 .../scss/kerstpakket/layout/_footer.scss      |  11 -
 .../kerstpakket/sections/blocks/products.scss |  21 -
 .../scss/kerstpakket/sections/faq.scss        |  31 -
 .../scss/kerstpakket/sections/map.scss        |  17 -
 .../scss/kerstpakket/sections/steps.scss      |  35 -
 .../components/_breadcrumbs.scss              |  28 -
 .../noordoostpolder/components/_label.scss    |  11 -
 .../scss/noordoostpolder/includes/shame.scss  |   8 -
 .../noordoostpolder/sections/blocks/map.scss  |  11 -
 .../sections/blocks/products.scss             |   4 -
 .../sections/blocks/profile.scss              |  41 -
 .../sections/blocks/shops_map.scss            |  26 -
 .../sections/blocks/transactions.scss         |  21 -
 .../sections/blocks/voucher.scss              |  12 -
 .../sections/blocks/vouchers.scss             |  23 -
 .../scss/noordoostpolder/sections/faq.scss    |  38 -
 .../scss/noordoostpolder/sections/steps.scss  |  18 -
 .../noordoostpolder/sections/vouchers.scss    |   8 -
 .../oostgelre/components/_breadcrumbs.scss    |  29 -
 .../scss/oostgelre/components/_buttons.scss   |  19 -
 .../scss/oostgelre/includes/shame.scss        |  14 -
 .../scss/oostgelre/sections/blocks/map.scss   |   9 -
 .../oostgelre/sections/blocks/products.scss   |   4 -
 .../oostgelre/sections/blocks/profile.scss    |  73 --
 .../oostgelre/sections/blocks/shops_map.scss  |  26 -
 .../sections/blocks/transactions.scss         |  21 -
 .../oostgelre/sections/blocks/voucher.scss    |  12 -
 .../oostgelre/sections/blocks/vouchers.scss   |  23 -
 .../scss/oostgelre/sections/faq.scss          |  18 -
 .../scss/oostgelre/sections/steps.scss        |  24 -
 .../scss/oostgelre/sections/vouchers.scss     |   8 -
 .../potjeswijzer/components/_buttons.scss     |  29 -
 .../scss/potjeswijzer/components/_form.scss   |  11 -
 .../scss/potjeswijzer/components/_label.scss  |  15 -
 .../scss/potjeswijzer/includes/shame.scss     |  51 --
 .../scss/potjeswijzer/layout/_footer.scss     |  76 --
 .../sections/blocks/block-lang-control.scss   |   7 -
 .../scss/schagen/includes/shame.scss          | 168 -----
 .../sections/blocks/block-lang-control.scss   |   7 -
 .../scss/style-webshop-berg_en_dal-vars.scss  |  33 +-
 .../scss/style-webshop-berg_en_dal.scss       |  11 -
 .../scss/style-webshop-berkelland-vars.scss   |  67 +-
 .../scss/style-webshop-berkelland.scss        |  34 -
 .../scss/style-webshop-ede-vars.scss          |  46 +-
 .../forus-webshop/scss/style-webshop-ede.scss |   6 -
 .../scss/style-webshop-eemsdelta-vars.scss    |  39 +-
 .../scss/style-webshop-eemsdelta.scss         |   5 -
 .../style-webshop-geertruidenberg-vars.scss   |  39 +-
 .../scss/style-webshop-geertruidenberg.scss   |   2 -
 .../scss/style-webshop-general-vars.scss      | 152 +++-
 .../scss/style-webshop-general.scss           |   0
 .../style-webshop-goereeoverflakkee-vars.scss | 107 ++-
 .../scss/style-webshop-goereeoverflakkee.scss |  21 -
 .../scss/style-webshop-groningen-vars.scss    |  53 +-
 .../scss/style-webshop-groningen.scss         |  10 -
 ...style-webshop-hartvanwestbrabant-vars.scss |  81 +-
 .../style-webshop-hartvanwestbrabant.scss     |   8 -
 .../scss/style-webshop-heumen-vars.scss       |  39 +-
 .../scss/style-webshop-heumen.scss            |   2 -
 .../scss/style-webshop-kerstpakket-vars.scss  |  34 +-
 .../scss/style-webshop-kerstpakket.scss       |  13 -
 .../style-webshop-midden_drenthe-vars.scss    |  33 +-
 .../scss/style-webshop-midden_drenthe.scss    |  11 -
 .../style-webshop-noordoostpolder-vars.scss   |  67 +-
 .../scss/style-webshop-noordoostpolder.scss   |  19 -
 .../scss/style-webshop-oostgelre-vars.scss    |  78 +-
 .../scss/style-webshop-oostgelre.scss         |  34 -
 .../scss/style-webshop-potjeswijzer-vars.scss |  91 ++-
 .../scss/style-webshop-potjeswijzer.scss      |  13 -
 .../scss/style-webshop-schagen-vars.scss      |  64 +-
 .../scss/style-webshop-schagen.scss           |  10 -
 .../scss/style-webshop-vergoedingen-vars.scss | 166 ++++-
 .../scss/style-webshop-vergoedingen.scss      |  10 -
 .../scss/style-webshop-waalwijk-vars.scss     |  38 +-
 .../scss/style-webshop-waalwijk.scss          |   5 -
 .../scss/style-webshop-wadenheuvel-vars.scss  |  51 +-
 .../scss/style-webshop-wadenheuvel.scss       |   2 -
 .../scss/style-webshop-winterswijk-vars.scss  |  80 +-
 .../scss/style-webshop-winterswijk.scss       |  34 -
 .../scss/vergoedingen/includes/fonts.scss     |  88 ---
 .../scss/vergoedingen/includes/shame.scss     | 149 ----
 .../sections/blocks/block-cms-funds.scss      |  20 -
 .../sections/blocks/block-mobile-menu.scss    |   6 -
 .../blocks/block-navbar-search-results.scss   |  22 -
 .../blocks/block-organization-info.scss       |  43 --
 .../sections/blocks/block-sign_up.scss        |  17 -
 .../scss/waalwijk/includes/shame.scss         |   9 -
 .../sections/blocks/block-lang-control.scss   |   7 -
 .../scss/wadenheuvel/includes/shame.scss      |  13 -
 react/assets/forus-webshop/scss/webshop.scss  | 269 +++----
 .../scss/winterswijk/components/_buttons.scss |  21 -
 .../scss/winterswijk/includes/shame.scss      |  14 -
 .../scss/winterswijk/sections/blocks/map.scss |   5 -
 .../winterswijk/sections/blocks/products.scss |   4 -
 .../winterswijk/sections/blocks/profile.scss  |  73 --
 .../sections/blocks/shops_map.scss            |  26 -
 .../sections/blocks/transactions.scss         |  21 -
 .../winterswijk/sections/blocks/voucher.scss  |  12 -
 .../winterswijk/sections/blocks/vouchers.scss |  23 -
 .../scss/winterswijk/sections/faq.scss        |  18 -
 .../scss/winterswijk/sections/steps.scss      |  24 -
 .../scss/winterswijk/sections/vouchers.scss   |   8 -
 react/src/index-webshop.js                    |   5 +-
 .../block-breadcrumbs/BlockBreadcrumbs.tsx    |  71 +-
 .../block-loader/BlockLoaderBreadcrumbs.tsx   |  10 +-
 .../elements/block-products/BlockProducts.tsx |  37 +-
 .../elements/block-showcase/BlockShowcase.tsx |  17 +-
 .../block-showcase/BlockShowcasePage.tsx      |   2 +-
 .../block-showcase/BlockShowcaseProfile.tsx   |   9 +-
 .../elements/cms-blocks/CmsBlocks.tsx         | 124 ++--
 .../lists/products-list/ProductsList.tsx      |  23 +-
 .../templates/ProvidersListItemList.tsx       |   2 +-
 .../components/elements/sections/Section.tsx  |  46 ++
 .../elements/top-navbar/TopNavbarSearch.tsx   |   8 +-
 .../webshop/components/pages/auth/Auth2FA.tsx |   2 +-
 .../webshop/components/pages/auth/Start.tsx   |   2 +-
 .../pages/cms-pages/Accessibility.tsx         |   3 +-
 .../pages/cms-pages/Explanation.tsx           | 165 +----
 .../components/pages/cms-pages/Privacy.tsx    |   3 +-
 .../pages/cms-pages/ProvidersSignUp.tsx       |   3 +-
 .../pages/cms-pages/TermsAndConditions.tsx    |   3 +-
 .../cms-pages/elements/ExplanationFaq.tsx     | 136 ++++
 .../webshop/components/pages/error/Error.tsx  |   2 +-
 .../pages/funds-activate/FundActivate.tsx     |   4 +-
 .../pages/funds-pre-check/FundsPreCheck.tsx   |   3 +-
 .../pages/funds-request/FundRequest.tsx       |   4 +-
 .../components/pages/funds-show/FundsShow.tsx |  53 +-
 .../pages/funds-show/elements/FundFaq.tsx     |   8 +-
 .../funds-show/elements/FundProductsBlock.tsx |   2 -
 .../webshop/components/pages/home/Home.tsx    |  87 +--
 .../webshop/components/pages/me-app/MeApp.tsx |   1 -
 .../pages/products-show/ProductsShow.tsx      |   6 +-
 .../components/pages/products/Products.tsx    |   7 +-
 .../providers-office/ProvidersOffice.tsx      |   2 -
 .../pages/providers-show/ProvidersShow.tsx    | 286 +++----
 .../components/pages/sitemap/Sitemap.tsx      |   1 -
 .../pages/vouchers-show/VouchersShow.tsx      |  54 +-
 .../components/pages_system/NotFound.tsx      |   1 -
 .../webshop/components/pages_system/WIP.tsx   |   1 -
 react/src/webshop/layout/Layout.tsx           |  31 +-
 .../{SkipLinks.tsx => BlockSkipLinks.tsx}     |   4 +-
 .../webshop/layout/elements/LayoutFooter.tsx  |  43 +-
 354 files changed, 4425 insertions(+), 8045 deletions(-)
 delete mode 100644 react/assets/forus-platform/resources/_platform-common/assets/img/splash-faq.png
 delete mode 100644 react/assets/forus-webshop/resources/_webshop-common/assets/img/splash-faq.png
 delete mode 100644 react/assets/forus-webshop/resources/webshop-groningen/assets/img/splash-faq.png
 delete mode 100644 react/assets/forus-webshop/scss/_common/layout/_footer.scss
 delete mode 100644 react/assets/forus-webshop/scss/_common/sections/blocks/block-show-more.scss
 delete mode 100644 react/assets/forus-webshop/scss/_common/sections/blocks/map.scss
 delete mode 100644 react/assets/forus-webshop/scss/_common/sections/blocks/records_create.scss
 delete mode 100644 react/assets/forus-webshop/scss/_common/sections/blocks/shops_map.scss
 delete mode 100644 react/assets/forus-webshop/scss/_common/sections/blocks/transactions.scss
 delete mode 100644 react/assets/forus-webshop/scss/_common/sections/blocks/voucher.scss
 delete mode 100644 react/assets/forus-webshop/scss/_common/sections/blocks/vouchers.scss
 delete mode 100644 react/assets/forus-webshop/scss/_common/sections/faq.scss
 delete mode 100644 react/assets/forus-webshop/scss/_common/sections/flow.scss
 delete mode 100644 react/assets/forus-webshop/scss/_common/sections/funds-cms.scss
 delete mode 100644 react/assets/forus-webshop/scss/_common/sections/map.scss
 delete mode 100644 react/assets/forus-webshop/scss/_common/sections/products.scss
 delete mode 100644 react/assets/forus-webshop/scss/_common/sections/steps.scss
 delete mode 100644 react/assets/forus-webshop/scss/_common/sections/vouchers.scss
 delete mode 100644 react/assets/forus-webshop/scss/berkelland/components/_buttons.scss
 delete mode 100644 react/assets/forus-webshop/scss/berkelland/includes/shame.scss
 delete mode 100644 react/assets/forus-webshop/scss/berkelland/sections/blocks/map.scss
 delete mode 100644 react/assets/forus-webshop/scss/berkelland/sections/blocks/products.scss
 delete mode 100644 react/assets/forus-webshop/scss/berkelland/sections/blocks/profile.scss
 delete mode 100644 react/assets/forus-webshop/scss/berkelland/sections/blocks/shops_map.scss
 delete mode 100644 react/assets/forus-webshop/scss/berkelland/sections/blocks/transactions.scss
 delete mode 100644 react/assets/forus-webshop/scss/berkelland/sections/blocks/voucher.scss
 delete mode 100644 react/assets/forus-webshop/scss/berkelland/sections/blocks/vouchers.scss
 delete mode 100644 react/assets/forus-webshop/scss/berkelland/sections/faq.scss
 delete mode 100644 react/assets/forus-webshop/scss/berkelland/sections/steps.scss
 delete mode 100644 react/assets/forus-webshop/scss/berkelland/sections/vouchers.scss
 delete mode 100644 react/assets/forus-webshop/scss/ede/includes/shame.scss
 delete mode 100644 react/assets/forus-webshop/scss/ede/sections/blocks/block-provider.scss
 delete mode 100644 react/assets/forus-webshop/scss/eemsdelta/includes/shame.scss
 delete mode 100644 react/assets/forus-webshop/scss/eemsdelta/sections/blocks/block-navbar-search.scss
 delete mode 100644 react/assets/forus-webshop/scss/geertruidenberg/includes/shame.scss
 delete mode 100644 react/assets/forus-webshop/scss/goereeoverflakkee/includes/buttons.scss
 delete mode 100644 react/assets/forus-webshop/scss/goereeoverflakkee/includes/form.scss
 delete mode 100644 react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-breadcrumbs.scss
 delete mode 100644 react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-cms-funds.scss
 delete mode 100644 react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-copyrights.scss
 delete mode 100644 react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-footer.scss
 delete mode 100644 react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-map.scss
 delete mode 100644 react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-markdown.scss
 delete mode 100644 react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-mobile-menu.scss
 delete mode 100644 react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-navbar-search.scss
 delete mode 100644 react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-organizations.scss
 delete mode 100644 react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-pane.scss
 delete mode 100644 react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-product.scss
 delete mode 100644 react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-products-list.scss
 delete mode 100644 react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-products.scss
 delete mode 100644 react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-profile.scss
 delete mode 100644 react/assets/forus-webshop/scss/goereeoverflakkee/sections/faq.scss
 delete mode 100644 react/assets/forus-webshop/scss/goereeoverflakkee/sections/flow.scss
 delete mode 100644 react/assets/forus-webshop/scss/groningen/components/_breadcrumbs.scss
 delete mode 100644 react/assets/forus-webshop/scss/groningen/components/_buttons.scss
 delete mode 100644 react/assets/forus-webshop/scss/groningen/layout/_footer.scss
 delete mode 100644 react/assets/forus-webshop/scss/groningen/sections/blocks/block-navbar-search.scss
 delete mode 100644 react/assets/forus-webshop/scss/groningen/sections/blocks/block-show-more.scss
 delete mode 100644 react/assets/forus-webshop/scss/groningen/sections/blocks/map.scss
 delete mode 100644 react/assets/forus-webshop/scss/groningen/sections/blocks/profile.scss
 delete mode 100644 react/assets/forus-webshop/scss/groningen/sections/blocks/shops_map.scss
 delete mode 100644 react/assets/forus-webshop/scss/groningen/sections/blocks/transactions.scss
 delete mode 100644 react/assets/forus-webshop/scss/groningen/sections/blocks/voucher.scss
 delete mode 100644 react/assets/forus-webshop/scss/groningen/sections/blocks/vouchers.scss
 delete mode 100644 react/assets/forus-webshop/scss/groningen/sections/faq.scss
 delete mode 100644 react/assets/forus-webshop/scss/groningen/sections/steps.scss
 delete mode 100644 react/assets/forus-webshop/scss/groningen/sections/vouchers.scss
 delete mode 100644 react/assets/forus-webshop/scss/hartvanwestbrabant/components/_buttons.scss
 delete mode 100644 react/assets/forus-webshop/scss/hartvanwestbrabant/includes/shame.scss
 delete mode 100644 react/assets/forus-webshop/scss/hartvanwestbrabant/sections/blocks/block-lang-control.scss
 delete mode 100644 react/assets/forus-webshop/scss/heumen/includes/shame.scss
 create mode 100644 react/assets/forus-webshop/scss/includes/blocks/_block.scss
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-2fa-restriction.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-about-me_app.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-accessibility.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-action-card.scss (99%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-announcement.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-app_download.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-app_links.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-auth-2fa.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-auth-widget.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-banner.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-bookmark-toggle.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-card-table.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-cms-funds.scss (86%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-cms.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-cookie-banner.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-data-list.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-empty.scss (90%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-error-page.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-exception.scss (100%)
 create mode 100644 react/assets/forus-webshop/scss/includes/blocks/block-faq.scss
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-file-uploader.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-fund-pre-check-result.scss (97%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-fund-pre-check.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-fund-request.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-fund-requests.scss (96%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-fund.scss (97%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-funds-list.scss (96%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-info-box.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-key-value-list.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-label-tabs.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-lang-control.scss (98%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-loader.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-map-office-card.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-map_card.scss (96%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-markdown.scss (85%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-mobile-menu.scss (91%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-navbar-desktop.scss (99%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-navbar-mobile.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-navbar-search.scss (98%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-notifications-table.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-office.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-offices.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-organization-info.scss (57%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-organizations.scss (97%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-page-loading-bar.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-pane.scss (88%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-payouts.scss (96%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-pincode.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-pre-check-banner.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-preferences.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-products-list.scss (87%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-products.scss (83%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-profile.scss (64%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-provider.scss (87%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-push-notifications.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-qr-code.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-reimbursement.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-reimbursements.scss (99%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-reservation-address.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-reservation.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-reservations.scss (99%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-schedule-list.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-search-results.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-sessions.scss (100%)
 create mode 100644 react/assets/forus-webshop/scss/includes/blocks/block-show-more.scss
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-showcase.scss (99%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-sign_up-help.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-sign_up-provider.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-sign_up.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-sitemap.scss (92%)
 rename react/assets/forus-webshop/scss/{_common/components/skiplinks.scss => includes/blocks/block-skip-links.scss} (98%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-user-emails.scss (94%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-voucher-records.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/block-warning.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/cards.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/fund-add-records.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/fund_criteria.scss (100%)
 create mode 100644 react/assets/forus-webshop/scss/includes/blocks/map.scss
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/phone-number.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/product.scss (94%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/record_categories.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/records.scss (100%)
 create mode 100644 react/assets/forus-webshop/scss/includes/blocks/transactions.scss
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/validations.scss (100%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/validators.scss (96%)
 rename react/assets/forus-webshop/scss/{_common/sections => includes}/blocks/voucher-product.scss (100%)
 create mode 100644 react/assets/forus-webshop/scss/includes/blocks/voucher.scss
 create mode 100644 react/assets/forus-webshop/scss/includes/blocks/vouchers.scss
 rename react/assets/forus-webshop/scss/{_common => includes}/components/_breadcrumbs.scss (100%)
 rename react/assets/forus-webshop/scss/{_common => includes}/components/_buttons.scss (75%)
 rename react/assets/forus-webshop/scss/{_common => includes}/components/_carrousel.scss (100%)
 rename react/assets/forus-webshop/scss/{_common => includes}/components/_dropdown.scss (100%)
 rename react/assets/forus-webshop/scss/{_common => includes}/components/_form.scss (98%)
 rename react/assets/forus-webshop/scss/{_common => includes}/components/_label.scss (82%)
 rename react/assets/forus-webshop/scss/{_common => includes}/components/_map-card.scss (100%)
 rename react/assets/forus-webshop/scss/{_common => includes}/components/_modals.scss (100%)
 rename react/assets/forus-webshop/scss/{_common => includes}/components/_printables.scss (100%)
 rename react/assets/forus-webshop/scss/{_common => includes}/components/_tooltip.scss (100%)
 rename react/assets/forus-webshop/scss/{_common => includes}/components/_triangle.scss (100%)
 rename react/assets/forus-webshop/scss/{_common => includes}/components/_ui-controls.scss (100%)
 rename react/assets/forus-webshop/scss/{_common => includes}/components/button-groups.scss (100%)
 rename react/assets/forus-webshop/scss/{_common => includes}/components/card.scss (98%)
 rename react/assets/forus-webshop/scss/{_common => includes}/components/flex-grid.scss (100%)
 rename react/assets/forus-webshop/scss/{_common => includes}/components/frame-director.scss (100%)
 rename react/assets/forus-webshop/scss/{_common => includes}/components/rate.scss (100%)
 rename react/assets/forus-webshop/scss/{_common => includes}/components/table-pagination.scss (100%)
 rename react/assets/forus-webshop/scss/{_common => includes}/components/table.scss (100%)
 rename react/assets/forus-webshop/scss/{_common => includes}/includes/common.scss (99%)
 rename react/assets/forus-webshop/scss/{_common => includes}/includes/helpers.scss (100%)
 rename react/assets/forus-webshop/scss/{_common => includes}/includes/placeholders.scss (100%)
 rename react/assets/forus-webshop/scss/{_common => includes}/includes/resetter.scss (61%)
 rename react/assets/forus-webshop/scss/{_common => includes}/includes/shame.scss (79%)
 rename react/assets/forus-webshop/scss/{_common => includes}/includes/third-party.scss (100%)
 rename react/assets/forus-webshop/scss/{_common => includes}/includes/typgography.scss (100%)
 create mode 100644 react/assets/forus-webshop/scss/includes/layout/_footer.scss
 rename react/assets/forus-webshop/scss/{_common => includes}/layout/_grid.scss (100%)
 rename react/assets/forus-webshop/scss/{_common => includes}/layout/_header.scss (72%)
 rename react/assets/forus-webshop/scss/{_common => includes}/modals/modal-2fa-setup.scss (100%)
 rename react/assets/forus-webshop/scss/{_common => includes}/modals/modal-file-preview.scss (100%)
 rename react/assets/forus-webshop/scss/{_common => includes}/modals/modal-fund-help.scss (100%)
 rename react/assets/forus-webshop/scss/{_common => includes}/modals/modal-notification.scss (100%)
 rename react/assets/forus-webshop/scss/{_common => includes}/modals/modal-open-in-me.scss (100%)
 rename react/assets/forus-webshop/scss/{_common => includes}/modals/modal-photo-cropper.scss (100%)
 rename react/assets/forus-webshop/scss/{_common => includes}/modals/modal-physical-cards.scss (100%)
 rename react/assets/forus-webshop/scss/{_common => includes}/modals/modal-pin-code.scss (100%)
 rename react/assets/forus-webshop/scss/{_common => includes}/modals/modal-product-reserve.scss (100%)
 create mode 100644 react/assets/forus-webshop/scss/includes/pages/voucher.scss
 create mode 100644 react/assets/forus-webshop/scss/includes/sections/_section.scss
 create mode 100644 react/assets/forus-webshop/scss/includes/sections/section-breadcrumbs.scss
 create mode 100644 react/assets/forus-webshop/scss/includes/sections/section-cms.scss
 create mode 100644 react/assets/forus-webshop/scss/includes/sections/section-faq.scss
 create mode 100644 react/assets/forus-webshop/scss/includes/sections/section-footer.scss
 create mode 100644 react/assets/forus-webshop/scss/includes/sections/section-map.scss
 create mode 100644 react/assets/forus-webshop/scss/includes/sections/section-products.scss
 create mode 100644 react/assets/forus-webshop/scss/includes/sections/section-profile.scss
 create mode 100644 react/assets/forus-webshop/scss/includes/sections/section-voucher-details.scss
 delete mode 100644 react/assets/forus-webshop/scss/kerstpakket/components/_buttons.scss
 delete mode 100644 react/assets/forus-webshop/scss/kerstpakket/layout/_footer.scss
 delete mode 100644 react/assets/forus-webshop/scss/kerstpakket/sections/blocks/products.scss
 delete mode 100644 react/assets/forus-webshop/scss/kerstpakket/sections/faq.scss
 delete mode 100644 react/assets/forus-webshop/scss/kerstpakket/sections/map.scss
 delete mode 100644 react/assets/forus-webshop/scss/kerstpakket/sections/steps.scss
 delete mode 100644 react/assets/forus-webshop/scss/noordoostpolder/components/_breadcrumbs.scss
 delete mode 100644 react/assets/forus-webshop/scss/noordoostpolder/components/_label.scss
 delete mode 100644 react/assets/forus-webshop/scss/noordoostpolder/includes/shame.scss
 delete mode 100644 react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/map.scss
 delete mode 100644 react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/products.scss
 delete mode 100644 react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/profile.scss
 delete mode 100644 react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/shops_map.scss
 delete mode 100644 react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/transactions.scss
 delete mode 100644 react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/voucher.scss
 delete mode 100644 react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/vouchers.scss
 delete mode 100644 react/assets/forus-webshop/scss/noordoostpolder/sections/faq.scss
 delete mode 100644 react/assets/forus-webshop/scss/noordoostpolder/sections/steps.scss
 delete mode 100644 react/assets/forus-webshop/scss/noordoostpolder/sections/vouchers.scss
 delete mode 100644 react/assets/forus-webshop/scss/oostgelre/components/_breadcrumbs.scss
 delete mode 100644 react/assets/forus-webshop/scss/oostgelre/components/_buttons.scss
 delete mode 100644 react/assets/forus-webshop/scss/oostgelre/includes/shame.scss
 delete mode 100644 react/assets/forus-webshop/scss/oostgelre/sections/blocks/map.scss
 delete mode 100644 react/assets/forus-webshop/scss/oostgelre/sections/blocks/products.scss
 delete mode 100644 react/assets/forus-webshop/scss/oostgelre/sections/blocks/profile.scss
 delete mode 100644 react/assets/forus-webshop/scss/oostgelre/sections/blocks/shops_map.scss
 delete mode 100644 react/assets/forus-webshop/scss/oostgelre/sections/blocks/transactions.scss
 delete mode 100644 react/assets/forus-webshop/scss/oostgelre/sections/blocks/voucher.scss
 delete mode 100644 react/assets/forus-webshop/scss/oostgelre/sections/blocks/vouchers.scss
 delete mode 100644 react/assets/forus-webshop/scss/oostgelre/sections/faq.scss
 delete mode 100644 react/assets/forus-webshop/scss/oostgelre/sections/steps.scss
 delete mode 100644 react/assets/forus-webshop/scss/oostgelre/sections/vouchers.scss
 delete mode 100644 react/assets/forus-webshop/scss/potjeswijzer/components/_buttons.scss
 delete mode 100644 react/assets/forus-webshop/scss/potjeswijzer/components/_form.scss
 delete mode 100644 react/assets/forus-webshop/scss/potjeswijzer/components/_label.scss
 delete mode 100644 react/assets/forus-webshop/scss/potjeswijzer/includes/shame.scss
 delete mode 100644 react/assets/forus-webshop/scss/potjeswijzer/layout/_footer.scss
 delete mode 100644 react/assets/forus-webshop/scss/potjeswijzer/sections/blocks/block-lang-control.scss
 delete mode 100644 react/assets/forus-webshop/scss/schagen/includes/shame.scss
 delete mode 100644 react/assets/forus-webshop/scss/schagen/sections/blocks/block-lang-control.scss
 delete mode 100644 react/assets/forus-webshop/scss/style-webshop-berg_en_dal.scss
 delete mode 100644 react/assets/forus-webshop/scss/style-webshop-berkelland.scss
 delete mode 100644 react/assets/forus-webshop/scss/style-webshop-ede.scss
 delete mode 100644 react/assets/forus-webshop/scss/style-webshop-eemsdelta.scss
 delete mode 100644 react/assets/forus-webshop/scss/style-webshop-geertruidenberg.scss
 delete mode 100644 react/assets/forus-webshop/scss/style-webshop-general.scss
 delete mode 100644 react/assets/forus-webshop/scss/style-webshop-goereeoverflakkee.scss
 delete mode 100644 react/assets/forus-webshop/scss/style-webshop-groningen.scss
 delete mode 100644 react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant.scss
 delete mode 100644 react/assets/forus-webshop/scss/style-webshop-heumen.scss
 delete mode 100644 react/assets/forus-webshop/scss/style-webshop-kerstpakket.scss
 delete mode 100644 react/assets/forus-webshop/scss/style-webshop-midden_drenthe.scss
 delete mode 100644 react/assets/forus-webshop/scss/style-webshop-noordoostpolder.scss
 delete mode 100644 react/assets/forus-webshop/scss/style-webshop-oostgelre.scss
 delete mode 100644 react/assets/forus-webshop/scss/style-webshop-potjeswijzer.scss
 delete mode 100644 react/assets/forus-webshop/scss/style-webshop-schagen.scss
 delete mode 100644 react/assets/forus-webshop/scss/style-webshop-vergoedingen.scss
 delete mode 100644 react/assets/forus-webshop/scss/style-webshop-waalwijk.scss
 delete mode 100644 react/assets/forus-webshop/scss/style-webshop-wadenheuvel.scss
 delete mode 100644 react/assets/forus-webshop/scss/style-webshop-winterswijk.scss
 delete mode 100644 react/assets/forus-webshop/scss/vergoedingen/includes/fonts.scss
 delete mode 100644 react/assets/forus-webshop/scss/vergoedingen/includes/shame.scss
 delete mode 100644 react/assets/forus-webshop/scss/vergoedingen/sections/blocks/block-cms-funds.scss
 delete mode 100644 react/assets/forus-webshop/scss/vergoedingen/sections/blocks/block-mobile-menu.scss
 delete mode 100644 react/assets/forus-webshop/scss/vergoedingen/sections/blocks/block-navbar-search-results.scss
 delete mode 100644 react/assets/forus-webshop/scss/vergoedingen/sections/blocks/block-organization-info.scss
 delete mode 100644 react/assets/forus-webshop/scss/vergoedingen/sections/blocks/block-sign_up.scss
 delete mode 100644 react/assets/forus-webshop/scss/waalwijk/includes/shame.scss
 delete mode 100644 react/assets/forus-webshop/scss/waalwijk/sections/blocks/block-lang-control.scss
 delete mode 100644 react/assets/forus-webshop/scss/wadenheuvel/includes/shame.scss
 delete mode 100644 react/assets/forus-webshop/scss/winterswijk/components/_buttons.scss
 delete mode 100644 react/assets/forus-webshop/scss/winterswijk/includes/shame.scss
 delete mode 100644 react/assets/forus-webshop/scss/winterswijk/sections/blocks/map.scss
 delete mode 100644 react/assets/forus-webshop/scss/winterswijk/sections/blocks/products.scss
 delete mode 100644 react/assets/forus-webshop/scss/winterswijk/sections/blocks/profile.scss
 delete mode 100644 react/assets/forus-webshop/scss/winterswijk/sections/blocks/shops_map.scss
 delete mode 100644 react/assets/forus-webshop/scss/winterswijk/sections/blocks/transactions.scss
 delete mode 100644 react/assets/forus-webshop/scss/winterswijk/sections/blocks/voucher.scss
 delete mode 100644 react/assets/forus-webshop/scss/winterswijk/sections/blocks/vouchers.scss
 delete mode 100644 react/assets/forus-webshop/scss/winterswijk/sections/faq.scss
 delete mode 100644 react/assets/forus-webshop/scss/winterswijk/sections/steps.scss
 delete mode 100644 react/assets/forus-webshop/scss/winterswijk/sections/vouchers.scss
 create mode 100644 react/src/webshop/components/elements/sections/Section.tsx
 create mode 100644 react/src/webshop/components/pages/cms-pages/elements/ExplanationFaq.tsx
 rename react/src/webshop/layout/elements/{SkipLinks.tsx => BlockSkipLinks.tsx} (85%)

diff --git a/react/assets/forus-platform/resources/_platform-common/assets/img/splash-faq.png b/react/assets/forus-platform/resources/_platform-common/assets/img/splash-faq.png
deleted file mode 100644
index bceb2e3f79c4a10d392069867e69d7e3940a3f4a..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 37253
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
b(9GEF|6ibqpQH*DK$DeHkSuum_QU@Htjntq

diff --git a/react/assets/forus-platform/scss/_common/blocks/block-markdown.scss b/react/assets/forus-platform/scss/_common/blocks/block-markdown.scss
index 5c353dc82..f1633a256 100644
--- a/react/assets/forus-platform/scss/_common/blocks/block-markdown.scss
+++ b/react/assets/forus-platform/scss/_common/blocks/block-markdown.scss
@@ -26,6 +26,15 @@
         text-align: left;
     }
 
+    h1,
+    h2,
+    h3,
+    h4 {
+        &:first-child {
+            margin-top: 0;
+        }
+    }
+
     p {
         margin-bottom: 15px;
         text-align: left;
diff --git a/react/assets/forus-platform/scss/_common/dashboard.scss b/react/assets/forus-platform/scss/_common/dashboard.scss
index 17521b17a..fe93e0082 100644
--- a/react/assets/forus-platform/scss/_common/dashboard.scss
+++ b/react/assets/forus-platform/scss/_common/dashboard.scss
@@ -37,12 +37,12 @@
     @import 'blocks/block-sessions';
     @import 'blocks/block-breadcrumbs';
     @import 'blocks/block-notifications';
-    @import '../../../forus-webshop/scss/_common/components/ui-controls';
+    @import '../../../forus-webshop/scss/includes/components/ui-controls';
 }
 
-@import '../../../forus-webshop/scss/_common/components/table-pagination';
-@import '../../../forus-webshop/scss/_common/sections/blocks/block-sign_up';
-@import '../../../forus-webshop/scss/_common/sections/blocks/block-exception';
+@import '../../../forus-webshop/scss/includes/components/table-pagination';
+@import '../../../forus-webshop/scss/includes/blocks/block-sign_up';
+@import '../../../forus-webshop/scss/includes/blocks/block-exception';
 
 .block {
     @import 'blocks/block-fund_types';
diff --git a/react/assets/forus-platform/scss/_common/landing.scss b/react/assets/forus-platform/scss/_common/landing.scss
index 997ee313a..4dfb869c2 100644
--- a/react/assets/forus-platform/scss/_common/landing.scss
+++ b/react/assets/forus-platform/scss/_common/landing.scss
@@ -1,8 +1,3 @@
-ui-view {
-    flex: 1 0 auto;
-    min-height: 85vh;
-}
-
 .show-sm {
     display: none !important;
 }
@@ -488,385 +483,6 @@ ui-view {
     }
 }
 
-.section {
-    .section-title {
-        font: 700 40px/60px var(--base-font-landing);
-        margin: 40px 0 40px;
-    }
-
-    &.section-faq {
-        position: relative;
-        margin: 0 0 40px;
-
-        .section-title {
-            color: #00122a;
-            font: 700 40px/60px var(--base-font-landing);
-            margin: 40px 0 40px;
-            text-align: center;
-            z-index: 2;
-        }
-
-        .section-splash {
-            position: relative;
-            right: 0;
-            width: 100%;
-            background: none 100% 50%;
-            background-size: auto 100%;
-            transform: translate(0, -50%);
-            z-index: 0;
-        }
-
-        .faq {
-            width: 820px;
-            max-width: 100%;
-            margin: 0 auto;
-
-            .faq-item {
-                background: #fff;
-                border: 1px solid #d2e6ff;
-                border-radius: 4px;
-                margin-bottom: 10px;
-                position: relative;
-                box-shadow: 5px 5px 25px rgba(#000000, 0.1);
-                transition: 0.4s;
-
-                .faq-item-header {
-                    padding: 15px 45px 15px 30px;
-                    font: 500 18px var(--base-font-landing);
-                    color: #00122a;
-                    position: relative;
-                    transition: 0.4s;
-                    cursor: pointer;
-
-                    .faq-item-chevron-up,
-                    .faq-item-chevron-down {
-                        position: absolute;
-                        right: 15px;
-                        top: 50%;
-                        transform: translate(0, -50%);
-                        color: #9ca6af;
-                        font-size: 28px;
-                        transition: 0.4s;
-                        display: none;
-                    }
-
-                    .faq-item-chevron-down {
-                        display: block;
-                    }
-
-                    &:hover {
-                        .faq-item-chevron-up,
-                        .faq-item-chevron-down {
-                            color: #017f96;
-                        }
-                    }
-                }
-
-                .faq-item-content {
-                    font: 400 16px var(--base-font-landing);
-                    padding: 0 30px 20px;
-                    color: #646f79;
-                    display: none;
-                    cursor: default;
-                }
-
-                &.active {
-                    .faq-item-header {
-                        .faq-item-chevron-up,
-                        .faq-item-chevron-down {
-                            display: none;
-                        }
-
-                        .faq-item-chevron-up {
-                            display: block;
-                        }
-                    }
-
-                    .faq-item-content {
-                        display: block;
-                    }
-                }
-
-                &:hover:not(.active) {
-                    box-shadow: 5px 15px 45px rgba(#000000, 0.15);
-
-                    .faq-item-header {
-                        color: #017f96;
-
-                        .faq-item-chevron-up,
-                        .faq-item-chevron-down {
-                            color: #017f96;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    &.section-flow {
-        margin-bottom: 100px;
-
-        .section-title {
-            text-align: center;
-
-            @media screen and (min-width: 1024px) {
-                margin: 30px 0 10px;
-            }
-        }
-
-        .section-description {
-            font: 400 18px/1.5em var(--base-font-landing);
-            color: #646f79;
-            text-align: center;
-            padding: 0 50px;
-            margin-bottom: 10px;
-        }
-
-        .section-scheme {
-            display: block;
-            max-width: 100%;
-            margin: 0 auto;
-        }
-
-        .scheme {
-            position: relative;
-            max-width: 100%;
-            width: 1400px;
-            margin: 0 auto;
-
-            .scheme-img {
-                display: block;
-                margin: 0 auto 40px;
-                max-width: 100%;
-            }
-
-            .scheme-points-preset {
-                @include fill_parent();
-            }
-
-            .scheme-point {
-                .scheme-point-text {
-                    position: absolute;
-                    left: 12.15%;
-                    top: 11.55%;
-                    width: 30%;
-
-                    h4 {
-                        color: #00122a;
-                        font: 500 28px/38px var(--base-font-landing);
-                        margin: 0 0 10px;
-                    }
-
-                    p {
-                        color: #646f79;
-                        font: 400 15px/24px var(--base-font-landing);
-                        margin: 0 0 10px;
-                    }
-                }
-
-                .scheme-point-image {
-                    display: block;
-                    position: absolute;
-                    right: 0;
-                    top: 0;
-                    width: 55.5%;
-                    padding: 40px;
-                    border-radius: 1000px;
-                    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 100%);
-                }
-
-                &:nth-child(2) {
-                    .scheme-point-text {
-                        top: 35.6%;
-                        left: 57.4%;
-                    }
-
-                    .scheme-point-image {
-                        left: 0;
-                        top: 24%;
-                    }
-                }
-
-                &:nth-child(3) {
-                    .scheme-point-text {
-                        top: 59.1%;
-                    }
-
-                    .scheme-point-image {
-                        top: 47.4%;
-                    }
-                }
-
-                &:nth-child(4) {
-                    .scheme-point-text {
-                        top: 82.6%;
-                        left: 57.4%;
-                    }
-
-                    .scheme-point-image {
-                        left: 0;
-                        top: auto;
-                        bottom: 0.1%;
-                    }
-                }
-            }
-        }
-    }
-
-    &.section-blogs {
-        margin-bottom: 30px;
-    }
-
-    &.section-contact_form {
-        margin-bottom: 30px;
-        position: relative;
-
-        &:before,
-        &:after {
-            content: '';
-            display: block;
-            position: absolute;
-            top: 0;
-            width: 50%;
-            height: 100%;
-        }
-
-        &:before {
-            left: 0;
-            background: assetUrl('img/landing/splash-left.png') no-repeat;
-            background-size: 100% 100%;
-            background-origin: 0 0;
-        }
-
-        &:after {
-            right: 0;
-            background: assetUrl('img/landing/sprite-clouds.png') no-repeat;
-            background-size: 100% auto;
-            background-origin: 0 0;
-        }
-    }
-
-    &.section-footer {
-        padding: 40px 0 0;
-    }
-
-    @media screen and (max-width: 1500px) {
-        .section-title {
-            margin: 0 0 20px;
-            font: 700 30px/40px var(--base-font-landing);
-        }
-    }
-
-    @media screen and (max-width: 1000px) {
-        .section-title {
-            font: 700 20px/30px var(--base-font-landing);
-            margin: 0 0 20px;
-        }
-
-        &.section-contact_form {
-            .wrapper {
-                padding: 0;
-            }
-
-            &:before {
-                background: none;
-            }
-        }
-
-        &.section-footer {
-            padding: 0;
-        }
-
-        &.section-faq {
-            margin-bottom: 60px;
-
-            .section-title {
-                font: 700 24px/36px var(--base-font-landing);
-                margin: 0 0 30px;
-            }
-
-            .section-splash {
-                height: 300px;
-            }
-
-            .faq {
-                .faq-item {
-                    .faq-item-header {
-                        font: 500 14px var(--base-font-landing);
-                    }
-
-                    .faq-item-content {
-                        font: 400 14px var(--base-font-landing);
-                    }
-                }
-            }
-        }
-
-        &.section-flow {
-            margin: 0 0 30px;
-
-            .section-title {
-                padding: 0;
-                font: 700 20px/28px var(--base-font-landing);
-                margin-bottom: 15px;
-            }
-
-            .section-description {
-                padding: 0;
-                font: 400 14px/22px var(--base-font-landing);
-                margin: 0 0 30px;
-                color: #353b46;
-            }
-
-            .scheme {
-                margin: 0;
-            }
-
-            &.responsive {
-                display: block;
-
-                .scheme {
-                    .scheme-img {
-                        display: none;
-                    }
-
-                    .scheme-points-preset {
-                        position: initial;
-                    }
-
-                    .scheme-point {
-                        width: 100%;
-                        text-align: center;
-                        margin: 0 0 30px;
-
-                        .scheme-point-text {
-                            position: initial;
-                            width: 100%;
-                        }
-
-                        .scheme-point-image {
-                            position: initial;
-                            width: 100%;
-                            padding: 0;
-                            border-radius: 0;
-                            margin-bottom: -30px;
-                            margin-top: -30px;
-                        }
-
-                        h4 {
-                            font: 600 16px/28px var(--base-font-landing);
-                        }
-
-                        p {
-                            font: 400 13px/20px var(--base-font-landing);
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
 .block {
     &.block-show-more {
         text-align: center;
@@ -1078,12 +694,6 @@ ui-view {
             margin-bottom: 30px;
         }
 
-        .footer-label {
-            color: #282b39;
-            font: 700 18px var(--base-font-landing);
-            margin-bottom: 25px;
-        }
-
         .footer-nav {
             .footer-nav-item {
                 display: block;
@@ -1105,30 +715,6 @@ ui-view {
             }
         }
 
-        .footer-schedule {
-            width: 100%;
-            margin-bottom: 10px;
-            @include cf();
-
-            .schedule-label {
-                color: #646f79;
-                font: 400 13px/24px var(--base-font-landing);
-                float: left;
-                width: 35%;
-            }
-
-            .schedule-value {
-                color: #00122a;
-                font: 700 13px/24px var(--base-font-landing);
-                float: left;
-                width: 65%;
-            }
-
-            &:last-child {
-                margin-bottom: 0;
-            }
-        }
-
         .footer-subscribe {
             position: relative;
 
@@ -1238,22 +824,6 @@ ui-view {
                 }
             }
         }
-
-        .developed {
-            float: right;
-            font: inherit;
-            color: #282b39;
-
-            a {
-                font: inherit;
-                color: #004195;
-                transition: 0.4s;
-
-                &:hover {
-                    color: #2987fd;
-                }
-            }
-        }
     }
 
     &.block-cards {
@@ -1549,24 +1119,6 @@ ui-view {
                 margin: 0 0 20px;
             }
 
-            .footer-label {
-                padding: 20px 0 0;
-                margin: 0 0 20px;
-                font: 700 15px/24px var(--base-font-landing);
-            }
-
-            .footer-schedule {
-                .schedule-label {
-                    font: 400 12px/24px var(--base-font-landing);
-                    width: 30%;
-                }
-
-                .schedule-value {
-                    width: 70%;
-                    font: 700 12px/24px var(--base-font-landing);
-                }
-            }
-
             .footer-subscribe {
                 .button {
                     height: 50px;
diff --git a/react/assets/forus-webshop/resources/_webshop-common/assets/img/splash-faq.png b/react/assets/forus-webshop/resources/_webshop-common/assets/img/splash-faq.png
deleted file mode 100644
index 93fabcf2d3048d14e55110e29e10e16ba353c824..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 37253
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
a%-HS!U*MEnw+R$Lla*AED0uev!~X!tG^^AA

diff --git a/react/assets/forus-webshop/resources/webshop-groningen/assets/img/splash-faq.png b/react/assets/forus-webshop/resources/webshop-groningen/assets/img/splash-faq.png
deleted file mode 100644
index cc7d34007504809c35a6f148ee8b6835ca1d11f9..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 42399
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%0ANvQQjuCi0ZM(Z-^XVW`3V_pMp)W}q6OEj^
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
Q7Z5<)To3QVoCD7N2QO_>e*gdg

diff --git a/react/assets/forus-webshop/scss/_common/layout/_footer.scss b/react/assets/forus-webshop/scss/_common/layout/_footer.scss
deleted file mode 100644
index 01bced04c..000000000
--- a/react/assets/forus-webshop/scss/_common/layout/_footer.scss
+++ /dev/null
@@ -1,392 +0,0 @@
-.section {
-    &.section-footer {
-        padding: 40px 0 0;
-        flex-shrink: 0;
-        z-index: 1;
-    }
-
-    &.section-footer {
-        padding: 30px 0 0;
-        background-color: var(--footer_background_color);
-        margin-top: 0;
-        color: var(--footer_color);
-    }
-
-    @media screen and (max-width: 1000px) {
-        &.section-footer {
-            padding: 0;
-        }
-    }
-}
-
-.block {
-    &.block-copyrights {
-        width: 100%;
-        border-top: 1px solid var(--footer-copyright-border-color);
-        padding: 40px 0;
-        text-align: center;
-        font: 400 14px/30px var(--base-font);
-        background: var(--footer-copyright-background);
-
-        .wrapper {
-            height: 30px;
-            @include cf();
-        }
-
-        .copyrights {
-            float: left;
-            font: inherit;
-            color: #282b39;
-        }
-
-        .links {
-            display: flex;
-            justify-content: center;
-            flex-direction: row;
-
-            .link-item {
-                position: relative;
-                display: inline-flex;
-                padding: 0 30px;
-
-                &::after {
-                    content: "";
-                    height: 30px;
-                    border-left: 1px solid var(--border-color);
-                    display: block;
-                    position: absolute;
-                    right: 0;
-                    top: 50%;
-                    transform: translate(0, -50%);
-
-                    &:last-child {
-                        margin-right: 0;
-                    }
-                }
-
-                &:last-child {
-                    a {
-                        margin-right: 0;
-                    }
-
-                    &::after {
-                        display: none;
-                    }
-                }
-            }
-
-            a {
-                float: left;
-                font: inherit;
-                color: var(--footer-copyright-color);
-                display: block;
-                text-decoration: underline;
-                
-                &:hover {
-                    text-decoration: none;
-                }
-            }
-        }
-
-        .developed {
-            float: right;
-            font: inherit;
-            color: #282b39;
-
-            a {
-                font: inherit;
-                color: var(--footer_color_link);
-                transition: color .4s;
-
-                &:hover {
-                    color: var(--footer_color_link_hover);
-                }
-            }
-        }
-
-        @media screen and (max-width: 1000px) {
-            padding: 20px 0;
-            text-align: center;
-            height: auto;
-
-            .wrapper {
-                height: auto;
-            }
-
-            .copyrights {
-                width: 100%;
-            }
-
-            .links {
-                width: 100%;
-                flex-direction: column;
-
-                .link-item {
-                    a {
-                        width: 100%;
-                        margin: 0;
-                        padding: 0;
-                    }
-    
-                    &:after {
-                        content: none;
-                    }
-                }
-
-                .link-separator {
-                    display: none;
-                }
-            }
-        }
-    }
-
-    &.block-footer {
-        margin-bottom: 40px;
-
-        .footer-logo {
-            width: 140px;
-            max-width: 100%;
-            margin-bottom: 30px;
-        }
-
-        .footer-label {
-            color: #282b39;
-            font: 700 18px var(--base-font);
-            margin-bottom: 25px;
-        }
-
-        .block.block-markdown {
-            h1, h2, h3, h4 {
-                color: var(--footer_color);
-            }
-
-            h3 {
-                margin: 0.9em 0 0.9em 0;
-            }
-        }
-
-        .footer-social-medias {
-            .footer-social-media-title {
-                margin-top: 25px;
-                margin-bottom: 15px;
-                font: 600 16px/24px var(--base-font);
-                color: var(--footer_color);
-            }
-
-            .footer-social-media-icon {
-                width: 36px;
-                height: 36px;
-                font-size: 21px;
-                line-height: 34px;
-                text-align: center;
-                border-radius: var(--footer_social_border_radius);
-                margin-right: 10px;
-                color: var(--footer_social_color);
-                background: var(--footer_social_background);
-                position: relative;
-
-                &:after {
-                    content: '';
-                    @include fill_parent();
-                    border-radius: inherit;
-                    border: 1px solid var(--footer_social_border_color);
-                    opacity: .25;
-                }
-
-                &:last-child {
-                    margin-right: 0;
-                }
-            }
-        }
-
-        .footer-nav {
-            .footer-nav-item {
-                display: block;
-                margin-bottom: 10px;
-
-                svg {
-                    height: 20px;
-                    width: 23px;
-                    margin-right: 5px;
-                    margin-bottom: -3px;
-                    
-                    path {
-                        fill: var(--footer_color_link);
-                    }
-                }
-
-                a {
-                    color: var(--footer_color_link);
-                    font: 400 16px/1.5em var(--base-font);
-                    transition: color .4s;
-                }
-
-                &:last-child {
-                    margin-bottom: 0;
-                }
-            }
-        }
-
-        .footer-sponsor-logo {
-            display: flex;
-
-            .footer-sponsor-logo-mg {
-                width: 180px;
-                display: block;
-            }
-        }
-
-        .footer-schedule {
-            width: 100%;
-            margin-bottom: 10px;
-            @include cf();
-
-            .schedule-title {
-                color: #00122a;
-                font: 700 14px/24px var(--base-font);
-                margin-top: 10px;
-            }
-
-            .schedule-label {
-                color: #646f79;
-                font: 400 13px/24px var(--base-font);
-                float: left;
-                width: 35%;
-            }
-
-            .schedule-value {
-                color: #00122a;
-                font: 700 13px/24px var(--base-font);
-                float: left;
-                width: 65%;
-            }
-
-            &:last-child {
-                margin-bottom: 0;
-            }
-        }
-
-        @media screen and (max-width: 1000px) {
-            .block-markdown {
-                text-align: center;
-
-                * {
-                    text-align: inherit;
-                }
-            }
-
-            .footer-sponsor-logo, .footer-social-media-icons {
-                justify-content: center;
-            }
-
-            .footer-social-media-title {
-                text-align: center;
-            }
-        }
-    }
-
-    @media screen and (max-width: 1700px) {
-        &.block-footer {
-            .footer-label {
-                font: 400 16px var(--base-font);
-            }
-
-            .footer-schedule {
-                .schedule-label {
-                    font: 400 16px/24px var(--base-font);
-                }
-
-                .schedule-value {
-                    font: 400 16px/24px var(--base-font);
-                }
-            }
-
-            .footer-nav {
-                .footer-nav-item {
-                    a {
-                        font: 400 16px/24px var(--base-font);
-                    }
-                }
-            }
-        }
-    }
-
-    @media screen and (max-width: 1000px) {
-        &.block-copyrights {
-            padding: 20px 0;
-            text-align: center;
-            height: auto;
-
-            .wrapper {
-                height: auto;
-            }
-
-            .copyrights {
-                width: 100%;
-            }
-
-            .links {
-                width: 100%;
-
-                a {
-                    width: 100%;
-                    margin: 0;
-                    padding: 0;
-                }
-
-                .link-separator {
-                    display: none;
-                }
-           }
-        }
-
-        &.block-footer {
-            margin: 0 0 30px;
-
-            .footer-logo {
-                margin: 0 0 20px;
-                margin: 0 auto 40px;
-                display: block;
-            }
-
-            .footer-label {
-                text-align: center;
-                padding: 0;
-                margin: 0 0 5px;
-                font: 700 16px/30px var(--base-font);
-            }
-
-            .footer-schedule {
-                text-align: center;
-
-                .schedule-label {
-                    font: 400 10px/16px var(--base-font);
-                    color: #646f79;
-                    width: 100%;
-                }
-
-                .schedule-value {
-                    width: 100%;
-                    color: #00122a;
-                    font: 700 12px/18px var(--base-font);
-                    margin: 0 0 0px;
-                }
-
-                &:last-child {
-                    margin: 0 0 35px;
-                }
-            }
-
-            .footer-nav {
-                display: inline-block;
-                text-align: center;
-
-                .footer-nav-item {
-                    a {
-                        font: 400 14px/22px var(--base-font);
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-show-more.scss b/react/assets/forus-webshop/scss/_common/sections/blocks/block-show-more.scss
deleted file mode 100644
index 91564ce39..000000000
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/block-show-more.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.block.block-show-more {
-    text-align: center;
-    margin: 0 0 30px;
-
-    &:last-child {
-        margin-bottom: 0;
-    }
-
-    @media screen and (max-width: 1000px) {
-        .button {
-            width: 100%;
-            padding-left: 20px;
-            padding-right: 20px;
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/map.scss b/react/assets/forus-webshop/scss/_common/sections/blocks/map.scss
deleted file mode 100644
index 0e1808308..000000000
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/map.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-.block {
-    &.block-map {
-        background: url(./assets/img/sprite-map.png) no-repeat 100% 50%;
-        background-size: auto 710px;
-        @include cf();
-
-        .block-content {
-            padding: 130px 0;
-            width: 50%;
-            float: left;
-
-            .block-title {
-                font: 700 40px var(--hf);
-                margin: 0 0 20px;
-            }
-
-            .block-description {
-                font: 400 22px/36px var(--base-font);
-                margin: 0 0 40px;
-            }
-        }
-    }
-
-    @media screen and (min-width: 1000px) {
-        &.block-map {
-            padding: 120px 0 240px;
-        }
-    }
-
-    @media screen and (max-width: 1700px) {
-        &.block-map {
-            .block-content {
-                .block-title {
-                    margin: 0 0 15px;
-                }
-
-                .block-description {
-                    margin: 0 0 30px;
-                }
-            }
-        }
-    }
-
-    @media screen and (max-width: 1000px) {
-        &.block-map {
-            padding: 0px 0 30px;
-            background-size: contain;
-            margin: 0 0 20px;
-            background: none;
-
-            .block-content {
-                text-align: center;
-                width: 100%;
-                padding: 0;
-
-                .block-title {
-                    font: 700 22px/36px var(--base-font);
-                    margin: 0 0 20px;
-                }
-
-                .block-description {
-                    font: 400 16px/28px var(--base-font);
-                    margin: 0 0 20px;
-                }
-
-                .button {
-                    width: 100%;
-                    padding-left: 30px;
-                    padding-right: 30px;
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/records_create.scss b/react/assets/forus-webshop/scss/_common/sections/blocks/records_create.scss
deleted file mode 100644
index 5bf213580..000000000
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/records_create.scss
+++ /dev/null
@@ -1,210 +0,0 @@
-.block {
-
-    &.block-record_create {
-        margin-bottom: 30px;
-
-        .block-title {
-            color: #151b26;
-            font: 700 40px/40px var(--base-font);
-            margin-bottom: 10px;
-        }
-
-        .block-description {
-            color: #646f79;
-            font: 400 16px var(--base-font);
-            margin-bottom: 25px;
-        }
-
-        .button {
-            padding-left: 60px;
-            padding-right: 60px;
-        }
-
-        .categories-list {
-            margin: 0 -10px 20px;
-            @include cf();
-
-            .categories-item {
-                float: left;
-                width: 180px;
-                padding: 0 10px;
-                margin-bottom: 20px;
-
-                .categories-item-inner {
-                    background: #fff;
-                    border-radius: var(--border-radius);
-                    padding: 15px;
-                    box-shadow: 0 5px 30px rgba(0, 0, 0, .05);
-                    position: relative;
-
-                    .categories-radio {
-                        position: absolute;
-                        right: 15px;
-                        top: 15px;
-                        width: 24px;
-                        height: 24px;
-                        border-radius: 24px;
-                        border: 2px solid var(--color-primary);
-                    }
-
-                    .categories-image {
-                        margin-bottom: 10px;
-
-                        img {
-                            display: block;
-                            width: 60px;
-                        }
-                    }
-
-                    .categories-name {
-                        font: 700 14px var(--base-font);
-                        color: #151b26;
-                    }
-                }
-
-                &.active {
-                    .categories-item-inner {
-                        .categories-radio {
-                            border-width: 5px;
-                        }
-                    }
-                }
-            }
-        }
-
-        .record_types-list {
-            margin-bottom: 25px;
-
-            .record_type-item {
-                padding: 20px 25px;
-                background: #fff;
-                box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
-                border-radius: var(--border-radius);
-                overflow: hidden;
-                margin-bottom: 15px;
-                position: relative;
-                display: block;
-                transition: .4s;
-                cursor: pointer;
-
-                .record_type-name {
-                    font: 700 18px/30px var(--base-font);
-                    color: #282b39;
-                    transition: color .4s;
-                }
-
-                .record_type-radio {
-                    position: absolute;
-                    right: 15px;
-                    top: 15px;
-                    width: 24px;
-                    height: 24px;
-                    border-radius: 24px;
-                    border: 2px solid var(--color-primary);
-                    top: 50%;
-                    right: 20px;
-                    transform: translate(0, -50%);
-                    transition: .4s;
-
-                    .mdi {
-                        color: #fff;
-                        @include fill_parent;
-                        display: block;
-                        line-height: 24px;
-                        font-size: 20px;
-                        width: inherit;
-                        height: inherit;
-                        margin-top: -3px;
-                        margin-left: -3px;
-                        display: none;
-                    }
-                }
-
-                &.active,
-                &:hover {
-                    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
-
-                    .record_type-name {
-                        color: var(--color-default);
-                    }
-
-                    .record_type-radio {
-                        border-width: 5px;
-                    }
-                }
-
-                &.active {
-                    .record_type-radio {
-                        background: #315efd;
-
-                        .mdi {
-                            display: block;
-                        }
-                    }
-                }
-            }
-        }
-
-        .record_types-form {
-            padding: 20px 25px;
-            background: #fff;
-            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
-            border-radius: var(--border-radius);
-            overflow: hidden;
-            margin-bottom: 25px;
-            position: relative;
-            display: block;
-            transition: .4s;
-        }
-    }
-    @media screen and (max-width: 1700px) {
-
-        &.block-record_create {
-            .categories-list {
-                .categories-item {
-                    width: 160px;
-                }
-            }
-        }
-    }
-    @media screen and (max-width: 1000px) {
-        &.block-record_create {
-            .block-title {
-                font: 700 20px/30px var(--base-font);
-                margin: 0 0 10px;
-            }
-
-            .block-description {
-                font: 400 14px/20px var(--base-font);
-                margin: 0 0 20px;
-            }
-
-            .categories-list {
-                .categories-item {
-                    width: 50%;
-                }
-            }
-
-            .record_types-list {
-                .record_type-item {
-                    padding: 10px 20px;
-                    box-shadow: 0 2px 5px rgba($color: #000000, $alpha: .1);
-
-                    .record_type-name {
-                        font: 700 15px/30px var(--base-font);
-                    }
-
-                    &:hover,
-                    &.active {
-                        box-shadow: 0 4px 8px rgba($color: #000000, $alpha: .15);
-                    }
-                }
-            }
-
-            .button {
-                width: 100%;
-                margin: 0 0 20px;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/shops_map.scss b/react/assets/forus-webshop/scss/_common/sections/blocks/shops_map.scss
deleted file mode 100644
index 12e2359e6..000000000
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/shops_map.scss
+++ /dev/null
@@ -1,223 +0,0 @@
-.block {
-    &.block-shops_map {
-        max-height: 100%;
-        min-height: 500px;
-        height: 90vh;
-        border-radius: var(--border-radius);
-        background-color: #fefefe;
-        position: relative;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-
-        .shop_map-header {
-            bottom: auto;
-            border-bottom: 1px solid #cee2fb;
-            padding: 25px;
-            width: 100%;
-
-            .shop_map-title {
-                font: 700 22px/28px var(--base-font);
-                color: #282b39;
-            }
-
-            .shop_map-subtitle {
-                font: 400 16px/24px var(--base-font);
-                color: #646f79;
-                margin-bottom: 10px;
-            }
-        }
-
-        .shop_map-body {
-            width: 100%;
-            height: 100%;
-            display: flex;
-        }
-
-        .shop_map-sidebar {
-            background-color: #ffffff;
-            border-right: 1px solid var(--border-color);
-            width: 40%;
-        }
-
-        .shop_map-content {
-            // width: 60%;
-            flex-grow: 1;
-            position: relative;
-            padding: 30px;
-
-            iframe {
-                display: flex;
-                width: 100%;
-                height: 100%;
-            }
-        }
-
-        .shops {
-            .shop-item {
-                padding: 20px;
-                border-bottom: 1px solid var(--border-color);
-                border-right: 4px solid transparent;
-                cursor: pointer;
-                transition: .4s;
-
-                &:last-child {
-                    border-bottom: 0;
-                }
-
-                .shop-details {
-                    padding-left: 75px;
-                    padding-bottom: 20px;
-                    position: relative;
-
-                    .shop-image {
-                        position: absolute;
-                        width: 60px;
-                        height: 60px;
-                        float: left;
-                        border-radius: 60px;
-                        border: 1px solid #eaeaea;
-                        overflow: hidden;
-                        left: 0;
-                        top: 5px;
-
-                        img {
-                            display: block;
-                            width: 100%;
-                        }
-                    }
-
-                    .shop-name {
-                        font: 700 16px var(--base-font);
-                        color: #151b26;
-                        margin-bottom: 10px;
-                    }
-
-                    .shop-details-label {
-                        font: 400 10px/20px var(--base-font);
-                        color: #646f79;
-                    }
-
-                    .shop-details-value {
-                        font: 700 12px var(--base-font);
-                        color: #282b39;
-                    }
-                }
-
-                .shop-schedule {
-                    border-top: 1px solid var(--border-color);
-                    padding-top: 20px;
-
-                    .shop-schedule-label {
-                        color: #646f79;
-                        font: 400 10px/20px var(--base-font);
-                    }
-
-                    .shop-schedule-value {
-                        color: #282b39;
-                        font: 400 12px/20px var(--base-font);
-
-                        strong {
-                            font: inherit;
-                            font-weight: 700;
-                        }
-
-                        span {
-                            &:after {
-                                content: ', ';
-                            }
-
-                            &:last-child,
-                            &:last-of-type {
-                                &:after {
-                                    content: none;
-                                }
-                            }
-                        }
-                    }
-                }
-
-                &:hover {
-                    background: #f6f9fc;
-                }
-
-                &.active {
-                    position: relative;
-                    z-index: 1;
-                    background: #fff;
-                    box-shadow: 0 0 50px rgba(0, 0, 0, .2);
-                    border-right-color: #2987fd;
-                }
-            }
-        }
-    }
-
-    @media screen and (max-width: 1000px) {
-        &.block-shops_map {
-            height: 100vh;
-
-            .shop_map-header {
-                padding: 25px 25px;
-
-                .shop_map-title {
-                    font: 700 20px/30px var(--base-font);
-                    @include ellipsis();
-                }
-
-                .shop_map-subtitle {
-                    font: 400 13px/25px var(--base-font);
-                    margin: 0 0 15px;
-                }
-            }
-
-            .shop_map-sidebar {
-                width: 100%;
-            }
-
-            .shop_map-content {
-                width: 50%;
-                left: 50%;
-                display: none;
-            }
-
-            .shops {
-                .shop-item {
-                    .shop-details {
-                        padding: 0;
-                        margin: 0 0 10px;
-
-                        .shop-image {
-                            position: relative;
-                            float: right;
-
-                            img {
-                                display: block;
-                            }
-                        }
-
-                        .shop-details-label {
-                            font: 400 9px/16px var(--base-font);
-                            margin: 0 0 0;
-                        }
-
-                        .shop-details-value {
-                            font: 700 12px/20px var(--base-font);
-                            margin: 0 0 10px;
-                        }
-
-                        .shop-name {
-                            font: 700 13px var(--base-font);
-                            margin: 0 0 10px;
-                            color: var(--bc);
-                        }
-                    }
-
-                    .shop-schedule {
-                        border: none;
-                        padding: 0;
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/transactions.scss b/react/assets/forus-webshop/scss/_common/sections/blocks/transactions.scss
deleted file mode 100644
index ec6b43465..000000000
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/transactions.scss
+++ /dev/null
@@ -1,196 +0,0 @@
-.block {
-
-    &.block-transactions {
-        border-radius: var(--border-radius);
-        box-shadow: 0 10px 35px rgba(0, 0, 0, .05);
-        background: #fff;
-        margin-bottom: 50px;
-
-        .transactions-header {
-            display: flex;
-            align-items: center;
-            border-top-left-radius: inherit;
-            border-top-right-radius: inherit;
-            padding: 25px;
-            border-bottom: 1px solid #d4d9dd;
-
-            .transactions-title {
-                color: #282b39;
-                font: 700 22px/24px var(--base-font);
-                margin: 0 5px 0 0;
-            }
-        }
-
-        .transactions-body {
-            border-bottom-left-radius: inherit;
-            border-bottom-right-radius: inherit;
-            position: relative;
-        }
-
-        .transactions-list {
-            .transactions-item {
-                border-bottom: 1px solid #d4d9dd;
-                padding: 20px;
-                display: flex;
-                @include cf();
-
-                .transactions-item-icon {
-                    background: #ededed;
-                    width: 35px;
-                    height: 35px;
-                    border-radius: 35px;
-                    text-align: center;
-                    line-height: 35px;
-                    margin: 5px 15px 5px 0;
-                    color: #000000;
-
-                    .mdi {
-                        font-size: 18px;
-                        color: inherit;
-                    }
-                }
-
-                .transactions-item-details {
-                    flex-grow: 1;
-
-                    .transactions-item-empty {
-                        font: 400 16px var(--base-font);
-                        text-align: center;
-                        color: #282b39;
-                        margin-bottom: 5px;
-                    }
-
-                    .transactions-item-counterpart {
-                        font: 700 16px var(--base-font);
-                        color: #282b39;
-                        margin-bottom: 5px;
-
-                        a {
-                            color: #004D93;
-                            font: 700 16px var(--base-font);
-                        }
-                    }
-
-                    .transactions-item-date {
-                        font: 400 13px var(--base-font);
-                        color: #646f79;
-                    }
-                }
-
-                .transactions-item-amount {
-                    text-align: right;
-                    padding-left: 15px;
-
-                    .transactions-item-value {
-                        font: 700 16px var(--base-font);
-                        color: var(--tc);
-                        margin-bottom: 5px;
-                        white-space: nowrap;
-                    }
-
-                    .transactions-item-type {
-                        font: 400 13px var(--base-font);
-                        color: var(--tc);
-                    }
-                }
-
-                &:last-child {
-                    border-bottom: 0;
-                }
-            }
-        }
-    }
-    @media screen and (max-width: 1700px) {
-
-        &.block-transactions {
-            .transactions-header {
-                padding: 15px 25px;
-
-                .transactions-title {
-                    font: 700 16px/22px var(--base-font);
-                }
-            }
-
-            .transactions-list {
-                .transactions-item {
-                    padding: 15px 20px;
-
-                    .transactions-item-icon {
-                        margin: 0 15px 0 0;
-                    }
-
-                    .transactions-item-details {
-                        .transactions-item-counterpart {
-                            font: 700 14px/20px var(--base-font);
-                            margin: 0;
-                        }
-
-                        .transactions-item-date {
-                            font: 400 12px/15px var(--base-font);
-                            margin: 0;
-                        }
-                    }
-
-                    .transactions-item-amount {
-                        .transactions-item-value {
-                            font: 700 14px/20px var(--base-font);
-                            margin: 0;
-                        }
-
-                        .transactions-item-type {
-                            font: 400 12px/15px var(--base-font);
-                            margin: 0;
-                        }
-                    }
-                }
-            }
-        }
-    }
-    @media screen and (max-width: 1000px) {
-        &.block-transactions {
-            margin-bottom: 30px;
-            border: 1px solid #ddecff;
-            
-            .transactions-header {
-                padding: 15px 20px;
-                border-color: #ddecff;
-                
-                .transactions-title {
-                    font: 700 14px var(--base-font);
-                }
-            }
-
-            .transactions-list {
-                .transactions-item {
-                    padding: 10px 15px;
-                    border-color: #ddecff;
-
-                    .transactions-item-icon {
-                        width: 30px;
-                        height: 30px;
-                        min-width: 30px;
-                        line-height: 30px;
-                        margin-right: 10px;
-                    }
-
-                    .transactions-item-details {
-                        .transactions-item-counterpart {
-                            padding: 4px 0;
-                            font: 700 12px/16px var(--base-font);
-                            margin-bottom: 0;
-                        }
-
-                        .transactions-item-date {
-                            font: 400 10px/14px var(--base-font);
-                        }
-                    }
-
-                    &.transactions-item-out .transactions-item-amount .transactions-item-value,
-                    &.transactions-item-out .transactions-item-amount .transactions-item-type {
-                        font-size: 14px;
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/voucher.scss b/react/assets/forus-webshop/scss/_common/sections/blocks/voucher.scss
deleted file mode 100644
index af8cf8f0d..000000000
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/voucher.scss
+++ /dev/null
@@ -1,698 +0,0 @@
-.block {
-    &.block-voucher {
-        position: relative;
-        display: flex;
-        margin-bottom: 30px;
-
-        .base-card {
-            background-color: #fff;
-            border-radius: var(--border-radius);
-            box-shadow: var(--box-shadow);
-            cursor: default;
-            position: relative;
-            overflow: hidden;
-            flex-direction: row;
-            display: flex;
-            min-height: 200px;
-            @include cf();
-
-            .label {
-                margin-bottom: 10px;
-                border-radius: 5px;
-                padding: 0px 10px;
-            }
-
-            .card-inner {
-                flex-direction: column;
-                flex: 1;
-                display: flex;
-                min-height: 200px;
-            }
-
-            .card-actions {
-                display: flex;
-                flex: 1;
-
-                .action-col {
-                    flex-grow: 1;
-                    display: flex;
-                    flex-direction: row;
-                    justify-content: center;
-
-                    .action-item {
-                        cursor: pointer;
-                        flex-direction: column;
-                        text-align: center;
-                        display: inline-flex;
-                        color: var(--bc);
-                        align-items: center;
-
-                        .action-item-icon {
-                            width: 40px;
-                            height: 40px;
-                            line-height: 40px;
-                            text-align: center;
-                            text-transform: inherit;
-                            background: var(--voucher-card-action-background);
-                            border: 1px solid var(--voucher-card-action-border-color);
-                            border-radius: var(--voucher-card-action-border-radius);
-                            color: var(--voucher-card-action-color);
-                            font-size: 20px;
-                            transition:
-                                background .4s,
-                                border .4s,
-                                color .4s;
-                            cursor: pointer;
-                            position: relative;
-                            margin-bottom: 7.5px;
-
-                            .action-item-tooltip {
-                                opacity: 0;
-                                user-select: none;
-                                visibility: hidden;
-                                position: absolute;
-                                background: #fff;
-                                border: 1px solid #dbdcdb;
-                                padding: 4px 10px;
-                                font: 600 13px/20px var(--base-font);
-                                color: var(--bc);
-                                border-radius: 5px;
-                                white-space: nowrap;
-                                top: 100%;
-                                margin-top: 5px;
-                                left: 50%;
-                                transform: translate3d(-50%, 0, 0) scale3d(0, 0, 0);
-                                box-shadow: 2px 5px 35px rgba(0, 0, 0, 0.15);
-                                transition:
-                                    opacity .4s,
-                                    transform .4s,
-                                    visibility .4s;
-
-                                &:after {
-                                    left: 50%;
-                                    position: absolute;
-                                    display: block;
-                                    content: '';
-                                    @extend .triangle;
-                                    bottom: 100%;
-                                    border-color: transparent transparent #fff transparent;
-                                    transform: translate3d(-50%, 4px, 0);
-                                }
-                            }
-                        }
-
-                        .action-item-name {
-                            color: #000;
-                            font: 600 12px var(--base-font);
-                            transition: color .4s;
-                            margin: 0 3px;
-                        }
-
-                        &:last-child {
-                            margin-right: 0;
-                        }
-
-                        &:hover {
-                            .action-item-icon {
-                                background: var(--voucher-card-action-hover-background);
-                                border: 1px solid var(--voucher-card-action-hover-border-color);
-                                border-color: var(--voucher-card-action-hover-border-radius);
-                                color: var(--voucher-card-action-hover-color);
-
-                                .action-item-tooltip {
-                                    opacity: 1;
-                                    visibility: visible;
-                                    transform: translate3d(-50%, 0, 0) scale3d(1, 1, 1);
-                                }
-                            }
-                        }
-                    }
-
-                    &.card-actions-center {
-                        justify-content: center;
-                    }
-                }
-            }
-
-            .card-label {
-                color: var(--tc);
-                font: 400 14px/16px var(--base-font);
-
-                a {
-                    color: #646f79;
-                    text-decoration: underline;
-                }
-            }
-
-            .block-link {
-                font: 600 13px/22px var(--base-font);
-                color: var(--color-default);
-                display: inline-block;
-
-                .mdi {
-                    color: var(--color-default);
-                    font-size: 1.3em;
-                    float: right;
-                    margin-left: 5px;
-                    transition: margin-right .4s;
-                    line-height: 22px;
-                }
-
-                &:hover {
-                    .mdi {
-                        margin-left: 10px;
-                    }
-                }
-            }
-
-            .card-value {
-                font: 700 14px/16px var(--base-font);
-                color: var(--tc);
-                margin-top: 10px;
-
-                &.card-value-sm {
-                    font-weight: 400;
-                    font-size: 14px;
-                }
-
-                &:last-child {
-                    margin-bottom: 10px;
-                }
-            }
-
-            .card-value.euro {
-                font-size: 25px;
-            }
-
-            .card-label.euro {
-                font-size: 15px;
-            }
-
-            .card-qr_code {
-                width: 200px;
-                padding: 15px 15px;
-                background: #efefef;
-                text-align: center;
-
-                img,
-                canvas {
-                    display: block;
-                    width: 150px;
-                    margin-bottom: 20px;
-                    padding: 5px;
-                    background: #fff;
-                    border-radius: 5px;
-                    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
-                }
-
-                .card-qr_code-desc {
-                    color: #272525;
-                    font: 500 12px var(--base-font);
-                    margin: 0 -10px 10px -10px;
-                }
-            }
-
-            .card-body {
-                position: relative;
-                background: #fff;
-                display: flex;
-
-                .card-photo {
-                    padding: 20px 0 20px 20px;
-
-                    img {
-                        width: 100px;
-                        display: block;
-                        border-radius: 5px;
-                    }
-                }
-
-                .card-section {
-                    padding: 20px;
-                    flex: 1;
-                }
-
-                .card-title {
-                    color: #272525;
-                    font: 700 16px var(--base-font);
-                    margin: 0 0 5px;
-                }
-
-                .card-subtitle {
-                    color: #272525;
-                    font: 500 14px var(--base-font);
-                    margin: 0 0 5px;
-                }
-
-                .card-description {
-                    font: 400 13px/18px var(--base-font);
-                    color: #272525;
-                }
-
-                .card-price {
-                    color: #646f79;
-                    font: 400 16px var(--base-font);
-
-                    strong {
-                        color: #083f49;
-                        font: 700 24px var(--base-font);
-                    }
-                }
-            }
-
-            .card-footer {
-                width: 100%;
-                height: 100%;
-                background: #fcfcfc;
-                padding: 20px 25px;
-                border-top: 1px solid var(--border-color);
-                position: relative;
-                display: flex;
-                flex-direction: column;
-            }
-
-            &.base-card-sponsor {
-                width: 38%;
-            }
-
-            &.base-card-voucher {
-                width: 62%;
-                margin-right: 30px;
-
-                .block-qr-code {
-                    width: 100%;
-                    padding-bottom: 10px;
-
-                    .qr_code {
-                        width: 100px;
-                        height: 100px;
-                        padding: 0px;
-                        background: unset;
-                        margin: auto;
-                        border-radius: 0px;
-                        box-shadow: unset;
-
-                        img,
-                        canvas {
-                            display: block;
-                            width: 100%;
-                        }
-                    }
-                }
-
-                .card-body {
-                    .card-title {
-                        font: 600 24px var(--base-font);
-                        color: #272525;
-                        margin-bottom: 10px;
-                    }
-                }
-            }
-        }
-
-        &.block-voucher-regular {
-            .base-card {
-                &.base-card-sponsor {
-                    width: 50%;
-                    margin-left: 15px;
-                }
-
-                &.base-card-voucher {
-                    width: 50%;
-                    margin-right: 15px;
-                }
-            }
-        }
-
-        &.block-voucher-combined {
-            .base-card {
-                &.base-card-voucher {
-                    width: 100%;
-                    margin-right: 0;
-
-                    .card-footer {
-                        .card-section {
-                            margin-bottom: 20px;
-
-                            .card-title {
-                                margin: 0 0 10px;
-                                font: 600 15px/22px var(--base-font);
-                            }
-
-                            .card-description {
-                                font: 400 14px/20px var(--base-font);
-
-                                .card-description-link {
-                                    font: 400 14px/20px var(--base-font);
-                                    color: #0000cd;
-                                    text-decoration: underline;
-
-                                    &:hover {
-                                        text-decoration: none;
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        &:last-child {
-            margin-bottom: 0;
-        }
-    }
-
-    @media screen and (max-width: 1700px) {
-        &.block-voucher {
-            .base-card {
-                .label {
-                    margin-bottom: 5px;
-                    font-size: 11px;
-                    line-height: 20px;
-                }
-
-                .card-label {
-                    font: 400 14px/16px var(--base-font);
-                }
-
-                .card-value {
-                    font: 700 16px var(--base-font);
-
-                    &.card-value-sm {
-                        font-weight: 400;
-                    }
-                }
-
-                .card-body {
-                    .card-photo {
-                        img {
-                            width: 100px;
-                        }
-                    }
-
-                    .card-read_more {
-                        font: 600 12px/18px var(--base-font);
-                    }
-
-                    .card-description {
-                        font-size: 14px;
-                    }
-                }
-
-                .card-actions {
-                    .action-item {
-                        margin-right: 15px;
-                    }
-                }
-
-                &.base-card-voucher {
-                    .card-body {
-                        .card-title {
-                            font: 700 24px var(--base-font);
-                        }
-                    }
-                }
-            }
-
-            .card-inner {
-                min-height: 300px;
-            }
-        }
-    }
-
-    @media screen and (max-width: 1000px) {
-        &.block-voucher {
-            flex-direction: column;
-            margin: auto;
-            width: 100%;
-
-            .base-card {
-                overflow: visible;
-                box-shadow: 2px 2px 20px rgba($color: #000000, $alpha: 0.05);
-                border-top-left-radius: 8px;
-                border-top-right-radius: 8px;
-                width: 100%;
-                margin-left: 0;
-
-                .card-inner {
-                    text-align: center;
-                }
-
-                .card-label {
-                    font: 600 10px/16px var(--base-font);
-                    margin: 0 0 5px;
-                    color: #646f79;
-                    text-transform: uppercase;
-
-                    &.euro {
-                        font-size: 10px;
-                        margin: 0;
-                    }
-                }
-
-                .card-value {
-                    color: #282b39;
-                    font: 700 16px/24px var(--base-font);
-                    margin: 0 0 15px;
-
-                    &.card-value-sm {
-                        font: 400 12px var(--base-font);
-                        color: #134478;
-
-                        strong {
-                            display: block;
-                            font: 700 15px var(--base-font);
-                            color: #282b39;
-                        }
-                    }
-
-                    &.euro {
-                        font-size: 20px;
-                    }
-                }
-
-                .card-qr_code {
-                    width: 100%;
-                    background: #fff;
-                    border: 1px solid #ddecff;
-                    border-bottom: 0;
-
-                    img {
-                        margin: 0 auto 20px;
-                        background: #fff;
-                        padding: 10px;
-                        border-radius: 5px;
-                        width: 200px;
-                        max-width: 100%;
-                        box-shadow: 5px 5px 20px rgba($color: #000000, $alpha: 0.1);
-                    }
-                }
-
-                .card-body {
-                    flex-direction: column;
-                    padding-top: 30px;
-                    border: 1px solid #ddecff;
-                    border-bottom: 0;
-                    border-top-left-radius: 6px;
-                    border-top-right-radius: 6px;
-                    min-height: auto;
-
-                    .card-photo {
-                        padding: 0;
-                        position: absolute;
-                        top: 0;
-                        left: 50%;
-                        transform: translate(-50%, -50%);
-                        background: #fff;
-                        border-radius: 60px;
-
-                        img {
-                            margin: auto;
-                            width: 60px;
-                            max-width: 100%;
-                            border-radius: 60px;
-                            box-shadow: 2px 3px 20px rgba($color: #000000, $alpha: 0.1);
-                            background: #fff;
-                        }
-                    }
-
-                    .card-section {
-                        width: auto;
-                        max-width: 100%;
-                        margin: 0 auto;
-                    }
-
-                    .card-title {
-                        font: 700 17.5px var(--base-font);
-                        color: #00122a;
-                    }
-
-                    .card-description {
-                        font: 400 12px/18px var(--base-font);
-                        color: #00122a;
-                    }
-                }
-
-                .card-footer {
-                    border: 1px solid #ddecff;
-                    border-bottom-left-radius: 8px;
-                    border-bottom-right-radius: 8px;
-                    min-height: auto;
-                }
-
-                &.base-card-sponsor,
-                &.base-card-voucher {
-                    width: 100%;
-                    margin: 0 0 30px;
-                    flex-direction: column-reverse;
-                }
-
-                &.base-card-voucher {
-                    margin: 0 0 30px;
-                    margin-left: 0;
-
-                    .card-body {
-                        padding: 0;
-                        flex-direction: column-reverse;
-
-                        .card-qr_code {
-                            width: 100%;
-                            padding: 20px;
-                            border: none;
-                            background: linear-gradient(to right, #eff0ef, #fefefe);
-
-                            .card-qr_code-desc {
-                                font: 400 12px/16px var(--base-font);
-                            }
-
-                            .qr_code {
-                                width: 140px;
-                                height: 140px;
-
-                                img,
-                                canvas {
-                                    border-radius: 0;
-                                    padding: 0;
-                                    box-shadow: none;
-                                    margin: 0 0 10px;
-                                    width: 100%;
-                                }
-                            }
-                        }
-
-                        .card-photo {
-                            display: none;
-                        }
-
-                        .label {
-                            margin-bottom: 10px;
-                        }
-
-                        .card-title {
-                            margin: 0 0 5px;
-                            font: 700 14px var(--base-font);
-                        }
-
-                        .card-section {
-                            text-align: center;
-                        }
-                    }
-
-                    .card-footer {
-                        padding: 15px;
-                        flex-direction: column;
-                        justify-content: center;
-                        justify-items: center;
-
-                        .card-section {
-                            margin: 0;
-                            width: auto;
-                            justify-content: center;
-                        }
-
-                        .card-actions {
-                            margin: 0;
-                            flex-flow: column;
-                            flex-grow: 1;
-                            max-width: 100%;
-
-                            .action-col {
-                                width: 100%;
-                                margin: 0 0 10px;
-
-                                .action-item {
-                                    background: #f4f5f7;
-                                    border-radius: 20px;
-                                    padding: 10px;
-                                    text-align: center;
-                                    display: flex;
-                                    justify-content: flex-start;
-                                    flex-direction: unset;
-                                    width: 100%;
-
-                                    .action-item-icon {
-                                        background-color: unset;
-                                        width: 30px;
-                                        height: 30px;
-                                        line-height: 30px;
-                                        border-radius: 40px;
-                                        margin: 0 10px 0 0;
-                                    }
-
-                                    &:hover {
-                                        .action-item-icon {
-                                            color: #fff;
-                                            background-color: #000;
-                                        }
-                                    }
-                                }
-
-                                &:last-child {
-                                    margin-bottom: 0;
-                                }
-                            }
-                        }
-                    }
-
-                    .card-inner:first-child {
-                        .card-body {
-                            border-top-left-radius: 0;
-                            border-top-right-radius: 0;
-                        }
-                    }
-                }
-            }
-
-            &.block-voucher-regular {
-                .base-card {
-                    &.base-card-sponsor,
-                    &.base-card-voucher {
-                        width: 100%;
-                        margin: 0 0 30px;
-                        flex-direction: column-reverse;
-                    }
-                }
-            }
-
-            &.block-voucher-combined {
-                .base-card {
-                    &.base-card-voucher {
-                        .card-footer {
-                            .card-section {
-                                .card-title {
-                                    margin: 0 0 5px;
-                                    font: 600 12px/18px var(--base-font);
-                                }
-
-                                .card-description {
-                                    font: 400 12px/16px var(--base-font);
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/vouchers.scss b/react/assets/forus-webshop/scss/_common/sections/blocks/vouchers.scss
deleted file mode 100644
index 46b5cb9a3..000000000
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/vouchers.scss
+++ /dev/null
@@ -1,542 +0,0 @@
-.block {
-    &.block-vouchers {
-        margin-bottom: 30px;
-
-        .block-title {
-            font: 700 40px var(--base-font);
-            margin-bottom: 20px;
-            cursor: default;
-        }
-
-        .voucher-item {
-            background-color: #fff;
-            margin-bottom: 15px;
-            position: relative;
-            transition:
-                background-color 0.4s,
-                box-shadow 0.4s,
-                border 0.4s;
-            min-height: 120px;
-            overflow: hidden;
-            cursor: default;
-            display: grid;
-            grid-template-columns: 130px 1fr auto;
-            background: var(--showcase-item-background);
-            border-radius: var(--showcase-item-border-radius);
-            box-shadow: var(--showcase-item-shadow);
-            border: var(--showcase-item-border);
-
-            .voucher-image {
-                overflow: hidden;
-                background-size: cover;
-                background-position: 50% 50%;
-                position: relative;
-                border-top-left-radius: inherit;
-                border-bottom-left-radius: inherit;
-                padding: 15px 0 15px 15px;
-
-                img {
-                    width: 100%;
-                    display: block;
-                    border-radius: var(--border-radius);
-                }
-            }
-
-            .voucher-details {
-                float: left;
-                padding: 15px 15px;
-                flex-grow: 1;
-                display: flex;
-                flex-direction: column;
-
-                .label {
-                    margin-bottom: 10px;
-                }
-
-                .voucher-name {
-                    display: flex;
-                    gap: 5px;
-                    font: 700 22px/26px var(--hf);
-                    color: #00122a;
-                    margin: 0 0 5px;
-
-                    .voucher-name-number {
-                        display: none;
-                    }
-                }
-
-                .voucher-organization {
-                    font: 400 13px/20px var(--base-font);
-                    color: #353535;
-                    margin-bottom: 15px;
-                }
-
-                .voucher-value {
-                    font: 700 22px/26px var(--base-font);
-                    color: #00122a;
-                    display: flex;
-                    flex-grow: 1;
-                    flex-direction: column;
-                    justify-content: flex-end;
-                }
-
-                .voucher-status-label {
-                    position: absolute;
-                    top: 20px;
-                    right: 20px;
-                }
-
-                .voucher-cancel-label {
-                    color: #646f79;
-                    font: 400 14px/16px var(--base-font);
-                    margin-top: 5px;
-
-                    a {
-                        color: #646f79;
-                        text-decoration: underline;
-                        pointer-events: all;
-                    }
-                }
-            }
-
-            .voucher-overview {
-                float: right;
-                border-left: 1px solid var(--border-color);
-                padding: 15px 15px;
-                min-width: 200px;
-                min-height: inherit;
-                position: relative;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-
-                .voucher-overview-items {
-                    margin-bottom: 10px;
-                    float: left;
-                    position: absolute;
-                    bottom: 15px;
-                    left: 15px;
-                    right: 15px;
-                    display: flex;
-                    flex-direction: column;
-                    gap: 5px;
-                }
-
-                .voucher-overview-item {
-                    .voucher-overview-label {
-                        font: 400 11px/16px var(--base-font);
-                        color: #646f79;
-                    }
-
-                    .voucher-overview-value {
-                        font: 600 14px/21px var(--base-font);
-                        color: #282b39;
-
-                        small {
-                            font: 400 13px var(--base-font);
-                            color: #646f79;
-                            margin-left: 5px;
-                        }
-                    }
-
-                    &:last-of-type,
-                    &:last-child {
-                        margin-bottom: 0;
-                    }
-                }
-
-                & > .button {
-                    padding-left: 50px;
-                    padding-right: 50px;
-                    @include float_center();
-                }
-            }
-
-            .voucher-item-overlay {
-                position: absolute;
-                @include fill_parent();
-                display: none;
-                background: transparent;
-            }
-
-            &:not(.voucher-item-static):not(.voucher-item-select) {
-                cursor: pointer;
-
-                &:hover {
-                    box-shadow: var(--showcase-item-hover-shadow);
-
-                    .voucher-image {
-                        &:after {
-                            opacity: 0.25;
-                        }
-                    }
-                }
-            }
-
-            &:last-child {
-                margin-bottom: 0;
-            }
-
-            &.voucher-item-disabled {
-                cursor: default;
-                pointer-events: none;
-
-                .voucher-overview {
-                    .voucher-overview-item {
-                        .button {
-                            cursor: default;
-                        }
-                    }
-                }
-            }
-
-            &.voucher-item-compact {
-                margin-bottom: 10px;
-                min-height: 100px;
-                border: 1px solid var(--border-color);
-                border-radius: var(--border-radius);
-                display: grid;
-                grid-template-columns: 80px 1fr auto auto;
-
-                .voucher-details {
-                    position: relative;
-                    display: grid;
-                    width: auto;
-                    grid-template-columns: 1fr auto;
-
-                    .voucher-base-information {
-                        display: grid;
-                    }
-
-                    .voucher-name {
-                        font: 600 14px/20px var(--hf);
-                    }
-
-                    .voucher-organization {
-                        font: 400 12px/16px var(--base-font);
-                        margin: 0 0 5px;
-                        color: #595959;
-
-                        &:last-child {
-                            margin-bottom: 0;
-                        }
-                    }
-
-                    .voucher-records {
-                        grid-column: 1/2;
-                        grid-row: 2;
-                    }
-
-                    .voucher-amounts {
-                        display: grid;
-                        text-align: right;
-                        position: relative;
-                        align-items: flex-start;
-                        gap: 5px;
-                        grid-column: 2/3;
-                        grid-row: 1/3;
-                        padding-left: 10px;
-
-                        .voucher-value {
-                            font: 700 16px/24px var(--base-font);
-                            white-space: nowrap;
-                        }
-
-                        .voucher-value-date {
-                            font: 500 12px/20px var(--base-font);
-                            white-space: nowrap;
-                        }
-
-                        .voucher-extra-payment {
-                            color: #595959;
-
-                            .voucher-extra-payment-value {
-                                font: 600 14px/21px var(--base-font);
-                            }
-
-                            .voucher-extra-payment-description {
-                                font: 400 11px/16px var(--base-font);
-                                margin-top: -2px;
-                            }
-                        }
-                    }
-                }
-
-                .voucher-overview {
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: center;
-
-                    & > .button {
-                        position: relative;
-                        top: auto;
-                        left: auto;
-                        transform: none;
-                    }
-                }
-
-                &:last-child {
-                    margin-bottom: 0;
-                }
-            }
-
-            &.voucher-item-select {
-                min-height: 60px;
-                margin-bottom: 0;
-                border-radius: 0;
-                border-bottom: 1px solid var(--border-color);
-                position: relative;
-                box-shadow: none;
-                cursor: pointer;
-
-                .voucher-image {
-                    padding: 7.5px 0 7.5px 7.5px;
-                }
-
-                .voucher-details {
-                    padding: 9px;
-
-                    .voucher-name,
-                    .voucher-value {
-                        font: 700 14px/22px var(--hf);
-                        margin: 0 0 0;
-                    }
-
-                    .voucher-date,
-                    .voucher-organization {
-                        font: 400 11px/18px var(--base-font);
-                        margin: 0 0 0;
-                    }
-
-                    .voucher-date,
-                    .voucher-value {
-                        display: flex;
-                        flex-grow: 1;
-                        white-space: nowrap;
-                        flex-direction: column;
-                        justify-content: flex-end;
-                        order: 1 !important;
-                    }
-
-                    .voucher-date {
-                        justify-content: flex-start;
-                    }
-                }
-
-                .voucher-overview {
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: center;
-
-                    & > .button {
-                        position: relative;
-                        top: auto;
-                        left: auto;
-                        transform: none;
-                    }
-                }
-
-                &:last-child {
-                    margin-bottom: 0;
-                    border-bottom: none;
-                    border-bottom-left-radius: calc(var(--border-radius) / 2);
-                    border-bottom-right-radius: calc(var(--border-radius) / 2);
-                }
-
-                &:after {
-                    content: '';
-                    pointer-events: none;
-                    @include fill_parent();
-                    background-color: #000;
-                    opacity: 0;
-                    transition: opacity 0.3s;
-                }
-
-                &:hover {
-                    &:after {
-                        opacity: 0.035;
-                    }
-                }
-
-                &:focus {
-                    outline-offset: -2px !important;
-                    border-radius: 7px;
-                }
-
-                &.voucher-item-select-placeholder {
-                    border: 1px solid var(--border-color);
-                    border-radius: calc(var(--border-radius) / 2);
-                    padding-right: 25px;
-                    background-image: url('./assets/img/select-bg.png');
-                    background-position: calc(100% - 4px);
-                    background-repeat: no-repeat;
-                }
-            }
-        }
-
-        &.block-vouchers-select {
-            margin-bottom: 0;
-
-            .voucher-item {
-                grid-template-columns: 52.5px 1fr auto;
-            }
-
-            &.block-vouchers-select-open {
-                .voucher-item-select {
-                    &.voucher-item-select-placeholder {
-                        border-bottom-left-radius: 0;
-                        border-bottom-right-radius: 0;
-                    }
-                }
-            }
-        }
-
-        &:last-child {
-            margin-bottom: 0;
-        }
-    }
-
-    @media screen and (max-width: 1000px) {
-        &.block-vouchers {
-            margin-bottom: 30px;
-
-            .block-title {
-                font: 700 20px var(--base-font);
-                margin-bottom: 20px;
-                cursor: default;
-            }
-
-            .voucher-item {
-                padding: 0;
-                height: auto;
-                position: relative;
-                min-height: auto;
-                margin: 0 0 15px;
-                grid-template-columns: 70px 1fr;
-
-                .voucher-image {
-                    padding: 10px 0 10px 10px;
-                }
-
-                .voucher-details {
-                    text-align: left;
-                    padding: 10px;
-                    display: flex;
-                    justify-content: center;
-                    flex-direction: column;
-                    gap: 5px;
-                    overflow: hidden;
-
-                    .voucher-name {
-                        font: 700 16px/20px var(--hf);
-                        margin: 0 0 0;
-                        order: 2;
-                        word-break: break-word;
-                        word-wrap: break-word;
-
-                        .voucher-name-number {
-                            display: contents;
-                        }
-                    }
-
-                    .voucher-organization {
-                        font: 400 11px/14px var(--base-font);
-                        margin: 0 0 0;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        order: 3;
-                    }
-
-                    .voucher-value {
-                        font: 700 16px/22px var(--base-font);
-                        order: 4;
-                    }
-
-                    .voucher-read_more {
-                        margin-bottom: 0;
-                        order: 5;
-                    }
-
-                    .voucher-status-label {
-                        position: initial;
-                        order: 1;
-
-                        .label {
-                            margin: 0px;
-                            padding: 0 5px 0;
-                            font: 600 10px/16px var(--base-font);
-                        }
-                    }
-                }
-
-                .voucher-overview {
-                    min-width: auto;
-                    padding: 10px 15px;
-                    display: none;
-                    justify-content: center;
-                    flex-direction: column;
-                }
-
-                .voucher-item-overlay {
-                    display: block;
-                }
-
-                &:last-child {
-                    margin-bottom: 0;
-                }
-
-                &.voucher-item-compact {
-                    display: block;
-                    padding-top: 15px;
-
-                    .voucher-details {
-                        display: flex;
-                        width: 100%;
-                        border-bottom: 1px solid var(--border-color);
-
-                        .voucher-base-information {
-                            display: flex;
-                            flex-direction: column;
-
-                            .voucher-information {
-                                .voucher-name {
-                                    font: 700 16px/20px var(--base-font);
-                                    margin: 0 0 15px;
-                                    @include ellipsis();
-                                    padding-right: 0;
-                                }
-
-                                .voucher-organization {
-                                    font: 400 11px/13px var(--base-font);
-                                    padding-right: 0;
-                                    text-wrap: wrap;
-                                }
-
-                                .voucher-value {
-                                    font: 700 22px/22px var(--base-font);
-                                }
-                            }
-                        }
-
-                        .voucher-amounts {
-                            text-align: left;
-                            padding: 0;
-                        }
-                    }
-
-                    .voucher-overview {
-                        display: flex;
-                        min-height: auto;
-                        width: 100%;
-                        padding: 20px;
-
-                        .button {
-                            padding: 10px;
-                            font-size: 14px;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/react/assets/forus-webshop/scss/_common/sections/faq.scss b/react/assets/forus-webshop/scss/_common/sections/faq.scss
deleted file mode 100644
index 26af0d11e..000000000
--- a/react/assets/forus-webshop/scss/_common/sections/faq.scss
+++ /dev/null
@@ -1,261 +0,0 @@
-.section {
-    &.section-faq {
-        margin: 0 0 30px;
-
-        .section-title {
-            color: var(--tc);
-            font: 600 40px/60px var(--hf);
-            margin: 0 0 40px;
-            text-align: center;
-            z-index: 2;
-        }
-
-        .section-splash {
-            position: absolute;
-            display: none;
-            right: 0;
-            width: 100%;
-            height: 50vw;
-            background: url('../img/splash-faq.png') no-repeat;
-            background-position: 100% 50%;
-            background-size: auto 100%;
-            top: 300px;
-            transform: translate(0, -50%);
-            z-index: -1;
-        }
-
-        .faq {
-            width: 820px;
-            max-width: 100%;
-            margin: 0 auto;
-
-            .faq-item {
-                background: #fff;
-                border: 1px solid var(--border-color);
-                border-radius: 4px;
-                margin-bottom: 10px;
-                position: relative;
-                box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.1);
-                transition: .4s;
-
-                .faq-item-header {
-                    padding: 15px 30px;
-                    padding-right: 45px;
-                    font: 500 18px var(--base-font);
-                    color: #00122a;
-                    position: relative;
-                    transition: .4s;
-                    cursor: pointer;
-
-                    .faq-item-title {
-                        font: inherit;
-                        margin: 0;
-                        pad: 0;
-                    }
-
-                    .faq-item-chevron-up,
-                    .faq-item-chevron-down {
-                        position: absolute;
-                        right: 15px;
-                        top: 50%;
-                        transform: translate(0, -50%);
-                        color: #9ca6af;
-                        font-size: 28px;
-                        transition: .4s;
-                        display: none;
-                    }
-
-                    .faq-item-chevron-down {
-                        display: block;
-                    }
-
-                    &:hover {
-                        .faq-item-chevron-up,
-                        .faq-item-chevron-down {
-                            color: var(--color-primary);
-                        }
-                    }
-                }
-                
-                .faq-item-content {
-                    padding-right: 200px;
-                    font: 400 16px var(--base-font);
-                    padding: 0px 30px 20px;
-                    color: #646f79; 
-                    display: none;
-                    cursor: default;
-
-                    a {
-                        color: var(--color-primary);
-                        font-size: 16px;
-                        line-height: normal;
-                    }
-
-                    p {
-                        &:last-child {
-                            margin-bottom: 0;
-                        }
-                    }
-                }
-
-                &.active {
-                    .faq-item-header {
-                        .faq-item-chevron-up,
-                        .faq-item-chevron-down {
-                            display: none;
-                        }
-
-                        .faq-item-chevron-up {
-                            display: block;
-                        }
-                    }
-
-                    .faq-item-content {
-                        display: block;
-                    }
-                }
-
-                &:hover:not(.active) {
-                    box-shadow: 5px 15px 45px rgba(0, 0, 0, 0.15);
-
-                    .faq-item-header {
-                        color: var(--color-primary);
-
-                        .faq-item-chevron-up,
-                        .faq-item-chevron-down {
-                            color: var(--color-primary);
-                        }
-                    }
-                }
-            }
-            &.faq-fund {
-                box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.05  );
-
-                .faq-item {
-                    margin: 0 0 0;
-                    border-radius: 0;
-                    box-shadow: none;
-                    border-bottom: none;
-                    border: 1px solid var(--border-color);
-                    border-bottom: 0px;
-                    overflow: hidden;
-
-                    .faq-item-header {
-                        padding: 15px 20px;
-                        font: 600 18px/30px var(--base-font);
-                        background-color: #F7F7F7;
-                        color: var(--color-primary);
-
-                        .faq-item-chevron-up,
-                        .faq-item-chevron-down {
-                            font-size: 30px;
-                            color: var(--color-primary);
-                        }
-
-                        .faq-item-title {
-                            margin-right: 20px;
-                        }
-                    }
-
-                    .faq-item-content {
-                        padding: 15px 20px;
-                        border-top: 1px solid var(--border-color);
-                    }
-
-                    &:first-child {
-                        border-top-left-radius: calc(var(--border-radius) / 2);
-                        border-top-right-radius: calc(var(--border-radius) / 2);
-                    }
-
-                    &:last-child {
-                        border-bottom-left-radius: calc(var(--border-radius) / 2);
-                        border-bottom-right-radius: calc(var(--border-radius) / 2);
-                        border-bottom: 1px solid var(--border-color);
-                    }
-
-                    &:hover:not(.active) {
-                        box-shadow: none;
-                    }
-                }
-            }
-        }
-    }
-
-    @media screen and (max-width: 1700px) {
-        &.section-faq {
-            .faq {
-                .faq-item {
-                    .faq-item-header {
-                        font: 500 15px var(--base-font);
-                    }
-
-                    .faq-item-content {
-                        font: 400 14px var(--base-font);
-                        
-                        ul li {
-                            font: 400 14px var(--base-font);
-                        }
-                    }
-                }
-
-            }
-        }
-    }
-
-    @media screen and (max-width: 1000px) {
-        &.section-faq {
-            margin-bottom: 60px;
-
-            .section-title {
-                font: 700 24px/36px var(--hf);
-                margin: 0 0 30px;
-            }
-
-            .section-splash {
-                height: 600px;
-                opacity: .75;
-            }
-
-            .faq {
-                padding: 0;
-                max-width: 100%;
-                width: 600px;
-
-                .faq-item {
-                    .faq-item-header {
-                        font: 500 14px var(--base-font);
-                    }
-
-                    .faq-item-content {
-                        font: 400 14px var(--base-font);
-                    }
-                }
-            }
-        }
-
-        &.section-faq {
-            margin-bottom: 60px;
-
-            .section-title {
-                font: 700 24px/36px var(--hf);
-                margin: 0 0 30px;
-            }
-
-            .section-splash {
-                height: 600px;
-            }
-
-            .faq {
-                .faq-item {
-                    .faq-item-header {
-                        font: 500 14px var(--base-font);
-                    }
-
-                    .faq-item-content {
-                        font: 400 14px var(--base-font);
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/_common/sections/flow.scss b/react/assets/forus-webshop/scss/_common/sections/flow.scss
deleted file mode 100644
index 639233ce1..000000000
--- a/react/assets/forus-webshop/scss/_common/sections/flow.scss
+++ /dev/null
@@ -1,274 +0,0 @@
-.section {
-    &.section-flow {
-        margin-bottom: 100px;
-
-        &.wide-70 {
-            width: 50%;
-            margin-left: 12%;
-        }
-
-        .section-sprite {
-            position: absolute;
-            right: 100px;
-            width: 50%;
-            height: 50%;
-            background: url('../img/sprite-steps.png') no-repeat;
-            background-position: 100% 0%;
-        }
-
-        .section-title {
-            text-align: center;
-            margin-bottom: 5px;
-        }
-
-        .section-description {
-            font: 400 22px/32px var(--base-font);
-            color: #646f79;
-            text-align: center;
-            padding: 0 50px;
-            margin-bottom: 10px;
-        }
-
-        .section-scheme {
-            display: block;
-            margin: 0 auto 40px;
-            max-width: 100%;
-        }
-
-    }
-
-    &.section-flow {
-        margin-bottom: 100px;
-
-        .section-title {
-            text-align: center;
-            margin-bottom: 5px;
-        }
-
-        .section-description {
-            font: 400 22px/32px var(--base-font);
-            color: #646f79;
-            text-align: center;
-            padding: 0 50px;
-            margin-bottom: 10px;
-        }
-
-        .section-scheme {
-            display: block;
-            max-width: 100%;
-            margin: 0 auto;
-        }
-
-        .scheme {
-            position: relative;
-            max-width: 100%;
-            width: 1400px;
-            margin: 0 auto;
-
-            .scheme-img {
-                visibility: hidden;
-                display: block;
-                margin: 0 auto 40px;
-                max-width: 100%;
-            }
-
-            .scheme-points-preset {
-                @include fill_parent();
-            }
-
-            .scheme-point {
-                .scheme-point-text {
-                    position: absolute;
-                    left: 12.15%;
-                    top: 11.55%;
-                    width: 30%;
-
-                    h4 {
-                        color: #00122a;
-                        font: 500 28px/38px var(--base-font);
-                        margin: 0 0 10px;
-                    }
-
-                    p {
-                        color: #646f79;
-                        font: 400 15px/24px var(--base-font);
-                        margin: 0 0 10px;
-                    }
-                }
-
-                .scheme-point-image {
-                    display: block;
-                    position: absolute;
-                    right: 0;
-                    top: 0;
-                    width: 55.5%;
-                    padding: 40px;
-                    border-radius: 1000px;
-                    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .4) 100%);
-                }
-
-                &:nth-child(2) {
-                    .scheme-point-text {
-                        top: 35.6%;
-                        left: 57.4%;
-                    }
-
-                    .scheme-point-image {
-                        left: 0;
-                        top: 24%;
-                    }
-                }
-
-                &:nth-child(3) {
-                    .scheme-point-text {
-                        top: 59.1%;
-                    }
-
-                    .scheme-point-image {
-                        top: 47.4%;
-                    }
-                }
-
-                &:nth-child(4) {
-                    .scheme-point-text {
-                        top: 82.6%;
-                        left: 57.4%;
-                    }
-
-                    .scheme-point-image {
-                        left: 0;
-                        top: auto;
-                        bottom: 0.1%;
-                    }
-                }
-            }
-        }
-    }
-
-    @media screen and (max-width: 1500px) {
-        &.section-flow {
-            &.wide-70 {
-                width: 100%;
-                margin: 0;
-            }
-
-            .wrapper {
-                .section-sprite {
-                    display: none;
-                }
-            }
-        }
-    }
-
-    @media screen and (max-width: 1200px) {
-        &.section-flow {
-            &.wide-70 {
-                width: 100%;
-                margin: 0;
-            }
-
-            .wrapper {
-                .section-sprite {
-                    display: none;
-                }
-            }
-        }
-    }
-
-    @media screen and (max-width: 1000px) {
-        &.section-flow {
-            margin: 0 0 30px;
-
-            .section-title {
-                padding: 0;
-                font: 700 18px/32px var(--hf);
-            }
-
-            .section-description {
-                padding: 0;
-                font: 400 15px/26px var(--base-font);
-                margin: 0 0 30px;
-            }
-
-            .section-scheme {
-                margin: 0;
-            }
-        }
-
-        &.section-flow {
-            &.wide-70 {
-                width: 100%;
-                margin: 0;
-            }
-
-            .wrapper {
-                .section-sprite {
-                    display: none;
-                }
-            }
-        }
-
-        &.section-flow {
-            margin: 0 0 30px;
-
-            .section-title {
-                padding: 0;
-                font: 700 20px/28px var(--hf);
-                margin-bottom: 15px;
-            }
-
-            .section-description {
-                padding: 0;
-                font: 400 14px/22px var(--base-font);
-                margin: 0 0 30px;
-                color: #353b46;
-            }
-
-            .scheme {
-                margin: 0;
-            }
-
-            &.responsive {
-                display: block;
-
-                .scheme {
-                    .scheme-img {
-                        display: none;
-                    }
-
-                    .scheme-points-preset {
-                        position: initial;
-                    }
-
-                    .scheme-point {
-                        width: 100%;
-                        text-align: center;
-                        margin: 0 0 30px;
-
-                        .scheme-point-text {
-                            position: initial;
-                            width: 100%;
-                        }
-
-                        .scheme-point-image {
-                            position: initial;
-                            width: 100%;
-                            padding: 0;
-                            border-radius: 0;
-                            margin-bottom: -30px;
-                            margin-top: -30px;
-                        }
-
-                        h4 {
-                            font: 600 16px/28px var(--base-font);
-                        }
-
-                        p {
-                            font: 400 13px/20px var(--base-font);
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/_common/sections/funds-cms.scss b/react/assets/forus-webshop/scss/_common/sections/funds-cms.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/react/assets/forus-webshop/scss/_common/sections/map.scss b/react/assets/forus-webshop/scss/_common/sections/map.scss
deleted file mode 100644
index 75a82297d..000000000
--- a/react/assets/forus-webshop/scss/_common/sections/map.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.section {
-    &.section-map {
-        position: relative;
-        margin-bottom: 30px;
-    }
-}
diff --git a/react/assets/forus-webshop/scss/_common/sections/products.scss b/react/assets/forus-webshop/scss/_common/sections/products.scss
deleted file mode 100644
index 5acf5b3a4..000000000
--- a/react/assets/forus-webshop/scss/_common/sections/products.scss
+++ /dev/null
@@ -1,98 +0,0 @@
-.section {
-    &.section-products {
-        position: relative;
-        margin: 0 0 40px;
-
-        .section-title {
-            margin: 0 0 30px;
-            display: block;
-            font-family: var(--hf), serif;
-        }
-
-        .section-filters {
-            margin-bottom: 40px;
-            @include cf();
-
-            input[type="text"] {
-                background: url("../img/looking-glass.png") no-repeat;
-                background-position: 100% 0;
-                background-size: 60px 60px;
-            }
-        }
-    }
-
-    &.section-faq {
-        .section-title {
-            font: 500 2em var(--base-font);
-            text-align: left;
-        }
-    }
-
-    @media screen and (max-width: 1700px) {
-        &.section-products {
-            .section-filters {
-                margin-bottom: 30px;
-            }
-        }
-    }
-
-    @media screen and (max-width: 1000px) {
-        &.section-products {
-            margin: 0 0 30px;
-
-            .section-filters {
-                margin: 0 0 30px;
-                box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
-                border-radius: 6px;
-
-                .row {
-                    margin: 0;
-
-                    .col {
-                        padding: 0;
-                        float: left;
-
-                        &:first-child {
-                            width: 40%;
-
-                            .form-group {
-                                margin: 0;
-
-                                .form-control {
-                                    box-shadow: none;
-                                    border-top-right-radius: 0;
-                                    border-bottom-right-radius: 0;
-                                    padding-right: 30px;
-                                    @include ellipsis();
-                                    border: 1px solid #e4e9ec;
-                                }
-                            }
-                        }
-
-                        &:last-child {
-                            width: 60%;
-
-                            .form-group {
-                                margin: 0;
-
-                                .form-control {
-                                    box-shadow: none;
-                                    border-top-left-radius: 0;
-                                    border-bottom-left-radius: 0;
-                                    padding-right: 50px;
-                                    border: 1px solid #e4e9ec;
-                                    border-left: none;
-                                    @include ellipsis();
-                                }
-                            }
-                        }
-                    }
-                }
-
-                input[type="text"] {
-                    background-size: 50px 50px;
-                }
-            }
-        }
-    }
-}
diff --git a/react/assets/forus-webshop/scss/_common/sections/steps.scss b/react/assets/forus-webshop/scss/_common/sections/steps.scss
deleted file mode 100644
index 1034a6e8d..000000000
--- a/react/assets/forus-webshop/scss/_common/sections/steps.scss
+++ /dev/null
@@ -1,206 +0,0 @@
-.section {
-    &.section-steps {
-        margin-bottom: 60px;
-        background: none;
-
-        .section-title {
-            font: 600 24px/36px var(--hf);
-            margin: 0 0 30px;
-            text-align:center;
-            color: var(--tc);
-        }
-
-        .steps {
-            min-height: auto;
-            text-align: center;
-            
-            .step-item {
-                width: 100%;
-                margin: 0 0 20px;
-                h4 {
-                    font: 700 18px var(--base-font);
-                    color: #00122a;
-                    margin: 0 0 10px;
-                }
-                .step-item-content {
-                    //padding: 120px 0 0;
-                    width: 400px;
-                    margin: 0 auto;
-                    max-width: 100%;
-                    &:before {
-                        width: 140px;
-                        height: 125px;
-                        background-size: 100%;
-                        margin: 0 auto;
-                        position: relative;
-                        top: 0;
-                        content: '';
-                        display: block;
-                    }
-                    
-                }
-                &:nth-child(1) {
-                    .step-item-content:before {
-                        background-image: url('../img/icon-steps/step-1.png');
-                    }
-                }
-                &:nth-child(2) {
-                    .step-item-content:before {
-                        background-image: url('../img/icon-steps/step-2.png');
-                    }
-                }
-
-                &:nth-child(3) {
-                    .step-item-content:before {
-                        background-image: url('../img/icon-steps/step-3.png');
-                    }
-                }
-
-                &:nth-child(4) {
-                    .step-item-content:before {
-                        background-image: url('../img/icon-steps/step-4.png');
-                    }
-                }
-
-                &:nth-child(5) {
-                    .step-item-content:before {
-                        background-image: url('../img/icon-steps/step-5.png');
-                    }
-                }
-            }
-        }
-    }
-    @media screen and (min-width: 1024px) {
-        &.section-steps {
-            position: relative;
-            margin-top: 25px;
-            margin-bottom: 40px;
-
-            .section-splash {
-                position: absolute;
-                display: none;
-                left: 0;
-                width: 100%;
-                height: 400px;
-                max-height: 100%;
-                background: url('../img/splash-steps.png') no-repeat;
-                background-position: 0 50%;
-                background-size: auto 100%;
-                top: 50%;
-                transform: translate(0, -50%);
-            }
-
-            .section-sprite {
-                position: absolute;
-                display: none;
-                right: 0px;
-                width: 100%;
-                height: 180px;
-                max-height: 100%;
-                background: url('../img/sprite-steps.png') no-repeat;
-                background-position: 100% 50%;
-                top: 50%;
-                transform: translate(0, -50%);
-                background-size: auto 100%;
-            }
-
-            .section-title {
-                text-align: center;
-                font: 600 40px/60px var(--hf);
-                margin: 0 0 70px;
-            }
-
-            .steps {
-                width: 1000px;
-                max-width: 100%;
-                padding: 0 100px;
-                margin: 0 auto;
-                min-height: 800px;
-                background: url('../img/steps-shape.png') no-repeat;
-                background-size: 303px 930px;
-                background-position: 65px 50%;
-
-                .step-item {
-                    margin-left: 200px;
-                    margin-bottom: 125px;
-                    width: 390px;
-                    cursor: default;
-
-                    p {
-                        font: 400 16px/22px var(--base-font);
-                        color: #646f79;
-                    }
-                    u {
-                        cursor: pointer;
-                    }
-
-                    .step-item-content {
-                        position: relative;
-                        padding-top: 20px;
-                        text-align: left;
-                        &:before {
-                            position: absolute;
-                            content: '';
-                            left: unset;
-                            height: 200px;
-                            width: 200px;
-                            display: block;
-                            right: 105%;
-                            transform: translate(0, -20px);
-                        }
-                    }
-
-                    &:nth-child(2) {
-                        margin-bottom: 120px;
-                        margin-left: 280px;
-                    }
-
-                    &:nth-child(3) {
-                        margin-bottom: 110px;
-                        margin-left: 320px;
-                    }
-
-                    &:nth-child(4) {
-                        margin-bottom: 120px;
-                        margin-left: 240px;
-                    }
-
-                    &:nth-child(5) {
-                        margin-bottom: 110px;
-                        margin-left: 160px;
-                    }
-                }
-            }
-        }
-    }
-    @media screen and (min-width: 1366px) {
-        &.section-steps {
-            .section-splash {
-                height: 600px;
-            }
-            .section-sprite {
-                height: 380px;
-            }
-        }
-    }
-    @media screen and (min-width: 1920px) {
-        &.section-steps {
-            .section-splash {
-                height: 900px;
-            }
-            .section-sprite {
-                height: 480px;
-            }
-        }
-    }
-    @media screen and (min-width: 2560px) {
-        &.section-steps {
-            .section-splash {
-                height: 1680px;
-            }
-            .section-sprite {
-                height: 680px;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/_common/sections/vouchers.scss b/react/assets/forus-webshop/scss/_common/sections/vouchers.scss
deleted file mode 100644
index 3977d7149..000000000
--- a/react/assets/forus-webshop/scss/_common/sections/vouchers.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.section {
-    &.section-voucher-details {
-        position: relative;
-    }
-
-    &.section-profile {
-        margin-bottom: 30px;
-
-        .section-title {
-            margin-bottom: 0px;
-        }
-    }
-    
-    @media screen and (max-width: 1000px) {
-        &.section-profile {
-            .section-title {
-                font: 700 24px/36px var(--base-font);
-                margin-bottom: 15px;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/berkelland/components/_buttons.scss b/react/assets/forus-webshop/scss/berkelland/components/_buttons.scss
deleted file mode 100644
index c0a800fe2..000000000
--- a/react/assets/forus-webshop/scss/berkelland/components/_buttons.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.button {
-    &:hover {
-        box-shadow: none;
-    }
-
-    &.button-primary {
-        color: var(--tc-var);
-        background: var(--color-default);
-        text-shadow: none;
-        border: 1px solid transparent;
-        
-        &:hover {
-            color: var(--color-default);
-            text-decoration: underline;
-            background-color: #ececec;
-            box-shadow: none;
-            border: 1px solid var(--color-default);
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/berkelland/includes/shame.scss b/react/assets/forus-webshop/scss/berkelland/includes/shame.scss
deleted file mode 100644
index f3d9acf17..000000000
--- a/react/assets/forus-webshop/scss/berkelland/includes/shame.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-// these items have  section as parent class, while other implementatios have block as parent
-
-.section {
-    .section-title {
-        text-align: center;
-    }
-
-    &.section-profile {
-        .section-title {
-            text-align: left;
-            color: #fff;
-        }
-    }
-}
-
-body {
-    background: #ececec;
-}
-
-
-.block.block-organizations .organization-item .organization-offices .block-offices .office-item:before {
-    background-color: #d2d2c7;
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/berkelland/sections/blocks/map.scss b/react/assets/forus-webshop/scss/berkelland/sections/blocks/map.scss
deleted file mode 100644
index e378920a7..000000000
--- a/react/assets/forus-webshop/scss/berkelland/sections/blocks/map.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.block {
-    &.block-map {
-        padding: 120px 0 240px;
-
-        @media screen and (max-width: 1000px) {
-            padding: 30px 0;
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/berkelland/sections/blocks/products.scss b/react/assets/forus-webshop/scss/berkelland/sections/blocks/products.scss
deleted file mode 100644
index e20ea07cb..000000000
--- a/react/assets/forus-webshop/scss/berkelland/sections/blocks/products.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.block.block-products {
-    --products-title-color: var(--color-default);
-    --products-title-hover-color: var(--color-primary);
-}
diff --git a/react/assets/forus-webshop/scss/berkelland/sections/blocks/profile.scss b/react/assets/forus-webshop/scss/berkelland/sections/blocks/profile.scss
deleted file mode 100644
index aa8b52d03..000000000
--- a/react/assets/forus-webshop/scss/berkelland/sections/blocks/profile.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-.section {
-    &.section-profile {
-        .section-title {
-            text-align: left;
-            color: var(--tc);
-        }
-    }
-}
-.block {
-    &.block-profile {
-        .profile-aside {
-            .profile-card {
-                .profile-details {
-                    .profile-heading {
-                        color: var(--bc);
-                    }
-                }
-
-                .profile-actions {
-                    .profile-action {
-                        color: var(--tc);
-
-                        .mdi {
-                            color: var(--color-primary);
-                        }
-
-                        &:hover {
-                            color: var(--color-primary);
-                        }
-                    }
-                }
-            }
-
-            .profile-menu {
-                .profile-menu-item {
-                    box-shadow: none;
-                    color: var(--tc-var);
-                    background: var(--color-default);
-                    text-shadow: none;
-                    border: 1px solid transparent;
-                    .mdi {color: var(--tc-var);}
-                    &:hover {
-                        color: var(--color-default);
-                        text-decoration: underline;
-                        background-color: #fff;
-                        box-shadow: none;
-                        border: 1px solid var(--color-default);
-                        .mdi {color: var(--color-default);}
-                    }
-
-                    &.active {
-                        background-color: #fff;
-                        color: var(--color-default);
-                        box-shadow: none;
-                        border: 1px solid var(--color-default);
-                        .mdi {
-                            color: var(--color-default);
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/berkelland/sections/blocks/shops_map.scss b/react/assets/forus-webshop/scss/berkelland/sections/blocks/shops_map.scss
deleted file mode 100644
index b795cb754..000000000
--- a/react/assets/forus-webshop/scss/berkelland/sections/blocks/shops_map.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-.block {
-    &.block-shops_map {
-        .shop_map-header {
-            .shop_map-categories {
-                .shop_map-category-item {
-                    .shop_map-category-item-inner {
-                        background: #5ec0ed;
-                        border-radius: 8px;
-
-                        &:hover {
-                            background: #08abeb;
-                        }
-                    }
-                }
-            }
-        }
-
-        .shops {
-            .shop-item {
-                &.active {
-                    border-right-color: #5ec0ed;
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/berkelland/sections/blocks/transactions.scss b/react/assets/forus-webshop/scss/berkelland/sections/blocks/transactions.scss
deleted file mode 100644
index 2680f2fbc..000000000
--- a/react/assets/forus-webshop/scss/berkelland/sections/blocks/transactions.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.block {
-    &.block-transactions {
-        .transactions-list {
-            .transactions-item {
-                .transactions-item-icon {
-                    .mdi {
-                        color: #91b845;
-                    }
-                }
-
-                &.transactions-item-out {
-                    .transactions-item-amount {
-                        .transactions-item-value {
-                            color: #4c91b3;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/berkelland/sections/blocks/voucher.scss b/react/assets/forus-webshop/scss/berkelland/sections/blocks/voucher.scss
deleted file mode 100644
index c69ee5d67..000000000
--- a/react/assets/forus-webshop/scss/berkelland/sections/blocks/voucher.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.block {
-    &.block-voucher {
-        .base-card {
-            border-radius: 8px;
-            margin-bottom: 30px;
-            .card-footer {
-                background-color: #f6f8fa;
-                border-top-color: #d2e6ff;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/berkelland/sections/blocks/vouchers.scss b/react/assets/forus-webshop/scss/berkelland/sections/blocks/vouchers.scss
deleted file mode 100644
index df07fc9e7..000000000
--- a/react/assets/forus-webshop/scss/berkelland/sections/blocks/vouchers.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.block {
-    &.block-vouchers {
-        .voucher-item {
-            .voucher-details {
-                .voucher-organization {
-                    color: #4c91b3;
-                }
-            }
-
-            .voucher-overview {
-                .voucher-overview-item {
-                    .voucher-overview-label {
-                        color: #4c91b3;
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/berkelland/sections/faq.scss b/react/assets/forus-webshop/scss/berkelland/sections/faq.scss
deleted file mode 100644
index 75f803eb2..000000000
--- a/react/assets/forus-webshop/scss/berkelland/sections/faq.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.section {
-    &.section-faq {
-        .faq {
-            .faq-item {
-                &:hover:not(.active) {
-                    .faq-item-header {
-                        color: var(--color-default);
-
-                        .faq-item-chevron-up,
-                        .faq-item-chevron-down {
-                            color: var(--color-default);
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/berkelland/sections/steps.scss b/react/assets/forus-webshop/scss/berkelland/sections/steps.scss
deleted file mode 100644
index 72f9af949..000000000
--- a/react/assets/forus-webshop/scss/berkelland/sections/steps.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-.section {
-    &.section-steps {
-        padding-top: 50px;
-        padding-bottom: 50px;
-        background:none;
-
-        .section-splash{
-            display:none;
-        }
-        .section-sprite{
-            display:none;
-        }
-        .steps {
-            background: none;
-            .step-item {
-                min-height: 140px;
-                margin-bottom: 30px !important;
-
-                h4 {
-                    color: var(--tc);
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/berkelland/sections/vouchers.scss b/react/assets/forus-webshop/scss/berkelland/sections/vouchers.scss
deleted file mode 100644
index 9a592bf4f..000000000
--- a/react/assets/forus-webshop/scss/berkelland/sections/vouchers.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.section {
-    &.section-voucher-details,
-    &.section-product {
-        .section-title {
-            display: none;
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/ede/includes/shame.scss b/react/assets/forus-webshop/scss/ede/includes/shame.scss
deleted file mode 100644
index 4f45ba661..000000000
--- a/react/assets/forus-webshop/scss/ede/includes/shame.scss
+++ /dev/null
@@ -1,174 +0,0 @@
-html {
-    height: 100vh;
-}
-
-ui-view {
-    background-color: #ffffff;
-}
-
-@media screen and (min-width: 1000px) {
-    body {
-        transform-origin: top center;
-        transform: scale(0.8);
-        background-color: #f3f3f3;
-    }
-}
-
-.block {
-    @media screen and (min-width: 1000px) {
-        &.block-app_links {
-            img {
-                max-width: none !important;
-                height: none !important;
-            }
-        }
-
-        &.block-cms-funds {
-            display: auto;
-
-            .fund-item {
-                display: inline-block;
-                width: 50%;
-                border: none;
-                margin: 0 auto;
-                padding: 20px 10px 0px 10px;
-
-                .fund-media {
-                    width: 100%;
-
-                    img {
-                        width: 100%;
-                        display: block;
-                        max-height: 250px;
-                        object-fit: cover;                        
-                    }
-                }
-
-                .fund-information {
-                    width: auto;
-                    padding-left: 0;
-                    text-align: left;
-
-                    .fund-title {
-                        color: var(--tc);
-                        margin: 0 0 0px;
-                    }
-
-                    .fund-description {
-                        margin: 0 0 0px;
-                    }
-                }
-            }
-            
-            .fund-item:nth-of-type(2n) { 
-                .fund-information {
-                    padding-right: 0;
-                }    
-            }
-        }
-    }
-}
-
-.section {
-    &.section-faq {
-        .faq {
-            width: auto;
-            margin: 0;
-        }
-    }
-
-    &.section-footer {
-        margin-top: 0;
-        padding-top: 30px;
-        color: #fff;
-    }
-}
-
-.block {
-    &.block-copyrights{
-        .links{
-            a {
-                color: #ffffff;
-            }
-        } 
-    }
-}
-
-.block {
-    &.block-sign_up {
-        .sign_up-row {
-            padding-top: 0px;
-        }
-
-        .sign_up-pane {
-            .sign_up-pane-body {
-                .sign_up-pane-text {
-                    display: none;
-                }
-            }
-        }
-    }
-
-    &.block-copyrights {
-        padding: 20px 0;
-    }
-
-    &.block-footer {
-
-        p {
-            text-align: left;
-            font: 400 16px/1.5em var(--base-font);
-        }
-
-        a {
-            font: 400 16px/1.5em var(--base-font);
-            color: var(--footer_color);
-            text-decoration: underline;
-
-            &:hover {
-                text-decoration: none;
-                color: var(--footer_color);
-            }
-        }
-
-        .footer-schedule {
-            a {
-                font: 400 16px/1.5em var(--base-font);
-                color: var(--tc-var);
-                text-decoration: underline;
-
-                &:hover {
-                    text-decoration: none;
-                    color: var(--tc-var);
-                }
-            }
-        
-            .schedule-label,
-            .schedule-value {
-                font: 400 16px/1.5em var(--base-font);
-                color: var(--tc-var);
-            }
-        }
-
-        .footer-nav {
-            .footer-nav-item {
-                a {
-                    font: 400 16px/1.5em var(--base-font);
-                    color: var(--tc-var);
-                    text-decoration: underline;
-
-                    &:hover {
-                        text-decoration: none;
-                        color: var(--tc-var);
-                    }
-                }
-            }
-        }
-        @media screen and (max-width: 1000px) {
-            p {
-                margin: 0 auto;
-                margin-bottom: 10px;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/ede/sections/blocks/block-provider.scss b/react/assets/forus-webshop/scss/ede/sections/blocks/block-provider.scss
deleted file mode 100644
index 33bbe5732..000000000
--- a/react/assets/forus-webshop/scss/ede/sections/blocks/block-provider.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.block.block-provider {
-    .provider-content {
-        .section-products {
-            .section-title, .block-show-more {
-                text-align: left;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/eemsdelta/includes/shame.scss b/react/assets/forus-webshop/scss/eemsdelta/includes/shame.scss
deleted file mode 100644
index 7f6e5dc90..000000000
--- a/react/assets/forus-webshop/scss/eemsdelta/includes/shame.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.block {
-    &.block-copyrights{
-        .links{
-            a {
-                color: #ffffff;
-            }
-        } 
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/eemsdelta/sections/blocks/block-navbar-search.scss b/react/assets/forus-webshop/scss/eemsdelta/sections/blocks/block-navbar-search.scss
deleted file mode 100644
index b5eac71b9..000000000
--- a/react/assets/forus-webshop/scss/eemsdelta/sections/blocks/block-navbar-search.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.block.block-navbar-search {
-    .search-form {
-        &.form {
-            .navbar-search-label {
-                top: -18px;
-                left: 0;
-                background: none;
-                padding: 0;
-            }
-        }
-    }
-
-    @media screen and (max-width: 1000px) {
-        .search-form {
-            &.form {
-                background: transparent;
-            }
-        }
-
-        .search-area {
-            margin: 0;
-        }
-    }
-}
diff --git a/react/assets/forus-webshop/scss/geertruidenberg/includes/shame.scss b/react/assets/forus-webshop/scss/geertruidenberg/includes/shame.scss
deleted file mode 100644
index 1085945bf..000000000
--- a/react/assets/forus-webshop/scss/geertruidenberg/includes/shame.scss
+++ /dev/null
@@ -1,80 +0,0 @@
-
-// Footer
-.section {
-    &.section-footer {
-        background: #ee8016 url(./assets/img/header-frame-after.svg);
-        padding: 50px 0 0;
-        margin-top: 0;
-        color: var(--footer_color);
-        display: block;
-        a {
-            color: var(--footer_color);
-            &:hover {
-                color: var(--footer_color);
-                text-decoration: none;
-            }
-        }
-        .wrapper {
-            padding: 40px 50px;
-            background-color: var(--footer_background_color);
-        }
-    }
-}
-
-.block {
-    &.block-footer {
-        .footer-nav {
-            a {
-                color: var(--footer_color);
-
-                &:hover {
-                    color: var(--footer_color);
-                }
-            }
-
-            .footer-nav-item {
-                a {
-                    color: var(--footer_color);
-
-                    &:hover {
-                        color: var(--footer_color);
-                    }
-                }
-            }
-        }
-
-        .footer-label {
-            .wrapper {
-                padding: 0;
-            }
-        }
-    }
-    &.block-copyrights {
-        background-color: var(--footer_background_color);
-        padding: 40px 0;
-        margin-top: 50px;
-        align-items: center;
-        display: flex;
-        justify-content: center;
-
-        .links {
-            a {
-                color: var(--footer_color);
-
-                &:hover {
-                    color: var(--footer_color);
-                }
-            }
-        }
-
-        .developed {
-            a {
-                color: var(--footer_color);
-
-                &:hover {
-                    color: var(--footer_color);
-                }
-            }
-        }
-    }
-}
diff --git a/react/assets/forus-webshop/scss/goereeoverflakkee/includes/buttons.scss b/react/assets/forus-webshop/scss/goereeoverflakkee/includes/buttons.scss
deleted file mode 100644
index 51a51772f..000000000
--- a/react/assets/forus-webshop/scss/goereeoverflakkee/includes/buttons.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.button {
-    font-size: 18px;
-    line-height: 24px;
-
-    &.button-start {
-        .mdi {
-            color: #fff;
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/goereeoverflakkee/includes/form.scss b/react/assets/forus-webshop/scss/goereeoverflakkee/includes/form.scss
deleted file mode 100644
index fc529fb82..000000000
--- a/react/assets/forus-webshop/scss/goereeoverflakkee/includes/form.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.form {
-    .form-control:not([type="radio"]):not([type="checkbox"]) {
-        border-radius: var(--border-radius);
-
-        &::placeholder {
-            color: #2D3748;
-            opacity: 0.8;
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-breadcrumbs.scss b/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-breadcrumbs.scss
deleted file mode 100644
index 1464ba214..000000000
--- a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-breadcrumbs.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.block.block-breadcrumbs {
-    .breadcrumb-item {
-        color: var(--htc);
-        font-weight: 500;
-
-        &.active {
-            color: #2D3748;
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-cms-funds.scss b/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-cms-funds.scss
deleted file mode 100644
index 873189c0d..000000000
--- a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-cms-funds.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-.block.block-cms-funds {
-    .fund-item {
-        border-bottom: none;
-        padding: 0;
-    }
-
-    &.block-cms-funds-compact {
-        .fund-item {
-            .fund-information {
-                .fund-title {
-                    font: 500 32px/48px var(--base-font);
-                }
-
-                .fund-description {
-                    margin: 0 0 20px;
-                }
-            }
-
-            .fund-information {
-                .fund-button {
-                    text-align: left;
-
-                    .fund-button-link {
-                        color: #08749b;
-                    }
-                }
-            }
-        }
-    }
-
-    @media screen and (max-width: 1000px) {
-        &.block-cms-funds-compact {
-            .fund-item {
-                .fund-information {
-                    .fund-title {
-                        font: 500 16px/24px var(--base-font);
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-copyrights.scss b/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-copyrights.scss
deleted file mode 100644
index d61d9f4b2..000000000
--- a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-copyrights.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.block.block-copyrights {
-    border: none;
-    background-color: #04465E;
-    font: 500 17px/25px var(--base-font);
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-footer.scss b/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-footer.scss
deleted file mode 100644
index 5b187d6ff..000000000
--- a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-footer.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.block.block-footer {
-    .footer-nav {
-        .footer-nav-item {
-            font: 400 17px/25px var(--base-font);
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-map.scss b/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-map.scss
deleted file mode 100644
index b945efdc0..000000000
--- a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-map.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.block.block-map {
-    .block-content {
-        .block-title {
-            color: #0B0E12;
-            font: 400 52px/72px var(--base-font);
-        }
-
-        .block-description {
-            font: 400 18px/27px var(--base-font);
-        }
-    }
-
-    @media screen and (max-width: 1000px) {
-        .block-content {
-            .block-title {
-                font: 500 28px/38px var(--base-font);
-            }
-    
-            .block-description {
-                font: 400 14px/21px var(--base-font);
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-markdown.scss b/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-markdown.scss
deleted file mode 100644
index 8e19aecc2..000000000
--- a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-markdown.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.block.block-markdown {
-    font: 400 17px/25px var(--base-font);
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-mobile-menu.scss b/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-mobile-menu.scss
deleted file mode 100644
index a49563013..000000000
--- a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-mobile-menu.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.block.block-mobile-menu {
-    .mobile-menu-group {
-        .mobile-menu-items {
-            .mobile-menu-item {
-                &.active {
-                    color: #08749B;
-
-                    .mdi {
-                        color: #08749B;
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-navbar-search.scss b/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-navbar-search.scss
deleted file mode 100644
index afdd69535..000000000
--- a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-navbar-search.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.block.block-navbar-search {
-    .navbar-search-icon {
-        color: var(--htc);
-    }
-
-    .search-form.form {
-        .form-control {
-            &::placeholder {
-                color: #2D3748;
-                font: 500 16px/16px var(--base-font);
-                opacity: 0.8;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-organizations.scss b/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-organizations.scss
deleted file mode 100644
index d3ff7ad50..000000000
--- a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-organizations.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-.block.block-organizations {
-    .organization-item {
-        .organization-pane {
-            .organization-pane-info {
-                .organization-title {
-                    .organization-page-link {
-                        color: #08749B;
-                    }
-                }
-            }
-
-            .organization-pane-collapse {
-                .organization-total-offices {
-                    color: #08749B;
-                }
-
-                .organization-total-offices-count {
-                    &.active {
-                        background-color: #08749B;
-                    }
-                }
-            }
-        }
-
-        .organization-offices {
-            .block-offices {
-                .office-item {
-                    .office-item-map-icon {
-                        color: #fff;
-                        background-color: #08749B;
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-pane.scss b/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-pane.scss
deleted file mode 100644
index 167a023d1..000000000
--- a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-pane.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.block.block-pane {
-    border: 1px solid var(--border-color);
-    box-shadow: none;    
-
-    .pane-head {
-        .pane-head-title {
-            font: 500 24px/36px var(--base-font);
-        }
-    }
-
-    .pane-section {
-        .product-funds-list {
-            .fund-item {
-                border-radius: 0;
-                
-                .fund-item-section {
-                    .fund-item-section-label {
-                        font: 400 12px/16px var(--base-font);
-                    }
-
-                    .fund-item-section-value {
-                        font: 500 17px/23px var(--base-font);
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-product.scss b/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-product.scss
deleted file mode 100644
index 0d9fc77eb..000000000
--- a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-product.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-.block.block-product {
-    .product-card {
-        border: 1px solid #DBDCDB;
-        box-shadow: none;
-
-        .product-details {
-            .product-name {
-                font: 500 24px/36px var(--base-font);
-                color: #0B0E12;
-            }
-
-            .organization-name {
-                color: #2D3748;
-                font-weight: 500;
-            }
-
-            .product-properties {
-                .product-property {
-                    .product-property-label {
-                        color: #2D3748;
-                        font-weight: 400;
-                    }
-
-                    .product-property-value {
-                        color: #0B0E12;
-                        font: 500 16px/24px var(--base-font);
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-products-list.scss b/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-products-list.scss
deleted file mode 100644
index 046563319..000000000
--- a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-products-list.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.block.block-products-list {
-    --products-title-color: #2E82A4;
-    --products-text-color: #2D3748;
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-products.scss b/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-products.scss
deleted file mode 100644
index 26d33711d..000000000
--- a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-products.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.block.block-products {
-    --products-title-color: #2E82A4;
-    --products-text-color: #2D3748;
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-profile.scss b/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-profile.scss
deleted file mode 100644
index 930617ca3..000000000
--- a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/blocks/block-profile.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-.block.block-profile {
-    .profile-aside {
-        border-radius: var(--border-radius);
-        border: 1px solid var(--border-color);
-
-        .profile-menu {
-            .profile-menu-item {
-                margin-bottom: 0;
-                border-radius: 0;
-                box-shadow: 0px -1px 0px 0px #e5e5e5 inset;
-
-                .mdi {
-                    color: #dbdcdb;
-                }
-            }
-        }
-    }
-
-    .profile-content {
-        .card {
-            border: 1px solid var(--border-color);
-
-            .form-group {
-                .form-label {
-                    color: #2d3748;
-                    font: 500 13px/18px var(--base-font);
-                }
-
-                .form-control {
-                    border-radius: var(--border-radius);
-                }
-            }
-        }
-    }
-}
diff --git a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/faq.scss b/react/assets/forus-webshop/scss/goereeoverflakkee/sections/faq.scss
deleted file mode 100644
index e51316ee9..000000000
--- a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/faq.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.section {
-    &.section-faq {
-        margin-left: 0;
-        margin-right: auto;
-    }
-
-    @media screen and (max-width: 1200px) {
-        &.section-faq {
-            margin-right: 0;
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/flow.scss b/react/assets/forus-webshop/scss/goereeoverflakkee/sections/flow.scss
deleted file mode 100644
index cc5a2e772..000000000
--- a/react/assets/forus-webshop/scss/goereeoverflakkee/sections/flow.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.section {
-    .section-title {
-        color: #08749B;
-        font: 500 34px/normal var(--base-font);
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/groningen/components/_breadcrumbs.scss b/react/assets/forus-webshop/scss/groningen/components/_breadcrumbs.scss
deleted file mode 100644
index edc90b993..000000000
--- a/react/assets/forus-webshop/scss/groningen/components/_breadcrumbs.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.block {
-    &.block-breadcrumbs {
-        .breadcrumb-item {
-            color: #4F4F4F;
-            text-decoration: underline;
-
-            &:hover {
-                color: #4F4F4F;
-            }
-
-            &.active {
-                color: #4F4F4F;
-            }
-        }
-
-        +.section-title {
-            margin-top: -20px;
-        }
-    }
-    @media screen and (max-width: 1000px) {
-        &.block-breadcrumbs {      
-            .breadcrumb-item {
-                &.active {
-                    color: var(--tc);
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/groningen/components/_buttons.scss b/react/assets/forus-webshop/scss/groningen/components/_buttons.scss
deleted file mode 100644
index a3c3be772..000000000
--- a/react/assets/forus-webshop/scss/groningen/components/_buttons.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.button {
-    font: 700 16px/1.5em var(--base-font);
-
-    &:hover {
-        box-shadow: none;
-    }
-
-    &.button-primary,
-    &.button-primary-outline {
-        &:hover {
-            text-decoration: underline;
-        }
-    }
-
-    &.button-primary {
-        color: var(--tc-var);
-        background: var(--color-default);
-        text-shadow: none;
-        border: 1px solid transparent;
-        box-shadow: none;
-
-        &:hover {
-            color: var(--color-default);
-            background-color: #fff;
-            box-shadow: none;
-            border: 1px solid var(--color-default);
-        }
-    }
-}
diff --git a/react/assets/forus-webshop/scss/groningen/layout/_footer.scss b/react/assets/forus-webshop/scss/groningen/layout/_footer.scss
deleted file mode 100644
index 56df96868..000000000
--- a/react/assets/forus-webshop/scss/groningen/layout/_footer.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-.block {
-    &.block-footer {
-        padding: 20px 0;
-        p {
-            text-align: left;
-            font: 400 16px/1.5em var(--base-font);
-        }
-
-        a {
-            font: 400 16px/1.5em var(--base-font);
-            color: var(--footer_color);
-            text-decoration: underline;
-
-            &:hover {
-                text-decoration: none;
-                color: var(--footer_color);
-            }
-        }
-
-        .block-markdown {
-            a {
-                color: var(--footer_color);
-            }
-        }
-              
-        .footer-label {
-            color: var(--tc-var);
-            margin-bottom: 15px;
-            
-            img {
-                height: 40px;
-            }
-        }
-
-        .footer-schedule {
-
-            a {
-                font: 400 16px/1.5em var(--base-font);
-                color: var(--tc-var);
-                text-decoration: underline;
-
-                &:hover {
-                    text-decoration: none;
-                    color: var(--tc-var);
-                }
-            }
-        
-            .schedule-label,
-            .schedule-value {
-                font: 400 16px/1.5em var(--base-font);
-                color: var(--tc-var);
-            }
-        }
-
-        .footer-nav {
-            .footer-nav-item {
-                a {
-                    font: 400 16px/1.5em var(--base-font);
-                    color: var(--tc-var);
-                    text-decoration: underline;
-
-                    &:hover {
-                        text-decoration: none;
-                        color: var(--tc-var);
-                    }
-                }
-            }
-        }
-        @media screen and (max-width: 1000px) {
-            p {
-                margin: 0 auto;
-                margin-bottom: 10px;
-            }
-        }
-    }
-
-    &.block-copyrights {
-        background-color: #ffff;
-
-        .links {
-            a {
-                color: #000;
-                &:hover {
-                    color: #000;
-                }
-            }
-        }
-    }
-}
-
diff --git a/react/assets/forus-webshop/scss/groningen/sections/blocks/block-navbar-search.scss b/react/assets/forus-webshop/scss/groningen/sections/blocks/block-navbar-search.scss
deleted file mode 100644
index 681c5c0d8..000000000
--- a/react/assets/forus-webshop/scss/groningen/sections/blocks/block-navbar-search.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.block.block-navbar-search {
-    .search-form {
-        &.form {
-            .navbar-search-label {
-                top: -18px;
-                left: 0;
-                background: none;
-                padding: 0;
-            }
-        }
-    }
-
-    @media screen and (max-width: 1000px) {
-        .search-form {
-            &.form {
-                background: transparent;
-            }
-        }
-    }
-}
diff --git a/react/assets/forus-webshop/scss/groningen/sections/blocks/block-show-more.scss b/react/assets/forus-webshop/scss/groningen/sections/blocks/block-show-more.scss
deleted file mode 100644
index 9c96ab9a3..000000000
--- a/react/assets/forus-webshop/scss/groningen/sections/blocks/block-show-more.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.block.block-show-more {
-    .button {
-        background-color: #fff;
-        color: #000;
-        border-color: #000;
-
-        &:hover {
-            color: var(--color-default);
-            border: 1px solid var(--color-default);
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/groningen/sections/blocks/map.scss b/react/assets/forus-webshop/scss/groningen/sections/blocks/map.scss
deleted file mode 100644
index 130a2ade3..000000000
--- a/react/assets/forus-webshop/scss/groningen/sections/blocks/map.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.block {
-
-    &.block-map {
-
-        .block-content {
-
-            .block-title {
-                font: 700 32px/1.5em var(--base-font);
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/groningen/sections/blocks/profile.scss b/react/assets/forus-webshop/scss/groningen/sections/blocks/profile.scss
deleted file mode 100644
index aa8b52d03..000000000
--- a/react/assets/forus-webshop/scss/groningen/sections/blocks/profile.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-.section {
-    &.section-profile {
-        .section-title {
-            text-align: left;
-            color: var(--tc);
-        }
-    }
-}
-.block {
-    &.block-profile {
-        .profile-aside {
-            .profile-card {
-                .profile-details {
-                    .profile-heading {
-                        color: var(--bc);
-                    }
-                }
-
-                .profile-actions {
-                    .profile-action {
-                        color: var(--tc);
-
-                        .mdi {
-                            color: var(--color-primary);
-                        }
-
-                        &:hover {
-                            color: var(--color-primary);
-                        }
-                    }
-                }
-            }
-
-            .profile-menu {
-                .profile-menu-item {
-                    box-shadow: none;
-                    color: var(--tc-var);
-                    background: var(--color-default);
-                    text-shadow: none;
-                    border: 1px solid transparent;
-                    .mdi {color: var(--tc-var);}
-                    &:hover {
-                        color: var(--color-default);
-                        text-decoration: underline;
-                        background-color: #fff;
-                        box-shadow: none;
-                        border: 1px solid var(--color-default);
-                        .mdi {color: var(--color-default);}
-                    }
-
-                    &.active {
-                        background-color: #fff;
-                        color: var(--color-default);
-                        box-shadow: none;
-                        border: 1px solid var(--color-default);
-                        .mdi {
-                            color: var(--color-default);
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/groningen/sections/blocks/shops_map.scss b/react/assets/forus-webshop/scss/groningen/sections/blocks/shops_map.scss
deleted file mode 100644
index b795cb754..000000000
--- a/react/assets/forus-webshop/scss/groningen/sections/blocks/shops_map.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-.block {
-    &.block-shops_map {
-        .shop_map-header {
-            .shop_map-categories {
-                .shop_map-category-item {
-                    .shop_map-category-item-inner {
-                        background: #5ec0ed;
-                        border-radius: 8px;
-
-                        &:hover {
-                            background: #08abeb;
-                        }
-                    }
-                }
-            }
-        }
-
-        .shops {
-            .shop-item {
-                &.active {
-                    border-right-color: #5ec0ed;
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/groningen/sections/blocks/transactions.scss b/react/assets/forus-webshop/scss/groningen/sections/blocks/transactions.scss
deleted file mode 100644
index 2680f2fbc..000000000
--- a/react/assets/forus-webshop/scss/groningen/sections/blocks/transactions.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.block {
-    &.block-transactions {
-        .transactions-list {
-            .transactions-item {
-                .transactions-item-icon {
-                    .mdi {
-                        color: #91b845;
-                    }
-                }
-
-                &.transactions-item-out {
-                    .transactions-item-amount {
-                        .transactions-item-value {
-                            color: #4c91b3;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/groningen/sections/blocks/voucher.scss b/react/assets/forus-webshop/scss/groningen/sections/blocks/voucher.scss
deleted file mode 100644
index f6d500b0a..000000000
--- a/react/assets/forus-webshop/scss/groningen/sections/blocks/voucher.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.block {
-    &.block-voucher {
-        .base-card {
-            border-radius: 8px;
-            margin-bottom: 70px;
-            .card-footer {
-                background-color: #f6f8fa;
-                border-top-color: #d2e6ff;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/groningen/sections/blocks/vouchers.scss b/react/assets/forus-webshop/scss/groningen/sections/blocks/vouchers.scss
deleted file mode 100644
index df07fc9e7..000000000
--- a/react/assets/forus-webshop/scss/groningen/sections/blocks/vouchers.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.block {
-    &.block-vouchers {
-        .voucher-item {
-            .voucher-details {
-                .voucher-organization {
-                    color: #4c91b3;
-                }
-            }
-
-            .voucher-overview {
-                .voucher-overview-item {
-                    .voucher-overview-label {
-                        color: #4c91b3;
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/groningen/sections/faq.scss b/react/assets/forus-webshop/scss/groningen/sections/faq.scss
deleted file mode 100644
index 75f803eb2..000000000
--- a/react/assets/forus-webshop/scss/groningen/sections/faq.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.section {
-    &.section-faq {
-        .faq {
-            .faq-item {
-                &:hover:not(.active) {
-                    .faq-item-header {
-                        color: var(--color-default);
-
-                        .faq-item-chevron-up,
-                        .faq-item-chevron-down {
-                            color: var(--color-default);
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/groningen/sections/steps.scss b/react/assets/forus-webshop/scss/groningen/sections/steps.scss
deleted file mode 100644
index 5729f991c..000000000
--- a/react/assets/forus-webshop/scss/groningen/sections/steps.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-.section {
-    &.section-steps {
-        padding-top: 50px;
-        padding-bottom: 50px;
-        background: #fff;
-        .section-splash{
-            display:none;
-        }
-        .section-sprite{
-            display:none;
-        }
-        .steps {
-            background: none;
-            .step-item {
-                min-height: 140px;
-                margin-bottom: 30px !important;
-                .step-item-content {
-                    &:before {
-                        position: absolute;
-                        content: '';
-                        left: unset;
-                        height: 118px;
-                        width: 118px;
-                        display: block;
-                        right: 115%;
-                        top: 25%;
-                    }
-                }
-                h4 {
-                    color: var(--tc);
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/groningen/sections/vouchers.scss b/react/assets/forus-webshop/scss/groningen/sections/vouchers.scss
deleted file mode 100644
index 9a592bf4f..000000000
--- a/react/assets/forus-webshop/scss/groningen/sections/vouchers.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.section {
-    &.section-voucher-details,
-    &.section-product {
-        .section-title {
-            display: none;
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/hartvanwestbrabant/components/_buttons.scss b/react/assets/forus-webshop/scss/hartvanwestbrabant/components/_buttons.scss
deleted file mode 100644
index 646cb0bbe..000000000
--- a/react/assets/forus-webshop/scss/hartvanwestbrabant/components/_buttons.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.block {
-    &.block-show-more, &.block-map {
-        .button {
-            border: 2px solid #24A1A1;
-            border-radius: 5px;
-            background-color: #fff;
-            color: #24A1A1;
-
-            &:hover {
-                background-color: #24A1A1;
-                color: #FFFFFF;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/hartvanwestbrabant/includes/shame.scss b/react/assets/forus-webshop/scss/hartvanwestbrabant/includes/shame.scss
deleted file mode 100644
index 8ea34bf53..000000000
--- a/react/assets/forus-webshop/scss/hartvanwestbrabant/includes/shame.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.section-title, .block-title {
-    color: #24A1A1;
-}
-
-.block {
-    &.block-copyrights{
-        .links{
-            a {
-                color: #ffffff;
-            }
-        } 
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/hartvanwestbrabant/sections/blocks/block-lang-control.scss b/react/assets/forus-webshop/scss/hartvanwestbrabant/sections/blocks/block-lang-control.scss
deleted file mode 100644
index fa4d064f4..000000000
--- a/react/assets/forus-webshop/scss/hartvanwestbrabant/sections/blocks/block-lang-control.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.block.block-lang-control {
-    .lang-control-input {
-        .lang-control-search {
-            color: #ffffff;
-        }
-    }
-}
diff --git a/react/assets/forus-webshop/scss/heumen/includes/shame.scss b/react/assets/forus-webshop/scss/heumen/includes/shame.scss
deleted file mode 100644
index 7f6e5dc90..000000000
--- a/react/assets/forus-webshop/scss/heumen/includes/shame.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.block {
-    &.block-copyrights{
-        .links{
-            a {
-                color: #ffffff;
-            }
-        } 
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/includes/blocks/_block.scss b/react/assets/forus-webshop/scss/includes/blocks/_block.scss
new file mode 100644
index 000000000..6b7a53a4e
--- /dev/null
+++ b/react/assets/forus-webshop/scss/includes/blocks/_block.scss
@@ -0,0 +1,11 @@
+.block {
+    .block-title {
+        color: var(--heading-color);
+        font: 500 32px/42px var(--heading-font-family);
+
+        a {
+            font: inherit !important;
+            color: inherit !important;
+        }
+    }
+}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-2fa-restriction.scss b/react/assets/forus-webshop/scss/includes/blocks/block-2fa-restriction.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-2fa-restriction.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-2fa-restriction.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-about-me_app.scss b/react/assets/forus-webshop/scss/includes/blocks/block-about-me_app.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-about-me_app.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-about-me_app.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-accessibility.scss b/react/assets/forus-webshop/scss/includes/blocks/block-accessibility.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-accessibility.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-accessibility.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-action-card.scss b/react/assets/forus-webshop/scss/includes/blocks/block-action-card.scss
similarity index 99%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-action-card.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-action-card.scss
index 4246ec82f..e2f8e76ab 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/block-action-card.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-action-card.scss
@@ -4,6 +4,7 @@
     padding: 25px;
     margin-bottom: 30px;
     position: relative;
+    border: 1px solid var(--border-color);
     border-radius: var(--border-radius);
     box-shadow: var(--box-shadow);
     cursor: default;
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-announcement.scss b/react/assets/forus-webshop/scss/includes/blocks/block-announcement.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-announcement.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-announcement.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-app_download.scss b/react/assets/forus-webshop/scss/includes/blocks/block-app_download.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-app_download.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-app_download.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-app_links.scss b/react/assets/forus-webshop/scss/includes/blocks/block-app_links.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-app_links.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-app_links.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-auth-2fa.scss b/react/assets/forus-webshop/scss/includes/blocks/block-auth-2fa.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-auth-2fa.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-auth-2fa.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-auth-widget.scss b/react/assets/forus-webshop/scss/includes/blocks/block-auth-widget.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-auth-widget.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-auth-widget.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-banner.scss b/react/assets/forus-webshop/scss/includes/blocks/block-banner.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-banner.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-banner.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-bookmark-toggle.scss b/react/assets/forus-webshop/scss/includes/blocks/block-bookmark-toggle.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-bookmark-toggle.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-bookmark-toggle.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-card-table.scss b/react/assets/forus-webshop/scss/includes/blocks/block-card-table.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-card-table.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-card-table.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-cms-funds.scss b/react/assets/forus-webshop/scss/includes/blocks/block-cms-funds.scss
similarity index 86%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-cms-funds.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-cms-funds.scss
index 51372ca96..415b0699f 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/block-cms-funds.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-cms-funds.scss
@@ -1,11 +1,13 @@
 .block.block-cms-funds {
     width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
 
     .fund-item {
         width: 100%;
         display: flex;
-        margin: 0 0 60px;
-        padding: 0 0 60px;
+        padding: 0 0 40px;
         border-bottom: 1px solid var(--border-color);
 
         .fund-media {
@@ -32,11 +34,13 @@
                 margin: 0 0 5px;
                 line-height: 20px;
                 order: 1;
+                font-size: var(--cms-funds-label-font-size);
+                background: var(--cms-funds-label-background);
             }
     
             .fund-title {
-                font: 400 24px/36px var(--base-font);
-                color: var(--htc);
+                font: var(--cms-funds-title-font);
+                color: var(--cms-funds-title-color);
                 margin: 0 0 20px;
                 order: 2;
             }
@@ -73,30 +77,32 @@
 
         &:last-child {
             border-bottom: none;
-            margin-bottom: 0;
+            padding-bottom: 0;
         }
     }
 
     @media screen and (min-width: 1000px) {
         &.block-cms-funds-compact {
-            --padding: 30px;
+            --gap: 25px;
+            gap: var(--gap);
             display: flex;
             flex-wrap: wrap;
-            margin: 0 -20px 0;
-            width: fit-content;
-    
+            flex-direction: row;
+            justify-content: flex-start;
+
             .fund-item {
                 display: flex;
                 flex-wrap: wrap;
                 flex-direction: column;
-                width: calc(calc(100% / 3) - var(--padding));
-                border: 1px solid var(--border-color);
+                flex: 1 1 calc((100% - (calc(var(--gap) * 2))) / 3);
+                box-sizing: border-box;
                 background: #FFF;
+                padding: 0;
+                border: 1px solid var(--border-color);
                 box-shadow: var(--box-shadow);
-                margin: 0 calc(var(--padding) / 2) 40px;
+                margin: 0 0;
                 border-radius: var(--border-radius);
                 position: relative;
-                padding: 0;
                 overflow: hidden;
     
                 .fund-media {
@@ -120,7 +126,8 @@
                     }
     
                     .fund-title {
-                        font: 400 24px/36px var(--base-font);
+                        font: var(--cms-funds-compact-title-font);
+                        color: var(--cms-funds-compact-title-color);
                         margin: 0 0 15px;
                     }
     
@@ -137,15 +144,14 @@
                     }
     
                     .fund-button {
-                        text-align: right;
                         padding-top: 15px;
     
                         .fund-button-link {
                             padding: 0;
                             display: inline-block;
                             text-decoration: underline;
-                            color: var(--color-primary);
-                            font: 600 18px/20px var(--base-font);
+                            font: var(--cms-funds-link-font);
+                            color: var(--cms-funds-link-color);
                         }
 
                         .fund-button-button {
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-cms.scss b/react/assets/forus-webshop/scss/includes/blocks/block-cms.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-cms.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-cms.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-cookie-banner.scss b/react/assets/forus-webshop/scss/includes/blocks/block-cookie-banner.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-cookie-banner.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-cookie-banner.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-data-list.scss b/react/assets/forus-webshop/scss/includes/blocks/block-data-list.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-data-list.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-data-list.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-empty.scss b/react/assets/forus-webshop/scss/includes/blocks/block-empty.scss
similarity index 90%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-empty.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-empty.scss
index 706c836a4..75686f009 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/block-empty.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-empty.scss
@@ -1,5 +1,6 @@
 .block.block-empty {
     background: #fff;
+    border: 1px solid var(--border-color);
     border-radius: var(--border-radius);
     box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05);
     padding: 30px 30px;
@@ -70,18 +71,9 @@
 
     @media screen and (max-width: 1700px) {
         &.block-empty {
-            padding: 20px;
-
             .block-title {
                 font: 700 20px/26px var(--base-font);
             }
         }
     }
-
-    @media screen and (max-width: 1000px) {
-        &.block-empty {
-            border: 1px solid #ddecff;
-            text-align: center;
-        }
-    }
 }
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-error-page.scss b/react/assets/forus-webshop/scss/includes/blocks/block-error-page.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-error-page.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-error-page.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-exception.scss b/react/assets/forus-webshop/scss/includes/blocks/block-exception.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-exception.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-exception.scss
diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-faq.scss b/react/assets/forus-webshop/scss/includes/blocks/block-faq.scss
new file mode 100644
index 000000000..bb408c404
--- /dev/null
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-faq.scss
@@ -0,0 +1,172 @@
+.block.block-faq {
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+    align-items: var(--faq-align);
+
+    .faq-item {
+        background: #fff;
+        border: 1px solid var(--border-color);
+        border-radius: 4px;
+        margin-bottom: 10px;
+        position: relative;
+        box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.1);
+        transition: 0.4s;
+        width: var(--faq-width);
+
+        .faq-item-header {
+            padding: 15px 45px 15px 30px;
+            font: 500 18px var(--base-font);
+            color: var(--faq-header-color);
+            position: relative;
+            transition: 0.4s;
+            cursor: pointer;
+
+            .faq-item-title {
+                color: inherit;
+                font: inherit;
+                margin: 0;
+            }
+
+            .faq-item-chevron-up,
+            .faq-item-chevron-down {
+                position: absolute;
+                right: 15px;
+                top: 50%;
+                transform: translate(0, -50%);
+                color: var(--faq-header-color);
+                font-size: 28px;
+                transition: 0.4s;
+                display: none;
+            }
+
+            .faq-item-chevron-down {
+                display: block;
+            }
+
+            &:hover {
+                color: var(--faq-header-color-hover);
+
+                .faq-item-chevron-up,
+                .faq-item-chevron-down {
+                    color: var(--faq-header-color-hover);
+                }
+            }
+        }
+
+        .faq-item-content {
+            font: 400 16px var(--base-font);
+            padding: 0 200px 20px 30px;
+            color: #646f79;
+            display: none;
+            cursor: default;
+
+            a {
+                color: var(--color-primary);
+                font-size: 16px;
+                line-height: normal;
+            }
+
+            p {
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+
+        &.active {
+            .faq-item-header {
+                .faq-item-chevron-up,
+                .faq-item-chevron-down {
+                    display: none;
+                }
+
+                .faq-item-chevron-up {
+                    display: block;
+                }
+            }
+
+            .faq-item-content {
+                display: block;
+            }
+        }
+    }
+
+    &.block-faq-fund {
+        .faq-item {
+            margin: 0 0 0;
+            border-radius: 0;
+            box-shadow: none;
+            border: 1px solid var(--border-color);
+            border-bottom: 0;
+            overflow: hidden;
+
+            .faq-item-header {
+                padding: 15px 20px;
+                font: 600 18px/30px var(--base-font);
+                background-color: #f7f7f7;
+
+                .faq-item-chevron-up,
+                .faq-item-chevron-down {
+                    font-size: 30px;
+                }
+
+                .faq-item-title {
+                    margin-right: 20px;
+                }
+            }
+
+            .faq-item-content {
+                padding: 15px 20px;
+                border-top: 1px solid var(--border-color);
+            }
+
+            &:first-child {
+                border-top-left-radius: calc(var(--border-radius) / 2);
+                border-top-right-radius: calc(var(--border-radius) / 2);
+            }
+
+            &:last-child {
+                border-bottom-left-radius: calc(var(--border-radius) / 2);
+                border-bottom-right-radius: calc(var(--border-radius) / 2);
+                border-bottom: 1px solid var(--border-color);
+            }
+
+            &:hover:not(.active) {
+                box-shadow: none;
+            }
+        }
+    }
+
+    @media screen and (max-width: 1700px) {
+        .faq-item {
+            .faq-item-header {
+                font: 500 15px var(--base-font);
+            }
+
+            .faq-item-content {
+                font: 400 14px var(--base-font);
+
+                ul li {
+                    font: 400 14px var(--base-font);
+                }
+            }
+        }
+    }
+
+    @media screen and (max-width: 1000px) {
+        padding: 0;
+        max-width: 100%;
+        width: 600px;
+
+        .faq-item {
+            .faq-item-header {
+                font: 500 14px var(--base-font);
+            }
+
+            .faq-item-content {
+                font: 400 14px var(--base-font);
+            }
+        }
+    }
+}
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-file-uploader.scss b/react/assets/forus-webshop/scss/includes/blocks/block-file-uploader.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-file-uploader.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-file-uploader.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-fund-pre-check-result.scss b/react/assets/forus-webshop/scss/includes/blocks/block-fund-pre-check-result.scss
similarity index 97%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-fund-pre-check-result.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-fund-pre-check-result.scss
index 94ecddf58..71d05d2be 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/block-fund-pre-check-result.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-fund-pre-check-result.scss
@@ -36,7 +36,7 @@
                 gap: 5px;
 
                 .fund-name {
-                    font: 700 22px/32px var(--hf);
+                    font: 700 22px/32px var(--heading-font-family);
                     margin: 0 0;
                     color: var(--tc);
 
@@ -428,11 +428,11 @@
 
                 .fund-details {
                     .fund-name {
-                        font: 600 14px/22px var(--hf);
+                        font: 600 14px/22px var(--heading-font-family);
                     }
 
                     .fund-description {
-                        font: 400 12px/20px var(--hf);
+                        font: 400 12px/20px var(--heading-font-family);
 
                         .button {
                             margin-left: 0;
@@ -442,12 +442,12 @@
                     .button {
                         width: auto;
                         margin-left: -85px;
-                        font: 600 11px/15px var(--hf);
+                        font: 600 11px/15px var(--heading-font-family);
                     }
                 }
 
                 .fund-related-funds-block {
-                    font: 600 12px/18px var(--hf);
+                    font: 600 12px/18px var(--heading-font-family);
                 }
             }
 
@@ -469,7 +469,7 @@
                     padding: 15px;
 
                     .fund-pre-check-note-block {
-                        font: 600 12px/18px var(--hf);
+                        font: 600 12px/18px var(--heading-font-family);
                     }
 
                     .fund-pre-check-info {
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-fund-pre-check.scss b/react/assets/forus-webshop/scss/includes/blocks/block-fund-pre-check.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-fund-pre-check.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-fund-pre-check.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-fund-request.scss b/react/assets/forus-webshop/scss/includes/blocks/block-fund-request.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-fund-request.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-fund-request.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-fund-requests.scss b/react/assets/forus-webshop/scss/includes/blocks/block-fund-requests.scss
similarity index 96%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-fund-requests.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-fund-requests.scss
index 53fde06dc..fd4670977 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/block-fund-requests.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-fund-requests.scss
@@ -50,7 +50,7 @@
                     word-wrap: break-word;
         
                     .fund-request-name {
-                        font: 700 18px/27px var(--hf);
+                        font: 700 18px/27px var(--heading-font-family);
                         margin: 0 0 5px;
                         color: #282b39;
                     }
@@ -149,7 +149,7 @@
     
                     .fund-request-details {
                         .fund-request-name {
-                            font: 700 14px/20px var(--hf);
+                            font: 700 14px/20px var(--heading-font-family);
                             margin: 0 0 5px;
                         }
             
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-fund.scss b/react/assets/forus-webshop/scss/includes/blocks/block-fund.scss
similarity index 97%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-fund.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-fund.scss
index 9bd8108a9..c33adf0ef 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/block-fund.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-fund.scss
@@ -26,7 +26,7 @@
         gap: 30px;
 
         .fund-name {
-            font: 500 2.5em var(--hf);
+            font: 500 2.5em var(--heading-font-family);
             margin: 0 0 10px;
             color: var(--tc);
 
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-funds-list.scss b/react/assets/forus-webshop/scss/includes/blocks/block-funds-list.scss
similarity index 96%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-funds-list.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-funds-list.scss
index 6486052e0..88a1f5b09 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/block-funds-list.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-funds-list.scss
@@ -58,7 +58,7 @@
             }
 
             .fund-name {
-                font: 700 22px/32px var(--hf);
+                font: 700 22px/32px var(--heading-font-family);
                 margin: 0 0 5px;
                 color: var(--tc);
                 padding-right: 100px;
@@ -132,7 +132,7 @@
                 }
 
                 .fund-name {
-                    font: 700 14px/20px var(--hf);
+                    font: 700 14px/20px var(--heading-font-family);
                 }
 
                 .fund-description {
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-info-box.scss b/react/assets/forus-webshop/scss/includes/blocks/block-info-box.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-info-box.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-info-box.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-key-value-list.scss b/react/assets/forus-webshop/scss/includes/blocks/block-key-value-list.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-key-value-list.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-key-value-list.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-label-tabs.scss b/react/assets/forus-webshop/scss/includes/blocks/block-label-tabs.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-label-tabs.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-label-tabs.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-lang-control.scss b/react/assets/forus-webshop/scss/includes/blocks/block-lang-control.scss
similarity index 98%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-lang-control.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-lang-control.scss
index e2a4764c3..df6d50cd4 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/block-lang-control.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-lang-control.scss
@@ -13,7 +13,7 @@
             flex-direction: row;
             gap: 4px;
             font: 600 14px/20px var(--base-font);
-            color: #282b39;
+            color: var(--navbar-menu-item-color);
             padding: 6px 6px;
             cursor: pointer;
 
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-loader.scss b/react/assets/forus-webshop/scss/includes/blocks/block-loader.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-loader.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-loader.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-map-office-card.scss b/react/assets/forus-webshop/scss/includes/blocks/block-map-office-card.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-map-office-card.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-map-office-card.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-map_card.scss b/react/assets/forus-webshop/scss/includes/blocks/block-map_card.scss
similarity index 96%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-map_card.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-map_card.scss
index 4f5830025..a469d2592 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/block-map_card.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-map_card.scss
@@ -1,5 +1,6 @@
 .block.block-map_card {
     box-shadow: var(--box-shadow);
+    border: 1px solid var(--border-color);
     border-radius: var(--border-radius);
     background: #fff;
     margin-bottom: 30px;
@@ -10,7 +11,7 @@
         border-bottom: 1px solid var(--border-color);
         background: #ffffff;
         padding: 20px 25px;
-        font: 700 22px/30px var(--hf);
+        font: var(--heading-pane-font);
         color: var(--tc);
         margin: 0 0 0;
 
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-markdown.scss b/react/assets/forus-webshop/scss/includes/blocks/block-markdown.scss
similarity index 85%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-markdown.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-markdown.scss
index d089e04f7..3437699b5 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/block-markdown.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-markdown.scss
@@ -1,36 +1,45 @@
 .block.block-markdown {
     text-align: left;
-    font: 400 16px/1.5em var(--base-font);
+    font: var(--markdown-font);
     margin-bottom: 30px;
 
     h1 {
-        font: 500 2.5em var(--hf);
+        font: 500 2.5em var(--heading-font-family);
         color: var(--htc);
         margin: 30px 0 30px 0;
         text-align: left;
     }
 
     h2 {
-        font: 500 2em var(--hf);
+        font: 500 2em var(--heading-font-family);
         color: var(--htc);
         margin: 30px 0 30px 0;
         text-align: left;
     }
 
     h3 {
-        font: 500 1.5em var(--hf);
+        font: 500 1.5em var(--heading-font-family);
         color: var(--htc);
         margin: 0 0 0.9em;
         text-align: left;
     }
 
     h4 {
-        font: 500 1.25em var(--hf);
+        font: 500 1.25em var(--heading-font-family);
         color: var(--htc);
         margin: 0 0 0.9em;
         text-align: left;
     }
 
+    h1,
+    h2,
+    h3,
+    h4 {
+        &:first-child {
+            margin-top: 0;
+        }
+    }
+
     p {
         margin-bottom: 15px;
         text-align: left;
@@ -53,8 +62,9 @@
 
     a:not(.button) {
         color: var(--tc-link);
-        font-weight: 500;
-        transition: color .4s, background-color .4s;
+        transition:
+            color 0.4s,
+            background-color 0.4s;
         font: inherit;
         text-decoration: underline;
 
@@ -92,7 +102,7 @@
         font: inherit;
 
         & > caption {
-            font: 500 1.25em var(--hf);
+            font: 500 1.25em var(--heading-font-family);
             color: var(--htc);
             margin: 0 0 0.9em;
             text-align: left;
@@ -207,17 +217,17 @@
         font: 400 14px/22px var(--base-font) !important;
 
         h1 {
-            font: 500 1.8em var(--hf);
+            font: 500 1.8em var(--heading-font-family);
             margin-bottom: 1em;
         }
 
         h2 {
-            font: 500 1.6em var(--hf);
+            font: 500 1.6em var(--heading-font-family);
             margin-bottom: 1em;
         }
 
         h3 {
-            font: 500 1.3em var(--hf);
+            font: 500 1.3em var(--heading-font-family);
             margin-bottom: 1em;
         }
     }
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-mobile-menu.scss b/react/assets/forus-webshop/scss/includes/blocks/block-mobile-menu.scss
similarity index 91%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-mobile-menu.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-mobile-menu.scss
index b5acde663..08fd2d902 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/block-mobile-menu.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-mobile-menu.scss
@@ -166,24 +166,6 @@ $footer_base_font: 'Open Sans', arial, sans-serif;
                         height: 10px;
                         margin-right: 5px;
                     }
-
-                    &.button-start {
-                        background-color: var(--btn-auth-bg);
-                        border: solid 1px var(--btn-auth-border);
-                        color: var(--tc-auth-btn);
-
-                        .mdi {
-                            color: var(--tc-auth-btn);
-                        }
-
-                        &:hover {
-                            border: solid 1px var(--btn-auth-border);
-
-                            .mdi {
-                                color: var(--tc-auth-btn);
-                            }
-                        }
-                    }
                 }
 
                 &.active {
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-navbar-desktop.scss b/react/assets/forus-webshop/scss/includes/blocks/block-navbar-desktop.scss
similarity index 99%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-navbar-desktop.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-navbar-desktop.scss
index 693eef496..3a66fe2ce 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/block-navbar-desktop.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-navbar-desktop.scss
@@ -229,7 +229,7 @@
             align-items: center;
             justify-content: center;
             border-color: var(--color-default);
-            border-radius: var(--btn-border-radius);
+            border-radius: var(--button-border-radius);
             background: var(--btn-start-bg);
         }
 
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-navbar-mobile.scss b/react/assets/forus-webshop/scss/includes/blocks/block-navbar-mobile.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-navbar-mobile.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-navbar-mobile.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-navbar-search.scss b/react/assets/forus-webshop/scss/includes/blocks/block-navbar-search.scss
similarity index 98%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-navbar-search.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-navbar-search.scss
index 413ec9733..1b6b7e024 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/block-navbar-search.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-navbar-search.scss
@@ -46,9 +46,9 @@
             text-align: center;
             font: 500 14px/14px var(--base-font);
             position: absolute;
-            left: 16px;
+            left: var(--search-bar-label-left);
             z-index: 10;
-            padding: 0 4px;
+            padding: 0 var(--search-bar-label-padding) !important;
             top: var(--search-bar-label-top) !important;
             background: var(--search-bar-label-background) !important;
         }
@@ -123,9 +123,9 @@
                 }
 
                 &.active {
+                    color: var(--search-result-sidebar-item-active-color);
+                    background: var(--search-result-sidebar-item-active-background);
                     box-shadow: 2px 2px 5px rgba($color: #000000, $alpha: 0.1);
-                    background-color: #fff;
-                    color: #a80a2d;
                 }
             }
         }
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-notifications-table.scss b/react/assets/forus-webshop/scss/includes/blocks/block-notifications-table.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-notifications-table.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-notifications-table.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-office.scss b/react/assets/forus-webshop/scss/includes/blocks/block-office.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-office.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-office.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-offices.scss b/react/assets/forus-webshop/scss/includes/blocks/block-offices.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-offices.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-offices.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-organization-info.scss b/react/assets/forus-webshop/scss/includes/blocks/block-organization-info.scss
similarity index 57%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-organization-info.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-organization-info.scss
index e61479182..4b187944b 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/block-organization-info.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-organization-info.scss
@@ -2,17 +2,30 @@
     display: block;
     width: 100%;
     padding: 20px 0 20px 0;
+    margin: 60px 0;
+    border-bottom: 1px solid #E5E5E5;
 
     .info-block-panel {
         width: 100%;
-        margin: 0px 0 60px 0;
+        margin: 0 0 60px 0;
+
+        a {
+            font: 600 18px/18px var(--base-font);
+            color: #950022;
+
+            &:hover {
+                text-decoration: none;
+            }
+        }
+
 
         .block-title {
-            font: 700 22px/35px var(--base-font);
+            font: 400 32px/48px 'Oranda';
         }
 
         .block-description {
             padding-right: 50px;
+            font-size: 16px;
         }
 
         .block-list {
@@ -29,6 +42,24 @@
                     text-decoration: none;
                 }
             }
+
+            li {
+                margin-bottom: 16px;
+
+                a {
+                    font-size: 18px;
+                    color: #176B55;
+
+                    &:hover {
+                        text-decoration: underline;
+                        color: #17564a;
+                    }
+                }
+
+                &::marker {
+                    color: #E5E5E5;
+                }
+            }
         }
 
         a {
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-organizations.scss b/react/assets/forus-webshop/scss/includes/blocks/block-organizations.scss
similarity index 97%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-organizations.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-organizations.scss
index 9105cc778..1d1eb3228 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/block-organizations.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-organizations.scss
@@ -33,7 +33,7 @@
                     display: flex;
                     flex-direction: column;
                     flex-grow: 1;
-                    font: 600 16px/20px var(--hf);
+                    font: 600 16px/20px var(--heading-font-family);
                     text-align: left;
     
                     .organization-title-value {
@@ -124,10 +124,6 @@
                 }
             }
 
-            &.active {
-                border: 1px solid #b1b1b1;
-            }
-
             &:hover {
                 box-shadow: var(--showcase-item-hover-shadow);
             }
@@ -269,7 +265,7 @@
                     }
 
                     .organization-title {
-                        font: 600 12px/18px var(--hf);
+                        font: 600 12px/18px var(--heading-font-family);
 
                         .organization-page-link {
                             font: 600 10px/12px var(--base-font);
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-page-loading-bar.scss b/react/assets/forus-webshop/scss/includes/blocks/block-page-loading-bar.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-page-loading-bar.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-page-loading-bar.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-pane.scss b/react/assets/forus-webshop/scss/includes/blocks/block-pane.scss
similarity index 88%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-pane.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-pane.scss
index 1d0572b8d..719ac0769 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/block-pane.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-pane.scss
@@ -2,6 +2,7 @@
     box-shadow: var(--box-shadow);
     margin-bottom: 30px;
     border-radius: var(--border-radius);
+    border: 1px solid var(--border-color);
     cursor: default;
 
     .pane-head,
@@ -24,7 +25,7 @@
     .pane-head {
         background: #ffffff;
         padding: 20px 25px;
-        font: 700 22px/30px var(--hf);
+        font: var(--heading-pane-font);
         color: var(--tc);
         margin: 0 0 0;
 
@@ -37,9 +38,9 @@
             height: 30px;
             min-width: 30px;
             text-align: center;
-            background-color: var(--color-primary);
-            color: #fff;
             font: 700 16px/30px var(--base-font);
+            color: var(--showcase-title-count-color);
+            background: var(--showcase-title-count-background);
             border-radius: 30px;
         }
 
@@ -57,7 +58,9 @@
                 position: relative;
                 margin-left: 5px;
                 display: block;
-                transition: color .4s, background-color .4s;
+                transition:
+                    color 0.4s,
+                    background-color 0.4s;
                 font-size: 1.4em;
                 transform: translate(0, 0);
                 line-height: 20px;
@@ -106,4 +109,4 @@
             padding: 20px;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-payouts.scss b/react/assets/forus-webshop/scss/includes/blocks/block-payouts.scss
similarity index 96%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-payouts.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-payouts.scss
index 009787bb3..a80c501b0 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/block-payouts.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-payouts.scss
@@ -39,7 +39,7 @@
             gap: 5px;
 
             .payout-name {
-                font: 700 18px/22px var(--hf);
+                font: 700 18px/22px var(--heading-font-family);
                 margin: 0 0;
                 color: var(--tc);
             }
@@ -116,7 +116,7 @@
 
             .payout-details {
                 .payout-name {
-                    font: 600 14px/20px var(--hf);
+                    font: 600 14px/20px var(--heading-font-family);
                 }
 
                 .payout-organization {
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-pincode.scss b/react/assets/forus-webshop/scss/includes/blocks/block-pincode.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-pincode.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-pincode.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-pre-check-banner.scss b/react/assets/forus-webshop/scss/includes/blocks/block-pre-check-banner.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-pre-check-banner.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-pre-check-banner.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-preferences.scss b/react/assets/forus-webshop/scss/includes/blocks/block-preferences.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-preferences.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-preferences.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-products-list.scss b/react/assets/forus-webshop/scss/includes/blocks/block-products-list.scss
similarity index 87%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-products-list.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-products-list.scss
index a7ea905ff..31a20af16 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/block-products-list.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-products-list.scss
@@ -1,6 +1,4 @@
 .block.block-products-list {
-    --products-title-color: var(--tc);
-    --products-text-color: var(--tc);
     --products-gap: 15px;
 
     display: flex;
@@ -16,7 +14,7 @@
         display: flex;
         position: relative;
         flex-direction: row;
-        transition: box-shadow .4s;
+        transition: box-shadow 0.4s;
 
         .product-photo {
             flex: 0 0 105px;
@@ -61,7 +59,8 @@
 
                 .product-title {
                     color: var(--products-title-color);
-                    font: 700 18px/26px var(--hf);
+                    font: 700 18px/26px var(--heading-font-family);
+                    transition: .4s color;
                 }
 
                 .product-subtitle {
@@ -86,6 +85,14 @@
 
         &:hover {
             box-shadow: var(--showcase-item-hover-shadow);
+
+            .product-content {
+                .product-details {
+                    .product-title {
+                        color: var(--products-title-hover-color);
+                    }
+                }
+            }
         }
     }
 
@@ -98,7 +105,7 @@
             .product-content {
                 .product-details {
                     .product-title {
-                        font: 700 15px/22px var(--hf);
+                        font: 700 15px/22px var(--heading-font-family);
                     }
 
                     .product-subtitle {
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-products.scss b/react/assets/forus-webshop/scss/includes/blocks/block-products.scss
similarity index 83%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-products.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-products.scss
index 28e6a23ba..013fb7081 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/block-products.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-products.scss
@@ -1,9 +1,7 @@
 .block.block-products {
     --products-columns: 3;
-    --products-gap: 20px;
+    --products-gap: 25px;
     --products-content-padding: 15px;
-    --products-title-color: var(--tc);
-    --products-text-color: var(--tc);
 
     display: flex;
     flex-wrap: wrap;
@@ -98,25 +96,6 @@
         }
     }
 
-    &.block-products-lg {
-        --products-gap: 30px;
-        --products-content-padding: 20px;
-
-        .product-item {
-            .product-content {
-                .product-details {
-                    .product-title {
-                        font: 700 18px/26px var(--base-font);
-                    }
-                    
-                    .product-price {
-                        padding-top: 15px;
-                    }
-                }
-            }
-        }
-    }
-
     @media screen and (max-width: 800px) {
         --products-columns: 2;
     }
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-profile.scss b/react/assets/forus-webshop/scss/includes/blocks/block-profile.scss
similarity index 64%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-profile.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-profile.scss
index ac3ffb4ce..88ef98933 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/block-profile.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-profile.scss
@@ -7,104 +7,22 @@
         position: relative;
         z-index: 2;
 
-        .profile-card {
-            background: #fff;
-            border-radius: 10px;
-            box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05);
-            padding: 20px;
-            margin-bottom: 30px;
-            cursor: default;
-
-            .profile-qr_code {
-                padding-top: 10px;
-                width: 100%;
-                margin-bottom: 25px;
-
-                img {
-                    display: block;
-                    margin: 0 auto;
-                    max-width: 100%;
-                    width: 160px;
-                }
-            }
-
-            .profile-details {
-                text-align: center;
-
-                .profile-heading {
-                    font: 700 18px var(--base-font);
-                    color: #315efd;
-                    margin-bottom: 5px;
-                }
-
-                .profile-description {
-                    font: 400 13px var(--base-font);
-                    color: #646f79;
-                    margin-bottom: 20px;
-                }
-            }
-
-            .profile-address {
-                margin: 0 -20px;
-                padding: 20px;
-                border-top: 1px solid #e9ecee;
-                border-bottom: 1px solid #e9ecee;
-
-                .profile-address-label {
-                    font: 400 10px var(--base-font);
-                    color: #646f79;
-                    margin-bottom: 5px;
-                }
-
-                .profile-address-value {
-                    font: 700 16px var(--base-font);
-                    color: #282b39;
-                    @include ellipsis();
-                }
-            }
-
-            .profile-actions {
-                margin: 0 -20px -40px;
-                padding: 20px 20px 20px;
-                @include cf();
-
-                .profile-action {
-                    font: 700 12px var(--base-font);
-                    color: #2f5bf6;
-                    float: left;
-                    margin-right: 30px;
-                    margin-bottom: 20px;
-                    transition: color 0.4s;
-                    cursor: pointer;
-                    @include cf();
-
-                    .mdi {
-                        color: inherit;
-                        float: left;
-                        margin-right: 5px;
-                        font-size: 1.6em;
-                        line-height: initial;
-                        margin-top: -0.25em;
-                    }
-
-                    &:hover {
-                        color: var(--color-primary-light);
-                    }
-                }
-            }
-        }
-
         .profile-aside-block {
             position: relative;
             padding: 20px;
             width: 100%;
             background: #fff;
+            border: 1px solid var(--border-color);
             border-radius: var(--border-radius);
             box-shadow: var(--box-shadow);
             margin-bottom: 20px;
         }
 
         .profile-menu {
+            display: flex;
+            flex-direction: column;
+            gap: var(--profile-menu-item-gap);
+
             .profile-menu-item {
                 padding: 14px 19px;
                 font: 700 13px/20px var(--base-font);
@@ -113,7 +31,7 @@
                 background-color: var(--profile-menu-item-background);
                 border: 1px solid var(--profile-menu-item-border-color);
                 border-radius: var(--profile-menu-item-border-radius);
-                margin-bottom: 15px;
+                margin-bottom: -1px;
                 display: block;
                 position: relative;
                 transition:
@@ -123,7 +41,7 @@
                     border 0.4s;
 
                 .mdi {
-                    color: var(--profile-menu-item-color);
+                    color: var(--profile-menu-item-color-icon);
                     position: absolute;
                     right: 15px;
                     top: 50%;
@@ -162,7 +80,7 @@
             margin-bottom: 15px;
 
             .profile-content-title {
-                font: 700 22px/32px var(--hf);
+                font: 700 22px/32px var(--heading-font-family);
                 color: var(--tc);
                 width: 100%;
                 margin: 0;
@@ -195,7 +113,7 @@
                 }
 
                 &.profile-content-title-sm {
-                    font: 700 18px/27px var(--hf);
+                    font: 700 18px/27px var(--heading-font-family);
                 }
             }
 
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-provider.scss b/react/assets/forus-webshop/scss/includes/blocks/block-provider.scss
similarity index 87%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-provider.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-provider.scss
index 713b9ca71..e9c7b2559 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/block-provider.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-provider.scss
@@ -36,7 +36,7 @@
     }
 
     .provider-content {
-        width: 900px;
+        width: 1000px;
         padding: 0 20px;
         max-width: 100%;
         margin: 0 auto;
@@ -77,6 +77,20 @@
             }
         }
 
+        .block.block-organizations {
+            .organization-item {
+                .organization-pane {
+                    box-shadow: var(--box-shadow);
+                }
+
+                .organization-offices {
+                    .block.block-offices {
+                        box-shadow: var(--box-shadow);
+                    }
+                }
+            }
+        }
+
         .block-pane:first-child {
             margin-top: 30px;
         }
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-push-notifications.scss b/react/assets/forus-webshop/scss/includes/blocks/block-push-notifications.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-push-notifications.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-push-notifications.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-qr-code.scss b/react/assets/forus-webshop/scss/includes/blocks/block-qr-code.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-qr-code.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-qr-code.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-reimbursement.scss b/react/assets/forus-webshop/scss/includes/blocks/block-reimbursement.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-reimbursement.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-reimbursement.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-reimbursements.scss b/react/assets/forus-webshop/scss/includes/blocks/block-reimbursements.scss
similarity index 99%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-reimbursements.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-reimbursements.scss
index 74067f22f..43f6d32af 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/block-reimbursements.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-reimbursements.scss
@@ -87,7 +87,7 @@
             min-width: 0;
 
             .reimbursement-name {
-                font: 700 18px/22px var(--hf);
+                font: 700 18px/22px var(--heading-font-family);
                 margin: 0 0 5px;
                 color: #00122a;
                 @include ellipsis();
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-reservation-address.scss b/react/assets/forus-webshop/scss/includes/blocks/block-reservation-address.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-reservation-address.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-reservation-address.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-reservation.scss b/react/assets/forus-webshop/scss/includes/blocks/block-reservation.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-reservation.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-reservation.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-reservations.scss b/react/assets/forus-webshop/scss/includes/blocks/block-reservations.scss
similarity index 99%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-reservations.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-reservations.scss
index ff8b55722..01b6cd057 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/block-reservations.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-reservations.scss
@@ -150,7 +150,7 @@
                     }
 
                     .reservation-name {
-                        font: 700 18px/27px var(--hf);
+                        font: 700 18px/27px var(--heading-font-family);
                         display: block;
                         margin: 0 0 5px 0;
                         color: #00122a;
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-schedule-list.scss b/react/assets/forus-webshop/scss/includes/blocks/block-schedule-list.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-schedule-list.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-schedule-list.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-search-results.scss b/react/assets/forus-webshop/scss/includes/blocks/block-search-results.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-search-results.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-search-results.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-sessions.scss b/react/assets/forus-webshop/scss/includes/blocks/block-sessions.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-sessions.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-sessions.scss
diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-show-more.scss b/react/assets/forus-webshop/scss/includes/blocks/block-show-more.scss
new file mode 100644
index 000000000..4f5a20492
--- /dev/null
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-show-more.scss
@@ -0,0 +1,30 @@
+.block.block-show-more {
+    text-align: center;
+    margin: 0 0 30px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    .show-more-button {
+        color: var(--button-read_more-color);
+        border: var(--button-read_more-border);
+        background: var(--button-read_more-background);
+        text-decoration: var(--button-read_more-decoration);
+
+        &:hover {
+            color: var(--button-read_more-hover-color);
+            border: var(--button-read_more-hover-border);
+            background: var(--button-read_more-hover-background);
+            text-decoration: var(--button-read_more-hover-decoration);
+        }
+    }
+
+    @media screen and (max-width: 1000px) {
+        .button {
+            width: 100%;
+            padding-left: 20px;
+            padding-right: 20px;
+        }
+    }
+}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-showcase.scss b/react/assets/forus-webshop/scss/includes/blocks/block-showcase.scss
similarity index 99%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-showcase.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-showcase.scss
index 2e6fe92f4..aafeb6e41 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/block-showcase.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-showcase.scss
@@ -23,6 +23,10 @@
         margin: 0 auto;
         display: block;
         min-height: calc(100vh - var(--showcase-fullscreen-bottom-offset));
+
+        .wrapper {
+            padding: 0 !important;
+        }
     }
 
     .showcase-result {
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-sign_up-help.scss b/react/assets/forus-webshop/scss/includes/blocks/block-sign_up-help.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-sign_up-help.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-sign_up-help.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-sign_up-provider.scss b/react/assets/forus-webshop/scss/includes/blocks/block-sign_up-provider.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-sign_up-provider.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-sign_up-provider.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-sign_up.scss b/react/assets/forus-webshop/scss/includes/blocks/block-sign_up.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-sign_up.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-sign_up.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-sitemap.scss b/react/assets/forus-webshop/scss/includes/blocks/block-sitemap.scss
similarity index 92%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-sitemap.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-sitemap.scss
index 1f2dbd958..926b81aff 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/block-sitemap.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-sitemap.scss
@@ -4,7 +4,7 @@
     margin: 0 0 30px;
 
     h1 {
-        font: 600 28px/34px var(--hf);
+        font: 600 28px/34px var(--heading-font-family);
         color: var(--tc);
         margin: 0 0 20px;
     }
diff --git a/react/assets/forus-webshop/scss/_common/components/skiplinks.scss b/react/assets/forus-webshop/scss/includes/blocks/block-skip-links.scss
similarity index 98%
rename from react/assets/forus-webshop/scss/_common/components/skiplinks.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-skip-links.scss
index b016ec452..75184f15b 100644
--- a/react/assets/forus-webshop/scss/_common/components/skiplinks.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-skip-links.scss
@@ -1,4 +1,4 @@
-.skiplinks {
+.block.block-skip-links {
     a {
         &.sr-only-focusable {
             text-decoration: underline;
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-user-emails.scss b/react/assets/forus-webshop/scss/includes/blocks/block-user-emails.scss
similarity index 94%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-user-emails.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-user-emails.scss
index 629c8a368..532d42913 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/block-user-emails.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-user-emails.scss
@@ -30,7 +30,7 @@
             }
 
             .user_email-address {
-                font: 600 18px/26px var(--hf);
+                font: 600 18px/26px var(--heading-font-family);
                 color: var(--tc);
                 margin: 0 0 5px;
             }
@@ -103,12 +103,12 @@
                 width: 100%;
 
                 .user_email-address {
-                    font: 600 14px/16px var(--hf);
+                    font: 600 14px/16px var(--heading-font-family);
                 }
 
                 .user_email-options {
                     .user_email-option {
-                        font: 500 11px/13px var(--hf);
+                        font: 500 11px/13px var(--heading-font-family);
                     }
                 }
 
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-voucher-records.scss b/react/assets/forus-webshop/scss/includes/blocks/block-voucher-records.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-voucher-records.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-voucher-records.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/block-warning.scss b/react/assets/forus-webshop/scss/includes/blocks/block-warning.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/block-warning.scss
rename to react/assets/forus-webshop/scss/includes/blocks/block-warning.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/cards.scss b/react/assets/forus-webshop/scss/includes/blocks/cards.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/cards.scss
rename to react/assets/forus-webshop/scss/includes/blocks/cards.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/fund-add-records.scss b/react/assets/forus-webshop/scss/includes/blocks/fund-add-records.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/fund-add-records.scss
rename to react/assets/forus-webshop/scss/includes/blocks/fund-add-records.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/fund_criteria.scss b/react/assets/forus-webshop/scss/includes/blocks/fund_criteria.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/fund_criteria.scss
rename to react/assets/forus-webshop/scss/includes/blocks/fund_criteria.scss
diff --git a/react/assets/forus-webshop/scss/includes/blocks/map.scss b/react/assets/forus-webshop/scss/includes/blocks/map.scss
new file mode 100644
index 000000000..b11b88a8d
--- /dev/null
+++ b/react/assets/forus-webshop/scss/includes/blocks/map.scss
@@ -0,0 +1,80 @@
+.block.block-map {
+    background: url(./assets/img/sprite-map.png) no-repeat 100% 50%;
+    background-size: auto 710px;
+    @include cf();
+
+    .block-content {
+        padding: 130px 0;
+        width: 50%;
+        float: left;
+
+        .block-title {
+            color: var(--map-title-color);
+            font: var(--map-title-font);
+            margin: 0 0 20px;
+        }
+
+        .block-description {
+            font: 400 22px/36px var(--base-font);
+            margin: 0 0 40px;
+        }
+
+        .block-map-button {
+            color: var(--button-read_more-color);
+            border: var(--button-read_more-border);
+            background: var(--button-read_more-background);
+            text-decoration: var(--button-read_more-decoration);
+
+            &:hover {
+                color: var(--button-read_more-hover-color);
+                border: var(--button-read_more-hover-border);
+                background: var(--button-read_more-hover-background);
+                text-decoration: var(--button-read_more-hover-decoration);
+            }
+        }
+    }
+
+    @media screen and (min-width: 1000px) {
+        padding: 120px 0 240px;
+    }
+
+    @media screen and (max-width: 1700px) {
+        .block-content {
+            .block-title {
+                margin: 0 0 15px;
+            }
+
+            .block-description {
+                margin: 0 0 30px;
+            }
+        }
+    }
+
+    @media screen and (max-width: 1000px) {
+        background-size: contain;
+        margin: 0 0 30px;
+        background: none;
+
+        .block-content {
+            text-align: center;
+            width: 100%;
+            padding: 0;
+
+            .block-title {
+                font: 700 22px/36px var(--base-font);
+                margin: 0 0 20px;
+            }
+
+            .block-description {
+                font: 400 16px/28px var(--base-font);
+                margin: 0 0 20px;
+            }
+
+            .button {
+                width: 100%;
+                padding-left: 30px;
+                padding-right: 30px;
+            }
+        }
+    }
+}
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/phone-number.scss b/react/assets/forus-webshop/scss/includes/blocks/phone-number.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/phone-number.scss
rename to react/assets/forus-webshop/scss/includes/blocks/phone-number.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/product.scss b/react/assets/forus-webshop/scss/includes/blocks/product.scss
similarity index 94%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/product.scss
rename to react/assets/forus-webshop/scss/includes/blocks/product.scss
index 8e6db5cbb..4106216fe 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/product.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/product.scss
@@ -3,6 +3,7 @@
 
     .product-card {
         background-color: #fff;
+        border: 1px solid var(--border-color);
         border-radius: var(--border-radius);
         margin-bottom: 30px;
         box-shadow: var(--box-shadow);
@@ -36,8 +37,8 @@
             border-bottom-right-radius: inherit;
 
             .product-name {
-                color: var(--tc);
-                font: 700 22px/28px var(--hf);
+                font: var(--product-title-font);
+                color: var(--product-title-color);
                 padding-right: 30px;
                 margin: 0 0 5px;
                 word-wrap: break-word;
@@ -53,15 +54,15 @@
             .organization-name {
                 color: #646f79;
                 font: 700 14px/24px var(--base-font);
-                margin: 0px 0px 20px;
+                margin: 0 0 20px;
             }
 
             .product-properties {
                 display: flex;
                 flex-direction: row;
                 align-items: center;
-                padding: 0px 0px 20px;
-                margin: 0px 0px 20px;
+                padding: 0 0 20px;
+                margin: 0 0 20px;
                 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 
                 .product-property {
@@ -197,6 +198,20 @@
         }
     }
 
+    .block.block-organizations {
+        .organization-item {
+            .organization-pane {
+                box-shadow: var(--box-shadow);
+            }
+
+            .organization-offices {
+                .block.block-offices {
+                    box-shadow: var(--box-shadow);
+                }
+            }
+        }
+    }
+
     &.block-product-sm {
         .product-card {
             .product-details {
@@ -251,6 +266,7 @@
             }
         }
     }
+
     @media screen and (max-width: 1200px) {
         .product-funds-list {
             .fund-item {
@@ -265,6 +281,7 @@
             }
         }
     }
+
     @media screen and (max-width: 1000px) {
         .product-card {
             flex-direction: column;
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/record_categories.scss b/react/assets/forus-webshop/scss/includes/blocks/record_categories.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/record_categories.scss
rename to react/assets/forus-webshop/scss/includes/blocks/record_categories.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/records.scss b/react/assets/forus-webshop/scss/includes/blocks/records.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/records.scss
rename to react/assets/forus-webshop/scss/includes/blocks/records.scss
diff --git a/react/assets/forus-webshop/scss/includes/blocks/transactions.scss b/react/assets/forus-webshop/scss/includes/blocks/transactions.scss
new file mode 100644
index 000000000..d66ba1a1a
--- /dev/null
+++ b/react/assets/forus-webshop/scss/includes/blocks/transactions.scss
@@ -0,0 +1,190 @@
+.block.block-transactions {
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+    background: #fff;
+
+    .transactions-header {
+        display: flex;
+        align-items: center;
+        border-top-left-radius: inherit;
+        border-top-right-radius: inherit;
+        padding: 25px;
+        border-bottom: 1px solid #d4d9dd;
+
+        .transactions-title {
+            color: #282b39;
+            font: 700 22px/24px var(--base-font);
+            margin: 0 5px 0 0;
+        }
+    }
+
+    .transactions-body {
+        border-bottom-left-radius: inherit;
+        border-bottom-right-radius: inherit;
+        position: relative;
+    }
+
+    .transactions-list {
+        .transactions-item {
+            border-bottom: 1px solid #d4d9dd;
+            padding: 20px;
+            display: flex;
+            @include cf();
+
+            .transactions-item-icon {
+                background: #ededed;
+                width: 35px;
+                height: 35px;
+                border-radius: 35px;
+                text-align: center;
+                line-height: 35px;
+                margin: 5px 15px 5px 0;
+                color: #000000;
+
+                .mdi {
+                    font-size: 18px;
+                    color: inherit;
+                }
+            }
+
+            .transactions-item-details {
+                flex-grow: 1;
+
+                .transactions-item-empty {
+                    font: 400 16px var(--base-font);
+                    text-align: center;
+                    color: #282b39;
+                    margin-bottom: 5px;
+                }
+
+                .transactions-item-counterpart {
+                    font: 700 16px var(--base-font);
+                    color: #282b39;
+                    margin-bottom: 5px;
+
+                    a {
+                        color: #004d93;
+                        font: 700 16px var(--base-font);
+                    }
+                }
+
+                .transactions-item-date {
+                    font: 400 13px var(--base-font);
+                    color: #646f79;
+                }
+            }
+
+            .transactions-item-amount {
+                text-align: right;
+                padding-left: 15px;
+
+                .transactions-item-value {
+                    font: 700 16px var(--base-font);
+                    color: var(--tc);
+                    margin-bottom: 5px;
+                    white-space: nowrap;
+                }
+
+                .transactions-item-type {
+                    font: 400 13px var(--base-font);
+                    color: var(--tc);
+                }
+            }
+
+            &:last-child {
+                border-bottom: 0;
+            }
+        }
+    }
+
+    @media screen and (max-width: 1700px) {
+        .transactions-header {
+            padding: 15px 25px;
+
+            .transactions-title {
+                font: 700 16px/22px var(--base-font);
+            }
+        }
+
+        .transactions-list {
+            .transactions-item {
+                padding: 15px 20px;
+
+                .transactions-item-icon {
+                    margin: 0 15px 0 0;
+                }
+
+                .transactions-item-details {
+                    .transactions-item-counterpart {
+                        font: 700 14px/20px var(--base-font);
+                        margin: 0;
+                    }
+
+                    .transactions-item-date {
+                        font: 400 12px/15px var(--base-font);
+                        margin: 0;
+                    }
+                }
+
+                .transactions-item-amount {
+                    .transactions-item-value {
+                        font: 700 14px/20px var(--base-font);
+                        margin: 0;
+                    }
+
+                    .transactions-item-type {
+                        font: 400 12px/15px var(--base-font);
+                        margin: 0;
+                    }
+                }
+            }
+        }
+    }
+
+    @media screen and (max-width: 1000px) {
+        margin-bottom: 30px;
+        border: 1px solid #ddecff;
+
+        .transactions-header {
+            padding: 15px 20px;
+            border-color: #ddecff;
+
+            .transactions-title {
+                font: 700 14px var(--base-font);
+            }
+        }
+
+        .transactions-list {
+            .transactions-item {
+                padding: 10px 15px;
+                border-color: #ddecff;
+
+                .transactions-item-icon {
+                    width: 30px;
+                    height: 30px;
+                    min-width: 30px;
+                    line-height: 30px;
+                    margin-right: 10px;
+                }
+
+                .transactions-item-details {
+                    .transactions-item-counterpart {
+                        padding: 4px 0;
+                        font: 700 12px/16px var(--base-font);
+                        margin-bottom: 0;
+                    }
+
+                    .transactions-item-date {
+                        font: 400 10px/14px var(--base-font);
+                    }
+                }
+
+                &.transactions-item-out .transactions-item-amount .transactions-item-value,
+                &.transactions-item-out .transactions-item-amount .transactions-item-type {
+                    font-size: 14px;
+                }
+            }
+        }
+    }
+}
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/validations.scss b/react/assets/forus-webshop/scss/includes/blocks/validations.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/validations.scss
rename to react/assets/forus-webshop/scss/includes/blocks/validations.scss
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/validators.scss b/react/assets/forus-webshop/scss/includes/blocks/validators.scss
similarity index 96%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/validators.scss
rename to react/assets/forus-webshop/scss/includes/blocks/validators.scss
index c8b50a0d6..d18b1f054 100644
--- a/react/assets/forus-webshop/scss/_common/sections/blocks/validators.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/validators.scss
@@ -14,7 +14,7 @@
         .block-header {
             border-bottom: 1px solid #d4d9dd;
             padding: 20px 25px;
-            font: 700 22px var(--hf);
+            font: 700 22px var(--heading-font-family);
             color: var(--tc);
             position: relative;
         }
@@ -93,7 +93,7 @@
     @media screen and (max-width: 1000px) {
         &.block-validators {
             .block-header {
-                font: 700 16px var(--hf);
+                font: 700 16px var(--heading-font-family);
                 padding: 15px 20px;
             }
 
diff --git a/react/assets/forus-webshop/scss/_common/sections/blocks/voucher-product.scss b/react/assets/forus-webshop/scss/includes/blocks/voucher-product.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/sections/blocks/voucher-product.scss
rename to react/assets/forus-webshop/scss/includes/blocks/voucher-product.scss
diff --git a/react/assets/forus-webshop/scss/includes/blocks/voucher.scss b/react/assets/forus-webshop/scss/includes/blocks/voucher.scss
new file mode 100644
index 000000000..44317cb88
--- /dev/null
+++ b/react/assets/forus-webshop/scss/includes/blocks/voucher.scss
@@ -0,0 +1,693 @@
+.block.block-voucher {
+    position: relative;
+    display: flex;
+    margin-bottom: 30px;
+
+    .base-card {
+        background-color: #fff;
+        border-radius: var(--border-radius);
+        box-shadow: var(--box-shadow);
+        cursor: default;
+        position: relative;
+        overflow: hidden;
+        flex-direction: row;
+        display: flex;
+        min-height: 200px;
+        @include cf();
+
+        .label {
+            margin-bottom: 10px;
+            border-radius: 5px;
+            padding: 0 10px;
+        }
+
+        .card-inner {
+            flex-direction: column;
+            flex: 1;
+            display: flex;
+            min-height: 200px;
+        }
+
+        .card-actions {
+            display: flex;
+            flex: 1;
+
+            .action-col {
+                flex-grow: 1;
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+
+                .action-item {
+                    cursor: pointer;
+                    flex-direction: column;
+                    text-align: center;
+                    display: inline-flex;
+                    color: var(--bc);
+                    align-items: center;
+
+                    .action-item-icon {
+                        width: 40px;
+                        height: 40px;
+                        line-height: 40px;
+                        text-align: center;
+                        text-transform: inherit;
+                        background: var(--voucher-card-action-background);
+                        border: 1px solid var(--voucher-card-action-border-color);
+                        border-radius: var(--voucher-card-action-border-radius);
+                        color: var(--voucher-card-action-color);
+                        font-size: 20px;
+                        transition:
+                            background 0.4s,
+                            border 0.4s,
+                            color 0.4s;
+                        cursor: pointer;
+                        position: relative;
+                        margin-bottom: 7.5px;
+
+                        .action-item-tooltip {
+                            opacity: 0;
+                            user-select: none;
+                            visibility: hidden;
+                            position: absolute;
+                            background: #fff;
+                            border: 1px solid #dbdcdb;
+                            padding: 4px 10px;
+                            font: 600 13px/20px var(--base-font);
+                            color: var(--bc);
+                            border-radius: 5px;
+                            white-space: nowrap;
+                            top: 100%;
+                            margin-top: 5px;
+                            left: 50%;
+                            transform: translate3d(-50%, 0, 0) scale3d(0, 0, 0);
+                            box-shadow: 2px 5px 35px rgba(0, 0, 0, 0.15);
+                            transition:
+                                opacity 0.4s,
+                                transform 0.4s,
+                                visibility 0.4s;
+
+                            &:after {
+                                left: 50%;
+                                position: absolute;
+                                display: block;
+                                content: '';
+                                @extend .triangle;
+                                bottom: 100%;
+                                border-color: transparent transparent #fff transparent;
+                                transform: translate3d(-50%, 4px, 0);
+                            }
+                        }
+                    }
+
+                    .action-item-name {
+                        color: #000;
+                        font: 600 12px var(--base-font);
+                        transition: color 0.4s;
+                        margin: 0 3px;
+                    }
+
+                    &:last-child {
+                        margin-right: 0;
+                    }
+
+                    &:hover {
+                        .action-item-icon {
+                            background: var(--voucher-card-action-hover-background);
+                            border: 1px solid var(--voucher-card-action-hover-border-color);
+                            border-color: var(--voucher-card-action-hover-border-radius);
+                            color: var(--voucher-card-action-hover-color);
+
+                            .action-item-tooltip {
+                                opacity: 1;
+                                visibility: visible;
+                                transform: translate3d(-50%, 0, 0) scale3d(1, 1, 1);
+                            }
+                        }
+                    }
+                }
+
+                &.card-actions-center {
+                    justify-content: center;
+                }
+            }
+        }
+
+        .card-label {
+            color: var(--tc);
+            font: 400 14px/16px var(--base-font);
+
+            a {
+                color: #646f79;
+                text-decoration: underline;
+            }
+        }
+
+        .block-link {
+            font: 600 13px/22px var(--base-font);
+            color: var(--color-default);
+            display: inline-block;
+
+            .mdi {
+                color: var(--color-default);
+                font-size: 1.3em;
+                float: right;
+                margin-left: 5px;
+                transition: margin-right 0.4s;
+                line-height: 22px;
+            }
+
+            &:hover {
+                .mdi {
+                    margin-left: 10px;
+                }
+            }
+        }
+
+        .card-value {
+            font: 700 14px/16px var(--base-font);
+            color: var(--tc);
+            margin-top: 10px;
+
+            &.card-value-sm {
+                font-weight: 400;
+                font-size: 14px;
+            }
+
+            &:last-child {
+                margin-bottom: 10px;
+            }
+        }
+
+        .card-value.euro {
+            font-size: 25px;
+        }
+
+        .card-label.euro {
+            font-size: 15px;
+        }
+
+        .card-qr_code {
+            width: 200px;
+            padding: 15px 15px;
+            background: #efefef;
+            text-align: center;
+
+            img,
+            canvas {
+                display: block;
+                width: 150px;
+                margin-bottom: 20px;
+                padding: 5px;
+                background: #fff;
+                border-radius: 5px;
+                box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
+            }
+
+            .card-qr_code-desc {
+                color: #272525;
+                font: 500 12px var(--base-font);
+                margin: 0 -10px 10px -10px;
+            }
+        }
+
+        .card-body {
+            position: relative;
+            background: #fff;
+            display: flex;
+
+            .card-photo {
+                padding: 20px 0 20px 20px;
+
+                img {
+                    width: 100px;
+                    display: block;
+                    border-radius: 5px;
+                }
+            }
+
+            .card-section {
+                padding: 20px;
+                flex: 1;
+            }
+
+            .card-title {
+                color: #272525;
+                font: 700 16px var(--base-font);
+                margin: 0 0 5px;
+            }
+
+            .card-subtitle {
+                color: #272525;
+                font: 500 14px var(--base-font);
+                margin: 0 0 5px;
+            }
+
+            .card-description {
+                font: 400 13px/18px var(--base-font);
+                color: #272525;
+            }
+
+            .card-price {
+                color: #646f79;
+                font: 400 16px var(--base-font);
+
+                strong {
+                    color: #083f49;
+                    font: 700 24px var(--base-font);
+                }
+            }
+        }
+
+        .card-footer {
+            width: 100%;
+            height: 100%;
+            background: #fcfcfc;
+            padding: 20px 25px;
+            border-top: 1px solid var(--border-color);
+            position: relative;
+            display: flex;
+            flex-direction: column;
+        }
+
+        &.base-card-sponsor {
+            border: 1px solid var(--border-color);
+            width: 38%;
+        }
+
+        &.base-card-voucher {
+            width: 62%;
+            margin-right: 30px;
+            border: 1px solid var(--border-color);
+
+            .block-qr-code {
+                width: 100%;
+                padding-bottom: 10px;
+
+                .qr_code {
+                    width: 100px;
+                    height: 100px;
+                    padding: 0;
+                    background: unset;
+                    margin: auto;
+                    border-radius: 0;
+                    box-shadow: unset;
+
+                    img,
+                    canvas {
+                        display: block;
+                        width: 100%;
+                    }
+                }
+            }
+
+            .card-body {
+                .card-title {
+                    font: 600 24px var(--base-font);
+                    color: #272525;
+                    margin-bottom: 10px;
+                }
+            }
+        }
+    }
+
+    &.block-voucher-regular {
+        .base-card {
+            &.base-card-sponsor {
+                width: 50%;
+                margin-left: 15px;
+            }
+
+            &.base-card-voucher {
+                width: 50%;
+                margin-right: 15px;
+            }
+        }
+    }
+
+    &.block-voucher-combined {
+        .base-card {
+            &.base-card-voucher {
+                width: 100%;
+                margin-right: 0;
+
+                .card-footer {
+                    .card-section {
+                        margin-bottom: 20px;
+
+                        .card-title {
+                            margin: 0 0 10px;
+                            font: 600 15px/22px var(--base-font);
+                        }
+
+                        .card-description {
+                            font: 400 14px/20px var(--base-font);
+
+                            .card-description-link {
+                                font: 400 14px/20px var(--base-font);
+                                color: #0000cd;
+                                text-decoration: underline;
+
+                                &:hover {
+                                    text-decoration: none;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    @media screen and (max-width: 1700px) {
+        .base-card {
+            .label {
+                margin-bottom: 5px;
+                font-size: 11px;
+                line-height: 20px;
+            }
+
+            .card-label {
+                font: 400 14px/16px var(--base-font);
+            }
+
+            .card-value {
+                font: 700 16px var(--base-font);
+
+                &.card-value-sm {
+                    font-weight: 400;
+                }
+            }
+
+            .card-body {
+                .card-photo {
+                    img {
+                        width: 100px;
+                    }
+                }
+
+                .card-read_more {
+                    font: 600 12px/18px var(--base-font);
+                }
+
+                .card-description {
+                    font-size: 14px;
+                }
+            }
+
+            .card-actions {
+                .action-item {
+                    margin-right: 15px;
+                }
+            }
+
+            &.base-card-voucher {
+                .card-body {
+                    .card-title {
+                        font: 700 24px var(--base-font);
+                    }
+                }
+            }
+        }
+
+        .card-inner {
+            min-height: 300px;
+        }
+    }
+
+    @media screen and (max-width: 1000px) {
+        flex-direction: column;
+        margin: auto;
+        width: 100%;
+
+        .base-card {
+            overflow: visible;
+            box-shadow: 2px 2px 20px rgba($color: #000000, $alpha: 0.05);
+            border-top-left-radius: 8px;
+            border-top-right-radius: 8px;
+            width: 100%;
+            margin-left: 0;
+
+            .card-inner {
+                text-align: center;
+            }
+
+            .card-label {
+                font: 600 10px/16px var(--base-font);
+                margin: 0 0 5px;
+                color: #646f79;
+                text-transform: uppercase;
+
+                &.euro {
+                    font-size: 10px;
+                    margin: 0;
+                }
+            }
+
+            .card-value {
+                color: #282b39;
+                font: 700 16px/24px var(--base-font);
+                margin: 0 0 15px;
+
+                &.card-value-sm {
+                    font: 400 12px var(--base-font);
+                    color: #134478;
+
+                    strong {
+                        display: block;
+                        font: 700 15px var(--base-font);
+                        color: #282b39;
+                    }
+                }
+
+                &.euro {
+                    font-size: 20px;
+                }
+            }
+
+            .card-qr_code {
+                width: 100%;
+                background: #fff;
+                border: 1px solid #ddecff;
+                border-bottom: 0;
+
+                img {
+                    margin: 0 auto 20px;
+                    background: #fff;
+                    padding: 10px;
+                    border-radius: 5px;
+                    width: 200px;
+                    max-width: 100%;
+                    box-shadow: 5px 5px 20px rgba($color: #000000, $alpha: 0.1);
+                }
+            }
+
+            .card-body {
+                flex-direction: column;
+                padding-top: 30px;
+                border: 1px solid #ddecff;
+                border-bottom: 0;
+                border-top-left-radius: 6px;
+                border-top-right-radius: 6px;
+                min-height: auto;
+
+                .card-photo {
+                    padding: 0;
+                    position: absolute;
+                    top: 0;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    background: #fff;
+                    border-radius: 60px;
+
+                    img {
+                        margin: auto;
+                        width: 60px;
+                        max-width: 100%;
+                        border-radius: 60px;
+                        box-shadow: 2px 3px 20px rgba($color: #000000, $alpha: 0.1);
+                        background: #fff;
+                    }
+                }
+
+                .card-section {
+                    width: auto;
+                    max-width: 100%;
+                    margin: 0 auto;
+                }
+
+                .card-title {
+                    font: 700 17.5px var(--base-font);
+                    color: #00122a;
+                }
+
+                .card-description {
+                    font: 400 12px/18px var(--base-font);
+                    color: #00122a;
+                }
+            }
+
+            .card-footer {
+                border: 1px solid #ddecff;
+                border-bottom-left-radius: 8px;
+                border-bottom-right-radius: 8px;
+                min-height: auto;
+            }
+
+            &.base-card-sponsor,
+            &.base-card-voucher {
+                width: 100%;
+                margin: 0 0 30px;
+                flex-direction: column-reverse;
+            }
+
+            &.base-card-voucher {
+                margin: 0 0 30px 0;
+
+                .card-body {
+                    padding: 0;
+                    flex-direction: column-reverse;
+
+                    .card-qr_code {
+                        width: 100%;
+                        padding: 20px;
+                        border: none;
+                        background: linear-gradient(to right, #eff0ef, #fefefe);
+
+                        .card-qr_code-desc {
+                            font: 400 12px/16px var(--base-font);
+                        }
+
+                        .qr_code {
+                            width: 140px;
+                            height: 140px;
+
+                            img,
+                            canvas {
+                                border-radius: 0;
+                                padding: 0;
+                                box-shadow: none;
+                                margin: 0 0 10px;
+                                width: 100%;
+                            }
+                        }
+                    }
+
+                    .card-photo {
+                        display: none;
+                    }
+
+                    .label {
+                        margin-bottom: 10px;
+                    }
+
+                    .card-title {
+                        margin: 0 0 5px;
+                        font: 700 14px var(--base-font);
+                    }
+
+                    .card-section {
+                        text-align: center;
+                    }
+                }
+
+                .card-footer {
+                    padding: 15px;
+                    flex-direction: column;
+                    justify-content: center;
+                    justify-items: center;
+
+                    .card-section {
+                        margin: 0;
+                        width: auto;
+                        justify-content: center;
+                    }
+
+                    .card-actions {
+                        margin: 0;
+                        flex-flow: column;
+                        flex-grow: 1;
+                        max-width: 100%;
+
+                        .action-col {
+                            width: 100%;
+                            margin: 0 0 10px;
+
+                            .action-item {
+                                background: #f4f5f7;
+                                border-radius: 20px;
+                                padding: 10px;
+                                text-align: center;
+                                display: flex;
+                                justify-content: flex-start;
+                                flex-direction: unset;
+                                width: 100%;
+
+                                .action-item-icon {
+                                    background-color: unset;
+                                    width: 30px;
+                                    height: 30px;
+                                    line-height: 30px;
+                                    border-radius: 40px;
+                                    margin: 0 10px 0 0;
+                                }
+
+                                &:hover {
+                                    .action-item-icon {
+                                        color: #fff;
+                                        background-color: #000;
+                                    }
+                                }
+                            }
+
+                            &:last-child {
+                                margin-bottom: 0;
+                            }
+                        }
+                    }
+                }
+
+                .card-inner:first-child {
+                    .card-body {
+                        border-top-left-radius: 0;
+                        border-top-right-radius: 0;
+                    }
+                }
+            }
+        }
+
+        &.block-voucher-regular {
+            .base-card {
+                &.base-card-sponsor,
+                &.base-card-voucher {
+                    width: 100%;
+                    margin: 0 0 30px;
+                    flex-direction: column-reverse;
+                }
+            }
+        }
+
+        &.block-voucher-combined {
+            .base-card {
+                &.base-card-voucher {
+                    .card-footer {
+                        .card-section {
+                            .card-title {
+                                margin: 0 0 5px;
+                                font: 600 12px/18px var(--base-font);
+                            }
+
+                            .card-description {
+                                font: 400 12px/16px var(--base-font);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/react/assets/forus-webshop/scss/includes/blocks/vouchers.scss b/react/assets/forus-webshop/scss/includes/blocks/vouchers.scss
new file mode 100644
index 000000000..c8d06c746
--- /dev/null
+++ b/react/assets/forus-webshop/scss/includes/blocks/vouchers.scss
@@ -0,0 +1,539 @@
+.block.block-vouchers {
+    margin-bottom: 30px;
+
+    .block-title {
+        font: 700 40px var(--base-font);
+        margin-bottom: 20px;
+        cursor: default;
+    }
+
+    .voucher-item {
+        background-color: #fff;
+        margin-bottom: 15px;
+        position: relative;
+        transition:
+            background-color 0.4s,
+            box-shadow 0.4s,
+            border 0.4s;
+        min-height: 120px;
+        overflow: hidden;
+        cursor: default;
+        display: grid;
+        grid-template-columns: 130px 1fr auto;
+        background: var(--showcase-item-background);
+        border-radius: var(--showcase-item-border-radius);
+        box-shadow: var(--showcase-item-shadow);
+        border: var(--showcase-item-border);
+
+        .voucher-image {
+            overflow: hidden;
+            background-size: cover;
+            background-position: 50% 50%;
+            position: relative;
+            border-top-left-radius: inherit;
+            border-bottom-left-radius: inherit;
+            padding: 15px 0 15px 15px;
+
+            img {
+                width: 100%;
+                display: block;
+                border-radius: var(--border-radius);
+            }
+        }
+
+        .voucher-details {
+            float: left;
+            padding: 15px 15px;
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+
+            .label {
+                margin-bottom: 10px;
+            }
+
+            .voucher-name {
+                display: flex;
+                gap: 5px;
+                font: 700 22px/26px var(--heading-font-family);
+                color: #00122a;
+                margin: 0 0 5px;
+
+                .voucher-name-number {
+                    display: none;
+                }
+            }
+
+            .voucher-organization {
+                font: 400 13px/20px var(--base-font);
+                color: var(--vouchers-label-color);
+                margin-bottom: 15px;
+            }
+
+            .voucher-value {
+                font: 700 22px/26px var(--base-font);
+                color: var(--vouchers-value-color);
+                display: flex;
+                flex-grow: 1;
+                flex-direction: column;
+                justify-content: flex-end;
+            }
+
+            .voucher-status-label {
+                position: absolute;
+                top: 20px;
+                right: 20px;
+            }
+
+            .voucher-cancel-label {
+                color: #646f79;
+                font: 400 14px/16px var(--base-font);
+                margin-top: 5px;
+
+                a {
+                    color: #646f79;
+                    text-decoration: underline;
+                    pointer-events: all;
+                }
+            }
+        }
+
+        .voucher-overview {
+            float: right;
+            border-left: 1px solid var(--border-color);
+            padding: 15px 15px;
+            min-width: 200px;
+            min-height: inherit;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+
+            .voucher-overview-items {
+                margin-bottom: 10px;
+                float: left;
+                position: absolute;
+                bottom: 15px;
+                left: 15px;
+                right: 15px;
+                display: flex;
+                flex-direction: column;
+                gap: 5px;
+            }
+
+            .voucher-overview-item {
+                .voucher-overview-label {
+                    font: 400 11px/16px var(--base-font);
+                    color: var(--vouchers-label-color);
+                }
+
+                .voucher-overview-value {
+                    font: 600 14px/21px var(--base-font);
+                    color: #282b39;
+
+                    small {
+                        font: 400 13px var(--base-font);
+                        color: #646f79;
+                        margin-left: 5px;
+                    }
+                }
+
+                &:last-of-type,
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+
+            & > .button {
+                padding-left: 50px;
+                padding-right: 50px;
+                @include float_center();
+            }
+        }
+
+        .voucher-item-overlay {
+            position: absolute;
+            @include fill_parent();
+            display: none;
+            background: transparent;
+        }
+
+        &:not(.voucher-item-static):not(.voucher-item-select) {
+            cursor: pointer;
+
+            &:hover {
+                box-shadow: var(--showcase-item-hover-shadow);
+
+                .voucher-image {
+                    &:after {
+                        opacity: 0.25;
+                    }
+                }
+            }
+        }
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+
+        &.voucher-item-disabled {
+            cursor: default;
+            pointer-events: none;
+
+            .voucher-overview {
+                .voucher-overview-item {
+                    .button {
+                        cursor: default;
+                    }
+                }
+            }
+        }
+
+        &.voucher-item-compact {
+            margin-bottom: 10px;
+            min-height: 100px;
+            border: 1px solid var(--border-color);
+            border-radius: var(--border-radius);
+            display: grid;
+            grid-template-columns: 80px 1fr auto auto;
+
+            .voucher-details {
+                position: relative;
+                display: grid;
+                width: auto;
+                grid-template-columns: 1fr auto;
+
+                .voucher-base-information {
+                    display: grid;
+                }
+
+                .voucher-name {
+                    font: 600 14px/20px var(--heading-font-family);
+                }
+
+                .voucher-organization {
+                    font: 400 12px/16px var(--base-font);
+                    margin: 0 0 5px;
+                    color: #595959;
+
+                    &:last-child {
+                        margin-bottom: 0;
+                    }
+                }
+
+                .voucher-records {
+                    grid-column: 1/2;
+                    grid-row: 2;
+                }
+
+                .voucher-amounts {
+                    display: grid;
+                    text-align: right;
+                    position: relative;
+                    align-items: flex-start;
+                    gap: 5px;
+                    grid-column: 2/3;
+                    grid-row: 1/3;
+                    padding-left: 10px;
+
+                    .voucher-value {
+                        color: var(--vouchers-value-color);
+                        font: 700 16px/24px var(--base-font);
+                        white-space: nowrap;
+                    }
+
+                    .voucher-value-date {
+                        font: 500 12px/20px var(--base-font);
+                        white-space: nowrap;
+                    }
+
+                    .voucher-extra-payment {
+                        color: #595959;
+
+                        .voucher-extra-payment-value {
+                            font: 600 14px/21px var(--base-font);
+                        }
+
+                        .voucher-extra-payment-description {
+                            font: 400 11px/16px var(--base-font);
+                            margin-top: -2px;
+                        }
+                    }
+                }
+            }
+
+            .voucher-overview {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+
+                & > .button {
+                    position: relative;
+                    top: auto;
+                    left: auto;
+                    transform: none;
+                }
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+
+        &.voucher-item-select {
+            min-height: 60px;
+            margin-bottom: 0;
+            border-radius: 0;
+            border-bottom: 1px solid var(--border-color);
+            position: relative;
+            box-shadow: none;
+            cursor: pointer;
+
+            .voucher-image {
+                padding: 7.5px 0 7.5px 7.5px;
+            }
+
+            .voucher-details {
+                padding: 9px;
+
+                .voucher-name,
+                .voucher-value {
+                    font: 700 14px/22px var(--heading-font-family);
+                    margin: 0 0 0;
+                }
+
+                .voucher-date,
+                .voucher-organization {
+                    font: 400 11px/18px var(--base-font);
+                    margin: 0 0 0;
+                }
+
+                .voucher-date,
+                .voucher-value {
+                    display: flex;
+                    flex-grow: 1;
+                    white-space: nowrap;
+                    flex-direction: column;
+                    justify-content: flex-end;
+                    order: 1 !important;
+                }
+
+                .voucher-date {
+                    justify-content: flex-start;
+                }
+            }
+
+            .voucher-overview {
+                display: flex;
+                flex-direction: column;
+                justify-content: center;
+
+                & > .button {
+                    position: relative;
+                    top: auto;
+                    left: auto;
+                    transform: none;
+                }
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+                border-bottom: none;
+                border-bottom-left-radius: calc(var(--border-radius) / 2);
+                border-bottom-right-radius: calc(var(--border-radius) / 2);
+            }
+
+            &:after {
+                content: '';
+                pointer-events: none;
+                @include fill_parent();
+                background-color: #000;
+                opacity: 0;
+                transition: opacity 0.3s;
+            }
+
+            &:hover {
+                &:after {
+                    opacity: 0.035;
+                }
+            }
+
+            &:focus {
+                outline-offset: -2px !important;
+                border-radius: 7px;
+            }
+
+            &.voucher-item-select-placeholder {
+                border: 1px solid var(--border-color);
+                border-radius: calc(var(--border-radius) / 2);
+                padding-right: 25px;
+                background-image: url('./assets/img/select-bg.png');
+                background-position: calc(100% - 4px);
+                background-repeat: no-repeat;
+            }
+        }
+    }
+
+    &.block-vouchers-select {
+        margin-bottom: 0;
+
+        .voucher-item {
+            grid-template-columns: 52.5px 1fr auto;
+        }
+
+        &.block-vouchers-select-open {
+            .voucher-item-select {
+                &.voucher-item-select-placeholder {
+                    border-bottom-left-radius: 0;
+                    border-bottom-right-radius: 0;
+                }
+            }
+        }
+    }
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    @media screen and (max-width: 1000px) {
+        margin-bottom: 30px;
+
+        .block-title {
+            font: 700 20px var(--base-font);
+            margin-bottom: 20px;
+            cursor: default;
+        }
+
+        .voucher-item {
+            padding: 0;
+            height: auto;
+            position: relative;
+            min-height: auto;
+            margin: 0 0 15px;
+            grid-template-columns: 70px 1fr;
+
+            .voucher-image {
+                padding: 10px 0 10px 10px;
+            }
+
+            .voucher-details {
+                text-align: left;
+                padding: 10px;
+                display: flex;
+                justify-content: center;
+                flex-direction: column;
+                gap: 5px;
+                overflow: hidden;
+
+                .voucher-name {
+                    font: 700 16px/20px var(--heading-font-family);
+                    margin: 0 0 0;
+                    order: 2;
+                    word-break: break-word;
+                    word-wrap: break-word;
+
+                    .voucher-name-number {
+                        display: contents;
+                    }
+                }
+
+                .voucher-organization {
+                    font: 400 11px/14px var(--base-font);
+                    margin: 0 0 0;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    order: 3;
+                }
+
+                .voucher-value {
+                    font: 700 16px/22px var(--base-font);
+                    order: 4;
+                }
+
+                .voucher-read_more {
+                    margin-bottom: 0;
+                    order: 5;
+                }
+
+                .voucher-status-label {
+                    position: initial;
+                    order: 1;
+
+                    .label {
+                        margin: 0;
+                        padding: 0 5px 0;
+                        font: 600 10px/16px var(--base-font);
+                    }
+                }
+            }
+
+            .voucher-overview {
+                min-width: auto;
+                padding: 10px 15px;
+                display: none;
+                justify-content: center;
+                flex-direction: column;
+            }
+
+            .voucher-item-overlay {
+                display: block;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+
+            &.voucher-item-compact {
+                display: block;
+                padding-top: 15px;
+
+                .voucher-details {
+                    display: flex;
+                    width: 100%;
+                    border-bottom: 1px solid var(--border-color);
+
+                    .voucher-base-information {
+                        display: flex;
+                        flex-direction: column;
+
+                        .voucher-information {
+                            .voucher-name {
+                                font: 700 16px/20px var(--base-font);
+                                margin: 0 0 15px;
+                                @include ellipsis();
+                                padding-right: 0;
+                            }
+
+                            .voucher-organization {
+                                font: 400 11px/13px var(--base-font);
+                                padding-right: 0;
+                                text-wrap: wrap;
+                            }
+
+                            .voucher-value {
+                                font: 700 22px/22px var(--base-font);
+                            }
+                        }
+                    }
+
+                    .voucher-amounts {
+                        text-align: left;
+                        padding: 0;
+                    }
+                }
+
+                .voucher-overview {
+                    display: flex;
+                    min-height: auto;
+                    width: 100%;
+                    padding: 20px;
+
+                    .button {
+                        padding: 10px;
+                        font-size: 14px;
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/react/assets/forus-webshop/scss/_common/components/_breadcrumbs.scss b/react/assets/forus-webshop/scss/includes/components/_breadcrumbs.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/components/_breadcrumbs.scss
rename to react/assets/forus-webshop/scss/includes/components/_breadcrumbs.scss
diff --git a/react/assets/forus-webshop/scss/_common/components/_buttons.scss b/react/assets/forus-webshop/scss/includes/components/_buttons.scss
similarity index 75%
rename from react/assets/forus-webshop/scss/_common/components/_buttons.scss
rename to react/assets/forus-webshop/scss/includes/components/_buttons.scss
index 1b5ea42d4..212d78936 100644
--- a/react/assets/forus-webshop/scss/_common/components/_buttons.scss
+++ b/react/assets/forus-webshop/scss/includes/components/_buttons.scss
@@ -1,15 +1,16 @@
 .button {
-    font: 700 16px/1.5em var(--base-font);
+    font: var(--button-font);
     padding: 12px 25px;
-    color: var(--btn-color);
+    color: var(--button-color);
     cursor: pointer;
     border: 1px solid transparent;
     transition: color .4s, background-color .4s, box-shadow .4s, border .4s;
-    border-radius: var(--btn-border-radius);
+    border-radius: var(--button-border-radius);
     display: inline-block;
     text-align: center;
     margin-right: 15px;
-    box-shadow: none;
+    box-shadow: var(--button-shadow);
+    text-decoration: var(--button-decoration);
 
     .mdi {
         font-size: 1.4em;
@@ -31,20 +32,23 @@
     }
 
     &:hover {
-        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+        box-shadow: var(--button-hover-shadow);
+        text-decoration: var(--button-hover-decoration);
     }
 
     &.button-primary {
-        color: #fff;
-        background: var(--color-primary);
-        border: 1px solid var(--color-primary);
+        color: var(--button-primary-color);
+        border: var(--button-primary-border);
+        background: var(--button-primary-background);
+        text-decoration: var(--button-primary-decoration);
         text-transform: inherit;
 
         &:hover,
         &:focus {
-            color: #fff;
-            background: var(--color-primary-light);
-            background-color: var(--color-primary-light);
+            color: var(--button-primary-hover-color);
+            border: var(--button-primary-hover-border);
+            background: var(--button-primary-hover-background);
+            text-decoration: var(--button-primary-hover-decoration);
 
             img {
                 filter: brightness(5);
@@ -52,6 +56,20 @@
         }
     }
 
+    &.button-primary-outline {
+        color: var(--button-primary-outline-color);
+        border: var(--button-primary-outline-border);
+        background: var(--button-primary-outline-background);
+        text-decoration: var(--button-primary-outline-decoration);
+
+        &:hover {
+            color: var(--button-primary-outline-hover-color);
+            border: var(--button-primary-outline-hover-border);
+            background: var(--button-primary-outline-hover-background);
+            text-decoration: var(--button-primary-outline-hover-decoration);
+        }
+    }
+
     &.button-dark {
         display: inline-block;
         color: #fff;
@@ -93,17 +111,6 @@
         }
     }
 
-    &.button-primary-outline {
-        color: var(--color-primary);
-        border: 1px solid var(--color-primary);
-        background: transparent;
-
-        &:hover {
-            background: var(--color-primary);
-            color: #fff;
-        }
-    }
-
     &.button-text {
         background: none;
         border: none;
@@ -122,10 +129,6 @@
             padding-right: 0;
         }
 
-        &.button-text-primary {
-            color: var(--color-primary);
-        }
-
         &[disabled],
         &.disabled,
         &.button-disabled {
@@ -209,9 +212,9 @@
     &[disabled],
     &.disabled,
     &.button-disabled {
-        color: var(--btn-disabled-color) !important;
-        background: var(--btn-disabled-background) !important;
-        border-color: var(--btn-disabled-background) !important;
+        color: var(--button-disabled-color) !important;
+        background: var(--button-disabled-background) !important;
+        border-color: var(--button-disabled-background) !important;
         box-shadow: none !important;
         pointer-events: none !important;
         cursor: default !important;
diff --git a/react/assets/forus-webshop/scss/_common/components/_carrousel.scss b/react/assets/forus-webshop/scss/includes/components/_carrousel.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/components/_carrousel.scss
rename to react/assets/forus-webshop/scss/includes/components/_carrousel.scss
diff --git a/react/assets/forus-webshop/scss/_common/components/_dropdown.scss b/react/assets/forus-webshop/scss/includes/components/_dropdown.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/components/_dropdown.scss
rename to react/assets/forus-webshop/scss/includes/components/_dropdown.scss
diff --git a/react/assets/forus-webshop/scss/_common/components/_form.scss b/react/assets/forus-webshop/scss/includes/components/_form.scss
similarity index 98%
rename from react/assets/forus-webshop/scss/_common/components/_form.scss
rename to react/assets/forus-webshop/scss/includes/components/_form.scss
index c7f98bbbd..ef5b67d43 100644
--- a/react/assets/forus-webshop/scss/_common/components/_form.scss
+++ b/react/assets/forus-webshop/scss/includes/components/_form.scss
@@ -128,22 +128,6 @@
         }
     }
 
-    .form-control-checked + .form-control {
-        padding-left: 50px !important;
-    }
-
-    .form-control-checked {
-        position: relative;
-
-        .mdi {
-            position: absolute;
-            line-height: 50px;
-            padding: 0 15px;
-            font-size: 25px;
-            color: var(--color-primary);
-        }
-    }
-
     textarea.form-control:not([type='radio']):not([type='checkbox']) {
         padding: 6px 10px;
         line-height: initial;
@@ -1221,7 +1205,8 @@
 
     &.form-compact {
         .form-label {
-            font: 700 11px/16px var(--base-font);
+            font: var(--form-label-font);
+            color: var(--form-label-color);
             margin: 0 0 5px;
         }
 
diff --git a/react/assets/forus-webshop/scss/_common/components/_label.scss b/react/assets/forus-webshop/scss/includes/components/_label.scss
similarity index 82%
rename from react/assets/forus-webshop/scss/_common/components/_label.scss
rename to react/assets/forus-webshop/scss/includes/components/_label.scss
index 646e2d02b..a5733aa0a 100644
--- a/react/assets/forus-webshop/scss/_common/components/_label.scss
+++ b/react/assets/forus-webshop/scss/includes/components/_label.scss
@@ -59,13 +59,8 @@
     }
 
     &.label-success {
-        background: #9bbfa1;
-        color: #030304;
-    }
-
-    &.label-waiting {
-        background: #a36a14;
-        color: #fff;
+        color: var(--label-success-color);
+        background: var(--label-success-background);
     }
 
     &.label-warning {
@@ -74,8 +69,8 @@
     }
 
     &.label-danger {
-        background: #d38c87;
-        color: #030304;
+        color: var(--label-danger-color);
+        background: var(--label-danger-background);
     }
 
     &.label-default {
@@ -84,13 +79,8 @@
     }
 
     &.label-primary {
-        background: var(--color-primary);
-        color: #fff;
-    }
-
-    &.label-info {
-        background: #5bc0de;
-        color: #030304;
+        color: var(--label-primary-color);
+        background: var(--label-primary-background);
     }
 
     &.label-light {
@@ -98,17 +88,6 @@
         color: #030304;
     }
 
-    &.label-dark {
-        background: #303030;
-        color: #fff;
-    }
-
-    &.label-dark-outline {
-        background: #fff;
-        border-color: #303030;
-        color: #303030;
-    }
-
     &.label-sm {
         padding: 0 5px;
         line-height: 18px;
diff --git a/react/assets/forus-webshop/scss/_common/components/_map-card.scss b/react/assets/forus-webshop/scss/includes/components/_map-card.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/components/_map-card.scss
rename to react/assets/forus-webshop/scss/includes/components/_map-card.scss
diff --git a/react/assets/forus-webshop/scss/_common/components/_modals.scss b/react/assets/forus-webshop/scss/includes/components/_modals.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/components/_modals.scss
rename to react/assets/forus-webshop/scss/includes/components/_modals.scss
diff --git a/react/assets/forus-webshop/scss/_common/components/_printables.scss b/react/assets/forus-webshop/scss/includes/components/_printables.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/components/_printables.scss
rename to react/assets/forus-webshop/scss/includes/components/_printables.scss
diff --git a/react/assets/forus-webshop/scss/_common/components/_tooltip.scss b/react/assets/forus-webshop/scss/includes/components/_tooltip.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/components/_tooltip.scss
rename to react/assets/forus-webshop/scss/includes/components/_tooltip.scss
diff --git a/react/assets/forus-webshop/scss/_common/components/_triangle.scss b/react/assets/forus-webshop/scss/includes/components/_triangle.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/components/_triangle.scss
rename to react/assets/forus-webshop/scss/includes/components/_triangle.scss
diff --git a/react/assets/forus-webshop/scss/_common/components/_ui-controls.scss b/react/assets/forus-webshop/scss/includes/components/_ui-controls.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/components/_ui-controls.scss
rename to react/assets/forus-webshop/scss/includes/components/_ui-controls.scss
diff --git a/react/assets/forus-webshop/scss/_common/components/button-groups.scss b/react/assets/forus-webshop/scss/includes/components/button-groups.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/components/button-groups.scss
rename to react/assets/forus-webshop/scss/includes/components/button-groups.scss
diff --git a/react/assets/forus-webshop/scss/_common/components/card.scss b/react/assets/forus-webshop/scss/includes/components/card.scss
similarity index 98%
rename from react/assets/forus-webshop/scss/_common/components/card.scss
rename to react/assets/forus-webshop/scss/includes/components/card.scss
index 55e9bb737..fc4decc11 100644
--- a/react/assets/forus-webshop/scss/_common/components/card.scss
+++ b/react/assets/forus-webshop/scss/includes/components/card.scss
@@ -21,7 +21,7 @@
     }
 
     .card-title {
-        font: 500 16px/28px var(--hf);
+        font: 500 16px/28px var(--heading-font-family);
         color: var(--tc);
         cursor: inherit;
         margin: 0;
@@ -57,7 +57,7 @@
         @include cf();
 
         .card-title {
-            font: 500 16px/30px var(--hf);
+            font: 500 16px/30px var(--heading-font-family);
             color: var(--tc);
             cursor: inherit;
             margin: 0 0 10px;
diff --git a/react/assets/forus-webshop/scss/_common/components/flex-grid.scss b/react/assets/forus-webshop/scss/includes/components/flex-grid.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/components/flex-grid.scss
rename to react/assets/forus-webshop/scss/includes/components/flex-grid.scss
diff --git a/react/assets/forus-webshop/scss/_common/components/frame-director.scss b/react/assets/forus-webshop/scss/includes/components/frame-director.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/components/frame-director.scss
rename to react/assets/forus-webshop/scss/includes/components/frame-director.scss
diff --git a/react/assets/forus-webshop/scss/_common/components/rate.scss b/react/assets/forus-webshop/scss/includes/components/rate.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/components/rate.scss
rename to react/assets/forus-webshop/scss/includes/components/rate.scss
diff --git a/react/assets/forus-webshop/scss/_common/components/table-pagination.scss b/react/assets/forus-webshop/scss/includes/components/table-pagination.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/components/table-pagination.scss
rename to react/assets/forus-webshop/scss/includes/components/table-pagination.scss
diff --git a/react/assets/forus-webshop/scss/_common/components/table.scss b/react/assets/forus-webshop/scss/includes/components/table.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/components/table.scss
rename to react/assets/forus-webshop/scss/includes/components/table.scss
diff --git a/react/assets/forus-webshop/scss/_common/includes/common.scss b/react/assets/forus-webshop/scss/includes/includes/common.scss
similarity index 99%
rename from react/assets/forus-webshop/scss/_common/includes/common.scss
rename to react/assets/forus-webshop/scss/includes/includes/common.scss
index d612c324f..733db6920 100644
--- a/react/assets/forus-webshop/scss/_common/includes/common.scss
+++ b/react/assets/forus-webshop/scss/includes/includes/common.scss
@@ -1,3 +1,9 @@
+.app-root {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+}
+
 :focus,
 :focus-visible {
     outline: var(--focus-outline) !important;
diff --git a/react/assets/forus-webshop/scss/_common/includes/helpers.scss b/react/assets/forus-webshop/scss/includes/includes/helpers.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/includes/helpers.scss
rename to react/assets/forus-webshop/scss/includes/includes/helpers.scss
diff --git a/react/assets/forus-webshop/scss/_common/includes/placeholders.scss b/react/assets/forus-webshop/scss/includes/includes/placeholders.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/includes/placeholders.scss
rename to react/assets/forus-webshop/scss/includes/includes/placeholders.scss
diff --git a/react/assets/forus-webshop/scss/_common/includes/resetter.scss b/react/assets/forus-webshop/scss/includes/includes/resetter.scss
similarity index 61%
rename from react/assets/forus-webshop/scss/_common/includes/resetter.scss
rename to react/assets/forus-webshop/scss/includes/includes/resetter.scss
index cee7303a4..bfb0cb637 100644
--- a/react/assets/forus-webshop/scss/_common/includes/resetter.scss
+++ b/react/assets/forus-webshop/scss/includes/includes/resetter.scss
@@ -1,19 +1,51 @@
-* , :after, :before{
-    -moz-box-sizing:    border-box;
+*,
+:after,
+:before {
+    -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
-    box-sizing:         border-box;
+    box-sizing: border-box;
     -webkit-font-smoothing: antialiased !important;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-html, body {
+html,
+body {
     margin: 0;
     padding: 0;
     color: var(--tc);
 }
 
-h1, h2, h3, h4, h5, h6, p, b, i, li, td{
-    font-family: var(--hf);
+html {
+    zoom: var(--zoom);
+
+    @media screen and (max-width: 1000px) {
+        zoom: var(--zoom-mobile);
+    }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+b,
+i,
+li,
+td {
+    font-family: var(--base-font), sans-serif;
+    font-weight: 300;
+    color: inherit;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-family: var(--heading-font-family), sans-serif !important;
     font-weight: 300;
     color: inherit;
 }
@@ -27,7 +59,6 @@ strong {
     font-weight: 700;
 }
 
-
 ul {
     margin: 0;
     padding: 0;
@@ -54,6 +85,7 @@ a {
     color: var(--text-color);
 }
 
-b, strong {
+b,
+strong {
     font-weight: 600;
-}
\ No newline at end of file
+}
diff --git a/react/assets/forus-webshop/scss/_common/includes/shame.scss b/react/assets/forus-webshop/scss/includes/includes/shame.scss
similarity index 79%
rename from react/assets/forus-webshop/scss/_common/includes/shame.scss
rename to react/assets/forus-webshop/scss/includes/includes/shame.scss
index 227f9c651..bec67bdbf 100644
--- a/react/assets/forus-webshop/scss/_common/includes/shame.scss
+++ b/react/assets/forus-webshop/scss/includes/includes/shame.scss
@@ -19,33 +19,32 @@ html {
 }
 
 .sr-only {
-    position:absolute;
-    left:-10000px;
-    top:auto;
-    width:1px;
-    height:1px;
-    overflow:hidden;
+    position: absolute;
+    left: -10000px;
+    top: auto;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
 }
 
 .section-product {
-
     .back {
         padding-bottom: 15px;
-        margin: 0px 50px;
+        margin: 0 50px;
         font: 500 18px/22px var(--base-font);
-        color: #9E9E9E;
+        color: #9e9e9e;
 
         span {
             display: inline-block;
             margin-top: 2px;
             font-size: 18px;
-            color: #9E9E9E;
+            color: #9e9e9e;
         }
     }
 
     .heading {
         font: 500 36px/36px var(--base-font);
-        color: #191A1C;
+        color: #191a1c;
         text-align: center;
     }
 
@@ -86,26 +85,15 @@ body {
     display: inline;
 
     &::before {
-        content: " (";
+        content: ' (';
     }
 
     &::after {
-        content: ")";
-    }
-}
-.section-title {
-    a {
-        font: inherit !important;
+        content: ')';
     }
 }
 
 @media screen and (min-width: 1024px) {
-    .section-profile {
-        .section-title {
-            text-align: left !important;
-        }
-    }
-
     .section-voucher-details {
         .section-title {
             text-align: center !important;
@@ -113,13 +101,10 @@ body {
             color: #222530;
         }
     }
-
 }
 
 @media screen and (max-width: 1024px) {
-
-    .section-voucher-details,
-    .section-profile {
+    .section-voucher-details {
         .section-title {
             font-size: 24px !important;
         }
@@ -128,12 +113,6 @@ body {
     .section-voucher-details {
         margin-top: 25px;
     }
-
-}
-
-ui-view {
-    flex: 1 0 auto;
-    min-height: 85vh;
 }
 
 @media screen and (max-width: 1500px) {
@@ -171,4 +150,4 @@ ui-view {
         top: 0 !important;
         display: flex;
     }
-}
\ No newline at end of file
+}
diff --git a/react/assets/forus-webshop/scss/_common/includes/third-party.scss b/react/assets/forus-webshop/scss/includes/includes/third-party.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/includes/third-party.scss
rename to react/assets/forus-webshop/scss/includes/includes/third-party.scss
diff --git a/react/assets/forus-webshop/scss/_common/includes/typgography.scss b/react/assets/forus-webshop/scss/includes/includes/typgography.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/includes/typgography.scss
rename to react/assets/forus-webshop/scss/includes/includes/typgography.scss
diff --git a/react/assets/forus-webshop/scss/includes/layout/_footer.scss b/react/assets/forus-webshop/scss/includes/layout/_footer.scss
new file mode 100644
index 000000000..8f91c37f5
--- /dev/null
+++ b/react/assets/forus-webshop/scss/includes/layout/_footer.scss
@@ -0,0 +1,283 @@
+.block.block-copyrights {
+    width: 100%;
+    border-top: 1px solid var(--footer-copyright-border-color);
+    padding: var(--footer-copyright-padding) 0;
+    text-align: center;
+    font: var(--footer-copyright-font);
+    background: var(--footer-copyright-background);
+
+    .wrapper {
+        height: 30px;
+        @include cf();
+    }
+
+    .copyrights {
+        float: left;
+        font: inherit;
+        color: #282b39;
+    }
+
+    .links {
+        display: flex;
+        justify-content: center;
+        flex-direction: row;
+
+        .link-item {
+            position: relative;
+            display: inline-flex;
+            padding: 0 30px;
+
+            &::after {
+                content: '';
+                height: 30px;
+                border-left: 1px solid var(--border-color);
+                display: block;
+                position: absolute;
+                right: 0;
+                top: 50%;
+                transform: translate(0, -50%);
+
+                &:last-child {
+                    margin-right: 0;
+                }
+            }
+
+            &:last-child {
+                a {
+                    margin-right: 0;
+                }
+
+                &::after {
+                    display: none;
+                }
+            }
+        }
+
+        a {
+            float: left;
+            font: inherit;
+            color: var(--footer-copyright-color);
+            display: block;
+            text-decoration: underline;
+
+            &:hover {
+                text-decoration: none;
+            }
+        }
+    }
+
+    @media screen and (max-width: 1000px) {
+        padding: 20px 0;
+        text-align: center;
+        height: auto;
+
+        .wrapper {
+            height: auto;
+        }
+
+        .copyrights {
+            width: 100%;
+        }
+
+        .links {
+            width: 100%;
+            flex-direction: column;
+
+            .link-item {
+                a {
+                    width: 100%;
+                    margin: 0;
+                    padding: 0;
+                }
+
+                &:after {
+                    content: none;
+                }
+            }
+
+            .link-separator {
+                display: none;
+            }
+        }
+    }
+
+    @media screen and (max-width: 1000px) {
+        padding: 20px 0;
+        text-align: center;
+        height: auto;
+
+        .wrapper {
+            height: auto;
+        }
+
+        .copyrights {
+            width: 100%;
+        }
+
+        .links {
+            width: 100%;
+
+            a {
+                width: 100%;
+                margin: 0;
+                padding: 0;
+            }
+
+            .link-separator {
+                display: none;
+            }
+        }
+    }
+}
+
+.block.block-footer {
+    padding: var(--footer_padding);
+    background: var(--footer_background);
+
+    .footer-logo {
+        width: 140px;
+        max-width: 100%;
+        margin-bottom: 30px;
+    }
+
+    .block.block-markdown {
+        h1,
+        h2,
+        h3,
+        h4 {
+            color: var(--footer_color);
+        }
+
+        h3 {
+            margin: 0.9em 0 0.9em 0;
+        }
+
+        a {
+            color: var(--footer_color_link);
+
+            &:hover {
+                color: var(--footer_color_link_hover);
+            }
+        }
+    }
+
+    .footer-social-medias {
+        .footer-social-media-title {
+            margin-top: 25px;
+            margin-bottom: 15px;
+            font: 600 16px/24px var(--base-font);
+            color: var(--footer_color);
+        }
+
+        .footer-social-media-icon {
+            width: 36px;
+            height: 36px;
+            font-size: 21px;
+            line-height: 34px;
+            text-align: center;
+            border-radius: var(--footer_social_border_radius);
+            margin-right: 10px;
+            color: var(--footer_social_color);
+            background: var(--footer_social_background);
+            position: relative;
+
+            &:after {
+                content: '';
+                @include fill_parent();
+                border-radius: inherit;
+                border: 1px solid var(--footer_social_border_color);
+                opacity: 0.25;
+            }
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+
+    .footer-nav {
+        .footer-nav-item {
+            display: block;
+            margin-bottom: 10px;
+
+            svg {
+                height: 20px;
+                width: 23px;
+                margin-right: 5px;
+                margin-bottom: -3px;
+
+                path {
+                    fill: var(--footer_color_link);
+                }
+            }
+
+            a {
+                color: var(--footer_color_link);
+                font: 400 16px/1.5em var(--base-font);
+                transition: color 0.4s;
+            }
+
+            &:last-child {
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    .footer-sponsor-logo {
+        display: flex;
+
+        .footer-sponsor-logo-mg {
+            width: 180px;
+            display: block;
+        }
+    }
+
+    @media screen and (max-width: 1000px) {
+        .block-markdown {
+            text-align: center;
+
+            * {
+                text-align: inherit;
+            }
+        }
+
+        .footer-sponsor-logo,
+        .footer-social-media-icons {
+            justify-content: center;
+        }
+
+        .footer-social-media-title {
+            text-align: center;
+        }
+    }
+
+    @media screen and (max-width: 1700px) {
+        .footer-nav {
+            .footer-nav-item {
+                a {
+                    font: 400 16px/24px var(--base-font);
+                }
+            }
+        }
+    }
+
+    @media screen and (max-width: 1000px) {
+        margin: 0 0 30px;
+
+        .footer-logo {
+            margin: 0 auto 40px;
+            display: block;
+        }
+
+        .footer-nav {
+            display: inline-block;
+            text-align: center;
+
+            .footer-nav-item {
+                a {
+                    font: 400 14px/22px var(--base-font);
+                }
+            }
+        }
+    }
+}
diff --git a/react/assets/forus-webshop/scss/_common/layout/_grid.scss b/react/assets/forus-webshop/scss/includes/layout/_grid.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/layout/_grid.scss
rename to react/assets/forus-webshop/scss/includes/layout/_grid.scss
diff --git a/react/assets/forus-webshop/scss/_common/layout/_header.scss b/react/assets/forus-webshop/scss/includes/layout/_header.scss
similarity index 72%
rename from react/assets/forus-webshop/scss/_common/layout/_header.scss
rename to react/assets/forus-webshop/scss/includes/layout/_header.scss
index fdcfdc914..5d5f38a53 100644
--- a/react/assets/forus-webshop/scss/_common/layout/_header.scss
+++ b/react/assets/forus-webshop/scss/includes/layout/_header.scss
@@ -1,6 +1,7 @@
 .section {
     .section-title {
-        font: 700 40px/60px var(--hf);
+        font: var(--heading-font);
+        color: var(--heading-color);
         margin: 0 0 20px;
         text-align: center;
     }
@@ -14,7 +15,7 @@
 
     .section-title {
         @media screen and (max-width: 1000px) {
-            font: 500 1.6em var(--hf);
+            font: 500 1.6em var(--heading-font-family);
         }
     }
 }
diff --git a/react/assets/forus-webshop/scss/_common/modals/modal-2fa-setup.scss b/react/assets/forus-webshop/scss/includes/modals/modal-2fa-setup.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/modals/modal-2fa-setup.scss
rename to react/assets/forus-webshop/scss/includes/modals/modal-2fa-setup.scss
diff --git a/react/assets/forus-webshop/scss/_common/modals/modal-file-preview.scss b/react/assets/forus-webshop/scss/includes/modals/modal-file-preview.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/modals/modal-file-preview.scss
rename to react/assets/forus-webshop/scss/includes/modals/modal-file-preview.scss
diff --git a/react/assets/forus-webshop/scss/_common/modals/modal-fund-help.scss b/react/assets/forus-webshop/scss/includes/modals/modal-fund-help.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/modals/modal-fund-help.scss
rename to react/assets/forus-webshop/scss/includes/modals/modal-fund-help.scss
diff --git a/react/assets/forus-webshop/scss/_common/modals/modal-notification.scss b/react/assets/forus-webshop/scss/includes/modals/modal-notification.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/modals/modal-notification.scss
rename to react/assets/forus-webshop/scss/includes/modals/modal-notification.scss
diff --git a/react/assets/forus-webshop/scss/_common/modals/modal-open-in-me.scss b/react/assets/forus-webshop/scss/includes/modals/modal-open-in-me.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/modals/modal-open-in-me.scss
rename to react/assets/forus-webshop/scss/includes/modals/modal-open-in-me.scss
diff --git a/react/assets/forus-webshop/scss/_common/modals/modal-photo-cropper.scss b/react/assets/forus-webshop/scss/includes/modals/modal-photo-cropper.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/modals/modal-photo-cropper.scss
rename to react/assets/forus-webshop/scss/includes/modals/modal-photo-cropper.scss
diff --git a/react/assets/forus-webshop/scss/_common/modals/modal-physical-cards.scss b/react/assets/forus-webshop/scss/includes/modals/modal-physical-cards.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/modals/modal-physical-cards.scss
rename to react/assets/forus-webshop/scss/includes/modals/modal-physical-cards.scss
diff --git a/react/assets/forus-webshop/scss/_common/modals/modal-pin-code.scss b/react/assets/forus-webshop/scss/includes/modals/modal-pin-code.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/modals/modal-pin-code.scss
rename to react/assets/forus-webshop/scss/includes/modals/modal-pin-code.scss
diff --git a/react/assets/forus-webshop/scss/_common/modals/modal-product-reserve.scss b/react/assets/forus-webshop/scss/includes/modals/modal-product-reserve.scss
similarity index 100%
rename from react/assets/forus-webshop/scss/_common/modals/modal-product-reserve.scss
rename to react/assets/forus-webshop/scss/includes/modals/modal-product-reserve.scss
diff --git a/react/assets/forus-webshop/scss/includes/pages/voucher.scss b/react/assets/forus-webshop/scss/includes/pages/voucher.scss
new file mode 100644
index 000000000..e5d2a8937
--- /dev/null
+++ b/react/assets/forus-webshop/scss/includes/pages/voucher.scss
@@ -0,0 +1,12 @@
+.page.page-voucher {
+    display: flex;
+    flex-direction: column;
+
+    .section.section-map {
+        order: var(--order-page-voucher-map);
+    }
+
+    .section.section-products {
+        order: var(--order-page-voucher-products);
+    }
+}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/includes/sections/_section.scss b/react/assets/forus-webshop/scss/includes/sections/_section.scss
new file mode 100644
index 000000000..b8578276b
--- /dev/null
+++ b/react/assets/forus-webshop/scss/includes/sections/_section.scss
@@ -0,0 +1,20 @@
+.section {
+    .section-title {
+        color: var(--heading-color);
+        font: var(--section-title-font);
+        text-align: var(--section-title-align);
+        margin: 0 0 20px;
+
+        a {
+            font: inherit !important;
+            color: inherit !important;
+        }
+    }
+
+    @media screen and (max-width: 1000px) {
+        .section-title {
+            font: 500 24px/36px var(--heading-font-family);
+            margin: 0 0 20px;
+        }
+    }
+}
diff --git a/react/assets/forus-webshop/scss/includes/sections/section-breadcrumbs.scss b/react/assets/forus-webshop/scss/includes/sections/section-breadcrumbs.scss
new file mode 100644
index 000000000..1b3899335
--- /dev/null
+++ b/react/assets/forus-webshop/scss/includes/sections/section-breadcrumbs.scss
@@ -0,0 +1,7 @@
+.section.section-breadcrumbs {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding: var(--section-breadcrumbs-padding);
+    background: var(--section-breadcrumbs-background);
+}
diff --git a/react/assets/forus-webshop/scss/includes/sections/section-cms.scss b/react/assets/forus-webshop/scss/includes/sections/section-cms.scss
new file mode 100644
index 000000000..3f37f8664
--- /dev/null
+++ b/react/assets/forus-webshop/scss/includes/sections/section-cms.scss
@@ -0,0 +1,6 @@
+.section.section-cms {
+    display: flex;
+    flex-direction: column;
+    padding: var(--section-cms-padding);
+    background: var(--section-cms-background);
+}
diff --git a/react/assets/forus-webshop/scss/includes/sections/section-faq.scss b/react/assets/forus-webshop/scss/includes/sections/section-faq.scss
new file mode 100644
index 000000000..aa9adb2e2
--- /dev/null
+++ b/react/assets/forus-webshop/scss/includes/sections/section-faq.scss
@@ -0,0 +1,7 @@
+.section.section-faq {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding: var(--section-faq-padding);
+    background: var(--section-faq-background);
+}
diff --git a/react/assets/forus-webshop/scss/includes/sections/section-footer.scss b/react/assets/forus-webshop/scss/includes/sections/section-footer.scss
new file mode 100644
index 000000000..904eb6b3f
--- /dev/null
+++ b/react/assets/forus-webshop/scss/includes/sections/section-footer.scss
@@ -0,0 +1,10 @@
+.section.section-footer {
+    z-index: 1;
+    color: var(--footer_color);
+    padding: var(--section-footer-padding);
+    background: var(--section-footer-background);
+
+    @media screen and (max-width: 1000px) {
+        padding: 0;
+    }
+}
diff --git a/react/assets/forus-webshop/scss/includes/sections/section-map.scss b/react/assets/forus-webshop/scss/includes/sections/section-map.scss
new file mode 100644
index 000000000..92624ac13
--- /dev/null
+++ b/react/assets/forus-webshop/scss/includes/sections/section-map.scss
@@ -0,0 +1,7 @@
+.section.section-map {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding: var(--section-map-padding);
+    background: var(--section-map-background);
+}
diff --git a/react/assets/forus-webshop/scss/includes/sections/section-products.scss b/react/assets/forus-webshop/scss/includes/sections/section-products.scss
new file mode 100644
index 000000000..e37548805
--- /dev/null
+++ b/react/assets/forus-webshop/scss/includes/sections/section-products.scss
@@ -0,0 +1,7 @@
+.section.section-products {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding: var(--section-products-padding);
+    background: var(--section-products-background);
+}
diff --git a/react/assets/forus-webshop/scss/includes/sections/section-profile.scss b/react/assets/forus-webshop/scss/includes/sections/section-profile.scss
new file mode 100644
index 000000000..1a6aee2ad
--- /dev/null
+++ b/react/assets/forus-webshop/scss/includes/sections/section-profile.scss
@@ -0,0 +1,7 @@
+.section.section-profile {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding: var(--section-profile-padding);
+    background: var(--section-profile-background);
+}
diff --git a/react/assets/forus-webshop/scss/includes/sections/section-voucher-details.scss b/react/assets/forus-webshop/scss/includes/sections/section-voucher-details.scss
new file mode 100644
index 000000000..e84a76a76
--- /dev/null
+++ b/react/assets/forus-webshop/scss/includes/sections/section-voucher-details.scss
@@ -0,0 +1,7 @@
+.section.section-voucher-details {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding: var(--section-voucher-details-padding);
+    background: var(--section-voucher-details-background);
+}
diff --git a/react/assets/forus-webshop/scss/kerstpakket/components/_buttons.scss b/react/assets/forus-webshop/scss/kerstpakket/components/_buttons.scss
deleted file mode 100644
index b0121671a..000000000
--- a/react/assets/forus-webshop/scss/kerstpakket/components/_buttons.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.button {
-    &.button-primary {
-        &:hover {
-            background-color: #fff;
-            color: var(--color-default);
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/kerstpakket/layout/_footer.scss b/react/assets/forus-webshop/scss/kerstpakket/layout/_footer.scss
deleted file mode 100644
index 54161e54a..000000000
--- a/react/assets/forus-webshop/scss/kerstpakket/layout/_footer.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.section {
-    &.section-footer {
-        .block-footer {
-            background-image: url("../img/footer-bg.png");
-            background-repeat: no-repeat;
-            background-size: cover; 
-            margin: 0px;
-            min-height: 300px;
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/kerstpakket/sections/blocks/products.scss b/react/assets/forus-webshop/scss/kerstpakket/sections/blocks/products.scss
deleted file mode 100644
index 0ca9e9e71..000000000
--- a/react/assets/forus-webshop/scss/kerstpakket/sections/blocks/products.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.section {
-    &.section-products {
-        min-height: 500px;
-        position: unset;
-        top: 650px;
-
-        @media screen and (min-width: 1024px) {
-            &:before {
-                position: absolute;
-                left:0;
-                top: 550px;
-                width: 360px;
-                height: 100%;
-                background-image: url("../img/giftbox.png");
-                background-repeat: no-repeat;
-                z-index: -1;
-                content: " ";
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/kerstpakket/sections/faq.scss b/react/assets/forus-webshop/scss/kerstpakket/sections/faq.scss
deleted file mode 100644
index 41dd35c0f..000000000
--- a/react/assets/forus-webshop/scss/kerstpakket/sections/faq.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.section {
-    &.section-faq {
-        .faq {
-            .faq-item {
-                border: 1px solid #e6ecf0;
-
-                .faq-item-header {
-                    .faq-item-chevron-up {
-                        color: #6dad50;
-                    }
-                    &.active {
-                        color: #6dad50;
-                    }
-                }
-
-                &:hover:not(.active) {
-                    .faq-item-header {
-                        color: var(--color-primary);
-
-                        .faq-item-chevron-up {
-                            color: #6dad50;
-                        }
-                        .faq-item-chevron-down {
-                            color: var(--color-primary);
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/react/assets/forus-webshop/scss/kerstpakket/sections/map.scss b/react/assets/forus-webshop/scss/kerstpakket/sections/map.scss
deleted file mode 100644
index f9bbb7681..000000000
--- a/react/assets/forus-webshop/scss/kerstpakket/sections/map.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.section {
-    &.section-map {
-        @media screen and (min-width: 1024px) {
-            &:before {
-                position: absolute;
-                right:0;
-                bottom: 0;
-                width: 263px;
-                height: 100%;
-                background-image: url("../img/right_leaf.png");
-                background-repeat: no-repeat;
-                z-index: -1;
-                content: " ";
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/kerstpakket/sections/steps.scss b/react/assets/forus-webshop/scss/kerstpakket/sections/steps.scss
deleted file mode 100644
index d3d4e6800..000000000
--- a/react/assets/forus-webshop/scss/kerstpakket/sections/steps.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-.section {
-    &.section-steps {
-        @media screen and (min-width: 1024px) {
-            &:before {
-                position: absolute;
-                left:0;
-                bottom: 0;
-                width: 360px;
-                height: 100%;
-                background-image: url("../img/small_leaf.png");
-                background-repeat: no-repeat;
-                z-index: -1;
-                content: " ";
-            }
-        }
-        .section-splash{
-            display: none !important;
-        }
-        .section-sprite{
-            display: none !important;
-        }
-        .steps {
-            background: none;
-
-            .step-item {
-                min-height: 140px;
-                margin-bottom: 30px !important;
-
-                h4 {
-                    color: var(--tc);
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/noordoostpolder/components/_breadcrumbs.scss b/react/assets/forus-webshop/scss/noordoostpolder/components/_breadcrumbs.scss
deleted file mode 100644
index 2ccf99546..000000000
--- a/react/assets/forus-webshop/scss/noordoostpolder/components/_breadcrumbs.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.block {
-    &.block-breadcrumbs {
-        .breadcrumb-item {
-            color: var(--color-default);
-
-            &:hover {
-                color: var(--color-default);
-            }
-
-            &.active {
-                color: #4e4d40;
-            }
-        }
-
-        +.section-title {
-            margin-top: -20px;
-        }
-    }
-    @media screen and (max-width: 1000px) {
-        &.block-breadcrumbs {
-            .breadcrumb-item {
-                &.active {
-                    color: var(--tc-var);
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/noordoostpolder/components/_label.scss b/react/assets/forus-webshop/scss/noordoostpolder/components/_label.scss
deleted file mode 100644
index e9ce16964..000000000
--- a/react/assets/forus-webshop/scss/noordoostpolder/components/_label.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.label {
-    &.label-default {
-        background: #20b6ea;
-        color: #fff;
-    }
-
-    &.label-danger {
-        background: #549104;
-        color: #fff;
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/noordoostpolder/includes/shame.scss b/react/assets/forus-webshop/scss/noordoostpolder/includes/shame.scss
deleted file mode 100644
index e9102146b..000000000
--- a/react/assets/forus-webshop/scss/noordoostpolder/includes/shame.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-// these items have  section as parent class, while other implementatios have block as parent
-
-.section {
-    .section-title {
-        color: #4e4d40;
-        text-align: center;
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/map.scss b/react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/map.scss
deleted file mode 100644
index d51aaa332..000000000
--- a/react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/map.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.block {
-    @media screen and (max-width: 1700px) {
-        &.block-map {
-            padding: 120px 0 240px;
-    
-            @media screen and (max-width: 1000px) {
-                padding: 30px 0;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/products.scss b/react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/products.scss
deleted file mode 100644
index ceb581703..000000000
--- a/react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/products.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.block.block-products {
-    --products-title-color: var(--color-default);
-    --products-title-hover-color: var(--tc);
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/profile.scss b/react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/profile.scss
deleted file mode 100644
index 0b38be910..000000000
--- a/react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/profile.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-.block {
-    &.block-profile {
-        .profile-aside {
-            .profile-card {
-                .profile-details {
-                    .profile-heading {
-                        color: var(--bc);
-                    }
-                }
-
-                .profile-actions {
-                    .profile-action {
-                        color: var(--tc-var);
-
-                        .mdi {
-                            color: var(--color-primary);
-                        }
-
-                        &:hover {
-                            color: var(--color-primary);
-                        }
-                    }
-                }
-            }
-
-            .profile-menu {
-                .profile-menu-item {
-                    color: var(--color-primary);
-
-                    .mdi {
-                        color: var(--color-primary);
-                    }
-
-                    &.active {
-                        background-color: var(--color-primary);
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/shops_map.scss b/react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/shops_map.scss
deleted file mode 100644
index b795cb754..000000000
--- a/react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/shops_map.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-.block {
-    &.block-shops_map {
-        .shop_map-header {
-            .shop_map-categories {
-                .shop_map-category-item {
-                    .shop_map-category-item-inner {
-                        background: #5ec0ed;
-                        border-radius: 8px;
-
-                        &:hover {
-                            background: #08abeb;
-                        }
-                    }
-                }
-            }
-        }
-
-        .shops {
-            .shop-item {
-                &.active {
-                    border-right-color: #5ec0ed;
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/transactions.scss b/react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/transactions.scss
deleted file mode 100644
index 2680f2fbc..000000000
--- a/react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/transactions.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.block {
-    &.block-transactions {
-        .transactions-list {
-            .transactions-item {
-                .transactions-item-icon {
-                    .mdi {
-                        color: #91b845;
-                    }
-                }
-
-                &.transactions-item-out {
-                    .transactions-item-amount {
-                        .transactions-item-value {
-                            color: #4c91b3;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/voucher.scss b/react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/voucher.scss
deleted file mode 100644
index f6d500b0a..000000000
--- a/react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/voucher.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.block {
-    &.block-voucher {
-        .base-card {
-            border-radius: 8px;
-            margin-bottom: 70px;
-            .card-footer {
-                background-color: #f6f8fa;
-                border-top-color: #d2e6ff;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/vouchers.scss b/react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/vouchers.scss
deleted file mode 100644
index cc7107770..000000000
--- a/react/assets/forus-webshop/scss/noordoostpolder/sections/blocks/vouchers.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.block {
-    &.block-vouchers {
-        .voucher-item {
-            .voucher-details {
-                .voucher-organization {
-                    color: #4c91b3;
-                }
-                
-                .voucher-value {
-                    color: #91b845;
-                }
-            }
-
-            .voucher-overview {
-                .voucher-overview-item {
-                    .voucher-overview-label {
-                        color: #4c91b3;
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/noordoostpolder/sections/faq.scss b/react/assets/forus-webshop/scss/noordoostpolder/sections/faq.scss
deleted file mode 100644
index 3a6506974..000000000
--- a/react/assets/forus-webshop/scss/noordoostpolder/sections/faq.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-.section {
-    &.section-faq {
-        .faq {
-            .faq-item {
-                .faq-item-content{
-                    a{
-                        color: var(--bc);
-                        font-size: 14px;
-                        text-decoration: underline;
-                    
-                        &:hover{
-                            color: var(--bc);
-                            text-decoration: none;
-                        }
-                    }
-                }
-                &:hover:not(.active) {
-                    .faq-item-header {
-                        color: #de286a;
-                        box-shadow: 5px 15px 45px rgba(0,0,0,0.15);
-
-                        .faq-item-chevron-up,
-                        .faq-item-chevron-down {
-                            color: #de286a;
-                        }
-                    }
-                }
-                &.active {
-                    .faq-item-header {
-                        .faq-item-chevron-up {
-                            color: #de286a;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/noordoostpolder/sections/steps.scss b/react/assets/forus-webshop/scss/noordoostpolder/sections/steps.scss
deleted file mode 100644
index e94b828e8..000000000
--- a/react/assets/forus-webshop/scss/noordoostpolder/sections/steps.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.section {
-    &.section-steps {
-        .section-splash{
-            display:none;
-        }
-        .section-sprite{
-            display:none;
-        }
-        .steps {
-            background: none;
-
-            .step-item {
-                min-height: 140px;
-                margin-bottom: 30px !important;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/noordoostpolder/sections/vouchers.scss b/react/assets/forus-webshop/scss/noordoostpolder/sections/vouchers.scss
deleted file mode 100644
index 9a592bf4f..000000000
--- a/react/assets/forus-webshop/scss/noordoostpolder/sections/vouchers.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.section {
-    &.section-voucher-details,
-    &.section-product {
-        .section-title {
-            display: none;
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/oostgelre/components/_breadcrumbs.scss b/react/assets/forus-webshop/scss/oostgelre/components/_breadcrumbs.scss
deleted file mode 100644
index adbd43c08..000000000
--- a/react/assets/forus-webshop/scss/oostgelre/components/_breadcrumbs.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.block {
-    &.block-breadcrumbs {
-        .breadcrumb-item {
-            color: #4F4F4F;
-            text-decoration: underline;
-
-            &:hover {
-                color: #4F4F4F;
-            }
-
-            &.active {
-                color: #4F4F4F;
-            }
-        }
-
-        +.section-title {
-            margin-top: -20px;
-        }
-    }
-    @media screen and (max-width: 1000px) {
-        &.block-breadcrumbs {
-            .breadcrumb-item {
-                &.active {
-                    color: var(--tc);
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/oostgelre/components/_buttons.scss b/react/assets/forus-webshop/scss/oostgelre/components/_buttons.scss
deleted file mode 100644
index 7ee0b0c60..000000000
--- a/react/assets/forus-webshop/scss/oostgelre/components/_buttons.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.button {
-    &:hover {
-        box-shadow: none;
-    }
-
-    &.button-primary {
-        color: var(--tc-var);
-        background: var(--color-default);
-        text-shadow: none;
-        border: 1px solid transparent;
-        &:hover {
-            color: var(--color-default);
-            text-decoration: underline;
-            background-color: #fff;
-            box-shadow: none;
-            border: 1px solid var(--color-default);
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/oostgelre/includes/shame.scss b/react/assets/forus-webshop/scss/oostgelre/includes/shame.scss
deleted file mode 100644
index 5a7f9418b..000000000
--- a/react/assets/forus-webshop/scss/oostgelre/includes/shame.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-// these items have  section as parent class, while other implementatios have block as parent
-
-.section {
-    .section-title {
-        text-align: center;
-    }
-
-    &.section-profile {
-        .section-title {
-            text-align: left;
-            color: #fff;
-        }
-   }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/oostgelre/sections/blocks/map.scss b/react/assets/forus-webshop/scss/oostgelre/sections/blocks/map.scss
deleted file mode 100644
index e378920a7..000000000
--- a/react/assets/forus-webshop/scss/oostgelre/sections/blocks/map.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.block {
-    &.block-map {
-        padding: 120px 0 240px;
-
-        @media screen and (max-width: 1000px) {
-            padding: 30px 0;
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/oostgelre/sections/blocks/products.scss b/react/assets/forus-webshop/scss/oostgelre/sections/blocks/products.scss
deleted file mode 100644
index e20ea07cb..000000000
--- a/react/assets/forus-webshop/scss/oostgelre/sections/blocks/products.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.block.block-products {
-    --products-title-color: var(--color-default);
-    --products-title-hover-color: var(--color-primary);
-}
diff --git a/react/assets/forus-webshop/scss/oostgelre/sections/blocks/profile.scss b/react/assets/forus-webshop/scss/oostgelre/sections/blocks/profile.scss
deleted file mode 100644
index 0d26f7ea2..000000000
--- a/react/assets/forus-webshop/scss/oostgelre/sections/blocks/profile.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-.section {
-    &.section-profile {
-        .section-title {
-            text-align: left;
-            color: var(--tc);
-        }
-    }
-}
-
-.block {
-    &.block-profile {
-        .profile-aside {
-            .profile-card {
-                .profile-details {
-                    .profile-heading {
-                        color: var(--bc);
-                    }
-                }
-
-                .profile-actions {
-                    .profile-action {
-                        color: var(--tc);
-
-                        .mdi {
-                            color: var(--color-primary);
-                        }
-
-                        &:hover {
-                            color: var(--color-primary);
-                        }
-                    }
-                }
-            }
-
-            .profile-menu {
-                .profile-menu-item {
-                    box-shadow: none;
-                    color: var(--tc-var);
-                    background: var(--color-default);
-                    text-shadow: none;
-                    border: 1px solid transparent;
-
-                    .mdi {
-                        color: var(--tc-var);
-                    }
-
-                    &:hover {
-                        color: var(--color-default);
-                        text-decoration: underline;
-                        background-color: #fff;
-                        box-shadow: none;
-                        border: 1px solid var(--color-default);
-
-                        .mdi {
-                            color: var(--color-default);
-                        }
-                    }
-
-                    &.active {
-                        background-color: #fff;
-                        color: var(--color-default);
-                        box-shadow: none;
-                        border: 1px solid var(--color-default);
-
-                        .mdi {
-                            color: var(--color-default);
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/react/assets/forus-webshop/scss/oostgelre/sections/blocks/shops_map.scss b/react/assets/forus-webshop/scss/oostgelre/sections/blocks/shops_map.scss
deleted file mode 100644
index b795cb754..000000000
--- a/react/assets/forus-webshop/scss/oostgelre/sections/blocks/shops_map.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-.block {
-    &.block-shops_map {
-        .shop_map-header {
-            .shop_map-categories {
-                .shop_map-category-item {
-                    .shop_map-category-item-inner {
-                        background: #5ec0ed;
-                        border-radius: 8px;
-
-                        &:hover {
-                            background: #08abeb;
-                        }
-                    }
-                }
-            }
-        }
-
-        .shops {
-            .shop-item {
-                &.active {
-                    border-right-color: #5ec0ed;
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/oostgelre/sections/blocks/transactions.scss b/react/assets/forus-webshop/scss/oostgelre/sections/blocks/transactions.scss
deleted file mode 100644
index 2680f2fbc..000000000
--- a/react/assets/forus-webshop/scss/oostgelre/sections/blocks/transactions.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.block {
-    &.block-transactions {
-        .transactions-list {
-            .transactions-item {
-                .transactions-item-icon {
-                    .mdi {
-                        color: #91b845;
-                    }
-                }
-
-                &.transactions-item-out {
-                    .transactions-item-amount {
-                        .transactions-item-value {
-                            color: #4c91b3;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/oostgelre/sections/blocks/voucher.scss b/react/assets/forus-webshop/scss/oostgelre/sections/blocks/voucher.scss
deleted file mode 100644
index f6d500b0a..000000000
--- a/react/assets/forus-webshop/scss/oostgelre/sections/blocks/voucher.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.block {
-    &.block-voucher {
-        .base-card {
-            border-radius: 8px;
-            margin-bottom: 70px;
-            .card-footer {
-                background-color: #f6f8fa;
-                border-top-color: #d2e6ff;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/oostgelre/sections/blocks/vouchers.scss b/react/assets/forus-webshop/scss/oostgelre/sections/blocks/vouchers.scss
deleted file mode 100644
index 50833b0bf..000000000
--- a/react/assets/forus-webshop/scss/oostgelre/sections/blocks/vouchers.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.block {
-    &.block-vouchers {
-        .voucher-item {
-            .voucher-details {
-                .voucher-organization {
-                    color: #4c91b3;
-                }
-                
-                .voucher-value {
-                    color: var(--tc);
-                }
-            }
-
-            .voucher-overview {
-                .voucher-overview-item {
-                    .voucher-overview-label {
-                        color: #4c91b3;
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/oostgelre/sections/faq.scss b/react/assets/forus-webshop/scss/oostgelre/sections/faq.scss
deleted file mode 100644
index 75f803eb2..000000000
--- a/react/assets/forus-webshop/scss/oostgelre/sections/faq.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.section {
-    &.section-faq {
-        .faq {
-            .faq-item {
-                &:hover:not(.active) {
-                    .faq-item-header {
-                        color: var(--color-default);
-
-                        .faq-item-chevron-up,
-                        .faq-item-chevron-down {
-                            color: var(--color-default);
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/oostgelre/sections/steps.scss b/react/assets/forus-webshop/scss/oostgelre/sections/steps.scss
deleted file mode 100644
index 88372e1f8..000000000
--- a/react/assets/forus-webshop/scss/oostgelre/sections/steps.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.section {
-    &.section-steps {
-        padding-top: 50px;
-        padding-bottom: 50px;
-        background: #fff;
-        .section-splash{
-            display:none;
-        }
-        .section-sprite{
-            display:none;
-        }
-        .steps {
-            background: none;
-            .step-item {
-                min-height: 140px;
-                margin-bottom: 30px !important;
-
-                h4 {
-                    color: var(--tc);
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/oostgelre/sections/vouchers.scss b/react/assets/forus-webshop/scss/oostgelre/sections/vouchers.scss
deleted file mode 100644
index 9a592bf4f..000000000
--- a/react/assets/forus-webshop/scss/oostgelre/sections/vouchers.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.section {
-    &.section-voucher-details,
-    &.section-product {
-        .section-title {
-            display: none;
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/potjeswijzer/components/_buttons.scss b/react/assets/forus-webshop/scss/potjeswijzer/components/_buttons.scss
deleted file mode 100644
index 8e31acb83..000000000
--- a/react/assets/forus-webshop/scss/potjeswijzer/components/_buttons.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.button {
-    &.button-primary {
-        color: #666;
-        background: var(--color-primary);
-        border: var(--color-primary);
-        text-shadow: none;
-        
-        &:hover {
-            color: #666;
-            background: var(--color-primary-light);
-            background-color: var(--color-primary-light);
-        }
-    }
-
-    &.button-primary-outline {
-        color: #fff;
-        border: 1px solid #498fb4;
-        background: #498fb4;
-
-        &:hover {
-            background: transparent;
-            color: #498fb4;
-        }
-    }
-    
-    &[disabled], &.disabled {
-        color: #999;
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/potjeswijzer/components/_form.scss b/react/assets/forus-webshop/scss/potjeswijzer/components/_form.scss
deleted file mode 100644
index cee535cd3..000000000
--- a/react/assets/forus-webshop/scss/potjeswijzer/components/_form.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.form {
-    .form-error {
-        color: #d13b3b;
-    }
-
-    .form-control-checked {
-        .mdi {
-            color: var(--color-primary);
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/potjeswijzer/components/_label.scss b/react/assets/forus-webshop/scss/potjeswijzer/components/_label.scss
deleted file mode 100644
index 03dcccd46..000000000
--- a/react/assets/forus-webshop/scss/potjeswijzer/components/_label.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-.label {
-    &.label-success {
-        background: var(--color-primary);
-        color: #fff;
-    }
-
-    &.label-primary {
-        background: #1C8271;
-        color: #fff;
-    }
-
-    &.label-square {
-        border-radius: 4px;
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/potjeswijzer/includes/shame.scss b/react/assets/forus-webshop/scss/potjeswijzer/includes/shame.scss
deleted file mode 100644
index f22ab86e0..000000000
--- a/react/assets/forus-webshop/scss/potjeswijzer/includes/shame.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-.text-primary {
-    color: #666 !important;
-}
-
-.section {
-    &.section-faq {
-        .faq {
-            margin: 0;
-
-            .faq-item {
-                .faq-item-header {
-                    color: #4990B5 !important;
-
-                    .faq-item-title {
-                        color: #666;
-                    }
-
-                    .faq-item-chevron-up,
-                    .faq-item-chevron-down {
-                        color: #4990B5 !important;
-                    }
-                }
-
-                &:hover:not(.active) {
-                    .faq-item-header {
-                        color: #4990B5 !important;
-
-                        .faq-item-chevron-up,
-                        .faq-item-chevron-down {
-                            color: #4990B5 !important;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-.block {
-    &.block-markdown {
-        margin-bottom: 50px;
-    }
-
-    &.block-pane {    
-        .pane-head {
-            .pane-head-count {
-                color: #666;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/potjeswijzer/layout/_footer.scss b/react/assets/forus-webshop/scss/potjeswijzer/layout/_footer.scss
deleted file mode 100644
index 3176b82e2..000000000
--- a/react/assets/forus-webshop/scss/potjeswijzer/layout/_footer.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-.section {
-    &.section-footer {
-        background-color: var(--footer_background_color);
-        margin-top: 50px;
-
-        @media screen and (min-width: 1024px) { 
-            margin-top: 100px;
-        }
-    }
-}
-.block {
-    &.block-footer {
-        .footer-nav {
-            .footer-nav-item {
-                color: var(--tc-var);
-                a {
-                    color: var(--tc-var);
-    
-                    &:hover {
-                        color: var(--tc-var);
-                    }
-                }
-                svg {
-                    path {
-                        fill: var(--tc-var);
-                    }
-                }
-            }
-        }
-
-        .footer-label {
-            .wrapper {
-                padding: 0;
-            }
-        }
-        .block {
-            &.block-markdown {
-                img {
-                    max-width: inherit !important;
-                }
-
-                @media screen and (max-width: 1000px) { 
-                    img {
-                        height: 40px !important;
-                    }
-    
-                }
-
-                h3, p{
-                    color: #ffffff;
-                }
-            }
-        }
-    }
-
-    &.block-copyrights {
-        background-color: var(--navbar-menu-item-color);
-        .links {
-            a {
-                &:hover {
-                    text-decoration: none;
-                }
-            }
-        }
-
-        .developed {
-            a {
-                color: var(--tc-var);
-
-                &:hover {
-                    color: var(--tc-var);
-                }
-            }
-        }
-    }
-}
diff --git a/react/assets/forus-webshop/scss/potjeswijzer/sections/blocks/block-lang-control.scss b/react/assets/forus-webshop/scss/potjeswijzer/sections/blocks/block-lang-control.scss
deleted file mode 100644
index fa4d064f4..000000000
--- a/react/assets/forus-webshop/scss/potjeswijzer/sections/blocks/block-lang-control.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.block.block-lang-control {
-    .lang-control-input {
-        .lang-control-search {
-            color: #ffffff;
-        }
-    }
-}
diff --git a/react/assets/forus-webshop/scss/schagen/includes/shame.scss b/react/assets/forus-webshop/scss/schagen/includes/shame.scss
deleted file mode 100644
index 32a39ac83..000000000
--- a/react/assets/forus-webshop/scss/schagen/includes/shame.scss
+++ /dev/null
@@ -1,168 +0,0 @@
-.block {
-    .block-subnav {
-        background-color: #77b431;
-    }
-
-
-    &.block-profile {
-        .profile-aside {
-            .profile-menu {
-                .profile-menu-item {
-                    box-shadow: none;
-                    border: solid 1px #e4e4e4;
-                }
-            }
-        }
-    }
-
-    &.block-cms-funds {
-        display: auto;
-
-        .fund-item {
-            display: inline-block;
-            width: 50%;
-            border: none;
-
-            .fund-media {
-                img {
-                    width: auto;
-                    display: block;
-                }
-            }
-
-            .fund-information {
-                width: auto;
-                padding-left: 0;
-                text-align: left;
-                display: block;
-
-                .fund-title {
-                    color: var(--tc);
-                }
-            }
-        }
-    }
-
-    &.block-pane {
-        box-shadow: none;
-        border: 1px solid #e4e4e4;
-    }
-
-    &.block-markdown {
-        a:not(.button) {
-            text-decoration: underline;
-            color: #0071B8;
-
-            &:hover {
-                text-decoration: none;
-            }
-        }
-    }
-
-    &.block-voucher {
-        .base-card {
-            box-shadow: none;
-            border: 1px solid #e4e4e4;
-
-            &.base-card-voucher {
-                box-shadow: none;
-                border: 1px solid #e4e4e4;
-            }
-        }
-    }
-
-    &.block-map_card {
-        box-shadow: none;
-        border: 1px solid #e4e4e4;
-    }
-
-    @media screen and (min-width: 1000px) {
-        &.block-products {
-            max-width: 1280px;
-            margin: 0 auto 30px;
-        }
-    }
-}
-
-.section {
-    &.section-faq {
-        .faq {
-            width: auto;
-            margin: 0;
-        }
-    }
-
-    &.section-footer {
-        margin-top: 0;
-        padding-top: 30px;
-        color: #fff;
-    }
-
-    @media screen and (min-width: 1000px) {
-        &.section-products {
-            width: 100vw;
-            background: #f4f5f7;
-            left: calc(-50vw + 50%);
-            padding: 30px 0 30px 0;
-            margin: 0;
-
-            .section-title {
-                margin-top: 0;
-            }
-        }
-    }
-}
-
-.block {
-    &.block-footer {
-        .block {
-            &.block-markdown {
-                a:not(.button) {
-                    color: #fff;
-                }
-            }
-        }
-
-        .footer-label {
-            color: #fff;
-        }
-
-        .footer-schedule {
-            .schedule-label {
-                color: #fff;
-            }
-
-            .schedule-value {
-                color: #fff;
-            }
-        }
-    }
-
-    &.block-copyrights {
-        border: none;
-        background-color: var(--footer_background_color);
-        color: #fff;
-        font-size: 1rem;
-        padding: 25px 0;
-
-        .copyrights {
-            color: #fff;
-        }
-
-        .links {
-            a {
-                color: #fff;
-            }
-        }
-    }
-}
-
-.block {
-    &.block-copyrights {
-        .links {
-            a {
-                color: #ffffff;
-            }
-        }
-    }
-}
diff --git a/react/assets/forus-webshop/scss/schagen/sections/blocks/block-lang-control.scss b/react/assets/forus-webshop/scss/schagen/sections/blocks/block-lang-control.scss
deleted file mode 100644
index fa4d064f4..000000000
--- a/react/assets/forus-webshop/scss/schagen/sections/blocks/block-lang-control.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.block.block-lang-control {
-    .lang-control-input {
-        .lang-control-search {
-            color: #ffffff;
-        }
-    }
-}
diff --git a/react/assets/forus-webshop/scss/style-webshop-berg_en_dal-vars.scss b/react/assets/forus-webshop/scss/style-webshop-berg_en_dal-vars.scss
index 70d5e3047..515b6b8d7 100644
--- a/react/assets/forus-webshop/scss/style-webshop-berg_en_dal-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-berg_en_dal-vars.scss
@@ -1,9 +1,10 @@
+@import "style-webshop-general-vars";
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
+
 // do not use these scss variables outside this file
 $primaryColor: #15694B;
 $primaryColorLight: #1B8761;
 
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
-
 :root {
     // navbar
     --navbar-menu-background: #F5F5F5;
@@ -38,7 +39,7 @@ $primaryColorLight: #1B8761;
     --showcase-aside-shadow: none;
 
     // footer color
-    --footer_background_color: #15694B;
+    --footer_background: transparent;
     --footer_color: #FFFFFF;
     --footer_color_link: #FFFFFF;
     --footer_color_link_hover: #FFFFFF;
@@ -65,7 +66,7 @@ $primaryColorLight: #1B8761;
     --search-bar-input-radius: 0;
 
     // Buttons
-    --btn-border-radius: 0;
+    --button-border-radius: 0;
 
     // Label sets
     --label-set-active-background: #7A0138;
@@ -90,4 +91,28 @@ $primaryColorLight: #1B8761;
     --voucher-card-action-border-radius: 0;
     --voucher-card-action-hover-background: #15694B;
     --voucher-card-action-hover-border-color: #15694B;
+
+    // Sections
+    --section-padding: 0 0 30px;
+    --section-background: transparent;
+
+    --section-title-font: 700 40px/60px var(--heading-font-family);
+    --section-title-align: center;
+
+    --section-cms-padding: var(--section-padding);
+    --section-cms-background: var(--section-background);
+    --section-map-padding: var(--section-padding);
+    --section-map-background: var(--section-background);
+    --section-faq-padding: var(--section-padding);
+    --section-faq-background: var(--section-background);
+    --section-footer-padding: 30px 0;
+    --section-footer-background: #15694B;
+    --section-profile-padding: var(--section-padding);
+    --section-profile-background: var(--section-background);
+    --section-products-padding: var(--section-padding);
+    --section-products-background: var(--section-background);
+    --section-breadcrumbs-padding: 0;
+    --section-breadcrumbs-background: var(--section-background);
+    --section-voucher-details-padding: var(--section-padding);
+    --section-voucher-details-background: var(--section-background);
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-berg_en_dal.scss b/react/assets/forus-webshop/scss/style-webshop-berg_en_dal.scss
deleted file mode 100644
index 6d94ef82d..000000000
--- a/react/assets/forus-webshop/scss/style-webshop-berg_en_dal.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.block.block-pane,
-.block.block-empty,
-.block.block-map_card,
-.block.block-action-card,
-.block.block-transactions,
-.block.block-product .product-card,
-.block.block-voucher .base-card.base-card-voucher,
-.block.block-voucher .base-card.base-card-sponsor,
-.block.block-profile .profile-aside .profile-aside-block {
-    border: 1px solid var(--border-color);
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/style-webshop-berkelland-vars.scss b/react/assets/forus-webshop/scss/style-webshop-berkelland-vars.scss
index 1cfd513f9..7ab9cd625 100644
--- a/react/assets/forus-webshop/scss/style-webshop-berkelland-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-berkelland-vars.scss
@@ -1,10 +1,15 @@
+@import "style-webshop-general-vars";
+@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,700');
+
 /*==========  Style Sheet - Vars  ==========*/
 $primaryColor: #041c37;
 $primaryColorLight: #004d93;
 
-@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,700");
-
 :root {
+    --border-color: #ebedf0;
+    --border-radius: 0px;
+    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+
     // navbar
     --navbar-menu-background: #f5f5f5;
     --navbar-menu-item-color-hover: #004d93;
@@ -25,10 +30,10 @@ $primaryColorLight: #004d93;
     --btn-start-border: transparent;
 
     // header attributes
-    --bg-values: url("../img/splash-top-b.jpg") no-repeat 100% 0;
+    --bg-values: url('../img/splash-top-b.jpg') no-repeat 100% 0;
 
     // base font
-    --base-font: "Source Sans Pro", Arial, Verdana, "Sans Serif";
+    --base-font: 'Source Sans Pro', Arial, Verdana, 'Sans Serif';
 
     // text color
     --tc: rgb(39, 37, 37);
@@ -39,11 +44,17 @@ $primaryColorLight: #004d93;
     --bc: #4990b5;
 
     // background color
-    --body-background: none;
+    --body-background: #ececec;
 
     // footer color
     --footer_color: #4e4d40;
 
+    --footer-copyright-color: var(--footer_color_link);
+    --footer-copyright-font: 400 14px/30px var(--base-font);
+    --footer-copyright-background: #fff;
+    --footer-copyright-border-color: var(--border-color);
+    --footer-copyright-padding: 40px;
+
     // Displayed or not
     --footer_display: block;
 
@@ -53,11 +64,6 @@ $primaryColorLight: #004d93;
     // placeholder text color
     --form-control-placeholder-color: #515152;
 
-    --border-color: #ebedf0;
-
-    --border-radius: 0px;
-    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-
     --color-primary: #{$primaryColor};
     --color-primary-light: #{$primaryColorLight};
 
@@ -69,12 +75,51 @@ $primaryColorLight: #004d93;
     --color-search-icon-light: #{lighten($primaryColor, 25%)};
 
     // Label sets
-    --label-set-hover-background: #{rgba($primaryColor, .8)};
+    --label-set-hover-background: #{rgba($primaryColor, 0.8)};
+
+    // Buttons
+    --button-primary-color: var(--tc-var);
+    --button-primary-border: 1px solid var(--color-default);
+    --button-primary-decoration: none;
+    --button-primary-background: var(--color-default);
+    --button-primary-hover-color: var(--color-default);
+    --button-primary-hover-border: 1px solid var(--color-default);
+    --button-primary-hover-decoration: underline;
+    --button-primary-hover-background: #ececec;
 
     //- Showcase
     --showcase-aside-border: 1px solid #d2d2c7;
     --showcase-fullscreen-bottom-offset: 135px;
 
+    // Profile
+    --profile-menu-item-color: #fff;
+    --profile-menu-item-shadow: none;
+    --profile-menu-item-background: var(--color-default);
+    --profile-menu-item-border-color: var(--color-default);
+    --profile-menu-item-border-radius: var(--border-radius);
+    --profile-menu-item-hover-color: var(--color-default);
+    --profile-menu-item-hover-shadow: none;
+    --profile-menu-item-hover-background: #fff;
+    --profile-menu-item-hover-border-color: var(--color-default);
+    --profile-menu-item-hover-border-radius: var(--border-radius);
+
     // Login button
     --login-button-background: #fff;
+
+    // Vouchers
+    --vouchers-label-color: #4c91b3;
+
+    // Products
+    --products-title-color: var(--color-default);
+    --products-title-hover-color: var(--color-primary);
+
+    // Faq
+    --faq-width: 820px;
+    --faq-align: center;
+    --faq-header-color: #00122a;
+    --faq-header-color-hover: var(--color-default);
+
+    // Section order
+    --order-page-voucher-map: 1;
+    --order-page-voucher-products: 2;
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-berkelland.scss b/react/assets/forus-webshop/scss/style-webshop-berkelland.scss
deleted file mode 100644
index 0bd4c57d5..000000000
--- a/react/assets/forus-webshop/scss/style-webshop-berkelland.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-// SHAME
-@import "berkelland/includes/shame";
-
-// COMPONENTS
-@import "berkelland/components/buttons";
-
-// SECTIONS
-@import "berkelland/sections/faq";
-@import "berkelland/sections/steps";
-@import "berkelland/sections/vouchers";
-
-// BLOCKS
-@import "berkelland/sections/blocks/map";
-@import "berkelland/sections/blocks/products";
-@import "berkelland/sections/blocks/profile";
-@import "berkelland/sections/blocks/shops_map";
-@import "berkelland/sections/blocks/transactions";
-@import "berkelland/sections/blocks/voucher";
-@import "berkelland/sections/blocks/vouchers";
-
-.page {
-    display: flex;
-    flex-direction: column;
-
-    &.page-voucher {
-        & > .section.section-products {
-            order: 2;
-        }
-
-        & > .block.block-map_card {
-            order: 1;
-        }
-    }
-}
diff --git a/react/assets/forus-webshop/scss/style-webshop-ede-vars.scss b/react/assets/forus-webshop/scss/style-webshop-ede-vars.scss
index 49a2fc585..2bafb2373 100644
--- a/react/assets/forus-webshop/scss/style-webshop-ede-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-ede-vars.scss
@@ -1,10 +1,14 @@
+@import "style-webshop-general-vars";
+@import url("https://fonts.googleapis.com/css?family=Open+Sans");
+
 /*==========  Style Sheet - Vars  ==========*/
 $primaryColor: #3558a2;
 $primaryColorLight: #3558a2;
 
-@import url("https://fonts.googleapis.com/css?family=Open+Sans");
-
 :root {
+    --zoom: 80%;
+    --zoom-mobile: 100%;
+
     // navbar
     --navbar-menu-gap: 12px;
     --navbar-menu-order: 2;
@@ -45,13 +49,19 @@ $primaryColorLight: #3558a2;
     --bc: #3558a2;
 
     // background color
-    --body-background: none;
+    --body-background: #f3f3f3;
 
     // footer color
-    --footer_background_color: #404040;
+    --footer_background: transparent;
     --footer_color: #ffffff;
     --footer_color_link: #ffffff;
 
+    --footer-copyright-color: var(--footer_color_link);
+    --footer-copyright-font: 400 14px/30px var(--base-font);
+    --footer-copyright-background: #404040;
+    --footer-copyright-border-color: var(--border-color);
+    --footer-copyright-padding: 20px;
+
     // displayed or not
     --footer_display: block;
 
@@ -81,4 +91,32 @@ $primaryColorLight: #3558a2;
 
     // Login button
     --login-button-background: #fff;
+
+    // Faq
+    --faq-width: 100%;
+    --faq-align: center;
+
+    // Sections
+    --section-padding: 0 0 30px;
+    --section-background: transparent;
+
+    --section-title-font: 700 40px/60px var(--heading-font-family);
+    --section-title-align: center;
+
+    --section-cms-padding: var(--section-padding);
+    --section-cms-background: var(--section-background);
+    --section-map-padding: var(--section-padding);
+    --section-map-background: var(--section-background);
+    --section-faq-padding: var(--section-padding);
+    --section-faq-background: var(--section-background);
+    --section-footer-padding: 30px 0;
+    --section-footer-background: #404040;
+    --section-profile-padding: var(--section-padding);
+    --section-profile-background: var(--section-background);
+    --section-products-padding: var(--section-padding);
+    --section-products-background: var(--section-background);
+    --section-breadcrumbs-padding: 0;
+    --section-breadcrumbs-background: var(--section-background);
+    --section-voucher-details-padding: var(--section-padding);
+    --section-voucher-details-background: var(--section-background);
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-ede.scss b/react/assets/forus-webshop/scss/style-webshop-ede.scss
deleted file mode 100644
index 8f57c3b2c..000000000
--- a/react/assets/forus-webshop/scss/style-webshop-ede.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-// SHAME
-@import "ede/includes/shame";
-
-.block {
-    @import "ede/sections/blocks/block-provider";
-}
diff --git a/react/assets/forus-webshop/scss/style-webshop-eemsdelta-vars.scss b/react/assets/forus-webshop/scss/style-webshop-eemsdelta-vars.scss
index 6fb9bc921..b32ac332d 100644
--- a/react/assets/forus-webshop/scss/style-webshop-eemsdelta-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-eemsdelta-vars.scss
@@ -1,9 +1,10 @@
+@import "style-webshop-general-vars";
+@import url('https://fonts.googleapis.com/css?family=Verdana');
+
 /*==========  Style Sheet - Vars  ==========*/
 $primaryColor: #0d4379;
 $primaryColorLight: #0d4379;
 
-@import url('https://fonts.googleapis.com/css?family=Verdana');
-
 :root {
     // navbar
     --navbar-menu-background: #f5f5f5;
@@ -19,6 +20,8 @@ $primaryColorLight: #0d4379;
 
     // Search bar
     --search-bar-label-top: -18px;
+    --search-bar-label-left: 0px;
+    --search-bar-label-padding: 0px;
     --search-bar-label-background: transparent;
 
     // navbar (auth)
@@ -50,10 +53,16 @@ $primaryColorLight: #0d4379;
     --body-background: none;
 
     // footer color
-    --footer_background_color: #0d4379;
+    --footer_background: transparent;
     --footer_color: #ffffff;
     --footer_color_link: #ffffff;
 
+    --footer-copyright-color: var(--footer_color_link);
+    --footer-copyright-font: 400 14px/30px var(--base-font);
+    --footer-copyright-background: #0d4379;
+    --footer-copyright-border-color: var(--border-color);
+    --footer-copyright-padding: 40px;
+
     // displayed or not
     --footer_display: block;
 
@@ -86,4 +95,28 @@ $primaryColorLight: #0d4379;
 
     // Login button
     --login-button-background: #fff;
+
+    // Sections
+    --section-padding: 0 0 30px;
+    --section-background: transparent;
+
+    --section-title-font: 700 40px/60px var(--heading-font-family);
+    --section-title-align: center;
+
+    --section-cms-padding: var(--section-padding);
+    --section-cms-background: var(--section-background);
+    --section-map-padding: var(--section-padding);
+    --section-map-background: var(--section-background);
+    --section-faq-padding: var(--section-padding);
+    --section-faq-background: var(--section-background);
+    --section-footer-padding: 30px 0;
+    --section-footer-background: #0d4379;
+    --section-profile-padding: var(--section-padding);
+    --section-profile-background: var(--section-background);
+    --section-products-padding: var(--section-padding);
+    --section-products-background: var(--section-background);
+    --section-breadcrumbs-padding: 0;
+    --section-breadcrumbs-background: var(--section-background);
+    --section-voucher-details-padding: var(--section-padding);
+    --section-voucher-details-background: var(--section-background);
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-eemsdelta.scss b/react/assets/forus-webshop/scss/style-webshop-eemsdelta.scss
deleted file mode 100644
index 8f131cf3d..000000000
--- a/react/assets/forus-webshop/scss/style-webshop-eemsdelta.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// SHAME
-@import "eemsdelta/includes/shame";
-
-// BLOCKS
-@import 'groningen/sections/blocks/block-navbar-search';
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/style-webshop-geertruidenberg-vars.scss b/react/assets/forus-webshop/scss/style-webshop-geertruidenberg-vars.scss
index d1cb58ba4..be292f865 100644
--- a/react/assets/forus-webshop/scss/style-webshop-geertruidenberg-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-geertruidenberg-vars.scss
@@ -1,9 +1,10 @@
+@import "style-webshop-general-vars";
+@import url("https://fonts.googleapis.com/css?family=Roboto:400,900italic,900,700,700italic,500italic,500,400italic,300,100italic,100,300italic&subset=latin,cyrillic,latin-ext");
+
 /*==========  Style Sheet - Vars  ==========*/
 $primaryColor: #666666;
 $primaryColorLight: #ee8016;
 
-@import url("https://fonts.googleapis.com/css?family=Roboto:400,900italic,900,700,700italic,500italic,500,400italic,300,100italic,100,300italic&subset=latin,cyrillic,latin-ext");
-
 :root {
     // navbar
     --navbar-menu-background: #ececec;
@@ -41,8 +42,22 @@ $primaryColorLight: #ee8016;
     --body-background: none;
 
     // footer color
-    --footer_background_color: #fff;
     --footer_color: #282b39;
+    --footer_color_link: #004d93;
+    --footer_color_link_hover: #004d93;
+    --footer_padding: 40px 50px;
+    --footer_background: #fff;
+
+    --footer_social_color: var(--footer_color);
+    --footer_social_background: transparent;
+    --footer_social_border_color: var(--footer_color);
+    --footer_social_border_radius: var(--border-radius);
+
+    --footer-copyright-color: var(--footer_color);
+    --footer-copyright-font: 400 14px/30px var(--base-font);
+    --footer-copyright-background: var(--footer_background);
+    --footer-copyright-border-color: var(--border-color);
+    --footer-copyright-padding: 40px;
 
     // displayed or not
     --footer_display: block;
@@ -76,4 +91,22 @@ $primaryColorLight: #ee8016;
 
     // Login button
     --login-button-background: #fff;
+
+
+    --section-cms-padding: var(--section-padding);
+    --section-cms-background: var(--section-background);
+    --section-map-padding: var(--section-padding);
+    --section-map-background: var(--section-background);
+    --section-faq-padding: var(--section-padding);
+    --section-faq-background: var(--section-background);
+    --section-footer-padding: 50px 0;
+    --section-footer-background: #ee8016 url(./assets/img/header-frame-after.svg);
+    --section-profile-padding: var(--section-padding);
+    --section-profile-background: var(--section-background);
+    --section-products-padding: var(--section-padding);
+    --section-products-background: var(--section-background);
+    --section-breadcrumbs-padding: 0;
+    --section-breadcrumbs-background: var(--section-background);
+    --section-voucher-details-padding: var(--section-padding);
+    --section-voucher-details-background: var(--section-background);
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-geertruidenberg.scss b/react/assets/forus-webshop/scss/style-webshop-geertruidenberg.scss
deleted file mode 100644
index 1ffd3eff1..000000000
--- a/react/assets/forus-webshop/scss/style-webshop-geertruidenberg.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-// SHAME
-@import "geertruidenberg/includes/shame";
diff --git a/react/assets/forus-webshop/scss/style-webshop-general-vars.scss b/react/assets/forus-webshop/scss/style-webshop-general-vars.scss
index 520c8ecfe..d67a5783c 100644
--- a/react/assets/forus-webshop/scss/style-webshop-general-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-general-vars.scss
@@ -1,10 +1,13 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
+
 // do not use these scss variables outside this file
 $primaryColor: #305dfb;
 $primaryColorLight: #305dfb;
 
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
-
 :root {
+    --zoom: 100%;
+    --zoom-mobile: 100%;
+
     --border-color: #dddddd;
     --border-radius: 8px;
     --box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);
@@ -82,9 +85,6 @@ $primaryColorLight: #305dfb;
     // base font
     --base-font: 'Open Sans', arial, sans-serif;
 
-    // heading font
-    --hf: var(--base-font);
-
     // text color
     --tc: #282b39;
     --htc: var(--tc);
@@ -92,6 +92,12 @@ $primaryColorLight: #305dfb;
     --tc-link: inherit;
     --tc-muted: #595959;
 
+    // heading font
+    --heading-font-family: var(--base-font);
+    --heading-font: 700 40px/60px var(--heading-font-family);
+    --heading-color: var(--tc);
+    --heading-pane-font: 700 22px/30px var(--heading-font-family);
+
     // base color
     --bc: #d13b3b;
 
@@ -99,7 +105,7 @@ $primaryColorLight: #305dfb;
     --body-background: #fff;
 
     // footer color
-    --footer_background_color: #fff;
+    --footer_background: transparent;
     --footer_color: #353535;
     --footer_color_link: #004d93;
     --footer_color_link_hover: #004d93;
@@ -110,8 +116,10 @@ $primaryColorLight: #305dfb;
     --footer_social_border_radius: var(--border-radius);
 
     --footer-copyright-color: var(--footer_color_link);
+    --footer-copyright-font: 400 14px/30px var(--base-font);
     --footer-copyright-background: transparent;
     --footer-copyright-border-color: var(--border-color);
+    --footer-copyright-padding: 40px;
 
     // not displayed
     --footer_display: none;
@@ -119,6 +127,9 @@ $primaryColorLight: #305dfb;
     // product image
     --product-image-padding: 10px 0 0 10px;
 
+    // Markdown
+    --markdown-font: 400 16px/24px var(--base-font);
+
     // Forms
     --form-control-color: #222222;
     --form-control-background: #ffffff;
@@ -127,6 +138,7 @@ $primaryColorLight: #305dfb;
     --form-control-placeholder-font: 400 13px/20px var(--base-font);
     --form-control-placeholder-color: #535561;
     --form-label-color: #595959;
+    --form-label-font: 700 11px/16px var(--base-font);
 
     // Search bar
     --color-search-icon-medium: #{$primaryColor};
@@ -142,6 +154,8 @@ $primaryColorLight: #305dfb;
     --search-bar-input-icon-color: #666666;
 
     --search-bar-label-top: -7px;
+    --search-bar-label-left: 16px;
+    --search-bar-label-padding: 4px;
     --search-bar-label-background: #ffffff;
 
     // Dropdowns
@@ -151,13 +165,6 @@ $primaryColorLight: #305dfb;
     --dropdown-item-hover-color: #000000;
     --dropdown-item-hover-background: #e5e5e5;
 
-    // Buttons
-    --btn-color: #282b39;
-    --btn-border-radius: calc(var(--border-radius) * 0.75);
-
-    --btn-disabled-color: #616161;
-    --btn-disabled-background: #e5e5e5;
-
     // Paginator
     --paginator-border-radius: var(--border-radius);
     --paginator-button-color: #282b39;
@@ -175,6 +182,15 @@ $primaryColorLight: #305dfb;
     --label-default-color: #fff;
     --label-default-background: #595959;
 
+    --label-primary-color: #fff;
+    --label-primary-background: var(--color-primary);
+
+    --label-danger-color: #030304;
+    --label-danger-background: #d38c87;
+
+    --label-success-color: #030304;
+    --label-success-background: #9bbfa1;
+
     // Label sets
     --label-set-border-radius: var(--border-radius);
     --label-set-border-color: #9e9e9e;
@@ -188,6 +204,44 @@ $primaryColorLight: #305dfb;
     --label-set-focus-background: #f4f5f7;
     --label-set-focus-border-color: #9e9e9e;
 
+    // Buttons
+    --button-font: 700 16px/24px var(--base-font);
+    --button-color: #282b39;
+    --button-shadow: none;
+    --button-decoration: none;
+    --button-border-radius: calc(var(--border-radius) * 0.75);
+    --button-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+    --button-hover-decoration: none;
+    --button-disabled-color: #616161;
+    --button-disabled-background: #e5e5e5;
+
+    --button-primary-color: #fff;
+    --button-primary-border: 1px solid var(--color-primary);
+    --button-primary-decoration: none;
+    --button-primary-background: var(--color-primary);
+    --button-primary-hover-color: #fff;
+    --button-primary-hover-border: 1px solid var(--color-primary-light);
+    --button-primary-hover-decoration: none;
+    --button-primary-hover-background: var(--color-primary-light);
+
+    --button-primary-outline-color: var(--color-primary);
+    --button-primary-outline-border: 1px solid var(--color-primary);
+    --button-primary-outline-decoration: none;
+    --button-primary-outline-background: transparent;
+    --button-primary-outline-hover-color: #fff;
+    --button-primary-outline-hover-border: 1px solid var(--color-primary);
+    --button-primary-outline-hover-decoration: none;
+    --button-primary-outline-hover-background: var(--color-primary);
+
+    --button-read_more-color: var(--button-primary-color);
+    --button-read_more-border: var(--button-primary-border);
+    --button-read_more-decoration: var(--button-primary-decoration);
+    --button-read_more-background: var(--button-primary-background);
+    --button-read_more-hover-color: var(--button-primary-hover-color);
+    --button-read_more-hover-border: var(--button-primary-hover-border);
+    --button-read_more-hover-decoration: var(--button-primary-hover-decoration);
+    --button-read_more-hover-background: var(--button-primary-hover-background);
+
     // Sign up
     --sign_up_accent_color: #282b39;
     --sign_up_accent_color_light: #bdcbff;
@@ -221,7 +275,7 @@ $primaryColorLight: #305dfb;
 
     --showcase-fullscreen-bottom-offset: 115px;
 
-    --showcase-title-font: 600 18px/30px var(--hf);
+    --showcase-title-font: 600 18px/30px var(--heading-font-family);
     --showcase-title-color: var(--tc);
     --showcase-title-count-color: #fff;
     --showcase-title-count-background: var(--color-primary);
@@ -238,7 +292,9 @@ $primaryColorLight: #305dfb;
     --loader-color: var(--color-primary);
 
     // Profile
+    --profile-menu-item-gap: 16px;
     --profile-menu-item-color: var(--color-primary);
+    --profile-menu-item-color-icon: var(--profile-menu-item-color);
     --profile-menu-item-shadow: var(--box-shadow);
     --profile-menu-item-background: #ffffff;
     --profile-menu-item-border-color: transparent;
@@ -249,6 +305,11 @@ $primaryColorLight: #305dfb;
     --profile-menu-item-hover-border-color: var(--color-primary);
     --profile-menu-item-hover-border-radius: var(--border-radius);
 
+    // Vouchers
+    --vouchers-label-color: #646f79;
+    --vouchers-value-color: var(--tc);
+    --vouchers-organization-color: var(--tc);
+
     // Voucher card
     --voucher-card-action-color: var(--color-primary);
     --voucher-card-action-background: transparent;
@@ -257,4 +318,67 @@ $primaryColorLight: #305dfb;
     --voucher-card-action-hover-color: #fff;
     --voucher-card-action-hover-background: var(--color-primary);
     --voucher-card-action-hover-border-color: var(--color-primary);
+
+    // Products
+    --products-title-color: var(--tc);
+    --products-title-hover-color: var(--tc);
+    --products-text-color: var(--tc);
+
+    // Product
+    --product-title-font: 700 22px/28px var(--heading-font-family);
+    --product-title-color: var(--tc);
+
+    // Faq
+    --faq-width: 820px;
+    --faq-align: center;
+    --faq-header-color: #00122a;
+    --faq-header-color-hover: var(--color-primary);
+
+    // Map
+    --map-title-color: #0B0E12;
+    --map-title-font: 700 40px var(--heading-font-family);
+
+    // Sections
+    --section-padding: 0 0 30px;
+    --section-background: transparent;
+
+    --section-title-font: 700 40px/60px var(--heading-font-family);
+    --section-title-align: center;
+
+    --section-cms-padding: var(--section-padding);
+    --section-cms-background: var(--section-background);
+    --section-map-padding: var(--section-padding);
+    --section-map-background: var(--section-background);
+    --section-faq-padding: var(--section-padding);
+    --section-faq-background: var(--section-background);
+    --section-footer-padding: 30px 0;
+    --section-footer-background: #fff;
+    --section-profile-padding: var(--section-padding);
+    --section-profile-background: var(--section-background);
+    --section-products-padding: var(--section-padding);
+    --section-products-background: var(--section-background);
+    --section-breadcrumbs-padding: 0;
+    --section-breadcrumbs-background: var(--section-background);
+    --section-voucher-details-padding: var(--section-padding);
+    --section-voucher-details-background: var(--section-background);
+
+    // Search bar
+    --search-result-sidebar-item-active-color: #a80a2d;
+    --search-result-sidebar-item-active-background: #fff;
+
+    // CMS funds
+    --cms-funds-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-title-color: var(--htc);
+    --cms-funds-label-font-size: 11px;
+    --cms-funds-label-background: var(--color-primary);
+
+    --cms-funds-compact-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-compact-title-color: var(--htc);
+
+    --cms-funds-link-color: var(--color-primary);
+    --cms-funds-link-font: 600 18px/20px var(--base-font);
+
+    // Section order
+    --order-page-voucher-map: 0;
+    --order-page-voucher-products: 0;
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-general.scss b/react/assets/forus-webshop/scss/style-webshop-general.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/react/assets/forus-webshop/scss/style-webshop-goereeoverflakkee-vars.scss b/react/assets/forus-webshop/scss/style-webshop-goereeoverflakkee-vars.scss
index 524fbf9a3..76ddf6414 100644
--- a/react/assets/forus-webshop/scss/style-webshop-goereeoverflakkee-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-goereeoverflakkee-vars.scss
@@ -1,9 +1,10 @@
+@import "style-webshop-general-vars";
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap&subset=latin,cyrillic,latin-ext');
+
 // do not use these scss variables outside this file
 $primaryColor: #627c18;
 $primaryColorLight: #627c18;
 
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;0,900;1,400;1,500;1,700;1,900&display=swap&subset=latin,cyrillic,latin-ext');
-
 :root {
     // navbar
     --navbar-menu-background: #f3f8fa;
@@ -27,7 +28,10 @@ $primaryColorLight: #627c18;
     --base-font: Roboto, Verdana, arial;
 
     // heading font
-    --hf: var(--base-font);
+    --heading-font-family: var(--base-font);
+    --heading-font: 500 34px/50px var(--heading-font-family);
+    --heading-color: #08749b;
+    --heading-pane-font: 500 24px/36px var(--heading-font-family);
 
     // text color
     --tc: #1d1e20;
@@ -42,20 +46,42 @@ $primaryColorLight: #627c18;
     --body-background: #fff;
 
     // footer color
-    --footer_background_color: #08749b;
+    --footer_background: transparent;
     --footer_color: #fff;
     --footer_color_link: #fff;
     --footer_color_link_hover: #fff;
 
+    --footer-copyright-color: var(--footer_color_link);
+    --footer-copyright-font: 500 17px/25px var(--base-font);
+    --footer-copyright-background: #04465e;
+    --footer-copyright-border-color: transparent;
+    --footer-copyright-padding: 40px;
+
     // not displayed
     --footer_display: none;
 
+    // Vouchers
+    --vouchers-label-color: #646f79;
+    --vouchers-value-color: var(--tc);
+    --vouchers-organization-color: var(--tc);
+
     // product image
     --product-image-padding: 10px 0 0 10px;
 
-    // placeholder text color
+    // Markdown
+    --markdown-font: 400 17px/25px var(--base-font);
+
+    // Forms
+    --form-control-color: #222222;
+    --form-control-background: #ffffff;
+    --form-control-border-color: #646464;
+    --form-control-border-color-focus: #282b39;
+    --form-control-placeholder-font: 400 13px/20px var(--base-font);
     --form-control-placeholder-color: #9b9b9b;
+    --form-label-color: #2d3748;
+    --form-label-font: 500 13px/20px var(--base-font);
 
+    // placeholder text color
     --border-color: #e5e5e5;
     --border-radius: 7px;
     --box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);
@@ -70,6 +96,14 @@ $primaryColorLight: #627c18;
     --color-search-icon-dark: #{darken($primaryColor, 10%)};
     --color-search-icon-light: #{lighten($primaryColor, 25%)};
 
+    // Buttons
+    --button-font: 700 18px/24px var(--base-font);
+    --button-color: #282b39;
+    --button-border-radius: calc(var(--border-radius) * 0.75);
+
+    --button-disabled-color: #616161;
+    --button-disabled-background: #e5e5e5;
+
     // Label sets
     --label-set-hover-background: #{rgba($primaryColor, 0.8)};
 
@@ -96,14 +130,71 @@ $primaryColorLight: #627c18;
     --breadcrumb-color-active: #2d3748;
 
     // Profile
+    --profile-menu-item-gap: 0;
     --profile-menu-item-color: var(--tc);
+    --profile-menu-item-color-icon: #dbdcdb;
     --profile-menu-item-shadow: var(--box-shadow);
     --profile-menu-item-background: #ffffff;
-    --profile-menu-item-border-color: transparent;
+    --profile-menu-item-border-color: var(--border-color);
     --profile-menu-item-border-radius: 0px;
     --profile-menu-item-hover-color: #fff;
-    --profile-menu-item-hover-shadow: 0 5px 20px rgba(0, 0, 0, .20);
+    --profile-menu-item-hover-shadow: var(--box-shadow);
     --profile-menu-item-hover-background: #08749b;
     --profile-menu-item-hover-border-color: transparent;
     --profile-menu-item-hover-border-radius: 0px;
-}
+
+    // Products
+    --products-title-color: #2e82a4;
+    --products-text-color: #2d3748;
+
+    // Product
+    --product-title-font: 500 24px/36px var(--base-font);
+    --product-title-color: #0b0e12;
+
+    // Faq
+    --faq-width: 820px;
+    --faq-align: flex-start;
+    --faq-header-color: #00122a;
+    --faq-header-color-hover: #00122a;
+
+    // Map
+    --map-title-color: #0b0e12;
+    --map-title-font: 400 52px/72px var(--base-font);
+
+
+    // CMS funds
+    --cms-funds-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-title-color: var(--htc);
+    --cms-funds-label-font-size: 11px;
+    --cms-funds-label-background: var(--color-primary);
+
+    --cms-funds-compact-title-font: 500 32px/48px var(--base-font);
+    --cms-funds-compact-title-color: var(--htc);
+
+    --cms-funds-link-color: #08749b;
+    --cms-funds-link-font: 600 18px/20px var(--base-font);
+
+    // Sections
+    --section-padding: 0 0 30px;
+    --section-background: transparent;
+
+    --section-title-font: 700 40px/60px var(--heading-font-family);
+    --section-title-align: center;
+
+    --section-cms-padding: var(--section-padding);
+    --section-cms-background: var(--section-background);
+    --section-map-padding: var(--section-padding);
+    --section-map-background: var(--section-background);
+    --section-faq-padding: var(--section-padding);
+    --section-faq-background: var(--section-background);
+    --section-footer-padding: 30px 0;
+    --section-footer-background: #08749b;
+    --section-profile-padding: var(--section-padding);
+    --section-profile-background: var(--section-background);
+    --section-products-padding: var(--section-padding);
+    --section-products-background: var(--section-background);
+    --section-breadcrumbs-padding: 0;
+    --section-breadcrumbs-background: var(--section-background);
+    --section-voucher-details-padding: var(--section-padding);
+    --section-voucher-details-background: var(--section-background);
+}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/style-webshop-goereeoverflakkee.scss b/react/assets/forus-webshop/scss/style-webshop-goereeoverflakkee.scss
deleted file mode 100644
index 22ae0dde7..000000000
--- a/react/assets/forus-webshop/scss/style-webshop-goereeoverflakkee.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-// INCLUDES
-@import "goereeoverflakkee/includes/buttons";
-@import "goereeoverflakkee/includes/form";
-
-// SECTIONS
-@import "goereeoverflakkee/sections/flow";
-@import "goereeoverflakkee/sections/faq";
-
-@import "goereeoverflakkee/sections/blocks/block-map";
-@import "goereeoverflakkee/sections/blocks/block-markdown";
-@import "goereeoverflakkee/sections/blocks/block-products";
-@import "goereeoverflakkee/sections/blocks/block-products-list";
-@import "goereeoverflakkee/sections/blocks/block-cms-funds";
-@import "goereeoverflakkee/sections/blocks/block-copyrights";
-@import "goereeoverflakkee/sections/blocks/block-footer";
-@import "goereeoverflakkee/sections/blocks/block-navbar-search";
-@import "goereeoverflakkee/sections/blocks/block-profile";
-@import "goereeoverflakkee/sections/blocks/block-product";
-@import "goereeoverflakkee/sections/blocks/block-pane";
-@import "goereeoverflakkee/sections/blocks/block-organizations";
-@import "goereeoverflakkee/sections/blocks/block-mobile-menu";
diff --git a/react/assets/forus-webshop/scss/style-webshop-groningen-vars.scss b/react/assets/forus-webshop/scss/style-webshop-groningen-vars.scss
index 23fdbf19d..7ca483555 100644
--- a/react/assets/forus-webshop/scss/style-webshop-groningen-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-groningen-vars.scss
@@ -1,3 +1,5 @@
+@import "style-webshop-general-vars";
+
 /*==========  Style Sheet - Vars  ==========*/
 $primaryColor: #000;
 $primaryColorLight: #e60204;
@@ -25,8 +27,29 @@ $primaryColorLight: #e60204;
 
     // Search bar
     --search-bar-label-top: -18px;
+    --search-bar-label-left: 0px;
+    --search-bar-label-padding: 0px;
     --search-bar-label-background: transparent;
 
+    // Buttons
+    --button-primary-color: var(--tc-var);
+    --button-primary-border: 1px solid var(--color-default);
+    --button-primary-decoration: none;
+    --button-primary-background: var(--color-default);
+    --button-primary-hover-color: var(--color-default);
+    --button-primary-hover-border: 1px solid var(--color-default);
+    --button-primary-hover-decoration: underline;
+    --button-primary-hover-background: #fff;
+
+    --button-primary-outline-color: var(--color-primary);
+    --button-primary-outline-border: 1px solid var(--color-primary);
+    --button-primary-outline-decoration: none;
+    --button-primary-outline-background: transparent;
+    --button-primary-outline-hover-color: #fff;
+    --button-primary-outline-hover-border: 1px solid var(--color-primary);
+    --button-primary-outline-hover-decoration: underline;
+    --button-primary-outline-hover-background: var(--color-primary);
+
     // sign up
     --sign_up_accent_color: #191a1c;
     --sign_up_accent_color_light: #45535e;
@@ -54,11 +77,14 @@ $primaryColorLight: #e60204;
     --body-background: none;
 
     // footer color
-    --footer_background_color: #e60004;
+    --footer_background: transparent;
     --footer_color: #fff;
     --footer_color_link: #fff;
     --footer_color_link_hover: #fff;
 
+    --footer-copyright-color: #000;
+    --footer-copyright-background: #fff;
+
     // displayed or not
     --footer_display: block;
 
@@ -90,4 +116,29 @@ $primaryColorLight: #e60204;
 
     // Login button
     --login-button-background: #fff;
+
+
+    // Sections
+    --section-padding: 0 0 30px;
+    --section-background: transparent;
+
+    --section-title-font: 700 40px/60px var(--heading-font-family);
+    --section-title-align: center;
+
+    --section-cms-padding: var(--section-padding);
+    --section-cms-background: var(--section-background);
+    --section-map-padding: var(--section-padding);
+    --section-map-background: var(--section-background);
+    --section-faq-padding: var(--section-padding);
+    --section-faq-background: var(--section-background);
+    --section-footer-padding: 30px 0;
+    --section-footer-background: #e60004;
+    --section-profile-padding: var(--section-padding);
+    --section-profile-background: var(--section-background);
+    --section-products-padding: var(--section-padding);
+    --section-products-background: var(--section-background);
+    --section-breadcrumbs-padding: 0;
+    --section-breadcrumbs-background: var(--section-background);
+    --section-voucher-details-padding: var(--section-padding);
+    --section-voucher-details-background: var(--section-background);
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-groningen.scss b/react/assets/forus-webshop/scss/style-webshop-groningen.scss
deleted file mode 100644
index 7b1f9540b..000000000
--- a/react/assets/forus-webshop/scss/style-webshop-groningen.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-// LAYOUTS
-@import 'groningen/layout/footer';
-
-// COMPONENTS
-@import 'groningen/components/buttons';
-
-// BLOCKS
-@import 'groningen/sections/blocks/map';
-@import 'groningen/sections/blocks/block-show-more';
-@import 'groningen/sections/blocks/block-navbar-search';
diff --git a/react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant-vars.scss b/react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant-vars.scss
index 23a5cfe2b..ec51088c8 100644
--- a/react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant-vars.scss
@@ -1,9 +1,10 @@
+@import "style-webshop-general-vars";
+@import url("https://fonts.googleapis.com/css?family=Montserrat:ital,wght@0,300;0,400;0,500;0,700;1,400");
+
 /*==========  Style Sheet - Vars  ==========*/
 $primaryColor: #24a1a1;
 $primaryColorLight: #24a1a1;
 
-@import url("https://fonts.googleapis.com/css?family=Montserrat:ital,wght@0,300;0,400;0,500;0,700;1,400");
-
 :root {
     // navbar
     --navbar-menu-background: #5d646f;
@@ -34,6 +35,10 @@ $primaryColorLight: #24a1a1;
     --tc-var: #fff;
     --tc-link: inherit;
 
+    // heading font
+    --heading-font-family: var(--base-font);
+    --heading-color: #24A1A1;
+
     // base color
     --bc: #24a1a1;
 
@@ -41,10 +46,16 @@ $primaryColorLight: #24a1a1;
     --body-background: none;
 
     // footer color
-    --footer_background_color: #24a1a1;
+    --footer_background: transparent;
     --footer_color: #ffffff;
     --footer_color_link: #ffffff;
 
+    --footer-copyright-color: var(--footer_color_link);
+    --footer-copyright-font: 400 14px/30px var(--base-font);
+    --footer-copyright-background: #24a1a1;
+    --footer-copyright-border-color: var(--border-color);
+    --footer-copyright-padding: 40px;
+
     // displayed or not
     --footer_display: block;
 
@@ -72,9 +83,73 @@ $primaryColorLight: #24a1a1;
     // Label sets
     --label-set-hover-background: #{rgba($primaryColor, .8)};
 
+
+    // Buttons
+    --button-font: 700 16px/24px var(--base-font);
+    --button-color: #282b39;
+    --button-shadow: none;
+    --button-decoration: none;
+    --button-border-radius: calc(var(--border-radius) * 0.75);
+    --button-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+    --button-hover-decoration: none;
+    --button-disabled-color: #616161;
+    --button-disabled-background: #e5e5e5;
+
+    --button-primary-color: #fff;
+    --button-primary-border: 1px solid var(--color-primary);
+    --button-primary-decoration: none;
+    --button-primary-background: var(--color-primary);
+    --button-primary-hover-color: #fff;
+    --button-primary-hover-border: 1px solid var(--color-primary-light);
+    --button-primary-hover-decoration: none;
+    --button-primary-hover-background: var(--color-primary-light);
+
+    --button-primary-outline-color: var(--color-primary);
+    --button-primary-outline-border: 1px solid var(--color-primary);
+    --button-primary-outline-decoration: none;
+    --button-primary-outline-background: transparent;
+    --button-primary-outline-hover-color: #fff;
+    --button-primary-outline-hover-border: 1px solid var(--color-primary);
+    --button-primary-outline-hover-decoration: none;
+    --button-primary-outline-hover-background: var(--color-primary);
+
+    --button-read_more-color: #24a1a1;
+    --button-read_more-border: 2px solid #24a1a1;
+    --button-read_more-decoration: null;
+    --button-read_more-background: #fff;
+    --button-read_more-hover-color: #ffffff;
+    --button-read_more-hover-border: 2px solid #24a1a1;
+    --button-read_more-hover-decoration: null;
+    --button-read_more-hover-background: #24a1a1;
+
     //- Showcase
     --showcase-fullscreen-bottom-offset: 160px;
 
     // Login button
     --login-button-background: #fff;
+
+
+    // Sections
+    --section-padding: 0 0 30px;
+    --section-background: transparent;
+
+    --section-title-font: 700 40px/60px var(--heading-font-family);
+    --section-title-align: center;
+
+    --section-cms-padding: var(--section-padding);
+    --section-cms-background: var(--section-background);
+    --section-map-padding: var(--section-padding);
+    --section-map-background: var(--section-background);
+    --section-faq-padding: var(--section-padding);
+    --section-faq-background: var(--section-background);
+    --section-footer-padding: 30px 0;
+    --section-footer-background: #24a1a1;
+    --section-profile-padding: var(--section-padding);
+    --section-profile-background: var(--section-background);
+    --section-products-padding: var(--section-padding);
+    --section-products-background: var(--section-background);
+    --section-breadcrumbs-padding: 0;
+    --section-breadcrumbs-background: var(--section-background);
+    --section-voucher-details-padding: var(--section-padding);
+    --section-voucher-details-background: var(--section-background);
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant.scss b/react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant.scss
deleted file mode 100644
index c050b2b26..000000000
--- a/react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-// SHAME
-@import "hartvanwestbrabant/includes/shame";
-
-// COMPONENTS
-@import "hartvanwestbrabant/components/buttons";
-
-// BLOCKS
-@import "hartvanwestbrabant/sections/blocks/block-lang-control";
diff --git a/react/assets/forus-webshop/scss/style-webshop-heumen-vars.scss b/react/assets/forus-webshop/scss/style-webshop-heumen-vars.scss
index 17087af14..93b614bb8 100644
--- a/react/assets/forus-webshop/scss/style-webshop-heumen-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-heumen-vars.scss
@@ -1,9 +1,10 @@
+@import "style-webshop-general-vars";
+@import url("https://fonts.googleapis.com/css?family=Verdana");
+
 /*==========  Style Sheet - Vars  ==========*/
 $primaryColor: #22398e;
 $primaryColorLight: #22398e;
 
-@import url("https://fonts.googleapis.com/css?family=Verdana");
-
 :root {
     // navbar
     --navbar-menu-background: #ececec;
@@ -41,10 +42,17 @@ $primaryColorLight: #22398e;
     --body-background: none;
 
     // footer color
-    --footer_background_color: #22398e;
+    --footer_background: translate;
     --footer_color: #ffffff;
     --footer_color_link: #ffffff;
 
+
+    --footer-copyright-color: var(--footer_color_link);
+    --footer-copyright-font: 400 14px/30px var(--base-font);
+    --footer-copyright-background: #22398e;
+    --footer-copyright-border-color: var(--border-color);
+    --footer-copyright-padding: 40px;
+
     // displayed or not
     --footer_display: block;
 
@@ -77,4 +85,29 @@ $primaryColorLight: #22398e;
 
     // Login button
     --login-button-background: #fff;
+
+
+    // Sections
+    --section-padding: 0 0 30px;
+    --section-background: transparent;
+
+    --section-title-font: 700 40px/60px var(--heading-font-family);
+    --section-title-align: center;
+
+    --section-cms-padding: var(--section-padding);
+    --section-cms-background: var(--section-background);
+    --section-map-padding: var(--section-padding);
+    --section-map-background: var(--section-background);
+    --section-faq-padding: var(--section-padding);
+    --section-faq-background: var(--section-background);
+    --section-footer-padding: 30px 0;
+    --section-footer-background: #22398e;
+    --section-profile-padding: var(--section-padding);
+    --section-profile-background: var(--section-background);
+    --section-products-padding: var(--section-padding);
+    --section-products-background: var(--section-background);
+    --section-breadcrumbs-padding: 0;
+    --section-breadcrumbs-background: var(--section-background);
+    --section-voucher-details-padding: var(--section-padding);
+    --section-voucher-details-background: var(--section-background);
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-heumen.scss b/react/assets/forus-webshop/scss/style-webshop-heumen.scss
deleted file mode 100644
index 6b3cdeb58..000000000
--- a/react/assets/forus-webshop/scss/style-webshop-heumen.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-// SHAME
-@import "heumen/includes/shame";
diff --git a/react/assets/forus-webshop/scss/style-webshop-kerstpakket-vars.scss b/react/assets/forus-webshop/scss/style-webshop-kerstpakket-vars.scss
index e6ad04495..9c5c712d9 100644
--- a/react/assets/forus-webshop/scss/style-webshop-kerstpakket-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-kerstpakket-vars.scss
@@ -1,8 +1,9 @@
+@import "style-webshop-general-vars";
+@import url("https://fonts.googleapis.com/css?family=Cherry+Swash&family=Montserrat:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap");
+
 /*==========  Style Sheet - Vars  ==========*/
 $primaryColor: #90191a;
-$primaryColorLight: #4c74ff;
-
-@import url("https://fonts.googleapis.com/css?family=Cherry+Swash&family=Montserrat:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap");
+$primaryColorLight: #9f3031;
 
 :root {
     // navbar
@@ -42,7 +43,7 @@ $primaryColorLight: #4c74ff;
     --body-background: none;
 
     // footer color
-    --footer_background_color: #fff;
+    --footer_background: transparent;
 
     // not displayed
     --footer_display: block;
@@ -70,4 +71,29 @@ $primaryColorLight: #4c74ff;
 
     // Label sets
     --label-set-hover-background: #{rgba($primaryColor, .8)};
+
+
+    // Sections
+    --section-padding: 0 0 30px;
+    --section-background: transparent;
+
+    --section-title-font: 700 40px/60px var(--heading-font-family);
+    --section-title-align: center;
+
+    --section-cms-padding: var(--section-padding);
+    --section-cms-background: var(--section-background);
+    --section-map-padding: var(--section-padding);
+    --section-map-background: var(--section-background);
+    --section-faq-padding: var(--section-padding);
+    --section-faq-background: var(--section-background);
+    --section-footer-padding: 30px 0;
+    --section-footer-background: #fff;
+    --section-profile-padding: var(--section-padding);
+    --section-profile-background: var(--section-background);
+    --section-products-padding: var(--section-padding);
+    --section-products-background: var(--section-background);
+    --section-breadcrumbs-padding: 0;
+    --section-breadcrumbs-background: var(--section-background);
+    --section-voucher-details-padding: var(--section-padding);
+    --section-voucher-details-background: var(--section-background);
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-kerstpakket.scss b/react/assets/forus-webshop/scss/style-webshop-kerstpakket.scss
deleted file mode 100644
index 8557493fa..000000000
--- a/react/assets/forus-webshop/scss/style-webshop-kerstpakket.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-// COMPONENTS
-@import "kerstpakket/components/buttons";
-
-// LAYOUTS
-@import "kerstpakket/layout/footer";
-
-// SECTIONS
-@import "kerstpakket/sections/faq";
-@import "kerstpakket/sections/steps";
-@import "kerstpakket/sections/map";
-
-// BLOCKS
-@import "kerstpakket/sections/blocks/products";
diff --git a/react/assets/forus-webshop/scss/style-webshop-midden_drenthe-vars.scss b/react/assets/forus-webshop/scss/style-webshop-midden_drenthe-vars.scss
index dc8131184..3930d58c5 100644
--- a/react/assets/forus-webshop/scss/style-webshop-midden_drenthe-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-midden_drenthe-vars.scss
@@ -1,9 +1,10 @@
+@import "style-webshop-general-vars";
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
+
 // do not use these scss variables outside this file
 $primaryColor: #8f1354;
 $primaryColorLight: #b31869;
 
-@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
-
 :root {
     // navbar
     --navbar-menu-background: #f7f8fa;
@@ -27,7 +28,7 @@ $primaryColorLight: #b31869;
     --body-background: #fff;
 
     // footer color
-    --footer_background_color: #eff2f5;
+    --footer_background: transparent;
     --footer_color: var(--tc);
     --footer_color_link: var(--tc);
     --footer_color_link_hover: var(--tc);
@@ -54,7 +55,7 @@ $primaryColorLight: #b31869;
     --search-bar-input-radius: 25px;
 
     // Buttons
-    --btn-border-radius: 25px;
+    --button-border-radius: 25px;
 
     // Label sets
     --label-set-active-background: #006767;
@@ -76,4 +77,28 @@ $primaryColorLight: #b31869;
     --voucher-card-action-border-radius: 20px;
     --voucher-card-action-hover-background: #008486;
     --voucher-card-action-hover-border-color: #008486;
+
+    // Sections
+    --section-padding: 0 0 30px;
+    --section-background: transparent;
+
+    --section-title-font: 700 40px/60px var(--heading-font-family);
+    --section-title-align: center;
+
+    --section-cms-padding: var(--section-padding);
+    --section-cms-background: var(--section-background);
+    --section-map-padding: var(--section-padding);
+    --section-map-background: var(--section-background);
+    --section-faq-padding: var(--section-padding);
+    --section-faq-background: var(--section-background);
+    --section-footer-padding: 30px 0;
+    --section-footer-background: #eff2f5;
+    --section-profile-padding: var(--section-padding);
+    --section-profile-background: var(--section-background);
+    --section-products-padding: var(--section-padding);
+    --section-products-background: var(--section-background);
+    --section-breadcrumbs-padding: 0;
+    --section-breadcrumbs-background: var(--section-background);
+    --section-voucher-details-padding: var(--section-padding);
+    --section-voucher-details-background: var(--section-background);
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-midden_drenthe.scss b/react/assets/forus-webshop/scss/style-webshop-midden_drenthe.scss
deleted file mode 100644
index 6d94ef82d..000000000
--- a/react/assets/forus-webshop/scss/style-webshop-midden_drenthe.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.block.block-pane,
-.block.block-empty,
-.block.block-map_card,
-.block.block-action-card,
-.block.block-transactions,
-.block.block-product .product-card,
-.block.block-voucher .base-card.base-card-voucher,
-.block.block-voucher .base-card.base-card-sponsor,
-.block.block-profile .profile-aside .profile-aside-block {
-    border: 1px solid var(--border-color);
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/style-webshop-noordoostpolder-vars.scss b/react/assets/forus-webshop/scss/style-webshop-noordoostpolder-vars.scss
index 7710a6fe8..b2e8bcd1f 100644
--- a/react/assets/forus-webshop/scss/style-webshop-noordoostpolder-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-noordoostpolder-vars.scss
@@ -1,8 +1,14 @@
+@import "style-webshop-general-vars";
+
 /*==========  Style Sheet - Vars  ==========*/
 $primaryColor: #de286b;
 $primaryColorLight: #fd5392;
 
 :root {
+    --border-color: #ebedf0;
+    --border-radius: 0px;
+    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+
     // navbar
     --navbar-menu-background: #f5f5f5;
     --navbar-menu-item-color: #282b39;
@@ -40,7 +46,7 @@ $primaryColorLight: #fd5392;
     --body-background: none;
 
     // footer color
-    --footer_background_color: #fff;
+    --footer_background: transparent;
     --footer_color: #282b39;
     --footer_color_link: #de286b;
     --footer_color_link_hover: #fd5392;
@@ -48,17 +54,17 @@ $primaryColorLight: #fd5392;
     // Displayed or not
     --footer_display: block;
 
+    // Vouchers
+    --vouchers-label-color: #4c91b3;
+    --vouchers-value-color: #91b845;
+    --vouchers-organization-color: #4c91b3;
+
     // product image
     --product-image-padding: 10px 0 0 10px;
 
     // placeholder text color
     --form-control-placeholder-color: #515152;
 
-    --border-color: #ebedf0;
-
-    --border-radius: 0px;
-    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-
     --color-primary: #{$primaryColor};
     --color-primary-light: #{$primaryColorLight};
 
@@ -68,6 +74,19 @@ $primaryColorLight: #fd5392;
     --color-search-icon-medium: #{$primaryColor};
     --color-search-icon-dark: #{darken($primaryColor, 10%)};
     --color-search-icon-light: #{lighten($primaryColor, 25%)};
+
+    // Labels
+    --label-default-color: #fff;
+    --label-default-background: #20b6ea;
+
+    --label-primary-color: #fff;
+    --label-primary-background: var(--color-primary);
+
+    --label-danger-color: #fff;
+    --label-danger-background: #549104;
+
+    --label-success-color: #030304;
+    --label-success-background: #9bbfa1;
     
     // Label sets
     --label-set-hover-background: #{rgba($primaryColor, .8)};
@@ -77,4 +96,40 @@ $primaryColorLight: #fd5392;
 
     // Login button
     --login-button-background: #fff;
+
+    // Products
+    --products-title-color: var(--tc);
+    --products-title-hover-color: var(--tc);
+    --products-text-color: var(--tc);
+
+    // Faq
+    --faq-width: 820px;
+    --faq-align: center;
+    --faq-header-color: #00122a;
+    --faq-header-color-hover: var(--color-primary);
+
+
+    // Sections
+    --section-padding: 0 0 30px;
+    --section-background: transparent;
+
+    --section-title-font: 700 40px/60px var(--heading-font-family);
+    --section-title-align: center;
+
+    --section-cms-padding: var(--section-padding);
+    --section-cms-background: var(--section-background);
+    --section-map-padding: var(--section-padding);
+    --section-map-background: var(--section-background);
+    --section-faq-padding: var(--section-padding);
+    --section-faq-background: var(--section-background);
+    --section-footer-padding: 30px 0;
+    --section-footer-background: #fff;
+    --section-profile-padding: var(--section-padding);
+    --section-profile-background: var(--section-background);
+    --section-products-padding: var(--section-padding);
+    --section-products-background: var(--section-background);
+    --section-breadcrumbs-padding: 0;
+    --section-breadcrumbs-background: var(--section-background);
+    --section-voucher-details-padding: var(--section-padding);
+    --section-voucher-details-background: var(--section-background);
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-noordoostpolder.scss b/react/assets/forus-webshop/scss/style-webshop-noordoostpolder.scss
deleted file mode 100644
index 0f16bd082..000000000
--- a/react/assets/forus-webshop/scss/style-webshop-noordoostpolder.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-// SHAME
-@import "noordoostpolder/includes/shame";
-
-// COMPONENTS
-@import "noordoostpolder/components/label";
-
-// SECTIONS
-@import "noordoostpolder/sections/faq";
-@import "noordoostpolder/sections/steps";
-@import "noordoostpolder/sections/vouchers";
-
-// BLOCKS
-@import "noordoostpolder/sections/blocks/map";
-@import "noordoostpolder/sections/blocks/products";
-@import "noordoostpolder/sections/blocks/profile";
-@import "noordoostpolder/sections/blocks/shops_map";
-@import "noordoostpolder/sections/blocks/transactions";
-@import "noordoostpolder/sections/blocks/voucher";
-@import "noordoostpolder/sections/blocks/vouchers";
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/style-webshop-oostgelre-vars.scss b/react/assets/forus-webshop/scss/style-webshop-oostgelre-vars.scss
index f134df30c..904bb98b4 100644
--- a/react/assets/forus-webshop/scss/style-webshop-oostgelre-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-oostgelre-vars.scss
@@ -1,10 +1,15 @@
+@import "style-webshop-general-vars";
+@import url("https://fonts.googleapis.com/css?family=Verdana");
+
 /*==========  Style Sheet - Vars  ==========*/
 $primaryColor: #3d013d;
 $primaryColorLight: #660066;
 
-@import url("https://fonts.googleapis.com/css?family=Verdana");
-
 :root {
+    --border-color: #dbdcdb;
+    --border-radius: 0px;
+    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+
     // navbar
     --navbar-menu-background: #f5f5f5;
     --navbar-menu-item-color: #282b39;
@@ -55,11 +60,6 @@ $primaryColorLight: #660066;
     // placeholder text color
     --form-control-placeholder-color: #515152;
 
-    --border-color: #dbdcdb;
-
-    --border-radius: 0px;
-    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-
     --color-primary: #{$primaryColor};
     --color-primary-light: #{$primaryColorLight};
 
@@ -73,9 +73,71 @@ $primaryColorLight: #660066;
     // Label sets
     --label-set-hover-background: #{rgba($primaryColor, .8)};
 
+    // Buttons
+    --button-font: 700 16px/24px var(--base-font);
+    --button-color: #282b39;
+    --button-shadow: none;
+    --button-decoration: none;
+    --button-border-radius: calc(var(--border-radius) * 0.75);
+    --button-hover-shadow: none;
+    --button-hover-decoration: none;
+    --button-disabled-color: #616161;
+    --button-disabled-background: #e5e5e5;
+
+    --button-primary-color: var(--tc-var);
+    --button-primary-border: 1px solid transparent;
+    --button-primary-decoration: none;
+    --button-primary-background: var(--color-default);
+    --button-primary-hover-color: var(--color-default);
+    --button-primary-hover-border: 1px solid var(--color-default);
+    --button-primary-hover-decoration: underline;
+    --button-primary-hover-background: #fff;
+
+    --button-primary-outline-color: var(--color-primary);
+    --button-primary-outline-border: 1px solid var(--color-primary);
+    --button-primary-outline-decoration: none;
+    --button-primary-outline-background: transparent;
+    --button-primary-outline-hover-color: #fff;
+    --button-primary-outline-hover-border: 1px solid var(--color-primary);
+    --button-primary-outline-hover-decoration: none;
+    --button-primary-outline-hover-background: var(--color-primary);
+
     //- Showcase
     --showcase-fullscreen-bottom-offset: 135px;
 
     // Login button
     --login-button-background: #fff;
-}
+
+    // Profile
+    --profile-menu-item-color: #fff;
+    --profile-menu-item-color-icon: #fff;
+    --profile-menu-item-shadow: none;
+    --profile-menu-item-background: #660066;
+    --profile-menu-item-border-color: #660066;
+    --profile-menu-item-border-radius: var(--border-radius);
+    --profile-menu-item-hover-color: #660066;
+    --profile-menu-item-hover-shadow: none;
+    --profile-menu-item-hover-background: #fff;
+    --profile-menu-item-hover-border-color: #660066;
+    --profile-menu-item-hover-border-radius: var(--border-radius);
+
+    // Vouchers
+    --vouchers-label-color: #4c91b3;
+    --vouchers-value-color: var(--tc);
+    --vouchers-organization-color: #4c91b3;
+
+    // Products
+    --products-title-color: #660066;
+    --products-title-hover-color: var(--tc);
+    --products-text-color: var(--tc);
+
+    // Faq
+    --faq-width: 820px;
+    --faq-align: center;
+    --faq-header-color: #00122a;
+    --faq-header-color-hover: #660066;
+
+    // Section order
+    --order-page-voucher-map: 1;
+    --order-page-voucher-products: 2;
+}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/style-webshop-oostgelre.scss b/react/assets/forus-webshop/scss/style-webshop-oostgelre.scss
deleted file mode 100644
index 797e1a988..000000000
--- a/react/assets/forus-webshop/scss/style-webshop-oostgelre.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-// SHAME
-@import "oostgelre/includes/shame";
-
-// COMPONENTS
-@import "oostgelre/components/buttons";
-
-// SECTIONS
-@import "oostgelre/sections/faq";
-@import "oostgelre/sections/steps";
-@import "oostgelre/sections/vouchers";
-
-// BLOCKS
-@import "oostgelre/sections/blocks/map";
-@import "oostgelre/sections/blocks/products";
-@import "oostgelre/sections/blocks/profile";
-@import "oostgelre/sections/blocks/shops_map";
-@import "oostgelre/sections/blocks/transactions";
-@import "oostgelre/sections/blocks/voucher";
-@import "oostgelre/sections/blocks/vouchers";
-
-.page {
-    display: flex;
-    flex-direction: column;
-
-    &.page-voucher {
-        & > .section.section-products {
-            order: 2;
-        }
-
-        & > .block.block-map_card {
-            order: 1;
-        }
-    }
-}
diff --git a/react/assets/forus-webshop/scss/style-webshop-potjeswijzer-vars.scss b/react/assets/forus-webshop/scss/style-webshop-potjeswijzer-vars.scss
index c113e707c..469e2bac5 100644
--- a/react/assets/forus-webshop/scss/style-webshop-potjeswijzer-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-potjeswijzer-vars.scss
@@ -1,3 +1,5 @@
+@import "style-webshop-general-vars";
+
 /*==========  Style Sheet - Vars  ==========*/
 $primaryColor: #b9cb18;
 $primaryColorLight: #b9cb18;
@@ -40,8 +42,16 @@ $primaryColorLight: #b9cb18;
     --body-background: #fff;
 
     // footer color
-    --footer_background_color: #4990b5;
+    --footer_background: transparent;
     --footer_color: #ffffff;
+    --footer_color_link: var(--footer_color);
+    --footer_color_link_hover: var(--footer_color);
+
+    --footer-copyright-color: #004d93;
+    --footer-copyright-font: 400 14px/30px var(--base-font);
+    --footer-copyright-background: #fff;
+    --footer-copyright-border-color: var(--border-color);
+    --footer-copyright-padding: 40px;
 
     // Displayed or not
     --footer_display: block;
@@ -66,11 +76,53 @@ $primaryColorLight: #b9cb18;
     --color-search-icon-medium: #{$primaryColor};
     --color-search-icon-dark: #{darken($primaryColor, 10%)};
     --color-search-icon-light: #{lighten($primaryColor, 25%)};
+
+    // Labels
+    --label-default-color: #fff;
+    --label-default-background: #595959;
+
+    --label-primary-color: #fff;
+    --label-primary-background: #1C8271;
+
+    --label-danger-color: #030304;
+    --label-danger-background: #d38c87;
+
+    --label-success-color: #fff;
+    --label-success-background: var(--color-primary);
     
     // Label sets
     --label-set-active-background: #4e4d40;
     --label-set-hover-background: #{rgba(#4e4d40, .8)};
 
+    // Buttons
+    --button-font: 700 16px/24px var(--base-font);
+    --button-color: #282b39;
+    --button-shadow: none;
+    --button-decoration: none;
+    --button-border-radius: calc(var(--border-radius) * 0.75);
+    --button-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+    --button-hover-decoration: none;
+    --button-disabled-color: #999;
+    --button-disabled-background: #e5e5e5;
+
+    --button-primary-color: #666;
+    --button-primary-border: 1px solid var(--color-primary);
+    --button-primary-decoration: none;
+    --button-primary-background: var(--color-primary);
+    --button-primary-hover-color: #666;
+    --button-primary-hover-border: 1px solid var(--color-primary-light);
+    --button-primary-hover-decoration: none;
+    --button-primary-hover-background: var(--color-primary-light);
+
+    --button-primary-outline-color: #fff;
+    --button-primary-outline-border: 1px solid #498fb4;
+    --button-primary-outline-decoration: none;
+    --button-primary-outline-background: #498fb4;
+    --button-primary-outline-hover-color: #498fb4;
+    --button-primary-outline-hover-border: 1px solid var(--color-primary);
+    --button-primary-outline-hover-decoration: none;
+    --button-primary-outline-hover-background: transparent;
+
     //- Showcase
     --showcase-fullscreen-bottom-offset: 140px;
     --showcase-title-count-color: #666;
@@ -87,4 +139,41 @@ $primaryColorLight: #b9cb18;
 
     // Breadcrumbs
     --breadcrumb-color: #4f4f4f;
+
+    // Faq
+    --faq-width: 820px;
+    --faq-align: flex-start;
+    --faq-header-color: #4990b5;
+    --faq-header-color-hover: #4990b5;
+
+    // CMS funds
+    --cms-funds-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-title-color: var(--htc);
+    --cms-funds-label-font-size: 12px;
+    --cms-funds-label-background: #1C8271;
+
+
+    // Sections
+    --section-padding: 0 0 30px;
+    --section-background: transparent;
+
+    --section-title-font: 700 40px/60px var(--heading-font-family);
+    --section-title-align: center;
+
+    --section-cms-padding: var(--section-padding);
+    --section-cms-background: var(--section-background);
+    --section-map-padding: var(--section-padding);
+    --section-map-background: var(--section-background);
+    --section-faq-padding: var(--section-padding);
+    --section-faq-background: var(--section-background);
+    --section-footer-padding: 30px 0;
+    --section-footer-background: #4990b5;
+    --section-profile-padding: var(--section-padding);
+    --section-profile-background: var(--section-background);
+    --section-products-padding: var(--section-padding);
+    --section-products-background: var(--section-background);
+    --section-breadcrumbs-padding: 0;
+    --section-breadcrumbs-background: var(--section-background);
+    --section-voucher-details-padding: var(--section-padding);
+    --section-voucher-details-background: var(--section-background);
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-potjeswijzer.scss b/react/assets/forus-webshop/scss/style-webshop-potjeswijzer.scss
deleted file mode 100644
index ed6661604..000000000
--- a/react/assets/forus-webshop/scss/style-webshop-potjeswijzer.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-// LAYOUTS
-@import 'potjeswijzer/layout/footer';
-
-// COMPONENTS
-@import 'potjeswijzer/components/buttons';
-@import 'potjeswijzer/components/form';
-@import 'potjeswijzer/components/label';
-
-// INCLUDES
-@import 'potjeswijzer/includes/shame';
-
-// BLOCKS
-@import "potjeswijzer/sections/blocks/block-lang-control";
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/style-webshop-schagen-vars.scss b/react/assets/forus-webshop/scss/style-webshop-schagen-vars.scss
index e69ab97f7..c334968a2 100644
--- a/react/assets/forus-webshop/scss/style-webshop-schagen-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-schagen-vars.scss
@@ -1,7 +1,14 @@
+@import "style-webshop-general-vars";
+
 /*==========  Style Sheet - Vars  ==========*/
 $primaryColor: #0072b8;
 $primaryColorLight: #1c8fd7;
 
+@font-face {
+    font-family: 'Century Gothic';
+    src: url('./assets/fonts/Century Gothic.ttf');
+}
+
 :root {
     // navbar
     --navbar-menu-order: 2;
@@ -13,10 +20,6 @@ $primaryColorLight: #1c8fd7;
     --navbar-search-padding: 20px 0px;
     --navbar-logo-height: 75px;
 
-    // Nav item line position
-    --navbar-menu-item-line-position-top: auto;
-    --navbar-menu-item-line-position-bottom: 0;
-
     // navbar (auth)
     --tc-auth-menu: #ffffff;
     --tc-auth-btn: #ffffff;
@@ -35,12 +38,12 @@ $primaryColorLight: #1c8fd7;
     --base-font: "Century Gothic", "Helvetica", "Open Sans", "Arial", sans-serif;
 
     // heading font
-    --hf: var(--base-font);
+    --heading-font-family: var(--base-font);
 
     // text color
     --tc: #4e4d40;
     --tc-var: #fff;
-    --tc-link: inherit;
+    --tc-link: #0071B8;
 
     // base color
     --bc: #000;
@@ -49,11 +52,17 @@ $primaryColorLight: #1c8fd7;
     --body-background: #fff;
 
     // footer color
-    --footer_background_color: #306fb3;
+    --footer_background: transparent;
     --footer_color: #fff;
 
     --footer_color_link: #fff;
 
+    --footer-copyright-color: var(--footer_color_link);
+    --footer-copyright-font: 400 16px/30px var(--base-font);
+    --footer-copyright-background: #306fb3;
+    --footer-copyright-border-color: transparent;
+    --footer-copyright-padding: 25px;
+
     // Displayed or not
     --footer_display: block;
 
@@ -66,7 +75,8 @@ $primaryColorLight: #1c8fd7;
     --border-color: #e4e4e4;
 
     --border-radius: 5px;
-    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+    //--box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+    --box-shadow: none;
 
     --color-primary: #{$primaryColor};
     --color-primary-light: #{$primaryColorLight};
@@ -108,4 +118,42 @@ $primaryColorLight: #1c8fd7;
     // Nav item line position
     --navbar-menu-item-line-position-top: auto;
     --navbar-menu-item-line-position-bottom: 0;
+
+    // Profile
+    --profile-menu-item-shadow: none;
+    --profile-menu-item-background: #ffffff;
+    --profile-menu-item-border-color: var(--border-color);
+
+    // Vouchers
+    --vouchers-label-color: #646f79;
+    --vouchers-value-color: var(--tc);
+    --vouchers-organization-color: var(--tc);
+
+    // Faq
+    --faq-width: 100%;
+    --faq-align: center;
+
+    // Sections
+    --section-padding: 0 0 30px;
+    --section-background: transparent;
+
+    --section-title-font: 700 40px/60px var(--heading-font-family);
+    --section-title-align: center;
+
+    --section-cms-padding: var(--section-padding);
+    --section-cms-background: var(--section-background);
+    --section-map-padding: var(--section-padding);
+    --section-map-background: var(--section-background);
+    --section-faq-padding: var(--section-padding);
+    --section-faq-background: var(--section-background);
+    --section-footer-padding: 30px 0;
+    --section-footer-background: #306fb3;
+    --section-profile-padding: var(--section-padding);
+    --section-profile-background: var(--section-background);
+    --section-products-padding: 20px 0 30px;
+    --section-products-background: #f5f5f5;
+    --section-breadcrumbs-padding: 0;
+    --section-breadcrumbs-background: var(--section-background);
+    --section-voucher-details-padding: var(--section-padding);
+    --section-voucher-details-background: var(--section-background);
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-schagen.scss b/react/assets/forus-webshop/scss/style-webshop-schagen.scss
deleted file mode 100644
index 96e070652..000000000
--- a/react/assets/forus-webshop/scss/style-webshop-schagen.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@font-face {
-    font-family: 'Century Gothic';
-    src: url('./assets/fonts/Century Gothic.ttf');
-}
-
-// INCLUDES
-@import 'schagen/includes/shame';
-
-// BLOCKS
-@import "schagen/sections/blocks/block-lang-control";
diff --git a/react/assets/forus-webshop/scss/style-webshop-vergoedingen-vars.scss b/react/assets/forus-webshop/scss/style-webshop-vergoedingen-vars.scss
index 19feffc27..772b70153 100644
--- a/react/assets/forus-webshop/scss/style-webshop-vergoedingen-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-vergoedingen-vars.scss
@@ -1,7 +1,97 @@
+@import "style-webshop-general-vars";
+
 /*==========  Style Sheet - Vars  ==========*/
 $primaryColor: #176b55;
 $primaryColorLight: #2f7f6b;
 
+@font-face {
+    font-family: 'Grandis Extended';
+    src: url('../fonts/GrandisExtended-LightItalic.eot');
+    src: local('Grandis Extended Light Italic'), local('GrandisExtended-LightItalic'),
+    url('../fonts/GrandisExtended-LightItalic.woff2') format('woff2'),
+    url('../fonts/GrandisExtended-LightItalic.woff') format('woff');
+    font-weight: 300;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Grandis Extended';
+    src: url('../fonts/GrandisExtended-Light.eot');
+    src: local('Grandis Extended Light'), local('GrandisExtended-Light'),
+    url('../fonts/GrandisExtended-Light.woff2') format('woff2'),
+    url('../fonts/GrandisExtended-Light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Grandis Extended';
+    src: url('../fonts/GrandisExtended-Medium.eot');
+    src: local('Grandis Extended Medium'), local('GrandisExtended-Medium'),
+    url('../fonts/GrandisExtended-Medium.woff2') format('woff2'),
+    url('../fonts/GrandisExtended-Medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Grandis Extended';
+    src: url('../fonts/GrandisExtended-MediumItalic.eot');
+    src: local('Grandis Extended Medium Italic'), local('GrandisExtended-MediumItalic'),
+    url('../fonts/GrandisExtended-MediumItalic.woff2') format('woff2'),
+    url('../fonts/GrandisExtended-MediumItalic.woff') format('woff');
+    font-weight: 500;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Grandis Extended';
+    src: url('../fonts/GrandisExtended-Regular.eot');
+    src: local('Grandis Extended Regular'), local('GrandisExtended-Regular'),
+    url('../fonts/GrandisExtended-Regular.woff2') format('woff2'),
+    url('../fonts/GrandisExtended-Regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Grandis Extended';
+    src: url('../fonts/GrandisExtended-RegularItalic.eot');
+    src: local('Grandis Extended Regular Italic'), local('GrandisExtended-RegularItalic'),
+    url('../fonts/GrandisExtended-RegularItalic.woff2') format('woff2'),
+    url('../fonts/GrandisExtended-RegularItalic.woff') format('woff');
+    font-weight: 400;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Grandis Extended';
+    src: url('../fonts/GrandisExtended-BoldItalic.eot');
+    src: local('Grandis Extended Bold Italic'), local('GrandisExtended-BoldItalic'),
+    url('../fonts/GrandisExtended-BoldItalic.woff2') format('woff2'),
+    url('../fonts/GrandisExtended-BoldItalic.woff') format('woff');
+    font-weight: 600;
+    font-style: italic;
+}
+
+@font-face {
+    font-family: 'Grandis Extended';
+    src: url('../fonts/GrandisExtended-Bold.eot');
+    src: local('Grandis Extended Bold'), local('GrandisExtended-Bold'),
+    url('../fonts/GrandisExtended-Bold.woff2') format('woff2'),
+    url('../fonts/GrandisExtended-Bold.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'OrandaBT-Bold';
+    src: url("../fonts/Oranda-BT-Bold.woff2") format("woff2"),
+    url("../fonts/Oranda-BT-Bold.woff") format("woff"),
+    url("../fonts/Oranda-BT-Bold.ttf") format("truetype");
+    font-weight: 600;
+}
+
 @font-face {
     font-family: Oranda;
     src:
@@ -47,7 +137,11 @@ $primaryColorLight: #2f7f6b;
     // base font
     --base-font: 'Source Sans Pro', 'Arial', sans-serif;
 
-    --hf: var(--base-font);
+    // heading font
+    --heading-font-family: 'Oranda', sans-serif;
+    --heading-font: 700 40px/60px var(--heading-font-family);
+    --heading-color: var(--tc);
+    --heading-pane-font: 700 22px/30px var(--heading-font-family);
 
     // text color
     --tc: #212121;
@@ -61,11 +155,17 @@ $primaryColorLight: #2f7f6b;
     --body-background: #fff;
 
     // footer color
-    --footer_background_color: #3a3a3a;
+    --footer_background: transparent;
     --footer_color: #fff;
 
     --footer_color_link: #fff;
 
+    --footer-copyright-color: var(--footer_color_link);
+    --footer-copyright-font: 400 16px/30px var(--base-font);
+    --footer-copyright-background: #212121;
+    --footer-copyright-border-color: transparent;
+    --footer-copyright-padding: 25px;
+
     // Displayed or not
     --footer_display: block;
 
@@ -102,13 +202,75 @@ $primaryColorLight: #2f7f6b;
 
     --showcase-fullscreen-bottom-offset: 50px;
 
+    // Profile
+    --profile-menu-item-color: var(--color-primary);
+    --profile-menu-item-color-icon: var(--profile-menu-item-color);
+    --profile-menu-item-shadow: none;
+    --profile-menu-item-background: #ffffff;
+    --profile-menu-item-border-color: var(--border-color);
+    --profile-menu-item-border-radius: var(--border-radius);
+    --profile-menu-item-hover-color: #fff;
+    --profile-menu-item-hover-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
+    --profile-menu-item-hover-background: var(--color-primary);
+    --profile-menu-item-hover-border-color: var(--color-primary);
+    --profile-menu-item-hover-border-radius: var(--border-radius);
+
     // Label sets
     --label-set-hover-background: #{rgba($primaryColor, 0.8)};
 
+    // Sign up
+    --sign_up_accent_color: #282b39;
+    --sign_up_accent_color_light: #bdcbff;
+    --sign_up_link_color: #e60003;
+    --sign_up_step_btns_color: var(--color-primary);
+    --sign_up_digid_btn_bkg: #e1e7ff;
+    --sign_up_digid_btn_text: #4b71ff;
+    --sign_up_digid_btn_border: none;
+    --sign_up_digid_btn_border_radius: 5px;
+    --sign_up_loader_icon_color: #282b39;
+
     // Login button
     --login-button-background: #fff;
 
     // Nav item line position
     --navbar-menu-item-line-position-top: auto;
     --navbar-menu-item-line-position-bottom: 0;
+
+    // Faq
+    --faq-width: 100%;
+    --faq-align: center;
+
+    // Sections
+    --section-padding: 0 0 30px;
+    --section-background: transparent;
+
+    --section-title-font: 700 36px/50px var(--heading-font-family);
+    --section-title-align: left;
+
+    --section-cms-padding: var(--section-padding);
+    --section-cms-background: var(--section-background);
+    --section-map-padding: 30px 0;
+    --section-map-background: var(--section-background);
+    --section-faq-padding: var(--section-padding);
+    --section-faq-background: var(--section-background);
+    --section-footer-padding: 30px 0;
+    --section-footer-background: #3a3a3a;
+    --section-profile-padding: var(--section-padding);
+    --section-profile-background: var(--section-background);
+    --section-products-padding: 20px 0 30px;
+    --section-products-background: #f5f5f5;
+    --section-breadcrumbs-padding: 0;
+    --section-breadcrumbs-background: var(--section-background);
+    --section-voucher-details-padding: var(--section-padding);
+    --section-voucher-details-background: var(--section-background);
+
+    // Search bar
+    --search-result-sidebar-item-active-color: #fff;
+    --search-result-sidebar-item-active-background: #176b55;
+
+    // CMS funds
+    --cms-funds-title-font: 400 32px/48px 'Oranda', sans-serif;
+    --cms-funds-title-color: #950022;
+    --cms-funds-label-font-size: 12px;
+    --cms-funds-label-background: #176B55;
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-vergoedingen.scss b/react/assets/forus-webshop/scss/style-webshop-vergoedingen.scss
deleted file mode 100644
index 524d99dd1..000000000
--- a/react/assets/forus-webshop/scss/style-webshop-vergoedingen.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-// INCLUDES
-@import "vergoedingen/includes/fonts";
-@import "vergoedingen/includes/shame";
-
-// BLOCKS
-@import "vergoedingen/sections/blocks/block-sign_up";
-@import "vergoedingen/sections/blocks/block-organization-info";
-@import "vergoedingen/sections/blocks/block-cms-funds";
-@import "vergoedingen/sections/blocks/block-navbar-search-results";
-@import "vergoedingen/sections/blocks/block-mobile-menu";
diff --git a/react/assets/forus-webshop/scss/style-webshop-waalwijk-vars.scss b/react/assets/forus-webshop/scss/style-webshop-waalwijk-vars.scss
index cd5bd765e..f8fb93ba2 100644
--- a/react/assets/forus-webshop/scss/style-webshop-waalwijk-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-waalwijk-vars.scss
@@ -1,8 +1,9 @@
+@import "style-webshop-general-vars";
+@import url("https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700");
+
 $primaryColor: #2a2a7f;
 $primaryColorLight: #2a2a7f;
 
-@import url("https://fonts.googleapis.com/css?family=Lato:300,300i,400,400i,700");
-
 :root {
     // navbar
     --navbar-menu-background: #2a2a7f;
@@ -44,10 +45,16 @@ $primaryColorLight: #2a2a7f;
     --body-background: none;
 
     // footer color
-    --footer_background_color: #2f2d80;
+    --footer_background: transparent;
     --footer_color: #ffffff;
     --footer_color_link: #ffffff;
 
+    --footer-copyright-color: var(--footer_color_link);
+    --footer-copyright-font: 400 14px/30px var(--base-font);
+    --footer-copyright-background: #2f2d80;
+    --footer-copyright-border-color: var(--border-color);
+    --footer-copyright-padding: 40px;
+
     // displayed or not
     --footer_display: block;
 
@@ -80,4 +87,29 @@ $primaryColorLight: #2a2a7f;
 
     // Login button
     --login-button-background: #fff;
+
+
+    // Sections
+    --section-padding: 0 0 30px;
+    --section-background: transparent;
+
+    --section-title-font: 700 40px/60px var(--heading-font-family);
+    --section-title-align: center;
+
+    --section-cms-padding: var(--section-padding);
+    --section-cms-background: var(--section-background);
+    --section-map-padding: var(--section-padding);
+    --section-map-background: var(--section-background);
+    --section-faq-padding: var(--section-padding);
+    --section-faq-background: var(--section-background);
+    --section-footer-padding: 30px 0;
+    --section-footer-background: #2f2d80;
+    --section-profile-padding: var(--section-padding);
+    --section-profile-background: var(--section-background);
+    --section-products-padding: var(--section-padding);
+    --section-products-background: var(--section-background);
+    --section-breadcrumbs-padding: 0;
+    --section-breadcrumbs-background: var(--section-background);
+    --section-voucher-details-padding: var(--section-padding);
+    --section-voucher-details-background: var(--section-background);
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-waalwijk.scss b/react/assets/forus-webshop/scss/style-webshop-waalwijk.scss
deleted file mode 100644
index c3f905295..000000000
--- a/react/assets/forus-webshop/scss/style-webshop-waalwijk.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-// SHAME
-@import "waalwijk/includes/shame";
-
-// BLOCKS
-@import "waalwijk/sections/blocks/block-lang-control";
diff --git a/react/assets/forus-webshop/scss/style-webshop-wadenheuvel-vars.scss b/react/assets/forus-webshop/scss/style-webshop-wadenheuvel-vars.scss
index 6fae45f58..f16f7fbd7 100644
--- a/react/assets/forus-webshop/scss/style-webshop-wadenheuvel-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-wadenheuvel-vars.scss
@@ -1,8 +1,9 @@
+@import "style-webshop-general-vars";
+@import url('https://fonts.googleapis.com/css2?family=Cantarell&family=Montserrat:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');
+
 $primaryColor: #2a2a7f;
 $primaryColorLight: #2a2a7f;
 
-@import url('https://fonts.googleapis.com/css2?family=Cantarell&family=Montserrat:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');
-
 :root {
     // navbar
     --navbar-menu-background: #171e5f;
@@ -39,6 +40,23 @@ $primaryColorLight: #2a2a7f;
     // background color
     --body-background: none;
 
+    // footer color
+    --footer_background: transparent;
+    --footer_color: #353535;
+    --footer_color_link: #004d93;
+    --footer_color_link_hover: #004d93;
+
+    --footer_social_color: var(--footer_color);
+    --footer_social_background: transparent;
+    --footer_social_border_color: var(--footer_color);
+    --footer_social_border_radius: var(--border-radius);
+
+    --footer-copyright-color: var(--footer_color);
+    --footer-copyright-font: 400 14px/30px var(--base-font);
+    --footer-copyright-background: transparent;
+    --footer-copyright-border-color: var(--border-color);
+    --footer-copyright-padding: 40px;
+
     // text formatting
     --tf: inherit;
 
@@ -66,9 +84,38 @@ $primaryColorLight: #2a2a7f;
     --color_default: #3561ff;
     --color_default_light: #3561ff;
 
+    // Vouchers
+    --vouchers-label-color: #646f79;
+    --vouchers-value-color: var(--tc);
+    --vouchers-organization-color: var(--tc);
+
     // Label sets
     --label-set-hover-background: #{rgba($primaryColor, 0.8)};
 
     // Login button
     --lb: #fff;
+
+    // Sections
+    --section-padding: 0 0 30px;
+    --section-background: transparent;
+
+    --section-title-font: 700 40px/60px var(--heading-font-family);
+    --section-title-align: center;
+
+    --section-cms-padding: var(--section-padding);
+    --section-cms-background: var(--section-background);
+    --section-map-padding: var(--section-padding);
+    --section-map-background: var(--section-background);
+    --section-faq-padding: var(--section-padding);
+    --section-faq-background: var(--section-background);
+    --section-footer-padding: 30px 0;
+    --section-footer-background: #fff;
+    --section-profile-padding: var(--section-padding);
+    --section-profile-background: var(--section-background);
+    --section-products-padding: var(--section-padding);
+    --section-products-background: var(--section-background);
+    --section-breadcrumbs-padding: 0;
+    --section-breadcrumbs-background: var(--section-background);
+    --section-voucher-details-padding: var(--section-padding);
+    --section-voucher-details-background: var(--section-background);
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-wadenheuvel.scss b/react/assets/forus-webshop/scss/style-webshop-wadenheuvel.scss
deleted file mode 100644
index 9be924c88..000000000
--- a/react/assets/forus-webshop/scss/style-webshop-wadenheuvel.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-// SHAME
-@import "wadenheuvel/includes/shame";
diff --git a/react/assets/forus-webshop/scss/style-webshop-winterswijk-vars.scss b/react/assets/forus-webshop/scss/style-webshop-winterswijk-vars.scss
index 4879d6ff9..f16fa33d4 100644
--- a/react/assets/forus-webshop/scss/style-webshop-winterswijk-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-winterswijk-vars.scss
@@ -1,5 +1,7 @@
+@import "style-webshop-general-vars";
+
 /*==========  Style Sheet - Vars  ==========*/
-$primaryColor: #626161;
+$primaryColor: #0575ba;
 $primaryColorLight: #0c6dcb;
 
 :root {
@@ -67,11 +69,85 @@ $primaryColorLight: #0c6dcb;
     --color-search-icon-light: #{lighten($primaryColor, 25%)};
 
     // Label sets
-    --label-set-hover-background: #{rgba($primaryColor, .8)};
+    --label-set-border-radius: var(--border-radius);
+    --label-set-border-color: #9e9e9e;
+    --label-set-color: #272525;
+    --label-set-background: #ffffff;
+    --label-set-active-color: #ffffff;
+    --label-set-active-background: #595959;
+    --label-set-hover-color: #ffffff;
+    --label-set-hover-background: #{rgba(#595959, .8)};
+    --label-set-focus-color: #272525;
+    --label-set-focus-background: #f4f5f7;
+    --label-set-focus-border-color: #9e9e9e;
 
     //- Showcase
+    --showcase-aside-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
+    --showcase-aside-padding: 20px;
+    --showcase-aside-background: #fff;
+    --showcase-aside-border: 1px solid #e5e5e5;
+    --showcase-aside-border-radius: var(--border-radius);
+
+    --showcase-item-shadow: var(--showcase-aside-shadow);
+    --showcase-item-background: var(--showcase-aside-background);
+    --showcase-item-border: var(--showcase-aside-border);
+    --showcase-item-border-radius: var(--showcase-aside-border-radius);
+    --showcase-item-hover-shadow: 2px 8px 14px 0px rgba(0, 0, 0, 0.1);
+
+    --showcase-aside-button-color: var(--color-primary);
+    --showcase-aside-button-border: 1px solid var(--color-primary);
+    --showcase-aside-button-background: transparent;
+    --showcase-aside-button-hover-color: #fff;
+    --showcase-aside-button-hover-border: 1px solid var(--color-primary);
+    --showcase-aside-button-hover-background: var(--color-primary);
+
     --showcase-fullscreen-bottom-offset: 135px;
 
+    --showcase-title-font: 600 18px/30px var(--heading-font-family);
+    --showcase-title-color: var(--tc);
+    --showcase-title-count-color: #fff;
+    --showcase-title-count-background: #626161;
+    --showcase-title-count-border-radius: calc(var(--border-radius) / 2);
+
+    // Breadcrumbs
+    --breadcrumb-size: 16px;
+    --breadcrumb-color: #626161;
+    --breadcrumb-color-active: #353535;
+    --breadcrumb-padding: 20px;
+
+    // Profile
+    --profile-menu-item-color: #fff;
+    --profile-menu-item-color-icon: #fff;
+    --profile-menu-item-shadow: none;
+    --profile-menu-item-background: var(--color-primary);
+    --profile-menu-item-border-color: var(--color-primary);
+    --profile-menu-item-border-radius: var(--border-radius);
+    --profile-menu-item-hover-color: var(--color-primary);
+    --profile-menu-item-hover-shadow: none;
+    --profile-menu-item-hover-background: #fff;
+    --profile-menu-item-hover-border-color: var(--color-primary);
+    --profile-menu-item-hover-border-radius: var(--border-radius);
+
     // Login button
     --login-button-background: #fff;
+
+    // Vouchers
+    --vouchers-label-color: #4c91b3;
+    --vouchers-value-color: var(--tc);
+    --vouchers-organization-color: #4c91b3;
+
+    // Products
+    --products-title-color: var(--color-primary);
+    --products-title-hover-color: #626161;
+    --products-text-color: var(--tc);
+
+    // Faq
+    --faq-width: 820px;
+    --faq-align: center;
+    --faq-header-color: #00122a;
+    --faq-header-color-hover: #0c6dcb;
+
+    // Section order
+    --order-page-voucher-map: 1;
+    --order-page-voucher-products: 2;
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-winterswijk.scss b/react/assets/forus-webshop/scss/style-webshop-winterswijk.scss
deleted file mode 100644
index 6efba5589..000000000
--- a/react/assets/forus-webshop/scss/style-webshop-winterswijk.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-// SHAME
-@import "winterswijk/includes/shame";
-
-// COMPONENTS
-@import "winterswijk/components/buttons";
-
-// SECTIONS
-@import "winterswijk/sections/faq";
-@import "winterswijk/sections/steps";
-@import "winterswijk/sections/vouchers";
-
-// BLOCKS
-@import "winterswijk/sections/blocks/map";
-@import "winterswijk/sections/blocks/products";
-@import "winterswijk/sections/blocks/profile";
-@import "winterswijk/sections/blocks/shops_map";
-@import "winterswijk/sections/blocks/transactions";
-@import "winterswijk/sections/blocks/voucher";
-@import "winterswijk/sections/blocks/vouchers";
-
-.page {
-    display: flex;
-    flex-direction: column;
-
-    &.page-voucher {
-        & > .section.section-products {
-            order: 2;
-        }
-
-        & > .block.block-map_card {
-            order: 1;
-        }
-    }
-}
diff --git a/react/assets/forus-webshop/scss/vergoedingen/includes/fonts.scss b/react/assets/forus-webshop/scss/vergoedingen/includes/fonts.scss
deleted file mode 100644
index 5c2418879..000000000
--- a/react/assets/forus-webshop/scss/vergoedingen/includes/fonts.scss
+++ /dev/null
@@ -1,88 +0,0 @@
-@font-face {
-    font-family: 'Grandis Extended';
-    src: url('../fonts/GrandisExtended-LightItalic.eot');
-    src: local('Grandis Extended Light Italic'), local('GrandisExtended-LightItalic'),
-        url('../fonts/GrandisExtended-LightItalic.woff2') format('woff2'),
-        url('../fonts/GrandisExtended-LightItalic.woff') format('woff');
-    font-weight: 300;
-    font-style: italic;
-}
-
-
-@font-face {
-    font-family: 'Grandis Extended';
-    src: url('../fonts/GrandisExtended-Light.eot');
-    src: local('Grandis Extended Light'), local('GrandisExtended-Light'),
-        url('../fonts/GrandisExtended-Light.woff2') format('woff2'),
-        url('../fonts/GrandisExtended-Light.woff') format('woff');
-    font-weight: 300;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Grandis Extended';
-    src: url('../fonts/GrandisExtended-Medium.eot');
-    src: local('Grandis Extended Medium'), local('GrandisExtended-Medium'),
-        url('../fonts/GrandisExtended-Medium.woff2') format('woff2'),
-        url('../fonts/GrandisExtended-Medium.woff') format('woff');
-    font-weight: 500;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Grandis Extended';
-    src: url('../fonts/GrandisExtended-MediumItalic.eot');
-    src: local('Grandis Extended Medium Italic'), local('GrandisExtended-MediumItalic'),
-        url('../fonts/GrandisExtended-MediumItalic.woff2') format('woff2'),
-        url('../fonts/GrandisExtended-MediumItalic.woff') format('woff');
-    font-weight: 500;
-    font-style: italic;
-}
-
-@font-face {
-    font-family: 'Grandis Extended';
-    src: url('../fonts/GrandisExtended-Regular.eot');
-    src: local('Grandis Extended Regular'), local('GrandisExtended-Regular'),
-        url('../fonts/GrandisExtended-Regular.woff2') format('woff2'),
-        url('../fonts/GrandisExtended-Regular.woff') format('woff');
-    font-weight: 400;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'Grandis Extended';
-    src: url('../fonts/GrandisExtended-RegularItalic.eot');
-    src: local('Grandis Extended Regular Italic'), local('GrandisExtended-RegularItalic'),
-        url('../fonts/GrandisExtended-RegularItalic.woff2') format('woff2'),
-        url('../fonts/GrandisExtended-RegularItalic.woff') format('woff');
-    font-weight: 400;
-    font-style: italic;
-}
-
-@font-face {
-    font-family: 'Grandis Extended';
-    src: url('../fonts/GrandisExtended-BoldItalic.eot');
-    src: local('Grandis Extended Bold Italic'), local('GrandisExtended-BoldItalic'),
-        url('../fonts/GrandisExtended-BoldItalic.woff2') format('woff2'),
-        url('../fonts/GrandisExtended-BoldItalic.woff') format('woff');
-    font-weight: 600;
-    font-style: italic;
-}
-
-@font-face {
-    font-family: 'Grandis Extended';
-    src: url('../fonts/GrandisExtended-Bold.eot');
-    src: local('Grandis Extended Bold'), local('GrandisExtended-Bold'),
-        url('../fonts/GrandisExtended-Bold.woff2') format('woff2'),
-        url('../fonts/GrandisExtended-Bold.woff') format('woff');
-    font-weight: 600;
-    font-style: normal;
-}
-
-@font-face {
-    font-family: 'OrandaBT-Bold'; 
-    src: url("../fonts/Oranda-BT-Bold.woff2") format("woff2"),
-        url("../fonts/Oranda-BT-Bold.woff") format("woff"),
-        url("../fonts/Oranda-BT-Bold.ttf") format("truetype");
-    font-weight: 600;
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/vergoedingen/includes/shame.scss b/react/assets/forus-webshop/scss/vergoedingen/includes/shame.scss
deleted file mode 100644
index 31e7eadf4..000000000
--- a/react/assets/forus-webshop/scss/vergoedingen/includes/shame.scss
+++ /dev/null
@@ -1,149 +0,0 @@
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    font-family: 'Oranda', sans-serif !important;
-}
-
-.block {
-    &.block-profile {
-        .profile-aside {
-            .profile-menu {
-                .profile-menu-item {
-                    box-shadow: none;
-                    border: solid 1px #e4e4e4;
-                }
-            }
-        }
-    }
-
-    &.block-pane {
-        box-shadow: none;
-        border: 1px solid #e4e4e4;
-    }
-
-    &.block-markdown {
-        color: #212121;
-
-        a:not(.button) {
-            color: #950022;
-
-            &:hover {
-                text-decoration: none;
-            }
-        }
-    }
-
-    &.block-voucher {
-        .base-card {
-            box-shadow: none;
-            border: 1px solid #e4e4e4;
-
-            &.base-card-voucher {
-                box-shadow: none;
-                border: 1px solid #e4e4e4;
-            }
-        }
-    }
-
-    &.block-map_card {
-        box-shadow: none;
-        border: 1px solid #e4e4e4;
-    }
-
-    @media screen and (min-width: 1000px) {
-        &.block-products,
-        &.block-subsidies {
-            max-width: 1280px;
-            margin: 0 auto 30px;
-        }
-    }
-}
-
-.section {
-    .section-title {
-        text-align: left;
-    }
-
-    &.section-faq {
-        .faq {
-            width: auto;
-            margin: 0;
-        }
-    }
-
-    &.section-footer {
-        margin-top: 0;
-        padding-top: 30px;
-        color: #fff;
-
-        .block.block-markdown {
-            color: #fff;
-
-            h1,
-            h2,
-            h3,
-            h4,
-            h5,
-            h6 {
-                font: 400 22px/32px 'Oranda';
-            }
-
-            a:not(.button) {
-                color: #fff;
-            }
-        }
-    }
-
-    @media screen and (min-width: 1000px) {
-        &.section-products {
-            width: 100vw;
-            background: #f5f5f5;
-            left: calc(-50vw + 50%);
-            padding: 30px 0 30px 0;
-            margin: 0;
-
-            .section-title {
-                margin-top: 0;
-            }
-        }
-    }
-}
-
-.block {
-    &.block-footer {
-        .footer-label {
-            color: #fff;
-        }
-
-        .footer-schedule {
-            .schedule-label {
-                color: #fff;
-            }
-
-            .schedule-value {
-                color: #fff;
-            }
-        }
-    }
-
-    &.block-copyrights {
-        border: none;
-        background-color: #212121;
-        color: #fff;
-        font-size: 1rem;
-        padding: 25px 0;
-
-        .copyrights {
-            color: #fff;
-        }
-
-        .links {
-            a {
-                color: #fff;
-            }
-        }
-    }
-}
diff --git a/react/assets/forus-webshop/scss/vergoedingen/sections/blocks/block-cms-funds.scss b/react/assets/forus-webshop/scss/vergoedingen/sections/blocks/block-cms-funds.scss
deleted file mode 100644
index 527ab20c0..000000000
--- a/react/assets/forus-webshop/scss/vergoedingen/sections/blocks/block-cms-funds.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.block.block-cms-funds {
-    margin-top: 60px;
-
-    .fund-item {
-        .fund-information {
-            .fund-label {
-                .label {
-                    background-color: #176B55;
-                    font-size: 12px;
-                    line-height: 22px;
-                }
-            }
-
-            .fund-title {
-                font: 400 32px/48px 'Oranda', sans-serif;
-                color: #950022;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/vergoedingen/sections/blocks/block-mobile-menu.scss b/react/assets/forus-webshop/scss/vergoedingen/sections/blocks/block-mobile-menu.scss
deleted file mode 100644
index 8e306eb22..000000000
--- a/react/assets/forus-webshop/scss/vergoedingen/sections/blocks/block-mobile-menu.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.block.block-mobile-menu {
-    --tc-start-btn: #fff;
-    --btn-start-bg: var(--color-primary);
-    --btn-start-btn: var(--color-primary);
-    --btn-start-border: var(--color-primary);
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/vergoedingen/sections/blocks/block-navbar-search-results.scss b/react/assets/forus-webshop/scss/vergoedingen/sections/blocks/block-navbar-search-results.scss
deleted file mode 100644
index 976f0e95f..000000000
--- a/react/assets/forus-webshop/scss/vergoedingen/sections/blocks/block-navbar-search-results.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.block.block-navbar-search-results {
-    .search-form {
-        .search-result {
-            .search-result-sidebar {
-                .search-result-sidebar-item {
-                    &.active {
-                        background-color: var(--color-default);
-                        color: var(--tc-start-btn);
-                    }
-                }
-            }
-            
-            .search-result-content {
-                .search-result-actions {
-                    .button {
-                        background-color: var(--color-default);
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/vergoedingen/sections/blocks/block-organization-info.scss b/react/assets/forus-webshop/scss/vergoedingen/sections/blocks/block-organization-info.scss
deleted file mode 100644
index 9dbee4721..000000000
--- a/react/assets/forus-webshop/scss/vergoedingen/sections/blocks/block-organization-info.scss
+++ /dev/null
@@ -1,43 +0,0 @@
-.block.block-organization-info {
-    margin: 60px 0;
-    border-bottom: 1px solid #E5E5E5;
-
-    .info-block-panel {
-        a {
-            font: 600 18px/18px var(--base-font);
-            color: #950022;
-
-            &:hover {
-                text-decoration: none;
-            }
-        }
-
-        .block-title {
-            font: 400 32px/48px 'Oranda';
-        }
-
-        .block-description {
-            font-size: 16px;
-        }
-
-        .block-list {
-            li {
-                margin-bottom: 16px;
-
-                a {
-                    font-size: 18px;
-                    color: #176B55;
-
-                    &:hover {
-                        text-decoration: underline;
-                        color: #17564a;
-                    }
-                }
-                
-                &::marker {
-                    color: #E5E5E5;
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/vergoedingen/sections/blocks/block-sign_up.scss b/react/assets/forus-webshop/scss/vergoedingen/sections/blocks/block-sign_up.scss
deleted file mode 100644
index 10e675451..000000000
--- a/react/assets/forus-webshop/scss/vergoedingen/sections/blocks/block-sign_up.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.block.block-sign_up {
-    .sign_up-restore {
-        padding: 20px 10px;
-        font: 400 12px/20px var(--base-font);
-    }
-
-    .sign_up-restore-chevron {
-        color: #dbdcdb;
-        font-size: 18px;
-    }
-
-    @media (max-width: 991px) {
-        .sign_up-restore {
-            font: 400 12px/20px var(--base-font);
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/waalwijk/includes/shame.scss b/react/assets/forus-webshop/scss/waalwijk/includes/shame.scss
deleted file mode 100644
index 7f6e5dc90..000000000
--- a/react/assets/forus-webshop/scss/waalwijk/includes/shame.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.block {
-    &.block-copyrights{
-        .links{
-            a {
-                color: #ffffff;
-            }
-        } 
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/waalwijk/sections/blocks/block-lang-control.scss b/react/assets/forus-webshop/scss/waalwijk/sections/blocks/block-lang-control.scss
deleted file mode 100644
index fa4d064f4..000000000
--- a/react/assets/forus-webshop/scss/waalwijk/sections/blocks/block-lang-control.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.block.block-lang-control {
-    .lang-control-input {
-        .lang-control-search {
-            color: #ffffff;
-        }
-    }
-}
diff --git a/react/assets/forus-webshop/scss/wadenheuvel/includes/shame.scss b/react/assets/forus-webshop/scss/wadenheuvel/includes/shame.scss
deleted file mode 100644
index 71fa22ea8..000000000
--- a/react/assets/forus-webshop/scss/wadenheuvel/includes/shame.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.block.block-footer .footer-nav .footer-nav-item a {
-    color: #353535;
-}
-
-.block {
-    &.block-copyrights{
-        .links{
-            a {
-                color: #353535;
-            }
-        } 
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/webshop.scss b/react/assets/forus-webshop/scss/webshop.scss
index 7047b0870..6ce00fee8 100644
--- a/react/assets/forus-webshop/scss/webshop.scss
+++ b/react/assets/forus-webshop/scss/webshop.scss
@@ -1,149 +1,154 @@
-@import '_common/includes/resetter';
-@import '_common/includes/helpers';
-@import '_common/includes/placeholders';
-@import '_common/includes/third-party';
+@import 'includes/includes/resetter';
+@import 'includes/includes/helpers';
+@import 'includes/includes/placeholders';
+@import 'includes/includes/third-party';
 
 // COMMON
-@import '_common/includes/common';
+@import 'includes/includes/common';
 
 // SHAME
-@import '_common/includes/shame';
+@import 'includes/includes/shame';
 
 // LAYOUTS
-@import '_common/layout/footer';
-@import '_common/layout/grid';
-@import '_common/layout/header';
+@import 'includes/layout/footer';
+@import 'includes/layout/grid';
+@import 'includes/layout/header';
 
 // COMPONENTS
-@import '_common/components/breadcrumbs';
-@import '_common/components/buttons';
-@import '_common/components/button-groups';
-@import '_common/components/flex-grid';
-@import '_common/components/rate';
-@import '_common/components/carrousel';
-@import '_common/components/dropdown';
-@import '_common/components/form';
-@import '_common/components/ui-controls';
-@import '_common/components/label';
-@import '_common/components/map-card';
-@import '_common/components/modals';
-@import '_common/components/tooltip';
-@import '_common/components/triangle';
-@import '_common/components/printables';
-@import '_common/components/card';
-@import '_common/components/skiplinks';
-@import '_common/components/table';
-@import '_common/components/table-pagination';
-@import '_common/components/frame-director';
+@import 'includes/components/breadcrumbs';
+@import 'includes/components/buttons';
+@import 'includes/components/button-groups';
+@import 'includes/components/flex-grid';
+@import 'includes/components/rate';
+@import 'includes/components/carrousel';
+@import 'includes/components/dropdown';
+@import 'includes/components/form';
+@import 'includes/components/ui-controls';
+@import 'includes/components/label';
+@import 'includes/components/map-card';
+@import 'includes/components/modals';
+@import 'includes/components/tooltip';
+@import 'includes/components/triangle';
+@import 'includes/components/printables';
+@import 'includes/components/card';
+@import 'includes/components/table';
+@import 'includes/components/table-pagination';
+@import 'includes/components/frame-director';
 
 // SECTIONS
-@import '_common/sections/faq';
-@import '_common/sections/flow';
-@import '_common/sections/map';
-@import '_common/sections/products';
-@import '_common/sections/steps';
-@import '_common/sections/vouchers';
+@import 'includes/sections/_section';
+@import 'includes/sections/section-faq';
+@import 'includes/sections/section-cms';
+@import 'includes/sections/section-map';
+@import 'includes/sections/section-footer';
+@import 'includes/sections/section-profile';
+@import 'includes/sections/section-products';
+@import 'includes/sections/section-voucher-details';
 
 // BLOCKS
-@import '_common/sections/blocks/block-fund';
-@import '_common/sections/blocks/cards';
-@import '_common/sections/blocks/fund_criteria';
-@import '_common/sections/blocks/map';
-@import '_common/sections/blocks/phone-number';
-@import '_common/sections/blocks/product';
-@import '_common/sections/blocks/record_categories';
-@import '_common/sections/blocks/records_create';
-@import '_common/sections/blocks/records';
-@import '_common/sections/blocks/shops_map';
-@import '_common/sections/blocks/transactions';
-@import '_common/sections/blocks/validations';
-@import '_common/sections/blocks/validators';
-@import '_common/sections/blocks/voucher-product';
-@import '_common/sections/blocks/voucher';
-@import '_common/sections/blocks/vouchers';
-@import '_common/sections/blocks/fund-add-records';
-@import '_common/sections/blocks/block-profile';
-@import '_common/sections/blocks/block-preferences';
-@import '_common/sections/blocks/block-file-uploader';
-@import '_common/sections/blocks/block-auth-widget';
-@import '_common/sections/blocks/block-push-notifications';
-@import '_common/sections/blocks/block-page-loading-bar';
-@import '_common/sections/blocks/block-user-emails';
-@import '_common/sections/blocks/block-sitemap';
-@import '_common/sections/blocks/block-show-more';
-@import '_common/sections/blocks/block-warning';
-@import '_common/sections/blocks/block-qr-code';
+@import 'includes/blocks/_block';
+@import 'includes/blocks/block-faq';
+@import 'includes/blocks/block-skip-links';
+@import 'includes/blocks/block-fund';
+@import 'includes/blocks/cards';
+@import 'includes/blocks/fund_criteria';
+@import 'includes/blocks/map';
+@import 'includes/blocks/phone-number';
+@import 'includes/blocks/product';
+@import 'includes/blocks/record_categories';
+@import 'includes/blocks/records';
+@import 'includes/blocks/transactions';
+@import 'includes/blocks/validations';
+@import 'includes/blocks/validators';
+@import 'includes/blocks/voucher-product';
+@import 'includes/blocks/voucher';
+@import 'includes/blocks/vouchers';
+@import 'includes/blocks/fund-add-records';
+@import 'includes/blocks/block-profile';
+@import 'includes/blocks/block-preferences';
+@import 'includes/blocks/block-file-uploader';
+@import 'includes/blocks/block-auth-widget';
+@import 'includes/blocks/block-push-notifications';
+@import 'includes/blocks/block-page-loading-bar';
+@import 'includes/blocks/block-user-emails';
+@import 'includes/blocks/block-sitemap';
+@import 'includes/blocks/block-show-more';
+@import 'includes/blocks/block-warning';
+@import 'includes/blocks/block-qr-code';
 
-@import '_common/sections/blocks/block-markdown';
-@import '_common/sections/blocks/block-showcase';
-@import '_common/sections/blocks/block-label-tabs';
-@import '_common/sections/blocks/block-organizations';
-@import '_common/sections/blocks/block-offices';
-@import '_common/sections/blocks/block-office';
-@import '_common/sections/blocks/block-provider';
-@import '_common/sections/blocks/block-pane';
-@import '_common/sections/blocks/block-data-list';
-@import '_common/sections/blocks/block-schedule-list';
-@import '_common/sections/blocks/block-accessibility';
-@import '_common/sections/blocks/block-mobile-menu';
-@import '_common/sections/blocks/block-funds-list';
+@import 'includes/blocks/block-markdown';
+@import 'includes/blocks/block-showcase';
+@import 'includes/blocks/block-label-tabs';
+@import 'includes/blocks/block-organizations';
+@import 'includes/blocks/block-offices';
+@import 'includes/blocks/block-office';
+@import 'includes/blocks/block-provider';
+@import 'includes/blocks/block-pane';
+@import 'includes/blocks/block-data-list';
+@import 'includes/blocks/block-schedule-list';
+@import 'includes/blocks/block-accessibility';
+@import 'includes/blocks/block-mobile-menu';
+@import 'includes/blocks/block-funds-list';
 
-@import '_common/sections/blocks/block-map-office-card';
-@import '_common/sections/blocks/block-sessions';
-@import '_common/sections/blocks/block-sign_up';;
-@import '_common/sections/blocks/block-sign_up-help';
-@import '_common/sections/blocks/block-sign_up-provider';
-@import '_common/sections/blocks/block-notifications-table';
+@import 'includes/blocks/block-map-office-card';
+@import 'includes/blocks/block-sessions';
+@import 'includes/blocks/block-sign_up';
+@import 'includes/blocks/block-sign_up-help';
+@import 'includes/blocks/block-sign_up-provider';
+@import 'includes/blocks/block-notifications-table';
 
-@import '_common/sections/blocks/block-action-card';
-@import '_common/sections/blocks/block-voucher-records';
-@import '_common/sections/blocks/block-error-page';
-@import '_common/sections/blocks/block-about-me_app';
-@import '_common/sections/blocks/block-app_links';
-@import '_common/sections/blocks/block-navbar-mobile';
-@import '_common/sections/blocks/block-navbar-desktop';
-@import '_common/sections/blocks/block-navbar-search';
-@import '_common/sections/blocks/block-search-results';
+@import 'includes/blocks/block-action-card';
+@import 'includes/blocks/block-voucher-records';
+@import 'includes/blocks/block-error-page';
+@import 'includes/blocks/block-about-me_app';
+@import 'includes/blocks/block-app_links';
+@import 'includes/blocks/block-navbar-mobile';
+@import 'includes/blocks/block-navbar-desktop';
+@import 'includes/blocks/block-navbar-search';
+@import 'includes/blocks/block-search-results';
 
-@import '_common/sections/blocks/block-reimbursements';
-@import '_common/sections/blocks/block-reimbursement';
-@import '_common/sections/blocks/block-reservations';
-@import '_common/sections/blocks/block-reservation';
-@import '_common/sections/blocks/block-map_card';
-@import '_common/sections/blocks/block-cms-funds';
-@import '_common/sections/blocks/block-announcement';
-@import '_common/sections/blocks/block-empty';
-@import '_common/sections/blocks/block-bookmark-toggle';
-@import '_common/sections/blocks/block-organization-info';
-@import '_common/sections/blocks/block-cms';
-@import '_common/sections/blocks/block-auth-2fa';
-@import '_common/sections/blocks/block-2fa-restriction';
-@import '_common/sections/blocks/block-app_download';
-@import '_common/sections/blocks/block-info-box';
-@import '_common/sections/blocks/block-pincode';
-@import '_common/sections/blocks/block-fund-request';
-@import '_common/sections/blocks/block-fund-requests';
-@import '_common/sections/blocks/block-products';
-@import '_common/sections/blocks/block-products-list';
-@import '_common/sections/blocks/block-pre-check-banner';
-@import '_common/sections/blocks/block-fund-pre-check';
-@import '_common/sections/blocks/block-fund-pre-check-result';
-@import '_common/sections/blocks/block-key-value-list';
-@import '_common/sections/blocks/block-card-table';
-@import '_common/sections/blocks/block-loader';
-@import '_common/sections/blocks/block-exception';
-@import '_common/sections/blocks/block-payouts';
-@import '_common/sections/blocks/block-cookie-banner';
-@import '_common/sections/blocks/block-lang-control';
-@import '_common/sections/blocks/block-reservation-address';
-@import '_common/sections/blocks/block-banner';
+@import 'includes/blocks/block-reimbursements';
+@import 'includes/blocks/block-reimbursement';
+@import 'includes/blocks/block-reservations';
+@import 'includes/blocks/block-reservation';
+@import 'includes/blocks/block-map_card';
+@import 'includes/blocks/block-cms-funds';
+@import 'includes/blocks/block-announcement';
+@import 'includes/blocks/block-empty';
+@import 'includes/blocks/block-bookmark-toggle';
+@import 'includes/blocks/block-organization-info';
+@import 'includes/blocks/block-cms';
+@import 'includes/blocks/block-auth-2fa';
+@import 'includes/blocks/block-2fa-restriction';
+@import 'includes/blocks/block-app_download';
+@import 'includes/blocks/block-info-box';
+@import 'includes/blocks/block-pincode';
+@import 'includes/blocks/block-fund-request';
+@import 'includes/blocks/block-fund-requests';
+@import 'includes/blocks/block-products';
+@import 'includes/blocks/block-products-list';
+@import 'includes/blocks/block-pre-check-banner';
+@import 'includes/blocks/block-fund-pre-check';
+@import 'includes/blocks/block-fund-pre-check-result';
+@import 'includes/blocks/block-key-value-list';
+@import 'includes/blocks/block-card-table';
+@import 'includes/blocks/block-loader';
+@import 'includes/blocks/block-exception';
+@import 'includes/blocks/block-payouts';
+@import 'includes/blocks/block-cookie-banner';
+@import 'includes/blocks/block-lang-control';
+@import 'includes/blocks/block-reservation-address';
+@import 'includes/blocks/block-banner';
 
-@import '_common/modals/modal-file-preview';
-@import '_common/modals/modal-photo-cropper';
-@import '_common/modals/modal-physical-cards';
-@import '_common/modals/modal-product-reserve';
-@import '_common/modals/modal-2fa-setup';
-@import '_common/modals/modal-pin-code';
-@import '_common/modals/modal-notification';
-@import '_common/modals/modal-open-in-me';
-@import '_common/modals/modal-fund-help';
\ No newline at end of file
+@import 'includes/modals/modal-file-preview';
+@import 'includes/modals/modal-photo-cropper';
+@import 'includes/modals/modal-physical-cards';
+@import 'includes/modals/modal-product-reserve';
+@import 'includes/modals/modal-2fa-setup';
+@import 'includes/modals/modal-pin-code';
+@import 'includes/modals/modal-notification';
+@import 'includes/modals/modal-open-in-me';
+@import 'includes/modals/modal-fund-help';
+
+// PAGES
+@import 'includes/pages/voucher';
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/winterswijk/components/_buttons.scss b/react/assets/forus-webshop/scss/winterswijk/components/_buttons.scss
deleted file mode 100644
index 1e59c9c96..000000000
--- a/react/assets/forus-webshop/scss/winterswijk/components/_buttons.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.button {
-    font: 700 16px/1.5em var(--base-font);
-
-    &:hover {
-        box-shadow: none;
-    }
-
-    &.button-primary {
-        color: var(--tc-var);
-        background: var(--color-default);
-        text-shadow: none;
-        border: 1px solid transparent;
-        &:hover {
-            color: var(--color-default);
-            text-decoration: underline;
-            background-color: #fff;
-            box-shadow: none;
-            border: 1px solid var(--color-default);
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/winterswijk/includes/shame.scss b/react/assets/forus-webshop/scss/winterswijk/includes/shame.scss
deleted file mode 100644
index fcdad3d2f..000000000
--- a/react/assets/forus-webshop/scss/winterswijk/includes/shame.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-// these items have  section as parent class, while other implementatios have block as parent
-
-.section {
-    .section-title {
-        text-align: center;
-    }
-
-    &.section-profile {
-        .section-title {
-            text-align: left;
-            color: #fff;
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/winterswijk/sections/blocks/map.scss b/react/assets/forus-webshop/scss/winterswijk/sections/blocks/map.scss
deleted file mode 100644
index 7dd83e165..000000000
--- a/react/assets/forus-webshop/scss/winterswijk/sections/blocks/map.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.block {
-    &.block-map {
-        padding: 120px 0 240px;
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/winterswijk/sections/blocks/products.scss b/react/assets/forus-webshop/scss/winterswijk/sections/blocks/products.scss
deleted file mode 100644
index e20ea07cb..000000000
--- a/react/assets/forus-webshop/scss/winterswijk/sections/blocks/products.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.block.block-products {
-    --products-title-color: var(--color-default);
-    --products-title-hover-color: var(--color-primary);
-}
diff --git a/react/assets/forus-webshop/scss/winterswijk/sections/blocks/profile.scss b/react/assets/forus-webshop/scss/winterswijk/sections/blocks/profile.scss
deleted file mode 100644
index 0d26f7ea2..000000000
--- a/react/assets/forus-webshop/scss/winterswijk/sections/blocks/profile.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-.section {
-    &.section-profile {
-        .section-title {
-            text-align: left;
-            color: var(--tc);
-        }
-    }
-}
-
-.block {
-    &.block-profile {
-        .profile-aside {
-            .profile-card {
-                .profile-details {
-                    .profile-heading {
-                        color: var(--bc);
-                    }
-                }
-
-                .profile-actions {
-                    .profile-action {
-                        color: var(--tc);
-
-                        .mdi {
-                            color: var(--color-primary);
-                        }
-
-                        &:hover {
-                            color: var(--color-primary);
-                        }
-                    }
-                }
-            }
-
-            .profile-menu {
-                .profile-menu-item {
-                    box-shadow: none;
-                    color: var(--tc-var);
-                    background: var(--color-default);
-                    text-shadow: none;
-                    border: 1px solid transparent;
-
-                    .mdi {
-                        color: var(--tc-var);
-                    }
-
-                    &:hover {
-                        color: var(--color-default);
-                        text-decoration: underline;
-                        background-color: #fff;
-                        box-shadow: none;
-                        border: 1px solid var(--color-default);
-
-                        .mdi {
-                            color: var(--color-default);
-                        }
-                    }
-
-                    &.active {
-                        background-color: #fff;
-                        color: var(--color-default);
-                        box-shadow: none;
-                        border: 1px solid var(--color-default);
-
-                        .mdi {
-                            color: var(--color-default);
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/react/assets/forus-webshop/scss/winterswijk/sections/blocks/shops_map.scss b/react/assets/forus-webshop/scss/winterswijk/sections/blocks/shops_map.scss
deleted file mode 100644
index b795cb754..000000000
--- a/react/assets/forus-webshop/scss/winterswijk/sections/blocks/shops_map.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-.block {
-    &.block-shops_map {
-        .shop_map-header {
-            .shop_map-categories {
-                .shop_map-category-item {
-                    .shop_map-category-item-inner {
-                        background: #5ec0ed;
-                        border-radius: 8px;
-
-                        &:hover {
-                            background: #08abeb;
-                        }
-                    }
-                }
-            }
-        }
-
-        .shops {
-            .shop-item {
-                &.active {
-                    border-right-color: #5ec0ed;
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/winterswijk/sections/blocks/transactions.scss b/react/assets/forus-webshop/scss/winterswijk/sections/blocks/transactions.scss
deleted file mode 100644
index 2680f2fbc..000000000
--- a/react/assets/forus-webshop/scss/winterswijk/sections/blocks/transactions.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.block {
-    &.block-transactions {
-        .transactions-list {
-            .transactions-item {
-                .transactions-item-icon {
-                    .mdi {
-                        color: #91b845;
-                    }
-                }
-
-                &.transactions-item-out {
-                    .transactions-item-amount {
-                        .transactions-item-value {
-                            color: #4c91b3;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/winterswijk/sections/blocks/voucher.scss b/react/assets/forus-webshop/scss/winterswijk/sections/blocks/voucher.scss
deleted file mode 100644
index f6d500b0a..000000000
--- a/react/assets/forus-webshop/scss/winterswijk/sections/blocks/voucher.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.block {
-    &.block-voucher {
-        .base-card {
-            border-radius: 8px;
-            margin-bottom: 70px;
-            .card-footer {
-                background-color: #f6f8fa;
-                border-top-color: #d2e6ff;
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/winterswijk/sections/blocks/vouchers.scss b/react/assets/forus-webshop/scss/winterswijk/sections/blocks/vouchers.scss
deleted file mode 100644
index 50833b0bf..000000000
--- a/react/assets/forus-webshop/scss/winterswijk/sections/blocks/vouchers.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.block {
-    &.block-vouchers {
-        .voucher-item {
-            .voucher-details {
-                .voucher-organization {
-                    color: #4c91b3;
-                }
-                
-                .voucher-value {
-                    color: var(--tc);
-                }
-            }
-
-            .voucher-overview {
-                .voucher-overview-item {
-                    .voucher-overview-label {
-                        color: #4c91b3;
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/winterswijk/sections/faq.scss b/react/assets/forus-webshop/scss/winterswijk/sections/faq.scss
deleted file mode 100644
index 75f803eb2..000000000
--- a/react/assets/forus-webshop/scss/winterswijk/sections/faq.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.section {
-    &.section-faq {
-        .faq {
-            .faq-item {
-                &:hover:not(.active) {
-                    .faq-item-header {
-                        color: var(--color-default);
-
-                        .faq-item-chevron-up,
-                        .faq-item-chevron-down {
-                            color: var(--color-default);
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/winterswijk/sections/steps.scss b/react/assets/forus-webshop/scss/winterswijk/sections/steps.scss
deleted file mode 100644
index 88372e1f8..000000000
--- a/react/assets/forus-webshop/scss/winterswijk/sections/steps.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.section {
-    &.section-steps {
-        padding-top: 50px;
-        padding-bottom: 50px;
-        background: #fff;
-        .section-splash{
-            display:none;
-        }
-        .section-sprite{
-            display:none;
-        }
-        .steps {
-            background: none;
-            .step-item {
-                min-height: 140px;
-                margin-bottom: 30px !important;
-
-                h4 {
-                    color: var(--tc);
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/winterswijk/sections/vouchers.scss b/react/assets/forus-webshop/scss/winterswijk/sections/vouchers.scss
deleted file mode 100644
index 9a592bf4f..000000000
--- a/react/assets/forus-webshop/scss/winterswijk/sections/vouchers.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.section {
-    &.section-voucher-details,
-    &.section-product {
-        .section-title {
-            display: none;
-        }
-    }
-}
\ No newline at end of file
diff --git a/react/src/index-webshop.js b/react/src/index-webshop.js
index 2864a2479..4b0319c1f 100644
--- a/react/src/index-webshop.js
+++ b/react/src/index-webshop.js
@@ -2,7 +2,7 @@ import ReactDOM from 'react-dom/client';
 import Webshop from './webshop/Webshop';
 
 // eslint-disable-next-line no-undef, @typescript-eslint/no-require-imports
-require(`../assets/forus-webshop/scss/style-webshop-general-vars.scss`);
+/*require(`../assets/forus-webshop/scss/style-webshop-general-vars.scss`);*/
 
 // eslint-disable-next-line no-undef, @typescript-eslint/no-require-imports
 require(`../assets/forus-webshop/scss/style-webshop-${env_data.client_skin}-vars.scss`);
@@ -10,9 +10,6 @@ require(`../assets/forus-webshop/scss/style-webshop-${env_data.client_skin}-vars
 // eslint-disable-next-line no-undef, @typescript-eslint/no-require-imports
 require(`../assets/forus-webshop/scss/webshop.scss`);
 
-// eslint-disable-next-line no-undef, @typescript-eslint/no-require-imports
-require(`../assets/forus-webshop/scss/style-webshop-${env_data.client_skin}.scss`);
-
 const root = ReactDOM.createRoot(document.getElementById('root'));
 // eslint-disable-next-line no-undef
 root.render(<Webshop envData={env_data} />);
diff --git a/react/src/webshop/components/elements/block-breadcrumbs/BlockBreadcrumbs.tsx b/react/src/webshop/components/elements/block-breadcrumbs/BlockBreadcrumbs.tsx
index f4b3b95e3..5a0a2ebb1 100644
--- a/react/src/webshop/components/elements/block-breadcrumbs/BlockBreadcrumbs.tsx
+++ b/react/src/webshop/components/elements/block-breadcrumbs/BlockBreadcrumbs.tsx
@@ -2,6 +2,7 @@ import React, { Fragment, ReactNode, useMemo } from 'react';
 import StateNavLink from '../../../modules/state_router/StateNavLink';
 import classNames from 'classnames';
 import { useNavigate } from 'react-router-dom';
+import Section from '../sections/Section';
 
 export type Breadcrumb = {
     name: string;
@@ -28,40 +29,42 @@ export default function BlockBreadcrumbs({
     }, [items]);
 
     return (
-        <div className={classNames('block', 'block-breadcrumbs', 'rs_skip', className)}>
-            {list?.map((item, index) => (
-                <Fragment key={index}>
-                    {item?.state ? (
-                        <StateNavLink
-                            name={item?.state}
-                            query={item.stateQuery}
-                            params={item.stateParams}
-                            className={classNames('breadcrumb-item', item.className)}
-                            activeExact={true}>
-                            {item.name}
-                        </StateNavLink>
-                    ) : item?.back ? (
-                        <div
-                            className={classNames(
-                                'breadcrumb-item breadcrumb-item-back state-nav-link',
-                                item.className,
-                            )}
-                            onClick={() => navigate(-1)}>
-                            <em className={`mdi mdi-chevron-left`} />
-                            {item.name}
-                        </div>
-                    ) : (
-                        <div
-                            className={classNames('breadcrumb-item', 'active', item.className)}
-                            aria-current="location">
-                            {item.name}
-                        </div>
-                    )}
+        <Section type={'breadcrumbs'}>
+            <div className={classNames('block', 'block-breadcrumbs', 'rs_skip', className)}>
+                {list?.map((item, index) => (
+                    <Fragment key={index}>
+                        {item?.state ? (
+                            <StateNavLink
+                                name={item?.state}
+                                query={item.stateQuery}
+                                params={item.stateParams}
+                                className={classNames('breadcrumb-item', item.className)}
+                                activeExact={true}>
+                                {item.name}
+                            </StateNavLink>
+                        ) : item?.back ? (
+                            <div
+                                className={classNames(
+                                    'breadcrumb-item breadcrumb-item-back state-nav-link',
+                                    item.className,
+                                )}
+                                onClick={() => navigate(-1)}>
+                                <em className={`mdi mdi-chevron-left`} />
+                                {item.name}
+                            </div>
+                        ) : (
+                            <div
+                                className={classNames('breadcrumb-item', 'active', item.className)}
+                                aria-current="location">
+                                {item.name}
+                            </div>
+                        )}
 
-                    {index < list.length - 1 && !item.back && <div className="breadcrumb-item-separator">/</div>}
-                </Fragment>
-            ))}
-            {after}
-        </div>
+                        {index < list.length - 1 && !item.back && <div className="breadcrumb-item-separator">/</div>}
+                    </Fragment>
+                ))}
+                {after}
+            </div>
+        </Section>
     );
 }
diff --git a/react/src/webshop/components/elements/block-loader/BlockLoaderBreadcrumbs.tsx b/react/src/webshop/components/elements/block-loader/BlockLoaderBreadcrumbs.tsx
index 7f9051283..15b6e78d6 100644
--- a/react/src/webshop/components/elements/block-loader/BlockLoaderBreadcrumbs.tsx
+++ b/react/src/webshop/components/elements/block-loader/BlockLoaderBreadcrumbs.tsx
@@ -2,8 +2,12 @@ import React from 'react';
 
 export default function BlockLoaderBreadcrumbs() {
     return (
-        <div className={'block block-loader block-loader-breadcrumbs'}>
-            <div className="loader-content" />
-        </div>
+        <section className="section-breadcrumbs">
+            <div className="wrapper">
+                <div className={'block block-loader block-loader-breadcrumbs'}>
+                    <div className="loader-content" />
+                </div>
+            </div>
+        </section>
     );
 }
diff --git a/react/src/webshop/components/elements/block-products/BlockProducts.tsx b/react/src/webshop/components/elements/block-products/BlockProducts.tsx
index fafa54a20..6d9dae7df 100644
--- a/react/src/webshop/components/elements/block-products/BlockProducts.tsx
+++ b/react/src/webshop/components/elements/block-products/BlockProducts.tsx
@@ -6,11 +6,11 @@ import EmptyBlock from '../empty-block/EmptyBlock';
 import ProductsList from '../lists/products-list/ProductsList';
 import CmsBlocks from '../cms-blocks/CmsBlocks';
 import useAppConfigs from '../../../hooks/useAppConfigs';
+import Section from '../sections/Section';
 
 export default function BlockProducts({
     type = 'budget',
     display = 'grid',
-    large = false,
     filters = {},
     products = null,
     setProducts = null,
@@ -19,7 +19,6 @@ export default function BlockProducts({
 }: {
     type: 'budget' | 'subsidies';
     display?: 'grid' | 'list';
-    large?: boolean;
     filters?: object;
     products?: Array<Product>;
     setProducts?: (products: Array<Product>) => void;
@@ -31,30 +30,20 @@ export default function BlockProducts({
     const cmsBlock = showCustomDescription && appConfigs?.pages?.home ? appConfigs?.pages?.block_home_products : null;
 
     return (
-        <section className="section section-products" id="products">
-            {products.length != 0 && (
-                <div className={'wrapper'}>
-                    <h2 className={'section-title'}>
-                        <StateNavLink name={type == 'budget' ? 'products' : 'actions'} params={filters}>
-                            {cmsBlock?.title || translate(`block_products.header.title_${type}`)}
-                        </StateNavLink>
-                    </h2>
-                </div>
+        <Section type="products" id="products">
+            {products?.length > 0 && (
+                <h2 className={'section-title'}>
+                    <StateNavLink name={type == 'budget' ? 'products' : 'actions'} params={filters}>
+                        {cmsBlock?.title || translate(`block_products.header.title_${type}`)}
+                    </StateNavLink>
+                </h2>
             )}
 
             {cmsBlock && <CmsBlocks page={cmsBlock} />}
 
-            {products?.length > 0 && (
-                <ProductsList
-                    type={type}
-                    large={large}
-                    display={display}
-                    products={products}
-                    setProducts={setProducts}
-                />
-            )}
-
-            {products?.length == 0 && (
+            {products?.length > 0 ? (
+                <ProductsList type={type} display={display} products={products} setProducts={setProducts} />
+            ) : (
                 <EmptyBlock
                     title={translate(`block_products.labels.title`)}
                     description={translate(`block_products.labels.subtitle`)}
@@ -66,7 +55,7 @@ export default function BlockProducts({
             {showLoadMore && (
                 <div className="block block-show-more">
                     <StateNavLink
-                        className="button button-primary"
+                        className="button button-primary show-more-button"
                         name={type == 'budget' ? 'products' : 'actions'}
                         params={filters}>
                         {translate(`block_products.buttons.more`)}
@@ -74,6 +63,6 @@ export default function BlockProducts({
                     </StateNavLink>
                 </div>
             )}
-        </section>
+        </Section>
     );
 }
diff --git a/react/src/webshop/components/elements/block-showcase/BlockShowcase.tsx b/react/src/webshop/components/elements/block-showcase/BlockShowcase.tsx
index 0cfd96931..62b1a9784 100644
--- a/react/src/webshop/components/elements/block-showcase/BlockShowcase.tsx
+++ b/react/src/webshop/components/elements/block-showcase/BlockShowcase.tsx
@@ -8,16 +8,12 @@ import useReadSpeakerHref from '../../../modules/read_speaker/hooks/useReadSpeak
 export default function BlockShowcase({
     children = null,
     breadcrumbItems = null,
-    breadcrumbWrapper = false,
-    wrapper = false,
     className = null,
     loaderElement = null,
     breadcrumbLoaderElement = null,
 }: {
     children?: React.ReactElement | Array<React.ReactElement>;
     breadcrumbItems?: Array<Breadcrumb>;
-    breadcrumbWrapper?: boolean;
-    wrapper?: boolean;
     className?: string;
     loaderElement?: React.ReactElement;
     breadcrumbLoaderElement?: React.ReactElement;
@@ -46,17 +42,8 @@ export default function BlockShowcase({
     return (
         <div className={`block block-showcase ${className || ''}`}>
             <main id="main-content">
-                {wrapper ? (
-                    <div className={'wrapper'}>
-                        {breadcrumbs || breadcrumbLoaderElement || <BlockLoaderBreadcrumbs />}
-                        {children || loaderElement || <BlockLoader />}
-                    </div>
-                ) : (
-                    <Fragment>
-                        {breadcrumbWrapper ? <div className="wrapper">{breadcrumbs}</div> : breadcrumbs}
-                        {children || loaderElement || <BlockLoader />}
-                    </Fragment>
-                )}
+                {breadcrumbs || breadcrumbLoaderElement || <BlockLoaderBreadcrumbs />}
+                {children || loaderElement || <BlockLoader />}
             </main>
         </div>
     );
diff --git a/react/src/webshop/components/elements/block-showcase/BlockShowcasePage.tsx b/react/src/webshop/components/elements/block-showcase/BlockShowcasePage.tsx
index ec670b334..8568ab5ed 100644
--- a/react/src/webshop/components/elements/block-showcase/BlockShowcasePage.tsx
+++ b/react/src/webshop/components/elements/block-showcase/BlockShowcasePage.tsx
@@ -42,7 +42,7 @@ export default function BlockShowcasePage({
     }, [showMobileMenu, showModalFilters]);
 
     return (
-        <BlockShowcase className={showCaseClassName}>
+        <BlockShowcase className={showCaseClassName} breadcrumbItems={[]}>
             <div className="showcase-wrapper">
                 <div className={classNames('showcase-mobile-filters', 'rs_skip', countFiltersApplied && 'active')}>
                     <div className="mobile-filters-count">
diff --git a/react/src/webshop/components/elements/block-showcase/BlockShowcaseProfile.tsx b/react/src/webshop/components/elements/block-showcase/BlockShowcaseProfile.tsx
index 5565d685f..d372d7e84 100644
--- a/react/src/webshop/components/elements/block-showcase/BlockShowcaseProfile.tsx
+++ b/react/src/webshop/components/elements/block-showcase/BlockShowcaseProfile.tsx
@@ -6,6 +6,7 @@ import BlockLoaderHeader from '../block-loader/BlockLoaderHeader';
 import ErrorBoundaryHandler from '../../../../dashboard/components/elements/error-boundary-handler/ErrorBoundaryHandler';
 import BlockBreadcrumbs, { Breadcrumb } from '../block-breadcrumbs/BlockBreadcrumbs';
 import ReadSpeakerButton from '../../../modules/read_speaker/ReadSpeakerButton';
+import Section from '../sections/Section';
 
 export default function BlockShowcaseProfile({
     filters = null,
@@ -21,9 +22,9 @@ export default function BlockShowcaseProfile({
     breadcrumbItems?: Array<Breadcrumb>;
 }) {
     return (
-        <BlockShowcase>
-            <section className="section section-profile">
-                <div className="wrapper">
+        <BlockShowcase breadcrumbItems={[]}>
+            <Section type="profile" wrapper={false}>
+                <div className="showcase-wrapper">
                     {breadcrumbItems?.length > 0 && (
                         <BlockBreadcrumbs
                             items={breadcrumbItems}
@@ -49,7 +50,7 @@ export default function BlockShowcaseProfile({
                         </div>
                     </ErrorBoundaryHandler>
                 </div>
-            </section>
+            </Section>
         </BlockShowcase>
     );
 }
diff --git a/react/src/webshop/components/elements/cms-blocks/CmsBlocks.tsx b/react/src/webshop/components/elements/cms-blocks/CmsBlocks.tsx
index a0ebb0112..b63782246 100644
--- a/react/src/webshop/components/elements/cms-blocks/CmsBlocks.tsx
+++ b/react/src/webshop/components/elements/cms-blocks/CmsBlocks.tsx
@@ -3,80 +3,76 @@ import ImplementationPage from '../../../props/models/ImplementationPage';
 import Markdown from '../markdown/Markdown';
 import useAssetUrl from '../../../hooks/useAssetUrl';
 import classNames from 'classnames';
+import Section from '../sections/Section';
 
-export default function CmsBlocks({ page, wrapper = true }: { page: ImplementationPage; wrapper?: boolean }) {
+export default function CmsBlocks({ page }: { page: ImplementationPage }) {
     const assetUrl = useAssetUrl();
 
+    if (!page.description_html && page.blocks.length === 0) {
+        return null;
+    }
+
     return (
-        <div className={`block block-cms ${page.blocks.length > 0 ? 'block-cms-with-items' : ''}`}>
-            {(page.description_html || page.blocks.length > 0) && (
-                <div className={classNames(wrapper && 'wrapper')}>
-                    {page.description_html && (
-                        <Markdown content={page.description_html} align={page.description_alignment} />
-                    )}
+        <Section type={'cms'}>
+            <div className="block block-cms">
+                {page.description_html && (
+                    <Markdown content={page.description_html} align={page.description_alignment} />
+                )}
 
-                    <div className="section">
-                        {page.blocks.length > 0 && (
-                            <div
-                                className={`block block-cms-funds ${
-                                    page.blocks_per_row > 1 ? 'block-cms-funds-compact' : ''
-                                } ${page.blocks_per_row === 2 ? 'block-cms-funds-2-in-row' : ''}`}>
-                                {page.blocks?.map((block) => (
-                                    <div key={block.id} className="fund-item">
-                                        <div className="fund-media">
-                                            <img
-                                                src={
-                                                    block.media?.sizes?.public ||
-                                                    assetUrl('/assets/img/placeholders/product-small.png')
-                                                }
-                                                alt=""
-                                            />
-                                        </div>
-                                        <div className="fund-information">
-                                            {block.title && <h2 className="fund-title">{block.title}</h2>}
-                                            {block.label && (
-                                                <div className="fund-label">
-                                                    <span className="label label-primary">{block.label}</span>
-                                                </div>
-                                            )}
+                {page.blocks.length > 0 && (
+                    <div
+                        className={classNames(
+                            `block block-cms-funds`,
+                            page.blocks_per_row > 1 && 'block-cms-funds-compact',
+                            page.blocks_per_row === 2 && 'block-cms-funds-2-in-row',
+                        )}>
+                        {page.blocks?.map((block) => (
+                            <div key={block.id} className="fund-item">
+                                <div className="fund-media">
+                                    <img
+                                        src={
+                                            block.media?.sizes?.public ||
+                                            assetUrl('/assets/img/placeholders/product-small.png')
+                                        }
+                                        alt=""
+                                    />
+                                </div>
+                                <div className="fund-information">
+                                    {block.title && <h2 className="fund-title">{block.title}</h2>}
+                                    {block.label && <div className="fund-label label label-primary">{block.label}</div>}
 
-                                            <div className="fund-description">
-                                                <Markdown content={block.description_html} />
-                                            </div>
+                                    <div className="fund-description">
+                                        <Markdown content={block.description_html} />
+                                    </div>
 
-                                            {block.button_enabled && (
-                                                <div className="fund-button">
-                                                    <a
-                                                        className="button button-primary fund-button-button"
-                                                        target={block.button_target_blank ? '_blank' : '_self'}
-                                                        rel={block.button_target_blank ? 'noreferrer' : ''}
-                                                        href={block.button_link}>
-                                                        {block.button_text}
-                                                        <div
-                                                            className="mdi mdi-arrow-right icon-right"
-                                                            aria-hidden="true"
-                                                        />
-                                                    </a>
-                                                    {page.blocks_per_row > 1 && (
-                                                        <a
-                                                            className="button button-text button-text-primary fund-button-link"
-                                                            target={block.button_target_blank ? '_blank' : '_self'}
-                                                            rel={block.button_target_blank ? 'noreferrer' : ''}
-                                                            href={block.button_link}
-                                                            aria-label={block.button_link_label}>
-                                                            {block.button_text}
-                                                        </a>
-                                                    )}
-                                                </div>
+                                    {block.button_enabled && (
+                                        <div className="fund-button">
+                                            <a
+                                                className="button button-primary fund-button-button"
+                                                target={block.button_target_blank ? '_blank' : '_self'}
+                                                rel={block.button_target_blank ? 'noreferrer' : ''}
+                                                href={block.button_link}>
+                                                {block.button_text}
+                                                <div className="mdi mdi-arrow-right icon-right" aria-hidden="true" />
+                                            </a>
+                                            {page.blocks_per_row > 1 && (
+                                                <a
+                                                    className="button button-text button-text-primary fund-button-link"
+                                                    target={block.button_target_blank ? '_blank' : '_self'}
+                                                    rel={block.button_target_blank ? 'noreferrer' : ''}
+                                                    href={block.button_link}
+                                                    aria-label={block.button_link_label}>
+                                                    {block.button_text}
+                                                </a>
                                             )}
                                         </div>
-                                    </div>
-                                ))}
+                                    )}
+                                </div>
                             </div>
-                        )}
+                        ))}
                     </div>
-                </div>
-            )}
-        </div>
+                )}
+            </div>
+        </Section>
     );
 }
diff --git a/react/src/webshop/components/elements/lists/products-list/ProductsList.tsx b/react/src/webshop/components/elements/lists/products-list/ProductsList.tsx
index bdc1576ed..e03108b31 100644
--- a/react/src/webshop/components/elements/lists/products-list/ProductsList.tsx
+++ b/react/src/webshop/components/elements/lists/products-list/ProductsList.tsx
@@ -1,33 +1,26 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import ProductsListItem from './ProductsListItem';
 import Product from '../../../../props/models/Product';
+import classNames from 'classnames';
 
 export default function ProductsList({
     type = 'budget',
-    large = false,
     display = 'grid',
     products = [],
     setProducts = null,
 }: {
     type?: 'budget' | 'subsidies';
-    large?: boolean;
     display: 'grid' | 'list' | 'search';
     products?: Array<Product>;
     setProducts?: (products: Array<Product>) => void;
 }) {
-    const blockClass = useMemo(
-        () => ({
-            'budget.grid': `block-products${large ? ' block-products-lg' : ''}`,
-            'subsidies.grid': `block-products${large ? ' block-products-lg' : ''}`,
-
-            'budget.list': 'block-products-list',
-            'subsidies.list': 'block-products-list',
-        }),
-        [large],
-    );
-
     return (
-        <div className={`block ${blockClass[`${type}.${display}`]}`}>
+        <div
+            className={classNames(
+                'block',
+                display === 'grid' && 'block-products',
+                display === 'list' && 'block-products-list',
+            )}>
             {products?.map((product) => (
                 <ProductsListItem
                     key={product.id}
diff --git a/react/src/webshop/components/elements/lists/providers-list/templates/ProvidersListItemList.tsx b/react/src/webshop/components/elements/lists/providers-list/templates/ProvidersListItemList.tsx
index 7dce7c2a4..ea184645a 100644
--- a/react/src/webshop/components/elements/lists/providers-list/templates/ProvidersListItemList.tsx
+++ b/react/src/webshop/components/elements/lists/providers-list/templates/ProvidersListItemList.tsx
@@ -18,7 +18,7 @@ export default function ProvidersListItemList({
 
     return (
         <div className="organization-item">
-            <div className={`organization-pane ${showOffices ? 'active' : ''}`}>
+            <div className={`organization-pane`}>
                 <StateNavLink
                     name="provider"
                     params={{ id: provider.id }}
diff --git a/react/src/webshop/components/elements/sections/Section.tsx b/react/src/webshop/components/elements/sections/Section.tsx
new file mode 100644
index 000000000..0caadfabf
--- /dev/null
+++ b/react/src/webshop/components/elements/sections/Section.tsx
@@ -0,0 +1,46 @@
+import React, { ReactElement } from 'react';
+import classNames from 'classnames';
+
+export default function Section({
+    id,
+    type,
+    wrapper = true,
+    children,
+}: {
+    id?: string;
+    type:
+        | 'default'
+        | 'cms'
+        | 'faq'
+        | 'breadcrumbs'
+        | 'map'
+        | 'profile'
+        | 'voucher_details'
+        | 'products'
+        | 'product'
+        | 'copyright'
+        | 'footer';
+    wrapper?: boolean;
+    children: ReactElement | ReactElement[];
+}) {
+    return (
+        <section
+            className={classNames(
+                'section',
+                type === 'map' && 'section-map',
+                type === 'faq' && 'section-faq',
+                type === 'cms' && 'section-cms',
+                type === 'footer' && 'section-footer',
+                type === 'default' && 'section-default',
+                type === 'profile' && 'section-profile',
+                type === 'product' && 'section-product',
+                type === 'products' && 'section-products',
+                type === 'copyright' && 'section-copyright',
+                type === 'breadcrumbs' && 'section-breadcrumbs',
+                type === 'voucher_details' && 'section-voucher-details',
+            )}
+            id={id}>
+            {wrapper ? <div className="wrapper">{children}</div> : children}
+        </section>
+    );
+}
diff --git a/react/src/webshop/components/elements/top-navbar/TopNavbarSearch.tsx b/react/src/webshop/components/elements/top-navbar/TopNavbarSearch.tsx
index 7c70ed667..236bcb899 100644
--- a/react/src/webshop/components/elements/top-navbar/TopNavbarSearch.tsx
+++ b/react/src/webshop/components/elements/top-navbar/TopNavbarSearch.tsx
@@ -218,9 +218,11 @@ export default function TopNavbarSearch({ autoFocus = false }: { autoFocus?: boo
                                 {groupKeyList.map((itemGroupKey) => (
                                     <h2
                                         key={itemGroupKey}
-                                        className={`search-result-sidebar-item state-nav-link ${
-                                            groupKey == itemGroupKey ? 'active' : ''
-                                        }`}
+                                        className={classNames(
+                                            'search-result-sidebar-item',
+                                            'state-nav-link',
+                                            groupKey == itemGroupKey && 'active',
+                                        )}
                                         aria-selected={groupKey === itemGroupKey}
                                         aria-expanded={groupKey === itemGroupKey}
                                         role={'button'}
diff --git a/react/src/webshop/components/pages/auth/Auth2FA.tsx b/react/src/webshop/components/pages/auth/Auth2FA.tsx
index 389401d81..8f1fb2278 100644
--- a/react/src/webshop/components/pages/auth/Auth2FA.tsx
+++ b/react/src/webshop/components/pages/auth/Auth2FA.tsx
@@ -85,7 +85,7 @@ export default function Auth2FA() {
     }
 
     return (
-        <BlockShowcase wrapper={true} breadcrumbItems={[]} loaderElement={<BlockLoader type={'full'} />}>
+        <BlockShowcase breadcrumbItems={[]} loaderElement={<BlockLoader type={'full'} />}>
             <div className="block block-sign_up">
                 <div className="block-wrapper">
                     {step == 'setup' && !paneHidden && (
diff --git a/react/src/webshop/components/pages/auth/Start.tsx b/react/src/webshop/components/pages/auth/Start.tsx
index 1bac479fa..8d045c7ca 100644
--- a/react/src/webshop/components/pages/auth/Start.tsx
+++ b/react/src/webshop/components/pages/auth/Start.tsx
@@ -431,7 +431,7 @@ export default function Start() {
     );
 
     return (
-        <BlockShowcase wrapper={true} breadcrumbItems={[]} loaderElement={<BlockLoader type={'full'} />}>
+        <BlockShowcase breadcrumbItems={[]} loaderElement={<BlockLoader type={'full'} />}>
             {!signedIn && (
                 <header className="section section-sign-up-choose">
                     <div className="wrapper">
diff --git a/react/src/webshop/components/pages/cms-pages/Accessibility.tsx b/react/src/webshop/components/pages/cms-pages/Accessibility.tsx
index 5e6fef628..bad15bd4a 100644
--- a/react/src/webshop/components/pages/cms-pages/Accessibility.tsx
+++ b/react/src/webshop/components/pages/cms-pages/Accessibility.tsx
@@ -25,7 +25,6 @@ export default function Accessibility() {
 
     return (
         <BlockShowcase
-            wrapper={true}
             breadcrumbItems={[
                 { name: translate('accessibility.breadcrumbs.home'), state: 'home' },
                 { name: translate('accessibility.breadcrumbs.accessibility') },
@@ -36,7 +35,7 @@ export default function Accessibility() {
                         className={`flex flex-vertical ${
                             page.description_position == 'after' ? 'flex-vertical-reverse' : ''
                         }`}>
-                        {page && <CmsBlocks page={page} wrapper={false} />}
+                        {page && <CmsBlocks page={page} />}
 
                         {(!page.description_html || page.description_position !== 'replace') && (
                             <Fragment>
diff --git a/react/src/webshop/components/pages/cms-pages/Explanation.tsx b/react/src/webshop/components/pages/cms-pages/Explanation.tsx
index c4511b2eb..987df42d3 100644
--- a/react/src/webshop/components/pages/cms-pages/Explanation.tsx
+++ b/react/src/webshop/components/pages/cms-pages/Explanation.tsx
@@ -1,170 +1,35 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { Fragment } from 'react';
 import CmsBlocks from '../../elements/cms-blocks/CmsBlocks';
 import useTranslate from '../../../../dashboard/hooks/useTranslate';
-import Markdown from '../../elements/markdown/Markdown';
-import { useFundService } from '../../../services/FundService';
-import Fund from '../../../props/models/Fund';
-import useEnvData from '../../../hooks/useEnvData';
-import { uniqueId } from 'lodash';
 import useCmsPage from './hooks/useCmsPage';
 import BlockShowcase from '../../elements/block-showcase/BlockShowcase';
+import ExplanationFaq from './elements/ExplanationFaq';
 
 export default function Explanation() {
-    const envData = useEnvData();
     const translate = useTranslate();
-    const fundService = useFundService();
 
     const page = useCmsPage('explanation');
-    const [visibleFaq, setVisibleFaq] = useState({});
-
-    const [defaultFaq, setDefaultFaq] = useState<Array<{ id?: string; title?: string; description?: string }>>([]);
-
-    const [defaultQuestionKeys] = useState([
-        'one',
-        'two',
-        'three',
-        'four',
-        'five',
-        'six',
-        'seven',
-        'eight',
-        'nine',
-        'ten',
-        'eleven',
-        'twelve',
-        'thirteen',
-        'fourteen',
-        'fifteen',
-    ]);
-
-    const transformDefaultQuestion = useCallback(
-        (index, fund, start_date) => {
-            const key = defaultQuestionKeys[index];
-            const titleKey = `home.faq.${envData.client_key}.faq_${key}`;
-            const contentKey = `home.faq.${envData.client_key}.${key}`;
-
-            return {
-                id: uniqueId('faq_default_'),
-                title: translate(titleKey, { fund }, `home.faq.faq_${key}`),
-                description: translate(contentKey, { fund, start_date }, `home.faq.${key}`),
-            };
-        },
-        [defaultQuestionKeys, envData.client_key, translate],
-    );
-
-    const makeDefaultFAQ = useCallback(
-        (funds: Array<Fund>) => {
-            const list = [...Array(14).keys()].map((i) => {
-                return transformDefaultQuestion(i, funds[0].name, funds[0].start_date_locale);
-            });
-
-            if (['winterswijk', 'oostgelre', 'berkelland'].includes(envData.client_key)) {
-                list.push(transformDefaultQuestion(14, funds[0].name, funds[0].start_date_locale));
-            }
-
-            setDefaultFaq(list);
-        },
-        [envData?.client_key, transformDefaultQuestion],
-    );
-
-    useEffect(() => {
-        fundService.list().then((res) => makeDefaultFAQ(res.data.data));
-    }, [fundService, makeDefaultFAQ]);
 
     return (
         <BlockShowcase
-            wrapper={true}
             breadcrumbItems={[
                 { name: translate('explanation.breadcrumbs.home'), state: 'home' },
                 { name: translate('explanation.breadcrumbs.explanation') },
             ]}>
             {page && (
-                <div className="section">
-                    <div
-                        className={`flex flex-vertical ${
-                            page.description_position == 'after' ? 'flex-vertical-reverse' : ''
-                        }`}>
-                        {page && <CmsBlocks page={page} wrapper={false} />}
-
-                        {(!page.description_html || page.description_position !== 'replace' || page.faq.length > 0) && (
-                            <section className="section section-faq">
-                                <div className="section-splash" />
-                                <h1 className="section-title">{translate('home.faq.title', { client_key: '' })}</h1>
-                                {page.faq?.length > 0 ? (
-                                    <div className="faq">
-                                        {page.faq.map((faq) => (
-                                            <div
-                                                key={faq.id}
-                                                className={`faq-item ${visibleFaq?.[faq.id] ? 'active' : ''}`}
-                                                onClick={() => {
-                                                    setVisibleFaq({
-                                                        ...visibleFaq,
-                                                        [faq.id]: !visibleFaq?.[faq.id],
-                                                    });
-                                                }}>
-                                                <div className="faq-item-header">
-                                                    <span aria-expanded={visibleFaq?.[faq.id]} role="button">
-                                                        {faq.title}
-                                                    </span>
-                                                    <div
-                                                        className="faq-item-chevron-down mdi mdi-chevron-down"
-                                                        aria-hidden="true"
-                                                    />
-                                                    <div
-                                                        className="faq-item-chevron-up mdi mdi-chevron-up"
-                                                        aria-hidden="true"
-                                                    />
-                                                </div>
-                                                <div className="faq-item-content">
-                                                    <Markdown
-                                                        content={faq.description_html}
-                                                        aria-labelledby={faq.title}
-                                                        role="region"
-                                                    />
-                                                </div>
-                                            </div>
-                                        ))}
-                                    </div>
-                                ) : (
-                                    <div className="faq">
-                                        {defaultFaq.map((faq) => (
-                                            <div
-                                                key={faq.id}
-                                                className={`faq-item ${visibleFaq?.[faq.id] ? 'active' : ''}`}
-                                                onClick={() => {
-                                                    setVisibleFaq({
-                                                        ...visibleFaq,
-                                                        [faq.id]: !visibleFaq?.[faq.id],
-                                                    });
-                                                }}>
-                                                <div className="faq-item-header">
-                                                    <span aria-expanded={visibleFaq?.[faq.id]} role="button">
-                                                        {faq.title}
-                                                    </span>
-                                                    <div
-                                                        className="faq-item-chevron-down mdi mdi-chevron-down"
-                                                        aria-hidden="true"
-                                                    />
-                                                    <div
-                                                        className="faq-item-chevron-up mdi mdi-chevron-up"
-                                                        aria-hidden="true"
-                                                    />
-                                                </div>
-                                                <div className="faq-item-content">
-                                                    <div className="block block-markdown">
-                                                        <p role="region" aria-labelledby={faq.title}>
-                                                            {faq.description}
-                                                        </p>
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        ))}
-                                    </div>
-                                )}
-                            </section>
-                        )}
-                    </div>
-                </div>
+                <Fragment>
+                    {page.description_position == 'after' ? (
+                        <>
+                            <ExplanationFaq page={page} />
+                            <CmsBlocks page={page} />
+                        </>
+                    ) : (
+                        <>
+                            <CmsBlocks page={page} />
+                            <ExplanationFaq page={page} />
+                        </>
+                    )}
+                </Fragment>
             )}
         </BlockShowcase>
     );
diff --git a/react/src/webshop/components/pages/cms-pages/Privacy.tsx b/react/src/webshop/components/pages/cms-pages/Privacy.tsx
index 4b12b4a88..578597803 100644
--- a/react/src/webshop/components/pages/cms-pages/Privacy.tsx
+++ b/react/src/webshop/components/pages/cms-pages/Privacy.tsx
@@ -14,7 +14,6 @@ export default function Privacy() {
 
     return (
         <BlockShowcase
-            wrapper={true}
             breadcrumbItems={[
                 { name: translate('privacy.breadcrumbs.home'), state: 'home' },
                 { name: translate('privacy.breadcrumbs.privacy') },
@@ -25,7 +24,7 @@ export default function Privacy() {
                         className={`flex flex-vertical ${
                             page.description_position == 'after' ? 'flex-vertical-reverse' : ''
                         }`}>
-                        {page && <CmsBlocks page={page} wrapper={false} />}
+                        {page && <CmsBlocks page={page} />}
 
                         {(!page.description_html || page.description_position !== 'replace') && (
                             <Fragment>
diff --git a/react/src/webshop/components/pages/cms-pages/ProvidersSignUp.tsx b/react/src/webshop/components/pages/cms-pages/ProvidersSignUp.tsx
index 6c81e662f..c5c3d6003 100644
--- a/react/src/webshop/components/pages/cms-pages/ProvidersSignUp.tsx
+++ b/react/src/webshop/components/pages/cms-pages/ProvidersSignUp.tsx
@@ -35,7 +35,6 @@ export default function ProvidersSignUp() {
 
     return (
         <BlockShowcase
-            wrapper={true}
             breadcrumbItems={[
                 { name: translate('provider_sign_up.breadcrumbs.home'), state: 'home' },
                 { name: translate('provider_sign_up.breadcrumbs.sign_up_provider') },
@@ -45,7 +44,7 @@ export default function ProvidersSignUp() {
                     className={`flex flex-vertical ${
                         page.description_position == 'after' ? 'flex-vertical-reverse' : ''
                     }`}>
-                    {page && <CmsBlocks page={page} wrapper={false} />}
+                    {page && <CmsBlocks page={page} />}
 
                     {(!page.description_html || page.description_position !== 'replace') && (
                         <div className="block block-sign_up-provider">
diff --git a/react/src/webshop/components/pages/cms-pages/TermsAndConditions.tsx b/react/src/webshop/components/pages/cms-pages/TermsAndConditions.tsx
index 95547ee7b..7836514b6 100644
--- a/react/src/webshop/components/pages/cms-pages/TermsAndConditions.tsx
+++ b/react/src/webshop/components/pages/cms-pages/TermsAndConditions.tsx
@@ -10,12 +10,11 @@ export default function TermsAndConditions() {
 
     return (
         <BlockShowcase
-            wrapper={true}
             breadcrumbItems={[
                 { name: translate('terms_and_conditions.breadcrumbs.home'), state: 'home' },
                 { name: translate('terms_and_conditions.breadcrumbs.terms_and_conditions') },
             ]}>
-            {page && <CmsBlocks page={page} wrapper={false} />}
+            {page && <CmsBlocks page={page} />}
         </BlockShowcase>
     );
 }
diff --git a/react/src/webshop/components/pages/cms-pages/elements/ExplanationFaq.tsx b/react/src/webshop/components/pages/cms-pages/elements/ExplanationFaq.tsx
new file mode 100644
index 000000000..62a4300f8
--- /dev/null
+++ b/react/src/webshop/components/pages/cms-pages/elements/ExplanationFaq.tsx
@@ -0,0 +1,136 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import Markdown from '../../../elements/markdown/Markdown';
+import implementationPage from '../../../../props/models/ImplementationPage';
+import useTranslate from '../../../../../dashboard/hooks/useTranslate';
+import Fund from '../../../../props/models/Fund';
+import { useFundService } from '../../../../services/FundService';
+import { uniqueId } from 'lodash';
+import useEnvData from '../../../../hooks/useEnvData';
+import Section from '../../../elements/sections/Section';
+
+export default function ExplanationFaq({ page }: { page: implementationPage }) {
+    const envData = useEnvData();
+    const translate = useTranslate();
+
+    const [visibleFaq, setVisibleFaq] = useState({});
+    const [defaultFaq, setDefaultFaq] = useState<Array<{ id?: string; title?: string; description?: string }>>([]);
+
+    const fundService = useFundService();
+
+    const [defaultQuestionKeys] = useState([
+        'one',
+        'two',
+        'three',
+        'four',
+        'five',
+        'six',
+        'seven',
+        'eight',
+        'nine',
+        'ten',
+        'eleven',
+        'twelve',
+        'thirteen',
+        'fourteen',
+        'fifteen',
+    ]);
+
+    const transformDefaultQuestion = useCallback(
+        (index: number, fund: string, start_date: string) => {
+            const key = defaultQuestionKeys[index];
+            const titleKey = `home.faq.${envData.client_key}.faq_${key}`;
+            const contentKey = `home.faq.${envData.client_key}.${key}`;
+
+            return {
+                id: uniqueId('faq_default_'),
+                title: translate(titleKey, { fund }, `home.faq.faq_${key}`),
+                description: translate(contentKey, { fund, start_date }, `home.faq.${key}`),
+            };
+        },
+        [defaultQuestionKeys, envData.client_key, translate],
+    );
+
+    const makeDefaultFAQ = useCallback(
+        (funds: Array<Fund>) => {
+            const list = [...Array(14).keys()].map((i) => {
+                return transformDefaultQuestion(i, funds[0].name, funds[0].start_date_locale);
+            });
+
+            if (['winterswijk', 'oostgelre', 'berkelland'].includes(envData.client_key)) {
+                list.push(transformDefaultQuestion(14, funds[0].name, funds[0].start_date_locale));
+            }
+
+            setDefaultFaq(list);
+        },
+        [envData?.client_key, transformDefaultQuestion],
+    );
+
+    useEffect(() => {
+        fundService.list().then((res) => makeDefaultFAQ(res.data.data));
+    }, [fundService, makeDefaultFAQ]);
+
+    if (page.description_html && page.description_position === 'replace' && page.faq.length < 1) {
+        return null;
+    }
+
+    return (
+        <Section type={'faq'}>
+            <h1 className="section-title">{translate('home.faq.title', { client_key: '' })}</h1>
+            {page.faq?.length > 0 ? (
+                <div className="block block-faq">
+                    {page.faq.map((faq) => (
+                        <div
+                            key={faq.id}
+                            className={`faq-item ${visibleFaq?.[faq.id] ? 'active' : ''}`}
+                            onClick={() => {
+                                setVisibleFaq({
+                                    ...visibleFaq,
+                                    [faq.id]: !visibleFaq?.[faq.id],
+                                });
+                            }}>
+                            <div className="faq-item-header">
+                                <span aria-expanded={visibleFaq?.[faq.id]} role="button">
+                                    {faq.title}
+                                </span>
+                                <div className="faq-item-chevron-down mdi mdi-chevron-down" aria-hidden="true" />
+                                <div className="faq-item-chevron-up mdi mdi-chevron-up" aria-hidden="true" />
+                            </div>
+                            <div className="faq-item-content">
+                                <Markdown content={faq.description_html} aria-labelledby={faq.title} role="region" />
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            ) : (
+                <div className="block block-faq">
+                    {defaultFaq.map((faq) => (
+                        <div
+                            key={faq.id}
+                            className={`faq-item ${visibleFaq?.[faq.id] ? 'active' : ''}`}
+                            onClick={() => {
+                                setVisibleFaq({
+                                    ...visibleFaq,
+                                    [faq.id]: !visibleFaq?.[faq.id],
+                                });
+                            }}>
+                            <div className="faq-item-header">
+                                <span aria-expanded={visibleFaq?.[faq.id]} role="button">
+                                    {faq.title}
+                                </span>
+                                <div className="faq-item-chevron-down mdi mdi-chevron-down" aria-hidden="true" />
+                                <div className="faq-item-chevron-up mdi mdi-chevron-up" aria-hidden="true" />
+                            </div>
+                            <div className="faq-item-content">
+                                <div className="block block-markdown">
+                                    <p role="region" aria-labelledby={faq.title}>
+                                        {faq.description}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </Section>
+    );
+}
diff --git a/react/src/webshop/components/pages/error/Error.tsx b/react/src/webshop/components/pages/error/Error.tsx
index e62b9fb5d..e05385c24 100644
--- a/react/src/webshop/components/pages/error/Error.tsx
+++ b/react/src/webshop/components/pages/error/Error.tsx
@@ -25,7 +25,7 @@ export default function Error() {
     }, []);
 
     return (
-        <BlockShowcase wrapper={false}>
+        <BlockShowcase>
             <section className="section section-product">
                 <div className="wrapper">
                     <div className="block block-sign_up">
diff --git a/react/src/webshop/components/pages/funds-activate/FundActivate.tsx b/react/src/webshop/components/pages/funds-activate/FundActivate.tsx
index a49e9cd17..6257868e9 100644
--- a/react/src/webshop/components/pages/funds-activate/FundActivate.tsx
+++ b/react/src/webshop/components/pages/funds-activate/FundActivate.tsx
@@ -568,11 +568,11 @@ export default function FundActivate() {
     }, [setTitle, translate, fund]);
 
     if (digidResponse?.digid_success) {
-        return <BlockShowcase wrapper={true} />;
+        return <BlockShowcase />;
     }
 
     return (
-        <BlockShowcase wrapper={true} breadcrumbItems={[]} loaderElement={<BlockLoader type={'full'} />}>
+        <BlockShowcase breadcrumbItems={[]} loaderElement={<BlockLoader type={'full'} />}>
             {fund && vouchers && appConfigs && (
                 <div className="block block-sign_up">
                     <div className="block-wrapper">
diff --git a/react/src/webshop/components/pages/funds-pre-check/FundsPreCheck.tsx b/react/src/webshop/components/pages/funds-pre-check/FundsPreCheck.tsx
index 104a75788..92f96b581 100644
--- a/react/src/webshop/components/pages/funds-pre-check/FundsPreCheck.tsx
+++ b/react/src/webshop/components/pages/funds-pre-check/FundsPreCheck.tsx
@@ -354,8 +354,7 @@ export default function FundsPreCheck() {
             breadcrumbItems={[
                 { name: translate('pre_check.breadcrumb.home'), state: 'home' },
                 { name: translate('pre_check.breadcrumb.check') },
-            ]}
-            breadcrumbWrapper={true}>
+            ]}>
             {preChecks && appConfigs && recordTypesByKey && (
                 <div className="block block-fund-pre-check">
                     <div className="showcase-wrapper">
diff --git a/react/src/webshop/components/pages/funds-request/FundRequest.tsx b/react/src/webshop/components/pages/funds-request/FundRequest.tsx
index 2a2a01eca..ef714a2c3 100644
--- a/react/src/webshop/components/pages/funds-request/FundRequest.tsx
+++ b/react/src/webshop/components/pages/funds-request/FundRequest.tsx
@@ -597,11 +597,11 @@ export default function FundRequest() {
     }, [autoSubmit, autoSubmitted, step, steps, submitConfirmCriteria]);
 
     if (!fund || !vouchers || !fundRequests || (steps[step] == 'confirm_criteria' && autoSubmit)) {
-        return <BlockShowcase wrapper={true} />;
+        return <BlockShowcase />;
     }
 
     return (
-        <BlockShowcase wrapper={true} breadcrumbItems={[]} loaderElement={<BlockLoader type={'full'} />}>
+        <BlockShowcase breadcrumbItems={[]} loaderElement={<BlockLoader type={'full'} />}>
             {!digiExpired && (
                 <div className="block block-sign_up" data-dusk="fundRequestForm">
                     <div className="block-wrapper form">
diff --git a/react/src/webshop/components/pages/funds-show/FundsShow.tsx b/react/src/webshop/components/pages/funds-show/FundsShow.tsx
index ef011378e..3fa1b1a78 100644
--- a/react/src/webshop/components/pages/funds-show/FundsShow.tsx
+++ b/react/src/webshop/components/pages/funds-show/FundsShow.tsx
@@ -23,6 +23,7 @@ import FundProductsBlock from './elements/FundProductsBlock';
 import useFundMeta from '../../../hooks/meta/useFundMeta';
 import usePayoutTransactionService from '../../../services/PayoutTransactionService';
 import PayoutTransaction from '../../../../dashboard/props/models/PayoutTransaction';
+import Section from '../../elements/sections/Section';
 
 export default function FundsShow() {
     const { id } = useParams();
@@ -151,7 +152,6 @@ export default function FundsShow() {
 
     return (
         <BlockShowcase
-            wrapper={true}
             breadcrumbItems={
                 fund && [
                     showBack && { name: translate('fund.breadcrumbs.back'), back: true },
@@ -164,7 +164,7 @@ export default function FundsShow() {
                 ]
             }>
             {fund && fundMeta && (
-                <Fragment>
+                <Section type={'default'}>
                     <div className="block block-fund">
                         <div className="fund-content">
                             <div className="fund-card">
@@ -305,30 +305,37 @@ export default function FundsShow() {
                             )}
                         </div>
                     </div>
+                </Section>
+            )}
 
-                    <div className={`flex flex-vertical`}>
-                        {authIdentity && fund && <BlockCard2FAWarning fund={fund} />}
-
-                        {fund.description_position == 'before' ? (
-                            <Fragment>
-                                <div>
-                                    {fund.description_html && <Markdown content={fund.description_html} />}
-                                    <FundFaq fund={fund} />
-                                </div>
+            {fund && fundMeta && (
+                <Fragment>
+                    {authIdentity && fund && <BlockCard2FAWarning fund={fund} />}
+
+                    {fund.description_position == 'before' ? (
+                        <Fragment>
+                            {fund.description_html && (
+                                <Section type={'default'}>
+                                    <Markdown content={fund.description_html} />
+                                </Section>
+                            )}
 
-                                <FundProductsBlock fund={fund} />
-                            </Fragment>
-                        ) : (
-                            <Fragment>
-                                <FundProductsBlock fund={fund} />
+                            <FundFaq fund={fund} />
+                            <FundProductsBlock fund={fund} />
+                        </Fragment>
+                    ) : (
+                        <Fragment>
+                            <FundProductsBlock fund={fund} />
+
+                            {fund.description_html && (
+                                <Section type={'default'}>
+                                    <Markdown content={fund.description_html} />
+                                </Section>
+                            )}
 
-                                <div>
-                                    {fund.description_html && <Markdown content={fund.description_html} />}
-                                    <FundFaq fund={fund} />
-                                </div>
-                            </Fragment>
-                        )}
-                    </div>
+                            <FundFaq fund={fund} />
+                        </Fragment>
+                    )}
                 </Fragment>
             )}
         </BlockShowcase>
diff --git a/react/src/webshop/components/pages/funds-show/elements/FundFaq.tsx b/react/src/webshop/components/pages/funds-show/elements/FundFaq.tsx
index 2b9cc00e8..baee42441 100644
--- a/react/src/webshop/components/pages/funds-show/elements/FundFaq.tsx
+++ b/react/src/webshop/components/pages/funds-show/elements/FundFaq.tsx
@@ -2,6 +2,7 @@ import Fund from '../../../../../dashboard/props/models/Fund';
 import Markdown from '../../../elements/markdown/Markdown';
 import { clickOnKeyEnter } from '../../../../../dashboard/helpers/wcag';
 import React, { useState } from 'react';
+import Section from '../../../elements/sections/Section';
 
 export default function FundFaq({ fund }: { fund: Fund }) {
     const [visibleFaq, setVisibleFaq] = useState({});
@@ -9,10 +10,9 @@ export default function FundFaq({ fund }: { fund: Fund }) {
     if (!fund.faq) return null;
 
     return (
-        <section className="section section-faq">
-            <div className="section-splash" />
+        <Section type={'faq'}>
             {fund.faq_title && <h2 className="section-title">{fund.faq_title}</h2>}
-            <div className="faq faq-fund">
+            <div className="block block-faq block-faq-fund">
                 {fund.faq.map((question, index) => (
                     <div
                         key={index}
@@ -39,6 +39,6 @@ export default function FundFaq({ fund }: { fund: Fund }) {
                     </div>
                 ))}
             </div>
-        </section>
+        </Section>
     );
 }
diff --git a/react/src/webshop/components/pages/funds-show/elements/FundProductsBlock.tsx b/react/src/webshop/components/pages/funds-show/elements/FundProductsBlock.tsx
index 7f126cd82..ce367f32c 100644
--- a/react/src/webshop/components/pages/funds-show/elements/FundProductsBlock.tsx
+++ b/react/src/webshop/components/pages/funds-show/elements/FundProductsBlock.tsx
@@ -44,7 +44,6 @@ export default function FundProductsBlock({ fund }: { fund: Fund }) {
                 <BlockProducts
                     type={'budget'}
                     display={'grid'}
-                    large={false}
                     products={products.data}
                     filters={{ fund_id: fund.id }}
                 />
@@ -54,7 +53,6 @@ export default function FundProductsBlock({ fund }: { fund: Fund }) {
                 <BlockProducts
                     type={'subsidies'}
                     display={'grid'}
-                    large={false}
                     products={subsidies.data}
                     filters={{ fund_id: fund.id }}
                 />
diff --git a/react/src/webshop/components/pages/home/Home.tsx b/react/src/webshop/components/pages/home/Home.tsx
index 4fd5886ff..a11908353 100644
--- a/react/src/webshop/components/pages/home/Home.tsx
+++ b/react/src/webshop/components/pages/home/Home.tsx
@@ -18,6 +18,7 @@ import ModalNotification from '../../modals/ModalNotification';
 import useSetTitle from '../../../hooks/useSetTitle';
 import BlockBanner from '../../elements/block-banner/BlockBanner';
 import Fund from '../../../props/models/Fund';
+import Section from '../../elements/sections/Section';
 
 export default function Home() {
     const envData = useEnvData();
@@ -223,59 +224,43 @@ export default function Home() {
 
             {appConfigs.pages.home && <CmsBlocks page={appConfigs.pages.home} />}
 
-            {(appConfigs.show_home_products || appConfigs.show_home_map) && (
-                <div className="page page-home">
-                    {appConfigs.show_home_products && (
-                        <div>
-                            {products?.data.length > 0 && (
-                                <div className="wrapper">
-                                    <BlockProducts
-                                        products={products.data}
-                                        setProducts={(list) => setProducts({ ...products, data: list })}
-                                        type="budget"
-                                        large={true}
-                                        display="grid"
-                                        showCustomDescription={subsidies?.data.length === 0}
-                                    />
-                                </div>
-                            )}
+            {appConfigs.show_home_products && products?.data.length > 0 && (
+                <BlockProducts
+                    products={products.data}
+                    setProducts={(list) => setProducts({ ...products, data: list })}
+                    type="budget"
+                    display="grid"
+                    showCustomDescription={subsidies?.data.length === 0}
+                />
+            )}
 
-                            {subsidies?.data.length > 0 && (
-                                <div className="wrapper">
-                                    <BlockProducts
-                                        products={subsidies.data}
-                                        setProducts={(list) => setSubsidies({ ...subsidies, data: list })}
-                                        type="subsidies"
-                                        large={true}
-                                        display="grid"
-                                        showCustomDescription={true}
-                                    />
-                                </div>
-                            )}
-                        </div>
-                    )}
+            {appConfigs.show_home_products && subsidies?.data.length > 0 && (
+                <BlockProducts
+                    products={subsidies.data}
+                    setProducts={(list) => setSubsidies({ ...subsidies, data: list })}
+                    type="subsidies"
+                    display="grid"
+                    showCustomDescription={true}
+                />
+            )}
 
-                    {appConfigs.show_home_map && (
-                        <section className="section section-map" id="map_block">
-                            <div className="wrapper">
-                                <div className="block block-map">
-                                    <div className="block-content">
-                                        <h2 className="block-title">{translate('home.map.title')}</h2>
-                                        <div className="block-description">{translate('home.map.subtitle')}</div>
-                                        <StateNavLink
-                                            id="show_map"
-                                            name={'providers'}
-                                            query={{ show_map: 1 }}
-                                            className="button button-primary">
-                                            {translate('home.map.show')}
-                                            <em className="mdi mdi-arrow-right icon-right" aria-hidden="true" />
-                                        </StateNavLink>
-                                    </div>
-                                </div>
-                            </div>
-                        </section>
-                    )}
-                </div>
+            {appConfigs.show_home_map && (
+                <Section type={'map'} id="map_block">
+                    <div className="block block-map">
+                        <div className="block-content">
+                            <h2 className="block-title">{translate('home.map.title')}</h2>
+                            <div className="block-description">{translate('home.map.subtitle')}</div>
+                            <StateNavLink
+                                id="show_map"
+                                name={'providers'}
+                                query={{ show_map: 1 }}
+                                className="button button-primary block-map-button">
+                                {translate('home.map.show')}
+                                <em className="mdi mdi-arrow-right icon-right" aria-hidden="true" />
+                            </StateNavLink>
+                        </div>
+                    </div>
+                </Section>
             )}
         </main>
     );
diff --git a/react/src/webshop/components/pages/me-app/MeApp.tsx b/react/src/webshop/components/pages/me-app/MeApp.tsx
index 542600b29..cb8e45bb9 100644
--- a/react/src/webshop/components/pages/me-app/MeApp.tsx
+++ b/react/src/webshop/components/pages/me-app/MeApp.tsx
@@ -13,7 +13,6 @@ export default function MeApp() {
 
     return (
         <BlockShowcase
-            wrapper={true}
             breadcrumbItems={[
                 { name: translate('me.breadcrumbs.home'), state: 'home' },
                 { name: translate('me.breadcrumbs.me') },
diff --git a/react/src/webshop/components/pages/products-show/ProductsShow.tsx b/react/src/webshop/components/pages/products-show/ProductsShow.tsx
index 92b24a6c1..76b97299f 100644
--- a/react/src/webshop/components/pages/products-show/ProductsShow.tsx
+++ b/react/src/webshop/components/pages/products-show/ProductsShow.tsx
@@ -27,6 +27,7 @@ import Fund from '../../../props/models/Fund';
 import { useFundService } from '../../../services/FundService';
 import PayoutTransaction from '../../../../dashboard/props/models/PayoutTransaction';
 import usePayoutTransactionService from '../../../services/PayoutTransactionService';
+import Section from '../../elements/sections/Section';
 
 export default function ProductsShow() {
     const { id } = useParams();
@@ -167,7 +168,6 @@ export default function ProductsShow() {
 
     return (
         <BlockShowcase
-            wrapper={true}
             breadcrumbItems={
                 product && [
                     showBack && { name: translate('product.breadcrumbs.back'), back: true },
@@ -179,7 +179,7 @@ export default function ProductsShow() {
                 ]
             }>
             {product && funds && vouchers && (
-                <section className="section section-product">
+                <Section type={'product'}>
                     <div className="block block-product">
                         <div className="product-card">
                             <div className="product-photo">
@@ -266,7 +266,7 @@ export default function ProductsShow() {
                             </div>
                         )}
                     </div>
-                </section>
+                </Section>
             )}
         </BlockShowcase>
     );
diff --git a/react/src/webshop/components/pages/products/Products.tsx b/react/src/webshop/components/pages/products/Products.tsx
index 5c2158df7..0829a26ba 100644
--- a/react/src/webshop/components/pages/products/Products.tsx
+++ b/react/src/webshop/components/pages/products/Products.tsx
@@ -473,12 +473,7 @@ export default function Products({ fundType = 'budget' }: { fundType: 'budget' |
                     {appConfigs.pages.products && <CmsBlocks page={appConfigs.pages.products} />}
 
                     {products?.meta?.total > 0 && (
-                        <ProductsList
-                            type={fundType}
-                            large={false}
-                            display={filterValues.display_type}
-                            products={products.data}
-                        />
+                        <ProductsList type={fundType} display={filterValues.display_type} products={products.data} />
                     )}
 
                     {products?.meta?.total == 0 && (
diff --git a/react/src/webshop/components/pages/providers-office/ProvidersOffice.tsx b/react/src/webshop/components/pages/providers-office/ProvidersOffice.tsx
index 7a8061894..7fddb6b67 100644
--- a/react/src/webshop/components/pages/providers-office/ProvidersOffice.tsx
+++ b/react/src/webshop/components/pages/providers-office/ProvidersOffice.tsx
@@ -96,7 +96,6 @@ export default function ProvidersOffice() {
 
     return (
         <BlockShowcase
-            wrapper={false}
             breadcrumbItems={
                 provider && [
                     { name: translate('providers_office.breadcrumbs.home'), state: 'home' },
@@ -105,7 +104,6 @@ export default function ProvidersOffice() {
                     { name: office?.address },
                 ]
             }
-            breadcrumbWrapper={true}
             loaderElement={<BlockLoader type={'full'} />}>
             {provider && office && (
                 <div className="block block-office">
diff --git a/react/src/webshop/components/pages/providers-show/ProvidersShow.tsx b/react/src/webshop/components/pages/providers-show/ProvidersShow.tsx
index f5d9fc241..8deae870a 100644
--- a/react/src/webshop/components/pages/providers-show/ProvidersShow.tsx
+++ b/react/src/webshop/components/pages/providers-show/ProvidersShow.tsx
@@ -19,6 +19,7 @@ import useTranslate from '../../../../dashboard/hooks/useTranslate';
 import BlockShowcase from '../../elements/block-showcase/BlockShowcase';
 import BlockLoader from '../../elements/block-loader/BlockLoader';
 import useSetProgress from '../../../../dashboard/hooks/useSetProgress';
+import Section from '../../elements/sections/Section';
 
 export default function ProvidersShow() {
     const { id } = useParams();
@@ -81,7 +82,6 @@ export default function ProvidersShow() {
 
     return (
         <BlockShowcase
-            wrapper={false}
             breadcrumbItems={
                 provider && [
                     showBack && { name: translate('provider.breadcrumbs.back'), back: true },
@@ -90,7 +90,6 @@ export default function ProvidersShow() {
                     { name: provider.name },
                 ]
             }
-            breadcrumbWrapper={true}
             loaderElement={<BlockLoader type={'full'} />}>
             {provider && (
                 <div className="block block-provider">
@@ -111,164 +110,175 @@ export default function ProvidersShow() {
                             </div>
                         </div>
                     )}
+                </div>
+            )}
 
-                    <div className={`provider-content ${appConfigs.show_provider_map ? '' : 'provider-content-top'}`}>
-                        <div className="block block-pane">
-                            <div className="pane-head">
-                                <h1 className="sr-only">{provider.name}</h1>
-                                <h2 className="pane-head-title">{translate('provider.details.title')}</h2>
-                            </div>
-                            <div className="pane-section">
-                                <div className="provider-details">
-                                    <div className="provider-description">
-                                        <img
-                                            className="provider-logo"
-                                            src={
-                                                provider.logo?.sizes?.thumbnail ||
-                                                assetUrl('/assets/img/placeholders/organization-thumbnail.png')
-                                            }
-                                            alt=""
-                                        />
-                                        <div className="provider-title">{provider.name}</div>
+            {provider && (
+                <Section type={'default'}>
+                    <div className="block block-provider">
+                        <div
+                            className={`provider-content ${appConfigs.show_provider_map ? '' : 'provider-content-top'}`}>
+                            <div className="block block-pane">
+                                <div className="pane-head">
+                                    <h1 className="sr-only">{provider.name}</h1>
+                                    <h2 className="pane-head-title">{translate('provider.details.title')}</h2>
+                                </div>
+                                <div className="pane-section">
+                                    <div className="provider-details">
+                                        <div className="provider-description">
+                                            <img
+                                                className="provider-logo"
+                                                src={
+                                                    provider.logo?.sizes?.thumbnail ||
+                                                    assetUrl('/assets/img/placeholders/organization-thumbnail.png')
+                                                }
+                                                alt=""
+                                            />
+                                            <div className="provider-title">{provider.name}</div>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
 
-                            <div className="pane-section pane-section-compact-vertical">
-                                <div className="block block-data-list">
-                                    {provider.email && (
-                                        <div className="data-list-row">
-                                            <div className="data-list-key">{translate('provider.details.email')}</div>
-                                            <div className="data-list-value">{provider.email}</div>
-                                        </div>
-                                    )}
-                                    {provider.phone && (
-                                        <div className="data-list-row">
-                                            <div className="data-list-key">{translate('provider.details.phone')}</div>
-                                            <div className="data-list-value">{provider.phone}</div>
-                                        </div>
-                                    )}
-                                    {provider && (
-                                        <div className="data-list-row">
-                                            <div className="data-list-key">{translate('provider.details.type')}</div>
-                                            <div className="data-list-value">
-                                                <div className="label label-default label-sm">
-                                                    {provider.business_type?.name ||
-                                                        translate('provider.details.type_none')}
+                                <div className="pane-section pane-section-compact-vertical">
+                                    <div className="block block-data-list">
+                                        {provider.email && (
+                                            <div className="data-list-row">
+                                                <div className="data-list-key">
+                                                    {translate('provider.details.email')}
                                                 </div>
+                                                <div className="data-list-value">{provider.email}</div>
                                             </div>
-                                        </div>
-                                    )}
+                                        )}
+                                        {provider.phone && (
+                                            <div className="data-list-row">
+                                                <div className="data-list-key">
+                                                    {translate('provider.details.phone')}
+                                                </div>
+                                                <div className="data-list-value">{provider.phone}</div>
+                                            </div>
+                                        )}
+                                        {provider && (
+                                            <div className="data-list-row">
+                                                <div className="data-list-key">
+                                                    {translate('provider.details.type')}
+                                                </div>
+                                                <div className="data-list-value">
+                                                    <div className="label label-default label-sm">
+                                                        {provider.business_type?.name ||
+                                                            translate('provider.details.type_none')}
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        )}
+                                    </div>
                                 </div>
                             </div>
-                        </div>
 
-                        {provider.description_html && (
-                            <div className="block block-pane">
-                                <div className="pane-head">
-                                    <h2 className="pane-head-title">{translate('provider.description.title')}</h2>
-                                </div>
-                                <div className="pane-section">
-                                    <div className="block block-markdown">
-                                        <Markdown content={provider.description_html} />
+                            {provider.description_html && (
+                                <div className="block block-pane">
+                                    <div className="pane-head">
+                                        <h2 className="pane-head-title">{translate('provider.description.title')}</h2>
+                                    </div>
+                                    <div className="pane-section">
+                                        <div className="block block-markdown">
+                                            <Markdown content={provider.description_html} />
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                        )}
+                            )}
 
-                        <div className="block block-pane last-child">
-                            <h2 className="pane-head">
-                                <div className="flex-grow">{translate('provider.funds.title')}</div>
-                                <div className="pane-head-count">{provider.offices.length}</div>
-                            </h2>
-                        </div>
-                        <div className="block block-organizations">
-                            <div className="organization-item">
-                                <div className="organization-offices">
-                                    <div className="block block-offices">
-                                        {provider.offices?.map((office) => (
-                                            <StateNavLink
-                                                key={office.id}
-                                                name={'provider-office'}
-                                                params={{
-                                                    organization_id: office.organization_id,
-                                                    id: office.id,
-                                                }}
-                                                className="office-item">
-                                                <div className="office-item-map-icon">
-                                                    <em className="mdi mdi-map-marker" role="img" aria-label="" />
-                                                </div>
-                                                <div className="office-pane">
-                                                    <div className="office-pane-block">
-                                                        <div className="office-logo">
-                                                            <img
-                                                                className="office-logo-img"
-                                                                src={
-                                                                    office.photo?.sizes?.thumbnail ||
-                                                                    assetUrl(
-                                                                        '/assets/img/placeholders/office-thumbnail.png',
-                                                                    )
-                                                                }
-                                                                alt=""
-                                                            />
-                                                        </div>
-                                                        <div className="office-details">
-                                                            <div className="office-title">{office.address}</div>
-                                                            <div className="office-labels">
-                                                                <div className="label label-default">
-                                                                    {provider?.business_type?.name ||
-                                                                        translate('provider.details.type_none')}
-                                                                </div>
+                            <div className="block block-pane last-child">
+                                <h2 className="pane-head">
+                                    <div className="flex-grow">{translate('provider.funds.title')}</div>
+                                    <div className="pane-head-count">{provider.offices.length}</div>
+                                </h2>
+                            </div>
+                            <div className="block block-organizations">
+                                <div className="organization-item">
+                                    <div className="organization-offices">
+                                        <div className="block block-offices">
+                                            {provider.offices?.map((office) => (
+                                                <StateNavLink
+                                                    key={office.id}
+                                                    name={'provider-office'}
+                                                    params={{
+                                                        organization_id: office.organization_id,
+                                                        id: office.id,
+                                                    }}
+                                                    className="office-item">
+                                                    <div className="office-item-map-icon">
+                                                        <em className="mdi mdi-map-marker" role="img" aria-label="" />
+                                                    </div>
+                                                    <div className="office-pane">
+                                                        <div className="office-pane-block">
+                                                            <div className="office-logo">
+                                                                <img
+                                                                    className="office-logo-img"
+                                                                    src={
+                                                                        office.photo?.sizes?.thumbnail ||
+                                                                        assetUrl(
+                                                                            '/assets/img/placeholders/office-thumbnail.png',
+                                                                        )
+                                                                    }
+                                                                    alt=""
+                                                                />
                                                             </div>
-                                                            {(office.phone || provider.phone || provider.email) && (
-                                                                <div>
-                                                                    {(office.phone || provider.phone) && (
-                                                                        <div className="office-info office-info-inline">
-                                                                            <em className="mdi mdi-phone-outline" />
-                                                                            {office.phone
-                                                                                ? office.phone
-                                                                                : provider.phone}
-                                                                        </div>
-                                                                    )}
-                                                                    {provider.email && (
-                                                                        <div className="office-info office-info-inline">
-                                                                            <em className="mdi mdi-email-outline" />
-                                                                            {provider.email}
-                                                                        </div>
-                                                                    )}
+                                                            <div className="office-details">
+                                                                <div className="office-title">{office.address}</div>
+                                                                <div className="office-labels">
+                                                                    <div className="label label-default">
+                                                                        {provider?.business_type?.name ||
+                                                                            translate('provider.details.type_none')}
+                                                                    </div>
                                                                 </div>
-                                                            )}
+                                                                {(office.phone || provider.phone || provider.email) && (
+                                                                    <div>
+                                                                        {(office.phone || provider.phone) && (
+                                                                            <div className="office-info office-info-inline">
+                                                                                <em className="mdi mdi-phone-outline" />
+                                                                                {office.phone
+                                                                                    ? office.phone
+                                                                                    : provider.phone}
+                                                                            </div>
+                                                                        )}
+                                                                        {provider.email && (
+                                                                            <div className="office-info office-info-inline">
+                                                                                <em className="mdi mdi-email-outline" />
+                                                                                {provider.email}
+                                                                            </div>
+                                                                        )}
+                                                                    </div>
+                                                                )}
+                                                            </div>
                                                         </div>
                                                     </div>
-                                                </div>
-                                            </StateNavLink>
-                                        ))}
+                                                </StateNavLink>
+                                            ))}
+                                        </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
+                    </div>
+                </Section>
+            )}
 
-                        {products?.data?.length > 0 && (
-                            <BlockProducts
-                                type={'budget'}
-                                display={'grid'}
-                                large={false}
-                                products={products.data}
-                                filters={{ organization_id: provider.id }}
-                            />
-                        )}
+            {products?.data?.length > 0 && (
+                <BlockProducts
+                    type={'budget'}
+                    display={'grid'}
+                    products={products.data}
+                    filters={{ organization_id: provider.id }}
+                />
+            )}
 
-                        {subsidies?.data?.length > 0 && (
-                            <BlockProducts
-                                type={'subsidies'}
-                                display={'grid'}
-                                large={false}
-                                products={subsidies.data}
-                                filters={{ organization_id: provider.id }}
-                            />
-                        )}
-                    </div>
-                </div>
+            {subsidies?.data?.length > 0 && (
+                <BlockProducts
+                    type={'subsidies'}
+                    display={'grid'}
+                    products={subsidies.data}
+                    filters={{ organization_id: provider.id }}
+                />
             )}
         </BlockShowcase>
     );
diff --git a/react/src/webshop/components/pages/sitemap/Sitemap.tsx b/react/src/webshop/components/pages/sitemap/Sitemap.tsx
index cecf5fbb3..a38f82486 100644
--- a/react/src/webshop/components/pages/sitemap/Sitemap.tsx
+++ b/react/src/webshop/components/pages/sitemap/Sitemap.tsx
@@ -15,7 +15,6 @@ export default function Sitemap() {
 
     return (
         <BlockShowcase
-            wrapper={true}
             breadcrumbItems={[
                 { name: translate('sitemap.breadcrumbs.home'), state: 'home' },
                 { name: translate('sitemap.breadcrumbs.sitemap') },
diff --git a/react/src/webshop/components/pages/vouchers-show/VouchersShow.tsx b/react/src/webshop/components/pages/vouchers-show/VouchersShow.tsx
index 1409d02d5..bccf595e4 100644
--- a/react/src/webshop/components/pages/vouchers-show/VouchersShow.tsx
+++ b/react/src/webshop/components/pages/vouchers-show/VouchersShow.tsx
@@ -38,6 +38,7 @@ import VoucherQrCodePrintable from '../../printable/VoucherQrCodePrintable';
 import useSetTitle from '../../../hooks/useSetTitle';
 import BlockShowcase from '../../elements/block-showcase/BlockShowcase';
 import { clickOnKeyEnter } from '../../../../dashboard/helpers/wcag';
+import Section from '../../elements/sections/Section';
 
 export default function VouchersShow() {
     const { number } = useParams();
@@ -275,7 +276,6 @@ export default function VouchersShow() {
 
     return (
         <BlockShowcase
-            wrapper={true}
             breadcrumbItems={[
                 { name: translate('voucher.breadcrumbs.home'), state: 'home' },
                 { name: translate('voucher.breadcrumbs.vouchers'), state: 'vouchers' },
@@ -290,8 +290,8 @@ export default function VouchersShow() {
                     : null,
             ]}>
             {voucher && voucherCard && (
-                <section className="section section-voucher-details">
-                    <div className="page page-voucher">
+                <div className="page page-voucher">
+                    <Section type={'voucher_details'}>
                         {/* Internal vouchers */}
                         {!voucherCard.deactivated && !voucher?.expired && !voucherCard.is_external && (
                             <div className="block block-voucher">
@@ -839,7 +839,9 @@ export default function VouchersShow() {
                                         src={assetUrl(
                                             '/assets/img/icon-physical-cards/icon-physical-cards-preview-vertical.png',
                                         )}
-                                        alt={translate('voucher.physical_card.alt', { title: voucherCard.title })}
+                                        alt={translate('voucher.physical_card.alt', {
+                                            title: voucherCard.title,
+                                        })}
                                     />
                                 </div>
                                 <div className="block-card-details">
@@ -988,7 +990,9 @@ export default function VouchersShow() {
                                                                 {translate('voucher.transactions.reservation') + ' '}
                                                                 <StateNavLink
                                                                     name={'reservation-show'}
-                                                                    params={{ id: transaction.product_reservation.id }}>
+                                                                    params={{
+                                                                        id: transaction.product_reservation.id,
+                                                                    }}>
                                                                     #{transaction.product_reservation.code}
                                                                 </StateNavLink>
                                                             </div>
@@ -1050,25 +1054,23 @@ export default function VouchersShow() {
                                 </div>
                             </div>
                         )}
-
-                        {/* Voucher available budget products */}
-                        {showProducts && products && voucher.fund.type == 'budget' && (
-                            <BlockProducts
-                                type="budget"
-                                products={products.data}
-                                filters={{ fund_id: voucher.fund_id }}
-                            />
-                        )}
-
-                        {/* Voucher available subsidy products */}
-                        {showProducts && subsidies && voucher.fund.type == 'subsidies' && (
-                            <BlockProducts
-                                type="subsidies"
-                                products={subsidies.data}
-                                filters={{ fund_id: voucher.fund_id }}
-                            />
-                        )}
-
+                    </Section>
+
+                    {/* Voucher available budget products */}
+                    {showProducts && products && voucher.fund.type == 'budget' && (
+                        <BlockProducts type="budget" products={products.data} filters={{ fund_id: voucher.fund_id }} />
+                    )}
+
+                    {/* Voucher available subsidy products */}
+                    {showProducts && subsidies && voucher.fund.type == 'subsidies' && (
+                        <BlockProducts
+                            type="subsidies"
+                            products={subsidies.data}
+                            filters={{ fund_id: voucher.fund_id }}
+                        />
+                    )}
+
+                    <Section type={'map'}>
                         {/* Providers map */}
                         {!voucherCard.deactivated &&
                             !voucher?.expired &&
@@ -1129,8 +1131,8 @@ export default function VouchersShow() {
                                 </div>
                             </div>
                         )}
-                    </div>
-                </section>
+                    </Section>
+                </div>
             )}
         </BlockShowcase>
     );
diff --git a/react/src/webshop/components/pages_system/NotFound.tsx b/react/src/webshop/components/pages_system/NotFound.tsx
index ebcae02bd..98a0d6d99 100644
--- a/react/src/webshop/components/pages_system/NotFound.tsx
+++ b/react/src/webshop/components/pages_system/NotFound.tsx
@@ -8,7 +8,6 @@ export default function NotFound({ error = '404' }: { error?: string }) {
 
     return (
         <BlockShowcase
-            wrapper={true}
             breadcrumbItems={[
                 { name: translate('not_found.breadcrumbs.home'), state: 'home' },
                 { name: translate('not_found.breadcrumbs.not_found') },
diff --git a/react/src/webshop/components/pages_system/WIP.tsx b/react/src/webshop/components/pages_system/WIP.tsx
index 509b16c82..f3281ba11 100644
--- a/react/src/webshop/components/pages_system/WIP.tsx
+++ b/react/src/webshop/components/pages_system/WIP.tsx
@@ -7,7 +7,6 @@ export default function WIP() {
 
     return (
         <BlockShowcase
-            wrapper={true}
             breadcrumbItems={[
                 { name: translate('wip.breadcrumbs.home'), state: 'home' },
                 { name: translate('wip.breadcrumbs.wip') },
diff --git a/react/src/webshop/layout/Layout.tsx b/react/src/webshop/layout/Layout.tsx
index e1b4a267c..71e71cdaa 100644
--- a/react/src/webshop/layout/Layout.tsx
+++ b/react/src/webshop/layout/Layout.tsx
@@ -1,18 +1,18 @@
-import React, { useContext, useEffect, useMemo, useRef } from 'react';
+import React, { Fragment, useContext, useEffect, useMemo, useRef } from 'react';
 import { useStateRoutes } from '../../dashboard/modules/state_router/Router';
 import Modals from '../../dashboard/modules/modals/components/Modals';
 import PushNotifications from '../../dashboard/modules/push_notifications/components/PushNotifications';
 import { modalsContext } from '../../dashboard/modules/modals/context/ModalContext';
 import LoadingBar from '../../dashboard/modules/loading_bar/components/LoadingBar';
-import { LayoutType } from '../../dashboard/modules/state_router/RouterProps';
 import useAuthIdentity from '../hooks/useAuthIdentity';
-import SkipLinks from './elements/SkipLinks';
+import BlockSkipLinks from './elements/BlockSkipLinks';
 import useEnvData from '../hooks/useEnvData';
 import useAppConfigs from '../hooks/useAppConfigs';
 import LayoutFooter from './elements/LayoutFooter';
 import Printable from '../../dashboard/modules/printable/components/Printable';
 import ErrorBoundaryHandler from '../../dashboard/components/elements/error-boundary-handler/ErrorBoundaryHandler';
 import { TopNavbar } from '../components/elements/top-navbar/TopNavbar';
+import classNames from 'classnames';
 
 export const Layout = ({ children }: { children: React.ReactElement }) => {
     const { route } = useStateRoutes();
@@ -20,8 +20,6 @@ export const Layout = ({ children }: { children: React.ReactElement }) => {
 
     const envData = useEnvData();
     const appConfigs = useAppConfigs();
-
-    const layout = route?.state?.layout;
     const authIdentity = useAuthIdentity();
     const pageScrollRef = useRef<HTMLDivElement>(null);
 
@@ -40,29 +38,20 @@ export const Layout = ({ children }: { children: React.ReactElement }) => {
     return (
         <ErrorBoundaryHandler type={'main'}>
             <div
-                className={`${route?.state?.name == 'fund-request' ? 'signup-layout' : ''}`}
+                className={classNames('app-root', route?.state?.name == 'fund-request' && 'signup-layout')}
                 ref={pageScrollRef}
-                style={{
-                    width: '100%',
-                    height: '100%',
-                    position: 'fixed',
-                    overflow: modals.length > 0 ? 'hidden' : 'auto',
-                }}>
-                <SkipLinks />
+                style={{ overflow: modals.length > 0 ? 'hidden' : 'auto' }}>
+                <BlockSkipLinks />
                 <LoadingBar />
 
-                {[LayoutType.dashboard, LayoutType.landing].includes(layout) && <>{/*<LayoutHeader />*/}</>}
-
-                <div className="app app-container">
-                    {layout == LayoutType.dashboard && <>{/*<LayoutAside />*/}</>}
-
+                <Fragment>
                     {isReady && (
-                        <section className={`${layout == LayoutType.dashboard ? 'app app-content' : ''}`}>
+                        <Fragment>
                             <TopNavbar />
                             {children}
-                        </section>
+                        </Fragment>
                     )}
-                </div>
+                </Fragment>
 
                 <LayoutFooter />
 
diff --git a/react/src/webshop/layout/elements/SkipLinks.tsx b/react/src/webshop/layout/elements/BlockSkipLinks.tsx
similarity index 85%
rename from react/src/webshop/layout/elements/SkipLinks.tsx
rename to react/src/webshop/layout/elements/BlockSkipLinks.tsx
index 7640a7800..644ff8d7e 100644
--- a/react/src/webshop/layout/elements/SkipLinks.tsx
+++ b/react/src/webshop/layout/elements/BlockSkipLinks.tsx
@@ -2,11 +2,11 @@ import React from 'react';
 import { useHelperService } from '../../../dashboard/services/HelperService';
 import { clickOnKeyEnter } from '../../../dashboard/helpers/wcag';
 
-export default function SkipLinks() {
+export default function BlockSkipLinks() {
     const helperService = useHelperService();
 
     return (
-        <div className="skiplinks" role="navigation">
+        <div className="block block-skip-links" role="navigation">
             <a
                 className="sr-only sr-only-focusable"
                 href="#"
diff --git a/react/src/webshop/layout/elements/LayoutFooter.tsx b/react/src/webshop/layout/elements/LayoutFooter.tsx
index 604fbd29b..1aa361832 100644
--- a/react/src/webshop/layout/elements/LayoutFooter.tsx
+++ b/react/src/webshop/layout/elements/LayoutFooter.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useMemo, useState } from 'react';
+import React, { Fragment, useContext, useMemo, useState } from 'react';
 import useAppConfigs from '../../hooks/useAppConfigs';
 import { mainContext } from '../../contexts/MainContext';
 import StateNavLink from '../../modules/state_router/StateNavLink';
@@ -8,6 +8,7 @@ import useEnvData from '../../hooks/useEnvData';
 import useAssetUrl from '../../hooks/useAssetUrl';
 import AppLinks from '../../components/elements/app-links/AppLinks';
 import Icon from '../../../../assets/forus-webshop/resources/_webshop-common/assets/img/me-logo.svg';
+import Section from '../../components/elements/sections/Section';
 
 export default function LayoutFooter() {
     const translate = useTranslate();
@@ -30,8 +31,8 @@ export default function LayoutFooter() {
     }
 
     return (
-        <footer className="section section-footer" id="footer">
-            <div className="wrapper">
+        <Fragment>
+            <Section type={'footer'} id="footer">
                 <div className="block block-footer">
                     <div className="row">
                         <h2 className="sr-only">{translate('app_footer.columns.site_info')}</h2>
@@ -135,26 +136,30 @@ export default function LayoutFooter() {
                         </div>
                     </div>
                 </div>
-            </div>
-            <div className="block block-copyrights">
-                <div className="wrapper">
-                    <div className="copyrights"></div>
-                    <div className="links">
-                        {pageLinks?.map((pageLink, index) => (
-                            <div className="link-item" key={index}>
-                                <StateNavLink name={pageLink.page_type} target={pageLink.external ? '_blank' : '_self'}>
-                                    {translate(`app_footer.links.${pageLink.page_type}`)}
+            </Section>
+            <Section type={'copyright'} wrapper={false}>
+                <div className="block block-copyrights">
+                    <div className="wrapper">
+                        <div className="copyrights"></div>
+                        <div className="links">
+                            {pageLinks?.map((pageLink, index) => (
+                                <div className="link-item" key={index}>
+                                    <StateNavLink
+                                        name={pageLink.page_type}
+                                        target={pageLink.external ? '_blank' : '_self'}>
+                                        {translate(`app_footer.links.${pageLink.page_type}`)}
+                                    </StateNavLink>
+                                </div>
+                            ))}
+                            <div className="link-item">
+                                <StateNavLink name="sitemap" target="_self">
+                                    {translate('app_footer.links.sitemap')}
                                 </StateNavLink>
                             </div>
-                        ))}
-                        <div className="link-item">
-                            <StateNavLink name="sitemap" target="_self">
-                                {translate('app_footer.links.sitemap')}
-                            </StateNavLink>
                         </div>
                     </div>
                 </div>
-            </div>
-        </footer>
+            </Section>
+        </Fragment>
     );
 }

From 11f3a01b07562a72311c6d0690dfbaf63d738ba7 Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Fri, 11 Apr 2025 14:47:15 +0300
Subject: [PATCH 05/23] update precheck mobile version design and fix
 translations

---
 .../includes/blocks/block-fund-pre-check.scss | 208 +++++++-----------
 .../elements/progress-pie/ProgressPie.tsx     | 125 -----------
 .../pages/funds-pre-check/FundsPreCheck.tsx   | 159 ++++++-------
 react/src/webshop/i18n/nl/pages/pre_check.mjs |   2 +-
 react/src/webshop/i18n/translated/ar.json     |   8 +-
 react/src/webshop/i18n/translated/de.json     |   8 +-
 react/src/webshop/i18n/translated/en-US.json  |   8 +-
 react/src/webshop/i18n/translated/fr.json     |   8 +-
 react/src/webshop/i18n/translated/pl.json     |   8 +-
 react/src/webshop/i18n/translated/ru.json     |  10 +-
 react/src/webshop/i18n/translated/tr.json     |   8 +-
 react/src/webshop/i18n/translated/uk.json     |  10 +-
 translations/cache/cache.json                 |  12 +-
 13 files changed, 197 insertions(+), 377 deletions(-)
 delete mode 100644 react/src/webshop/components/elements/progress-pie/ProgressPie.tsx

diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-fund-pre-check.scss b/react/assets/forus-webshop/scss/includes/blocks/block-fund-pre-check.scss
index 64489ac50..2a1320781 100644
--- a/react/assets/forus-webshop/scss/includes/blocks/block-fund-pre-check.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-fund-pre-check.scss
@@ -12,12 +12,42 @@
         }
     }
 
+    .pre-check-mobile-progress {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        padding: 5px 20px 15px;
+        border-bottom: 1px solid var(--border-color);
+        margin: 0 -20px;
+
+        .pre-check-mobile-progress-title {
+            font: 700 14px/22px var(--base-font);
+        }
+
+        .pre-check-mobile-progress-collapse {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            gap: 3px;
+            font: 600 12px/22px var(--base-font);
+
+            .mdi {
+                font-size: 18px;
+            }
+        }
+    }
+
     .pre-check-progress {
         .pre-check-progress-title {
             font: 700 18px/27px var(--base-font);
             margin-bottom: 15px;
         }
 
+        .pre-check-progress-header {
+            display: none;
+        }
+
         .pre-check-progress-steps {
             width: 100%;
             margin-bottom: 25px;
@@ -108,7 +138,8 @@
                     &.active {
                         .pre-check-progress-step-icon {
                             color: #fff;
-                            background: var(--color-primary) url('./assets/img/icon-pre-check-totals-active.svg') no-repeat center;
+                            background: var(--color-primary) url('./assets/img/icon-pre-check-totals-active.svg')
+                                no-repeat center;
                         }
                     }
                 }
@@ -121,8 +152,8 @@
 
         .pre-check-totals {
             border-radius: var(--border-radius);
-            border: 1px solid #DBDCDB;
-            background: #FBFBFB;
+            border: 1px solid #dbdcdb;
+            background: #fbfbfb;
             display: flex;
             padding: 12px 16px;
             margin-bottom: 25px;
@@ -132,9 +163,10 @@
 
                 .block-key-value-list-item {
                     width: 100%;
-                    color: #282B39;
+                    color: #282b39;
 
                     .key-value-list-item-label {
+                        flex: 0 0 150px;
                         font-weight: 600;
                         flex-grow: 1;
                     }
@@ -216,89 +248,6 @@
         border-top: 1px solid var(--border-color);
     }
 
-    .block-progress-pie {
-        display: grid;
-        background-color: #fff;
-        padding: 15px 20px;
-        margin: 0 -20px;
-        border-top: 1px solid var(--border-color);
-        border-bottom: 1px solid var(--border-color);
-        position: relative;
-        align-items: center;
-        grid-template-columns: 85px 1fr;
-
-        .progress-pie {
-            width: 70px;
-            position: relative;
-            margin-right: 15px;
-            align-items: center;
-
-            img {
-                display: block;
-                z-index: 1;
-            }
-
-            &:before {
-                position: absolute;
-                left: 5px;
-                top: 5px;
-                bottom: 5px;
-                right: 5px;
-                content: '';
-                display: block;
-                background-color: #fff;
-                border-radius: 100px;
-            }
-
-            .progress-pie-text {
-                position: absolute;
-                left: 50%;
-                top: 50%;
-                transform: translate(-50%, -50%);
-                font: 700 12px/14px var(--base-font);
-                width: 100%;
-                text-align: center;
-            }
-        }
-
-        .progress-pie-info {
-            flex-grow: 1;
-
-            .progress-pie-info-title {
-                font: 600 14px/24px var(--base-font);
-            }
-
-            .progress-pie-info-details {
-                display: flex;
-
-                .progress-pie-info-details-key,
-                .progress-pie-info-details-value {
-                    font: 500 12px/20px var(--base-font);
-                }
-            }
-        }
-
-        .progress-pie-show-details {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-
-            .button {
-                font: 600 12px/15px var(--base-font);
-                color: #004d93;
-                text-decoration: underline;
-                position: absolute;
-                right: 12px;
-                top: 50%;
-                transform: translate(0%, -50%);
-
-                .mdi {
-                    color: var(--tc);
-                }
-            }
-        }
-    }
-
     @media screen and (max-width: 1000px) {
         background-color: #fff;
 
@@ -330,6 +279,20 @@
                 }
             }
 
+            .pre-check-progress-header {
+                border-bottom: 1px solid var(--border-color);
+                padding: 20px 20px;
+                font: 600 16px / 18px var(--base-font);
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+
+                em.mdi {
+                    font-size: 26px;
+                    width: 20px;
+                }
+            }
+
             .pre-check-progress-steps {
                 padding: 15px 20px;
 
@@ -366,8 +329,22 @@
                 }
             }
 
+            .pre-check-totals {
+                margin: 0 20px;
+
+                .block.block-key-value-list {
+                    .block-key-value-list-item {
+                        flex-direction: row;
+                    }
+                }
+
+                &.pre-check-totals-hide-mobile {
+                    display: none;
+                }
+            }
+
             &.pre-check-progress-complete {
-                margin: 0;
+                margin: 20px 0 0;
                 border: 1px solid var(--border-color);
                 border-radius: var(--border-radius);
 
@@ -382,10 +359,14 @@
                     .pre-check-progress-step {
                         grid-template-columns: 40px 1fr;
                     }
+
+                    &.pre-check-progress-steps-hide-mobile {
+                        display: none;
+                    }
                 }
 
                 .pre-check-actions {
-                    padding: 0 20px 20px;
+                    padding: 20px 20px;
                 }
             }
         }
@@ -436,54 +417,15 @@
             }
         }
 
-        .block-progress-pie {
-            .progress-pie-info {
-                gap: 8px;
-                display: flex;
-                flex-direction: column;
-                min-width: 0;
-
-                .progress-pie-info-details {
-                    flex-direction: column;
-                    // display: none;
-                    display: flex;
-                    gap: 2px;
-                    min-width: 0;
-
-                    .progress-pie-info-details-key,
-                    .progress-pie-info-details-value {
-                        word-wrap: break-word;
-                    }
-
-                    .progress-pie-info-details-key {
-                        font: 400 11px/14px var(--base-font);
-                    }
-
-                    .progress-pie-info-details-value {
-                        font: 600 11px/16px var(--base-font);
-                    }
-                }
-            }
-
-            .progress-pie-show-details {
-                display: block;
-                padding-top: 5px;
-                padding-left: 75px;
-                width: 100%;
-
-                .button {
-                    position: initial;
-                    transform: none;
-                    display: flex;
-                    white-space: nowrap;
-                }
-            }
-        }
-
         .showcase-layout {
             .showcase-content {
                 padding-top: 20px;
             }
         }
+
+        .pre-check-step-section-results {
+            padding-top: 0;
+            border-top: 0;
+        }
     }
 }
diff --git a/react/src/webshop/components/elements/progress-pie/ProgressPie.tsx b/react/src/webshop/components/elements/progress-pie/ProgressPie.tsx
deleted file mode 100644
index 5c3249cb6..000000000
--- a/react/src/webshop/components/elements/progress-pie/ProgressPie.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import React, { DOMAttributes, HTMLAttributes, useCallback, useEffect, useState } from 'react';
-
-export default function ProgressPie({
-    color,
-    title,
-    attr,
-    attrImg,
-    size = 40,
-    progress = 0,
-    strokeWidth = 4,
-    gradientMap,
-    strokeColor,
-    defaultColor = '#1c407b',
-    backgroundColor,
-    defaultBackgroundColor = '#ffffff',
-    className = '',
-    children,
-}: {
-    title?: string;
-    attr?: DOMAttributes<HTMLDivElement> | HTMLAttributes<HTMLDivElement>;
-    attrImg?: DOMAttributes<HTMLDivElement> | HTMLAttributes<HTMLDivElement>;
-    size?: number;
-    color?: string;
-    progress?: number;
-    strokeWidth?: number;
-    strokeColor?: string;
-    defaultColor?: string;
-    backgroundColor?: string;
-    gradientMap?: Array<Array<number | string>> | ((progress: number) => string);
-    defaultBackgroundColor?: string;
-    className?: string;
-    children?: React.ReactNode;
-}) {
-    const [image, setImage] = useState<string>(null);
-
-    const [canvas] = useState(document.createElement('canvas'));
-    const [context] = useState(canvas.getContext('2d'));
-
-    const getGradientColor = useCallback(
-        (gradientMap: Array<Array<number | string>> | ((progress: number) => string), progress: number): string => {
-            if (typeof gradientMap == 'function') {
-                return gradientMap(progress);
-            }
-
-            if (Array.isArray(gradientMap)) {
-                const gradientValue = gradientMap.find(
-                    (item) => progress >= parseInt(item[0].toString()) && progress <= parseInt(item[1].toString()),
-                );
-
-                return gradientValue ? gradientValue[2].toString() : defaultColor;
-            }
-
-            return defaultColor;
-        },
-        [defaultColor],
-    );
-
-    const getColor = useCallback(
-        (progress: number): string => {
-            return gradientMap ? getGradientColor(gradientMap, progress) : color || defaultColor;
-        },
-        [gradientMap, getGradientColor, color, defaultColor],
-    );
-
-    const getBackgroundColor = useCallback(() => {
-        return backgroundColor || defaultBackgroundColor;
-    }, [backgroundColor, defaultBackgroundColor]);
-
-    const getStrokeColor = useCallback(
-        (progress: number) => (gradientMap ? getGradientColor(gradientMap, progress) : strokeColor || defaultColor),
-        [defaultColor, getGradientColor, gradientMap, strokeColor],
-    );
-
-    const makeImage = useCallback(() => {
-        const color = getColor(progress);
-        const backgroundColor = getBackgroundColor();
-
-        const strokeColor = getStrokeColor(progress);
-        const strokeOffset = strokeWidth ? strokeWidth / 2 : 0;
-
-        if (canvas.width != size || canvas.height != size) {
-            canvas.width = size;
-            canvas.height = size;
-        }
-
-        context.clearRect(0, 0, size, size);
-
-        context.beginPath();
-        context.lineWidth = 0;
-        context.fillStyle = backgroundColor;
-        context.arc(size / 2, size / 2, size / 2 - 1, 0, Math.PI * 2);
-        context.fill();
-
-        context.beginPath();
-        context.strokeStyle = color;
-        context.lineWidth = size / 2 - strokeOffset;
-        context.arc(size / 2, size / 2, size / 4 - strokeOffset / 2, -0.5 * Math.PI, (-0.5 + progress * 2) * Math.PI);
-        context.stroke();
-
-        if (strokeWidth) {
-            context.beginPath();
-            context.strokeStyle = strokeColor;
-            context.lineWidth = strokeWidth;
-            context.arc(size / 2, size / 2, size / 2 - strokeWidth / 2, 0, 2 * Math.PI);
-            context.stroke();
-        }
-
-        return canvas.toDataURL('image/png');
-    }, [canvas, context, getBackgroundColor, getColor, getStrokeColor, progress, size, strokeWidth]);
-
-    useEffect(() => {
-        setImage(makeImage());
-    }, [makeImage]);
-
-    if (!image) {
-        return <></>;
-    }
-
-    return (
-        <div {...attr} title={title} className={`block block-progress-pie ${className}`}>
-            <img {...attrImg} src={image} alt={''} />
-            {children}
-        </div>
-    );
-}
diff --git a/react/src/webshop/components/pages/funds-pre-check/FundsPreCheck.tsx b/react/src/webshop/components/pages/funds-pre-check/FundsPreCheck.tsx
index 92f96b581..2acb19b50 100644
--- a/react/src/webshop/components/pages/funds-pre-check/FundsPreCheck.tsx
+++ b/react/src/webshop/components/pages/funds-pre-check/FundsPreCheck.tsx
@@ -18,7 +18,6 @@ import { useTagService } from '../../../../dashboard/services/TagService';
 import Tag from '../../../../dashboard/props/models/Tag';
 import { useOrganizationService } from '../../../../dashboard/services/OrganizationService';
 import Organization from '../../../../dashboard/props/models/Organization';
-import ProgressPie from '../../elements/progress-pie/ProgressPie';
 import SelectControl from '../../../../dashboard/components/elements/select-control/SelectControl';
 import UIControlCheckbox from '../../../../dashboard/components/elements/forms/ui-controls/UIControlCheckbox';
 import UIControlStep from '../../../../dashboard/components/elements/forms/ui-controls/UIControlStep';
@@ -30,6 +29,7 @@ import EmptyBlock from '../../elements/empty-block/EmptyBlock';
 import FundsListItemPreCheck from '../../elements/lists/funds-list/templates/FundsListItemPreCheck';
 import useFilter from '../../../../dashboard/hooks/useFilter';
 import BlockShowcase from '../../elements/block-showcase/BlockShowcase';
+import classNames from 'classnames';
 
 type PreCheckLocal = PreCheck<{
     label?: string;
@@ -62,6 +62,7 @@ export default function FundsPreCheck() {
     const [activeStepIndex, setActiveStepIndex] = useState(0);
     const [emptyRecordTypeKeys, setEmptyRecordTypeKeys] = useState<Array<string>>(null);
     const [showMorePreCheckInfo, setShowMorePreCheckInfo] = useState(false);
+    const [showMoreRecordsInfo, setShowMoreRecordsInfo] = useState(false);
 
     const hasTotals = useMemo(() => !!totals, [totals]);
 
@@ -261,17 +262,56 @@ export default function FundsPreCheck() {
         }
     }, [appConfigs.pre_check_enabled, navigateState, pushDanger, translate]);
 
+    const PreCheckActions = useCallback(() => {
+        return (
+            <div className="pre-check-actions">
+                <button className="button button-download button-fill button-sm" type="button" onClick={downloadPDF}>
+                    {translate('pre_check.download_pdf')}
+                </button>
+                <button className="button button-light button-fill button-sm" type="button" onClick={changeAnswers}>
+                    {translate('pre_check.change_answers')}
+                </button>
+            </div>
+        );
+    }, [changeAnswers, downloadPDF, translate]);
+
     const PreCheckProgress = useCallback(
-        ({ id }: { id?: string }) => (
+        ({ id, title = true }: { id?: string; title?: boolean }) => (
             <div id={id} className={`pre-check-progress ${totals ? 'pre-check-progress-complete' : ''}`}>
-                <div className="pre-check-progress-title">{translate('pre_check.your_data')}</div>
-                <div className="pre-check-progress-steps">
+                {totals && (
+                    <a
+                        className="pre-check-progress-header"
+                        type="button"
+                        onClick={(e) => {
+                            e?.preventDefault();
+                            setShowMoreRecordsInfo(!showMoreRecordsInfo);
+                        }}
+                        aria-expanded={showMoreRecordsInfo}
+                        aria-controls={'preCheckMoreRecords'}>
+                        {translate('pre_check.your_data')}
+                        {showMoreRecordsInfo ? (
+                            <em className="mdi mdi-chevron-up" />
+                        ) : (
+                            <em className="mdi mdi-chevron-right" />
+                        )}
+                    </a>
+                )}
+
+                <div
+                    className={classNames(
+                        'pre-check-progress-steps',
+                        !showMoreRecordsInfo && 'pre-check-progress-steps-hide-mobile',
+                    )}>
+                    {title && <div className="pre-check-progress-title">{translate('pre_check.your_data')}</div>}
+
                     {preChecks?.map((preCheck, index) => (
                         <div
                             key={preCheck.id}
-                            className={`pre-check-progress-step ${activeStepIndex == index ? 'active' : ''} ${
-                                activeStepIndex > index || totals ? 'completed' : ''
-                            }`}>
+                            className={classNames(
+                                'pre-check-progress-step',
+                                activeStepIndex == index && 'active',
+                                (activeStepIndex > index || totals) && 'completed',
+                            )}>
                             <div className="pre-check-progress-step-icon">{index + 1}</div>
 
                             <div className="pre-check-progress-questions">
@@ -296,7 +336,7 @@ export default function FundsPreCheck() {
                         </div>
                     ))}
 
-                    <div className={`pre-check-progress-step ${totals ? 'active' : ''}`}>
+                    <div className={classNames('pre-check-progress-step', totals && 'active')}>
                         <div className="pre-check-progress-step-icon" />
                         <div className="pre-check-progress-questions">
                             <div className="pre-check-progress-question">
@@ -311,7 +351,11 @@ export default function FundsPreCheck() {
 
                 {totals && (
                     <Fragment>
-                        <div className="pre-check-totals">
+                        <div
+                            className={classNames(
+                                'pre-check-totals',
+                                !showMoreRecordsInfo && 'pre-check-totals-hide-mobile',
+                            )}>
                             <div className="block block-key-value-list">
                                 <div className="block-key-value-list-item">
                                     <div className="key-value-list-item-label">
@@ -328,25 +372,12 @@ export default function FundsPreCheck() {
                             </div>
                         </div>
 
-                        <div className="pre-check-actions">
-                            <button
-                                className="button button-download button-fill button-sm"
-                                type="button"
-                                onClick={downloadPDF}>
-                                {translate('pre_check.download_pdf')}
-                            </button>
-                            <button
-                                className="button button-light button-fill button-sm"
-                                type="button"
-                                onClick={changeAnswers}>
-                                {translate('pre_check.change_answers')}
-                            </button>
-                        </div>
+                        <PreCheckActions />
                     </Fragment>
                 )}
             </div>
         ),
-        [activeStepIndex, changeAnswers, downloadPDF, preChecks, totals, translate],
+        [PreCheckActions, activeStepIndex, preChecks, showMoreRecordsInfo, totals, translate],
     );
 
     return (
@@ -365,61 +396,35 @@ export default function FundsPreCheck() {
                             </div>
 
                             {!totals && (
-                                <div className="block-progress-pie">
-                                    <div className="progress-pie">
-                                        <ProgressPie
-                                            attrImg={{ style: { width: '70px' } }}
-                                            title={`${activeStepIndex + 1} ${translate('pre_check.of')} ${preChecks.length}`}
-                                            size={100}
-                                            progress={(activeStepIndex + 1) / preChecks.length}
-                                            color="#315EFD"
-                                            backgroundColor="#D9D9D9"
-                                            strokeWidth={0}
-                                        />
-                                        <div className="progress-pie-text">
-                                            {activeStepIndex + 1} {translate('pre_check.of')} {preChecks.length}
-                                        </div>
-                                    </div>
-                                    <div className="progress-pie-info">
-                                        <div className="progress-pie-info-title">
-                                            {preChecks?.[activeStepIndex]?.title_short}
-                                        </div>
-                                        {preChecks[activeStepIndex]?.record_types?.map((record, index) => (
-                                            <div key={index} className="progress-pie-info-details">
-                                                <div className="progress-pie-info-details-key">
-                                                    {record.title_short}: &nbsp;
-                                                </div>
-                                                <div className="progress-pie-info-details-value">
-                                                    {record?.input_value || translate('pre_check.no_value')}
-                                                </div>
-                                            </div>
-                                        ))}
-                                    </div>
-                                    <div className="progress-pie-show-details">
-                                        <button
-                                            type="button"
-                                            className="button button-text button-xs"
-                                            onClick={() => setShowMorePreCheckInfo(false)}
-                                            onCompositionEnd={() => setShowMorePreCheckInfo(!showMorePreCheckInfo)}
-                                            aria-expanded={showMorePreCheckInfo}
-                                            aria-controls={'preCheckMoreInfo'}>
-                                            {showMorePreCheckInfo ? (
-                                                <Fragment>
-                                                    {translate('pre_check.show_less')}
-                                                    <em className="mdi mdi-chevron-up icon-right"></em>
-                                                </Fragment>
-                                            ) : (
-                                                <Fragment>
-                                                    {translate('pre_check.show_more')}
-                                                    <em className="mdi mdi-chevron-down icon-right" />
-                                                </Fragment>
-                                            )}
-                                        </button>
+                                <div className="pre-check-mobile-progress">
+                                    <div className="pre-check-mobile-progress-title">
+                                        {translate('pre_check.progress', {
+                                            step: activeStepIndex + 1,
+                                            total: preChecks.length,
+                                        })}
                                     </div>
+                                    <a
+                                        type="button"
+                                        className="pre-check-mobile-progress-collapse"
+                                        onClick={(e) => {
+                                            e?.preventDefault();
+                                            setShowMorePreCheckInfo(!showMorePreCheckInfo);
+                                        }}
+                                        aria-expanded={showMorePreCheckInfo}
+                                        aria-controls={'preCheckMoreInfo'}>
+                                        Alle stappen bekijken
+                                        {showMorePreCheckInfo ? (
+                                            <em className="mdi mdi-chevron-up" />
+                                        ) : (
+                                            <em className="mdi mdi-chevron-down" />
+                                        )}
+                                    </a>
                                 </div>
                             )}
 
-                            {showMorePreCheckInfo && <PreCheckProgress id={'preCheckMoreInfo'} />}
+                            {(showMorePreCheckInfo || totals) && (
+                                <PreCheckProgress id={'preCheckMoreInfo'} title={false} />
+                            )}
                         </div>
 
                         <div className="showcase-layout">
@@ -670,9 +675,7 @@ export default function FundsPreCheck() {
                                                             preCheckRecord.record_type.key,
                                                         ) && (
                                                             <div className="form-error">
-                                                                {translate('pre_check.record_required', {
-                                                                    title: preCheckRecord?.title,
-                                                                })}
+                                                                {translate('pre_check.record_required')}
                                                             </div>
                                                         )}
                                                     </div>
diff --git a/react/src/webshop/i18n/nl/pages/pre_check.mjs b/react/src/webshop/i18n/nl/pages/pre_check.mjs
index 5a995d774..16c8dd161 100644
--- a/react/src/webshop/i18n/nl/pages/pre_check.mjs
+++ b/react/src/webshop/i18n/nl/pages/pre_check.mjs
@@ -3,7 +3,7 @@ export default {
         home: 'Home',
         check: 'Regelingencheck',
     },
-    of: 'van',
+    progress: 'Stap {{step}} van {{total}}',
     no_value: '---',
     show_more: 'Toon meer',
     show_less: 'Toon minder',
diff --git a/react/src/webshop/i18n/translated/ar.json b/react/src/webshop/i18n/translated/ar.json
index fdefe8ed3..05584eb7e 100644
--- a/react/src/webshop/i18n/translated/ar.json
+++ b/react/src/webshop/i18n/translated/ar.json
@@ -3421,13 +3421,12 @@
     },
     "pre_check": {
         "breadcrumb": {
-            "check": "التحقق من الأواني",
-            "home": "الصفحة الرئيسية"
+            "home": "الصفحة الرئيسية",
+            "check": "التحقق من المخطط"
         },
         "funds": "الأموال",
         "next_step": "التالي",
         "no_value": "---",
-        "of": "من",
         "previous_step": "الخطوة السابقة",
         "search": "بحث",
         "show_less": "اعرض أقل",
@@ -3441,7 +3440,8 @@
         "total_amount": "المبلغ الإجمالي",
         "total_offers": "إجمالي العرض",
         "your_data": "بياناتك",
-        "record_required": "{{ title }} الحقل إلزامي."
+        "progress": "الخطوة {{step}} من {{total}}",
+        "record_required": "من الإلزامي ملء هذا الحقل."
     },
     "navbar": {
         "vergoedingen": {
diff --git a/react/src/webshop/i18n/translated/de.json b/react/src/webshop/i18n/translated/de.json
index 90acd015e..13b9b0886 100644
--- a/react/src/webshop/i18n/translated/de.json
+++ b/react/src/webshop/i18n/translated/de.json
@@ -3421,13 +3421,12 @@
     },
     "pre_check": {
         "breadcrumb": {
-            "check": "Die Töpfe prüfen",
-            "home": "Startseite"
+            "home": "Startseite",
+            "check": "Schema prüfen"
         },
         "funds": "Mittel",
         "next_step": "Weiter",
         "no_value": "---",
-        "of": "von",
         "previous_step": "Vorheriger Schritt",
         "search": "Suche",
         "show_less": "Weniger anzeigen",
@@ -3441,7 +3440,8 @@
         "total_amount": "Gesamtbetrag",
         "total_offers": "Gesamtes Angebot",
         "your_data": "Ihre Daten",
-        "record_required": "{{ title }} Das Feld ist obligatorisch."
+        "progress": "Schritt {{step}} von {{total}}",
+        "record_required": "Das Ausfüllen dieses Feldes ist obligatorisch."
     },
     "navbar": {
         "vergoedingen": {
diff --git a/react/src/webshop/i18n/translated/en-US.json b/react/src/webshop/i18n/translated/en-US.json
index 38d865f05..c3e02f9e9 100644
--- a/react/src/webshop/i18n/translated/en-US.json
+++ b/react/src/webshop/i18n/translated/en-US.json
@@ -3421,13 +3421,12 @@
     },
     "pre_check": {
         "breadcrumb": {
-            "check": "The Pots check",
-            "home": "Home"
+            "home": "Home",
+            "check": "Scheme check"
         },
         "funds": "Funds",
         "next_step": "Next",
         "no_value": "---",
-        "of": "from",
         "previous_step": "Previous step",
         "search": "Search",
         "show_less": "Show less",
@@ -3441,7 +3440,8 @@
         "total_amount": "Total amount",
         "total_offers": "Total supply",
         "your_data": "Your data",
-        "record_required": "The {{ title }} field is required."
+        "progress": "Step {{step}} of {{total}}",
+        "record_required": "It is mandatory to fill in this field."
     },
     "navbar": {
         "vergoedingen": {
diff --git a/react/src/webshop/i18n/translated/fr.json b/react/src/webshop/i18n/translated/fr.json
index ab72893eb..d0df84968 100644
--- a/react/src/webshop/i18n/translated/fr.json
+++ b/react/src/webshop/i18n/translated/fr.json
@@ -3421,13 +3421,12 @@
     },
     "pre_check": {
         "breadcrumb": {
-            "check": "Les Pots vérifient",
-            "home": "Accueil"
+            "home": "Accueil",
+            "check": "Contrôle du régime"
         },
         "funds": "Fonds",
         "next_step": "Suivant",
         "no_value": "---",
-        "of": "de",
         "previous_step": "Étape précédente",
         "search": "Recherche",
         "show_less": "Montrer moins",
@@ -3441,7 +3440,8 @@
         "total_amount": "Montant total",
         "total_offers": "Offre totale",
         "your_data": "Vos données",
-        "record_required": "{{ title }} Ce champ est obligatoire."
+        "progress": "Étape {{step}} de {{total}}",
+        "record_required": "Ce champ est obligatoire."
     },
     "navbar": {
         "vergoedingen": {
diff --git a/react/src/webshop/i18n/translated/pl.json b/react/src/webshop/i18n/translated/pl.json
index c761c2dbf..55f464071 100644
--- a/react/src/webshop/i18n/translated/pl.json
+++ b/react/src/webshop/i18n/translated/pl.json
@@ -3421,13 +3421,12 @@
     },
     "pre_check": {
         "breadcrumb": {
-            "check": "Kontrola garnków",
-            "home": "Strona główna"
+            "home": "Strona główna",
+            "check": "Kontrola programu"
         },
         "funds": "Fundusze",
         "next_step": "Następny",
         "no_value": "---",
-        "of": "z",
         "previous_step": "Poprzedni krok",
         "search": "Wyszukiwanie",
         "show_less": "Pokaż mniej",
@@ -3441,7 +3440,8 @@
         "total_amount": "Całkowita kwota",
         "total_offers": "Całkowita oferta",
         "your_data": "Twoje dane",
-        "record_required": "{{ title }} Pole jest obowiązkowe."
+        "progress": "Krok {{step}} z {{total}}",
+        "record_required": "Wypełnienie tego pola jest obowiązkowe."
     },
     "navbar": {
         "vergoedingen": {
diff --git a/react/src/webshop/i18n/translated/ru.json b/react/src/webshop/i18n/translated/ru.json
index f717141d9..4bb9487bf 100644
--- a/react/src/webshop/i18n/translated/ru.json
+++ b/react/src/webshop/i18n/translated/ru.json
@@ -1257,7 +1257,7 @@
             "show_less": "Показать меньше",
             "show_more": "Показать еще",
             "total": "Всего",
-            "view_explanation": "Посмотреть объяснение",
+            "view_explanation": "Посмотреть",
             "why": "Почему?",
             "activate": "Активируйте"
         },
@@ -3421,13 +3421,12 @@
     },
     "pre_check": {
         "breadcrumb": {
-            "check": "Кастрюли проверяют",
-            "home": "Главная"
+            "home": "Главная",
+            "check": "Проверка схемы"
         },
         "funds": "Средства",
         "next_step": "Следующий",
         "no_value": "---",
-        "of": "с сайта",
         "previous_step": "Предыдущий шаг",
         "search": "Поиск",
         "show_less": "Показать меньше",
@@ -3441,7 +3440,8 @@
         "total_amount": "Общая сумма",
         "total_offers": "Общее предложение",
         "your_data": "Ваши данные",
-        "record_required": "{{ title }} Поле является обязательным для заполнения."
+        "progress": "Шаг {{step}} из {{total}}",
+        "record_required": "Это поле обязательно для заполнения."
     },
     "navbar": {
         "vergoedingen": {
diff --git a/react/src/webshop/i18n/translated/tr.json b/react/src/webshop/i18n/translated/tr.json
index e9a79e4cb..19bcc9b95 100644
--- a/react/src/webshop/i18n/translated/tr.json
+++ b/react/src/webshop/i18n/translated/tr.json
@@ -3421,13 +3421,12 @@
     },
     "pre_check": {
         "breadcrumb": {
-            "check": "Tencere kontrolü",
-            "home": "Ev"
+            "home": "Ev",
+            "check": "Şema kontrolü"
         },
         "funds": "Fonlar",
         "next_step": "Sonraki",
         "no_value": "---",
-        "of": "itibaren",
         "previous_step": "Önceki adım",
         "search": "Arama",
         "show_less": "Daha az göster",
@@ -3441,7 +3440,8 @@
         "total_amount": "Toplam tutar",
         "total_offers": "Toplam teklif",
         "your_data": "Verileriniz",
-        "record_required": "{{ title }} Bu alan zorunludur."
+        "progress": "Adım {{step}} of {{total}}",
+        "record_required": "Bu alanın doldurulması zorunludur."
     },
     "navbar": {
         "vergoedingen": {
diff --git a/react/src/webshop/i18n/translated/uk.json b/react/src/webshop/i18n/translated/uk.json
index ba183b526..6dfa67322 100644
--- a/react/src/webshop/i18n/translated/uk.json
+++ b/react/src/webshop/i18n/translated/uk.json
@@ -1257,7 +1257,7 @@
             "show_less": "Показати менше",
             "show_more": "Показати більше",
             "total": "Всього",
-            "view_explanation": "Переглянути пояснення",
+            "view_explanation": "Переглянути",
             "why": "Чому?",
             "activate": "Активувати"
         },
@@ -3421,13 +3421,12 @@
     },
     "pre_check": {
         "breadcrumb": {
-            "check": "Перевірка горщиків",
-            "home": "Головна"
+            "home": "Головна",
+            "check": "Перевірка схеми"
         },
         "funds": "Кошти",
         "next_step": "Далі",
         "no_value": "---",
-        "of": "від",
         "previous_step": "Попередній крок",
         "search": "Пошук",
         "show_less": "Показати менше",
@@ -3441,7 +3440,8 @@
         "total_amount": "Загальна сума",
         "total_offers": "Загальна пропозиція",
         "your_data": "Ваші дані",
-        "record_required": "{{ title }} Поле обов'язкове для заповнення."
+        "progress": "Крок {{step}} від {{total}}",
+        "record_required": "Заповнення цього поля є обов'язковим."
     },
     "navbar": {
         "vergoedingen": {
diff --git a/translations/cache/cache.json b/translations/cache/cache.json
index 2f6369bc4..0dbec6151 100644
--- a/translations/cache/cache.json
+++ b/translations/cache/cache.json
@@ -5365,7 +5365,7 @@
     ],
     [
         "pre_check.breadcrumb.check",
-        "De Potjes check"
+        "Regelingencheck"
     ],
     [
         "pre_check.breadcrumb.home",
@@ -5391,17 +5391,17 @@
         "pre_check.no_value",
         "---"
     ],
-    [
-        "pre_check.of",
-        "van"
-    ],
     [
         "pre_check.previous_step",
         "Vorige stap"
     ],
+    [
+        "pre_check.progress",
+        "Stap {{step}} van {{total}}"
+    ],
     [
         "pre_check.record_required",
-        "Het {{ title }} veld is verplicht."
+        "Het is verplicht om dit veld in te vullen."
     ],
     [
         "pre_check.search",

From f9a944c6e34b711912b72f7b6f685784015f1699 Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Sat, 12 Apr 2025 16:16:50 +0300
Subject: [PATCH 06/23] update implementations css variables, minor fixes and
 feedback

---
 package.json                                  |   1 +
 .../scss/_common/blocks/block-markdown.scss   |   4 +
 .../scss/includes/blocks/block-markdown.scss  |   4 +
 .../blocks/block-pre-check-banner.scss        |   2 +-
 .../scss/includes/layout/_footer.scss         |   2 +-
 .../includes/sections/section-pre-check.scss  |   7 +
 .../scss/style-webshop-berg_en_dal-vars.scss  | 303 +++++++++++++++-
 .../scss/style-webshop-berkelland-vars.scss   | 294 ++++++++++++++-
 .../scss/style-webshop-ede-vars.scss          | 303 +++++++++++++++-
 .../scss/style-webshop-eemsdelta-vars.scss    | 311 ++++++++++++++--
 .../style-webshop-geertruidenberg-vars.scss   | 319 ++++++++++++++--
 .../scss/style-webshop-general-vars.scss      |   8 +-
 .../style-webshop-goereeoverflakkee-vars.scss | 281 ++++++++++++---
 .../scss/style-webshop-groningen-vars.scss    | 340 +++++++++++++++---
 ...style-webshop-hartvanwestbrabant-vars.scss | 274 ++++++++++++--
 .../scss/style-webshop-heumen-vars.scss       | 312 +++++++++++++++-
 .../scss/style-webshop-kerstpakket-vars.scss  | 316 +++++++++++++++-
 .../style-webshop-midden_drenthe-vars.scss    | 295 ++++++++++++++-
 .../style-webshop-noordoostpolder-vars.scss   | 293 +++++++++++++--
 .../scss/style-webshop-oostgelre-vars.scss    | 278 +++++++++++++-
 .../scss/style-webshop-potjeswijzer-vars.scss | 265 ++++++++++++--
 .../scss/style-webshop-schagen-vars.scss      | 302 ++++++++++++++--
 .../scss/style-webshop-vergoedingen-vars.scss | 304 +++++++++++++---
 .../scss/style-webshop-waalwijk-vars.scss     | 307 +++++++++++++++-
 .../scss/style-webshop-wadenheuvel-vars.scss  | 321 +++++++++++++++--
 .../scss/style-webshop-winterswijk-vars.scss  | 271 +++++++++++++-
 react/assets/forus-webshop/scss/webshop.scss  |   1 +
 .../components/elements/sections/Section.tsx  |   2 +
 .../webshop/components/pages/auth/Start.tsx   |   1 +
 .../webshop/components/pages/home/Home.tsx    |   8 +-
 .../webshop/components/pages/me-app/MeApp.tsx |  61 ++--
 .../components/pages/sitemap/Sitemap.tsx      | 164 +++++----
 32 files changed, 5395 insertions(+), 559 deletions(-)
 create mode 100644 react/assets/forus-webshop/scss/includes/sections/section-pre-check.scss

diff --git a/package.json b/package.json
index 55dde2abc..9ebbf9712 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "main": "main.js",
   "scripts": {
     "start": "webpack serve --mode development",
+    "start-all": "webpack serve --mode development --env enable='webshop*,dashboard*,backend'",
     "start-dusk": "webpack serve --mode development --env enable='webshop.general,dashboard*'",
     "start-webshops": "webpack serve --mode development --env disable='dashboard*,backend' enable='webshop*'",
     "start-dashboards": "webpack serve --mode development --env disable='webshop*,backend' enable='dashboard*'",
diff --git a/react/assets/forus-platform/scss/_common/blocks/block-markdown.scss b/react/assets/forus-platform/scss/_common/blocks/block-markdown.scss
index f1633a256..f36d802e3 100644
--- a/react/assets/forus-platform/scss/_common/blocks/block-markdown.scss
+++ b/react/assets/forus-platform/scss/_common/blocks/block-markdown.scss
@@ -39,6 +39,10 @@
         margin-bottom: 15px;
         text-align: left;
         font: inherit;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
     }
 
     ul,
diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-markdown.scss b/react/assets/forus-webshop/scss/includes/blocks/block-markdown.scss
index 3437699b5..82d4a6989 100644
--- a/react/assets/forus-webshop/scss/includes/blocks/block-markdown.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-markdown.scss
@@ -44,6 +44,10 @@
         margin-bottom: 15px;
         text-align: left;
         font: inherit;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
     }
 
     ul,
diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-pre-check-banner.scss b/react/assets/forus-webshop/scss/includes/blocks/block-pre-check-banner.scss
index 22882b5c5..000a48d1b 100644
--- a/react/assets/forus-webshop/scss/includes/blocks/block-pre-check-banner.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-pre-check-banner.scss
@@ -4,7 +4,7 @@
     border-radius: var(--border-radius);
     background: #fff;
     overflow: hidden;
-    margin: 0 0 30px;
+    margin: 0 0;
 
     .pre-check-banner-media {
         display: flex;
diff --git a/react/assets/forus-webshop/scss/includes/layout/_footer.scss b/react/assets/forus-webshop/scss/includes/layout/_footer.scss
index 8f91c37f5..e02815931 100644
--- a/react/assets/forus-webshop/scss/includes/layout/_footer.scss
+++ b/react/assets/forus-webshop/scss/includes/layout/_footer.scss
@@ -156,7 +156,7 @@
             color: var(--footer_color_link);
 
             &:hover {
-                color: var(--footer_color_link_hover);
+                color: var(--footer_color_link);
             }
         }
     }
diff --git a/react/assets/forus-webshop/scss/includes/sections/section-pre-check.scss b/react/assets/forus-webshop/scss/includes/sections/section-pre-check.scss
new file mode 100644
index 000000000..51590fb7a
--- /dev/null
+++ b/react/assets/forus-webshop/scss/includes/sections/section-pre-check.scss
@@ -0,0 +1,7 @@
+.section.section-pre-check {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    padding: var(--section-pre-check-padding);
+    background: var(--section-pre-check-background);
+}
diff --git a/react/assets/forus-webshop/scss/style-webshop-berg_en_dal-vars.scss b/react/assets/forus-webshop/scss/style-webshop-berg_en_dal-vars.scss
index 515b6b8d7..c176a0c8f 100644
--- a/react/assets/forus-webshop/scss/style-webshop-berg_en_dal-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-berg_en_dal-vars.scss
@@ -6,43 +6,112 @@ $primaryColor: #15694B;
 $primaryColorLight: #1B8761;
 
 :root {
+    --zoom: 100%;
+    --zoom-mobile: 100%;
+
+    --border-color: #dddddd;
+    --border-radius: 0;
+    --box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.04), 0px 12px 12px 0px rgba(0, 0, 0, 0.08);
+
+    --color-primary: #{$primaryColor};
+    --color-primary-light: #{$primaryColorLight};
+
+    --color-default: #305dfb;
+    --color-default-light: #4c74ff;
+
+    --color-danger: #e63b3b;
+
     // navbar
+    --navbar-box-shadow: none;
+
+    --navbar-menu-gap: 22px;
+    --navbar-menu-order: 1;
     --navbar-menu-background: #F5F5F5;
+
+    --navbar-search-gap: 20px;
+    --navbar-search-order: 2;
+    --navbar-search-padding: 20px 0px;
+    --navbar-search-background: #ffffff;
+    --navbar-search-border-bottom: 1px solid var(--border-color);
+
+    --navbar-menu-item-font: 400 18px/21px var(--base-font);
+    --navbar-menu-item-color: #282b39;
     --navbar-menu-item-color-hover: #{$primaryColor};
+    --navbar-menu-item-padding: 16px 0;
+    --navbar-menu-item-background: transparent;
+    --navbar-menu-item-background-hover: transparent;
+
+    --navbar-menu-separator-opacity: 0.25;
+    --navbar-menu-separator-background: var(--navbar-menu-item-color);
+
+    --navbar-auth-font: 600 16px/20px var(--base-font);
+
+    --navbar-logo-height: 50px;
+
+    // Nav item line position
+    --navbar-menu-item-line-position-top: 0;
+    --navbar-menu-item-line-position-bottom: auto;
+
+    // wrapper
+    --wrapper-width: calc(1280px + 50px);
+    --wrapper-padding: 20px;
+
+    // Outline
+    --focus-outline: 2px solid #315efd;
+    --focus-outline-offset: 2px;
+    --focus-box-shadow: 0 0 0 3px white;
 
     // navbar (auth) (default button)
+    --tc-auth-menu: #305dfb;
     --tc-auth-btn: #fff;
     --btn-auth-bg: #7A0138;
     --btn-auth-border: #7A0138;
+    --auth-avater-bg: #305dfb;
+    --auth-avater-svg: #fff;
 
     // navbar (start modal primary)
+    --tc-start-btn: #fff;
     --btn-start-bg: #{$primaryColor};
+    --btn-start-btn: #305dfb;
     --btn-start-border: #{$primaryColor};
 
+    // header background
+    --bg-values: url('../img/splash-top-b.png') no-repeat 100% 0;
+
     // Header banner
     --header-banner-pane-banner-padding: 40px 50px;
     --header-banner-pane-banner-max-width: 760px;
     --header-banner-pane-banner-background: #fff;
+    --header-banner-pane-banner-border-color: initial;
     --header-banner-pane-banner-border-radius: var(--border-radius);
 
-    --body-background: #fff;
-    --border-radius: 0;
-    --box-shadow: 0px 6px 15px 0px rgba(0, 0, 0, 0.04), 0px 12px 12px 0px rgba(0, 0, 0, 0.08);
+    // base font
+    --base-font: 'Open Sans', arial, sans-serif;
 
-    // Paginator
-    --paginator-button-active-background: #282B39;
-    --paginator-button-hover-background: #{rgba(#282B39, 0.8)};
+    // text color
+    --tc: #282b39;
+    --htc: var(--tc);
+    --tc-var: inherit;
+    --tc-link: inherit;
+    --tc-muted: #595959;
 
-    // Showcase
-    --showcase-item-shadow: none;
-    --showcase-item-hover-shadow: none;
-    --showcase-aside-shadow: none;
+    // heading font
+    --heading-font-family: var(--base-font);
+    --heading-font: 700 40px/60px var(--heading-font-family);
+    --heading-color: var(--tc);
+    --heading-pane-font: 700 22px/30px var(--heading-font-family);
+
+    // base color
+    --bc: #d13b3b;
+
+    // background color
+    --body-background: #fff;
 
     // footer color
+    --footer_padding: 0;
     --footer_background: transparent;
     --footer_color: #FFFFFF;
     --footer_color_link: #FFFFFF;
-    --footer_color_link_hover: #FFFFFF;
 
     --footer_social_color: #FFFFFF;
     --footer_social_background: transparent;
@@ -50,11 +119,29 @@ $primaryColorLight: #1B8761;
     --footer_social_border_radius: 0;
 
     --footer-copyright-color: #fff;
+    --footer-copyright-font: 400 14px/30px var(--base-font);
     --footer-copyright-background: #1B8761;
     --footer-copyright-border-color: #1B8761;
+    --footer-copyright-padding: 40px;
 
-    --color-primary: #{$primaryColor};
-    --color-primary-light: #{$primaryColorLight};
+    // not displayed
+    --footer_display: none;
+
+    // product image
+    --product-image-padding: 10px 0 0 10px;
+
+    // Markdown
+    --markdown-font: 400 16px/24px var(--base-font);
+
+    // Forms
+    --form-control-color: #222222;
+    --form-control-background: #ffffff;
+    --form-control-border-color: #646464;
+    --form-control-border-color-focus: #282b39;
+    --form-control-placeholder-font: 400 13px/20px var(--base-font);
+    --form-control-placeholder-color: #535561;
+    --form-label-color: #595959;
+    --form-label-font: 700 11px/16px var(--base-font);
 
     // Search bar
     --color-search-icon-medium: #1B8761;
@@ -63,35 +150,197 @@ $primaryColorLight: #1B8761;
 
     --search-bar-point-color: #E5E5E5;
     --search-bar-point-radius: 0;
+
     --search-bar-input-radius: 0;
+    --search-bar-input-border: 1px solid var(--form-control-border-color);
+    --search-bar-input-background: #fff;
+    --search-bar-input-icon-color: #666666;
 
-    // Buttons
-    --button-border-radius: 0;
+    --search-bar-label-top: -7px;
+    --search-bar-label-left: 16px;
+    --search-bar-label-padding: 4px;
+    --search-bar-label-background: #ffffff;
+
+    // Dropdowns
+    --dropdown-item-font: 500 13px/20px var(--base-font);
+    --dropdown-item-color: #282b39;
+    --dropdown-item-background: #ffffff;
+    --dropdown-item-hover-color: #000000;
+    --dropdown-item-hover-background: #e5e5e5;
+
+    // Paginator
+    --paginator-border-radius: var(--border-radius);
+    --paginator-button-color: #282b39;
+    --paginator-button-border: #9e9e9e;
+    --paginator-button-background: #fff;
+    --paginator-button-hover-color: #fff;
+    --paginator-button-hover-background: #{rgba(#282B39, 0.8)};
+    --paginator-button-active-color: #fff;
+    --paginator-button-active-background: #282B39;
+    --paginator-button-disabled-color: #535561;
+    --paginator-button-disabled-border: #e5e5e5;
+    --paginator-button-disabled-background: #f5f5f5;
+
+    // Labels
+    --label-default-color: #fff;
+    --label-default-background: #595959;
+
+    --label-primary-color: #fff;
+    --label-primary-background: var(--color-primary);
+
+    --label-danger-color: #030304;
+    --label-danger-background: #d38c87;
+
+    --label-success-color: #030304;
+    --label-success-background: #9bbfa1;
 
     // Label sets
+    --label-set-border-radius: var(--border-radius);
+    --label-set-border-color: #9e9e9e;
+    --label-set-color: #272525;
+    --label-set-background: #ffffff;
+    --label-set-active-color: #ffffff;
     --label-set-active-background: #7A0138;
+    --label-set-hover-color: #ffffff;
     --label-set-hover-background: #960145;
+    --label-set-focus-color: #272525;
+    --label-set-focus-background: #f4f5f7;
+    --label-set-focus-border-color: #9e9e9e;
+
+    // Buttons
+    --button-font: 700 16px/24px var(--base-font);
+    --button-color: #282b39;
+    --button-shadow: none;
+    --button-decoration: none;
+    --button-border-radius: 0;
+    --button-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+    --button-hover-decoration: none;
+    --button-disabled-color: #616161;
+    --button-disabled-background: #e5e5e5;
+
+    --button-primary-color: #fff;
+    --button-primary-border: 1px solid var(--color-primary);
+    --button-primary-decoration: none;
+    --button-primary-background: var(--color-primary);
+    --button-primary-hover-color: #fff;
+    --button-primary-hover-border: 1px solid var(--color-primary-light);
+    --button-primary-hover-decoration: none;
+    --button-primary-hover-background: var(--color-primary-light);
+
+    --button-primary-outline-color: var(--color-primary);
+    --button-primary-outline-border: 1px solid var(--color-primary);
+    --button-primary-outline-decoration: none;
+    --button-primary-outline-background: transparent;
+    --button-primary-outline-hover-color: #fff;
+    --button-primary-outline-hover-border: 1px solid var(--color-primary);
+    --button-primary-outline-hover-decoration: none;
+    --button-primary-outline-hover-background: var(--color-primary);
+
+    --button-read_more-color: var(--button-primary-color);
+    --button-read_more-border: var(--button-primary-border);
+    --button-read_more-decoration: var(--button-primary-decoration);
+    --button-read_more-background: var(--button-primary-background);
+    --button-read_more-hover-color: var(--button-primary-hover-color);
+    --button-read_more-hover-border: var(--button-primary-hover-border);
+    --button-read_more-hover-decoration: var(--button-primary-hover-decoration);
+    --button-read_more-hover-background: var(--button-primary-hover-background);
 
     // Sign up
+    --sign_up_accent_color: #282b39;
+    --sign_up_accent_color_light: #bdcbff;
+    --sign_up_link_color: #e60003;
     --sign_up_step_btns_color: var(--color-primary);
+    --sign_up_digid_btn_bkg: #e1e7ff;
+    --sign_up_digid_btn_text: #4b71ff;
+    --sign_up_digid_btn_border: none;
+    --sign_up_digid_btn_border_radius: 5px;
+    --sign_up_loader_icon_color: #282b39;
 
     //- Showcase
+    --showcase-aside-shadow: none;
+    --showcase-aside-padding: 20px;
+    --showcase-aside-background: #fff;
+    --showcase-aside-border: 1px solid #e5e5e5;
+    --showcase-aside-border-radius: var(--border-radius);
+
+    --showcase-item-shadow: none;
+    --showcase-item-background: var(--showcase-aside-background);
+    --showcase-item-border: var(--showcase-aside-border);
+    --showcase-item-border-radius: var(--showcase-aside-border-radius);
+    --showcase-item-hover-shadow: none;
+
+    --showcase-aside-button-color: var(--color-primary);
+    --showcase-aside-button-border: 1px solid var(--color-primary);
+    --showcase-aside-button-background: transparent;
+    --showcase-aside-button-hover-color: #fff;
+    --showcase-aside-button-hover-border: 1px solid var(--color-primary);
+    --showcase-aside-button-hover-background: var(--color-primary);
+
+    --showcase-fullscreen-bottom-offset: 115px;
+
+    --showcase-title-font: 600 18px/30px var(--heading-font-family);
+    --showcase-title-color: var(--tc);
+    --showcase-title-count-color: #fff;
     --showcase-title-count-background: #7A0138;
     --showcase-title-count-border-radius: 0;
 
+    // Breadcrumbs
+    --breadcrumb-size: 16px;
+    --breadcrumb-color: var(--color-primary);
+    --breadcrumb-color-active: #353535;
+    --breadcrumb-padding: 20px;
+
+    // Loader
+    --loader-background: #f5f5f5;
+    --loader-color: var(--color-primary);
+
     // Profile
+    --profile-menu-item-gap: 16px;
     --profile-menu-item-color: var(--tc);
-    --profile-menu-item-border-color: var(--border-color);
+    --profile-menu-item-color-icon: var(--profile-menu-item-color);
     --profile-menu-item-shadow: none;
+    --profile-menu-item-background: #ffffff;
+    --profile-menu-item-border-color: var(--border-color);
+    --profile-menu-item-border-radius: var(--border-radius);
+    --profile-menu-item-hover-color: #fff;
     --profile-menu-item-hover-shadow: var(--box-shadow);
+    --profile-menu-item-hover-background: var(--color-primary);
+    --profile-menu-item-hover-border-color: var(--color-primary);
+    --profile-menu-item-hover-border-radius: var(--border-radius);
+
+    // Vouchers
+    --vouchers-label-color: #646f79;
+    --vouchers-value-color: var(--tc);
+    --vouchers-organization-color: var(--tc);
 
     // Voucher card
     --voucher-card-action-color: #15694B;
+    --voucher-card-action-background: transparent;
     --voucher-card-action-border-color: #15694B;
     --voucher-card-action-border-radius: 0;
+    --voucher-card-action-hover-color: #fff;
     --voucher-card-action-hover-background: #15694B;
     --voucher-card-action-hover-border-color: #15694B;
 
+    // Products
+    --products-title-color: var(--tc);
+    --products-title-hover-color: var(--tc);
+    --products-text-color: var(--tc);
+
+    // Product
+    --product-title-font: 700 22px/28px var(--heading-font-family);
+    --product-title-color: var(--tc);
+
+    // Faq
+    --faq-width: 820px;
+    --faq-align: center;
+    --faq-header-color: #00122a;
+    --faq-header-color-hover: var(--color-primary);
+
+    // Map
+    --map-title-color: #0B0E12;
+    --map-title-font: 700 40px var(--heading-font-family);
+
     // Sections
     --section-padding: 0 0 30px;
     --section-background: transparent;
@@ -107,6 +356,8 @@ $primaryColorLight: #1B8761;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 30px 0;
     --section-footer-background: #15694B;
+    --section-pre-check-padding: 0 0 30px;
+    --section-pre-check-background: var(--section-background);
     --section-profile-padding: var(--section-padding);
     --section-profile-background: var(--section-background);
     --section-products-padding: var(--section-padding);
@@ -115,4 +366,24 @@ $primaryColorLight: #1B8761;
     --section-breadcrumbs-background: var(--section-background);
     --section-voucher-details-padding: var(--section-padding);
     --section-voucher-details-background: var(--section-background);
+
+    // Search bar
+    --search-result-sidebar-item-active-color: #a80a2d;
+    --search-result-sidebar-item-active-background: #fff;
+
+    // CMS funds
+    --cms-funds-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-title-color: var(--htc);
+    --cms-funds-label-font-size: 11px;
+    --cms-funds-label-background: var(--color-primary);
+
+    --cms-funds-compact-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-compact-title-color: var(--htc);
+
+    --cms-funds-link-color: var(--color-primary);
+    --cms-funds-link-font: 600 18px/20px var(--base-font);
+
+    // Section order
+    --order-page-voucher-map: 0;
+    --order-page-voucher-products: 0;
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-berkelland-vars.scss b/react/assets/forus-webshop/scss/style-webshop-berkelland-vars.scss
index 7ab9cd625..179512c07 100644
--- a/react/assets/forus-webshop/scss/style-webshop-berkelland-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-berkelland-vars.scss
@@ -6,22 +6,68 @@ $primaryColor: #041c37;
 $primaryColorLight: #004d93;
 
 :root {
+    --zoom: 100%;
+    --zoom-mobile: 100%;
+
     --border-color: #ebedf0;
     --border-radius: 0px;
     --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
 
+    --color-primary: #{$primaryColor};
+    --color-primary-light: #{$primaryColorLight};
+
+    --color-default: #004d93;
+    --color-default-light: 1px solid #041c37;
+
+    --color-danger: #e63b3b;
+
     // navbar
+    --navbar-box-shadow: none;
+
+    --navbar-menu-gap: 22px;
+    --navbar-menu-order: 1;
     --navbar-menu-background: #f5f5f5;
-    --navbar-menu-item-color-hover: #004d93;
-    --navbar-menu-item-color: #282b39;
+
+    --navbar-search-gap: 20px;
+    --navbar-search-order: 2;
     --navbar-search-padding: 30px 0px;
+    --navbar-search-background: #ffffff;
+    --navbar-search-border-bottom: 1px solid var(--border-color);
+
+    --navbar-menu-item-font: 400 18px/21px var(--base-font);
+    --navbar-menu-item-color: #282b39;
+    --navbar-menu-item-color-hover: #004d93;
+    --navbar-menu-item-padding: 16px 0;
+    --navbar-menu-item-background: transparent;
+    --navbar-menu-item-background-hover: transparent;
+
+    --navbar-menu-separator-opacity: 0.25;
+    --navbar-menu-separator-background: var(--navbar-menu-item-color);
+
+    --navbar-auth-font: 600 16px/20px var(--base-font);
+
     --navbar-logo-height: 50px;
 
-    // navbar (auth)
+    // Nav item line position
+    --navbar-menu-item-line-position-top: 0;
+    --navbar-menu-item-line-position-bottom: auto;
+
+    // wrapper
+    --wrapper-width: calc(1280px + 50px);
+    --wrapper-padding: 20px;
+
+    // Outline
+    --focus-outline: 2px solid #315efd;
+    --focus-outline-offset: 2px;
+    --focus-box-shadow: 0 0 0 3px white;
+
+    // navbar (auth) (default button)
     --tc-auth-menu: #004d93;
     --tc-auth-btn: #004d93;
     --btn-auth-bg: #fff;
     --btn-auth-border: #004d93;
+    --auth-avater-bg: #305dfb;
+    --auth-avater-svg: #fff;
 
     // navbar (start modal primary)
     --tc-start-btn: #fff;
@@ -29,16 +75,31 @@ $primaryColorLight: #004d93;
     --btn-start-btn: #004d93;
     --btn-start-border: transparent;
 
-    // header attributes
+    // header background
     --bg-values: url('../img/splash-top-b.jpg') no-repeat 100% 0;
 
+    // Header banner
+    --header-banner-pane-banner-padding: 50px 0;
+    --header-banner-pane-banner-max-width: 650px;
+    --header-banner-pane-banner-background: transparent;
+    --header-banner-pane-banner-border-color: initial;
+    --header-banner-pane-banner-border-radius: initial;
+
     // base font
     --base-font: 'Source Sans Pro', Arial, Verdana, 'Sans Serif';
 
     // text color
     --tc: rgb(39, 37, 37);
+    --htc: var(--tc);
     --tc-var: #fff;
     --tc-link: inherit;
+    --tc-muted: #595959;
+
+    // heading font
+    --heading-font-family: var(--base-font);
+    --heading-font: 700 40px/60px var(--heading-font-family);
+    --heading-color: var(--tc);
+    --heading-pane-font: 700 22px/30px var(--heading-font-family);
 
     // base color
     --bc: #4990b5;
@@ -47,7 +108,15 @@ $primaryColorLight: #004d93;
     --body-background: #ececec;
 
     // footer color
+    --footer_padding: 0;
+    --footer_background: transparent;
     --footer_color: #4e4d40;
+    --footer_color_link: #004d93;
+
+    --footer_social_color: var(--footer_color);
+    --footer_social_background: transparent;
+    --footer_social_border_color: var(--footer_color);
+    --footer_social_border_radius: var(--border-radius);
 
     --footer-copyright-color: var(--footer_color_link);
     --footer-copyright-font: 400 14px/30px var(--base-font);
@@ -55,29 +124,100 @@ $primaryColorLight: #004d93;
     --footer-copyright-border-color: var(--border-color);
     --footer-copyright-padding: 40px;
 
-    // Displayed or not
+    // not displayed
     --footer_display: block;
 
     // product image
     --product-image-padding: 10px 0 0 10px;
 
-    // placeholder text color
-    --form-control-placeholder-color: #515152;
-
-    --color-primary: #{$primaryColor};
-    --color-primary-light: #{$primaryColorLight};
+    // Markdown
+    --markdown-font: 400 16px/24px var(--base-font);
 
-    --color-default: #004d93;
-    --color-default-light: 1px solid #041c37;
+    // Forms
+    --form-control-color: #222222;
+    --form-control-background: #ffffff;
+    --form-control-border-color: #646464;
+    --form-control-border-color-focus: #282b39;
+    --form-control-placeholder-font: 400 13px/20px var(--base-font);
+    --form-control-placeholder-color: #515152;
+    --form-label-color: #595959;
+    --form-label-font: 700 11px/16px var(--base-font);
 
+    // Search bar
     --color-search-icon-medium: #{$primaryColor};
     --color-search-icon-dark: #{darken($primaryColor, 10%)};
     --color-search-icon-light: #{lighten($primaryColor, 25%)};
 
+    --search-bar-point-color: #ececec;
+    --search-bar-point-radius: 0px;
+
+    --search-bar-input-radius: var(--border-radius);
+    --search-bar-input-border: 1px solid var(--form-control-border-color);
+    --search-bar-input-background: #fff;
+    --search-bar-input-icon-color: #666666;
+
+    --search-bar-label-top: -7px;
+    --search-bar-label-left: 16px;
+    --search-bar-label-padding: 4px;
+    --search-bar-label-background: #ffffff;
+
+    // Dropdowns
+    --dropdown-item-font: 500 13px/20px var(--base-font);
+    --dropdown-item-color: #282b39;
+    --dropdown-item-background: #ffffff;
+    --dropdown-item-hover-color: #000000;
+    --dropdown-item-hover-background: #e5e5e5;
+
+    // Paginator
+    --paginator-border-radius: var(--border-radius);
+    --paginator-button-color: #282b39;
+    --paginator-button-border: #9e9e9e;
+    --paginator-button-background: #fff;
+    --paginator-button-hover-color: #fff;
+    --paginator-button-hover-background: #535561;
+    --paginator-button-active-color: #fff;
+    --paginator-button-active-background: #292b39;
+    --paginator-button-disabled-color: #535561;
+    --paginator-button-disabled-border: #e5e5e5;
+    --paginator-button-disabled-background: #f5f5f5;
+
+    // Labels
+    --label-default-color: #fff;
+    --label-default-background: #595959;
+
+    --label-primary-color: #fff;
+    --label-primary-background: var(--color-primary);
+
+    --label-danger-color: #030304;
+    --label-danger-background: #d38c87;
+
+    --label-success-color: #030304;
+    --label-success-background: #9bbfa1;
+
     // Label sets
+    --label-set-border-radius: var(--border-radius);
+    --label-set-border-color: #9e9e9e;
+    --label-set-color: #272525;
+    --label-set-background: #ffffff;
+    --label-set-active-color: #ffffff;
+    --label-set-active-background: var(--color-primary);
+    --label-set-hover-color: #ffffff;
     --label-set-hover-background: #{rgba($primaryColor, 0.8)};
+    --label-set-focus-color: #272525;
+    --label-set-focus-background: #f4f5f7;
+    --label-set-focus-border-color: #9e9e9e;
 
     // Buttons
+    --button-font: 700 16px/24px var(--base-font);
+    --button-color: #282b39;
+    --button-shadow: none;
+    --button-decoration: none;
+    --button-border-radius: calc(var(--border-radius) * 0.75);
+    --button-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+    --button-hover-decoration: none;
+    --button-disabled-color: #616161;
+    --button-disabled-background: #e5e5e5;
+
     --button-primary-color: var(--tc-var);
     --button-primary-border: 1px solid var(--color-default);
     --button-primary-decoration: none;
@@ -87,12 +227,77 @@ $primaryColorLight: #004d93;
     --button-primary-hover-decoration: underline;
     --button-primary-hover-background: #ececec;
 
+    --button-primary-outline-color: var(--color-primary);
+    --button-primary-outline-border: 1px solid var(--color-primary);
+    --button-primary-outline-decoration: none;
+    --button-primary-outline-background: transparent;
+    --button-primary-outline-hover-color: #fff;
+    --button-primary-outline-hover-border: 1px solid var(--color-primary);
+    --button-primary-outline-hover-decoration: none;
+    --button-primary-outline-hover-background: var(--color-primary);
+
+    --button-read_more-color: var(--button-primary-color);
+    --button-read_more-border: var(--button-primary-border);
+    --button-read_more-decoration: var(--button-primary-decoration);
+    --button-read_more-background: var(--button-primary-background);
+    --button-read_more-hover-color: var(--button-primary-hover-color);
+    --button-read_more-hover-border: var(--button-primary-hover-border);
+    --button-read_more-hover-decoration: var(--button-primary-hover-decoration);
+    --button-read_more-hover-background: var(--button-primary-hover-background);
+
+    // Sign up
+    --sign_up_accent_color: #282b39;
+    --sign_up_accent_color_light: #bdcbff;
+    --sign_up_link_color: #e60003;
+    --sign_up_step_btns_color: var(--tc);
+    --sign_up_digid_btn_bkg: #e1e7ff;
+    --sign_up_digid_btn_text: #4b71ff;
+    --sign_up_digid_btn_border: none;
+    --sign_up_digid_btn_border_radius: 5px;
+    --sign_up_loader_icon_color: #282b39;
+
     //- Showcase
+    --showcase-aside-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
+    --showcase-aside-padding: 20px;
+    --showcase-aside-background: #fff;
     --showcase-aside-border: 1px solid #d2d2c7;
+    --showcase-aside-border-radius: var(--border-radius);
+
+    --showcase-item-shadow: var(--showcase-aside-shadow);
+    --showcase-item-background: var(--showcase-aside-background);
+    --showcase-item-border: var(--showcase-aside-border);
+    --showcase-item-border-radius: var(--showcase-aside-border-radius);
+    --showcase-item-hover-shadow: 2px 8px 14px 0px rgba(0, 0, 0, 0.1);
+
+    --showcase-aside-button-color: var(--color-primary);
+    --showcase-aside-button-border: 1px solid var(--color-primary);
+    --showcase-aside-button-background: transparent;
+    --showcase-aside-button-hover-color: #fff;
+    --showcase-aside-button-hover-border: 1px solid var(--color-primary);
+    --showcase-aside-button-hover-background: var(--color-primary);
+
     --showcase-fullscreen-bottom-offset: 135px;
 
+    --showcase-title-font: 600 18px/30px var(--heading-font-family);
+    --showcase-title-color: var(--tc);
+    --showcase-title-count-color: #fff;
+    --showcase-title-count-background: var(--color-primary);
+    --showcase-title-count-border-radius: calc(var(--border-radius) / 2);
+
+    // Breadcrumbs
+    --breadcrumb-size: 16px;
+    --breadcrumb-color: var(--color-primary);
+    --breadcrumb-color-active: #353535;
+    --breadcrumb-padding: 20px;
+
+    // Loader
+    --loader-background: #f5f5f5;
+    --loader-color: var(--color-primary);
+
     // Profile
+    --profile-menu-item-gap: 16px;
     --profile-menu-item-color: #fff;
+    --profile-menu-item-color-icon: var(--profile-menu-item-color);
     --profile-menu-item-shadow: none;
     --profile-menu-item-background: var(--color-default);
     --profile-menu-item-border-color: var(--color-default);
@@ -103,15 +308,28 @@ $primaryColorLight: #004d93;
     --profile-menu-item-hover-border-color: var(--color-default);
     --profile-menu-item-hover-border-radius: var(--border-radius);
 
-    // Login button
-    --login-button-background: #fff;
-
     // Vouchers
     --vouchers-label-color: #4c91b3;
+    --vouchers-value-color: var(--tc);
+    --vouchers-organization-color: var(--tc);
+
+    // Voucher card
+    --voucher-card-action-color: var(--color-primary);
+    --voucher-card-action-background: transparent;
+    --voucher-card-action-border-color: var(--color-primary);
+    --voucher-card-action-border-radius: 0px;
+    --voucher-card-action-hover-color: #fff;
+    --voucher-card-action-hover-background: var(--color-primary);
+    --voucher-card-action-hover-border-color: var(--color-primary);
 
     // Products
     --products-title-color: var(--color-default);
     --products-title-hover-color: var(--color-primary);
+    --products-text-color: var(--tc);
+
+    // Product
+    --product-title-font: 700 22px/28px var(--heading-font-family);
+    --product-title-color: var(--tc);
 
     // Faq
     --faq-width: 820px;
@@ -119,6 +337,52 @@ $primaryColorLight: #004d93;
     --faq-header-color: #00122a;
     --faq-header-color-hover: var(--color-default);
 
+    // Map
+    --map-title-color: #0B0E12;
+    --map-title-font: 700 40px var(--heading-font-family);
+
+    // Sections
+    --section-padding: 0 0 30px;
+    --section-background: transparent;
+
+    --section-title-font: 700 40px/60px var(--heading-font-family);
+    --section-title-align: center;
+
+    --section-cms-padding: var(--section-padding);
+    --section-cms-background: var(--section-background);
+    --section-map-padding: var(--section-padding);
+    --section-map-background: var(--section-background);
+    --section-faq-padding: var(--section-padding);
+    --section-faq-background: var(--section-background);
+    --section-footer-padding: 30px 0;
+    --section-footer-background: #fff;
+    --section-pre-check-padding: 0 0 30px;
+    --section-pre-check-background: var(--section-background);
+    --section-profile-padding: var(--section-padding);
+    --section-profile-background: var(--section-background);
+    --section-products-padding: var(--section-padding);
+    --section-products-background: var(--section-background);
+    --section-breadcrumbs-padding: 0;
+    --section-breadcrumbs-background: var(--section-background);
+    --section-voucher-details-padding: var(--section-padding);
+    --section-voucher-details-background: var(--section-background);
+
+    // Search bar
+    --search-result-sidebar-item-active-color: #a80a2d;
+    --search-result-sidebar-item-active-background: #fff;
+
+    // CMS funds
+    --cms-funds-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-title-color: var(--htc);
+    --cms-funds-label-font-size: 11px;
+    --cms-funds-label-background: var(--color-primary);
+
+    --cms-funds-compact-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-compact-title-color: var(--htc);
+
+    --cms-funds-link-color: var(--color-primary);
+    --cms-funds-link-font: 600 18px/20px var(--base-font);
+
     // Section order
     --order-page-voucher-map: 1;
     --order-page-voucher-products: 2;
diff --git a/react/assets/forus-webshop/scss/style-webshop-ede-vars.scss b/react/assets/forus-webshop/scss/style-webshop-ede-vars.scss
index 2bafb2373..758309617 100644
--- a/react/assets/forus-webshop/scss/style-webshop-ede-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-ede-vars.scss
@@ -9,25 +9,65 @@ $primaryColorLight: #3558a2;
     --zoom: 80%;
     --zoom-mobile: 100%;
 
+    --border-color: #dce0e0;
+    --border-radius: 0px;
+    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+
+    --color-primary: #{$primaryColor};
+    --color-primary-light: #{$primaryColorLight};
+
+    --color-default: #3558a2;
+    --color-default-light: #3558a2;
+
+    --color-danger: #e63b3b;
+
     // navbar
+    --navbar-box-shadow: none;
+
     --navbar-menu-gap: 12px;
     --navbar-menu-order: 2;
     --navbar-menu-background: #3558a2;
-    --navbar-menu-item-padding: 16px 10px;
+
+    --navbar-search-gap: 20px;
+    --navbar-search-order: 1;
+    --navbar-search-padding: 30px 0px;
+    --navbar-search-background: #ffffff;
+    --navbar-search-border-bottom: 1px solid var(--border-color);
+
+    --navbar-menu-item-font: 400 18px/21px var(--base-font);
     --navbar-menu-item-color: #ffffff;
     --navbar-menu-item-color-hover: #ffffff;
+    --navbar-menu-item-padding: 16px 10px;
     --navbar-menu-item-background: transparent;
     --navbar-menu-item-background-hover: #354B89;
 
-    --navbar-search-order: 1;
-    --navbar-search-padding: 30px 0px;
+    --navbar-menu-separator-opacity: 0.25;
+    --navbar-menu-separator-background: var(--navbar-menu-item-color);
+
+    --navbar-auth-font: 600 16px/20px var(--base-font);
+
     --navbar-logo-height: 75px;
 
-    // navbar (auth)
+    // Nav item line position
+    --navbar-menu-item-line-position-top: 0;
+    --navbar-menu-item-line-position-bottom: auto;
+
+    // wrapper
+    --wrapper-width: calc(1280px + 50px);
+    --wrapper-padding: 20px;
+
+    // Outline
+    --focus-outline: 2px solid #315efd;
+    --focus-outline-offset: 2px;
+    --focus-box-shadow: 0 0 0 3px white;
+
+    // navbar (auth) (default button)
     --tc-auth-menu: #3558a2;
     --tc-auth-btn: #fff;
     --btn-auth-bg: #3558a2;
     --btn-auth-border: #3558a2;
+    --auth-avater-bg: #305dfb;
+    --auth-avater-svg: #fff;
 
     // navbar (start modal primary)
     --tc-start-btn: #fff;
@@ -35,15 +75,31 @@ $primaryColorLight: #3558a2;
     --btn-start-btn: #3d559c;
     --btn-start-border: transparent;
 
+    // header background
     --bg-values: url("../img/splash-top-b.jpg") no-repeat center 100%;
 
+    // Header banner
+    --header-banner-pane-banner-padding: 50px 0;
+    --header-banner-pane-banner-max-width: 650px;
+    --header-banner-pane-banner-background: transparent;
+    --header-banner-pane-banner-border-color: initial;
+    --header-banner-pane-banner-border-radius: initial;
+
     // base font
     --base-font: "Open Sans", Verdana;
 
     // text color
     --tc: #1a1919;
+    --htc: var(--tc);
     --tc-var: #fff;
     --tc-link: inherit;
+    --tc-muted: #595959;
+
+    // heading font
+    --heading-font-family: var(--base-font);
+    --heading-font: 700 40px/60px var(--heading-font-family);
+    --heading-color: var(--tc);
+    --heading-pane-font: 700 22px/30px var(--heading-font-family);
 
     // base color
     --bc: #3558a2;
@@ -52,49 +108,238 @@ $primaryColorLight: #3558a2;
     --body-background: #f3f3f3;
 
     // footer color
+    --footer_padding: 0;
     --footer_background: transparent;
     --footer_color: #ffffff;
     --footer_color_link: #ffffff;
 
+    --footer_social_color: var(--footer_color);
+    --footer_social_background: transparent;
+    --footer_social_border_color: var(--footer_color);
+    --footer_social_border_radius: var(--border-radius);
+
     --footer-copyright-color: var(--footer_color_link);
     --footer-copyright-font: 400 14px/30px var(--base-font);
     --footer-copyright-background: #404040;
     --footer-copyright-border-color: var(--border-color);
     --footer-copyright-padding: 20px;
 
-    // displayed or not
+    // not displayed
     --footer_display: block;
 
     // product image
     --product-image-padding: 0px;
 
-    // placeholder text color
+    // Markdown
+    --markdown-font: 400 16px/24px var(--base-font);
+
+    // Forms
+    --form-control-color: #222222;
+    --form-control-background: #ffffff;
+    --form-control-border-color: #646464;
+    --form-control-border-color-focus: #282b39;
+    --form-control-placeholder-font: 400 13px/20px var(--base-font);
     --form-control-placeholder-color: #515152;
+    --form-label-color: #595959;
+    --form-label-font: 700 11px/16px var(--base-font);
 
-    --border-color: #dce0e0;
+    // Search bar
+    --color-search-icon-medium: #{$primaryColor};
+    --color-search-icon-dark: #{darken($primaryColor, 10%)};
+    --color-search-icon-light: #{lighten($primaryColor, 25%)};
 
-    --border-radius: 0px;
-    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+    --search-bar-point-color: #ececec;
+    --search-bar-point-radius: 0px;
 
-    --color-primary: #{$primaryColor};
-    --color-primary-light: #{$primaryColorLight};
+    --search-bar-input-radius: var(--border-radius);
+    --search-bar-input-border: 1px solid var(--form-control-border-color);
+    --search-bar-input-background: #fff;
+    --search-bar-input-icon-color: #666666;
 
-    --color-default: #3558a2;
-    --color-default-light: #3558a2;
+    --search-bar-label-top: -7px;
+    --search-bar-label-left: 16px;
+    --search-bar-label-padding: 4px;
+    --search-bar-label-background: #ffffff;
 
-    --color-search-icon-medium: #{$primaryColor};
-    --color-search-icon-dark: #{darken($primaryColor, 10%)};
-    --color-search-icon-light: #{lighten($primaryColor, 25%)};
+    // Dropdowns
+    --dropdown-item-font: 500 13px/20px var(--base-font);
+    --dropdown-item-color: #282b39;
+    --dropdown-item-background: #ffffff;
+    --dropdown-item-hover-color: #000000;
+    --dropdown-item-hover-background: #e5e5e5;
+
+    // Paginator
+    --paginator-border-radius: var(--border-radius);
+    --paginator-button-color: #282b39;
+    --paginator-button-border: #9e9e9e;
+    --paginator-button-background: #fff;
+    --paginator-button-hover-color: #fff;
+    --paginator-button-hover-background: #535561;
+    --paginator-button-active-color: #fff;
+    --paginator-button-active-background: #292b39;
+    --paginator-button-disabled-color: #535561;
+    --paginator-button-disabled-border: #e5e5e5;
+    --paginator-button-disabled-background: #f5f5f5;
+
+    // Labels
+    --label-default-color: #fff;
+    --label-default-background: #595959;
+
+    --label-primary-color: #fff;
+    --label-primary-background: var(--color-primary);
+
+    --label-danger-color: #030304;
+    --label-danger-background: #d38c87;
+
+    --label-success-color: #030304;
+    --label-success-background: #9bbfa1;
 
     // Label sets
+    --label-set-border-radius: var(--border-radius);
+    --label-set-border-color: #9e9e9e;
+    --label-set-color: #272525;
+    --label-set-background: #ffffff;
+    --label-set-active-color: #ffffff;
+    --label-set-active-background: var(--color-primary);
+    --label-set-hover-color: #ffffff;
     --label-set-hover-background: #{rgba($primaryColor, .8)};
+    --label-set-focus-color: #272525;
+    --label-set-focus-background: #f4f5f7;
+    --label-set-focus-border-color: #9e9e9e;
+
+    // Buttons
+    --button-font: 700 16px/24px var(--base-font);
+    --button-color: #282b39;
+    --button-shadow: none;
+    --button-decoration: none;
+    --button-border-radius: calc(var(--border-radius) * 0.75);
+    --button-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+    --button-hover-decoration: none;
+    --button-disabled-color: #616161;
+    --button-disabled-background: #e5e5e5;
+
+    --button-primary-color: #fff;
+    --button-primary-border: 1px solid var(--color-primary);
+    --button-primary-decoration: none;
+    --button-primary-background: var(--color-primary);
+    --button-primary-hover-color: #fff;
+    --button-primary-hover-border: 1px solid var(--color-primary-light);
+    --button-primary-hover-decoration: none;
+    --button-primary-hover-background: var(--color-primary-light);
+
+    --button-primary-outline-color: var(--color-primary);
+    --button-primary-outline-border: 1px solid var(--color-primary);
+    --button-primary-outline-decoration: none;
+    --button-primary-outline-background: transparent;
+    --button-primary-outline-hover-color: #fff;
+    --button-primary-outline-hover-border: 1px solid var(--color-primary);
+    --button-primary-outline-hover-decoration: none;
+    --button-primary-outline-hover-background: var(--color-primary);
+
+    --button-read_more-color: var(--button-primary-color);
+    --button-read_more-border: var(--button-primary-border);
+    --button-read_more-decoration: var(--button-primary-decoration);
+    --button-read_more-background: var(--button-primary-background);
+    --button-read_more-hover-color: var(--button-primary-hover-color);
+    --button-read_more-hover-border: var(--button-primary-hover-border);
+    --button-read_more-hover-decoration: var(--button-primary-hover-decoration);
+    --button-read_more-hover-background: var(--button-primary-hover-background);
+
+    // Sign up
+    --sign_up_accent_color: #282b39;
+    --sign_up_accent_color_light: #bdcbff;
+    --sign_up_link_color: #e60003;
+    --sign_up_step_btns_color: var(--tc);
+    --sign_up_digid_btn_bkg: #e1e7ff;
+    --sign_up_digid_btn_text: #4b71ff;
+    --sign_up_digid_btn_border: none;
+    --sign_up_digid_btn_border_radius: 5px;
+    --sign_up_loader_icon_color: #282b39;
 
-    // Login button
-    --login-button-background: #fff;
+    //- Showcase
+    --showcase-aside-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
+    --showcase-aside-padding: 20px;
+    --showcase-aside-background: #fff;
+    --showcase-aside-border: 1px solid #e5e5e5;
+    --showcase-aside-border-radius: var(--border-radius);
+
+    --showcase-item-shadow: var(--showcase-aside-shadow);
+    --showcase-item-background: var(--showcase-aside-background);
+    --showcase-item-border: var(--showcase-aside-border);
+    --showcase-item-border-radius: var(--showcase-aside-border-radius);
+    --showcase-item-hover-shadow: 2px 8px 14px 0px rgba(0, 0, 0, 0.1);
+
+    --showcase-aside-button-color: var(--color-primary);
+    --showcase-aside-button-border: 1px solid var(--color-primary);
+    --showcase-aside-button-background: transparent;
+    --showcase-aside-button-hover-color: #fff;
+    --showcase-aside-button-hover-border: 1px solid var(--color-primary);
+    --showcase-aside-button-hover-background: var(--color-primary);
+
+    --showcase-fullscreen-bottom-offset: 115px;
+
+    --showcase-title-font: 600 18px/30px var(--heading-font-family);
+    --showcase-title-color: var(--tc);
+    --showcase-title-count-color: #fff;
+    --showcase-title-count-background: var(--color-primary);
+    --showcase-title-count-border-radius: calc(var(--border-radius) / 2);
+
+    // Breadcrumbs
+    --breadcrumb-size: 16px;
+    --breadcrumb-color: var(--color-primary);
+    --breadcrumb-color-active: #353535;
+    --breadcrumb-padding: 20px;
+
+    // Loader
+    --loader-background: #f5f5f5;
+    --loader-color: var(--color-primary);
+
+    // Profile
+    --profile-menu-item-gap: 16px;
+    --profile-menu-item-color: var(--color-primary);
+    --profile-menu-item-color-icon: var(--profile-menu-item-color);
+    --profile-menu-item-shadow: var(--box-shadow);
+    --profile-menu-item-background: #ffffff;
+    --profile-menu-item-border-color: transparent;
+    --profile-menu-item-border-radius: var(--border-radius);
+    --profile-menu-item-hover-color: #fff;
+    --profile-menu-item-hover-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
+    --profile-menu-item-hover-background: var(--color-primary);
+    --profile-menu-item-hover-border-color: var(--color-primary);
+    --profile-menu-item-hover-border-radius: var(--border-radius);
+
+    // Vouchers
+    --vouchers-label-color: #646f79;
+    --vouchers-value-color: var(--tc);
+    --vouchers-organization-color: var(--tc);
+
+    // Voucher card
+    --voucher-card-action-color: var(--color-primary);
+    --voucher-card-action-background: transparent;
+    --voucher-card-action-border-color: var(--color-primary);
+    --voucher-card-action-border-radius: 0px;
+    --voucher-card-action-hover-color: #fff;
+    --voucher-card-action-hover-background: var(--color-primary);
+    --voucher-card-action-hover-border-color: var(--color-primary);
+
+    // Products
+    --products-title-color: var(--tc);
+    --products-title-hover-color: var(--tc);
+    --products-text-color: var(--tc);
+
+    // Product
+    --product-title-font: 700 22px/28px var(--heading-font-family);
+    --product-title-color: var(--tc);
 
     // Faq
     --faq-width: 100%;
     --faq-align: center;
+    --faq-header-color: #00122a;
+    --faq-header-color-hover: var(--color-primary);
+
+    // Map
+    --map-title-color: #0B0E12;
+    --map-title-font: 700 40px var(--heading-font-family);
 
     // Sections
     --section-padding: 0 0 30px;
@@ -111,6 +356,8 @@ $primaryColorLight: #3558a2;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 30px 0;
     --section-footer-background: #404040;
+    --section-pre-check-padding: 0 0 30px;
+    --section-pre-check-background: var(--section-background);
     --section-profile-padding: var(--section-padding);
     --section-profile-background: var(--section-background);
     --section-products-padding: var(--section-padding);
@@ -119,4 +366,24 @@ $primaryColorLight: #3558a2;
     --section-breadcrumbs-background: var(--section-background);
     --section-voucher-details-padding: var(--section-padding);
     --section-voucher-details-background: var(--section-background);
+
+    // Search bar
+    --search-result-sidebar-item-active-color: #a80a2d;
+    --search-result-sidebar-item-active-background: #fff;
+
+    // CMS funds
+    --cms-funds-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-title-color: var(--htc);
+    --cms-funds-label-font-size: 11px;
+    --cms-funds-label-background: var(--color-primary);
+
+    --cms-funds-compact-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-compact-title-color: var(--htc);
+
+    --cms-funds-link-color: var(--color-primary);
+    --cms-funds-link-font: 600 18px/20px var(--base-font);
+
+    // Section order
+    --order-page-voucher-map: 0;
+    --order-page-voucher-products: 0;
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-eemsdelta-vars.scss b/react/assets/forus-webshop/scss/style-webshop-eemsdelta-vars.scss
index b32ac332d..d0481db6f 100644
--- a/react/assets/forus-webshop/scss/style-webshop-eemsdelta-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-eemsdelta-vars.scss
@@ -6,29 +6,68 @@ $primaryColor: #0d4379;
 $primaryColorLight: #0d4379;
 
 :root {
+    --zoom: 100%;
+    --zoom-mobile: 100%;
+
+    --border-color: #dce0e0;
+    --border-radius: 4px;
+    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+
+    --color-primary: #{$primaryColor};
+    --color-primary-light: #{$primaryColorLight};
+
+    --color-default: #0d4379;
+    --color-default-light: #0d4379;
+
+    --color-danger: #e63b3b;
+
     // navbar
+    --navbar-box-shadow: none;
+
+    --navbar-menu-gap: 22px;
+    --navbar-menu-order: 1;
     --navbar-menu-background: #f5f5f5;
+
+    --navbar-search-gap: 20px;
+    --navbar-search-order: 2;
+    --navbar-search-padding: 20px 0px;
     --navbar-search-background: #f5f5f5;
-    --navbar-menu-item-color-hover: #4a60b3;
+    --navbar-search-border-bottom: 1px solid var(--border-color);
+
+    --navbar-menu-item-font: 400 18px/21px var(--base-font);
     --navbar-menu-item-color: #6b6b80;
-    --navbar-search-padding: 20px 0px;
+    --navbar-menu-item-color-hover: #4a60b3;
+    --navbar-menu-item-padding: 16px 0;
+    --navbar-menu-item-background: transparent;
+    --navbar-menu-item-background-hover: transparent;
+
+    --navbar-menu-separator-opacity: 0.25;
+    --navbar-menu-separator-background: var(--navbar-menu-item-color);
+
+    --navbar-auth-font: 600 16px/20px var(--base-font);
+
     --navbar-logo-height: 90px;
 
     // Nav item line position
     --navbar-menu-item-line-position-top: auto;
     --navbar-menu-item-line-position-bottom: 0;
 
-    // Search bar
-    --search-bar-label-top: -18px;
-    --search-bar-label-left: 0px;
-    --search-bar-label-padding: 0px;
-    --search-bar-label-background: transparent;
+    // wrapper
+    --wrapper-width: calc(1280px + 50px);
+    --wrapper-padding: 20px;
+
+    // Outline
+    --focus-outline: 2px solid #315efd;
+    --focus-outline-offset: 2px;
+    --focus-box-shadow: 0 0 0 3px white;
 
-    // navbar (auth)
+    // navbar (auth) (default button)
     --tc-auth-menu: #ffffff;
     --tc-auth-btn: #ffffff;
     --btn-auth-bg: #0d4379;
     --btn-auth-border: #0d4379;
+    --auth-avater-bg: #305dfb;
+    --auth-avater-svg: #fff;
 
     // navbar (start modal primary)
     --tc-start-btn: #ffffff;
@@ -36,15 +75,31 @@ $primaryColorLight: #0d4379;
     --btn-start-btn: #609609;
     --btn-start-border: transparent;
 
+    // header background
     --bg-values: url('../img/splash-top-b.jpg') no-repeat center 100%;
 
+    // Header banner
+    --header-banner-pane-banner-padding: 50px 0;
+    --header-banner-pane-banner-max-width: 650px;
+    --header-banner-pane-banner-background: transparent;
+    --header-banner-pane-banner-border-color: initial;
+    --header-banner-pane-banner-border-radius: initial;
+
     // base font
     --base-font: Arial, Verdana;
 
     // text color
     --tc: #1a1919;
+    --htc: var(--tc);
     --tc-var: #fff;
     --tc-link: inherit;
+    --tc-muted: #595959;
+
+    // heading font
+    --heading-font-family: var(--base-font);
+    --heading-font: 700 40px/60px var(--heading-font-family);
+    --heading-color: var(--tc);
+    --heading-pane-font: 700 22px/30px var(--heading-font-family);
 
     // base color
     --bc: #22398e;
@@ -53,48 +108,238 @@ $primaryColorLight: #0d4379;
     --body-background: none;
 
     // footer color
+    --footer_padding: 0;
     --footer_background: transparent;
     --footer_color: #ffffff;
     --footer_color_link: #ffffff;
 
+    --footer_social_color: var(--footer_color);
+    --footer_social_background: transparent;
+    --footer_social_border_color: var(--footer_color);
+    --footer_social_border_radius: var(--border-radius);
+
     --footer-copyright-color: var(--footer_color_link);
     --footer-copyright-font: 400 14px/30px var(--base-font);
     --footer-copyright-background: #0d4379;
     --footer-copyright-border-color: var(--border-color);
     --footer-copyright-padding: 40px;
 
-    // displayed or not
+    // not displayed
     --footer_display: block;
 
     // product image
     --product-image-padding: 0px;
 
-    // placeholder text color
+    // Markdown
+    --markdown-font: 400 16px/24px var(--base-font);
+
+    // Forms
+    --form-control-color: #222222;
+    --form-control-background: #ffffff;
+    --form-control-border-color: #646464;
+    --form-control-border-color-focus: #282b39;
+    --form-control-placeholder-font: 400 13px/20px var(--base-font);
     --form-control-placeholder-color: #515152;
+    --form-label-color: #595959;
+    --form-label-font: 700 11px/16px var(--base-font);
 
-    --border-color: #dce0e0;
+    // Search bar
+    --color-search-icon-medium: #{$primaryColor};
+    --color-search-icon-dark: #{darken($primaryColor, 10%)};
+    --color-search-icon-light: #{lighten($primaryColor, 25%)};
 
-    --border-radius: 4px;
-    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+    --search-bar-point-color: #ececec;
+    --search-bar-point-radius: 0px;
 
-    --color-primary: #{$primaryColor};
-    --color-primary-light: #{$primaryColorLight};
+    --search-bar-input-radius: var(--border-radius);
+    --search-bar-input-border: 1px solid var(--form-control-border-color);
+    --search-bar-input-background: #fff;
+    --search-bar-input-icon-color: #666666;
 
-    --color-default: #0d4379;
-    --color-default-light: #0d4379;
+    --search-bar-label-top: -18px;
+    --search-bar-label-left: 0px;
+    --search-bar-label-padding: 0px;
+    --search-bar-label-background: transparent;
 
-    --color-search-icon-medium: #{$primaryColor};
-    --color-search-icon-dark: #{darken($primaryColor, 10%)};
-    --color-search-icon-light: #{lighten($primaryColor, 25%)};
+    // Dropdowns
+    --dropdown-item-font: 500 13px/20px var(--base-font);
+    --dropdown-item-color: #282b39;
+    --dropdown-item-background: #ffffff;
+    --dropdown-item-hover-color: #000000;
+    --dropdown-item-hover-background: #e5e5e5;
+
+    // Paginator
+    --paginator-border-radius: var(--border-radius);
+    --paginator-button-color: #282b39;
+    --paginator-button-border: #9e9e9e;
+    --paginator-button-background: #fff;
+    --paginator-button-hover-color: #fff;
+    --paginator-button-hover-background: #535561;
+    --paginator-button-active-color: #fff;
+    --paginator-button-active-background: #292b39;
+    --paginator-button-disabled-color: #535561;
+    --paginator-button-disabled-border: #e5e5e5;
+    --paginator-button-disabled-background: #f5f5f5;
+
+    // Labels
+    --label-default-color: #fff;
+    --label-default-background: #595959;
+
+    --label-primary-color: #fff;
+    --label-primary-background: var(--color-primary);
+
+    --label-danger-color: #030304;
+    --label-danger-background: #d38c87;
+
+    --label-success-color: #030304;
+    --label-success-background: #9bbfa1;
 
     // Label sets
+    --label-set-border-radius: var(--border-radius);
+    --label-set-border-color: #9e9e9e;
+    --label-set-color: #272525;
+    --label-set-background: #ffffff;
+    --label-set-active-color: #ffffff;
+    --label-set-active-background: var(--color-primary);
+    --label-set-hover-color: #ffffff;
     --label-set-hover-background: #{rgba($primaryColor, 0.8)};
+    --label-set-focus-color: #272525;
+    --label-set-focus-background: #f4f5f7;
+    --label-set-focus-border-color: #9e9e9e;
+
+    // Buttons
+    --button-font: 700 16px/24px var(--base-font);
+    --button-color: #282b39;
+    --button-shadow: none;
+    --button-decoration: none;
+    --button-border-radius: calc(var(--border-radius) * 0.75);
+    --button-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+    --button-hover-decoration: none;
+    --button-disabled-color: #616161;
+    --button-disabled-background: #e5e5e5;
+
+    --button-primary-color: #fff;
+    --button-primary-border: 1px solid var(--color-primary);
+    --button-primary-decoration: none;
+    --button-primary-background: var(--color-primary);
+    --button-primary-hover-color: #fff;
+    --button-primary-hover-border: 1px solid var(--color-primary-light);
+    --button-primary-hover-decoration: none;
+    --button-primary-hover-background: var(--color-primary-light);
+
+    --button-primary-outline-color: var(--color-primary);
+    --button-primary-outline-border: 1px solid var(--color-primary);
+    --button-primary-outline-decoration: none;
+    --button-primary-outline-background: transparent;
+    --button-primary-outline-hover-color: #fff;
+    --button-primary-outline-hover-border: 1px solid var(--color-primary);
+    --button-primary-outline-hover-decoration: none;
+    --button-primary-outline-hover-background: var(--color-primary);
+
+    --button-read_more-color: var(--button-primary-color);
+    --button-read_more-border: var(--button-primary-border);
+    --button-read_more-decoration: var(--button-primary-decoration);
+    --button-read_more-background: var(--button-primary-background);
+    --button-read_more-hover-color: var(--button-primary-hover-color);
+    --button-read_more-hover-border: var(--button-primary-hover-border);
+    --button-read_more-hover-decoration: var(--button-primary-hover-decoration);
+    --button-read_more-hover-background: var(--button-primary-hover-background);
+
+    // Sign up
+    --sign_up_accent_color: #282b39;
+    --sign_up_accent_color_light: #bdcbff;
+    --sign_up_link_color: #e60003;
+    --sign_up_step_btns_color: var(--tc);
+    --sign_up_digid_btn_bkg: #e1e7ff;
+    --sign_up_digid_btn_text: #4b71ff;
+    --sign_up_digid_btn_border: none;
+    --sign_up_digid_btn_border_radius: 5px;
+    --sign_up_loader_icon_color: #282b39;
 
     //- Showcase
+    --showcase-aside-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
+    --showcase-aside-padding: 20px;
+    --showcase-aside-background: #fff;
+    --showcase-aside-border: 1px solid #e5e5e5;
+    --showcase-aside-border-radius: var(--border-radius);
+
+    --showcase-item-shadow: var(--showcase-aside-shadow);
+    --showcase-item-background: var(--showcase-aside-background);
+    --showcase-item-border: var(--showcase-aside-border);
+    --showcase-item-border-radius: var(--showcase-aside-border-radius);
+    --showcase-item-hover-shadow: 2px 8px 14px 0px rgba(0, 0, 0, 0.1);
+
+    --showcase-aside-button-color: var(--color-primary);
+    --showcase-aside-button-border: 1px solid var(--color-primary);
+    --showcase-aside-button-background: transparent;
+    --showcase-aside-button-hover-color: #fff;
+    --showcase-aside-button-hover-border: 1px solid var(--color-primary);
+    --showcase-aside-button-hover-background: var(--color-primary);
+
     --showcase-fullscreen-bottom-offset: 155px;
 
-    // Login button
-    --login-button-background: #fff;
+    --showcase-title-font: 600 18px/30px var(--heading-font-family);
+    --showcase-title-color: var(--tc);
+    --showcase-title-count-color: #fff;
+    --showcase-title-count-background: var(--color-primary);
+    --showcase-title-count-border-radius: calc(var(--border-radius) / 2);
+
+    // Breadcrumbs
+    --breadcrumb-size: 16px;
+    --breadcrumb-color: var(--color-primary);
+    --breadcrumb-color-active: #353535;
+    --breadcrumb-padding: 20px;
+
+    // Loader
+    --loader-background: #f5f5f5;
+    --loader-color: var(--color-primary);
+
+    // Profile
+    --profile-menu-item-gap: 16px;
+    --profile-menu-item-color: var(--color-primary);
+    --profile-menu-item-color-icon: var(--profile-menu-item-color);
+    --profile-menu-item-shadow: var(--box-shadow);
+    --profile-menu-item-background: #ffffff;
+    --profile-menu-item-border-color: transparent;
+    --profile-menu-item-border-radius: var(--border-radius);
+    --profile-menu-item-hover-color: #fff;
+    --profile-menu-item-hover-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
+    --profile-menu-item-hover-background: var(--color-primary);
+    --profile-menu-item-hover-border-color: var(--color-primary);
+    --profile-menu-item-hover-border-radius: var(--border-radius);
+
+    // Vouchers
+    --vouchers-label-color: #646f79;
+    --vouchers-value-color: var(--tc);
+    --vouchers-organization-color: var(--tc);
+
+    // Voucher card
+    --voucher-card-action-color: var(--color-primary);
+    --voucher-card-action-background: transparent;
+    --voucher-card-action-border-color: var(--color-primary);
+    --voucher-card-action-border-radius: 0px;
+    --voucher-card-action-hover-color: #fff;
+    --voucher-card-action-hover-background: var(--color-primary);
+    --voucher-card-action-hover-border-color: var(--color-primary);
+
+    // Products
+    --products-title-color: var(--tc);
+    --products-title-hover-color: var(--tc);
+    --products-text-color: var(--tc);
+
+    // Product
+    --product-title-font: 700 22px/28px var(--heading-font-family);
+    --product-title-color: var(--tc);
+
+    // Faq
+    --faq-width: 820px;
+    --faq-align: center;
+    --faq-header-color: #00122a;
+    --faq-header-color-hover: var(--color-primary);
+
+    // Map
+    --map-title-color: #0B0E12;
+    --map-title-font: 700 40px var(--heading-font-family);
 
     // Sections
     --section-padding: 0 0 30px;
@@ -111,6 +356,8 @@ $primaryColorLight: #0d4379;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 30px 0;
     --section-footer-background: #0d4379;
+    --section-pre-check-padding: 0 0 30px;
+    --section-pre-check-background: var(--section-background);
     --section-profile-padding: var(--section-padding);
     --section-profile-background: var(--section-background);
     --section-products-padding: var(--section-padding);
@@ -119,4 +366,24 @@ $primaryColorLight: #0d4379;
     --section-breadcrumbs-background: var(--section-background);
     --section-voucher-details-padding: var(--section-padding);
     --section-voucher-details-background: var(--section-background);
+
+    // Search bar
+    --search-result-sidebar-item-active-color: #a80a2d;
+    --search-result-sidebar-item-active-background: #fff;
+
+    // CMS funds
+    --cms-funds-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-title-color: var(--htc);
+    --cms-funds-label-font-size: 11px;
+    --cms-funds-label-background: var(--color-primary);
+
+    --cms-funds-compact-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-compact-title-color: var(--htc);
+
+    --cms-funds-link-color: var(--color-primary);
+    --cms-funds-link-font: 600 18px/20px var(--base-font);
+
+    // Section order
+    --order-page-voucher-map: 0;
+    --order-page-voucher-products: 0;
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-geertruidenberg-vars.scss b/react/assets/forus-webshop/scss/style-webshop-geertruidenberg-vars.scss
index be292f865..7941060a2 100644
--- a/react/assets/forus-webshop/scss/style-webshop-geertruidenberg-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-geertruidenberg-vars.scss
@@ -6,18 +6,68 @@ $primaryColor: #666666;
 $primaryColorLight: #ee8016;
 
 :root {
+    --zoom: 100%;
+    --zoom-mobile: 100%;
+
+    --border-color: #dce0e0;
+    --border-radius: 0px;
+    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+
+    --color-primary: #{$primaryColor};
+    --color-primary-light: #{$primaryColorLight};
+
+    --color-default: #ee8016;
+    --color-default-light: #ee8016;
+
+    --color-danger: #e63b3b;
+
     // navbar
+    --navbar-box-shadow: none;
+
+    --navbar-menu-gap: 22px;
+    --navbar-menu-order: 1;
     --navbar-menu-background: #ececec;
-    --navbar-menu-item-color-hover: #ee8016;
-    --navbar-menu-item-color: #000000;
+
+    --navbar-search-gap: 20px;
+    --navbar-search-order: 2;
     --navbar-search-padding: 30px 0px;
+    --navbar-search-background: #ffffff;
+    --navbar-search-border-bottom: 1px solid var(--border-color);
+
+    --navbar-menu-item-font: 400 18px/21px var(--base-font);
+    --navbar-menu-item-color: #000000;
+    --navbar-menu-item-color-hover: #ee8016;
+    --navbar-menu-item-padding: 16px 0;
+    --navbar-menu-item-background: transparent;
+    --navbar-menu-item-background-hover: transparent;
+
+    --navbar-menu-separator-opacity: 0.25;
+    --navbar-menu-separator-background: var(--navbar-menu-item-color);
+
+    --navbar-auth-font: 600 16px/20px var(--base-font);
+
     --navbar-logo-height: 60px;
 
-    // navbar (auth)
+    // Nav item line position
+    --navbar-menu-item-line-position-top: 0;
+    --navbar-menu-item-line-position-bottom: auto;
+
+    // wrapper
+    --wrapper-width: calc(1280px + 50px);
+    --wrapper-padding: 20px;
+
+    // Outline
+    --focus-outline: 2px solid #315efd;
+    --focus-outline-offset: 2px;
+    --focus-box-shadow: 0 0 0 3px white;
+
+    // navbar (auth) (default button)
     --tc-auth-menu: #6699cc;
     --tc-auth-btn: #fff;
     --btn-auth-bg: #6699cc;
     --btn-auth-border: #6699cc;
+    --auth-avater-bg: #305dfb;
+    --auth-avater-svg: #fff;
 
     // navbar (start modal primary)
     --tc-start-btn: #fff;
@@ -25,15 +75,31 @@ $primaryColorLight: #ee8016;
     --btn-start-btn: #ee8016;
     --btn-start-border: transparent;
 
+    // header background
     --bg-values: url("../img/splash-top-b.jpg") no-repeat center 100%;
 
+    // Header banner
+    --header-banner-pane-banner-padding: 50px 0;
+    --header-banner-pane-banner-max-width: 650px;
+    --header-banner-pane-banner-background: transparent;
+    --header-banner-pane-banner-border-color: initial;
+    --header-banner-pane-banner-border-radius: initial;
+
     // base font
     --base-font: Roboto, Verdana, arial;
 
     // text color
     --tc: #1a1919;
+    --htc: var(--tc);
     --tc-var: #fff;
     --tc-link: inherit;
+    --tc-muted: #595959;
+
+    // heading font
+    --heading-font-family: var(--base-font);
+    --heading-font: 700 40px/60px var(--heading-font-family);
+    --heading-color: var(--tc);
+    --heading-pane-font: 700 22px/30px var(--heading-font-family);
 
     // base color
     --bc: #ee8016;
@@ -42,11 +108,10 @@ $primaryColorLight: #ee8016;
     --body-background: none;
 
     // footer color
-    --footer_color: #282b39;
-    --footer_color_link: #004d93;
-    --footer_color_link_hover: #004d93;
     --footer_padding: 40px 50px;
     --footer_background: #fff;
+    --footer_color: #282b39;
+    --footer_color_link: #004d93;
 
     --footer_social_color: var(--footer_color);
     --footer_social_background: transparent;
@@ -59,39 +124,229 @@ $primaryColorLight: #ee8016;
     --footer-copyright-border-color: var(--border-color);
     --footer-copyright-padding: 40px;
 
-    // displayed or not
+    // not displayed
     --footer_display: block;
 
     // product image
     --product-image-padding: 0px;
 
-    // placeholder text color
+    // Markdown
+    --markdown-font: 400 16px/24px var(--base-font);
+
+    // Forms
+    --form-control-color: #222222;
+    --form-control-background: #ffffff;
+    --form-control-border-color: #646464;
+    --form-control-border-color-focus: #282b39;
+    --form-control-placeholder-font: 400 13px/20px var(--base-font);
     --form-control-placeholder-color: #515152;
+    --form-label-color: #595959;
+    --form-label-font: 700 11px/16px var(--base-font);
 
-    --border-color: #dce0e0;
+    // Search bar
+    --color-search-icon-medium: #{$primaryColor};
+    --color-search-icon-dark: #{darken($primaryColor, 10%)};
+    --color-search-icon-light: #{lighten($primaryColor, 25%)};
 
-    --border-radius: 0px;
-    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+    --search-bar-point-color: #ececec;
+    --search-bar-point-radius: 0px;
 
-    --color-primary: #{$primaryColor};
-    --color-primary-light: #{$primaryColorLight};
+    --search-bar-input-radius: var(--border-radius);
+    --search-bar-input-border: 1px solid var(--form-control-border-color);
+    --search-bar-input-background: #fff;
+    --search-bar-input-icon-color: #666666;
 
-    --color-default: #ee8016;
-    --color-default-light: #ee8016;
+    --search-bar-label-top: -7px;
+    --search-bar-label-left: 16px;
+    --search-bar-label-padding: 4px;
+    --search-bar-label-background: #ffffff;
+
+    // Dropdowns
+    --dropdown-item-font: 500 13px/20px var(--base-font);
+    --dropdown-item-color: #282b39;
+    --dropdown-item-background: #ffffff;
+    --dropdown-item-hover-color: #000000;
+    --dropdown-item-hover-background: #e5e5e5;
+
+    // Paginator
+    --paginator-border-radius: var(--border-radius);
+    --paginator-button-color: #282b39;
+    --paginator-button-border: #9e9e9e;
+    --paginator-button-background: #fff;
+    --paginator-button-hover-color: #fff;
+    --paginator-button-hover-background: #535561;
+    --paginator-button-active-color: #fff;
+    --paginator-button-active-background: #292b39;
+    --paginator-button-disabled-color: #535561;
+    --paginator-button-disabled-border: #e5e5e5;
+    --paginator-button-disabled-background: #f5f5f5;
+
+    // Labels
+    --label-default-color: #fff;
+    --label-default-background: #595959;
+
+    --label-primary-color: #fff;
+    --label-primary-background: var(--color-primary);
+
+    --label-danger-color: #030304;
+    --label-danger-background: #d38c87;
+
+    --label-success-color: #030304;
+    --label-success-background: #9bbfa1;
 
-    --color-search-icon-medium: #{$primaryColor};
-    --color-search-icon-dark: #{darken($primaryColor, 10%)};
-    --color-search-icon-light: #{lighten($primaryColor, 25%)};
-    
     // Label sets
+    --label-set-border-radius: var(--border-radius);
+    --label-set-border-color: #9e9e9e;
+    --label-set-color: #272525;
+    --label-set-background: #ffffff;
+    --label-set-active-color: #ffffff;
+    --label-set-active-background: var(--color-primary);
+    --label-set-hover-color: #ffffff;
     --label-set-hover-background: #{rgba($primaryColor, .8)};
+    --label-set-focus-color: #272525;
+    --label-set-focus-background: #f4f5f7;
+    --label-set-focus-border-color: #9e9e9e;
+
+    // Buttons
+    --button-font: 700 16px/24px var(--base-font);
+    --button-color: #282b39;
+    --button-shadow: none;
+    --button-decoration: none;
+    --button-border-radius: calc(var(--border-radius) * 0.75);
+    --button-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+    --button-hover-decoration: none;
+    --button-disabled-color: #616161;
+    --button-disabled-background: #e5e5e5;
+
+    --button-primary-color: #fff;
+    --button-primary-border: 1px solid var(--color-primary);
+    --button-primary-decoration: none;
+    --button-primary-background: var(--color-primary);
+    --button-primary-hover-color: #fff;
+    --button-primary-hover-border: 1px solid var(--color-primary-light);
+    --button-primary-hover-decoration: none;
+    --button-primary-hover-background: var(--color-primary-light);
+
+    --button-primary-outline-color: var(--color-primary);
+    --button-primary-outline-border: 1px solid var(--color-primary);
+    --button-primary-outline-decoration: none;
+    --button-primary-outline-background: transparent;
+    --button-primary-outline-hover-color: #fff;
+    --button-primary-outline-hover-border: 1px solid var(--color-primary);
+    --button-primary-outline-hover-decoration: none;
+    --button-primary-outline-hover-background: var(--color-primary);
+
+    --button-read_more-color: var(--button-primary-color);
+    --button-read_more-border: var(--button-primary-border);
+    --button-read_more-decoration: var(--button-primary-decoration);
+    --button-read_more-background: var(--button-primary-background);
+    --button-read_more-hover-color: var(--button-primary-hover-color);
+    --button-read_more-hover-border: var(--button-primary-hover-border);
+    --button-read_more-hover-decoration: var(--button-primary-hover-decoration);
+    --button-read_more-hover-background: var(--button-primary-hover-background);
+
+    // Sign up
+    --sign_up_accent_color: #282b39;
+    --sign_up_accent_color_light: #bdcbff;
+    --sign_up_link_color: #e60003;
+    --sign_up_step_btns_color: var(--tc);
+    --sign_up_digid_btn_bkg: #e1e7ff;
+    --sign_up_digid_btn_text: #4b71ff;
+    --sign_up_digid_btn_border: none;
+    --sign_up_digid_btn_border_radius: 5px;
+    --sign_up_loader_icon_color: #282b39;
 
     //- Showcase
+    --showcase-aside-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
+    --showcase-aside-padding: 20px;
+    --showcase-aside-background: #fff;
+    --showcase-aside-border: 1px solid #e5e5e5;
+    --showcase-aside-border-radius: var(--border-radius);
+
+    --showcase-item-shadow: var(--showcase-aside-shadow);
+    --showcase-item-background: var(--showcase-aside-background);
+    --showcase-item-border: var(--showcase-aside-border);
+    --showcase-item-border-radius: var(--showcase-aside-border-radius);
+    --showcase-item-hover-shadow: 2px 8px 14px 0px rgba(0, 0, 0, 0.1);
+
+    --showcase-aside-button-color: var(--color-primary);
+    --showcase-aside-button-border: 1px solid var(--color-primary);
+    --showcase-aside-button-background: transparent;
+    --showcase-aside-button-hover-color: #fff;
+    --showcase-aside-button-hover-border: 1px solid var(--color-primary);
+    --showcase-aside-button-hover-background: var(--color-primary);
+
     --showcase-fullscreen-bottom-offset: 170px;
 
-    // Login button
-    --login-button-background: #fff;
+    --showcase-title-font: 600 18px/30px var(--heading-font-family);
+    --showcase-title-color: var(--tc);
+    --showcase-title-count-color: #fff;
+    --showcase-title-count-background: var(--color-primary);
+    --showcase-title-count-border-radius: calc(var(--border-radius) / 2);
+
+    // Breadcrumbs
+    --breadcrumb-size: 16px;
+    --breadcrumb-color: var(--color-primary);
+    --breadcrumb-color-active: #353535;
+    --breadcrumb-padding: 20px;
+
+    // Loader
+    --loader-background: #f5f5f5;
+    --loader-color: var(--color-primary);
+
+    // Profile
+    --profile-menu-item-gap: 16px;
+    --profile-menu-item-color: var(--color-primary);
+    --profile-menu-item-color-icon: var(--profile-menu-item-color);
+    --profile-menu-item-shadow: var(--box-shadow);
+    --profile-menu-item-background: #ffffff;
+    --profile-menu-item-border-color: transparent;
+    --profile-menu-item-border-radius: var(--border-radius);
+    --profile-menu-item-hover-color: #fff;
+    --profile-menu-item-hover-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
+    --profile-menu-item-hover-background: var(--color-primary);
+    --profile-menu-item-hover-border-color: var(--color-primary);
+    --profile-menu-item-hover-border-radius: var(--border-radius);
+
+    // Vouchers
+    --vouchers-label-color: #646f79;
+    --vouchers-value-color: var(--tc);
+    --vouchers-organization-color: var(--tc);
+
+    // Voucher card
+    --voucher-card-action-color: var(--color-primary);
+    --voucher-card-action-background: transparent;
+    --voucher-card-action-border-color: var(--color-primary);
+    --voucher-card-action-border-radius: 0px;
+    --voucher-card-action-hover-color: #fff;
+    --voucher-card-action-hover-background: var(--color-primary);
+    --voucher-card-action-hover-border-color: var(--color-primary);
+
+    // Products
+    --products-title-color: var(--tc);
+    --products-title-hover-color: var(--tc);
+    --products-text-color: var(--tc);
 
+    // Product
+    --product-title-font: 700 22px/28px var(--heading-font-family);
+    --product-title-color: var(--tc);
+
+    // Faq
+    --faq-width: 820px;
+    --faq-align: center;
+    --faq-header-color: #00122a;
+    --faq-header-color-hover: var(--color-primary);
+
+    // Map
+    --map-title-color: #0B0E12;
+    --map-title-font: 700 40px var(--heading-font-family);
+
+    // Sections
+    --section-padding: 0 0 30px;
+    --section-background: transparent;
+
+    --section-title-font: 700 40px/60px var(--heading-font-family);
+    --section-title-align: center;
 
     --section-cms-padding: var(--section-padding);
     --section-cms-background: var(--section-background);
@@ -101,6 +356,8 @@ $primaryColorLight: #ee8016;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 50px 0;
     --section-footer-background: #ee8016 url(./assets/img/header-frame-after.svg);
+    --section-pre-check-padding: 0 0 30px;
+    --section-pre-check-background: var(--section-background);
     --section-profile-padding: var(--section-padding);
     --section-profile-background: var(--section-background);
     --section-products-padding: var(--section-padding);
@@ -109,4 +366,24 @@ $primaryColorLight: #ee8016;
     --section-breadcrumbs-background: var(--section-background);
     --section-voucher-details-padding: var(--section-padding);
     --section-voucher-details-background: var(--section-background);
+
+    // Search bar
+    --search-result-sidebar-item-active-color: #a80a2d;
+    --search-result-sidebar-item-active-background: #fff;
+
+    // CMS funds
+    --cms-funds-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-title-color: var(--htc);
+    --cms-funds-label-font-size: 11px;
+    --cms-funds-label-background: var(--color-primary);
+
+    --cms-funds-compact-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-compact-title-color: var(--htc);
+
+    --cms-funds-link-color: var(--color-primary);
+    --cms-funds-link-font: 600 18px/20px var(--base-font);
+
+    // Section order
+    --order-page-voucher-map: 0;
+    --order-page-voucher-products: 0;
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-general-vars.scss b/react/assets/forus-webshop/scss/style-webshop-general-vars.scss
index d67a5783c..da9612826 100644
--- a/react/assets/forus-webshop/scss/style-webshop-general-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-general-vars.scss
@@ -21,6 +21,8 @@ $primaryColorLight: #305dfb;
     --color-danger: #e63b3b;
 
     // navbar
+    --navbar-box-shadow: none;
+
     --navbar-menu-gap: 22px;
     --navbar-menu-order: 1;
     --navbar-menu-background: #f5f5f5;
@@ -105,10 +107,10 @@ $primaryColorLight: #305dfb;
     --body-background: #fff;
 
     // footer color
+    --footer_padding: 0;
     --footer_background: transparent;
     --footer_color: #353535;
     --footer_color_link: #004d93;
-    --footer_color_link_hover: #004d93;
 
     --footer_social_color: var(--footer_color);
     --footer_social_background: transparent;
@@ -297,7 +299,7 @@ $primaryColorLight: #305dfb;
     --profile-menu-item-color-icon: var(--profile-menu-item-color);
     --profile-menu-item-shadow: var(--box-shadow);
     --profile-menu-item-background: #ffffff;
-    --profile-menu-item-border-color: transparent;
+    --profile-menu-item-border-color: var(--border-color);
     --profile-menu-item-border-radius: var(--border-radius);
     --profile-menu-item-hover-color: #fff;
     --profile-menu-item-hover-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
@@ -353,6 +355,8 @@ $primaryColorLight: #305dfb;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 30px 0;
     --section-footer-background: #fff;
+    --section-pre-check-padding: 0 0 30px;
+    --section-pre-check-background: var(--section-background);
     --section-profile-padding: var(--section-padding);
     --section-profile-background: var(--section-background);
     --section-products-padding: var(--section-padding);
diff --git a/react/assets/forus-webshop/scss/style-webshop-goereeoverflakkee-vars.scss b/react/assets/forus-webshop/scss/style-webshop-goereeoverflakkee-vars.scss
index 76ddf6414..90c4a5796 100644
--- a/react/assets/forus-webshop/scss/style-webshop-goereeoverflakkee-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-goereeoverflakkee-vars.scss
@@ -6,17 +6,68 @@ $primaryColor: #627c18;
 $primaryColorLight: #627c18;
 
 :root {
+    --zoom: 100%;
+    --zoom-mobile: 100%;
+
+    --border-color: #e5e5e5;
+    --border-radius: 7px;
+    --box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);
+
+    --color-primary: #{$primaryColor};
+    --color-primary-light: #{$primaryColorLight};
+
+    --color-default: #305dfb;
+    --color-default-light: #4c74ff;
+
+    --color-danger: #e63b3b;
+
     // navbar
+    --navbar-box-shadow: none;
+
+    --navbar-menu-gap: 22px;
+    --navbar-menu-order: 1;
     --navbar-menu-background: #f3f8fa;
+
+    --navbar-search-gap: 20px;
+    --navbar-search-order: 2;
+    --navbar-search-padding: 20px 0px;
+    --navbar-search-background: #ffffff;
+    --navbar-search-border-bottom: 1px solid var(--border-color);
+
+    --navbar-menu-item-font: 400 18px/21px var(--base-font);
     --navbar-menu-item-color: #08749b;
     --navbar-menu-item-color-hover: #08749b;
-    --navbar-search-padding: 20px 0px;
+    --navbar-menu-item-padding: 16px 0;
+    --navbar-menu-item-background: transparent;
+    --navbar-menu-item-background-hover: transparent;
+
+    --navbar-menu-separator-opacity: 0.25;
+    --navbar-menu-separator-background: var(--navbar-menu-item-color);
+
+    --navbar-auth-font: 600 16px/20px var(--base-font);
+
     --navbar-logo-height: 50px;
 
+    // Nav item line position
+    --navbar-menu-item-line-position-top: 0;
+    --navbar-menu-item-line-position-bottom: auto;
+
+    // wrapper
+    --wrapper-width: calc(1280px + 50px);
+    --wrapper-padding: 20px;
+
+    // Outline
+    --focus-outline: 2px solid #315efd;
+    --focus-outline-offset: 2px;
+    --focus-box-shadow: 0 0 0 3px white;
+
     // navbar (auth) (default button)
+    --tc-auth-menu: #305dfb;
     --tc-auth-btn: #fff;
     --btn-auth-bg: #627c18;
     --btn-auth-border: transparent;
+    --auth-avater-bg: #305dfb;
+    --auth-avater-svg: #fff;
 
     // navbar (start modal primary)
     --tc-start-btn: #fff;
@@ -24,20 +75,31 @@ $primaryColorLight: #627c18;
     --btn-start-btn: #305dfb;
     --btn-start-border: transparent;
 
+    // header background
+    --bg-values: url('../img/splash-top-b.png') no-repeat 100% 0;
+
+    // Header banner
+    --header-banner-pane-banner-padding: 50px 0;
+    --header-banner-pane-banner-max-width: 650px;
+    --header-banner-pane-banner-background: transparent;
+    --header-banner-pane-banner-border-color: initial;
+    --header-banner-pane-banner-border-radius: initial;
+
     // base font
     --base-font: Roboto, Verdana, arial;
 
-    // heading font
-    --heading-font-family: var(--base-font);
-    --heading-font: 500 34px/50px var(--heading-font-family);
-    --heading-color: #08749b;
-    --heading-pane-font: 500 24px/36px var(--heading-font-family);
-
     // text color
     --tc: #1d1e20;
     --htc: #08749b;
     --tc-var: inherit;
     --tc-link: inherit;
+    --tc-muted: #595959;
+
+    // heading font
+    --heading-font-family: var(--base-font);
+    --heading-font: 500 34px/50px var(--heading-font-family);
+    --heading-color: #08749b;
+    --heading-pane-font: 500 24px/36px var(--heading-font-family);
 
     // base color
     --bc: #627c18;
@@ -46,10 +108,15 @@ $primaryColorLight: #627c18;
     --body-background: #fff;
 
     // footer color
+    --footer_padding: 0;
     --footer_background: transparent;
     --footer_color: #fff;
     --footer_color_link: #fff;
-    --footer_color_link_hover: #fff;
+
+    --footer_social_color: var(--footer_color);
+    --footer_social_background: transparent;
+    --footer_social_border_color: var(--footer_color);
+    --footer_social_border_radius: var(--border-radius);
 
     --footer-copyright-color: var(--footer_color_link);
     --footer-copyright-font: 500 17px/25px var(--base-font);
@@ -60,11 +127,6 @@ $primaryColorLight: #627c18;
     // not displayed
     --footer_display: none;
 
-    // Vouchers
-    --vouchers-label-color: #646f79;
-    --vouchers-value-color: var(--tc);
-    --vouchers-organization-color: var(--tc);
-
     // product image
     --product-image-padding: 10px 0 0 10px;
 
@@ -81,53 +143,156 @@ $primaryColorLight: #627c18;
     --form-label-color: #2d3748;
     --form-label-font: 500 13px/20px var(--base-font);
 
-    // placeholder text color
-    --border-color: #e5e5e5;
-    --border-radius: 7px;
-    --box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);
-
-    --color-primary: #{$primaryColor};
-    --color-primary-light: #{$primaryColorLight};
-
-    --color-default: #305dfb;
-    --color-default-light: #4c74ff;
-
+    // Search bar
     --color-search-icon-medium: #{$primaryColor};
     --color-search-icon-dark: #{darken($primaryColor, 10%)};
     --color-search-icon-light: #{lighten($primaryColor, 25%)};
 
+    --search-bar-point-color: #ececec;
+    --search-bar-point-radius: 0px;
+
+    --search-bar-input-radius: var(--border-radius);
+    --search-bar-input-border: 1px solid var(--form-control-border-color);
+    --search-bar-input-background: #fff;
+    --search-bar-input-icon-color: #666666;
+
+    --search-bar-label-top: -7px;
+    --search-bar-label-left: 16px;
+    --search-bar-label-padding: 4px;
+    --search-bar-label-background: #ffffff;
+
+    // Dropdowns
+    --dropdown-item-font: 500 13px/20px var(--base-font);
+    --dropdown-item-color: #282b39;
+    --dropdown-item-background: #ffffff;
+    --dropdown-item-hover-color: #000000;
+    --dropdown-item-hover-background: #e5e5e5;
+
+    // Paginator
+    --paginator-border-radius: var(--border-radius);
+    --paginator-button-color: #282b39;
+    --paginator-button-border: #9e9e9e;
+    --paginator-button-background: #fff;
+    --paginator-button-hover-color: #fff;
+    --paginator-button-hover-background: #535561;
+    --paginator-button-active-color: #fff;
+    --paginator-button-active-background: #292b39;
+    --paginator-button-disabled-color: #535561;
+    --paginator-button-disabled-border: #e5e5e5;
+    --paginator-button-disabled-background: #f5f5f5;
+
+    // Labels
+    --label-default-color: #fff;
+    --label-default-background: #595959;
+
+    --label-primary-color: #fff;
+    --label-primary-background: var(--color-primary);
+
+    --label-danger-color: #030304;
+    --label-danger-background: #d38c87;
+
+    --label-success-color: #030304;
+    --label-success-background: #9bbfa1;
+
+    // Label sets
+    --label-set-border-radius: var(--border-radius);
+    --label-set-border-color: #9e9e9e;
+    --label-set-color: #272525;
+    --label-set-background: #ffffff;
+    --label-set-active-color: #ffffff;
+    --label-set-active-background: var(--color-primary);
+    --label-set-hover-color: #ffffff;
+    --label-set-hover-background: #{rgba($primaryColor, 0.8)};
+    --label-set-focus-color: #272525;
+    --label-set-focus-background: #f4f5f7;
+    --label-set-focus-border-color: #9e9e9e;
+
     // Buttons
     --button-font: 700 18px/24px var(--base-font);
     --button-color: #282b39;
+    --button-shadow: none;
+    --button-decoration: none;
     --button-border-radius: calc(var(--border-radius) * 0.75);
-
+    --button-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+    --button-hover-decoration: none;
     --button-disabled-color: #616161;
     --button-disabled-background: #e5e5e5;
 
-    // Label sets
-    --label-set-hover-background: #{rgba($primaryColor, 0.8)};
+    --button-primary-color: #fff;
+    --button-primary-border: 1px solid var(--color-primary);
+    --button-primary-decoration: none;
+    --button-primary-background: var(--color-primary);
+    --button-primary-hover-color: #fff;
+    --button-primary-hover-border: 1px solid var(--color-primary-light);
+    --button-primary-hover-decoration: none;
+    --button-primary-hover-background: var(--color-primary-light);
+
+    --button-primary-outline-color: var(--color-primary);
+    --button-primary-outline-border: 1px solid var(--color-primary);
+    --button-primary-outline-decoration: none;
+    --button-primary-outline-background: transparent;
+    --button-primary-outline-hover-color: #fff;
+    --button-primary-outline-hover-border: 1px solid var(--color-primary);
+    --button-primary-outline-hover-decoration: none;
+    --button-primary-outline-hover-background: var(--color-primary);
+
+    --button-read_more-color: var(--button-primary-color);
+    --button-read_more-border: var(--button-primary-border);
+    --button-read_more-decoration: var(--button-primary-decoration);
+    --button-read_more-background: var(--button-primary-background);
+    --button-read_more-hover-color: var(--button-primary-hover-color);
+    --button-read_more-hover-border: var(--button-primary-hover-border);
+    --button-read_more-hover-decoration: var(--button-primary-hover-decoration);
+    --button-read_more-hover-background: var(--button-primary-hover-background);
 
     // Sign up
     --sign_up_accent_color: #305dfb;
     --sign_up_accent_color_light: #bdcbff;
     --sign_up_link_color: #e60003;
-    --sign_up_step_btns_color: #305dfb;
+    --sign_up_step_btns_color: var(--tc);
     --sign_up_digid_btn_bkg: #e1e7ff;
     --sign_up_digid_btn_text: #4b71ff;
     --sign_up_digid_btn_border: none;
     --sign_up_digid_btn_border_radius: 5px;
+    --sign_up_loader_icon_color: #282b39;
 
     //- Showcase
+    --showcase-aside-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
+    --showcase-aside-padding: 20px;
+    --showcase-aside-background: #fff;
+    --showcase-aside-border: 1px solid #e5e5e5;
+    --showcase-aside-border-radius: var(--border-radius);
+
+    --showcase-item-shadow: var(--showcase-aside-shadow);
+    --showcase-item-background: var(--showcase-aside-background);
+    --showcase-item-border: var(--showcase-aside-border);
+    --showcase-item-border-radius: var(--showcase-aside-border-radius);
+    --showcase-item-hover-shadow: 2px 8px 14px 0px rgba(0, 0, 0, 0.1);
+
+    --showcase-aside-button-color: var(--color-primary);
+    --showcase-aside-button-border: 1px solid var(--color-primary);
+    --showcase-aside-button-background: transparent;
+    --showcase-aside-button-hover-color: #fff;
+    --showcase-aside-button-hover-border: 1px solid var(--color-primary);
+    --showcase-aside-button-hover-background: var(--color-primary);
+
+    --showcase-fullscreen-bottom-offset: 115px;
+
+    --showcase-title-font: 600 18px/30px var(--heading-font-family);
+    --showcase-title-color: var(--tc);
     --showcase-title-count-color: #0b0e12;
     --showcase-title-count-background: #e5e5e5;
-
-    // Nav item line position
-    --navbar-menu-item-line-position-top: 0;
-    --navbar-menu-item-line-position-bottom: auto;
+    --showcase-title-count-border-radius: calc(var(--border-radius) / 2);
 
     // Breadcrumbs
+    --breadcrumb-size: 16px;
     --breadcrumb-color: var(--htc);
     --breadcrumb-color-active: #2d3748;
+    --breadcrumb-padding: 20px;
+
+    // Loader
+    --loader-background: #f5f5f5;
+    --loader-color: var(--color-primary);
 
     // Profile
     --profile-menu-item-gap: 0;
@@ -143,8 +308,23 @@ $primaryColorLight: #627c18;
     --profile-menu-item-hover-border-color: transparent;
     --profile-menu-item-hover-border-radius: 0px;
 
+    // Vouchers
+    --vouchers-label-color: #646f79;
+    --vouchers-value-color: var(--tc);
+    --vouchers-organization-color: var(--tc);
+
+    // Voucher card
+    --voucher-card-action-color: var(--color-primary);
+    --voucher-card-action-background: transparent;
+    --voucher-card-action-border-color: var(--color-primary);
+    --voucher-card-action-border-radius: 0px;
+    --voucher-card-action-hover-color: #fff;
+    --voucher-card-action-hover-background: var(--color-primary);
+    --voucher-card-action-hover-border-color: var(--color-primary);
+
     // Products
     --products-title-color: #2e82a4;
+    --products-title-hover-color: var(--tc);
     --products-text-color: #2d3748;
 
     // Product
@@ -161,19 +341,6 @@ $primaryColorLight: #627c18;
     --map-title-color: #0b0e12;
     --map-title-font: 400 52px/72px var(--base-font);
 
-
-    // CMS funds
-    --cms-funds-title-font: 400 24px/36px var(--base-font);
-    --cms-funds-title-color: var(--htc);
-    --cms-funds-label-font-size: 11px;
-    --cms-funds-label-background: var(--color-primary);
-
-    --cms-funds-compact-title-font: 500 32px/48px var(--base-font);
-    --cms-funds-compact-title-color: var(--htc);
-
-    --cms-funds-link-color: #08749b;
-    --cms-funds-link-font: 600 18px/20px var(--base-font);
-
     // Sections
     --section-padding: 0 0 30px;
     --section-background: transparent;
@@ -189,6 +356,8 @@ $primaryColorLight: #627c18;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 30px 0;
     --section-footer-background: #08749b;
+    --section-pre-check-padding: 0 0 30px;
+    --section-pre-check-background: var(--section-background);
     --section-profile-padding: var(--section-padding);
     --section-profile-background: var(--section-background);
     --section-products-padding: var(--section-padding);
@@ -197,4 +366,24 @@ $primaryColorLight: #627c18;
     --section-breadcrumbs-background: var(--section-background);
     --section-voucher-details-padding: var(--section-padding);
     --section-voucher-details-background: var(--section-background);
-}
\ No newline at end of file
+
+    // Search bar
+    --search-result-sidebar-item-active-color: #a80a2d;
+    --search-result-sidebar-item-active-background: #fff;
+
+    // CMS funds
+    --cms-funds-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-title-color: var(--htc);
+    --cms-funds-label-font-size: 11px;
+    --cms-funds-label-background: var(--color-primary);
+
+    --cms-funds-compact-title-font: 500 32px/48px var(--base-font);
+    --cms-funds-compact-title-color: var(--htc);
+
+    --cms-funds-link-color: #08749b;
+    --cms-funds-link-font: 600 18px/20px var(--base-font);
+
+    // Section order
+    --order-page-voucher-map: 0;
+    --order-page-voucher-products: 0;
+}
diff --git a/react/assets/forus-webshop/scss/style-webshop-groningen-vars.scss b/react/assets/forus-webshop/scss/style-webshop-groningen-vars.scss
index 7ca483555..a2e8a7fd7 100644
--- a/react/assets/forus-webshop/scss/style-webshop-groningen-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-groningen-vars.scss
@@ -5,19 +5,68 @@ $primaryColor: #000;
 $primaryColorLight: #e60204;
 
 :root {
+    --zoom: 100%;
+    --zoom-mobile: 100%;
+
+    --border-color: #dce0e0;
+    --border-radius: 0px;
+    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+
+    --color-primary: #{$primaryColor};
+    --color-primary-light: #{$primaryColorLight};
+
+    --color-default: #e60204;
+    --color-default-light: #4c74ff;
+
+    --color-danger: #e63b3b;
+
     // navbar
+    --navbar-box-shadow: none;
+
+    --navbar-menu-gap: 22px;
+    --navbar-menu-order: 1;
     --navbar-menu-background: #191818;
+
+    --navbar-search-gap: 20px;
+    --navbar-search-order: 2;
+    --navbar-search-padding: 20px 0px;
     --navbar-search-background: #E4E4E4 url('./assets/img/city-skyline.svg') no-repeat bottom center / 50% 50%;
-    --navbar-menu-item-color-hover: #ececec;
+    --navbar-search-border-bottom: 1px solid var(--border-color);
+
+    --navbar-menu-item-font: 400 18px/21px var(--base-font);
     --navbar-menu-item-color: #b3b3b3;
-    --navbar-search-padding: 20px 0px;
+    --navbar-menu-item-color-hover: #ececec;
+    --navbar-menu-item-padding: 16px 0;
+    --navbar-menu-item-background: transparent;
+    --navbar-menu-item-background-hover: transparent;
+
+    --navbar-menu-separator-opacity: 0.25;
+    --navbar-menu-separator-background: var(--navbar-menu-item-color);
+
+    --navbar-auth-font: 600 16px/20px var(--base-font);
+
     --navbar-logo-height: 90px;
 
-    // navbar (auth)
+    // Nav item line position
+    --navbar-menu-item-line-position-top: 0;
+    --navbar-menu-item-line-position-bottom: auto;
+
+    // wrapper
+    --wrapper-width: calc(1280px + 50px);
+    --wrapper-padding: 20px;
+
+    // Outline
+    --focus-outline: 2px solid #315efd;
+    --focus-outline-offset: 2px;
+    --focus-box-shadow: 0 0 0 3px white;
+
+    // navbar (auth) (default button)
     --tc-auth-menu: #fff;
     --tc-auth-btn: #282b39;
     --btn-auth-bg: #fff;
     --btn-auth-border: #191818;
+    --auth-avater-bg: #305dfb;
+    --auth-avater-svg: #fff;
 
     // navbar (start modal primary)
     --tc-start-btn: #fff;
@@ -25,13 +74,149 @@ $primaryColorLight: #e60204;
     --btn-start-btn: #e60103;
     --btn-start-border: #e60103;
 
+    // header background
+    --bg-values: none;
+
+    // Header banner
+    --header-banner-pane-banner-padding: 50px 0;
+    --header-banner-pane-banner-max-width: 650px;
+    --header-banner-pane-banner-background: transparent;
+    --header-banner-pane-banner-border-color: initial;
+    --header-banner-pane-banner-border-radius: initial;
+
+    // base font
+    --base-font: Verdana, arial;
+
+    // text color
+    --tc: #1a1919;
+    --htc: var(--tc);
+    --tc-var: #fff;
+    --tc-link: #2b2bff;
+    --tc-muted: #595959;
+
+    // heading font
+    --heading-font-family: var(--base-font);
+    --heading-font: 700 40px/60px var(--heading-font-family);
+    --heading-color: var(--tc);
+    --heading-pane-font: 700 22px/30px var(--heading-font-family);
+
+    // base color
+    --bc: #e60003;
+
+    // background color
+    --body-background: none;
+
+    // footer color
+    --footer_padding: 0;
+    --footer_background: transparent;
+    --footer_color: #fff;
+    --footer_color_link: #fff;
+
+    --footer_social_color: var(--footer_color);
+    --footer_social_background: transparent;
+    --footer_social_border_color: var(--footer_color);
+    --footer_social_border_radius: var(--border-radius);
+
+    --footer-copyright-color: #000;
+    --footer-copyright-font: 400 14px/30px var(--base-font);
+    --footer-copyright-background: #fff;
+    --footer-copyright-border-color: var(--border-color);
+    --footer-copyright-padding: 40px;
+
+    // not displayed
+    --footer_display: block;
+
+    // product image
+    --product-image-padding: 0px;
+
+    // Markdown
+    --markdown-font: 400 16px/24px var(--base-font);
+
+    // Forms
+    --form-control-color: #222222;
+    --form-control-background: #ffffff;
+    --form-control-border-color: #646464;
+    --form-control-border-color-focus: #282b39;
+    --form-control-placeholder-font: 400 13px/20px var(--base-font);
+    --form-control-placeholder-color: #515152;
+    --form-label-color: #595959;
+    --form-label-font: 700 11px/16px var(--base-font);
+
     // Search bar
+    --color-search-icon-medium: #{$primaryColor};
+    --color-search-icon-dark: #{darken($primaryColor, 10%)};
+    --color-search-icon-light: #{lighten($primaryColor, 25%)};
+
+    --search-bar-point-color: #ececec;
+    --search-bar-point-radius: 0px;
+
+    --search-bar-input-radius: var(--border-radius);
+    --search-bar-input-border: 1px solid var(--form-control-border-color);
+    --search-bar-input-background: #fff;
+    --search-bar-input-icon-color: #666666;
+
     --search-bar-label-top: -18px;
     --search-bar-label-left: 0px;
     --search-bar-label-padding: 0px;
     --search-bar-label-background: transparent;
 
+    // Dropdowns
+    --dropdown-item-font: 500 13px/20px var(--base-font);
+    --dropdown-item-color: #282b39;
+    --dropdown-item-background: #ffffff;
+    --dropdown-item-hover-color: #000000;
+    --dropdown-item-hover-background: #e5e5e5;
+
+    // Paginator
+    --paginator-border-radius: var(--border-radius);
+    --paginator-button-color: #282b39;
+    --paginator-button-border: #9e9e9e;
+    --paginator-button-background: #fff;
+    --paginator-button-hover-color: #fff;
+    --paginator-button-hover-background: #535561;
+    --paginator-button-active-color: #fff;
+    --paginator-button-active-background: #292b39;
+    --paginator-button-disabled-color: #535561;
+    --paginator-button-disabled-border: #e5e5e5;
+    --paginator-button-disabled-background: #f5f5f5;
+
+    // Labels
+    --label-default-color: #fff;
+    --label-default-background: #595959;
+
+    --label-primary-color: #fff;
+    --label-primary-background: var(--color-primary);
+
+    --label-danger-color: #030304;
+    --label-danger-background: #d38c87;
+
+    --label-success-color: #030304;
+    --label-success-background: #9bbfa1;
+
+    // Label sets
+    --label-set-border-radius: var(--border-radius);
+    --label-set-border-color: #9e9e9e;
+    --label-set-color: #272525;
+    --label-set-background: #ffffff;
+    --label-set-active-color: #ffffff;
+    --label-set-active-background: var(--color-primary);
+    --label-set-hover-color: #ffffff;
+    --label-set-hover-background: #{rgba($primaryColor, 0.7)};
+    --label-set-focus-color: #272525;
+    --label-set-focus-background: #f4f5f7;
+    --label-set-focus-border-color: #9e9e9e;
+
     // Buttons
+    --button-font: 700 16px/24px var(--base-font);
+    --button-color: #282b39;
+    --button-shadow: none;
+    --button-decoration: none;
+    --button-border-radius: calc(var(--border-radius) * 0.75);
+    --button-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+    --button-hover-decoration: none;
+    --button-disabled-color: #616161;
+    --button-disabled-background: #e5e5e5;
+
     --button-primary-color: var(--tc-var);
     --button-primary-border: 1px solid var(--color-default);
     --button-primary-decoration: none;
@@ -50,7 +235,16 @@ $primaryColorLight: #e60204;
     --button-primary-outline-hover-decoration: underline;
     --button-primary-outline-hover-background: var(--color-primary);
 
-    // sign up
+    --button-read_more-color: var(--button-primary-color);
+    --button-read_more-border: var(--button-primary-border);
+    --button-read_more-decoration: var(--button-primary-decoration);
+    --button-read_more-background: var(--button-primary-background);
+    --button-read_more-hover-color: var(--button-primary-hover-color);
+    --button-read_more-hover-border: var(--button-primary-hover-border);
+    --button-read_more-hover-decoration: var(--button-primary-hover-decoration);
+    --button-read_more-hover-background: var(--button-primary-hover-background);
+
+    // Sign up
     --sign_up_accent_color: #191a1c;
     --sign_up_accent_color_light: #45535e;
     --sign_up_link_color: #e60004;
@@ -59,64 +253,92 @@ $primaryColorLight: #e60204;
     --sign_up_digid_btn_text: #191818;
     --sign_up_digid_btn_border: 1px solid #191818;
     --sign_up_digid_btn_border_radius: 0;
+    --sign_up_loader_icon_color: #282b39;
 
-    --bg-values: none;
-
-    // base font
-    --base-font: Verdana, arial;
-
-    // text color
-    --tc: #1a1919;
-    --tc-var: #fff;
-    --tc-link: #2b2bff;
-
-    // base color
-    --bc: #e60003;
-
-    // background color
-    --body-background: none;
-
-    // footer color
-    --footer_background: transparent;
-    --footer_color: #fff;
-    --footer_color_link: #fff;
-    --footer_color_link_hover: #fff;
+    //- Showcase
+    --showcase-aside-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
+    --showcase-aside-padding: 20px;
+    --showcase-aside-background: #fff;
+    --showcase-aside-border: 1px solid #e5e5e5;
+    --showcase-aside-border-radius: var(--border-radius);
 
-    --footer-copyright-color: #000;
-    --footer-copyright-background: #fff;
+    --showcase-item-shadow: var(--showcase-aside-shadow);
+    --showcase-item-background: var(--showcase-aside-background);
+    --showcase-item-border: var(--showcase-aside-border);
+    --showcase-item-border-radius: var(--showcase-aside-border-radius);
+    --showcase-item-hover-shadow: 2px 8px 14px 0px rgba(0, 0, 0, 0.1);
 
-    // displayed or not
-    --footer_display: block;
+    --showcase-aside-button-color: var(--color-primary);
+    --showcase-aside-button-border: 1px solid var(--color-primary);
+    --showcase-aside-button-background: transparent;
+    --showcase-aside-button-hover-color: #fff;
+    --showcase-aside-button-hover-border: 1px solid var(--color-primary);
+    --showcase-aside-button-hover-background: var(--color-primary);
 
-    // product image
-    --product-image-padding: 0px;
+    --showcase-fullscreen-bottom-offset: 155px;
 
-    // placeholder text color
-    --form-control-placeholder-color: #515152;
+    --showcase-title-font: 600 18px/30px var(--heading-font-family);
+    --showcase-title-color: var(--tc);
+    --showcase-title-count-color: #fff;
+    --showcase-title-count-background: var(--color-primary);
+    --showcase-title-count-border-radius: calc(var(--border-radius) / 2);
 
-    --border-color: #dce0e0;
+    // Breadcrumbs
+    --breadcrumb-size: 16px;
+    --breadcrumb-color: var(--color-primary);
+    --breadcrumb-color-active: #353535;
+    --breadcrumb-padding: 20px;
 
-    --border-radius: 0px;
-    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+    // Loader
+    --loader-background: #f5f5f5;
+    --loader-color: var(--color-primary);
 
-    --color-primary: #{$primaryColor};
-    --color-primary-light: #{$primaryColorLight};
+    // Profile
+    --profile-menu-item-gap: 16px;
+    --profile-menu-item-color: var(--color-primary);
+    --profile-menu-item-color-icon: var(--profile-menu-item-color);
+    --profile-menu-item-shadow: var(--box-shadow);
+    --profile-menu-item-background: #ffffff;
+    --profile-menu-item-border-color: transparent;
+    --profile-menu-item-border-radius: var(--border-radius);
+    --profile-menu-item-hover-color: #fff;
+    --profile-menu-item-hover-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
+    --profile-menu-item-hover-background: var(--color-primary);
+    --profile-menu-item-hover-border-color: var(--color-primary);
+    --profile-menu-item-hover-border-radius: var(--border-radius);
 
-    --color-default: #e60204;
+    // Vouchers
+    --vouchers-label-color: #646f79;
+    --vouchers-value-color: var(--tc);
+    --vouchers-organization-color: var(--tc);
 
-    --color-search-icon-medium: #{$primaryColor};
-    --color-search-icon-dark: #{darken($primaryColor, 10%)};
-    --color-search-icon-light: #{lighten($primaryColor, 25%)};
+    // Voucher card
+    --voucher-card-action-color: var(--color-primary);
+    --voucher-card-action-background: transparent;
+    --voucher-card-action-border-color: var(--color-primary);
+    --voucher-card-action-border-radius: 0px;
+    --voucher-card-action-hover-color: #fff;
+    --voucher-card-action-hover-background: var(--color-primary);
+    --voucher-card-action-hover-border-color: var(--color-primary);
 
-    // Label sets
-    --label-set-hover-background: #{rgba($primaryColor, 0.7)};
+    // Products
+    --products-title-color: var(--tc);
+    --products-title-hover-color: var(--tc);
+    --products-text-color: var(--tc);
 
-    //- Showcase
-    --showcase-fullscreen-bottom-offset: 155px;
+    // Product
+    --product-title-font: 700 22px/28px var(--heading-font-family);
+    --product-title-color: var(--tc);
 
-    // Login button
-    --login-button-background: #fff;
+    // Faq
+    --faq-width: 820px;
+    --faq-align: center;
+    --faq-header-color: #00122a;
+    --faq-header-color-hover: var(--color-primary);
 
+    // Map
+    --map-title-color: #0B0E12;
+    --map-title-font: 700 40px var(--heading-font-family);
 
     // Sections
     --section-padding: 0 0 30px;
@@ -133,6 +355,8 @@ $primaryColorLight: #e60204;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 30px 0;
     --section-footer-background: #e60004;
+    --section-pre-check-padding: 0 0 30px;
+    --section-pre-check-background: var(--section-background);
     --section-profile-padding: var(--section-padding);
     --section-profile-background: var(--section-background);
     --section-products-padding: var(--section-padding);
@@ -141,4 +365,24 @@ $primaryColorLight: #e60204;
     --section-breadcrumbs-background: var(--section-background);
     --section-voucher-details-padding: var(--section-padding);
     --section-voucher-details-background: var(--section-background);
+
+    // Search bar
+    --search-result-sidebar-item-active-color: #a80a2d;
+    --search-result-sidebar-item-active-background: #fff;
+
+    // CMS funds
+    --cms-funds-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-title-color: var(--htc);
+    --cms-funds-label-font-size: 11px;
+    --cms-funds-label-background: var(--color-primary);
+
+    --cms-funds-compact-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-compact-title-color: var(--htc);
+
+    --cms-funds-link-color: var(--color-primary);
+    --cms-funds-link-font: 600 18px/20px var(--base-font);
+
+    // Section order
+    --order-page-voucher-map: 0;
+    --order-page-voucher-products: 0;
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant-vars.scss b/react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant-vars.scss
index ec51088c8..beadf9ad4 100644
--- a/react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant-vars.scss
@@ -6,18 +6,68 @@ $primaryColor: #24a1a1;
 $primaryColorLight: #24a1a1;
 
 :root {
+    --zoom: 100%;
+    --zoom-mobile: 100%;
+
+    --border-color: #dce0e0;
+    --border-radius: 0px;
+    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+
+    --color-primary: #{$primaryColor};
+    --color-primary-light: #{$primaryColorLight};
+
+    --color-default: #24a1a1;
+    --color-default-light: #24a1a1;
+
+    --color-danger: #e63b3b;
+
     // navbar
+    --navbar-box-shadow: none;
+
+    --navbar-menu-gap: 22px;
+    --navbar-menu-order: 1;
     --navbar-menu-background: #5d646f;
-    --navbar-menu-item-color-hover: #c7c7c7;
-    --navbar-menu-item-color: #ffffff;
+
+    --navbar-search-gap: 20px;
+    --navbar-search-order: 2;
     --navbar-search-padding: 30px 0px;
+    --navbar-search-background: #ffffff;
+    --navbar-search-border-bottom: 1px solid var(--border-color);
+
+    --navbar-menu-item-font: 400 18px/21px var(--base-font);
+    --navbar-menu-item-color: #ffffff;
+    --navbar-menu-item-color-hover: #c7c7c7;
+    --navbar-menu-item-padding: 16px 0;
+    --navbar-menu-item-background: transparent;
+    --navbar-menu-item-background-hover: transparent;
+
+    --navbar-menu-separator-opacity: 0.25;
+    --navbar-menu-separator-background: var(--navbar-menu-item-color);
+
+    --navbar-auth-font: 600 16px/20px var(--base-font);
+
     --navbar-logo-height: 75px;
 
-    // navbar (auth)
+    // Nav item line position
+    --navbar-menu-item-line-position-top: 0;
+    --navbar-menu-item-line-position-bottom: auto;
+
+    // wrapper
+    --wrapper-width: calc(1280px + 50px);
+    --wrapper-padding: 20px;
+
+    // Outline
+    --focus-outline: 2px solid #315efd;
+    --focus-outline-offset: 2px;
+    --focus-box-shadow: 0 0 0 3px white;
+
+    // navbar (auth) (default button)
     --tc-auth-menu: #24a1a1;
     --tc-auth-btn: #fff;
     --btn-auth-bg: #24a1a1;
     --btn-auth-border: #24a1a1;
+    --auth-avater-bg: #305dfb;
+    --auth-avater-svg: #fff;
 
     // navbar (start modal primary)
     --tc-start-btn: #fff;
@@ -25,19 +75,31 @@ $primaryColorLight: #24a1a1;
     --btn-start-btn: #24a1a1;
     --btn-start-border: transparent;
 
+    // header background
     --bg-values: url("../img/splash-top-b.jpg") no-repeat center 100%;
 
+    // Header banner
+    --header-banner-pane-banner-padding: 50px 0;
+    --header-banner-pane-banner-max-width: 650px;
+    --header-banner-pane-banner-background: transparent;
+    --header-banner-pane-banner-border-color: initial;
+    --header-banner-pane-banner-border-radius: initial;
+
     // base font
     --base-font: "Montserrat", Arial, Verdana;
 
     // text color
     --tc: #1a1919;
+    --htc: var(--tc);
     --tc-var: #fff;
     --tc-link: inherit;
+    --tc-muted: #595959;
 
     // heading font
     --heading-font-family: var(--base-font);
+    --heading-font: 700 40px/60px var(--heading-font-family);
     --heading-color: #24A1A1;
+    --heading-pane-font: 700 22px/30px var(--heading-font-family);
 
     // base color
     --bc: #24a1a1;
@@ -46,43 +108,104 @@ $primaryColorLight: #24a1a1;
     --body-background: none;
 
     // footer color
+    --footer_padding: 0;
     --footer_background: transparent;
     --footer_color: #ffffff;
     --footer_color_link: #ffffff;
 
+    --footer_social_color: var(--footer_color);
+    --footer_social_background: transparent;
+    --footer_social_border_color: var(--footer_color);
+    --footer_social_border_radius: var(--border-radius);
+
     --footer-copyright-color: var(--footer_color_link);
     --footer-copyright-font: 400 14px/30px var(--base-font);
     --footer-copyright-background: #24a1a1;
     --footer-copyright-border-color: var(--border-color);
     --footer-copyright-padding: 40px;
 
-    // displayed or not
+    // not displayed
     --footer_display: block;
 
     // product image
     --product-image-padding: 0px;
 
-    // placeholder text color
-    --form-control-placeholder-color: #515152;
-
-    --border-color: #dce0e0;
-
-    --border-radius: 0px;
-    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-
-    --color-primary: #{$primaryColor};
-    --color-primary-light: #{$primaryColorLight};
+    // Markdown
+    --markdown-font: 400 16px/24px var(--base-font);
 
-    --color-default: #24a1a1;
-    --color-default-light: #24a1a1;
+    // Forms
+    --form-control-color: #222222;
+    --form-control-background: #ffffff;
+    --form-control-border-color: #646464;
+    --form-control-border-color-focus: #282b39;
+    --form-control-placeholder-font: 400 13px/20px var(--base-font);
+    --form-control-placeholder-color: #515152;
+    --form-label-color: #595959;
+    --form-label-font: 700 11px/16px var(--base-font);
 
+    // Search bar
     --color-search-icon-medium: #{$primaryColor};
     --color-search-icon-dark: #{darken($primaryColor, 10%)};
     --color-search-icon-light: #{lighten($primaryColor, 25%)};
 
+    --search-bar-point-color: #ececec;
+    --search-bar-point-radius: 0px;
+
+    --search-bar-input-radius: var(--border-radius);
+    --search-bar-input-border: 1px solid var(--form-control-border-color);
+    --search-bar-input-background: #fff;
+    --search-bar-input-icon-color: #666666;
+
+    --search-bar-label-top: -7px;
+    --search-bar-label-left: 16px;
+    --search-bar-label-padding: 4px;
+    --search-bar-label-background: #ffffff;
+
+    // Dropdowns
+    --dropdown-item-font: 500 13px/20px var(--base-font);
+    --dropdown-item-color: #282b39;
+    --dropdown-item-background: #ffffff;
+    --dropdown-item-hover-color: #000000;
+    --dropdown-item-hover-background: #e5e5e5;
+
+    // Paginator
+    --paginator-border-radius: var(--border-radius);
+    --paginator-button-color: #282b39;
+    --paginator-button-border: #9e9e9e;
+    --paginator-button-background: #fff;
+    --paginator-button-hover-color: #fff;
+    --paginator-button-hover-background: #535561;
+    --paginator-button-active-color: #fff;
+    --paginator-button-active-background: #292b39;
+    --paginator-button-disabled-color: #535561;
+    --paginator-button-disabled-border: #e5e5e5;
+    --paginator-button-disabled-background: #f5f5f5;
+
+    // Labels
+    --label-default-color: #fff;
+    --label-default-background: #595959;
+
+    --label-primary-color: #fff;
+    --label-primary-background: var(--color-primary);
+
+    --label-danger-color: #030304;
+    --label-danger-background: #d38c87;
+
+    --label-success-color: #030304;
+    --label-success-background: #9bbfa1;
+
     // Label sets
+    --label-set-border-radius: var(--border-radius);
+    --label-set-border-color: #9e9e9e;
+    --label-set-color: #272525;
+    --label-set-background: #ffffff;
+    --label-set-active-color: #ffffff;
+    --label-set-active-background: var(--color-primary);
+    --label-set-hover-color: #ffffff;
     --label-set-hover-background: #{rgba($primaryColor, .8)};
-
+    --label-set-focus-color: #272525;
+    --label-set-focus-background: #f4f5f7;
+    --label-set-focus-border-color: #9e9e9e;
 
     // Buttons
     --button-font: 700 16px/24px var(--base-font);
@@ -122,12 +245,101 @@ $primaryColorLight: #24a1a1;
     --button-read_more-hover-decoration: null;
     --button-read_more-hover-background: #24a1a1;
 
+    // Sign up
+    --sign_up_accent_color: #282b39;
+    --sign_up_accent_color_light: #bdcbff;
+    --sign_up_link_color: #e60003;
+    --sign_up_step_btns_color: var(--tc);
+    --sign_up_digid_btn_bkg: #e1e7ff;
+    --sign_up_digid_btn_text: #4b71ff;
+    --sign_up_digid_btn_border: none;
+    --sign_up_digid_btn_border_radius: 5px;
+    --sign_up_loader_icon_color: #282b39;
+
     //- Showcase
-    --showcase-fullscreen-bottom-offset: 160px;
+    --showcase-aside-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
+    --showcase-aside-padding: 20px;
+    --showcase-aside-background: #fff;
+    --showcase-aside-border: 1px solid #e5e5e5;
+    --showcase-aside-border-radius: var(--border-radius);
+
+    --showcase-item-shadow: var(--showcase-aside-shadow);
+    --showcase-item-background: var(--showcase-aside-background);
+    --showcase-item-border: var(--showcase-aside-border);
+    --showcase-item-border-radius: var(--showcase-aside-border-radius);
+    --showcase-item-hover-shadow: 2px 8px 14px 0px rgba(0, 0, 0, 0.1);
+
+    --showcase-aside-button-color: var(--color-primary);
+    --showcase-aside-button-border: 1px solid var(--color-primary);
+    --showcase-aside-button-background: transparent;
+    --showcase-aside-button-hover-color: #fff;
+    --showcase-aside-button-hover-border: 1px solid var(--color-primary);
+    --showcase-aside-button-hover-background: var(--color-primary);
 
-    // Login button
-    --login-button-background: #fff;
+    --showcase-fullscreen-bottom-offset: 160px;
 
+    --showcase-title-font: 600 18px/30px var(--heading-font-family);
+    --showcase-title-color: var(--tc);
+    --showcase-title-count-color: #fff;
+    --showcase-title-count-background: var(--color-primary);
+    --showcase-title-count-border-radius: calc(var(--border-radius) / 2);
+
+    // Breadcrumbs
+    --breadcrumb-size: 16px;
+    --breadcrumb-color: var(--color-primary);
+    --breadcrumb-color-active: #353535;
+    --breadcrumb-padding: 20px;
+
+    // Loader
+    --loader-background: #f5f5f5;
+    --loader-color: var(--color-primary);
+
+    // Profile
+    --profile-menu-item-gap: 16px;
+    --profile-menu-item-color: var(--color-primary);
+    --profile-menu-item-color-icon: var(--profile-menu-item-color);
+    --profile-menu-item-shadow: var(--box-shadow);
+    --profile-menu-item-background: #ffffff;
+    --profile-menu-item-border-color: transparent;
+    --profile-menu-item-border-radius: var(--border-radius);
+    --profile-menu-item-hover-color: #fff;
+    --profile-menu-item-hover-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
+    --profile-menu-item-hover-background: var(--color-primary);
+    --profile-menu-item-hover-border-color: var(--color-primary);
+    --profile-menu-item-hover-border-radius: var(--border-radius);
+
+    // Vouchers
+    --vouchers-label-color: #646f79;
+    --vouchers-value-color: var(--tc);
+    --vouchers-organization-color: var(--tc);
+
+    // Voucher card
+    --voucher-card-action-color: var(--color-primary);
+    --voucher-card-action-background: transparent;
+    --voucher-card-action-border-color: var(--color-primary);
+    --voucher-card-action-border-radius: 0px;
+    --voucher-card-action-hover-color: #fff;
+    --voucher-card-action-hover-background: var(--color-primary);
+    --voucher-card-action-hover-border-color: var(--color-primary);
+
+    // Products
+    --products-title-color: var(--tc);
+    --products-title-hover-color: var(--tc);
+    --products-text-color: var(--tc);
+
+    // Product
+    --product-title-font: 700 22px/28px var(--heading-font-family);
+    --product-title-color: var(--tc);
+
+    // Faq
+    --faq-width: 820px;
+    --faq-align: center;
+    --faq-header-color: #00122a;
+    --faq-header-color-hover: var(--color-primary);
+
+    // Map
+    --map-title-color: #0B0E12;
+    --map-title-font: 700 40px var(--heading-font-family);
 
     // Sections
     --section-padding: 0 0 30px;
@@ -144,6 +356,8 @@ $primaryColorLight: #24a1a1;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 30px 0;
     --section-footer-background: #24a1a1;
+    --section-pre-check-padding: 0 0 30px;
+    --section-pre-check-background: var(--section-background);
     --section-profile-padding: var(--section-padding);
     --section-profile-background: var(--section-background);
     --section-products-padding: var(--section-padding);
@@ -152,4 +366,24 @@ $primaryColorLight: #24a1a1;
     --section-breadcrumbs-background: var(--section-background);
     --section-voucher-details-padding: var(--section-padding);
     --section-voucher-details-background: var(--section-background);
+
+    // Search bar
+    --search-result-sidebar-item-active-color: #a80a2d;
+    --search-result-sidebar-item-active-background: #fff;
+
+    // CMS funds
+    --cms-funds-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-title-color: var(--htc);
+    --cms-funds-label-font-size: 11px;
+    --cms-funds-label-background: var(--color-primary);
+
+    --cms-funds-compact-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-compact-title-color: var(--htc);
+
+    --cms-funds-link-color: var(--color-primary);
+    --cms-funds-link-font: 600 18px/20px var(--base-font);
+
+    // Section order
+    --order-page-voucher-map: 0;
+    --order-page-voucher-products: 0;
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-heumen-vars.scss b/react/assets/forus-webshop/scss/style-webshop-heumen-vars.scss
index 93b614bb8..92732ae44 100644
--- a/react/assets/forus-webshop/scss/style-webshop-heumen-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-heumen-vars.scss
@@ -6,18 +6,68 @@ $primaryColor: #22398e;
 $primaryColorLight: #22398e;
 
 :root {
+    --zoom: 100%;
+    --zoom-mobile: 100%;
+
+    --border-color: #dce0e0;
+    --border-radius: 0px;
+    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+
+    --color-primary: #{$primaryColor};
+    --color-primary-light: #{$primaryColorLight};
+
+    --color-default: #{$primaryColor};
+    --color-default-light: #{$primaryColor};
+
+    --color-danger: #e63b3b;
+
     // navbar
+    --navbar-box-shadow: none;
+
+    --navbar-menu-gap: 22px;
+    --navbar-menu-order: 1;
     --navbar-menu-background: #ececec;
-    --navbar-menu-item-color-hover: #4a60b3;
-    --navbar-menu-item-color: #22398e;
+
+    --navbar-search-gap: 20px;
+    --navbar-search-order: 2;
     --navbar-search-padding: 30px 0px;
+    --navbar-search-background: #ffffff;
+    --navbar-search-border-bottom: 1px solid var(--border-color);
+
+    --navbar-menu-item-font: 400 18px/21px var(--base-font);
+    --navbar-menu-item-color: #22398e;
+    --navbar-menu-item-color-hover: #4a60b3;
+    --navbar-menu-item-padding: 16px 0;
+    --navbar-menu-item-background: transparent;
+    --navbar-menu-item-background-hover: transparent;
+
+    --navbar-menu-separator-opacity: 0.25;
+    --navbar-menu-separator-background: var(--navbar-menu-item-color);
+
+    --navbar-auth-font: 600 16px/20px var(--base-font);
+
     --navbar-logo-height: 75px;
 
-    // navbar (auth)
+    // Nav item line position
+    --navbar-menu-item-line-position-top: 0;
+    --navbar-menu-item-line-position-bottom: auto;
+
+    // wrapper
+    --wrapper-width: calc(1280px + 50px);
+    --wrapper-padding: 20px;
+
+    // Outline
+    --focus-outline: 2px solid #315efd;
+    --focus-outline-offset: 2px;
+    --focus-box-shadow: 0 0 0 3px white;
+
+    // navbar (auth) (default button)
     --tc-auth-menu: #22398e;
     --tc-auth-btn: #fff;
     --btn-auth-bg: #22398e;
     --btn-auth-border: #22398e;
+    --auth-avater-bg: #305dfb;
+    --auth-avater-svg: #fff;
 
     // navbar (start modal primary)
     --tc-start-btn: #fff;
@@ -25,15 +75,31 @@ $primaryColorLight: #22398e;
     --btn-start-btn: #61ba90;
     --btn-start-border: transparent;
 
+    // header background
     --bg-values: url("../img/splash-top-b.jpg") no-repeat center 100%;
 
+    // Header banner
+    --header-banner-pane-banner-padding: 50px 0;
+    --header-banner-pane-banner-max-width: 650px;
+    --header-banner-pane-banner-background: transparent;
+    --header-banner-pane-banner-border-color: initial;
+    --header-banner-pane-banner-border-radius: initial;
+
     // base font
     --base-font: Arial, Verdana;
 
     // text color
     --tc: #1a1919;
+    --htc: var(--tc);
     --tc-var: #fff;
     --tc-link: inherit;
+    --tc-muted: #595959;
+
+    // heading font
+    --heading-font-family: var(--base-font);
+    --heading-font: 700 40px/60px var(--heading-font-family);
+    --heading-color: var(--tc);
+    --heading-pane-font: 700 22px/30px var(--heading-font-family);
 
     // base color
     --bc: #22398e;
@@ -42,10 +108,15 @@ $primaryColorLight: #22398e;
     --body-background: none;
 
     // footer color
-    --footer_background: translate;
+    --footer_padding: 0;
+    --footer_background: transparent;
     --footer_color: #ffffff;
     --footer_color_link: #ffffff;
 
+    --footer_social_color: var(--footer_color);
+    --footer_social_background: transparent;
+    --footer_social_border_color: var(--footer_color);
+    --footer_social_border_radius: var(--border-radius);
 
     --footer-copyright-color: var(--footer_color_link);
     --footer-copyright-font: 400 14px/30px var(--base-font);
@@ -53,39 +124,222 @@ $primaryColorLight: #22398e;
     --footer-copyright-border-color: var(--border-color);
     --footer-copyright-padding: 40px;
 
-    // displayed or not
+    // not displayed
     --footer_display: block;
 
     // product image
     --product-image-padding: 0px;
 
-    // placeholder text color
+    // Markdown
+    --markdown-font: 400 16px/24px var(--base-font);
+
+    // Forms
+    --form-control-color: #222222;
+    --form-control-background: #ffffff;
+    --form-control-border-color: #646464;
+    --form-control-border-color-focus: #282b39;
+    --form-control-placeholder-font: 400 13px/20px var(--base-font);
     --form-control-placeholder-color: #515152;
+    --form-label-color: #595959;
+    --form-label-font: 700 11px/16px var(--base-font);
 
-    --border-color: #dce0e0;
+    // Search bar
+    --color-search-icon-medium: #{$primaryColor};
+    --color-search-icon-dark: #{darken($primaryColor, 10%)};
+    --color-search-icon-light: #{lighten($primaryColor, 25%)};
 
-    --border-radius: 0px;
-    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+    --search-bar-point-color: #ececec;
+    --search-bar-point-radius: 0px;
 
-    --color-primary: #{$primaryColor};
-    --color-primary-light: #{$primaryColorLight};
+    --search-bar-input-radius: var(--border-radius);
+    --search-bar-input-border: 1px solid var(--form-control-border-color);
+    --search-bar-input-background: #fff;
+    --search-bar-input-icon-color: #666666;
 
-    --color-default: #{$primaryColor};
-    --color-default-light: #{$primaryColor};
+    --search-bar-label-top: -7px;
+    --search-bar-label-left: 16px;
+    --search-bar-label-padding: 4px;
+    --search-bar-label-background: #ffffff;
 
-    --color-search-icon-medium: #{$primaryColor};
-    --color-search-icon-dark: #{darken($primaryColor, 10%)};
-    --color-search-icon-light: #{lighten($primaryColor, 25%)};
+    // Dropdowns
+    --dropdown-item-font: 500 13px/20px var(--base-font);
+    --dropdown-item-color: #282b39;
+    --dropdown-item-background: #ffffff;
+    --dropdown-item-hover-color: #000000;
+    --dropdown-item-hover-background: #e5e5e5;
+
+    // Paginator
+    --paginator-border-radius: var(--border-radius);
+    --paginator-button-color: #282b39;
+    --paginator-button-border: #9e9e9e;
+    --paginator-button-background: #fff;
+    --paginator-button-hover-color: #fff;
+    --paginator-button-hover-background: #535561;
+    --paginator-button-active-color: #fff;
+    --paginator-button-active-background: #292b39;
+    --paginator-button-disabled-color: #535561;
+    --paginator-button-disabled-border: #e5e5e5;
+    --paginator-button-disabled-background: #f5f5f5;
+
+    // Labels
+    --label-default-color: #fff;
+    --label-default-background: #595959;
+
+    --label-primary-color: #fff;
+    --label-primary-background: var(--color-primary);
+
+    --label-danger-color: #030304;
+    --label-danger-background: #d38c87;
+
+    --label-success-color: #030304;
+    --label-success-background: #9bbfa1;
 
     // Label sets
+    --label-set-border-radius: var(--border-radius);
+    --label-set-border-color: #9e9e9e;
+    --label-set-color: #272525;
+    --label-set-background: #ffffff;
+    --label-set-active-color: #ffffff;
+    --label-set-active-background: var(--color-primary);
+    --label-set-hover-color: #ffffff;
     --label-set-hover-background: #{rgba($primaryColor, .8)};
+    --label-set-focus-color: #272525;
+    --label-set-focus-background: #f4f5f7;
+    --label-set-focus-border-color: #9e9e9e;
+
+    // Buttons
+    --button-font: 700 16px/24px var(--base-font);
+    --button-color: #282b39;
+    --button-shadow: none;
+    --button-decoration: none;
+    --button-border-radius: calc(var(--border-radius) * 0.75);
+    --button-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+    --button-hover-decoration: none;
+    --button-disabled-color: #616161;
+    --button-disabled-background: #e5e5e5;
+
+    --button-primary-color: #fff;
+    --button-primary-border: 1px solid var(--color-primary);
+    --button-primary-decoration: none;
+    --button-primary-background: var(--color-primary);
+    --button-primary-hover-color: #fff;
+    --button-primary-hover-border: 1px solid var(--color-primary-light);
+    --button-primary-hover-decoration: none;
+    --button-primary-hover-background: var(--color-primary-light);
+
+    --button-primary-outline-color: var(--color-primary);
+    --button-primary-outline-border: 1px solid var(--color-primary);
+    --button-primary-outline-decoration: none;
+    --button-primary-outline-background: transparent;
+    --button-primary-outline-hover-color: #fff;
+    --button-primary-outline-hover-border: 1px solid var(--color-primary);
+    --button-primary-outline-hover-decoration: none;
+    --button-primary-outline-hover-background: var(--color-primary);
+
+    --button-read_more-color: var(--button-primary-color);
+    --button-read_more-border: var(--button-primary-border);
+    --button-read_more-decoration: var(--button-primary-decoration);
+    --button-read_more-background: var(--button-primary-background);
+    --button-read_more-hover-color: var(--button-primary-hover-color);
+    --button-read_more-hover-border: var(--button-primary-hover-border);
+    --button-read_more-hover-decoration: var(--button-primary-hover-decoration);
+    --button-read_more-hover-background: var(--button-primary-hover-background);
+
+    // Sign up
+    --sign_up_accent_color: #282b39;
+    --sign_up_accent_color_light: #bdcbff;
+    --sign_up_link_color: #e60003;
+    --sign_up_step_btns_color: var(--tc);
+    --sign_up_digid_btn_bkg: #e1e7ff;
+    --sign_up_digid_btn_text: #4b71ff;
+    --sign_up_digid_btn_border: none;
+    --sign_up_digid_btn_border_radius: 5px;
+    --sign_up_loader_icon_color: #282b39;
 
     //- Showcase
+    --showcase-aside-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
+    --showcase-aside-padding: 20px;
+    --showcase-aside-background: #fff;
+    --showcase-aside-border: 1px solid #e5e5e5;
+    --showcase-aside-border-radius: var(--border-radius);
+
+    --showcase-item-shadow: var(--showcase-aside-shadow);
+    --showcase-item-background: var(--showcase-aside-background);
+    --showcase-item-border: var(--showcase-aside-border);
+    --showcase-item-border-radius: var(--showcase-aside-border-radius);
+    --showcase-item-hover-shadow: 2px 8px 14px 0px rgba(0, 0, 0, 0.1);
+
+    --showcase-aside-button-color: var(--color-primary);
+    --showcase-aside-button-border: 1px solid var(--color-primary);
+    --showcase-aside-button-background: transparent;
+    --showcase-aside-button-hover-color: #fff;
+    --showcase-aside-button-hover-border: 1px solid var(--color-primary);
+    --showcase-aside-button-hover-background: var(--color-primary);
+
     --showcase-fullscreen-bottom-offset: 160px;
 
-    // Login button
-    --login-button-background: #fff;
+    --showcase-title-font: 600 18px/30px var(--heading-font-family);
+    --showcase-title-color: var(--tc);
+    --showcase-title-count-color: #fff;
+    --showcase-title-count-background: var(--color-primary);
+    --showcase-title-count-border-radius: calc(var(--border-radius) / 2);
+
+    // Breadcrumbs
+    --breadcrumb-size: 16px;
+    --breadcrumb-color: var(--color-primary);
+    --breadcrumb-color-active: #353535;
+    --breadcrumb-padding: 20px;
+
+    // Loader
+    --loader-background: #f5f5f5;
+    --loader-color: var(--color-primary);
+
+    // Profile
+    --profile-menu-item-gap: 16px;
+    --profile-menu-item-color: var(--color-primary);
+    --profile-menu-item-color-icon: var(--profile-menu-item-color);
+    --profile-menu-item-shadow: var(--box-shadow);
+    --profile-menu-item-background: #ffffff;
+    --profile-menu-item-border-color: transparent;
+    --profile-menu-item-border-radius: var(--border-radius);
+    --profile-menu-item-hover-color: #fff;
+    --profile-menu-item-hover-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
+    --profile-menu-item-hover-background: var(--color-primary);
+    --profile-menu-item-hover-border-color: var(--color-primary);
+    --profile-menu-item-hover-border-radius: var(--border-radius);
+
+    // Vouchers
+    --vouchers-label-color: #646f79;
+    --vouchers-value-color: var(--tc);
+    --vouchers-organization-color: var(--tc);
+
+    // Voucher card
+    --voucher-card-action-color: var(--color-primary);
+    --voucher-card-action-background: transparent;
+    --voucher-card-action-border-color: var(--color-primary);
+    --voucher-card-action-border-radius: 0px;
+    --voucher-card-action-hover-color: #fff;
+    --voucher-card-action-hover-background: var(--color-primary);
+    --voucher-card-action-hover-border-color: var(--color-primary);
 
+    // Products
+    --products-title-color: var(--tc);
+    --products-title-hover-color: var(--tc);
+    --products-text-color: var(--tc);
+
+    // Product
+    --product-title-font: 700 22px/28px var(--heading-font-family);
+    --product-title-color: var(--tc);
+
+    // Faq
+    --faq-width: 820px;
+    --faq-align: center;
+    --faq-header-color: #00122a;
+    --faq-header-color-hover: var(--color-primary);
+
+    // Map
+    --map-title-color: #0B0E12;
+    --map-title-font: 700 40px var(--heading-font-family);
 
     // Sections
     --section-padding: 0 0 30px;
@@ -102,6 +356,8 @@ $primaryColorLight: #22398e;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 30px 0;
     --section-footer-background: #22398e;
+    --section-pre-check-padding: 0 0 30px;
+    --section-pre-check-background: var(--section-background);
     --section-profile-padding: var(--section-padding);
     --section-profile-background: var(--section-background);
     --section-products-padding: var(--section-padding);
@@ -110,4 +366,24 @@ $primaryColorLight: #22398e;
     --section-breadcrumbs-background: var(--section-background);
     --section-voucher-details-padding: var(--section-padding);
     --section-voucher-details-background: var(--section-background);
+
+    // Search bar
+    --search-result-sidebar-item-active-color: #a80a2d;
+    --search-result-sidebar-item-active-background: #fff;
+
+    // CMS funds
+    --cms-funds-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-title-color: var(--htc);
+    --cms-funds-label-font-size: 11px;
+    --cms-funds-label-background: var(--color-primary);
+
+    --cms-funds-compact-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-compact-title-color: var(--htc);
+
+    --cms-funds-link-color: var(--color-primary);
+    --cms-funds-link-font: 600 18px/20px var(--base-font);
+
+    // Section order
+    --order-page-voucher-map: 0;
+    --order-page-voucher-products: 0;
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-kerstpakket-vars.scss b/react/assets/forus-webshop/scss/style-webshop-kerstpakket-vars.scss
index 9c5c712d9..56844bbf7 100644
--- a/react/assets/forus-webshop/scss/style-webshop-kerstpakket-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-kerstpakket-vars.scss
@@ -6,18 +6,68 @@ $primaryColor: #90191a;
 $primaryColorLight: #9f3031;
 
 :root {
+    --zoom: 100%;
+    --zoom-mobile: 100%;
+
+    --border-color: #ebedf0;
+    --border-radius: 8px;
+    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+
+    --color-primary: #{$primaryColor};
+    --color-primary-light: #{$primaryColorLight};
+
+    --color-default: #90191a;
+    --color-default-light: #90191a;
+
+    --color-danger: #e63b3b;
+
     // navbar
+    --navbar-box-shadow: none;
+
+    --navbar-menu-gap: 22px;
+    --navbar-menu-order: 1;
     --navbar-menu-background: #f5f5f5;
+
+    --navbar-search-gap: 20px;
+    --navbar-search-order: 2;
+    --navbar-search-padding: 20px 0px;
+    --navbar-search-background: #ffffff;
+    --navbar-search-border-bottom: 1px solid var(--border-color);
+
+    --navbar-menu-item-font: 400 18px/21px var(--base-font);
     --navbar-menu-item-color: #282b39;
     --navbar-menu-item-color-hover: #90191a;
-    --navbar-search-padding: 20px 0px;
+    --navbar-menu-item-padding: 16px 0;
+    --navbar-menu-item-background: transparent;
+    --navbar-menu-item-background-hover: transparent;
+
+    --navbar-menu-separator-opacity: 0.25;
+    --navbar-menu-separator-background: var(--navbar-menu-item-color);
+
+    --navbar-auth-font: 600 16px/20px var(--base-font);
+
     --navbar-logo-height: 50px;
 
-    // navbar (auth)
+    // Nav item line position
+    --navbar-menu-item-line-position-top: 0;
+    --navbar-menu-item-line-position-bottom: auto;
+
+    // wrapper
+    --wrapper-width: calc(1280px + 50px);
+    --wrapper-padding: 20px;
+
+    // Outline
+    --focus-outline: 2px solid #315efd;
+    --focus-outline-offset: 2px;
+    --focus-box-shadow: 0 0 0 3px white;
+
+    // navbar (auth) (default button)
     --tc-auth-menu: #fff;
     --tc-auth-btn: #90191a;
     --btn-auth-bg: #fff;
     --btn-auth-border: #90191a;
+    --auth-avater-bg: #305dfb;
+    --auth-avater-svg: #fff;
 
     // navbar (start modal primary)
     --tc-start-btn: #fff;
@@ -28,13 +78,28 @@ $primaryColorLight: #9f3031;
     // header background
     --bg-values: url("../img/splash-top-b.png") no-repeat 100% 0;
 
+    // Header banner
+    --header-banner-pane-banner-padding: 50px 0;
+    --header-banner-pane-banner-max-width: 650px;
+    --header-banner-pane-banner-background: transparent;
+    --header-banner-pane-banner-border-color: initial;
+    --header-banner-pane-banner-border-radius: initial;
+
     // base font
     --base-font: "Montserrat", sans-serif;
 
     // text color
     --tc: #353535;
+    --htc: var(--tc);
     --tc-var: inherit;
     --tc-link: inherit;
+    --tc-muted: #595959;
+
+    // heading font
+    --heading-font-family: var(--base-font);
+    --heading-font: 700 40px/60px var(--heading-font-family);
+    --heading-color: var(--tc);
+    --heading-pane-font: 700 22px/30px var(--heading-font-family);
 
     // base color
     --bc: #d13b3b;
@@ -43,7 +108,21 @@ $primaryColorLight: #9f3031;
     --body-background: none;
 
     // footer color
+    --footer_padding: 0;
     --footer_background: transparent;
+    --footer_color: #353535;
+    --footer_color_link: #004d93;
+
+    --footer_social_color: var(--footer_color);
+    --footer_social_background: transparent;
+    --footer_social_border_color: var(--footer_color);
+    --footer_social_border_radius: var(--border-radius);
+
+    --footer-copyright-color: var(--footer_color_link);
+    --footer-copyright-font: 400 14px/30px var(--base-font);
+    --footer-copyright-background: transparent;
+    --footer-copyright-border-color: var(--border-color);
+    --footer-copyright-padding: 40px;
 
     // not displayed
     --footer_display: block;
@@ -51,27 +130,216 @@ $primaryColorLight: #9f3031;
     // product image
     --product-image-padding: 10px 0 0 10px;
 
-    // placeholder text color
+    // Markdown
+    --markdown-font: 400 16px/24px var(--base-font);
+
+    // Forms
+    --form-control-color: #222222;
+    --form-control-background: #ffffff;
+    --form-control-border-color: #646464;
+    --form-control-border-color-focus: #282b39;
+    --form-control-placeholder-font: 400 13px/20px var(--base-font);
     --form-control-placeholder-color: #515152;
+    --form-label-color: #595959;
+    --form-label-font: 700 11px/16px var(--base-font);
 
-    --border-color: #ebedf0;
+    // Search bar
+    --color-search-icon-medium: #{$primaryColor};
+    --color-search-icon-dark: #{darken($primaryColor, 10%)};
+    --color-search-icon-light: #{lighten($primaryColor, 25%)};
 
-    --border-radius: 8px;
-    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+    --search-bar-point-color: #ececec;
+    --search-bar-point-radius: 0px;
 
-    --color-primary: #{$primaryColor};
-    --color-primary-light: #{$primaryColorLight};
+    --search-bar-input-radius: var(--border-radius);
+    --search-bar-input-border: 1px solid var(--form-control-border-color);
+    --search-bar-input-background: #fff;
+    --search-bar-input-icon-color: #666666;
 
-    --color-default: #90191a;
-    --color-default-light: #90191a;
+    --search-bar-label-top: -7px;
+    --search-bar-label-left: 16px;
+    --search-bar-label-padding: 4px;
+    --search-bar-label-background: #ffffff;
 
-    --color-search-icon-medium: #{$primaryColor};
-    --color-search-icon-dark: #{darken($primaryColor, 10%)};
-    --color-search-icon-light: #{lighten($primaryColor, 25%)};
+    // Dropdowns
+    --dropdown-item-font: 500 13px/20px var(--base-font);
+    --dropdown-item-color: #282b39;
+    --dropdown-item-background: #ffffff;
+    --dropdown-item-hover-color: #000000;
+    --dropdown-item-hover-background: #e5e5e5;
+
+    // Paginator
+    --paginator-border-radius: var(--border-radius);
+    --paginator-button-color: #282b39;
+    --paginator-button-border: #9e9e9e;
+    --paginator-button-background: #fff;
+    --paginator-button-hover-color: #fff;
+    --paginator-button-hover-background: #535561;
+    --paginator-button-active-color: #fff;
+    --paginator-button-active-background: #292b39;
+    --paginator-button-disabled-color: #535561;
+    --paginator-button-disabled-border: #e5e5e5;
+    --paginator-button-disabled-background: #f5f5f5;
+
+    // Labels
+    --label-default-color: #fff;
+    --label-default-background: #595959;
+
+    --label-primary-color: #fff;
+    --label-primary-background: var(--color-primary);
+
+    --label-danger-color: #030304;
+    --label-danger-background: #d38c87;
+
+    --label-success-color: #030304;
+    --label-success-background: #9bbfa1;
 
     // Label sets
+    --label-set-border-radius: var(--border-radius);
+    --label-set-border-color: #9e9e9e;
+    --label-set-color: #272525;
+    --label-set-background: #ffffff;
+    --label-set-active-color: #ffffff;
+    --label-set-active-background: var(--color-primary);
+    --label-set-hover-color: #ffffff;
     --label-set-hover-background: #{rgba($primaryColor, .8)};
+    --label-set-focus-color: #272525;
+    --label-set-focus-background: #f4f5f7;
+    --label-set-focus-border-color: #9e9e9e;
+
+    // Buttons
+    --button-font: 700 16px/24px var(--base-font);
+    --button-color: #282b39;
+    --button-shadow: none;
+    --button-decoration: none;
+    --button-border-radius: calc(var(--border-radius) * 0.75);
+    --button-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+    --button-hover-decoration: none;
+    --button-disabled-color: #616161;
+    --button-disabled-background: #e5e5e5;
+
+    --button-primary-color: #fff;
+    --button-primary-border: 1px solid var(--color-primary);
+    --button-primary-decoration: none;
+    --button-primary-background: var(--color-primary);
+    --button-primary-hover-color: #fff;
+    --button-primary-hover-border: 1px solid var(--color-primary-light);
+    --button-primary-hover-decoration: none;
+    --button-primary-hover-background: var(--color-primary-light);
+
+    --button-primary-outline-color: var(--color-primary);
+    --button-primary-outline-border: 1px solid var(--color-primary);
+    --button-primary-outline-decoration: none;
+    --button-primary-outline-background: transparent;
+    --button-primary-outline-hover-color: #fff;
+    --button-primary-outline-hover-border: 1px solid var(--color-primary);
+    --button-primary-outline-hover-decoration: none;
+    --button-primary-outline-hover-background: var(--color-primary);
+
+    --button-read_more-color: var(--button-primary-color);
+    --button-read_more-border: var(--button-primary-border);
+    --button-read_more-decoration: var(--button-primary-decoration);
+    --button-read_more-background: var(--button-primary-background);
+    --button-read_more-hover-color: var(--button-primary-hover-color);
+    --button-read_more-hover-border: var(--button-primary-hover-border);
+    --button-read_more-hover-decoration: var(--button-primary-hover-decoration);
+    --button-read_more-hover-background: var(--button-primary-hover-background);
+
+    // Sign up
+    --sign_up_accent_color: #282b39;
+    --sign_up_accent_color_light: #bdcbff;
+    --sign_up_link_color: #e60003;
+    --sign_up_step_btns_color: var(--tc);
+    --sign_up_digid_btn_bkg: #e1e7ff;
+    --sign_up_digid_btn_text: #4b71ff;
+    --sign_up_digid_btn_border: none;
+    --sign_up_digid_btn_border_radius: 5px;
+    --sign_up_loader_icon_color: #282b39;
+
+    //- Showcase
+    --showcase-aside-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
+    --showcase-aside-padding: 20px;
+    --showcase-aside-background: #fff;
+    --showcase-aside-border: 1px solid #e5e5e5;
+    --showcase-aside-border-radius: var(--border-radius);
 
+    --showcase-item-shadow: var(--showcase-aside-shadow);
+    --showcase-item-background: var(--showcase-aside-background);
+    --showcase-item-border: var(--showcase-aside-border);
+    --showcase-item-border-radius: var(--showcase-aside-border-radius);
+    --showcase-item-hover-shadow: 2px 8px 14px 0px rgba(0, 0, 0, 0.1);
+
+    --showcase-aside-button-color: var(--color-primary);
+    --showcase-aside-button-border: 1px solid var(--color-primary);
+    --showcase-aside-button-background: transparent;
+    --showcase-aside-button-hover-color: #fff;
+    --showcase-aside-button-hover-border: 1px solid var(--color-primary);
+    --showcase-aside-button-hover-background: var(--color-primary);
+
+    --showcase-fullscreen-bottom-offset: 115px;
+
+    --showcase-title-font: 600 18px/30px var(--heading-font-family);
+    --showcase-title-color: var(--tc);
+    --showcase-title-count-color: #fff;
+    --showcase-title-count-background: var(--color-primary);
+    --showcase-title-count-border-radius: calc(var(--border-radius) / 2);
+
+    // Breadcrumbs
+    --breadcrumb-size: 16px;
+    --breadcrumb-color: var(--color-primary);
+    --breadcrumb-color-active: #353535;
+    --breadcrumb-padding: 20px;
+
+    // Loader
+    --loader-background: #f5f5f5;
+    --loader-color: var(--color-primary);
+
+    // Profile
+    --profile-menu-item-gap: 16px;
+    --profile-menu-item-color: var(--color-primary);
+    --profile-menu-item-color-icon: var(--profile-menu-item-color);
+    --profile-menu-item-shadow: var(--box-shadow);
+    --profile-menu-item-background: #ffffff;
+    --profile-menu-item-border-color: transparent;
+    --profile-menu-item-border-radius: var(--border-radius);
+    --profile-menu-item-hover-color: #fff;
+    --profile-menu-item-hover-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
+    --profile-menu-item-hover-background: var(--color-primary);
+    --profile-menu-item-hover-border-color: var(--color-primary);
+    --profile-menu-item-hover-border-radius: var(--border-radius);
+
+    // Vouchers
+    --vouchers-label-color: #646f79;
+    --vouchers-value-color: var(--tc);
+    --vouchers-organization-color: var(--tc);
+
+    // Voucher card
+    --voucher-card-action-color: var(--color-primary);
+    --voucher-card-action-background: transparent;
+    --voucher-card-action-border-color: var(--color-primary);
+    --voucher-card-action-border-radius: 0px;
+    --voucher-card-action-hover-color: #fff;
+    --voucher-card-action-hover-background: var(--color-primary);
+    --voucher-card-action-hover-border-color: var(--color-primary);
+
+    // Products
+    --products-title-color: var(--tc);
+    --products-title-hover-color: var(--tc);
+    --products-text-color: var(--tc);
+
+    // Product
+    --product-title-font: 700 22px/28px var(--heading-font-family);
+    --product-title-color: var(--tc);
+
+    // Faq
+    --faq-width: 820px;
+    --faq-align: center;
+    --faq-header-color: #00122a;
+    --faq-header-color-hover: var(--color-primary);
+
+    // Map
+    --map-title-color: #0B0E12;
+    --map-title-font: 700 40px var(--heading-font-family);
 
     // Sections
     --section-padding: 0 0 30px;
@@ -88,6 +356,8 @@ $primaryColorLight: #9f3031;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 30px 0;
     --section-footer-background: #fff;
+    --section-pre-check-padding: 0 0 30px;
+    --section-pre-check-background: var(--section-background);
     --section-profile-padding: var(--section-padding);
     --section-profile-background: var(--section-background);
     --section-products-padding: var(--section-padding);
@@ -96,4 +366,24 @@ $primaryColorLight: #9f3031;
     --section-breadcrumbs-background: var(--section-background);
     --section-voucher-details-padding: var(--section-padding);
     --section-voucher-details-background: var(--section-background);
+
+    // Search bar
+    --search-result-sidebar-item-active-color: #a80a2d;
+    --search-result-sidebar-item-active-background: #fff;
+
+    // CMS funds
+    --cms-funds-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-title-color: var(--htc);
+    --cms-funds-label-font-size: 11px;
+    --cms-funds-label-background: var(--color-primary);
+
+    --cms-funds-compact-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-compact-title-color: var(--htc);
+
+    --cms-funds-link-color: var(--color-primary);
+    --cms-funds-link-font: 600 18px/20px var(--base-font);
+
+    // Section order
+    --order-page-voucher-map: 0;
+    --order-page-voucher-products: 0;
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-midden_drenthe-vars.scss b/react/assets/forus-webshop/scss/style-webshop-midden_drenthe-vars.scss
index 3930d58c5..e0c568521 100644
--- a/react/assets/forus-webshop/scss/style-webshop-midden_drenthe-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-midden_drenthe-vars.scss
@@ -6,32 +6,112 @@ $primaryColor: #8f1354;
 $primaryColorLight: #b31869;
 
 :root {
+    --zoom: 100%;
+    --zoom-mobile: 100%;
+
+    --border-color: #dddddd;
+    --border-radius: 8px;
+    --box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);
+
+    --color-primary: #{$primaryColor};
+    --color-primary-light: #{$primaryColorLight};
+
+    --color-default: #305dfb;
+    --color-default-light: #4c74ff;
+
+    --color-danger: #e63b3b;
+
     // navbar
+    --navbar-box-shadow: none;
+
+    --navbar-menu-gap: 22px;
+    --navbar-menu-order: 1;
     --navbar-menu-background: #f7f8fa;
+
+    --navbar-search-gap: 20px;
+    --navbar-search-order: 2;
+    --navbar-search-padding: 20px 0px;
+    --navbar-search-background: #ffffff;
+    --navbar-search-border-bottom: 1px solid var(--border-color);
+
+    --navbar-menu-item-font: 400 18px/21px var(--base-font);
+    --navbar-menu-item-color: #282b39;
     --navbar-menu-item-color-hover: #{$primaryColor};
+    --navbar-menu-item-padding: 16px 0;
+    --navbar-menu-item-background: transparent;
+    --navbar-menu-item-background-hover: transparent;
+
+    --navbar-menu-separator-opacity: 0.25;
+    --navbar-menu-separator-background: var(--navbar-menu-item-color);
+
+    --navbar-auth-font: 600 16px/20px var(--base-font);
+
+    --navbar-logo-height: 50px;
+
+    // Nav item line position
+    --navbar-menu-item-line-position-top: 0;
+    --navbar-menu-item-line-position-bottom: auto;
+
+    // wrapper
+    --wrapper-width: calc(1280px + 50px);
+    --wrapper-padding: 20px;
+
+    // Outline
+    --focus-outline: 2px solid #315efd;
+    --focus-outline-offset: 2px;
+    --focus-box-shadow: 0 0 0 3px white;
 
     // navbar (auth) (default button)
+    --tc-auth-menu: #305dfb;
     --tc-auth-btn: #fff;
     --btn-auth-bg: #006767;
     --btn-auth-border: #006767;
+    --auth-avater-bg: #305dfb;
+    --auth-avater-svg: #fff;
 
     // navbar (start modal primary)
+    --tc-start-btn: #fff;
     --btn-start-bg: #{$primaryColor};
+    --btn-start-btn: #305dfb;
     --btn-start-border: #{$primaryColor};
 
+    // header background
+    --bg-values: url('../img/splash-top-b.png') no-repeat 100% 0;
+
     // Header banner
     --header-banner-pane-banner-padding: 40px 50px;
     --header-banner-pane-banner-max-width: 760px;
     --header-banner-pane-banner-background: #fff;
+    --header-banner-pane-banner-border-color: initial;
     --header-banner-pane-banner-border-radius: var(--border-radius);
 
+    // base font
+    --base-font: 'Open Sans', arial, sans-serif;
+
+    // text color
+    --tc: #282b39;
+    --htc: var(--tc);
+    --tc-var: inherit;
+    --tc-link: inherit;
+    --tc-muted: #595959;
+
+    // heading font
+    --heading-font-family: var(--base-font);
+    --heading-font: 700 40px/60px var(--heading-font-family);
+    --heading-color: var(--tc);
+    --heading-pane-font: 700 22px/30px var(--heading-font-family);
+
+    // base color
+    --bc: #d13b3b;
+
+    // background color
     --body-background: #fff;
 
     // footer color
+    --footer_padding: 0;
     --footer_background: transparent;
     --footer_color: var(--tc);
     --footer_color_link: var(--tc);
-    --footer_color_link_hover: var(--tc);
 
     --footer_social_color: var(--color-primary);
     --footer_social_background: transparent;
@@ -39,11 +119,29 @@ $primaryColorLight: #b31869;
     --footer_social_border_radius: 40px;
 
     --footer-copyright-color: #fff;
+    --footer-copyright-font: 400 14px/30px var(--base-font);
     --footer-copyright-background: #008486;
     --footer-copyright-border-color: #008486;
+    --footer-copyright-padding: 40px;
 
-    --color-primary: #{$primaryColor};
-    --color-primary-light: #{$primaryColorLight};
+    // not displayed
+    --footer_display: none;
+
+    // product image
+    --product-image-padding: 10px 0 0 10px;
+
+    // Markdown
+    --markdown-font: 400 16px/24px var(--base-font);
+
+    // Forms
+    --form-control-color: #222222;
+    --form-control-background: #ffffff;
+    --form-control-border-color: #646464;
+    --form-control-border-color-focus: #282b39;
+    --form-control-placeholder-font: 400 13px/20px var(--base-font);
+    --form-control-placeholder-color: #535561;
+    --form-label-color: #595959;
+    --form-label-font: 700 11px/16px var(--base-font);
 
     // Search bar
     --color-search-icon-medium: #b31869;
@@ -52,32 +150,197 @@ $primaryColorLight: #b31869;
 
     --search-bar-point-color: var(--color-primary);
     --search-bar-point-radius: 4px;
+
     --search-bar-input-radius: 25px;
+    --search-bar-input-border: 1px solid var(--form-control-border-color);
+    --search-bar-input-background: #fff;
+    --search-bar-input-icon-color: #666666;
 
-    // Buttons
-    --button-border-radius: 25px;
+    --search-bar-label-top: -7px;
+    --search-bar-label-left: 16px;
+    --search-bar-label-padding: 4px;
+    --search-bar-label-background: #ffffff;
+
+    // Dropdowns
+    --dropdown-item-font: 500 13px/20px var(--base-font);
+    --dropdown-item-color: #282b39;
+    --dropdown-item-background: #ffffff;
+    --dropdown-item-hover-color: #000000;
+    --dropdown-item-hover-background: #e5e5e5;
+
+    // Paginator
+    --paginator-border-radius: var(--border-radius);
+    --paginator-button-color: #282b39;
+    --paginator-button-border: #9e9e9e;
+    --paginator-button-background: #fff;
+    --paginator-button-hover-color: #fff;
+    --paginator-button-hover-background: #535561;
+    --paginator-button-active-color: #fff;
+    --paginator-button-active-background: #292b39;
+    --paginator-button-disabled-color: #535561;
+    --paginator-button-disabled-border: #e5e5e5;
+    --paginator-button-disabled-background: #f5f5f5;
+
+    // Labels
+    --label-default-color: #fff;
+    --label-default-background: #595959;
+
+    --label-primary-color: #fff;
+    --label-primary-background: var(--color-primary);
+
+    --label-danger-color: #030304;
+    --label-danger-background: #d38c87;
+
+    --label-success-color: #030304;
+    --label-success-background: #9bbfa1;
 
     // Label sets
+    --label-set-border-radius: var(--border-radius);
+    --label-set-border-color: #9e9e9e;
+    --label-set-color: #272525;
+    --label-set-background: #ffffff;
+    --label-set-active-color: #ffffff;
     --label-set-active-background: #006767;
+    --label-set-hover-color: #ffffff;
     --label-set-hover-background: #{rgba(#006767, 0.8)};
+    --label-set-focus-color: #272525;
+    --label-set-focus-background: #f4f5f7;
+    --label-set-focus-border-color: #9e9e9e;
+
+    // Buttons
+    --button-font: 700 16px/24px var(--base-font);
+    --button-color: #282b39;
+    --button-shadow: none;
+    --button-decoration: none;
+    --button-border-radius: 25px;
+    --button-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+    --button-hover-decoration: none;
+    --button-disabled-color: #616161;
+    --button-disabled-background: #e5e5e5;
+
+    --button-primary-color: #fff;
+    --button-primary-border: 1px solid var(--color-primary);
+    --button-primary-decoration: none;
+    --button-primary-background: var(--color-primary);
+    --button-primary-hover-color: #fff;
+    --button-primary-hover-border: 1px solid var(--color-primary-light);
+    --button-primary-hover-decoration: none;
+    --button-primary-hover-background: var(--color-primary-light);
+
+    --button-primary-outline-color: var(--color-primary);
+    --button-primary-outline-border: 1px solid var(--color-primary);
+    --button-primary-outline-decoration: none;
+    --button-primary-outline-background: transparent;
+    --button-primary-outline-hover-color: #fff;
+    --button-primary-outline-hover-border: 1px solid var(--color-primary);
+    --button-primary-outline-hover-decoration: none;
+    --button-primary-outline-hover-background: var(--color-primary);
+
+    --button-read_more-color: var(--button-primary-color);
+    --button-read_more-border: var(--button-primary-border);
+    --button-read_more-decoration: var(--button-primary-decoration);
+    --button-read_more-background: var(--button-primary-background);
+    --button-read_more-hover-color: var(--button-primary-hover-color);
+    --button-read_more-hover-border: var(--button-primary-hover-border);
+    --button-read_more-hover-decoration: var(--button-primary-hover-decoration);
+    --button-read_more-hover-background: var(--button-primary-hover-background);
 
     // Sign up
+    --sign_up_accent_color: #282b39;
+    --sign_up_accent_color_light: #bdcbff;
+    --sign_up_link_color: #e60003;
     --sign_up_step_btns_color: var(--color-primary);
+    --sign_up_digid_btn_bkg: #e1e7ff;
+    --sign_up_digid_btn_text: #4b71ff;
+    --sign_up_digid_btn_border: none;
+    --sign_up_digid_btn_border_radius: 5px;
+    --sign_up_loader_icon_color: #282b39;
 
     //- Showcase
+    --showcase-aside-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
+    --showcase-aside-padding: 20px;
+    --showcase-aside-background: #fff;
+    --showcase-aside-border: 1px solid #e5e5e5;
+    --showcase-aside-border-radius: var(--border-radius);
+
+    --showcase-item-shadow: var(--showcase-aside-shadow);
+    --showcase-item-background: var(--showcase-aside-background);
+    --showcase-item-border: var(--showcase-aside-border);
+    --showcase-item-border-radius: var(--showcase-aside-border-radius);
+    --showcase-item-hover-shadow: 2px 8px 14px 0px rgba(0, 0, 0, 0.1);
+
+    --showcase-aside-button-color: var(--color-primary);
+    --showcase-aside-button-border: 1px solid var(--color-primary);
+    --showcase-aside-button-background: transparent;
+    --showcase-aside-button-hover-color: #fff;
+    --showcase-aside-button-hover-border: 1px solid var(--color-primary);
+    --showcase-aside-button-hover-background: var(--color-primary);
+
+    --showcase-fullscreen-bottom-offset: 115px;
+
+    --showcase-title-font: 600 18px/30px var(--heading-font-family);
+    --showcase-title-color: var(--tc);
+    --showcase-title-count-color: #fff;
     --showcase-title-count-background: #006767;
+    --showcase-title-count-border-radius: calc(var(--border-radius) / 2);
+
+    // Breadcrumbs
+    --breadcrumb-size: 16px;
+    --breadcrumb-color: var(--color-primary);
+    --breadcrumb-color-active: #353535;
+    --breadcrumb-padding: 20px;
+
+    // Loader
+    --loader-background: #f5f5f5;
+    --loader-color: var(--color-primary);
 
     // Profile
+    --profile-menu-item-gap: 16px;
     --profile-menu-item-color: var(--tc);
+    --profile-menu-item-color-icon: var(--profile-menu-item-color);
+    --profile-menu-item-shadow: var(--box-shadow);
+    --profile-menu-item-background: #ffffff;
     --profile-menu-item-border-color: var(--border-color);
+    --profile-menu-item-border-radius: var(--border-radius);
+    --profile-menu-item-hover-color: #fff;
+    --profile-menu-item-hover-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
+    --profile-menu-item-hover-background: var(--color-primary);
+    --profile-menu-item-hover-border-color: var(--color-primary);
+    --profile-menu-item-hover-border-radius: var(--border-radius);
+
+    // Vouchers
+    --vouchers-label-color: #646f79;
+    --vouchers-value-color: var(--tc);
+    --vouchers-organization-color: var(--tc);
 
     // Voucher card
     --voucher-card-action-color: #006767;
+    --voucher-card-action-background: transparent;
     --voucher-card-action-border-color: #006767;
     --voucher-card-action-border-radius: 20px;
+    --voucher-card-action-hover-color: #fff;
     --voucher-card-action-hover-background: #008486;
     --voucher-card-action-hover-border-color: #008486;
 
+    // Products
+    --products-title-color: var(--tc);
+    --products-title-hover-color: var(--tc);
+    --products-text-color: var(--tc);
+
+    // Product
+    --product-title-font: 700 22px/28px var(--heading-font-family);
+    --product-title-color: var(--tc);
+
+    // Faq
+    --faq-width: 820px;
+    --faq-align: center;
+    --faq-header-color: #00122a;
+    --faq-header-color-hover: var(--color-primary);
+
+    // Map
+    --map-title-color: #0B0E12;
+    --map-title-font: 700 40px var(--heading-font-family);
+
     // Sections
     --section-padding: 0 0 30px;
     --section-background: transparent;
@@ -93,6 +356,8 @@ $primaryColorLight: #b31869;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 30px 0;
     --section-footer-background: #eff2f5;
+    --section-pre-check-padding: 0 0 30px;
+    --section-pre-check-background: var(--section-background);
     --section-profile-padding: var(--section-padding);
     --section-profile-background: var(--section-background);
     --section-products-padding: var(--section-padding);
@@ -101,4 +366,24 @@ $primaryColorLight: #b31869;
     --section-breadcrumbs-background: var(--section-background);
     --section-voucher-details-padding: var(--section-padding);
     --section-voucher-details-background: var(--section-background);
+
+    // Search bar
+    --search-result-sidebar-item-active-color: #a80a2d;
+    --search-result-sidebar-item-active-background: #fff;
+
+    // CMS funds
+    --cms-funds-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-title-color: var(--htc);
+    --cms-funds-label-font-size: 11px;
+    --cms-funds-label-background: var(--color-primary);
+
+    --cms-funds-compact-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-compact-title-color: var(--htc);
+
+    --cms-funds-link-color: var(--color-primary);
+    --cms-funds-link-font: 600 18px/20px var(--base-font);
+
+    // Section order
+    --order-page-voucher-map: 0;
+    --order-page-voucher-products: 0;
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-noordoostpolder-vars.scss b/react/assets/forus-webshop/scss/style-webshop-noordoostpolder-vars.scss
index b2e8bcd1f..d1e6f5968 100644
--- a/react/assets/forus-webshop/scss/style-webshop-noordoostpolder-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-noordoostpolder-vars.scss
@@ -5,22 +5,68 @@ $primaryColor: #de286b;
 $primaryColorLight: #fd5392;
 
 :root {
+    --zoom: 100%;
+    --zoom-mobile: 100%;
+
     --border-color: #ebedf0;
     --border-radius: 0px;
     --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
 
+    --color-primary: #{$primaryColor};
+    --color-primary-light: #{$primaryColorLight};
+
+    --color-default: #c1c71e;
+    --color-default-light: #eef525;
+
+    --color-danger: #e63b3b;
+
     // navbar
+    --navbar-box-shadow: none;
+
+    --navbar-menu-gap: 22px;
+    --navbar-menu-order: 1;
     --navbar-menu-background: #f5f5f5;
+
+    --navbar-search-gap: 20px;
+    --navbar-search-order: 2;
+    --navbar-search-padding: 0;
+    --navbar-search-background: #ffffff;
+    --navbar-search-border-bottom: 1px solid var(--border-color);
+
+    --navbar-menu-item-font: 400 18px/21px var(--base-font);
     --navbar-menu-item-color: #282b39;
     --navbar-menu-item-color-hover: #de286b;
-    --navbar-search-padding: 0;
+    --navbar-menu-item-padding: 16px 0;
+    --navbar-menu-item-background: transparent;
+    --navbar-menu-item-background-hover: transparent;
+
+    --navbar-menu-separator-opacity: 0.25;
+    --navbar-menu-separator-background: var(--navbar-menu-item-color);
+
+    --navbar-auth-font: 600 16px/20px var(--base-font);
+
     --navbar-logo-height: 105px;
 
-    // navbar (auth)
+    // Nav item line position
+    --navbar-menu-item-line-position-top: 0;
+    --navbar-menu-item-line-position-bottom: auto;
+
+    // wrapper
+    --wrapper-width: calc(1280px + 50px);
+    --wrapper-padding: 20px;
+
+    // Outline
+    --focus-outline: 2px solid #315efd;
+    --focus-outline-offset: 2px;
+    --focus-box-shadow: 0 0 0 3px white;
+
+    // navbar (auth) (default button)
     --tc-auth-menu: #fff;
     --tc-auth-btn: #fff;
     --btn-auth-bg: #6d5ea7;
     --btn-auth-border: #6d5ea7;
+    --auth-avater-bg: #305dfb;
+    --auth-avater-svg: #fff;
 
     // navbar (start modal primary)
     --tc-start-btn: #fff;
@@ -28,16 +74,31 @@ $primaryColorLight: #fd5392;
     --btn-start-btn: #de286b;
     --btn-start-border: transparent;
 
-    // header attributes
+    // header background
     --bg-values: url("../img/splash-top-b.png") no-repeat 100% 0;
 
+    // Header banner
+    --header-banner-pane-banner-padding: 50px 0;
+    --header-banner-pane-banner-max-width: 650px;
+    --header-banner-pane-banner-background: transparent;
+    --header-banner-pane-banner-border-color: initial;
+    --header-banner-pane-banner-border-radius: initial;
+
     // base font
     --base-font: Arial, Helvetica, sans-serif;
 
     // text color
     --tc: #595959;
+    --htc: var(--tc);
     --tc-var: #fff;
     --tc-link: inherit;
+    --tc-muted: #595959;
+
+    // heading font
+    --heading-font-family: var(--base-font);
+    --heading-font: 700 40px/60px var(--heading-font-family);
+    --heading-color: var(--tc);
+    --heading-pane-font: 700 22px/30px var(--heading-font-family);
 
     // base color
     --bc: #de286b;
@@ -46,35 +107,79 @@ $primaryColorLight: #fd5392;
     --body-background: none;
 
     // footer color
+    --footer_padding: 0;
     --footer_background: transparent;
     --footer_color: #282b39;
     --footer_color_link: #de286b;
-    --footer_color_link_hover: #fd5392;
 
-    // Displayed or not
-    --footer_display: block;
+    --footer_social_color: var(--footer_color);
+    --footer_social_background: transparent;
+    --footer_social_border_color: var(--footer_color);
+    --footer_social_border_radius: var(--border-radius);
 
-    // Vouchers
-    --vouchers-label-color: #4c91b3;
-    --vouchers-value-color: #91b845;
-    --vouchers-organization-color: #4c91b3;
+    --footer-copyright-color: var(--footer_color_link);
+    --footer-copyright-font: 400 14px/30px var(--base-font);
+    --footer-copyright-background: transparent;
+    --footer-copyright-border-color: var(--border-color);
+    --footer-copyright-padding: 40px;
+
+    // not displayed
+    --footer_display: block;
 
     // product image
     --product-image-padding: 10px 0 0 10px;
 
-    // placeholder text color
-    --form-control-placeholder-color: #515152;
-
-    --color-primary: #{$primaryColor};
-    --color-primary-light: #{$primaryColorLight};
+    // Markdown
+    --markdown-font: 400 16px/24px var(--base-font);
 
-    --color-default: #c1c71e;
-    --color-default-light: #eef525;
+    // Forms
+    --form-control-color: #222222;
+    --form-control-background: #ffffff;
+    --form-control-border-color: #646464;
+    --form-control-border-color-focus: #282b39;
+    --form-control-placeholder-font: 400 13px/20px var(--base-font);
+    --form-control-placeholder-color: #515152;
+    --form-label-color: #595959;
+    --form-label-font: 700 11px/16px var(--base-font);
 
+    // Search bar
     --color-search-icon-medium: #{$primaryColor};
     --color-search-icon-dark: #{darken($primaryColor, 10%)};
     --color-search-icon-light: #{lighten($primaryColor, 25%)};
 
+    --search-bar-point-color: #ececec;
+    --search-bar-point-radius: 0px;
+
+    --search-bar-input-radius: var(--border-radius);
+    --search-bar-input-border: 1px solid var(--form-control-border-color);
+    --search-bar-input-background: #fff;
+    --search-bar-input-icon-color: #666666;
+
+    --search-bar-label-top: -7px;
+    --search-bar-label-left: 16px;
+    --search-bar-label-padding: 4px;
+    --search-bar-label-background: #ffffff;
+
+    // Dropdowns
+    --dropdown-item-font: 500 13px/20px var(--base-font);
+    --dropdown-item-color: #282b39;
+    --dropdown-item-background: #ffffff;
+    --dropdown-item-hover-color: #000000;
+    --dropdown-item-hover-background: #e5e5e5;
+
+    // Paginator
+    --paginator-border-radius: var(--border-radius);
+    --paginator-button-color: #282b39;
+    --paginator-button-border: #9e9e9e;
+    --paginator-button-background: #fff;
+    --paginator-button-hover-color: #fff;
+    --paginator-button-hover-background: #535561;
+    --paginator-button-active-color: #fff;
+    --paginator-button-active-background: #292b39;
+    --paginator-button-disabled-color: #535561;
+    --paginator-button-disabled-border: #e5e5e5;
+    --paginator-button-disabled-background: #f5f5f5;
+
     // Labels
     --label-default-color: #fff;
     --label-default-background: #20b6ea;
@@ -87,27 +192,153 @@ $primaryColorLight: #fd5392;
 
     --label-success-color: #030304;
     --label-success-background: #9bbfa1;
-    
+
     // Label sets
+    --label-set-border-radius: var(--border-radius);
+    --label-set-border-color: #9e9e9e;
+    --label-set-color: #272525;
+    --label-set-background: #ffffff;
+    --label-set-active-color: #ffffff;
+    --label-set-active-background: var(--color-primary);
+    --label-set-hover-color: #ffffff;
     --label-set-hover-background: #{rgba($primaryColor, .8)};
+    --label-set-focus-color: #272525;
+    --label-set-focus-background: #f4f5f7;
+    --label-set-focus-border-color: #9e9e9e;
+
+    // Buttons
+    --button-font: 700 16px/24px var(--base-font);
+    --button-color: #282b39;
+    --button-shadow: none;
+    --button-decoration: none;
+    --button-border-radius: calc(var(--border-radius) * 0.75);
+    --button-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+    --button-hover-decoration: none;
+    --button-disabled-color: #616161;
+    --button-disabled-background: #e5e5e5;
+
+    --button-primary-color: #fff;
+    --button-primary-border: 1px solid var(--color-primary);
+    --button-primary-decoration: none;
+    --button-primary-background: var(--color-primary);
+    --button-primary-hover-color: #fff;
+    --button-primary-hover-border: 1px solid var(--color-primary-light);
+    --button-primary-hover-decoration: none;
+    --button-primary-hover-background: var(--color-primary-light);
+
+    --button-primary-outline-color: var(--color-primary);
+    --button-primary-outline-border: 1px solid var(--color-primary);
+    --button-primary-outline-decoration: none;
+    --button-primary-outline-background: transparent;
+    --button-primary-outline-hover-color: #fff;
+    --button-primary-outline-hover-border: 1px solid var(--color-primary);
+    --button-primary-outline-hover-decoration: none;
+    --button-primary-outline-hover-background: var(--color-primary);
+
+    --button-read_more-color: var(--button-primary-color);
+    --button-read_more-border: var(--button-primary-border);
+    --button-read_more-decoration: var(--button-primary-decoration);
+    --button-read_more-background: var(--button-primary-background);
+    --button-read_more-hover-color: var(--button-primary-hover-color);
+    --button-read_more-hover-border: var(--button-primary-hover-border);
+    --button-read_more-hover-decoration: var(--button-primary-hover-decoration);
+    --button-read_more-hover-background: var(--button-primary-hover-background);
+
+    // Sign up
+    --sign_up_accent_color: #282b39;
+    --sign_up_accent_color_light: #bdcbff;
+    --sign_up_link_color: #e60003;
+    --sign_up_step_btns_color: var(--tc);
+    --sign_up_digid_btn_bkg: #e1e7ff;
+    --sign_up_digid_btn_text: #4b71ff;
+    --sign_up_digid_btn_border: none;
+    --sign_up_digid_btn_border_radius: 5px;
+    --sign_up_loader_icon_color: #282b39;
 
     //- Showcase
+    --showcase-aside-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
+    --showcase-aside-padding: 20px;
+    --showcase-aside-background: #fff;
+    --showcase-aside-border: 1px solid #e5e5e5;
+    --showcase-aside-border-radius: var(--border-radius);
+
+    --showcase-item-shadow: var(--showcase-aside-shadow);
+    --showcase-item-background: var(--showcase-aside-background);
+    --showcase-item-border: var(--showcase-aside-border);
+    --showcase-item-border-radius: var(--showcase-aside-border-radius);
+    --showcase-item-hover-shadow: 2px 8px 14px 0px rgba(0, 0, 0, 0.1);
+
+    --showcase-aside-button-color: var(--color-primary);
+    --showcase-aside-button-border: 1px solid var(--color-primary);
+    --showcase-aside-button-background: transparent;
+    --showcase-aside-button-hover-color: #fff;
+    --showcase-aside-button-hover-border: 1px solid var(--color-primary);
+    --showcase-aside-button-hover-background: var(--color-primary);
+
     --showcase-fullscreen-bottom-offset: 130px;
 
-    // Login button
-    --login-button-background: #fff;
+    --showcase-title-font: 600 18px/30px var(--heading-font-family);
+    --showcase-title-color: var(--tc);
+    --showcase-title-count-color: #fff;
+    --showcase-title-count-background: var(--color-primary);
+    --showcase-title-count-border-radius: calc(var(--border-radius) / 2);
+
+    // Breadcrumbs
+    --breadcrumb-size: 16px;
+    --breadcrumb-color: var(--color-primary);
+    --breadcrumb-color-active: #353535;
+    --breadcrumb-padding: 20px;
+
+    // Loader
+    --loader-background: #f5f5f5;
+    --loader-color: var(--color-primary);
+
+    // Profile
+    --profile-menu-item-gap: 16px;
+    --profile-menu-item-color: var(--color-primary);
+    --profile-menu-item-color-icon: var(--profile-menu-item-color);
+    --profile-menu-item-shadow: var(--box-shadow);
+    --profile-menu-item-background: #ffffff;
+    --profile-menu-item-border-color: transparent;
+    --profile-menu-item-border-radius: var(--border-radius);
+    --profile-menu-item-hover-color: #fff;
+    --profile-menu-item-hover-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
+    --profile-menu-item-hover-background: var(--color-primary);
+    --profile-menu-item-hover-border-color: var(--color-primary);
+    --profile-menu-item-hover-border-radius: var(--border-radius);
+
+    // Vouchers
+    --vouchers-label-color: #4c91b3;
+    --vouchers-value-color: #91b845;
+    --vouchers-organization-color: #4c91b3;
+
+    // Voucher card
+    --voucher-card-action-color: var(--color-primary);
+    --voucher-card-action-background: transparent;
+    --voucher-card-action-border-color: var(--color-primary);
+    --voucher-card-action-border-radius: 0px;
+    --voucher-card-action-hover-color: #fff;
+    --voucher-card-action-hover-background: var(--color-primary);
+    --voucher-card-action-hover-border-color: var(--color-primary);
 
     // Products
     --products-title-color: var(--tc);
     --products-title-hover-color: var(--tc);
     --products-text-color: var(--tc);
 
+    // Product
+    --product-title-font: 700 22px/28px var(--heading-font-family);
+    --product-title-color: var(--tc);
+
     // Faq
     --faq-width: 820px;
     --faq-align: center;
     --faq-header-color: #00122a;
     --faq-header-color-hover: var(--color-primary);
 
+    // Map
+    --map-title-color: #0B0E12;
+    --map-title-font: 700 40px var(--heading-font-family);
 
     // Sections
     --section-padding: 0 0 30px;
@@ -124,6 +355,8 @@ $primaryColorLight: #fd5392;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 30px 0;
     --section-footer-background: #fff;
+    --section-pre-check-padding: 0 0 30px;
+    --section-pre-check-background: var(--section-background);
     --section-profile-padding: var(--section-padding);
     --section-profile-background: var(--section-background);
     --section-products-padding: var(--section-padding);
@@ -132,4 +365,24 @@ $primaryColorLight: #fd5392;
     --section-breadcrumbs-background: var(--section-background);
     --section-voucher-details-padding: var(--section-padding);
     --section-voucher-details-background: var(--section-background);
+
+    // Search bar
+    --search-result-sidebar-item-active-color: #a80a2d;
+    --search-result-sidebar-item-active-background: #fff;
+
+    // CMS funds
+    --cms-funds-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-title-color: var(--htc);
+    --cms-funds-label-font-size: 11px;
+    --cms-funds-label-background: var(--color-primary);
+
+    --cms-funds-compact-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-compact-title-color: var(--htc);
+
+    --cms-funds-link-color: var(--color-primary);
+    --cms-funds-link-font: 600 18px/20px var(--base-font);
+
+    // Section order
+    --order-page-voucher-map: 0;
+    --order-page-voucher-products: 0;
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-oostgelre-vars.scss b/react/assets/forus-webshop/scss/style-webshop-oostgelre-vars.scss
index 904bb98b4..9e5c59470 100644
--- a/react/assets/forus-webshop/scss/style-webshop-oostgelre-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-oostgelre-vars.scss
@@ -6,22 +6,68 @@ $primaryColor: #3d013d;
 $primaryColorLight: #660066;
 
 :root {
+    --zoom: 100%;
+    --zoom-mobile: 100%;
+
     --border-color: #dbdcdb;
     --border-radius: 0px;
     --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
 
+    --color-primary: #{$primaryColor};
+    --color-primary-light: #{$primaryColorLight};
+
+    --color-default: #660066;
+    --color-default-light: #3d013d;
+
+    --color-danger: #e63b3b;
+
     // navbar
+    --navbar-box-shadow: none;
+
+    --navbar-menu-gap: 22px;
+    --navbar-menu-order: 1;
     --navbar-menu-background: #f5f5f5;
+
+    --navbar-search-gap: 20px;
+    --navbar-search-order: 2;
+    --navbar-search-padding: 30px 0px;
+    --navbar-search-background: #ffffff;
+    --navbar-search-border-bottom: 1px solid var(--border-color);
+
+    --navbar-menu-item-font: 400 18px/21px var(--base-font);
     --navbar-menu-item-color: #282b39;
     --navbar-menu-item-color-hover: #661066;
-    --navbar-search-padding: 30px 0px;
+    --navbar-menu-item-padding: 16px 0;
+    --navbar-menu-item-background: transparent;
+    --navbar-menu-item-background-hover: transparent;
+
+    --navbar-menu-separator-opacity: 0.25;
+    --navbar-menu-separator-background: var(--navbar-menu-item-color);
+
+    --navbar-auth-font: 600 16px/20px var(--base-font);
+
     --navbar-logo-height: 50px;
 
-    // navbar (auth)
+    // Nav item line position
+    --navbar-menu-item-line-position-top: 0;
+    --navbar-menu-item-line-position-bottom: auto;
+
+    // wrapper
+    --wrapper-width: calc(1280px + 50px);
+    --wrapper-padding: 20px;
+
+    // Outline
+    --focus-outline: 2px solid #315efd;
+    --focus-outline-offset: 2px;
+    --focus-box-shadow: 0 0 0 3px white;
+
+    // navbar (auth) (default button)
     --tc-auth-menu: #661066;
     --tc-auth-btn: #661066;
     --btn-auth-bg: #fff;
     --btn-auth-border: #661066;
+    --auth-avater-bg: #305dfb;
+    --auth-avater-svg: #fff;
 
     // navbar (start modal primary)
     --tc-start-btn: #fff;
@@ -29,16 +75,31 @@ $primaryColorLight: #660066;
     --btn-start-btn: #661066;
     --btn-start-border: transparent;
 
-    // header attributes
+    // header background
     --bg-values: url("../img/splash-top-b.jpg") no-repeat 100% 0;
 
+    // Header banner
+    --header-banner-pane-banner-padding: 50px 0;
+    --header-banner-pane-banner-max-width: 650px;
+    --header-banner-pane-banner-background: transparent;
+    --header-banner-pane-banner-border-color: initial;
+    --header-banner-pane-banner-border-radius: initial;
+
     // base font
     --base-font: Arial, Verdana, "Sans Serif";
 
     // text color
     --tc: #595959;
+    --htc: var(--tc);
     --tc-var: #fff;
     --tc-link: inherit;
+    --tc-muted: #595959;
+
+    // heading font
+    --heading-font-family: var(--base-font);
+    --heading-font: 700 40px/60px var(--heading-font-family);
+    --heading-color: var(--tc);
+    --heading-pane-font: 700 22px/30px var(--heading-font-family);
 
     // base color
     --bc: #660066;
@@ -47,31 +108,104 @@ $primaryColorLight: #660066;
     --body-background: none;
 
     // footer color
+    --footer_padding: 0;
+    --footer_background: transparent;
     --footer_color: #4e4d40;
     --footer_color_link: #3d013d;
-    --footer_color_link_hover: #660066;
 
-    // Displayed or not
+    --footer_social_color: var(--footer_color);
+    --footer_social_background: transparent;
+    --footer_social_border_color: var(--footer_color);
+    --footer_social_border_radius: var(--border-radius);
+
+    --footer-copyright-color: var(--footer_color_link);
+    --footer-copyright-font: 400 14px/30px var(--base-font);
+    --footer-copyright-background: transparent;
+    --footer-copyright-border-color: var(--border-color);
+    --footer-copyright-padding: 40px;
+
+    // not displayed
     --footer_display: block;
 
     // product image
     --product-image-padding: 10px 0 0 10px;
 
-    // placeholder text color
-    --form-control-placeholder-color: #515152;
+    // Markdown
+    --markdown-font: 400 16px/24px var(--base-font);
 
-    --color-primary: #{$primaryColor};
-    --color-primary-light: #{$primaryColorLight};
-
-    --color-default: #660066;
-    --color-default-light: #3d013d;
+    // Forms
+    --form-control-color: #222222;
+    --form-control-background: #ffffff;
+    --form-control-border-color: #646464;
+    --form-control-border-color-focus: #282b39;
+    --form-control-placeholder-font: 400 13px/20px var(--base-font);
+    --form-control-placeholder-color: #515152;
+    --form-label-color: #595959;
+    --form-label-font: 700 11px/16px var(--base-font);
 
+    // Search bar
     --color-search-icon-medium: #{$primaryColor};
     --color-search-icon-dark: #{darken($primaryColor, 10%)};
     --color-search-icon-light: #{lighten($primaryColor, 25%)};
-    
+
+    --search-bar-point-color: #ececec;
+    --search-bar-point-radius: 0px;
+
+    --search-bar-input-radius: var(--border-radius);
+    --search-bar-input-border: 1px solid var(--form-control-border-color);
+    --search-bar-input-background: #fff;
+    --search-bar-input-icon-color: #666666;
+
+    --search-bar-label-top: -7px;
+    --search-bar-label-left: 16px;
+    --search-bar-label-padding: 4px;
+    --search-bar-label-background: #ffffff;
+
+    // Dropdowns
+    --dropdown-item-font: 500 13px/20px var(--base-font);
+    --dropdown-item-color: #282b39;
+    --dropdown-item-background: #ffffff;
+    --dropdown-item-hover-color: #000000;
+    --dropdown-item-hover-background: #e5e5e5;
+
+    // Paginator
+    --paginator-border-radius: var(--border-radius);
+    --paginator-button-color: #282b39;
+    --paginator-button-border: #9e9e9e;
+    --paginator-button-background: #fff;
+    --paginator-button-hover-color: #fff;
+    --paginator-button-hover-background: #535561;
+    --paginator-button-active-color: #fff;
+    --paginator-button-active-background: #292b39;
+    --paginator-button-disabled-color: #535561;
+    --paginator-button-disabled-border: #e5e5e5;
+    --paginator-button-disabled-background: #f5f5f5;
+
+    // Labels
+    --label-default-color: #fff;
+    --label-default-background: #595959;
+
+    --label-primary-color: #fff;
+    --label-primary-background: var(--color-primary);
+
+    --label-danger-color: #030304;
+    --label-danger-background: #d38c87;
+
+    --label-success-color: #030304;
+    --label-success-background: #9bbfa1;
+
     // Label sets
+    --label-set-border-radius: var(--border-radius);
+    --label-set-border-color: #9e9e9e;
+    --label-set-color: #272525;
+    --label-set-background: #ffffff;
+    --label-set-active-color: #ffffff;
+    --label-set-active-background: var(--color-primary);
+    --label-set-hover-color: #ffffff;
     --label-set-hover-background: #{rgba($primaryColor, .8)};
+    --label-set-focus-color: #272525;
+    --label-set-focus-background: #f4f5f7;
+    --label-set-focus-border-color: #9e9e9e;
 
     // Buttons
     --button-font: 700 16px/24px var(--base-font);
@@ -102,13 +236,66 @@ $primaryColorLight: #660066;
     --button-primary-outline-hover-decoration: none;
     --button-primary-outline-hover-background: var(--color-primary);
 
+    --button-read_more-color: var(--button-primary-color);
+    --button-read_more-border: var(--button-primary-border);
+    --button-read_more-decoration: var(--button-primary-decoration);
+    --button-read_more-background: var(--button-primary-background);
+    --button-read_more-hover-color: var(--button-primary-hover-color);
+    --button-read_more-hover-border: var(--button-primary-hover-border);
+    --button-read_more-hover-decoration: var(--button-primary-hover-decoration);
+    --button-read_more-hover-background: var(--button-primary-hover-background);
+
+    // Sign up
+    --sign_up_accent_color: #282b39;
+    --sign_up_accent_color_light: #bdcbff;
+    --sign_up_link_color: #e60003;
+    --sign_up_step_btns_color: var(--tc);
+    --sign_up_digid_btn_bkg: #e1e7ff;
+    --sign_up_digid_btn_text: #4b71ff;
+    --sign_up_digid_btn_border: none;
+    --sign_up_digid_btn_border_radius: 5px;
+    --sign_up_loader_icon_color: #282b39;
+
     //- Showcase
+    --showcase-aside-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
+    --showcase-aside-padding: 20px;
+    --showcase-aside-background: #fff;
+    --showcase-aside-border: 1px solid #e5e5e5;
+    --showcase-aside-border-radius: var(--border-radius);
+
+    --showcase-item-shadow: var(--showcase-aside-shadow);
+    --showcase-item-background: var(--showcase-aside-background);
+    --showcase-item-border: var(--showcase-aside-border);
+    --showcase-item-border-radius: var(--showcase-aside-border-radius);
+    --showcase-item-hover-shadow: 2px 8px 14px 0px rgba(0, 0, 0, 0.1);
+
+    --showcase-aside-button-color: var(--color-primary);
+    --showcase-aside-button-border: 1px solid var(--color-primary);
+    --showcase-aside-button-background: transparent;
+    --showcase-aside-button-hover-color: #fff;
+    --showcase-aside-button-hover-border: 1px solid var(--color-primary);
+    --showcase-aside-button-hover-background: var(--color-primary);
+
     --showcase-fullscreen-bottom-offset: 135px;
 
-    // Login button
-    --login-button-background: #fff;
+    --showcase-title-font: 600 18px/30px var(--heading-font-family);
+    --showcase-title-color: var(--tc);
+    --showcase-title-count-color: #fff;
+    --showcase-title-count-background: var(--color-primary);
+    --showcase-title-count-border-radius: calc(var(--border-radius) / 2);
+
+    // Breadcrumbs
+    --breadcrumb-size: 16px;
+    --breadcrumb-color: var(--color-primary);
+    --breadcrumb-color-active: #353535;
+    --breadcrumb-padding: 20px;
+
+    // Loader
+    --loader-background: #f5f5f5;
+    --loader-color: var(--color-primary);
 
     // Profile
+    --profile-menu-item-gap: 16px;
     --profile-menu-item-color: #fff;
     --profile-menu-item-color-icon: #fff;
     --profile-menu-item-shadow: none;
@@ -126,18 +313,77 @@ $primaryColorLight: #660066;
     --vouchers-value-color: var(--tc);
     --vouchers-organization-color: #4c91b3;
 
+    // Voucher card
+    --voucher-card-action-color: var(--color-primary);
+    --voucher-card-action-background: transparent;
+    --voucher-card-action-border-color: var(--color-primary);
+    --voucher-card-action-border-radius: 0px;
+    --voucher-card-action-hover-color: #fff;
+    --voucher-card-action-hover-background: var(--color-primary);
+    --voucher-card-action-hover-border-color: var(--color-primary);
+
     // Products
     --products-title-color: #660066;
     --products-title-hover-color: var(--tc);
     --products-text-color: var(--tc);
 
+    // Product
+    --product-title-font: 700 22px/28px var(--heading-font-family);
+    --product-title-color: var(--tc);
+
     // Faq
     --faq-width: 820px;
     --faq-align: center;
     --faq-header-color: #00122a;
     --faq-header-color-hover: #660066;
 
+    // Map
+    --map-title-color: #0B0E12;
+    --map-title-font: 700 40px var(--heading-font-family);
+
+    // Sections
+    --section-padding: 0 0 30px;
+    --section-background: transparent;
+
+    --section-title-font: 700 40px/60px var(--heading-font-family);
+    --section-title-align: center;
+
+    --section-cms-padding: var(--section-padding);
+    --section-cms-background: var(--section-background);
+    --section-map-padding: var(--section-padding);
+    --section-map-background: var(--section-background);
+    --section-faq-padding: var(--section-padding);
+    --section-faq-background: var(--section-background);
+    --section-footer-padding: 30px 0;
+    --section-footer-background: #fff;
+    --section-pre-check-padding: 0 0 30px;
+    --section-pre-check-background: var(--section-background);
+    --section-profile-padding: var(--section-padding);
+    --section-profile-background: var(--section-background);
+    --section-products-padding: var(--section-padding);
+    --section-products-background: var(--section-background);
+    --section-breadcrumbs-padding: 0;
+    --section-breadcrumbs-background: var(--section-background);
+    --section-voucher-details-padding: var(--section-padding);
+    --section-voucher-details-background: var(--section-background);
+
+    // Search bar
+    --search-result-sidebar-item-active-color: #a80a2d;
+    --search-result-sidebar-item-active-background: #fff;
+
+    // CMS funds
+    --cms-funds-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-title-color: var(--htc);
+    --cms-funds-label-font-size: 11px;
+    --cms-funds-label-background: var(--color-primary);
+
+    --cms-funds-compact-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-compact-title-color: var(--htc);
+
+    --cms-funds-link-color: var(--color-primary);
+    --cms-funds-link-font: 600 18px/20px var(--base-font);
+
     // Section order
     --order-page-voucher-map: 1;
     --order-page-voucher-products: 2;
-}
\ No newline at end of file
+}
diff --git a/react/assets/forus-webshop/scss/style-webshop-potjeswijzer-vars.scss b/react/assets/forus-webshop/scss/style-webshop-potjeswijzer-vars.scss
index 469e2bac5..98dcc484a 100644
--- a/react/assets/forus-webshop/scss/style-webshop-potjeswijzer-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-potjeswijzer-vars.scss
@@ -5,18 +5,68 @@ $primaryColor: #b9cb18;
 $primaryColorLight: #b9cb18;
 
 :root {
+    --zoom: 100%;
+    --zoom-mobile: 100%;
+
+    --border-color: #e5e5e5;
+    --border-radius: 8px;
+    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+
+    --color-primary: #{$primaryColor};
+    --color-primary-light: #{$primaryColorLight};
+
+    --color-default: #56b4e9;
+    --color-default-light: #b9cb18;
+
+    --color-danger: #e63b3b;
+
     // navbar
+    --navbar-box-shadow: none;
+
+    --navbar-menu-gap: 22px;
+    --navbar-menu-order: 1;
     --navbar-menu-background: #4e4d40;
+
+    --navbar-search-gap: 20px;
+    --navbar-search-order: 2;
+    --navbar-search-padding: 20px 0px;
+    --navbar-search-background: #ffffff;
+    --navbar-search-border-bottom: 1px solid var(--border-color);
+
+    --navbar-menu-item-font: 400 18px/21px var(--base-font);
     --navbar-menu-item-color: #fff;
     --navbar-menu-item-color-hover: #fff;
-    --navbar-search-padding: 20px 0px;
+    --navbar-menu-item-padding: 16px 0;
+    --navbar-menu-item-background: transparent;
+    --navbar-menu-item-background-hover: transparent;
+
+    --navbar-menu-separator-opacity: 0.25;
+    --navbar-menu-separator-background: var(--navbar-menu-item-color);
+
+    --navbar-auth-font: 600 16px/20px var(--base-font);
+
     --navbar-logo-height: 60px;
 
-    // navbar (auth)
+    // Nav item line position
+    --navbar-menu-item-line-position-top: 0;
+    --navbar-menu-item-line-position-bottom: auto;
+
+    // wrapper
+    --wrapper-width: calc(1280px + 50px);
+    --wrapper-padding: 20px;
+
+    // Outline
+    --focus-outline: 2px solid #315efd;
+    --focus-outline-offset: 2px;
+    --focus-box-shadow: 0 0 0 3px white;
+
+    // navbar (auth) (default button)
     --tc-auth-menu: #fff;
     --tc-auth-btn: #666666;
     --btn-auth-bg: #ebedf0;
     --btn-auth-border: transparent;
+    --auth-avater-bg: #305dfb;
+    --auth-avater-svg: #fff;
 
     // navbar (start modal primary)
     --tc-start-btn: #fff;
@@ -24,16 +74,31 @@ $primaryColorLight: #b9cb18;
     --btn-start-btn: #305dfb;
     --btn-start-border: transparent;
 
-    // header attributes
+    // header background
     --bg-values: url("../img/splash-top-b.jpg") no-repeat 100% 0;
 
+    // Header banner
+    --header-banner-pane-banner-padding: 50px 0;
+    --header-banner-pane-banner-max-width: 650px;
+    --header-banner-pane-banner-background: transparent;
+    --header-banner-pane-banner-border-color: initial;
+    --header-banner-pane-banner-border-radius: initial;
+
     // base font
     --base-font: "Helvetica", "Open Sans", "Arial", sans-serif;
 
     // text color
     --tc: #4e4d40;
+    --htc: var(--tc);
     --tc-var: #fff;
     --tc-link: inherit;
+    --tc-muted: #595959;
+
+    // heading font
+    --heading-font-family: var(--base-font);
+    --heading-font: 700 40px/60px var(--heading-font-family);
+    --heading-color: var(--tc);
+    --heading-pane-font: 700 22px/30px var(--heading-font-family);
 
     // base color
     --bc: #000;
@@ -42,10 +107,15 @@ $primaryColorLight: #b9cb18;
     --body-background: #fff;
 
     // footer color
+    --footer_padding: 0;
     --footer_background: transparent;
     --footer_color: #ffffff;
     --footer_color_link: var(--footer_color);
-    --footer_color_link_hover: var(--footer_color);
+
+    --footer_social_color: var(--footer_color);
+    --footer_social_background: transparent;
+    --footer_social_border_color: var(--footer_color);
+    --footer_social_border_radius: var(--border-radius);
 
     --footer-copyright-color: #004d93;
     --footer-copyright-font: 400 14px/30px var(--base-font);
@@ -53,30 +123,63 @@ $primaryColorLight: #b9cb18;
     --footer-copyright-border-color: var(--border-color);
     --footer-copyright-padding: 40px;
 
-    // Displayed or not
+    // not displayed
     --footer_display: block;
 
     // product image
     --product-image-padding: 10px 0 0 10px;
 
-    // placeholder text color
-    --form-control-placeholder-color: #515152;
-
-    --border-color: #e5e5e5;
-
-    --border-radius: 8px;
-    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-
-    --color-primary: #{$primaryColor};
-    --color-primary-light: #{$primaryColorLight};
+    // Markdown
+    --markdown-font: 400 16px/24px var(--base-font);
 
-    --color-default: #56b4e9;
-    --color-default-light: #b9cb18;
+    // Forms
+    --form-control-color: #222222;
+    --form-control-background: #ffffff;
+    --form-control-border-color: #646464;
+    --form-control-border-color-focus: #282b39;
+    --form-control-placeholder-font: 400 13px/20px var(--base-font);
+    --form-control-placeholder-color: #515152;
+    --form-label-color: #595959;
+    --form-label-font: 700 11px/16px var(--base-font);
 
+    // Search bar
     --color-search-icon-medium: #{$primaryColor};
     --color-search-icon-dark: #{darken($primaryColor, 10%)};
     --color-search-icon-light: #{lighten($primaryColor, 25%)};
 
+    --search-bar-point-color: #ececec;
+    --search-bar-point-radius: 0px;
+
+    --search-bar-input-radius: var(--border-radius);
+    --search-bar-input-border: 1px solid var(--form-control-border-color);
+    --search-bar-input-background: #fff;
+    --search-bar-input-icon-color: #666666;
+
+    --search-bar-label-top: -7px;
+    --search-bar-label-left: 16px;
+    --search-bar-label-padding: 4px;
+    --search-bar-label-background: #ffffff;
+
+    // Dropdowns
+    --dropdown-item-font: 500 13px/20px var(--base-font);
+    --dropdown-item-color: #282b39;
+    --dropdown-item-background: #ffffff;
+    --dropdown-item-hover-color: #000000;
+    --dropdown-item-hover-background: #e5e5e5;
+
+    // Paginator
+    --paginator-border-radius: var(--border-radius);
+    --paginator-button-color: #282b39;
+    --paginator-button-border: #9e9e9e;
+    --paginator-button-background: #fff;
+    --paginator-button-hover-color: #fff;
+    --paginator-button-hover-background: #535561;
+    --paginator-button-active-color: #fff;
+    --paginator-button-active-background: #292b39;
+    --paginator-button-disabled-color: #535561;
+    --paginator-button-disabled-border: #e5e5e5;
+    --paginator-button-disabled-background: #f5f5f5;
+
     // Labels
     --label-default-color: #fff;
     --label-default-background: #595959;
@@ -89,10 +192,19 @@ $primaryColorLight: #b9cb18;
 
     --label-success-color: #fff;
     --label-success-background: var(--color-primary);
-    
+
     // Label sets
+    --label-set-border-radius: var(--border-radius);
+    --label-set-border-color: #9e9e9e;
+    --label-set-color: #272525;
+    --label-set-background: #ffffff;
+    --label-set-active-color: #ffffff;
     --label-set-active-background: #4e4d40;
+    --label-set-hover-color: #ffffff;
     --label-set-hover-background: #{rgba(#4e4d40, .8)};
+    --label-set-focus-color: #272525;
+    --label-set-focus-background: #f4f5f7;
+    --label-set-focus-border-color: #9e9e9e;
 
     // Buttons
     --button-font: 700 16px/24px var(--base-font);
@@ -123,9 +235,38 @@ $primaryColorLight: #b9cb18;
     --button-primary-outline-hover-decoration: none;
     --button-primary-outline-hover-background: transparent;
 
+    --button-read_more-color: var(--button-primary-color);
+    --button-read_more-border: var(--button-primary-border);
+    --button-read_more-decoration: var(--button-primary-decoration);
+    --button-read_more-background: var(--button-primary-background);
+    --button-read_more-hover-color: var(--button-primary-hover-color);
+    --button-read_more-hover-border: var(--button-primary-hover-border);
+    --button-read_more-hover-decoration: var(--button-primary-hover-decoration);
+    --button-read_more-hover-background: var(--button-primary-hover-background);
+
+    // Sign up
+    --sign_up_accent_color: #282b39;
+    --sign_up_accent_color_light: #bdcbff;
+    --sign_up_link_color: #e60003;
+    --sign_up_step_btns_color: var(--tc);
+    --sign_up_digid_btn_bkg: #e1e7ff;
+    --sign_up_digid_btn_text: #4b71ff;
+    --sign_up_digid_btn_border: none;
+    --sign_up_digid_btn_border_radius: 5px;
+    --sign_up_loader_icon_color: #282b39;
+
     //- Showcase
-    --showcase-fullscreen-bottom-offset: 140px;
-    --showcase-title-count-color: #666;
+    --showcase-aside-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
+    --showcase-aside-padding: 20px;
+    --showcase-aside-background: #fff;
+    --showcase-aside-border: 1px solid #e5e5e5;
+    --showcase-aside-border-radius: var(--border-radius);
+
+    --showcase-item-shadow: var(--showcase-aside-shadow);
+    --showcase-item-background: var(--showcase-aside-background);
+    --showcase-item-border: var(--showcase-aside-border);
+    --showcase-item-border-radius: var(--showcase-aside-border-radius);
+    --showcase-item-hover-shadow: 2px 8px 14px 0px rgba(0, 0, 0, 0.1);
 
     --showcase-aside-button-color: #fff;
     --showcase-aside-button-border: 1px solid #498fb4;
@@ -134,11 +275,60 @@ $primaryColorLight: #b9cb18;
     --showcase-aside-button-hover-border: 1px solid #498fb4;
     --showcase-aside-button-hover-background: transparent;
 
-    // Login button
-    --login-button-background: #fff;
+    --showcase-fullscreen-bottom-offset: 140px;
+
+    --showcase-title-font: 600 18px/30px var(--heading-font-family);
+    --showcase-title-color: var(--tc);
+    --showcase-title-count-color: #666;
+    --showcase-title-count-background: var(--color-primary);
+    --showcase-title-count-border-radius: calc(var(--border-radius) / 2);
 
     // Breadcrumbs
+    --breadcrumb-size: 16px;
     --breadcrumb-color: #4f4f4f;
+    --breadcrumb-color-active: #353535;
+    --breadcrumb-padding: 20px;
+
+    // Loader
+    --loader-background: #f5f5f5;
+    --loader-color: var(--color-primary);
+
+    // Profile
+    --profile-menu-item-gap: 16px;
+    --profile-menu-item-color: var(--color-primary);
+    --profile-menu-item-color-icon: var(--profile-menu-item-color);
+    --profile-menu-item-shadow: var(--box-shadow);
+    --profile-menu-item-background: #ffffff;
+    --profile-menu-item-border-color: transparent;
+    --profile-menu-item-border-radius: var(--border-radius);
+    --profile-menu-item-hover-color: #fff;
+    --profile-menu-item-hover-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
+    --profile-menu-item-hover-background: var(--color-primary);
+    --profile-menu-item-hover-border-color: var(--color-primary);
+    --profile-menu-item-hover-border-radius: var(--border-radius);
+
+    // Vouchers
+    --vouchers-label-color: #646f79;
+    --vouchers-value-color: var(--tc);
+    --vouchers-organization-color: var(--tc);
+
+    // Voucher card
+    --voucher-card-action-color: var(--color-primary);
+    --voucher-card-action-background: transparent;
+    --voucher-card-action-border-color: var(--color-primary);
+    --voucher-card-action-border-radius: 0px;
+    --voucher-card-action-hover-color: #fff;
+    --voucher-card-action-hover-background: var(--color-primary);
+    --voucher-card-action-hover-border-color: var(--color-primary);
+
+    // Products
+    --products-title-color: var(--tc);
+    --products-title-hover-color: var(--tc);
+    --products-text-color: var(--tc);
+
+    // Product
+    --product-title-font: 700 22px/28px var(--heading-font-family);
+    --product-title-color: var(--tc);
 
     // Faq
     --faq-width: 820px;
@@ -146,12 +336,9 @@ $primaryColorLight: #b9cb18;
     --faq-header-color: #4990b5;
     --faq-header-color-hover: #4990b5;
 
-    // CMS funds
-    --cms-funds-title-font: 400 24px/36px var(--base-font);
-    --cms-funds-title-color: var(--htc);
-    --cms-funds-label-font-size: 12px;
-    --cms-funds-label-background: #1C8271;
-
+    // Map
+    --map-title-color: #0B0E12;
+    --map-title-font: 700 40px var(--heading-font-family);
 
     // Sections
     --section-padding: 0 0 30px;
@@ -168,6 +355,8 @@ $primaryColorLight: #b9cb18;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 30px 0;
     --section-footer-background: #4990b5;
+    --section-pre-check-padding: 0 0 30px;
+    --section-pre-check-background: var(--section-background);
     --section-profile-padding: var(--section-padding);
     --section-profile-background: var(--section-background);
     --section-products-padding: var(--section-padding);
@@ -176,4 +365,24 @@ $primaryColorLight: #b9cb18;
     --section-breadcrumbs-background: var(--section-background);
     --section-voucher-details-padding: var(--section-padding);
     --section-voucher-details-background: var(--section-background);
+
+    // Search bar
+    --search-result-sidebar-item-active-color: #a80a2d;
+    --search-result-sidebar-item-active-background: #fff;
+
+    // CMS funds
+    --cms-funds-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-title-color: var(--htc);
+    --cms-funds-label-font-size: 12px;
+    --cms-funds-label-background: #1C8271;
+
+    --cms-funds-compact-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-compact-title-color: var(--htc);
+
+    --cms-funds-link-color: var(--color-primary);
+    --cms-funds-link-font: 600 18px/20px var(--base-font);
+
+    // Section order
+    --order-page-voucher-map: 0;
+    --order-page-voucher-products: 0;
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-schagen-vars.scss b/react/assets/forus-webshop/scss/style-webshop-schagen-vars.scss
index c334968a2..9cbd277e7 100644
--- a/react/assets/forus-webshop/scss/style-webshop-schagen-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-schagen-vars.scss
@@ -10,40 +10,100 @@ $primaryColorLight: #1c8fd7;
 }
 
 :root {
+    --zoom: 100%;
+    --zoom-mobile: 100%;
+
+    --border-color: #e4e4e4;
+    --border-radius: 5px;
+    --box-shadow: none;
+
+    --color-primary: #{$primaryColor};
+    --color-primary-light: #{$primaryColorLight};
+
+    --color-default: #{$primaryColor};
+    --color-default-light: #{$primaryColorLight};
+
+    --color-danger: #e63b3b;
+
     // navbar
+    --navbar-box-shadow: none;
+
+    --navbar-menu-gap: 22px;
     --navbar-menu-order: 2;
     --navbar-menu-background: #0072b8;
+
+    --navbar-search-gap: 20px;
     --navbar-search-order: 1;
+    --navbar-search-padding: 20px 0px;
+    --navbar-search-background: #ffffff;
+    --navbar-search-border-bottom: 1px solid var(--border-color);
 
+    --navbar-menu-item-font: 400 18px/21px var(--base-font);
     --navbar-menu-item-color: #ffffff;
     --navbar-menu-item-color-hover: #ffffff;
-    --navbar-search-padding: 20px 0px;
+    --navbar-menu-item-padding: 16px 0;
+    --navbar-menu-item-background: transparent;
+    --navbar-menu-item-background-hover: transparent;
+
+    --navbar-menu-separator-opacity: 0.25;
+    --navbar-menu-separator-background: var(--navbar-menu-item-color);
+
+    --navbar-auth-font: 600 16px/20px var(--base-font);
+
     --navbar-logo-height: 75px;
 
-    // navbar (auth)
+    // Nav item line position
+    --navbar-menu-item-line-position-top: auto;
+    --navbar-menu-item-line-position-bottom: 0;
+
+    // wrapper
+    --wrapper-width: calc(1280px + 50px);
+    --wrapper-padding: 20px;
+
+    // Outline
+    --focus-outline: 2px solid #315efd;
+    --focus-outline-offset: 2px;
+    --focus-box-shadow: 0 0 0 3px white;
+
+    // navbar (auth) (default button)
     --tc-auth-menu: #ffffff;
     --tc-auth-btn: #ffffff;
     --btn-auth-bg: #306fb3;
     --btn-auth-border: #0000;
+    --auth-avater-bg: #305dfb;
+    --auth-avater-svg: #fff;
 
     // navbar (start modal primary)
     --tc-start-btn: #fff;
     --btn-start-bg: #d13e41;
+    --btn-start-btn: #305dfb;
     --btn-start-border: transparent;
 
-    // header attributes
+    // header background
     --bg-values: url("../img/splash-top-b.jpg") no-repeat 100% 0;
 
+    // Header banner
+    --header-banner-pane-banner-padding: 50px 0;
+    --header-banner-pane-banner-max-width: 650px;
+    --header-banner-pane-banner-background: transparent;
+    --header-banner-pane-banner-border-color: initial;
+    --header-banner-pane-banner-border-radius: initial;
+
     // base font
     --base-font: "Century Gothic", "Helvetica", "Open Sans", "Arial", sans-serif;
 
-    // heading font
-    --heading-font-family: var(--base-font);
-
     // text color
     --tc: #4e4d40;
+    --htc: var(--tc);
     --tc-var: #fff;
     --tc-link: #0071B8;
+    --tc-muted: #595959;
+
+    // heading font
+    --heading-font-family: var(--base-font);
+    --heading-font: 700 40px/60px var(--heading-font-family);
+    --heading-color: var(--tc);
+    --heading-pane-font: 700 22px/30px var(--heading-font-family);
 
     // base color
     --bc: #000;
@@ -52,56 +112,166 @@ $primaryColorLight: #1c8fd7;
     --body-background: #fff;
 
     // footer color
+    --footer_padding: 0;
     --footer_background: transparent;
     --footer_color: #fff;
-
     --footer_color_link: #fff;
 
+    --footer_social_color: var(--footer_color);
+    --footer_social_background: transparent;
+    --footer_social_border_color: var(--footer_color);
+    --footer_social_border_radius: var(--border-radius);
+
     --footer-copyright-color: var(--footer_color_link);
     --footer-copyright-font: 400 16px/30px var(--base-font);
     --footer-copyright-background: #306fb3;
     --footer-copyright-border-color: transparent;
     --footer-copyright-padding: 25px;
 
-    // Displayed or not
+    // not displayed
     --footer_display: block;
 
     // product image
     --product-image-padding: 10px 0 0 10px;
 
-    // placeholder text color
-    --form-control-placeholder-color: #515152;
+    // Markdown
+    --markdown-font: 400 16px/24px var(--base-font);
 
-    --border-color: #e4e4e4;
-
-    --border-radius: 5px;
-    //--box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-    --box-shadow: none;
-
-    --color-primary: #{$primaryColor};
-    --color-primary-light: #{$primaryColorLight};
-
-    --color-default: #{$primaryColor};
-    --color-default-light: #{$primaryColorLight};
+    // Forms
+    --form-control-color: #222222;
+    --form-control-background: #ffffff;
+    --form-control-border-color: #646464;
+    --form-control-border-color-focus: #282b39;
+    --form-control-placeholder-font: 400 13px/20px var(--base-font);
+    --form-control-placeholder-color: #515152;
+    --form-label-color: #595959;
+    --form-label-font: 700 11px/16px var(--base-font);
 
     // Search bar
     --color-search-icon-medium: #{$primaryColor};
     --color-search-icon-dark: #{darken($primaryColor, 10%)};
     --color-search-icon-light: #{lighten($primaryColor, 25%)};
 
+    --search-bar-point-color: #ececec;
+    --search-bar-point-radius: 0px;
+
     --search-bar-input-radius: 10px;
-    
+    --search-bar-input-border: 1px solid var(--form-control-border-color);
+    --search-bar-input-background: #fff;
+    --search-bar-input-icon-color: #666666;
+
+    --search-bar-label-top: -7px;
+    --search-bar-label-left: 16px;
+    --search-bar-label-padding: 4px;
+    --search-bar-label-background: #ffffff;
+
+    // Dropdowns
+    --dropdown-item-font: 500 13px/20px var(--base-font);
+    --dropdown-item-color: #282b39;
+    --dropdown-item-background: #ffffff;
+    --dropdown-item-hover-color: #000000;
+    --dropdown-item-hover-background: #e5e5e5;
+
+    // Paginator
+    --paginator-border-radius: var(--border-radius);
+    --paginator-button-color: #282b39;
+    --paginator-button-border: #9e9e9e;
+    --paginator-button-background: #fff;
+    --paginator-button-hover-color: #fff;
+    --paginator-button-hover-background: #535561;
+    --paginator-button-active-color: #fff;
+    --paginator-button-active-background: #292b39;
+    --paginator-button-disabled-color: #535561;
+    --paginator-button-disabled-border: #e5e5e5;
+    --paginator-button-disabled-background: #f5f5f5;
+
+    // Labels
+    --label-default-color: #fff;
+    --label-default-background: #595959;
+
+    --label-primary-color: #fff;
+    --label-primary-background: var(--color-primary);
+
+    --label-danger-color: #030304;
+    --label-danger-background: #d38c87;
+
+    --label-success-color: #030304;
+    --label-success-background: #9bbfa1;
+
     // Label sets
+    --label-set-border-radius: var(--border-radius);
+    --label-set-border-color: #9e9e9e;
+    --label-set-color: #272525;
+    --label-set-background: #ffffff;
+    --label-set-active-color: #ffffff;
+    --label-set-active-background: var(--color-primary);
+    --label-set-hover-color: #ffffff;
     --label-set-hover-background: #{rgba($primaryColor, .8)};
-
-    // Login button
-    --login-button-background: #fff;
+    --label-set-focus-color: #272525;
+    --label-set-focus-background: #f4f5f7;
+    --label-set-focus-border-color: #9e9e9e;
+
+    // Buttons
+    --button-font: 700 16px/24px var(--base-font);
+    --button-color: #282b39;
+    --button-shadow: none;
+    --button-decoration: none;
+    --button-border-radius: calc(var(--border-radius) * 0.75);
+    --button-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+    --button-hover-decoration: none;
+    --button-disabled-color: #616161;
+    --button-disabled-background: #e5e5e5;
+
+    --button-primary-color: #fff;
+    --button-primary-border: 1px solid var(--color-primary);
+    --button-primary-decoration: none;
+    --button-primary-background: var(--color-primary);
+    --button-primary-hover-color: #fff;
+    --button-primary-hover-border: 1px solid var(--color-primary-light);
+    --button-primary-hover-decoration: none;
+    --button-primary-hover-background: var(--color-primary-light);
+
+    --button-primary-outline-color: var(--color-primary);
+    --button-primary-outline-border: 1px solid var(--color-primary);
+    --button-primary-outline-decoration: none;
+    --button-primary-outline-background: transparent;
+    --button-primary-outline-hover-color: #fff;
+    --button-primary-outline-hover-border: 1px solid var(--color-primary);
+    --button-primary-outline-hover-decoration: none;
+    --button-primary-outline-hover-background: var(--color-primary);
+
+    --button-read_more-color: var(--button-primary-color);
+    --button-read_more-border: var(--button-primary-border);
+    --button-read_more-decoration: var(--button-primary-decoration);
+    --button-read_more-background: var(--button-primary-background);
+    --button-read_more-hover-color: var(--button-primary-hover-color);
+    --button-read_more-hover-border: var(--button-primary-hover-border);
+    --button-read_more-hover-decoration: var(--button-primary-hover-decoration);
+    --button-read_more-hover-background: var(--button-primary-hover-background);
+
+    // Sign up
+    --sign_up_accent_color: #282b39;
+    --sign_up_accent_color_light: #bdcbff;
+    --sign_up_link_color: #e60003;
+    --sign_up_step_btns_color: var(--tc);
+    --sign_up_digid_btn_bkg: #e1e7ff;
+    --sign_up_digid_btn_text: #4b71ff;
+    --sign_up_digid_btn_border: none;
+    --sign_up_digid_btn_border_radius: 5px;
+    --sign_up_loader_icon_color: #282b39;
 
     //- Showcase
-    --showcase-fullscreen-bottom-offset: 140px;
     --showcase-aside-shadow: none;
-    --showcase-aside-border: none;
     --showcase-aside-padding: 0;
+    --showcase-aside-background: #fff;
+    --showcase-aside-border: none;
+    --showcase-aside-border-radius: var(--border-radius);
+
+    --showcase-item-shadow: none;
+    --showcase-item-background: #fff;
+    --showcase-item-border: 1px solid var(--border-color);
+    --showcase-item-border-radius: var(--border-radius);
+    --showcase-item-hover-shadow: 2px 8px 14px 0px rgba(0, 0, 0, 0.1);
 
     --showcase-aside-button-color: #fff;
     --showcase-aside-button-border: 1px solid var(--color-primary);
@@ -110,28 +280,70 @@ $primaryColorLight: #1c8fd7;
     --showcase-aside-button-hover-border: 1px solid var(--color-primary);
     --showcase-aside-button-hover-background: var(--color-primary-light);
 
-    --showcase-item-shadow: none;
-    --showcase-item-background: #fff;
-    --showcase-item-border: 1px solid var(--border-color);
-    --showcase-item-border-radius: var(--border-radius);
+    --showcase-fullscreen-bottom-offset: 140px;
 
-    // Nav item line position
-    --navbar-menu-item-line-position-top: auto;
-    --navbar-menu-item-line-position-bottom: 0;
+    --showcase-title-font: 600 18px/30px var(--heading-font-family);
+    --showcase-title-color: var(--tc);
+    --showcase-title-count-color: #fff;
+    --showcase-title-count-background: var(--color-primary);
+    --showcase-title-count-border-radius: calc(var(--border-radius) / 2);
+
+    // Breadcrumbs
+    --breadcrumb-size: 16px;
+    --breadcrumb-color: var(--color-primary);
+    --breadcrumb-color-active: #353535;
+    --breadcrumb-padding: 20px;
+
+    // Loader
+    --loader-background: #f5f5f5;
+    --loader-color: var(--color-primary);
 
     // Profile
+    --profile-menu-item-gap: 16px;
+    --profile-menu-item-color: var(--color-primary);
+    --profile-menu-item-color-icon: var(--profile-menu-item-color);
     --profile-menu-item-shadow: none;
     --profile-menu-item-background: #ffffff;
     --profile-menu-item-border-color: var(--border-color);
+    --profile-menu-item-border-radius: var(--border-radius);
+    --profile-menu-item-hover-color: #fff;
+    --profile-menu-item-hover-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
+    --profile-menu-item-hover-background: var(--color-primary);
+    --profile-menu-item-hover-border-color: var(--color-primary);
+    --profile-menu-item-hover-border-radius: var(--border-radius);
 
     // Vouchers
     --vouchers-label-color: #646f79;
     --vouchers-value-color: var(--tc);
     --vouchers-organization-color: var(--tc);
 
+    // Voucher card
+    --voucher-card-action-color: var(--color-primary);
+    --voucher-card-action-background: transparent;
+    --voucher-card-action-border-color: var(--color-primary);
+    --voucher-card-action-border-radius: 0px;
+    --voucher-card-action-hover-color: #fff;
+    --voucher-card-action-hover-background: var(--color-primary);
+    --voucher-card-action-hover-border-color: var(--color-primary);
+
+    // Products
+    --products-title-color: var(--tc);
+    --products-title-hover-color: var(--tc);
+    --products-text-color: var(--tc);
+
+    // Product
+    --product-title-font: 700 22px/28px var(--heading-font-family);
+    --product-title-color: var(--tc);
+
     // Faq
     --faq-width: 100%;
     --faq-align: center;
+    --faq-header-color: #00122a;
+    --faq-header-color-hover: var(--color-primary);
+
+    // Map
+    --map-title-color: #0B0E12;
+    --map-title-font: 700 40px var(--heading-font-family);
 
     // Sections
     --section-padding: 0 0 30px;
@@ -148,6 +360,8 @@ $primaryColorLight: #1c8fd7;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 30px 0;
     --section-footer-background: #306fb3;
+    --section-pre-check-padding: 0 0 30px;
+    --section-pre-check-background: var(--section-background);
     --section-profile-padding: var(--section-padding);
     --section-profile-background: var(--section-background);
     --section-products-padding: 20px 0 30px;
@@ -156,4 +370,24 @@ $primaryColorLight: #1c8fd7;
     --section-breadcrumbs-background: var(--section-background);
     --section-voucher-details-padding: var(--section-padding);
     --section-voucher-details-background: var(--section-background);
+
+    // Search bar
+    --search-result-sidebar-item-active-color: #a80a2d;
+    --search-result-sidebar-item-active-background: #fff;
+
+    // CMS funds
+    --cms-funds-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-title-color: var(--htc);
+    --cms-funds-label-font-size: 11px;
+    --cms-funds-label-background: var(--color-primary);
+
+    --cms-funds-compact-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-compact-title-color: var(--htc);
+
+    --cms-funds-link-color: var(--color-primary);
+    --cms-funds-link-font: 600 18px/20px var(--base-font);
+
+    // Section order
+    --order-page-voucher-map: 0;
+    --order-page-voucher-products: 0;
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-vergoedingen-vars.scss b/react/assets/forus-webshop/scss/style-webshop-vergoedingen-vars.scss
index 772b70153..569034195 100644
--- a/react/assets/forus-webshop/scss/style-webshop-vergoedingen-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-vergoedingen-vars.scss
@@ -107,23 +107,68 @@ $primaryColorLight: #2f7f6b;
 @import url('https://fonts.googleapis.com/css?family=Source+Serif+Pro:400,400i,600,700');
 
 :root {
+    --zoom: 100%;
+    --zoom-mobile: 100%;
+
+    --border-color: #e5e5e5;
+    --border-radius: 3px;
+    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+
+    --color-primary: #{$primaryColor};
+    --color-primary-light: #{$primaryColorLight};
+
+    --color-default: #176b55;
+    --color-default-light: #23a783;
+
+    --color-danger: #e63b3b;
+
     // navbar
-    --navbar-box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.2);
+    --navbar-box-shadow: var(--box-shadow);
+
+    --navbar-menu-gap: 22px;
+    --navbar-menu-order: 1;
     --navbar-menu-background: #fff;
+
+    --navbar-search-gap: 20px;
+    --navbar-search-order: 2;
+    --navbar-search-padding: 20px 0px;
+    --navbar-search-background: #ffffff;
+    --navbar-search-border-bottom: 1px solid var(--border-color);
+
+    --navbar-menu-item-font: 400 18px/21px var(--base-font);
     --navbar-menu-item-color: #212121;
     --navbar-menu-item-color-hover: #176b55;
     --navbar-menu-item-padding: 10px 0;
-    --navbar-search-padding: 20px 0px;
-    --navbar-logo-height: 45px;
+    --navbar-menu-item-background: transparent;
+    --navbar-menu-item-background-hover: transparent;
 
     --navbar-menu-separator-opacity: 0;
     --navbar-menu-separator-background: var(--navbar-menu-item-color);
 
-    // navbar (auth)
+    --navbar-auth-font: 600 16px/20px var(--base-font);
+
+    --navbar-logo-height: 45px;
+
+    // Nav item line position
+    --navbar-menu-item-line-position-top: auto;
+    --navbar-menu-item-line-position-bottom: 0;
+
+    // wrapper
+    --wrapper-width: calc(1280px + 50px);
+    --wrapper-padding: 20px;
+
+    // Outline
+    --focus-outline: 2px solid #315efd;
+    --focus-outline-offset: 2px;
+    --focus-box-shadow: 0 0 0 3px white;
+
+    // navbar (auth) (default button)
     --tc-auth-menu: #176b55;
     --tc-auth-btn: #ffffff;
     --btn-auth-bg: transparent;
     --btn-auth-border: #0000;
+    --auth-avater-bg: #305dfb;
+    --auth-avater-svg: #fff;
 
     // navbar (start modal primary)
     --tc-start-btn: #fff;
@@ -131,23 +176,32 @@ $primaryColorLight: #2f7f6b;
     --btn-start-btn: transparent;
     --btn-start-border: #176b55;
 
-    // header attributes
+    // header background
     --bg-values: url('../img/splash-top-b.jpg') no-repeat 100% 0;
 
+    // Header banner
+    --header-banner-pane-banner-padding: 50px 0;
+    --header-banner-pane-banner-max-width: 650px;
+    --header-banner-pane-banner-background: transparent;
+    --header-banner-pane-banner-border-color: initial;
+    --header-banner-pane-banner-border-radius: initial;
+
     // base font
     --base-font: 'Source Sans Pro', 'Arial', sans-serif;
 
+    // text color
+    --tc: #212121;
+    --htc: var(--tc);
+    --tc-var: #fff;
+    --tc-link: inherit;
+    --tc-muted: #595959;
+
     // heading font
     --heading-font-family: 'Oranda', sans-serif;
     --heading-font: 700 40px/60px var(--heading-font-family);
     --heading-color: var(--tc);
     --heading-pane-font: 700 22px/30px var(--heading-font-family);
 
-    // text color
-    --tc: #212121;
-    --tc-var: #fff;
-    --tc-link: inherit;
-
     // base color
     --bc: #000;
 
@@ -155,54 +209,194 @@ $primaryColorLight: #2f7f6b;
     --body-background: #fff;
 
     // footer color
+    --footer_padding: 0;
     --footer_background: transparent;
     --footer_color: #fff;
-
     --footer_color_link: #fff;
 
+    --footer_social_color: var(--footer_color);
+    --footer_social_background: transparent;
+    --footer_social_border_color: var(--footer_color);
+    --footer_social_border_radius: var(--border-radius);
+
     --footer-copyright-color: var(--footer_color_link);
     --footer-copyright-font: 400 16px/30px var(--base-font);
     --footer-copyright-background: #212121;
     --footer-copyright-border-color: transparent;
     --footer-copyright-padding: 25px;
 
-    // Displayed or not
+    // not displayed
     --footer_display: block;
 
     // product image
     --product-image-padding: 10px 0 0 10px;
 
-    // placeholder text color
-    --form-control-placeholder-color: #515152;
-
-    --border-color: #e5e5e5;
-
-    --border-radius: 3px;
-    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-
-    --color-primary: #{$primaryColor};
-    --color-primary-light: #{$primaryColorLight};
+    // Markdown
+    --markdown-font: 400 16px/24px var(--base-font);
 
-    --color-default: #176b55;
-    --color-default-light: #23a783;
+    // Forms
+    --form-control-color: #222222;
+    --form-control-background: #ffffff;
+    --form-control-border-color: #646464;
+    --form-control-border-color-focus: #282b39;
+    --form-control-placeholder-font: 400 13px/20px var(--base-font);
+    --form-control-placeholder-color: #515152;
+    --form-label-color: #595959;
+    --form-label-font: 700 11px/16px var(--base-font);
 
+    // Search bar
     --color-search-icon-medium: #{$primaryColor};
     --color-search-icon-dark: #{darken($primaryColor, 10%)};
     --color-search-icon-light: #{lighten($primaryColor, 25%)};
 
+    --search-bar-point-color: #ececec;
+    --search-bar-point-radius: 0px;
+
+    --search-bar-input-radius: var(--border-radius);
+    --search-bar-input-border: 1px solid var(--form-control-border-color);
+    --search-bar-input-background: #fff;
+    --search-bar-input-icon-color: #666666;
+
+    --search-bar-label-top: -7px;
+    --search-bar-label-left: 16px;
+    --search-bar-label-padding: 4px;
+    --search-bar-label-background: #ffffff;
+
+    // Dropdowns
+    --dropdown-item-font: 500 13px/20px var(--base-font);
+    --dropdown-item-color: #282b39;
+    --dropdown-item-background: #ffffff;
+    --dropdown-item-hover-color: #000000;
+    --dropdown-item-hover-background: #e5e5e5;
+
+    // Paginator
+    --paginator-border-radius: var(--border-radius);
+    --paginator-button-color: #282b39;
+    --paginator-button-border: #9e9e9e;
+    --paginator-button-background: #fff;
+    --paginator-button-hover-color: #fff;
+    --paginator-button-hover-background: #535561;
+    --paginator-button-active-color: #fff;
+    --paginator-button-active-background: #292b39;
+    --paginator-button-disabled-color: #535561;
+    --paginator-button-disabled-border: #e5e5e5;
+    --paginator-button-disabled-background: #f5f5f5;
+
+    // Labels
+    --label-default-color: #fff;
+    --label-default-background: #595959;
+
+    --label-primary-color: #fff;
+    --label-primary-background: var(--color-primary);
+
+    --label-danger-color: #030304;
+    --label-danger-background: #d38c87;
+
+    --label-success-color: #030304;
+    --label-success-background: #9bbfa1;
+
+    // Label sets
+    --label-set-border-radius: var(--border-radius);
+    --label-set-border-color: #9e9e9e;
+    --label-set-color: #272525;
+    --label-set-background: #ffffff;
+    --label-set-active-color: #ffffff;
+    --label-set-active-background: var(--color-primary);
+    --label-set-hover-color: #ffffff;
+    --label-set-hover-background: #{rgba($primaryColor, 0.8)};
+    --label-set-focus-color: #272525;
+    --label-set-focus-background: #f4f5f7;
+    --label-set-focus-border-color: #9e9e9e;
+
+    // Buttons
+    --button-font: 700 16px/24px var(--base-font);
+    --button-color: #282b39;
+    --button-shadow: none;
+    --button-decoration: none;
+    --button-border-radius: calc(var(--border-radius) * 0.75);
+    --button-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+    --button-hover-decoration: none;
+    --button-disabled-color: #616161;
+    --button-disabled-background: #e5e5e5;
+
+    --button-primary-color: #fff;
+    --button-primary-border: 1px solid var(--color-primary);
+    --button-primary-decoration: none;
+    --button-primary-background: var(--color-primary);
+    --button-primary-hover-color: #fff;
+    --button-primary-hover-border: 1px solid var(--color-primary-light);
+    --button-primary-hover-decoration: none;
+    --button-primary-hover-background: var(--color-primary-light);
+
+    --button-primary-outline-color: var(--color-primary);
+    --button-primary-outline-border: 1px solid var(--color-primary);
+    --button-primary-outline-decoration: none;
+    --button-primary-outline-background: transparent;
+    --button-primary-outline-hover-color: #fff;
+    --button-primary-outline-hover-border: 1px solid var(--color-primary);
+    --button-primary-outline-hover-decoration: none;
+    --button-primary-outline-hover-background: var(--color-primary);
+
+    --button-read_more-color: var(--button-primary-color);
+    --button-read_more-border: var(--button-primary-border);
+    --button-read_more-decoration: var(--button-primary-decoration);
+    --button-read_more-background: var(--button-primary-background);
+    --button-read_more-hover-color: var(--button-primary-hover-color);
+    --button-read_more-hover-border: var(--button-primary-hover-border);
+    --button-read_more-hover-decoration: var(--button-primary-hover-decoration);
+    --button-read_more-hover-background: var(--button-primary-hover-background);
+
+    // Sign up
+    --sign_up_accent_color: #282b39;
+    --sign_up_accent_color_light: #bdcbff;
+    --sign_up_link_color: #e60003;
+    --sign_up_step_btns_color: var(--color-primary);
+    --sign_up_digid_btn_bkg: #e1e7ff;
+    --sign_up_digid_btn_text: #4b71ff;
+    --sign_up_digid_btn_border: none;
+    --sign_up_digid_btn_border_radius: 5px;
+    --sign_up_loader_icon_color: #282b39;
+
     //- Showcase
     --showcase-aside-shadow: none;
-    --showcase-aside-border: none;
     --showcase-aside-padding: 0px;
+    --showcase-aside-background: #fff;
+    --showcase-aside-border: none;
+    --showcase-aside-border-radius: var(--border-radius);
 
     --showcase-item-shadow: none;
     --showcase-item-background: #fff;
     --showcase-item-border: 1px solid var(--border-color);
     --showcase-item-border-radius: var(--border-radius);
+    --showcase-item-hover-shadow: 2px 8px 14px 0px rgba(0, 0, 0, 0.1);
+
+    --showcase-aside-button-color: var(--color-primary);
+    --showcase-aside-button-border: 1px solid var(--color-primary);
+    --showcase-aside-button-background: transparent;
+    --showcase-aside-button-hover-color: #fff;
+    --showcase-aside-button-hover-border: 1px solid var(--color-primary);
+    --showcase-aside-button-hover-background: var(--color-primary);
 
     --showcase-fullscreen-bottom-offset: 50px;
 
+    --showcase-title-font: 600 18px/30px var(--heading-font-family);
+    --showcase-title-color: var(--tc);
+    --showcase-title-count-color: #fff;
+    --showcase-title-count-background: var(--color-primary);
+    --showcase-title-count-border-radius: calc(var(--border-radius) / 2);
+
+    // Breadcrumbs
+    --breadcrumb-size: 16px;
+    --breadcrumb-color: var(--color-primary);
+    --breadcrumb-color-active: #353535;
+    --breadcrumb-padding: 20px;
+
+    // Loader
+    --loader-background: #f5f5f5;
+    --loader-color: var(--color-primary);
+
     // Profile
+    --profile-menu-item-gap: 16px;
     --profile-menu-item-color: var(--color-primary);
     --profile-menu-item-color-icon: var(--profile-menu-item-color);
     --profile-menu-item-shadow: none;
@@ -215,30 +409,38 @@ $primaryColorLight: #2f7f6b;
     --profile-menu-item-hover-border-color: var(--color-primary);
     --profile-menu-item-hover-border-radius: var(--border-radius);
 
-    // Label sets
-    --label-set-hover-background: #{rgba($primaryColor, 0.8)};
-
-    // Sign up
-    --sign_up_accent_color: #282b39;
-    --sign_up_accent_color_light: #bdcbff;
-    --sign_up_link_color: #e60003;
-    --sign_up_step_btns_color: var(--color-primary);
-    --sign_up_digid_btn_bkg: #e1e7ff;
-    --sign_up_digid_btn_text: #4b71ff;
-    --sign_up_digid_btn_border: none;
-    --sign_up_digid_btn_border_radius: 5px;
-    --sign_up_loader_icon_color: #282b39;
-
-    // Login button
-    --login-button-background: #fff;
-
-    // Nav item line position
-    --navbar-menu-item-line-position-top: auto;
-    --navbar-menu-item-line-position-bottom: 0;
+    // Vouchers
+    --vouchers-label-color: #646f79;
+    --vouchers-value-color: var(--tc);
+    --vouchers-organization-color: var(--tc);
+
+    // Voucher card
+    --voucher-card-action-color: var(--color-primary);
+    --voucher-card-action-background: transparent;
+    --voucher-card-action-border-color: var(--color-primary);
+    --voucher-card-action-border-radius: 0px;
+    --voucher-card-action-hover-color: #fff;
+    --voucher-card-action-hover-background: var(--color-primary);
+    --voucher-card-action-hover-border-color: var(--color-primary);
+
+    // Products
+    --products-title-color: var(--tc);
+    --products-title-hover-color: var(--tc);
+    --products-text-color: var(--tc);
+
+    // Product
+    --product-title-font: 700 22px/28px var(--heading-font-family);
+    --product-title-color: var(--tc);
 
     // Faq
     --faq-width: 100%;
     --faq-align: center;
+    --faq-header-color: #00122a;
+    --faq-header-color-hover: var(--color-primary);
+
+    // Map
+    --map-title-color: #0B0E12;
+    --map-title-font: 700 40px var(--heading-font-family);
 
     // Sections
     --section-padding: 0 0 30px;
@@ -255,6 +457,8 @@ $primaryColorLight: #2f7f6b;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 30px 0;
     --section-footer-background: #3a3a3a;
+    --section-pre-check-padding: 0 0 30px;
+    --section-pre-check-background: var(--section-background);
     --section-profile-padding: var(--section-padding);
     --section-profile-background: var(--section-background);
     --section-products-padding: 20px 0 30px;
@@ -273,4 +477,14 @@ $primaryColorLight: #2f7f6b;
     --cms-funds-title-color: #950022;
     --cms-funds-label-font-size: 12px;
     --cms-funds-label-background: #176B55;
+
+    --cms-funds-compact-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-compact-title-color: var(--htc);
+
+    --cms-funds-link-color: var(--color-primary);
+    --cms-funds-link-font: 600 18px/20px var(--base-font);
+
+    // Section order
+    --order-page-voucher-map: 0;
+    --order-page-voucher-products: 0;
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-waalwijk-vars.scss b/react/assets/forus-webshop/scss/style-webshop-waalwijk-vars.scss
index f8fb93ba2..c376b464c 100644
--- a/react/assets/forus-webshop/scss/style-webshop-waalwijk-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-waalwijk-vars.scss
@@ -5,22 +5,68 @@ $primaryColor: #2a2a7f;
 $primaryColorLight: #2a2a7f;
 
 :root {
+    --zoom: 100%;
+    --zoom-mobile: 100%;
+
+    --border-color: #dce0e0;
+    --border-radius: 0px;
+    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+
+    --color-primary: #{$primaryColor};
+    --color-primary-light: #{$primaryColorLight};
+
+    --color-default: $primaryColo;
+    --color-default-light: #{$primaryColorLight};
+
+    --color-danger: #e63b3b;
+
     // navbar
+    --navbar-box-shadow: none;
+
+    --navbar-menu-gap: 22px;
+    --navbar-menu-order: 1;
     --navbar-menu-background: #2a2a7f;
-    --navbar-menu-item-color-hover: #ececec;
-    --navbar-menu-item-color: #ffffff;
+
+    --navbar-search-gap: 20px;
+    --navbar-search-order: 2;
     --navbar-search-padding: 25px 0px;
+    --navbar-search-background: #ffffff;
+    --navbar-search-border-bottom: 1px solid var(--border-color);
+
+    --navbar-menu-item-font: 400 18px/21px var(--base-font);
+    --navbar-menu-item-color: #ffffff;
+    --navbar-menu-item-color-hover: #ececec;
+    --navbar-menu-item-padding: 16px 0;
+    --navbar-menu-item-background: transparent;
+    --navbar-menu-item-background-hover: transparent;
+
+    --navbar-menu-separator-opacity: 0.25;
+    --navbar-menu-separator-background: var(--navbar-menu-item-color);
+
+    --navbar-auth-font: 600 16px/20px var(--base-font);
+
     --navbar-logo-height: 100px;
 
     // Nav item line position
     --navbar-menu-item-line-position-top: auto;
     --navbar-menu-item-line-position-bottom: 0;
 
-    // navbar (auth)
+    // wrapper
+    --wrapper-width: calc(1280px + 50px);
+    --wrapper-padding: 20px;
+
+    // Outline
+    --focus-outline: 2px solid #315efd;
+    --focus-outline-offset: 2px;
+    --focus-box-shadow: 0 0 0 3px white;
+
+    // navbar (auth) (default button)
     --tc-auth-menu: #2a2a7f;
     --tc-auth-btn: #fff;
     --btn-auth-bg: #2a2a7f;
     --btn-auth-border: transparent;
+    --auth-avater-bg: #305dfb;
+    --auth-avater-svg: #fff;
 
     // navbar (start modal primary)
     --tc-start-btn: #fff;
@@ -28,15 +74,31 @@ $primaryColorLight: #2a2a7f;
     --btn-start-btn: #ed7c20;
     --btn-start-border: transparent;
 
+    // header background
     --bg-values: url("../img/splash-top-b.jpg") no-repeat center 100%;
 
+    // Header banner
+    --header-banner-pane-banner-padding: 50px 0;
+    --header-banner-pane-banner-max-width: 650px;
+    --header-banner-pane-banner-background: transparent;
+    --header-banner-pane-banner-border-color: initial;
+    --header-banner-pane-banner-border-radius: initial;
+
     // base font
     --base-font: "Lato", "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
 
     // text color
     --tc: #1a1919;
+    --htc: var(--tc);
     --tc-var: #fff;
     --tc-link: inherit;
+    --tc-muted: #595959;
+
+    // heading font
+    --heading-font-family: var(--base-font);
+    --heading-font: 700 40px/60px var(--heading-font-family);
+    --heading-color: var(--tc);
+    --heading-pane-font: 700 22px/30px var(--heading-font-family);
 
     // base color
     --bc: #2a2a7f;
@@ -45,49 +107,238 @@ $primaryColorLight: #2a2a7f;
     --body-background: none;
 
     // footer color
+    --footer_padding: 0;
     --footer_background: transparent;
     --footer_color: #ffffff;
     --footer_color_link: #ffffff;
 
+    --footer_social_color: var(--footer_color);
+    --footer_social_background: transparent;
+    --footer_social_border_color: var(--footer_color);
+    --footer_social_border_radius: var(--border-radius);
+
     --footer-copyright-color: var(--footer_color_link);
     --footer-copyright-font: 400 14px/30px var(--base-font);
     --footer-copyright-background: #2f2d80;
     --footer-copyright-border-color: var(--border-color);
     --footer-copyright-padding: 40px;
 
-    // displayed or not
+    // not displayed
     --footer_display: block;
 
     // product image
     --product-image-padding: 0px;
 
-    // placeholder text color
+    // Markdown
+    --markdown-font: 400 16px/24px var(--base-font);
+
+    // Forms
+    --form-control-color: #222222;
+    --form-control-background: #ffffff;
+    --form-control-border-color: #646464;
+    --form-control-border-color-focus: #282b39;
+    --form-control-placeholder-font: 400 13px/20px var(--base-font);
     --form-control-placeholder-color: #515152;
+    --form-label-color: #595959;
+    --form-label-font: 700 11px/16px var(--base-font);
 
-    --border-color: #dce0e0;
+    // Search bar
+    --color-search-icon-medium: #{$primaryColor};
+    --color-search-icon-dark: #{darken($primaryColor, 10%)};
+    --color-search-icon-light: #{lighten($primaryColor, 25%)};
 
-    --border-radius: 0px;
-    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+    --search-bar-point-color: #ececec;
+    --search-bar-point-radius: 0px;
 
-    --color-primary: #{$primaryColor};
-    --color-primary-light: #{$primaryColorLight};
+    --search-bar-input-radius: var(--border-radius);
+    --search-bar-input-border: 1px solid var(--form-control-border-color);
+    --search-bar-input-background: #fff;
+    --search-bar-input-icon-color: #666666;
 
-    --color-default: $primaryColo;
-    --color-default-light: #{$primaryColorLight};
+    --search-bar-label-top: -7px;
+    --search-bar-label-left: 16px;
+    --search-bar-label-padding: 4px;
+    --search-bar-label-background: #ffffff;
 
-    --color-search-icon-medium: #{$primaryColor};
-    --color-search-icon-dark: #{darken($primaryColor, 10%)};
-    --color-search-icon-light: #{lighten($primaryColor, 25%)};
+    // Dropdowns
+    --dropdown-item-font: 500 13px/20px var(--base-font);
+    --dropdown-item-color: #282b39;
+    --dropdown-item-background: #ffffff;
+    --dropdown-item-hover-color: #000000;
+    --dropdown-item-hover-background: #e5e5e5;
+
+    // Paginator
+    --paginator-border-radius: var(--border-radius);
+    --paginator-button-color: #282b39;
+    --paginator-button-border: #9e9e9e;
+    --paginator-button-background: #fff;
+    --paginator-button-hover-color: #fff;
+    --paginator-button-hover-background: #535561;
+    --paginator-button-active-color: #fff;
+    --paginator-button-active-background: #292b39;
+    --paginator-button-disabled-color: #535561;
+    --paginator-button-disabled-border: #e5e5e5;
+    --paginator-button-disabled-background: #f5f5f5;
+
+    // Labels
+    --label-default-color: #fff;
+    --label-default-background: #595959;
+
+    --label-primary-color: #fff;
+    --label-primary-background: var(--color-primary);
+
+    --label-danger-color: #030304;
+    --label-danger-background: #d38c87;
+
+    --label-success-color: #030304;
+    --label-success-background: #9bbfa1;
 
     // Label sets
+    --label-set-border-radius: var(--border-radius);
+    --label-set-border-color: #9e9e9e;
+    --label-set-color: #272525;
+    --label-set-background: #ffffff;
+    --label-set-active-color: #ffffff;
+    --label-set-active-background: var(--color-primary);
+    --label-set-hover-color: #ffffff;
     --label-set-hover-background: #{rgba($primaryColor, .8)};
+    --label-set-focus-color: #272525;
+    --label-set-focus-background: #f4f5f7;
+    --label-set-focus-border-color: #9e9e9e;
+
+    // Buttons
+    --button-font: 700 16px/24px var(--base-font);
+    --button-color: #282b39;
+    --button-shadow: none;
+    --button-decoration: none;
+    --button-border-radius: calc(var(--border-radius) * 0.75);
+    --button-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+    --button-hover-decoration: none;
+    --button-disabled-color: #616161;
+    --button-disabled-background: #e5e5e5;
+
+    --button-primary-color: #fff;
+    --button-primary-border: 1px solid var(--color-primary);
+    --button-primary-decoration: none;
+    --button-primary-background: var(--color-primary);
+    --button-primary-hover-color: #fff;
+    --button-primary-hover-border: 1px solid var(--color-primary-light);
+    --button-primary-hover-decoration: none;
+    --button-primary-hover-background: var(--color-primary-light);
+
+    --button-primary-outline-color: var(--color-primary);
+    --button-primary-outline-border: 1px solid var(--color-primary);
+    --button-primary-outline-decoration: none;
+    --button-primary-outline-background: transparent;
+    --button-primary-outline-hover-color: #fff;
+    --button-primary-outline-hover-border: 1px solid var(--color-primary);
+    --button-primary-outline-hover-decoration: none;
+    --button-primary-outline-hover-background: var(--color-primary);
+
+    --button-read_more-color: var(--button-primary-color);
+    --button-read_more-border: var(--button-primary-border);
+    --button-read_more-decoration: var(--button-primary-decoration);
+    --button-read_more-background: var(--button-primary-background);
+    --button-read_more-hover-color: var(--button-primary-hover-color);
+    --button-read_more-hover-border: var(--button-primary-hover-border);
+    --button-read_more-hover-decoration: var(--button-primary-hover-decoration);
+    --button-read_more-hover-background: var(--button-primary-hover-background);
+
+    // Sign up
+    --sign_up_accent_color: #282b39;
+    --sign_up_accent_color_light: #bdcbff;
+    --sign_up_link_color: #e60003;
+    --sign_up_step_btns_color: var(--tc);
+    --sign_up_digid_btn_bkg: #e1e7ff;
+    --sign_up_digid_btn_text: #4b71ff;
+    --sign_up_digid_btn_border: none;
+    --sign_up_digid_btn_border_radius: 5px;
+    --sign_up_loader_icon_color: #282b39;
 
     //- Showcase
+    --showcase-aside-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
+    --showcase-aside-padding: 20px;
+    --showcase-aside-background: #fff;
+    --showcase-aside-border: 1px solid #e5e5e5;
+    --showcase-aside-border-radius: var(--border-radius);
+
+    --showcase-item-shadow: var(--showcase-aside-shadow);
+    --showcase-item-background: var(--showcase-aside-background);
+    --showcase-item-border: var(--showcase-aside-border);
+    --showcase-item-border-radius: var(--showcase-aside-border-radius);
+    --showcase-item-hover-shadow: 2px 8px 14px 0px rgba(0, 0, 0, 0.1);
+
+    --showcase-aside-button-color: var(--color-primary);
+    --showcase-aside-button-border: 1px solid var(--color-primary);
+    --showcase-aside-button-background: transparent;
+    --showcase-aside-button-hover-color: #fff;
+    --showcase-aside-button-hover-border: 1px solid var(--color-primary);
+    --showcase-aside-button-hover-background: var(--color-primary);
+
     --showcase-fullscreen-bottom-offset: 175px;
 
-    // Login button
-    --login-button-background: #fff;
+    --showcase-title-font: 600 18px/30px var(--heading-font-family);
+    --showcase-title-color: var(--tc);
+    --showcase-title-count-color: #fff;
+    --showcase-title-count-background: var(--color-primary);
+    --showcase-title-count-border-radius: calc(var(--border-radius) / 2);
+
+    // Breadcrumbs
+    --breadcrumb-size: 16px;
+    --breadcrumb-color: var(--color-primary);
+    --breadcrumb-color-active: #353535;
+    --breadcrumb-padding: 20px;
+
+    // Loader
+    --loader-background: #f5f5f5;
+    --loader-color: var(--color-primary);
+
+    // Profile
+    --profile-menu-item-gap: 16px;
+    --profile-menu-item-color: var(--color-primary);
+    --profile-menu-item-color-icon: var(--profile-menu-item-color);
+    --profile-menu-item-shadow: var(--box-shadow);
+    --profile-menu-item-background: #ffffff;
+    --profile-menu-item-border-color: transparent;
+    --profile-menu-item-border-radius: var(--border-radius);
+    --profile-menu-item-hover-color: #fff;
+    --profile-menu-item-hover-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
+    --profile-menu-item-hover-background: var(--color-primary);
+    --profile-menu-item-hover-border-color: var(--color-primary);
+    --profile-menu-item-hover-border-radius: var(--border-radius);
+
+    // Vouchers
+    --vouchers-label-color: #646f79;
+    --vouchers-value-color: var(--tc);
+    --vouchers-organization-color: var(--tc);
+
+    // Voucher card
+    --voucher-card-action-color: var(--color-primary);
+    --voucher-card-action-background: transparent;
+    --voucher-card-action-border-color: var(--color-primary);
+    --voucher-card-action-border-radius: 0px;
+    --voucher-card-action-hover-color: #fff;
+    --voucher-card-action-hover-background: var(--color-primary);
+    --voucher-card-action-hover-border-color: var(--color-primary);
 
+    // Products
+    --products-title-color: var(--tc);
+    --products-title-hover-color: var(--tc);
+    --products-text-color: var(--tc);
+
+    // Product
+    --product-title-font: 700 22px/28px var(--heading-font-family);
+    --product-title-color: var(--tc);
+
+    // Faq
+    --faq-width: 820px;
+    --faq-align: center;
+    --faq-header-color: #00122a;
+    --faq-header-color-hover: var(--color-primary);
+
+    // Map
+    --map-title-color: #0B0E12;
+    --map-title-font: 700 40px var(--heading-font-family);
 
     // Sections
     --section-padding: 0 0 30px;
@@ -104,6 +355,8 @@ $primaryColorLight: #2a2a7f;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 30px 0;
     --section-footer-background: #2f2d80;
+    --section-pre-check-padding: 0 0 30px;
+    --section-pre-check-background: var(--section-background);
     --section-profile-padding: var(--section-padding);
     --section-profile-background: var(--section-background);
     --section-products-padding: var(--section-padding);
@@ -112,4 +365,24 @@ $primaryColorLight: #2a2a7f;
     --section-breadcrumbs-background: var(--section-background);
     --section-voucher-details-padding: var(--section-padding);
     --section-voucher-details-background: var(--section-background);
+
+    // Search bar
+    --search-result-sidebar-item-active-color: #a80a2d;
+    --search-result-sidebar-item-active-background: #fff;
+
+    // CMS funds
+    --cms-funds-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-title-color: var(--htc);
+    --cms-funds-label-font-size: 11px;
+    --cms-funds-label-background: var(--color-primary);
+
+    --cms-funds-compact-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-compact-title-color: var(--htc);
+
+    --cms-funds-link-color: var(--color-primary);
+    --cms-funds-link-font: 600 18px/20px var(--base-font);
+
+    // Section order
+    --order-page-voucher-map: 0;
+    --order-page-voucher-products: 0;
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-wadenheuvel-vars.scss b/react/assets/forus-webshop/scss/style-webshop-wadenheuvel-vars.scss
index f16f7fbd7..ae3ce456a 100644
--- a/react/assets/forus-webshop/scss/style-webshop-wadenheuvel-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-wadenheuvel-vars.scss
@@ -5,18 +5,68 @@ $primaryColor: #2a2a7f;
 $primaryColorLight: #2a2a7f;
 
 :root {
+    --zoom: 100%;
+    --zoom-mobile: 100%;
+
+    --border-color: #dddddd;
+    --border-radius: 8px;
+    --box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.05);
+
+    --color-primary: #{$primaryColor};
+    --color-primary-light: #{$primaryColorLight};
+
+    --color-default: #305dfb;
+    --color-default-light: #4c74ff;
+
+    --color-danger: #e63b3b;
+
     // navbar
+    --navbar-box-shadow: none;
+
+    --navbar-menu-gap: 22px;
+    --navbar-menu-order: 1;
     --navbar-menu-background: #171e5f;
-    --navbar-menu-item-color-hover: #e8edff;
-    --navbar-menu-item-color: #ffffff;
+
+    --navbar-search-gap: 20px;
+    --navbar-search-order: 2;
     --navbar-search-padding: 30px 0px;
+    --navbar-search-background: #ffffff;
+    --navbar-search-border-bottom: 1px solid var(--border-color);
+
+    --navbar-menu-item-font: 400 18px/21px var(--base-font);
+    --navbar-menu-item-color: #ffffff;
+    --navbar-menu-item-color-hover: #e8edff;
+    --navbar-menu-item-padding: 16px 0;
+    --navbar-menu-item-background: transparent;
+    --navbar-menu-item-background-hover: transparent;
+
+    --navbar-menu-separator-opacity: 0.25;
+    --navbar-menu-separator-background: var(--navbar-menu-item-color);
+
+    --navbar-auth-font: 600 16px/20px var(--base-font);
+
     --navbar-logo-height: 75px;
 
-    // navbar (auth)
+    // Nav item line position
+    --navbar-menu-item-line-position-top: 0;
+    --navbar-menu-item-line-position-bottom: auto;
+
+    // wrapper
+    --wrapper-width: calc(1280px + 50px);
+    --wrapper-padding: 20px;
+
+    // Outline
+    --focus-outline: 2px solid #315efd;
+    --focus-outline-offset: 2px;
+    --focus-box-shadow: 0 0 0 3px white;
+
+    // navbar (auth) (default button)
     --tc-auth-menu: #ffffff;
     --tc-auth-btn: #171e5f;
     --btn-auth-bg: #ffffff;
     --btn-auth-border: #171e5f;
+    --auth-avater-bg: #305dfb;
+    --auth-avater-svg: #fff;
 
     // navbar (start modal primary)
     --tc-start-btn: #fff;
@@ -24,15 +74,31 @@ $primaryColorLight: #2a2a7f;
     --btn-start-btn: #3561ff;
     --btn-start-border: transparent;
 
+    // header background
     --bg-values: url('../img/splash-top-b.jpg') no-repeat center 100%;
 
+    // Header banner
+    --header-banner-pane-banner-padding: 50px 0;
+    --header-banner-pane-banner-max-width: 650px;
+    --header-banner-pane-banner-background: transparent;
+    --header-banner-pane-banner-border-color: initial;
+    --header-banner-pane-banner-border-radius: initial;
+
     // base font
-    --bf: Montserrat, Arial, Verdana;
+    --base-font: 'Open Sans', arial, sans-serif;
 
     // text color
     --tc: #1a1919;
+    --htc: var(--tc);
     --tc-var: #ee4e34;
     --tc-link: inherit;
+    --tc-muted: #595959;
+
+    // heading font
+    --heading-font-family: var(--base-font);
+    --heading-font: 700 40px/60px var(--heading-font-family);
+    --heading-color: var(--tc);
+    --heading-pane-font: 700 22px/30px var(--heading-font-family);
 
     // base color
     --bc: #003b3b;
@@ -41,10 +107,10 @@ $primaryColorLight: #2a2a7f;
     --body-background: none;
 
     // footer color
+    --footer_padding: 0;
     --footer_background: transparent;
     --footer_color: #353535;
     --footer_color_link: #004d93;
-    --footer_color_link_hover: #004d93;
 
     --footer_social_color: var(--footer_color);
     --footer_social_background: transparent;
@@ -57,43 +123,222 @@ $primaryColorLight: #2a2a7f;
     --footer-copyright-border-color: var(--border-color);
     --footer-copyright-padding: 40px;
 
-    // text formatting
-    --tf: inherit;
+    // not displayed
+    --footer_display: none;
 
-    // footer color
-    --fbc: #171e5f;
-    --fc: #ffffff;
+    // product image
+    --product-image-padding: 10px 0 0 10px;
 
-    // displayed or not
-    --fd: block;
+    // Markdown
+    --markdown-font: 400 16px/24px var(--base-font);
 
-    // product image
-    --pi: 0px;
+    // Forms
+    --form-control-color: #222222;
+    --form-control-background: #ffffff;
+    --form-control-border-color: #646464;
+    --form-control-border-color-focus: #282b39;
+    --form-control-placeholder-font: 400 13px/20px var(--base-font);
+    --form-control-placeholder-color: #535561;
+    --form-label-color: #595959;
+    --form-label-font: 700 11px/16px var(--base-font);
+
+    // Search bar
+    --color-search-icon-medium: #{$primaryColor};
+    --color-search-icon-dark: #{darken($primaryColor, 10%)};
+    --color-search-icon-light: #{lighten($primaryColor, 25%)};
+
+    --search-bar-point-color: #ececec;
+    --search-bar-point-radius: 0px;
+
+    --search-bar-input-radius: var(--border-radius);
+    --search-bar-input-border: 1px solid var(--form-control-border-color);
+    --search-bar-input-background: #fff;
+    --search-bar-input-icon-color: #666666;
+
+    --search-bar-label-top: -7px;
+    --search-bar-label-left: 16px;
+    --search-bar-label-padding: 4px;
+    --search-bar-label-background: #ffffff;
 
-    // placeholder text color
-    --ptc: #515152;
+    // Dropdowns
+    --dropdown-item-font: 500 13px/20px var(--base-font);
+    --dropdown-item-color: #282b39;
+    --dropdown-item-background: #ffffff;
+    --dropdown-item-hover-color: #000000;
+    --dropdown-item-hover-background: #e5e5e5;
 
-    --border_color: #dce0e0;
+    // Paginator
+    --paginator-border-radius: var(--border-radius);
+    --paginator-button-color: #282b39;
+    --paginator-button-border: #9e9e9e;
+    --paginator-button-background: #fff;
+    --paginator-button-hover-color: #fff;
+    --paginator-button-hover-background: #535561;
+    --paginator-button-active-color: #fff;
+    --paginator-button-active-background: #292b39;
+    --paginator-button-disabled-color: #535561;
+    --paginator-button-disabled-border: #e5e5e5;
+    --paginator-button-disabled-background: #f5f5f5;
 
-    --border_radius: 3px;
-    --base_shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+    // Labels
+    --label-default-color: #fff;
+    --label-default-background: #595959;
 
-    --color_primary: #3561ff;
-    --color_primary_light: #3561ff;
+    --label-primary-color: #fff;
+    --label-primary-background: var(--color-primary);
 
-    --color_default: #3561ff;
-    --color_default_light: #3561ff;
+    --label-danger-color: #030304;
+    --label-danger-background: #d38c87;
+
+    --label-success-color: #030304;
+    --label-success-background: #9bbfa1;
+
+    // Label sets
+    --label-set-border-radius: var(--border-radius);
+    --label-set-border-color: #9e9e9e;
+    --label-set-color: #272525;
+    --label-set-background: #ffffff;
+    --label-set-active-color: #ffffff;
+    --label-set-active-background: var(--color-primary);
+    --label-set-hover-color: #ffffff;
+    --label-set-hover-background: #{rgba($primaryColor, 0.8)};
+    --label-set-focus-color: #272525;
+    --label-set-focus-background: #f4f5f7;
+    --label-set-focus-border-color: #9e9e9e;
+
+    // Buttons
+    --button-font: 700 16px/24px var(--base-font);
+    --button-color: #282b39;
+    --button-shadow: none;
+    --button-decoration: none;
+    --button-border-radius: calc(var(--border-radius) * 0.75);
+    --button-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+    --button-hover-decoration: none;
+    --button-disabled-color: #616161;
+    --button-disabled-background: #e5e5e5;
+
+    --button-primary-color: #fff;
+    --button-primary-border: 1px solid var(--color-primary);
+    --button-primary-decoration: none;
+    --button-primary-background: var(--color-primary);
+    --button-primary-hover-color: #fff;
+    --button-primary-hover-border: 1px solid var(--color-primary-light);
+    --button-primary-hover-decoration: none;
+    --button-primary-hover-background: var(--color-primary-light);
+
+    --button-primary-outline-color: var(--color-primary);
+    --button-primary-outline-border: 1px solid var(--color-primary);
+    --button-primary-outline-decoration: none;
+    --button-primary-outline-background: transparent;
+    --button-primary-outline-hover-color: #fff;
+    --button-primary-outline-hover-border: 1px solid var(--color-primary);
+    --button-primary-outline-hover-decoration: none;
+    --button-primary-outline-hover-background: var(--color-primary);
+
+    --button-read_more-color: var(--button-primary-color);
+    --button-read_more-border: var(--button-primary-border);
+    --button-read_more-decoration: var(--button-primary-decoration);
+    --button-read_more-background: var(--button-primary-background);
+    --button-read_more-hover-color: var(--button-primary-hover-color);
+    --button-read_more-hover-border: var(--button-primary-hover-border);
+    --button-read_more-hover-decoration: var(--button-primary-hover-decoration);
+    --button-read_more-hover-background: var(--button-primary-hover-background);
+
+    // Sign up
+    --sign_up_accent_color: #282b39;
+    --sign_up_accent_color_light: #bdcbff;
+    --sign_up_link_color: #e60003;
+    --sign_up_step_btns_color: var(--tc);
+    --sign_up_digid_btn_bkg: #e1e7ff;
+    --sign_up_digid_btn_text: #4b71ff;
+    --sign_up_digid_btn_border: none;
+    --sign_up_digid_btn_border_radius: 5px;
+    --sign_up_loader_icon_color: #282b39;
+
+    //- Showcase
+    --showcase-aside-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
+    --showcase-aside-padding: 20px;
+    --showcase-aside-background: #fff;
+    --showcase-aside-border: 1px solid #e5e5e5;
+    --showcase-aside-border-radius: var(--border-radius);
+
+    --showcase-item-shadow: var(--showcase-aside-shadow);
+    --showcase-item-background: var(--showcase-aside-background);
+    --showcase-item-border: var(--showcase-aside-border);
+    --showcase-item-border-radius: var(--showcase-aside-border-radius);
+    --showcase-item-hover-shadow: 2px 8px 14px 0px rgba(0, 0, 0, 0.1);
+
+    --showcase-aside-button-color: var(--color-primary);
+    --showcase-aside-button-border: 1px solid var(--color-primary);
+    --showcase-aside-button-background: transparent;
+    --showcase-aside-button-hover-color: #fff;
+    --showcase-aside-button-hover-border: 1px solid var(--color-primary);
+    --showcase-aside-button-hover-background: var(--color-primary);
+
+    --showcase-fullscreen-bottom-offset: 115px;
+
+    --showcase-title-font: 600 18px/30px var(--heading-font-family);
+    --showcase-title-color: var(--tc);
+    --showcase-title-count-color: #fff;
+    --showcase-title-count-background: var(--color-primary);
+    --showcase-title-count-border-radius: calc(var(--border-radius) / 2);
+
+    // Breadcrumbs
+    --breadcrumb-size: 16px;
+    --breadcrumb-color: var(--color-primary);
+    --breadcrumb-color-active: #353535;
+    --breadcrumb-padding: 20px;
+
+    // Loader
+    --loader-background: #f5f5f5;
+    --loader-color: var(--color-primary);
+
+    // Profile
+    --profile-menu-item-gap: 16px;
+    --profile-menu-item-color: var(--color-primary);
+    --profile-menu-item-color-icon: var(--profile-menu-item-color);
+    --profile-menu-item-shadow: var(--box-shadow);
+    --profile-menu-item-background: #ffffff;
+    --profile-menu-item-border-color: var(--border-color);
+    --profile-menu-item-border-radius: var(--border-radius);
+    --profile-menu-item-hover-color: #fff;
+    --profile-menu-item-hover-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
+    --profile-menu-item-hover-background: var(--color-primary);
+    --profile-menu-item-hover-border-color: var(--color-primary);
+    --profile-menu-item-hover-border-radius: var(--border-radius);
 
     // Vouchers
     --vouchers-label-color: #646f79;
     --vouchers-value-color: var(--tc);
     --vouchers-organization-color: var(--tc);
 
-    // Label sets
-    --label-set-hover-background: #{rgba($primaryColor, 0.8)};
+    // Voucher card
+    --voucher-card-action-color: var(--color-primary);
+    --voucher-card-action-background: transparent;
+    --voucher-card-action-border-color: var(--color-primary);
+    --voucher-card-action-border-radius: 0px;
+    --voucher-card-action-hover-color: #fff;
+    --voucher-card-action-hover-background: var(--color-primary);
+    --voucher-card-action-hover-border-color: var(--color-primary);
+
+    // Products
+    --products-title-color: var(--tc);
+    --products-title-hover-color: var(--tc);
+    --products-text-color: var(--tc);
+
+    // Product
+    --product-title-font: 700 22px/28px var(--heading-font-family);
+    --product-title-color: var(--tc);
 
-    // Login button
-    --lb: #fff;
+    // Faq
+    --faq-width: 820px;
+    --faq-align: center;
+    --faq-header-color: #00122a;
+    --faq-header-color-hover: var(--color-primary);
+
+    // Map
+    --map-title-color: #0B0E12;
+    --map-title-font: 700 40px var(--heading-font-family);
 
     // Sections
     --section-padding: 0 0 30px;
@@ -110,6 +355,8 @@ $primaryColorLight: #2a2a7f;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 30px 0;
     --section-footer-background: #fff;
+    --section-pre-check-padding: 0 0 30px;
+    --section-pre-check-background: var(--section-background);
     --section-profile-padding: var(--section-padding);
     --section-profile-background: var(--section-background);
     --section-products-padding: var(--section-padding);
@@ -118,4 +365,24 @@ $primaryColorLight: #2a2a7f;
     --section-breadcrumbs-background: var(--section-background);
     --section-voucher-details-padding: var(--section-padding);
     --section-voucher-details-background: var(--section-background);
+
+    // Search bar
+    --search-result-sidebar-item-active-color: #a80a2d;
+    --search-result-sidebar-item-active-background: #fff;
+
+    // CMS funds
+    --cms-funds-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-title-color: var(--htc);
+    --cms-funds-label-font-size: 11px;
+    --cms-funds-label-background: var(--color-primary);
+
+    --cms-funds-compact-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-compact-title-color: var(--htc);
+
+    --cms-funds-link-color: var(--color-primary);
+    --cms-funds-link-font: 600 18px/20px var(--base-font);
+
+    // Section order
+    --order-page-voucher-map: 0;
+    --order-page-voucher-products: 0;
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-winterswijk-vars.scss b/react/assets/forus-webshop/scss/style-webshop-winterswijk-vars.scss
index f16fa33d4..fbacf0239 100644
--- a/react/assets/forus-webshop/scss/style-webshop-winterswijk-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-winterswijk-vars.scss
@@ -5,18 +5,68 @@ $primaryColor: #0575ba;
 $primaryColorLight: #0c6dcb;
 
 :root {
+    --zoom: 100%;
+    --zoom-mobile: 100%;
+
+    --border-color: #ebedf0;
+    --border-radius: 0px;
+    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+
+    --color-primary: #{$primaryColor};
+    --color-primary-light: #{$primaryColorLight};
+
+    --color-default: #0c6dcb;
+    --color-default-light: 1px solid #626161;
+
+    --color-danger: #e63b3b;
+
     // navbar
+    --navbar-box-shadow: none;
+
+    --navbar-menu-gap: 22px;
+    --navbar-menu-order: 1;
     --navbar-menu-background: #f5f5f5;
+
+    --navbar-search-gap: 20px;
+    --navbar-search-order: 2;
+    --navbar-search-padding: 30px 0px;
+    --navbar-search-background: #ffffff;
+    --navbar-search-border-bottom: 1px solid var(--border-color);
+
+    --navbar-menu-item-font: 400 18px/21px var(--base-font);
     --navbar-menu-item-color: #282b39;
     --navbar-menu-item-color-hover: #0575ba;
-    --navbar-search-padding: 30px 0px;
+    --navbar-menu-item-padding: 16px 0;
+    --navbar-menu-item-background: transparent;
+    --navbar-menu-item-background-hover: transparent;
+
+    --navbar-menu-separator-opacity: 0.25;
+    --navbar-menu-separator-background: var(--navbar-menu-item-color);
+
+    --navbar-auth-font: 600 16px/20px var(--base-font);
+
     --navbar-logo-height: 50px;
 
-    // navbar (auth)
+    // Nav item line position
+    --navbar-menu-item-line-position-top: 0;
+    --navbar-menu-item-line-position-bottom: auto;
+
+    // wrapper
+    --wrapper-width: calc(1280px + 50px);
+    --wrapper-padding: 20px;
+
+    // Outline
+    --focus-outline: 2px solid #315efd;
+    --focus-outline-offset: 2px;
+    --focus-box-shadow: 0 0 0 3px white;
+
+    // navbar (auth) (default button)
     --tc-auth-menu: #fff;
     --tc-auth-btn: #0575ba;
     --btn-auth-bg: #fff;
     --btn-auth-border: #0575ba;
+    --auth-avater-bg: #305dfb;
+    --auth-avater-svg: #fff;
 
     // navbar (start modal primary)
     --tc-start-btn: #fff;
@@ -24,16 +74,31 @@ $primaryColorLight: #0c6dcb;
     --btn-start-btn: #0575ba;
     --btn-start-border: transparent;
 
-    // header attributes
+    // header background
     --bg-values: url("../img/splash-top-b.jpg") no-repeat 100% 0;
 
+    // Header banner
+    --header-banner-pane-banner-padding: 50px 0;
+    --header-banner-pane-banner-max-width: 650px;
+    --header-banner-pane-banner-background: transparent;
+    --header-banner-pane-banner-border-color: initial;
+    --header-banner-pane-banner-border-radius: initial;
+
     // base font
     --base-font: Helvetica, Arial, Verdana, "Sans Serif";
 
     // text color
     --tc: #595959;
+    --htc: var(--tc);
     --tc-var: #fff;
     --tc-link: inherit;
+    --tc-muted: #595959;
+
+    // heading font
+    --heading-font-family: var(--base-font);
+    --heading-font: 700 40px/60px var(--heading-font-family);
+    --heading-color: var(--tc);
+    --heading-pane-font: 700 22px/30px var(--heading-font-family);
 
     // base color
     --bc: #0c6dcb;
@@ -42,31 +107,91 @@ $primaryColorLight: #0c6dcb;
     --body-background: none;
 
     // footer color
+    --footer_padding: 0;
+    --footer_background: transparent;
     --footer_color: #4e4d40;
+    --footer_color_link: #004d93;
+
+    --footer_social_color: var(--footer_color);
+    --footer_social_background: transparent;
+    --footer_social_border_color: var(--footer_color);
+    --footer_social_border_radius: var(--border-radius);
 
-    // Displayed or not
+    --footer-copyright-color: var(--footer_color_link);
+    --footer-copyright-font: 400 14px/30px var(--base-font);
+    --footer-copyright-background: transparent;
+    --footer-copyright-border-color: var(--border-color);
+    --footer-copyright-padding: 40px;
+
+    // not displayed
     --footer_display: block;
 
     // product image
     --product-image-padding: 10px 0 0 10px;
 
-    // placeholder text color
+    // Markdown
+    --markdown-font: 400 16px/24px var(--base-font);
+
+    // Forms
+    --form-control-color: #222222;
+    --form-control-background: #ffffff;
+    --form-control-border-color: #646464;
+    --form-control-border-color-focus: #282b39;
+    --form-control-placeholder-font: 400 13px/20px var(--base-font);
     --form-control-placeholder-color: #515152;
+    --form-label-color: #595959;
+    --form-label-font: 700 11px/16px var(--base-font);
 
-    --border-color: #ebedf0;
+    // Search bar
+    --color-search-icon-medium: #{$primaryColor};
+    --color-search-icon-dark: #{darken($primaryColor, 10%)};
+    --color-search-icon-light: #{lighten($primaryColor, 25%)};
 
-    --border-radius: 0px;
-    --box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+    --search-bar-point-color: #ececec;
+    --search-bar-point-radius: 0px;
 
-    --color-primary: #{$primaryColor};
-    --color-primary-light: #{$primaryColorLight};
+    --search-bar-input-radius: var(--border-radius);
+    --search-bar-input-border: 1px solid var(--form-control-border-color);
+    --search-bar-input-background: #fff;
+    --search-bar-input-icon-color: #666666;
 
-    --color-default: #0c6dcb;
-    --color-default-light: 1px solid #626161;
+    --search-bar-label-top: -7px;
+    --search-bar-label-left: 16px;
+    --search-bar-label-padding: 4px;
+    --search-bar-label-background: #ffffff;
 
-    --color-search-icon-medium: #{$primaryColor};
-    --color-search-icon-dark: #{darken($primaryColor, 10%)};
-    --color-search-icon-light: #{lighten($primaryColor, 25%)};
+    // Dropdowns
+    --dropdown-item-font: 500 13px/20px var(--base-font);
+    --dropdown-item-color: #282b39;
+    --dropdown-item-background: #ffffff;
+    --dropdown-item-hover-color: #000000;
+    --dropdown-item-hover-background: #e5e5e5;
+
+    // Paginator
+    --paginator-border-radius: var(--border-radius);
+    --paginator-button-color: #282b39;
+    --paginator-button-border: #9e9e9e;
+    --paginator-button-background: #fff;
+    --paginator-button-hover-color: #fff;
+    --paginator-button-hover-background: #535561;
+    --paginator-button-active-color: #fff;
+    --paginator-button-active-background: #292b39;
+    --paginator-button-disabled-color: #535561;
+    --paginator-button-disabled-border: #e5e5e5;
+    --paginator-button-disabled-background: #f5f5f5;
+
+    // Labels
+    --label-default-color: #fff;
+    --label-default-background: #595959;
+
+    --label-primary-color: #fff;
+    --label-primary-background: #626161;
+
+    --label-danger-color: #030304;
+    --label-danger-background: #d38c87;
+
+    --label-success-color: #030304;
+    --label-success-background: #9bbfa1;
 
     // Label sets
     --label-set-border-radius: var(--border-radius);
@@ -81,6 +206,55 @@ $primaryColorLight: #0c6dcb;
     --label-set-focus-background: #f4f5f7;
     --label-set-focus-border-color: #9e9e9e;
 
+    // Buttons
+    --button-font: 700 16px/24px var(--base-font);
+    --button-color: #282b39;
+    --button-shadow: none;
+    --button-decoration: none;
+    --button-border-radius: calc(var(--border-radius) * 0.75);
+    --button-hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+    --button-hover-decoration: none;
+    --button-disabled-color: #616161;
+    --button-disabled-background: #e5e5e5;
+
+    --button-primary-color: #fff;
+    --button-primary-border: 1px solid var(--color-primary);
+    --button-primary-decoration: none;
+    --button-primary-background: var(--color-primary);
+    --button-primary-hover-color: #fff;
+    --button-primary-hover-border: 1px solid var(--color-primary-light);
+    --button-primary-hover-decoration: none;
+    --button-primary-hover-background: var(--color-primary-light);
+
+    --button-primary-outline-color: var(--color-primary);
+    --button-primary-outline-border: 1px solid var(--color-primary);
+    --button-primary-outline-decoration: none;
+    --button-primary-outline-background: transparent;
+    --button-primary-outline-hover-color: #fff;
+    --button-primary-outline-hover-border: 1px solid var(--color-primary);
+    --button-primary-outline-hover-decoration: none;
+    --button-primary-outline-hover-background: var(--color-primary);
+
+    --button-read_more-color: var(--button-primary-color);
+    --button-read_more-border: var(--button-primary-border);
+    --button-read_more-decoration: var(--button-primary-decoration);
+    --button-read_more-background: var(--button-primary-background);
+    --button-read_more-hover-color: var(--button-primary-hover-color);
+    --button-read_more-hover-border: var(--button-primary-hover-border);
+    --button-read_more-hover-decoration: var(--button-primary-hover-decoration);
+    --button-read_more-hover-background: var(--button-primary-hover-background);
+
+    // Sign up
+    --sign_up_accent_color: #282b39;
+    --sign_up_accent_color_light: #bdcbff;
+    --sign_up_link_color: #e60003;
+    --sign_up_step_btns_color: var(--tc);
+    --sign_up_digid_btn_bkg: #e1e7ff;
+    --sign_up_digid_btn_text: #4b71ff;
+    --sign_up_digid_btn_border: none;
+    --sign_up_digid_btn_border_radius: 5px;
+    --sign_up_loader_icon_color: #282b39;
+
     //- Showcase
     --showcase-aside-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.06);
     --showcase-aside-padding: 20px;
@@ -115,7 +289,12 @@ $primaryColorLight: #0c6dcb;
     --breadcrumb-color-active: #353535;
     --breadcrumb-padding: 20px;
 
+    // Loader
+    --loader-background: #f5f5f5;
+    --loader-color: var(--color-primary);
+
     // Profile
+    --profile-menu-item-gap: 16px;
     --profile-menu-item-color: #fff;
     --profile-menu-item-color-icon: #fff;
     --profile-menu-item-shadow: none;
@@ -128,25 +307,81 @@ $primaryColorLight: #0c6dcb;
     --profile-menu-item-hover-border-color: var(--color-primary);
     --profile-menu-item-hover-border-radius: var(--border-radius);
 
-    // Login button
-    --login-button-background: #fff;
-
     // Vouchers
     --vouchers-label-color: #4c91b3;
     --vouchers-value-color: var(--tc);
     --vouchers-organization-color: #4c91b3;
 
+    // Voucher card
+    --voucher-card-action-color: var(--color-primary);
+    --voucher-card-action-background: transparent;
+    --voucher-card-action-border-color: var(--color-primary);
+    --voucher-card-action-border-radius: 0px;
+    --voucher-card-action-hover-color: #fff;
+    --voucher-card-action-hover-background: var(--color-primary);
+    --voucher-card-action-hover-border-color: var(--color-primary);
+
     // Products
     --products-title-color: var(--color-primary);
     --products-title-hover-color: #626161;
     --products-text-color: var(--tc);
 
+    // Product
+    --product-title-font: 700 22px/28px var(--heading-font-family);
+    --product-title-color: var(--tc);
+
     // Faq
     --faq-width: 820px;
     --faq-align: center;
     --faq-header-color: #00122a;
     --faq-header-color-hover: #0c6dcb;
 
+    // Map
+    --map-title-color: #0B0E12;
+    --map-title-font: 700 40px var(--heading-font-family);
+
+    // Sections
+    --section-padding: 0 0 30px;
+    --section-background: transparent;
+
+    --section-title-font: 700 40px/60px var(--heading-font-family);
+    --section-title-align: center;
+
+    --section-cms-padding: var(--section-padding);
+    --section-cms-background: var(--section-background);
+    --section-map-padding: var(--section-padding);
+    --section-map-background: var(--section-background);
+    --section-faq-padding: var(--section-padding);
+    --section-faq-background: var(--section-background);
+    --section-footer-padding: 30px 0;
+    --section-footer-background: #fff;
+    --section-pre-check-padding: 0 0 30px;
+    --section-pre-check-background: var(--section-background);
+    --section-profile-padding: var(--section-padding);
+    --section-profile-background: var(--section-background);
+    --section-products-padding: var(--section-padding);
+    --section-products-background: var(--section-background);
+    --section-breadcrumbs-padding: 0;
+    --section-breadcrumbs-background: var(--section-background);
+    --section-voucher-details-padding: var(--section-padding);
+    --section-voucher-details-background: var(--section-background);
+
+    // Search bar
+    --search-result-sidebar-item-active-color: #a80a2d;
+    --search-result-sidebar-item-active-background: #fff;
+
+    // CMS funds
+    --cms-funds-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-title-color: var(--htc);
+    --cms-funds-label-font-size: 11px;
+    --cms-funds-label-background: var(--color-primary);
+
+    --cms-funds-compact-title-font: 400 24px/36px var(--base-font);
+    --cms-funds-compact-title-color: var(--htc);
+
+    --cms-funds-link-color: var(--color-primary);
+    --cms-funds-link-font: 600 18px/20px var(--base-font);
+
     // Section order
     --order-page-voucher-map: 1;
     --order-page-voucher-products: 2;
diff --git a/react/assets/forus-webshop/scss/webshop.scss b/react/assets/forus-webshop/scss/webshop.scss
index 6ce00fee8..ade4ef5a8 100644
--- a/react/assets/forus-webshop/scss/webshop.scss
+++ b/react/assets/forus-webshop/scss/webshop.scss
@@ -43,6 +43,7 @@
 @import 'includes/sections/section-footer';
 @import 'includes/sections/section-profile';
 @import 'includes/sections/section-products';
+@import 'includes/sections/section-pre-check';
 @import 'includes/sections/section-voucher-details';
 
 // BLOCKS
diff --git a/react/src/webshop/components/elements/sections/Section.tsx b/react/src/webshop/components/elements/sections/Section.tsx
index 0caadfabf..e0df642e5 100644
--- a/react/src/webshop/components/elements/sections/Section.tsx
+++ b/react/src/webshop/components/elements/sections/Section.tsx
@@ -19,6 +19,7 @@ export default function Section({
         | 'products'
         | 'product'
         | 'copyright'
+        | 'pre-check'
         | 'footer';
     wrapper?: boolean;
     children: ReactElement | ReactElement[];
@@ -35,6 +36,7 @@ export default function Section({
                 type === 'profile' && 'section-profile',
                 type === 'product' && 'section-product',
                 type === 'products' && 'section-products',
+                type === 'pre-check' && 'section-pre-check',
                 type === 'copyright' && 'section-copyright',
                 type === 'breadcrumbs' && 'section-breadcrumbs',
                 type === 'voucher_details' && 'section-voucher-details',
diff --git a/react/src/webshop/components/pages/auth/Start.tsx b/react/src/webshop/components/pages/auth/Start.tsx
index 8d045c7ca..5ed47c1dd 100644
--- a/react/src/webshop/components/pages/auth/Start.tsx
+++ b/react/src/webshop/components/pages/auth/Start.tsx
@@ -250,6 +250,7 @@ export default function Start() {
                         }}>
                         <input
                             type="checkbox"
+                            data-dusk={'privacyCheckbox'}
                             className={'sign_up-privacy-checkbox'}
                             checked={authForm.values.privacy}
                             onChange={(e) => {
diff --git a/react/src/webshop/components/pages/home/Home.tsx b/react/src/webshop/components/pages/home/Home.tsx
index a11908353..d896575b1 100644
--- a/react/src/webshop/components/pages/home/Home.tsx
+++ b/react/src/webshop/components/pages/home/Home.tsx
@@ -188,8 +188,8 @@ export default function Home() {
                 </div>
             )}
 
-            {appConfigs.pre_check_enabled && appConfigs.pre_check_banner_state == 'public' && (
-                <div className="wrapper">
+            <Section type={'pre-check'}>
+                {appConfigs.pre_check_enabled && appConfigs.pre_check_banner_state == 'public' && (
                     <div className="block block-pre-check-banner">
                         {appConfigs.pre_check_banner?.sizes?.large && (
                             <div className="pre-check-banner-media">
@@ -219,8 +219,8 @@ export default function Home() {
                             </div>
                         </div>
                     </div>
-                </div>
-            )}
+                )}
+            </Section>
 
             {appConfigs.pages.home && <CmsBlocks page={appConfigs.pages.home} />}
 
diff --git a/react/src/webshop/components/pages/me-app/MeApp.tsx b/react/src/webshop/components/pages/me-app/MeApp.tsx
index cb8e45bb9..848346724 100644
--- a/react/src/webshop/components/pages/me-app/MeApp.tsx
+++ b/react/src/webshop/components/pages/me-app/MeApp.tsx
@@ -5,6 +5,7 @@ import useAssetUrl from '../../../hooks/useAssetUrl';
 import BlockShowcase from '../../elements/block-showcase/BlockShowcase';
 import useTranslate from '../../../../dashboard/hooks/useTranslate';
 import TranslateHtml from '../../../../dashboard/components/elements/translate-html/TranslateHtml';
+import Section from '../../elements/sections/Section';
 
 export default function MeApp() {
     const envData = useEnvData();
@@ -17,40 +18,42 @@ export default function MeApp() {
                 { name: translate('me.breadcrumbs.home'), state: 'home' },
                 { name: translate('me.breadcrumbs.me') },
             ]}>
-            <div className="block block-about-me_app">
-                <div className="me_app-overview">
-                    <div className="block block-markdown">
-                        <h2>{translate('me.title')}</h2>
-                        <div className="block-description">
-                            <p>{translate('me.description')}</p>
+            <Section type={'default'}>
+                <div className="block block-about-me_app">
+                    <div className="me_app-overview">
+                        <div className="block block-markdown">
+                            <h2>{translate('me.title')}</h2>
+                            <div className="block-description">
+                                <p>{translate('me.description')}</p>
+                            </div>
+                            <br />
+                            <h2>{translate('me.download.title')}</h2>
+                            <div className="block-description">
+                                <TranslateHtml
+                                    component={<p />}
+                                    i18n={'me.download.description'}
+                                    values={{ download_link: envData.config.me_app_link }}
+                                />
+                            </div>
+                            <AppLinks className={'hide-sm'} type={'lg'} />
                         </div>
-                        <br />
-                        <h2>{translate('me.download.title')}</h2>
-                        <div className="block-description">
-                            <TranslateHtml
-                                component={<p />}
-                                i18n={'me.download.description'}
-                                values={{ download_link: envData.config.me_app_link }}
-                            />
-                        </div>
-                        <AppLinks className={'hide-sm'} type={'lg'} />
-                    </div>
-                </div>
-                <div className="me_app-download flex-center">
-                    <AppLinks />
-                </div>
-                <div className="me_app-images">
-                    <div className="me_app-image">
-                        <img src={assetUrl('/assets/img/me/app-1.jpg')} alt={translate('me.img_alt')} />
                     </div>
-                    <div className="me_app-image">
-                        <img src={assetUrl('/assets/img/me/app-2.jpg')} alt={translate('me.img_alt')} />
+                    <div className="me_app-download flex-center">
+                        <AppLinks />
                     </div>
-                    <div className="me_app-image">
-                        <img src={assetUrl('/assets/img/me/app-3.jpg')} alt={translate('me.img_alt')} />
+                    <div className="me_app-images">
+                        <div className="me_app-image">
+                            <img src={assetUrl('/assets/img/me/app-1.jpg')} alt={translate('me.img_alt')} />
+                        </div>
+                        <div className="me_app-image">
+                            <img src={assetUrl('/assets/img/me/app-2.jpg')} alt={translate('me.img_alt')} />
+                        </div>
+                        <div className="me_app-image">
+                            <img src={assetUrl('/assets/img/me/app-3.jpg')} alt={translate('me.img_alt')} />
+                        </div>
                     </div>
                 </div>
-            </div>
+            </Section>
         </BlockShowcase>
     );
 }
diff --git a/react/src/webshop/components/pages/sitemap/Sitemap.tsx b/react/src/webshop/components/pages/sitemap/Sitemap.tsx
index a38f82486..dcb3a142e 100644
--- a/react/src/webshop/components/pages/sitemap/Sitemap.tsx
+++ b/react/src/webshop/components/pages/sitemap/Sitemap.tsx
@@ -5,6 +5,7 @@ import useAppConfigs from '../../../hooks/useAppConfigs';
 import useEnvData from '../../../hooks/useEnvData';
 import useAuthIdentity from '../../../hooks/useAuthIdentity';
 import BlockShowcase from '../../elements/block-showcase/BlockShowcase';
+import Section from '../../elements/sections/Section';
 
 export default function Sitemap() {
     const envData = useEnvData();
@@ -19,102 +20,115 @@ export default function Sitemap() {
                 { name: translate('sitemap.breadcrumbs.home'), state: 'home' },
                 { name: translate('sitemap.breadcrumbs.sitemap') },
             ]}>
-            <div className="block block-sitemap">
-                <h1>{translate('sitemap.title')}</h1>
-                <ul>
-                    <li>
-                        <StateNavLink name="home">{translate('top_navbar.items.home')}</StateNavLink>
-                    </li>
-                    {envData.config.flags.fundsMenu && (authIdentity || envData.config.flags.fundsMenuIfLoggedOut) && (
+            <Section type={'default'}>
+                <div className="block block-sitemap">
+                    <h1>{translate('sitemap.title')}</h1>
+                    <ul>
                         <li>
-                            <StateNavLink name="funds">
-                                {translate(
-                                    `top_navbar.items.${envData.client_key}.funds`,
-                                    null,
-                                    'top_navbar.items.funds',
-                                )}
-                            </StateNavLink>
+                            <StateNavLink name="home">{translate('top_navbar.items.home')}</StateNavLink>
                         </li>
-                    )}
-                    {appConfigs?.has_budget_funds &&
-                        appConfigs?.products.list &&
-                        (envData.config.flags.productsMenu || authIdentity) && (
-                            <li>
-                                <StateNavLink name="products">{translate('top_navbar.items.products')}</StateNavLink>
-                            </li>
-                        )}
+                        {envData.config.flags.fundsMenu &&
+                            (authIdentity || envData.config.flags.fundsMenuIfLoggedOut) && (
+                                <li>
+                                    <StateNavLink name="funds">
+                                        {translate(
+                                            `top_navbar.items.${envData.client_key}.funds`,
+                                            null,
+                                            'top_navbar.items.funds',
+                                        )}
+                                    </StateNavLink>
+                                </li>
+                            )}
+                        {appConfigs?.has_budget_funds &&
+                            appConfigs?.products.list &&
+                            (envData.config.flags.productsMenu || authIdentity) && (
+                                <li>
+                                    <StateNavLink name="products">
+                                        {translate('top_navbar.items.products')}
+                                    </StateNavLink>
+                                </li>
+                            )}
+
+                        {appConfigs?.has_subsidy_funds &&
+                            appConfigs?.products.list &&
+                            (envData.config.flags.productsMenu || authIdentity) && (
+                                <li>
+                                    <StateNavLink name="actions">
+                                        {translate('top_navbar.items.subsidies')}
+                                    </StateNavLink>
+                                </li>
+                            )}
 
-                    {appConfigs?.has_subsidy_funds &&
-                        appConfigs?.products.list &&
-                        (envData.config.flags.productsMenu || authIdentity) && (
+                        {envData.config.flags.providersMenu && (
                             <li>
-                                <StateNavLink name="actions">{translate('top_navbar.items.subsidies')}</StateNavLink>
+                                <StateNavLink name="providers">{translate('top_navbar.items.providers')}</StateNavLink>
                             </li>
                         )}
 
-                    {envData.config.flags.providersMenu && (
                         <li>
-                            <StateNavLink name="providers">{translate('top_navbar.items.providers')}</StateNavLink>
+                            <StateNavLink
+                                name="explanation"
+                                target={appConfigs?.pages?.explanation?.external ? '_blank' : '_self'}>
+                                {translate('top_navbar.items.explanation')}
+                            </StateNavLink>
                         </li>
-                    )}
-
-                    <li>
-                        <StateNavLink
-                            name="explanation"
-                            target={appConfigs?.pages?.explanation?.external ? '_blank' : '_self'}>
-                            {translate('top_navbar.items.explanation')}
-                        </StateNavLink>
-                    </li>
-                    <li>
-                        <StateNavLink name="me-app">{translate('profile_menu.buttons.me_app')}</StateNavLink>
-                    </li>
-                    <li>
-                        <StateNavLink name="sign-up">{translate('profile_menu.buttons.provider_sign_up')}</StateNavLink>
-                    </li>
-                </ul>
-                {authIdentity && (
-                    <ul>
                         <li>
-                            <StateNavLink name="vouchers">{translate('profile_menu.buttons.vouchers')}</StateNavLink>
+                            <StateNavLink name="me-app">{translate('profile_menu.buttons.me_app')}</StateNavLink>
                         </li>
-
                         <li>
-                            <StateNavLink name="reservations">
-                                {translate('profile_menu.buttons.reservations')}
+                            <StateNavLink name="sign-up">
+                                {translate('profile_menu.buttons.provider_sign_up')}
                             </StateNavLink>
                         </li>
+                    </ul>
+                    {authIdentity && (
+                        <ul>
+                            <li>
+                                <StateNavLink name="vouchers">
+                                    {translate('profile_menu.buttons.vouchers')}
+                                </StateNavLink>
+                            </li>
 
-                        {appConfigs?.records.list && (
                             <li>
-                                <StateNavLink name="records">{translate('profile_menu.buttons.records')}</StateNavLink>
+                                <StateNavLink name="reservations">
+                                    {translate('profile_menu.buttons.reservations')}
+                                </StateNavLink>
                             </li>
-                        )}
 
-                        <li>
-                            <StateNavLink name="notifications">
-                                {translate('profile_menu.buttons.notifications')}
-                            </StateNavLink>
-                        </li>
-                        <li>
-                            <StateNavLink name="preferences-notifications">
-                                {translate('profile_menu.buttons.notification_preferences')}
-                            </StateNavLink>
-                        </li>
-                        {envData.config.sessions && (
+                            {appConfigs?.records.list && (
+                                <li>
+                                    <StateNavLink name="records">
+                                        {translate('profile_menu.buttons.records')}
+                                    </StateNavLink>
+                                </li>
+                            )}
+
                             <li>
-                                <StateNavLink name="security-sessions">
-                                    {translate('profile_menu.buttons.sessions')}
+                                <StateNavLink name="notifications">
+                                    {translate('profile_menu.buttons.notifications')}
                                 </StateNavLink>
                             </li>
-                        )}
-                        <li>
-                            <StateNavLink name="identity-emails">
-                                {translate('profile_menu.buttons.email_settings')}
-                            </StateNavLink>
-                        </li>
-                    </ul>
-                )}
-            </div>
+                            <li>
+                                <StateNavLink name="preferences-notifications">
+                                    {translate('profile_menu.buttons.notification_preferences')}
+                                </StateNavLink>
+                            </li>
+                            {envData.config.sessions && (
+                                <li>
+                                    <StateNavLink name="security-sessions">
+                                        {translate('profile_menu.buttons.sessions')}
+                                    </StateNavLink>
+                                </li>
+                            )}
+                            <li>
+                                <StateNavLink name="identity-emails">
+                                    {translate('profile_menu.buttons.email_settings')}
+                                </StateNavLink>
+                            </li>
+                        </ul>
+                    )}
+                </div>
+            </Section>
         </BlockShowcase>
     );
 }

From c22cd2848998687992af8cf37fbbc616b770483f Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Mon, 14 Apr 2025 20:43:43 +0300
Subject: [PATCH 07/23] css cleanup feedback

---
 .../scss/includes/blocks/block-empty.scss     | 15 +++----
 .../blocks/block-organization-info.scss       | 22 +++-------
 .../scss/includes/blocks/block-profile.scss   |  1 +
 .../scss/includes/blocks/block-showcase.scss  |  3 +-
 .../scss/includes/blocks/map.scss             |  1 -
 .../scss/includes/layout/_footer.scss         | 44 ++++++++++++-------
 .../includes/sections/section-footer.scss     |  2 +-
 .../scss/style-webshop-berg_en_dal-vars.scss  |  2 +-
 .../scss/style-webshop-berkelland-vars.scss   |  2 +-
 .../scss/style-webshop-ede-vars.scss          |  2 +-
 .../scss/style-webshop-eemsdelta-vars.scss    |  2 +-
 .../scss/style-webshop-general-vars.scss      |  2 +-
 .../style-webshop-goereeoverflakkee-vars.scss |  2 +-
 .../scss/style-webshop-groningen-vars.scss    |  2 +-
 ...style-webshop-hartvanwestbrabant-vars.scss |  2 +-
 .../scss/style-webshop-heumen-vars.scss       |  2 +-
 .../scss/style-webshop-kerstpakket-vars.scss  |  2 +-
 .../style-webshop-midden_drenthe-vars.scss    |  2 +-
 .../style-webshop-noordoostpolder-vars.scss   |  2 +-
 .../scss/style-webshop-oostgelre-vars.scss    |  2 +-
 .../scss/style-webshop-potjeswijzer-vars.scss |  2 +-
 .../scss/style-webshop-schagen-vars.scss      |  2 +-
 .../scss/style-webshop-vergoedingen-vars.scss |  2 +-
 .../scss/style-webshop-waalwijk-vars.scss     |  2 +-
 .../scss/style-webshop-wadenheuvel-vars.scss  |  2 +-
 .../scss/style-webshop-winterswijk-vars.scss  |  2 +-
 .../webshop/layout/elements/LayoutFooter.tsx  | 26 ++++++-----
 27 files changed, 79 insertions(+), 73 deletions(-)

diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-empty.scss b/react/assets/forus-webshop/scss/includes/blocks/block-empty.scss
index 75686f009..72aba81ad 100644
--- a/react/assets/forus-webshop/scss/includes/blocks/block-empty.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-empty.scss
@@ -4,7 +4,7 @@
     border-radius: var(--border-radius);
     box-shadow: 0 5px 30px rgba(0, 0, 0, 0.05);
     padding: 30px 30px;
-    margin: 0 0 30px;
+    margin: 0 0;
     text-align: center;
 
     .block-icon {
@@ -34,13 +34,13 @@
     .block-title {
         font: 700 22px/28px var(--base-font);
         color: #282b39;
-        margin: 0px 0px 10px;
+        margin: 0 0 15px;
     }
 
     .block-description {
         font: 700 14px/20px var(--base-font);
         color: #646f79;
-        margin: 0px 0px 35px;
+        margin: 0 0 35px;
 
         &:last-child {
             margin-bottom: 0;
@@ -57,9 +57,8 @@
             font-size: 1.3em;
             float: right;
             margin-left: 5px;
-            transition: color .4s;
+            transition: color 0.4s;
             line-height: 22px;
-            float: right;
         }
 
         &:hover {
@@ -70,10 +69,8 @@
     }
 
     @media screen and (max-width: 1700px) {
-        &.block-empty {
-            .block-title {
-                font: 700 20px/26px var(--base-font);
-            }
+        .block-title {
+            font: 700 18px/26px var(--base-font);
         }
     }
 }
diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-organization-info.scss b/react/assets/forus-webshop/scss/includes/blocks/block-organization-info.scss
index 4b187944b..6d1eb58d2 100644
--- a/react/assets/forus-webshop/scss/includes/blocks/block-organization-info.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-organization-info.scss
@@ -3,22 +3,12 @@
     width: 100%;
     padding: 20px 0 20px 0;
     margin: 60px 0;
-    border-bottom: 1px solid #E5E5E5;
+    border-bottom: 1px solid #e5e5e5;
 
     .info-block-panel {
         width: 100%;
         margin: 0 0 60px 0;
 
-        a {
-            font: 600 18px/18px var(--base-font);
-            color: #950022;
-
-            &:hover {
-                text-decoration: none;
-            }
-        }
-
-
         .block-title {
             font: 400 32px/48px 'Oranda';
         }
@@ -48,7 +38,7 @@
 
                 a {
                     font-size: 18px;
-                    color: #176B55;
+                    color: #176b55;
 
                     &:hover {
                         text-decoration: underline;
@@ -57,15 +47,15 @@
                 }
 
                 &::marker {
-                    color: #E5E5E5;
+                    color: #e5e5e5;
                 }
             }
         }
 
         a {
             text-decoration: underline;
-            font: 600 16px/1.5em var(--base-font);
-            color: #03689b;
+            font: 600 18px/18px var(--base-font);
+            color: #950022;
 
             &:hover {
                 text-decoration: none;
@@ -81,4 +71,4 @@
             width: 50%;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-profile.scss b/react/assets/forus-webshop/scss/includes/blocks/block-profile.scss
index 88ef98933..a8927495c 100644
--- a/react/assets/forus-webshop/scss/includes/blocks/block-profile.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-profile.scss
@@ -22,6 +22,7 @@
             display: flex;
             flex-direction: column;
             gap: var(--profile-menu-item-gap);
+            margin: 0 0 30px;
 
             .profile-menu-item {
                 padding: 14px 19px;
diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-showcase.scss b/react/assets/forus-webshop/scss/includes/blocks/block-showcase.scss
index aafeb6e41..0d0ab5d55 100644
--- a/react/assets/forus-webshop/scss/includes/blocks/block-showcase.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-showcase.scss
@@ -2,7 +2,7 @@
     --aside-width: 330px;
     position: relative;
     cursor: default;
-    margin: 0 0 30px;
+    margin: 0 0;
 
     .showcase-title {
         font: 700 22px/36px var(--base-font);
@@ -508,6 +508,7 @@
 
         .showcase-wrapper {
             position: relative;
+            min-height: auto;
         }
 
         .showcase-mobile-filters {
diff --git a/react/assets/forus-webshop/scss/includes/blocks/map.scss b/react/assets/forus-webshop/scss/includes/blocks/map.scss
index b11b88a8d..f7c1950bb 100644
--- a/react/assets/forus-webshop/scss/includes/blocks/map.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/map.scss
@@ -52,7 +52,6 @@
 
     @media screen and (max-width: 1000px) {
         background-size: contain;
-        margin: 0 0 30px;
         background: none;
 
         .block-content {
diff --git a/react/assets/forus-webshop/scss/includes/layout/_footer.scss b/react/assets/forus-webshop/scss/includes/layout/_footer.scss
index e02815931..cddf1aebb 100644
--- a/react/assets/forus-webshop/scss/includes/layout/_footer.scss
+++ b/react/assets/forus-webshop/scss/includes/layout/_footer.scss
@@ -8,7 +8,6 @@
 
     .wrapper {
         height: 30px;
-        @include cf();
     }
 
     .copyrights {
@@ -149,7 +148,7 @@
         }
 
         h3 {
-            margin: 0.9em 0 0.9em 0;
+            margin: 0 0 0.7em;
         }
 
         a {
@@ -195,6 +194,14 @@
         }
     }
 
+    .footer-col {
+        margin: 0 0 0;
+
+        &.footer-col-margin {
+            margin: 0 0 20px;
+        }
+    }
+
     .footer-nav {
         .footer-nav-item {
             display: block;
@@ -232,6 +239,16 @@
         }
     }
 
+    @media screen and (max-width: 1700px) {
+        .footer-nav {
+            .footer-nav-item {
+                a {
+                    font: 400 16px/24px var(--base-font);
+                }
+            }
+        }
+    }
+
     @media screen and (max-width: 1000px) {
         .block-markdown {
             text-align: center;
@@ -241,6 +258,15 @@
             }
         }
 
+        .footer-col {
+            margin: 0 0 25px;
+
+            &:last-child,
+            &.footer-col-last {
+                margin: 0 0 0;
+            }
+        }
+
         .footer-sponsor-logo,
         .footer-social-media-icons {
             justify-content: center;
@@ -249,20 +275,6 @@
         .footer-social-media-title {
             text-align: center;
         }
-    }
-
-    @media screen and (max-width: 1700px) {
-        .footer-nav {
-            .footer-nav-item {
-                a {
-                    font: 400 16px/24px var(--base-font);
-                }
-            }
-        }
-    }
-
-    @media screen and (max-width: 1000px) {
-        margin: 0 0 30px;
 
         .footer-logo {
             margin: 0 auto 40px;
diff --git a/react/assets/forus-webshop/scss/includes/sections/section-footer.scss b/react/assets/forus-webshop/scss/includes/sections/section-footer.scss
index 904eb6b3f..340c0f767 100644
--- a/react/assets/forus-webshop/scss/includes/sections/section-footer.scss
+++ b/react/assets/forus-webshop/scss/includes/sections/section-footer.scss
@@ -5,6 +5,6 @@
     background: var(--section-footer-background);
 
     @media screen and (max-width: 1000px) {
-        padding: 0;
+        padding: 30px 0;
     }
 }
diff --git a/react/assets/forus-webshop/scss/style-webshop-berg_en_dal-vars.scss b/react/assets/forus-webshop/scss/style-webshop-berg_en_dal-vars.scss
index c176a0c8f..f14fc89e8 100644
--- a/react/assets/forus-webshop/scss/style-webshop-berg_en_dal-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-berg_en_dal-vars.scss
@@ -354,7 +354,7 @@ $primaryColorLight: #1B8761;
     --section-map-background: var(--section-background);
     --section-faq-padding: var(--section-padding);
     --section-faq-background: var(--section-background);
-    --section-footer-padding: 30px 0;
+    --section-footer-padding: 35px 0;
     --section-footer-background: #15694B;
     --section-pre-check-padding: 0 0 30px;
     --section-pre-check-background: var(--section-background);
diff --git a/react/assets/forus-webshop/scss/style-webshop-berkelland-vars.scss b/react/assets/forus-webshop/scss/style-webshop-berkelland-vars.scss
index 179512c07..0b480cab5 100644
--- a/react/assets/forus-webshop/scss/style-webshop-berkelland-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-berkelland-vars.scss
@@ -354,7 +354,7 @@ $primaryColorLight: #004d93;
     --section-map-background: var(--section-background);
     --section-faq-padding: var(--section-padding);
     --section-faq-background: var(--section-background);
-    --section-footer-padding: 30px 0;
+    --section-footer-padding: 35px 0;
     --section-footer-background: #fff;
     --section-pre-check-padding: 0 0 30px;
     --section-pre-check-background: var(--section-background);
diff --git a/react/assets/forus-webshop/scss/style-webshop-ede-vars.scss b/react/assets/forus-webshop/scss/style-webshop-ede-vars.scss
index 758309617..53ea35211 100644
--- a/react/assets/forus-webshop/scss/style-webshop-ede-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-ede-vars.scss
@@ -354,7 +354,7 @@ $primaryColorLight: #3558a2;
     --section-map-background: var(--section-background);
     --section-faq-padding: var(--section-padding);
     --section-faq-background: var(--section-background);
-    --section-footer-padding: 30px 0;
+    --section-footer-padding: 35px 0;
     --section-footer-background: #404040;
     --section-pre-check-padding: 0 0 30px;
     --section-pre-check-background: var(--section-background);
diff --git a/react/assets/forus-webshop/scss/style-webshop-eemsdelta-vars.scss b/react/assets/forus-webshop/scss/style-webshop-eemsdelta-vars.scss
index d0481db6f..63793c0ec 100644
--- a/react/assets/forus-webshop/scss/style-webshop-eemsdelta-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-eemsdelta-vars.scss
@@ -354,7 +354,7 @@ $primaryColorLight: #0d4379;
     --section-map-background: var(--section-background);
     --section-faq-padding: var(--section-padding);
     --section-faq-background: var(--section-background);
-    --section-footer-padding: 30px 0;
+    --section-footer-padding: 35px 0;
     --section-footer-background: #0d4379;
     --section-pre-check-padding: 0 0 30px;
     --section-pre-check-background: var(--section-background);
diff --git a/react/assets/forus-webshop/scss/style-webshop-general-vars.scss b/react/assets/forus-webshop/scss/style-webshop-general-vars.scss
index da9612826..5e236d02e 100644
--- a/react/assets/forus-webshop/scss/style-webshop-general-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-general-vars.scss
@@ -353,7 +353,7 @@ $primaryColorLight: #305dfb;
     --section-map-background: var(--section-background);
     --section-faq-padding: var(--section-padding);
     --section-faq-background: var(--section-background);
-    --section-footer-padding: 30px 0;
+    --section-footer-padding: 35px 0;
     --section-footer-background: #fff;
     --section-pre-check-padding: 0 0 30px;
     --section-pre-check-background: var(--section-background);
diff --git a/react/assets/forus-webshop/scss/style-webshop-goereeoverflakkee-vars.scss b/react/assets/forus-webshop/scss/style-webshop-goereeoverflakkee-vars.scss
index 90c4a5796..e89c55aef 100644
--- a/react/assets/forus-webshop/scss/style-webshop-goereeoverflakkee-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-goereeoverflakkee-vars.scss
@@ -354,7 +354,7 @@ $primaryColorLight: #627c18;
     --section-map-background: var(--section-background);
     --section-faq-padding: var(--section-padding);
     --section-faq-background: var(--section-background);
-    --section-footer-padding: 30px 0;
+    --section-footer-padding: 35px 0;
     --section-footer-background: #08749b;
     --section-pre-check-padding: 0 0 30px;
     --section-pre-check-background: var(--section-background);
diff --git a/react/assets/forus-webshop/scss/style-webshop-groningen-vars.scss b/react/assets/forus-webshop/scss/style-webshop-groningen-vars.scss
index a2e8a7fd7..13a29eaf3 100644
--- a/react/assets/forus-webshop/scss/style-webshop-groningen-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-groningen-vars.scss
@@ -353,7 +353,7 @@ $primaryColorLight: #e60204;
     --section-map-background: var(--section-background);
     --section-faq-padding: var(--section-padding);
     --section-faq-background: var(--section-background);
-    --section-footer-padding: 30px 0;
+    --section-footer-padding: 35px 0;
     --section-footer-background: #e60004;
     --section-pre-check-padding: 0 0 30px;
     --section-pre-check-background: var(--section-background);
diff --git a/react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant-vars.scss b/react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant-vars.scss
index beadf9ad4..cd3f8e7bf 100644
--- a/react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant-vars.scss
@@ -354,7 +354,7 @@ $primaryColorLight: #24a1a1;
     --section-map-background: var(--section-background);
     --section-faq-padding: var(--section-padding);
     --section-faq-background: var(--section-background);
-    --section-footer-padding: 30px 0;
+    --section-footer-padding: 35px 0;
     --section-footer-background: #24a1a1;
     --section-pre-check-padding: 0 0 30px;
     --section-pre-check-background: var(--section-background);
diff --git a/react/assets/forus-webshop/scss/style-webshop-heumen-vars.scss b/react/assets/forus-webshop/scss/style-webshop-heumen-vars.scss
index 92732ae44..c8a227236 100644
--- a/react/assets/forus-webshop/scss/style-webshop-heumen-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-heumen-vars.scss
@@ -354,7 +354,7 @@ $primaryColorLight: #22398e;
     --section-map-background: var(--section-background);
     --section-faq-padding: var(--section-padding);
     --section-faq-background: var(--section-background);
-    --section-footer-padding: 30px 0;
+    --section-footer-padding: 35px 0;
     --section-footer-background: #22398e;
     --section-pre-check-padding: 0 0 30px;
     --section-pre-check-background: var(--section-background);
diff --git a/react/assets/forus-webshop/scss/style-webshop-kerstpakket-vars.scss b/react/assets/forus-webshop/scss/style-webshop-kerstpakket-vars.scss
index 56844bbf7..e4e2b0c2f 100644
--- a/react/assets/forus-webshop/scss/style-webshop-kerstpakket-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-kerstpakket-vars.scss
@@ -354,7 +354,7 @@ $primaryColorLight: #9f3031;
     --section-map-background: var(--section-background);
     --section-faq-padding: var(--section-padding);
     --section-faq-background: var(--section-background);
-    --section-footer-padding: 30px 0;
+    --section-footer-padding: 35px 0;
     --section-footer-background: #fff;
     --section-pre-check-padding: 0 0 30px;
     --section-pre-check-background: var(--section-background);
diff --git a/react/assets/forus-webshop/scss/style-webshop-midden_drenthe-vars.scss b/react/assets/forus-webshop/scss/style-webshop-midden_drenthe-vars.scss
index e0c568521..aa8d3a90a 100644
--- a/react/assets/forus-webshop/scss/style-webshop-midden_drenthe-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-midden_drenthe-vars.scss
@@ -354,7 +354,7 @@ $primaryColorLight: #b31869;
     --section-map-background: var(--section-background);
     --section-faq-padding: var(--section-padding);
     --section-faq-background: var(--section-background);
-    --section-footer-padding: 30px 0;
+    --section-footer-padding: 35px 0;
     --section-footer-background: #eff2f5;
     --section-pre-check-padding: 0 0 30px;
     --section-pre-check-background: var(--section-background);
diff --git a/react/assets/forus-webshop/scss/style-webshop-noordoostpolder-vars.scss b/react/assets/forus-webshop/scss/style-webshop-noordoostpolder-vars.scss
index d1e6f5968..d15644fa0 100644
--- a/react/assets/forus-webshop/scss/style-webshop-noordoostpolder-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-noordoostpolder-vars.scss
@@ -353,7 +353,7 @@ $primaryColorLight: #fd5392;
     --section-map-background: var(--section-background);
     --section-faq-padding: var(--section-padding);
     --section-faq-background: var(--section-background);
-    --section-footer-padding: 30px 0;
+    --section-footer-padding: 35px 0;
     --section-footer-background: #fff;
     --section-pre-check-padding: 0 0 30px;
     --section-pre-check-background: var(--section-background);
diff --git a/react/assets/forus-webshop/scss/style-webshop-oostgelre-vars.scss b/react/assets/forus-webshop/scss/style-webshop-oostgelre-vars.scss
index 9e5c59470..0b45fe328 100644
--- a/react/assets/forus-webshop/scss/style-webshop-oostgelre-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-oostgelre-vars.scss
@@ -354,7 +354,7 @@ $primaryColorLight: #660066;
     --section-map-background: var(--section-background);
     --section-faq-padding: var(--section-padding);
     --section-faq-background: var(--section-background);
-    --section-footer-padding: 30px 0;
+    --section-footer-padding: 35px 0;
     --section-footer-background: #fff;
     --section-pre-check-padding: 0 0 30px;
     --section-pre-check-background: var(--section-background);
diff --git a/react/assets/forus-webshop/scss/style-webshop-potjeswijzer-vars.scss b/react/assets/forus-webshop/scss/style-webshop-potjeswijzer-vars.scss
index 98dcc484a..821b6576e 100644
--- a/react/assets/forus-webshop/scss/style-webshop-potjeswijzer-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-potjeswijzer-vars.scss
@@ -353,7 +353,7 @@ $primaryColorLight: #b9cb18;
     --section-map-background: var(--section-background);
     --section-faq-padding: var(--section-padding);
     --section-faq-background: var(--section-background);
-    --section-footer-padding: 30px 0;
+    --section-footer-padding: 35px 0;
     --section-footer-background: #4990b5;
     --section-pre-check-padding: 0 0 30px;
     --section-pre-check-background: var(--section-background);
diff --git a/react/assets/forus-webshop/scss/style-webshop-schagen-vars.scss b/react/assets/forus-webshop/scss/style-webshop-schagen-vars.scss
index 9cbd277e7..e8d51c055 100644
--- a/react/assets/forus-webshop/scss/style-webshop-schagen-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-schagen-vars.scss
@@ -358,7 +358,7 @@ $primaryColorLight: #1c8fd7;
     --section-map-background: var(--section-background);
     --section-faq-padding: var(--section-padding);
     --section-faq-background: var(--section-background);
-    --section-footer-padding: 30px 0;
+    --section-footer-padding: 35px 0;
     --section-footer-background: #306fb3;
     --section-pre-check-padding: 0 0 30px;
     --section-pre-check-background: var(--section-background);
diff --git a/react/assets/forus-webshop/scss/style-webshop-vergoedingen-vars.scss b/react/assets/forus-webshop/scss/style-webshop-vergoedingen-vars.scss
index 569034195..456e447ee 100644
--- a/react/assets/forus-webshop/scss/style-webshop-vergoedingen-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-vergoedingen-vars.scss
@@ -455,7 +455,7 @@ $primaryColorLight: #2f7f6b;
     --section-map-background: var(--section-background);
     --section-faq-padding: var(--section-padding);
     --section-faq-background: var(--section-background);
-    --section-footer-padding: 30px 0;
+    --section-footer-padding: 35px 0;
     --section-footer-background: #3a3a3a;
     --section-pre-check-padding: 0 0 30px;
     --section-pre-check-background: var(--section-background);
diff --git a/react/assets/forus-webshop/scss/style-webshop-waalwijk-vars.scss b/react/assets/forus-webshop/scss/style-webshop-waalwijk-vars.scss
index c376b464c..356246dc1 100644
--- a/react/assets/forus-webshop/scss/style-webshop-waalwijk-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-waalwijk-vars.scss
@@ -353,7 +353,7 @@ $primaryColorLight: #2a2a7f;
     --section-map-background: var(--section-background);
     --section-faq-padding: var(--section-padding);
     --section-faq-background: var(--section-background);
-    --section-footer-padding: 30px 0;
+    --section-footer-padding: 35px 0;
     --section-footer-background: #2f2d80;
     --section-pre-check-padding: 0 0 30px;
     --section-pre-check-background: var(--section-background);
diff --git a/react/assets/forus-webshop/scss/style-webshop-wadenheuvel-vars.scss b/react/assets/forus-webshop/scss/style-webshop-wadenheuvel-vars.scss
index ae3ce456a..e59a3c8d3 100644
--- a/react/assets/forus-webshop/scss/style-webshop-wadenheuvel-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-wadenheuvel-vars.scss
@@ -353,7 +353,7 @@ $primaryColorLight: #2a2a7f;
     --section-map-background: var(--section-background);
     --section-faq-padding: var(--section-padding);
     --section-faq-background: var(--section-background);
-    --section-footer-padding: 30px 0;
+    --section-footer-padding: 35px 0;
     --section-footer-background: #fff;
     --section-pre-check-padding: 0 0 30px;
     --section-pre-check-background: var(--section-background);
diff --git a/react/assets/forus-webshop/scss/style-webshop-winterswijk-vars.scss b/react/assets/forus-webshop/scss/style-webshop-winterswijk-vars.scss
index fbacf0239..553969ec3 100644
--- a/react/assets/forus-webshop/scss/style-webshop-winterswijk-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-winterswijk-vars.scss
@@ -353,7 +353,7 @@ $primaryColorLight: #0c6dcb;
     --section-map-background: var(--section-background);
     --section-faq-padding: var(--section-padding);
     --section-faq-background: var(--section-background);
-    --section-footer-padding: 30px 0;
+    --section-footer-padding: 35px 0;
     --section-footer-background: #fff;
     --section-pre-check-padding: 0 0 30px;
     --section-pre-check-background: var(--section-background);
diff --git a/react/src/webshop/layout/elements/LayoutFooter.tsx b/react/src/webshop/layout/elements/LayoutFooter.tsx
index 1aa361832..5b8dc00a6 100644
--- a/react/src/webshop/layout/elements/LayoutFooter.tsx
+++ b/react/src/webshop/layout/elements/LayoutFooter.tsx
@@ -9,6 +9,7 @@ import useAssetUrl from '../../hooks/useAssetUrl';
 import AppLinks from '../../components/elements/app-links/AppLinks';
 import Icon from '../../../../assets/forus-webshop/resources/_webshop-common/assets/img/me-logo.svg';
 import Section from '../../components/elements/sections/Section';
+import classNames from 'classnames';
 
 export default function LayoutFooter() {
     const translate = useTranslate();
@@ -36,7 +37,7 @@ export default function LayoutFooter() {
                 <div className="block block-footer">
                     <div className="row">
                         <h2 className="sr-only">{translate('app_footer.columns.site_info')}</h2>
-                        <div className="col col-md-4">
+                        <div className="col col-md-4 footer-col">
                             {appConfigs?.pages?.footer_contact_details?.description_html && (
                                 <Markdown content={appConfigs?.pages?.footer_contact_details?.description_html || ''} />
                             )}
@@ -63,15 +64,20 @@ export default function LayoutFooter() {
                         </div>
 
                         {appConfigs?.pages?.footer_opening_times?.description_html && (
-                            <div className="col col-md-4">
+                            <div className="col col-md-4 footer-col">
                                 <Markdown content={appConfigs?.pages?.footer_opening_times?.description_html || ''} />
                             </div>
                         )}
 
                         <div
-                            className={`col ${
-                                appConfigs?.pages?.footer_opening_times?.description_html ? 'col-md-3' : 'col-md-4'
-                            }`}>
+                            className={classNames(
+                                'col',
+                                appConfigs?.pages?.footer_opening_times?.description_html ? 'col-md-3' : 'col-md-4',
+                                'footer-col',
+                                appConfigs?.pages?.footer_opening_times?.description_html &&
+                                    appConfigs.pages.provider &&
+                                    'footer-col-margin',
+                            )}>
                             {appConfigs.pages.provider && (
                                 <div className="block block-markdown">
                                     <h3>{translate('app_footer.columns.links')}</h3>
@@ -86,7 +92,7 @@ export default function LayoutFooter() {
                             )}
                         </div>
 
-                        <div className="col col-md-3">
+                        <div className="col col-md-3 footer-col footer-col-last">
                             <div
                                 className={`flex flex-vertical ${
                                     appConfigs?.pages?.footer_app_info?.description_position == 'after'
@@ -121,15 +127,15 @@ export default function LayoutFooter() {
                                                 </nav>
                                             </div>
                                         )}
-                                        <div className="footer-sponsor-logo">
-                                            {envData.config.flags.showFooterSponsorLogo && (
+                                        {envData.config.flags.showFooterSponsorLogo && (
+                                            <div className="footer-sponsor-logo">
                                                 <img
                                                     className="footer-sponsor-logo-img"
                                                     alt={translate('app_footer.sponsor_logo_alt')}
                                                     src={assetUrl('/assets/img/logo-footer.png')}
                                                 />
-                                            )}
-                                        </div>
+                                            </div>
+                                        )}
                                     </div>
                                 )}
                             </div>

From 066af11b4526f409cb3ccebe419707c3411df5b3 Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Tue, 15 Apr 2025 15:48:15 +0300
Subject: [PATCH 08/23] fix faq-block width on mobile

---
 .../forus-webshop/scss/includes/blocks/block-cms-funds.scss    | 3 ++-
 react/assets/forus-webshop/scss/includes/blocks/block-faq.scss | 3 ++-
 .../forus-webshop/scss/style-webshop-berg_en_dal-vars.scss     | 2 +-
 .../forus-webshop/scss/style-webshop-berkelland-vars.scss      | 2 +-
 react/assets/forus-webshop/scss/style-webshop-ede-vars.scss    | 2 +-
 .../forus-webshop/scss/style-webshop-eemsdelta-vars.scss       | 2 +-
 .../forus-webshop/scss/style-webshop-geertruidenberg-vars.scss | 2 +-
 .../assets/forus-webshop/scss/style-webshop-general-vars.scss  | 2 +-
 .../scss/style-webshop-goereeoverflakkee-vars.scss             | 2 +-
 .../forus-webshop/scss/style-webshop-groningen-vars.scss       | 2 +-
 .../scss/style-webshop-hartvanwestbrabant-vars.scss            | 2 +-
 react/assets/forus-webshop/scss/style-webshop-heumen-vars.scss | 2 +-
 .../forus-webshop/scss/style-webshop-kerstpakket-vars.scss     | 2 +-
 .../forus-webshop/scss/style-webshop-midden_drenthe-vars.scss  | 2 +-
 .../forus-webshop/scss/style-webshop-noordoostpolder-vars.scss | 2 +-
 .../forus-webshop/scss/style-webshop-oostgelre-vars.scss       | 2 +-
 .../forus-webshop/scss/style-webshop-potjeswijzer-vars.scss    | 2 +-
 .../assets/forus-webshop/scss/style-webshop-schagen-vars.scss  | 2 +-
 .../forus-webshop/scss/style-webshop-vergoedingen-vars.scss    | 2 +-
 .../assets/forus-webshop/scss/style-webshop-waalwijk-vars.scss | 2 +-
 .../forus-webshop/scss/style-webshop-wadenheuvel-vars.scss     | 2 +-
 .../forus-webshop/scss/style-webshop-winterswijk-vars.scss     | 2 +-
 22 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-cms-funds.scss b/react/assets/forus-webshop/scss/includes/blocks/block-cms-funds.scss
index 415b0699f..0b26c9737 100644
--- a/react/assets/forus-webshop/scss/includes/blocks/block-cms-funds.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-cms-funds.scss
@@ -188,9 +188,10 @@
     }
 
     @media screen and (max-width: 1000px) {
+        gap: 30px;
+
         .fund-item {
             padding: 0 0 30px;
-            margin: 0 0 30px;
             flex-direction: column;
 
             .fund-media {
diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-faq.scss b/react/assets/forus-webshop/scss/includes/blocks/block-faq.scss
index bb408c404..c1be762bb 100644
--- a/react/assets/forus-webshop/scss/includes/blocks/block-faq.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-faq.scss
@@ -12,6 +12,7 @@
         position: relative;
         box-shadow: 5px 5px 25px rgba(0, 0, 0, 0.1);
         transition: 0.4s;
+        max-width: 100%;
         width: var(--faq-width);
 
         .faq-item-header {
@@ -155,12 +156,12 @@
     }
 
     @media screen and (max-width: 1000px) {
-        padding: 0;
         max-width: 100%;
         width: 600px;
 
         .faq-item {
             .faq-item-header {
+                padding: 15px 45px 15px 20px;
                 font: 500 14px var(--base-font);
             }
 
diff --git a/react/assets/forus-webshop/scss/style-webshop-berg_en_dal-vars.scss b/react/assets/forus-webshop/scss/style-webshop-berg_en_dal-vars.scss
index f14fc89e8..b23d5c9e8 100644
--- a/react/assets/forus-webshop/scss/style-webshop-berg_en_dal-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-berg_en_dal-vars.scss
@@ -352,7 +352,7 @@ $primaryColorLight: #1B8761;
     --section-cms-background: var(--section-background);
     --section-map-padding: var(--section-padding);
     --section-map-background: var(--section-background);
-    --section-faq-padding: var(--section-padding);
+    --section-faq-padding: 30px 0;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 35px 0;
     --section-footer-background: #15694B;
diff --git a/react/assets/forus-webshop/scss/style-webshop-berkelland-vars.scss b/react/assets/forus-webshop/scss/style-webshop-berkelland-vars.scss
index 0b480cab5..b3b96e4fe 100644
--- a/react/assets/forus-webshop/scss/style-webshop-berkelland-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-berkelland-vars.scss
@@ -352,7 +352,7 @@ $primaryColorLight: #004d93;
     --section-cms-background: var(--section-background);
     --section-map-padding: var(--section-padding);
     --section-map-background: var(--section-background);
-    --section-faq-padding: var(--section-padding);
+    --section-faq-padding: 30px 0;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 35px 0;
     --section-footer-background: #fff;
diff --git a/react/assets/forus-webshop/scss/style-webshop-ede-vars.scss b/react/assets/forus-webshop/scss/style-webshop-ede-vars.scss
index 53ea35211..e57cd42fb 100644
--- a/react/assets/forus-webshop/scss/style-webshop-ede-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-ede-vars.scss
@@ -352,7 +352,7 @@ $primaryColorLight: #3558a2;
     --section-cms-background: var(--section-background);
     --section-map-padding: var(--section-padding);
     --section-map-background: var(--section-background);
-    --section-faq-padding: var(--section-padding);
+    --section-faq-padding: 30px 0;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 35px 0;
     --section-footer-background: #404040;
diff --git a/react/assets/forus-webshop/scss/style-webshop-eemsdelta-vars.scss b/react/assets/forus-webshop/scss/style-webshop-eemsdelta-vars.scss
index 63793c0ec..3adaecf8f 100644
--- a/react/assets/forus-webshop/scss/style-webshop-eemsdelta-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-eemsdelta-vars.scss
@@ -352,7 +352,7 @@ $primaryColorLight: #0d4379;
     --section-cms-background: var(--section-background);
     --section-map-padding: var(--section-padding);
     --section-map-background: var(--section-background);
-    --section-faq-padding: var(--section-padding);
+    --section-faq-padding: 30px 0;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 35px 0;
     --section-footer-background: #0d4379;
diff --git a/react/assets/forus-webshop/scss/style-webshop-geertruidenberg-vars.scss b/react/assets/forus-webshop/scss/style-webshop-geertruidenberg-vars.scss
index 7941060a2..c345e09d7 100644
--- a/react/assets/forus-webshop/scss/style-webshop-geertruidenberg-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-geertruidenberg-vars.scss
@@ -352,7 +352,7 @@ $primaryColorLight: #ee8016;
     --section-cms-background: var(--section-background);
     --section-map-padding: var(--section-padding);
     --section-map-background: var(--section-background);
-    --section-faq-padding: var(--section-padding);
+    --section-faq-padding: 30px 0;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 50px 0;
     --section-footer-background: #ee8016 url(./assets/img/header-frame-after.svg);
diff --git a/react/assets/forus-webshop/scss/style-webshop-general-vars.scss b/react/assets/forus-webshop/scss/style-webshop-general-vars.scss
index 5e236d02e..df4f9a1ad 100644
--- a/react/assets/forus-webshop/scss/style-webshop-general-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-general-vars.scss
@@ -351,7 +351,7 @@ $primaryColorLight: #305dfb;
     --section-cms-background: var(--section-background);
     --section-map-padding: var(--section-padding);
     --section-map-background: var(--section-background);
-    --section-faq-padding: var(--section-padding);
+    --section-faq-padding: 30px 0;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 35px 0;
     --section-footer-background: #fff;
diff --git a/react/assets/forus-webshop/scss/style-webshop-goereeoverflakkee-vars.scss b/react/assets/forus-webshop/scss/style-webshop-goereeoverflakkee-vars.scss
index e89c55aef..e350d8777 100644
--- a/react/assets/forus-webshop/scss/style-webshop-goereeoverflakkee-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-goereeoverflakkee-vars.scss
@@ -352,7 +352,7 @@ $primaryColorLight: #627c18;
     --section-cms-background: var(--section-background);
     --section-map-padding: var(--section-padding);
     --section-map-background: var(--section-background);
-    --section-faq-padding: var(--section-padding);
+    --section-faq-padding: 30px 0;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 35px 0;
     --section-footer-background: #08749b;
diff --git a/react/assets/forus-webshop/scss/style-webshop-groningen-vars.scss b/react/assets/forus-webshop/scss/style-webshop-groningen-vars.scss
index 13a29eaf3..bc5c8ebc3 100644
--- a/react/assets/forus-webshop/scss/style-webshop-groningen-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-groningen-vars.scss
@@ -351,7 +351,7 @@ $primaryColorLight: #e60204;
     --section-cms-background: var(--section-background);
     --section-map-padding: var(--section-padding);
     --section-map-background: var(--section-background);
-    --section-faq-padding: var(--section-padding);
+    --section-faq-padding: 30px 0;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 35px 0;
     --section-footer-background: #e60004;
diff --git a/react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant-vars.scss b/react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant-vars.scss
index cd3f8e7bf..55c0b60c6 100644
--- a/react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-hartvanwestbrabant-vars.scss
@@ -352,7 +352,7 @@ $primaryColorLight: #24a1a1;
     --section-cms-background: var(--section-background);
     --section-map-padding: var(--section-padding);
     --section-map-background: var(--section-background);
-    --section-faq-padding: var(--section-padding);
+    --section-faq-padding: 30px 0;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 35px 0;
     --section-footer-background: #24a1a1;
diff --git a/react/assets/forus-webshop/scss/style-webshop-heumen-vars.scss b/react/assets/forus-webshop/scss/style-webshop-heumen-vars.scss
index c8a227236..f91694e30 100644
--- a/react/assets/forus-webshop/scss/style-webshop-heumen-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-heumen-vars.scss
@@ -352,7 +352,7 @@ $primaryColorLight: #22398e;
     --section-cms-background: var(--section-background);
     --section-map-padding: var(--section-padding);
     --section-map-background: var(--section-background);
-    --section-faq-padding: var(--section-padding);
+    --section-faq-padding: 30px 0;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 35px 0;
     --section-footer-background: #22398e;
diff --git a/react/assets/forus-webshop/scss/style-webshop-kerstpakket-vars.scss b/react/assets/forus-webshop/scss/style-webshop-kerstpakket-vars.scss
index e4e2b0c2f..cb3ddaf5b 100644
--- a/react/assets/forus-webshop/scss/style-webshop-kerstpakket-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-kerstpakket-vars.scss
@@ -352,7 +352,7 @@ $primaryColorLight: #9f3031;
     --section-cms-background: var(--section-background);
     --section-map-padding: var(--section-padding);
     --section-map-background: var(--section-background);
-    --section-faq-padding: var(--section-padding);
+    --section-faq-padding: 30px 0;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 35px 0;
     --section-footer-background: #fff;
diff --git a/react/assets/forus-webshop/scss/style-webshop-midden_drenthe-vars.scss b/react/assets/forus-webshop/scss/style-webshop-midden_drenthe-vars.scss
index aa8d3a90a..c5be5ebe8 100644
--- a/react/assets/forus-webshop/scss/style-webshop-midden_drenthe-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-midden_drenthe-vars.scss
@@ -352,7 +352,7 @@ $primaryColorLight: #b31869;
     --section-cms-background: var(--section-background);
     --section-map-padding: var(--section-padding);
     --section-map-background: var(--section-background);
-    --section-faq-padding: var(--section-padding);
+    --section-faq-padding: 30px 0;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 35px 0;
     --section-footer-background: #eff2f5;
diff --git a/react/assets/forus-webshop/scss/style-webshop-noordoostpolder-vars.scss b/react/assets/forus-webshop/scss/style-webshop-noordoostpolder-vars.scss
index d15644fa0..186052c25 100644
--- a/react/assets/forus-webshop/scss/style-webshop-noordoostpolder-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-noordoostpolder-vars.scss
@@ -351,7 +351,7 @@ $primaryColorLight: #fd5392;
     --section-cms-background: var(--section-background);
     --section-map-padding: var(--section-padding);
     --section-map-background: var(--section-background);
-    --section-faq-padding: var(--section-padding);
+    --section-faq-padding: 30px 0;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 35px 0;
     --section-footer-background: #fff;
diff --git a/react/assets/forus-webshop/scss/style-webshop-oostgelre-vars.scss b/react/assets/forus-webshop/scss/style-webshop-oostgelre-vars.scss
index 0b45fe328..a2fff2203 100644
--- a/react/assets/forus-webshop/scss/style-webshop-oostgelre-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-oostgelre-vars.scss
@@ -352,7 +352,7 @@ $primaryColorLight: #660066;
     --section-cms-background: var(--section-background);
     --section-map-padding: var(--section-padding);
     --section-map-background: var(--section-background);
-    --section-faq-padding: var(--section-padding);
+    --section-faq-padding: 30px 0;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 35px 0;
     --section-footer-background: #fff;
diff --git a/react/assets/forus-webshop/scss/style-webshop-potjeswijzer-vars.scss b/react/assets/forus-webshop/scss/style-webshop-potjeswijzer-vars.scss
index 821b6576e..1c3a2d2dc 100644
--- a/react/assets/forus-webshop/scss/style-webshop-potjeswijzer-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-potjeswijzer-vars.scss
@@ -351,7 +351,7 @@ $primaryColorLight: #b9cb18;
     --section-cms-background: var(--section-background);
     --section-map-padding: var(--section-padding);
     --section-map-background: var(--section-background);
-    --section-faq-padding: var(--section-padding);
+    --section-faq-padding: 30px 0;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 35px 0;
     --section-footer-background: #4990b5;
diff --git a/react/assets/forus-webshop/scss/style-webshop-schagen-vars.scss b/react/assets/forus-webshop/scss/style-webshop-schagen-vars.scss
index e8d51c055..a951def71 100644
--- a/react/assets/forus-webshop/scss/style-webshop-schagen-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-schagen-vars.scss
@@ -356,7 +356,7 @@ $primaryColorLight: #1c8fd7;
     --section-cms-background: var(--section-background);
     --section-map-padding: var(--section-padding);
     --section-map-background: var(--section-background);
-    --section-faq-padding: var(--section-padding);
+    --section-faq-padding: 30px 0;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 35px 0;
     --section-footer-background: #306fb3;
diff --git a/react/assets/forus-webshop/scss/style-webshop-vergoedingen-vars.scss b/react/assets/forus-webshop/scss/style-webshop-vergoedingen-vars.scss
index 456e447ee..c073afe5c 100644
--- a/react/assets/forus-webshop/scss/style-webshop-vergoedingen-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-vergoedingen-vars.scss
@@ -453,7 +453,7 @@ $primaryColorLight: #2f7f6b;
     --section-cms-background: var(--section-background);
     --section-map-padding: 30px 0;
     --section-map-background: var(--section-background);
-    --section-faq-padding: var(--section-padding);
+    --section-faq-padding: 30px 0;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 35px 0;
     --section-footer-background: #3a3a3a;
diff --git a/react/assets/forus-webshop/scss/style-webshop-waalwijk-vars.scss b/react/assets/forus-webshop/scss/style-webshop-waalwijk-vars.scss
index 356246dc1..440aa0bf6 100644
--- a/react/assets/forus-webshop/scss/style-webshop-waalwijk-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-waalwijk-vars.scss
@@ -351,7 +351,7 @@ $primaryColorLight: #2a2a7f;
     --section-cms-background: var(--section-background);
     --section-map-padding: var(--section-padding);
     --section-map-background: var(--section-background);
-    --section-faq-padding: var(--section-padding);
+    --section-faq-padding: 30px 0;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 35px 0;
     --section-footer-background: #2f2d80;
diff --git a/react/assets/forus-webshop/scss/style-webshop-wadenheuvel-vars.scss b/react/assets/forus-webshop/scss/style-webshop-wadenheuvel-vars.scss
index e59a3c8d3..cb54eeeef 100644
--- a/react/assets/forus-webshop/scss/style-webshop-wadenheuvel-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-wadenheuvel-vars.scss
@@ -351,7 +351,7 @@ $primaryColorLight: #2a2a7f;
     --section-cms-background: var(--section-background);
     --section-map-padding: var(--section-padding);
     --section-map-background: var(--section-background);
-    --section-faq-padding: var(--section-padding);
+    --section-faq-padding: 30px 0;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 35px 0;
     --section-footer-background: #fff;
diff --git a/react/assets/forus-webshop/scss/style-webshop-winterswijk-vars.scss b/react/assets/forus-webshop/scss/style-webshop-winterswijk-vars.scss
index 553969ec3..6844deed9 100644
--- a/react/assets/forus-webshop/scss/style-webshop-winterswijk-vars.scss
+++ b/react/assets/forus-webshop/scss/style-webshop-winterswijk-vars.scss
@@ -351,7 +351,7 @@ $primaryColorLight: #0c6dcb;
     --section-cms-background: var(--section-background);
     --section-map-padding: var(--section-padding);
     --section-map-background: var(--section-background);
-    --section-faq-padding: var(--section-padding);
+    --section-faq-padding: 30px 0;
     --section-faq-background: var(--section-background);
     --section-footer-padding: 35px 0;
     --section-footer-background: #fff;

From 6c0c3005158e3979ca7209b2e5316dba6198c54e Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Tue, 15 Apr 2025 16:47:41 +0300
Subject: [PATCH 09/23] update browserslist-db

---
 package-lock.json | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 96e8cd4cb..1bb272d47 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5671,9 +5671,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001677",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001677.tgz",
-      "integrity": "sha512-fmfjsOlJUpMWu+mAAtZZZHz7UEwsUxIIvu1TJfO1HqFQvB/B+ii0xr9B5HpbZY/mC4XZ8SvjHJqtAY6pDPQEog==",
+      "version": "1.0.30001713",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001713.tgz",
+      "integrity": "sha512-wCIWIg+A4Xr7NfhTuHdX+/FKh3+Op3LBbSp2N5Pfx6T/LhdQy3GTyoTg48BReaW/MyMNZAkTadsBtai3ldWK0Q==",
       "funding": [
         {
           "type": "opencollective",
@@ -5687,7 +5687,8 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ]
+      ],
+      "license": "CC-BY-4.0"
     },
     "node_modules/chart.js": {
       "version": "4.4.4",

From c61d0bb884fb0349b85f32e98c82907d5d21c4d6 Mon Sep 17 00:00:00 2001
From: Yaroslav Kosterin <ateamcms@gmail.com>
Date: Thu, 17 Apr 2025 11:24:07 +0300
Subject: [PATCH 10/23] fix wrong translation attributes

---
 react/src/webshop/i18n/i18n-nl.mjs                          | 2 ++
 react/src/webshop/i18n/nl/components/push.mjs               | 2 +-
 react/src/webshop/i18n/nl/modals/modal_2fa_deactivate.mjs   | 2 +-
 react/src/webshop/i18n/nl/modals/modal_2fa_setup.mjs        | 4 ++--
 ...l_deactivate_voucher.js => modal_deactivate_voucher.mjs} | 6 +++---
 .../src/webshop/i18n/nl/pages/preferences-notifications.mjs | 2 +-
 react/src/webshop/i18n/nl/pages/reservation.mjs             | 2 +-
 7 files changed, 11 insertions(+), 9 deletions(-)
 rename react/src/webshop/i18n/nl/modals/{modal_deactivate_voucher.js => modal_deactivate_voucher.mjs} (79%)

diff --git a/react/src/webshop/i18n/i18n-nl.mjs b/react/src/webshop/i18n/i18n-nl.mjs
index dbbad7ea6..8f559b159 100644
--- a/react/src/webshop/i18n/i18n-nl.mjs
+++ b/react/src/webshop/i18n/i18n-nl.mjs
@@ -72,6 +72,7 @@ import modal_physical_card_unlink from './nl/modals/modal-physical_card_unlink.m
 import modal_fund_help from './nl/modals/modal_fund_help.mjs';
 import modal_pin_code from './nl/modals/modal_pin_code.mjs';
 import modal_logout from './nl/modals/modal_logout.mjs';
+import modal_deactivate_voucher from './nl/modals/modal_deactivate_voucher.mjs';
 
 import app_footer from './nl/directives/app-footer.mjs';
 import block_products from './nl/directives/block-products.mjs';
@@ -467,6 +468,7 @@ export default {
     modal_fund_help: modal_fund_help,
     modal_pin_code: modal_pin_code,
     modal_logout: modal_logout,
+    modal_deactivate_voucher: modal_deactivate_voucher,
 
     // DIRECTIVES
     app_footer: app_footer,
diff --git a/react/src/webshop/i18n/nl/components/push.mjs b/react/src/webshop/i18n/nl/components/push.mjs
index b610df568..6f7f5a6ed 100644
--- a/react/src/webshop/i18n/nl/components/push.mjs
+++ b/react/src/webshop/i18n/nl/components/push.mjs
@@ -4,7 +4,7 @@ export default {
     saved: 'Opgeslagen!',
     deleted: 'Verwijderd!',
     fund_activation: {
-        success: '{fund_name} tegoed geactiveerd!',
+        success: '{{fund_name}} tegoed geactiveerd!',
         digid_success: 'Ingelogd met DigiD.',
     },
     preferences_emails: {
diff --git a/react/src/webshop/i18n/nl/modals/modal_2fa_deactivate.mjs b/react/src/webshop/i18n/nl/modals/modal_2fa_deactivate.mjs
index e7c54e646..84ef552e8 100644
--- a/react/src/webshop/i18n/nl/modals/modal_2fa_deactivate.mjs
+++ b/react/src/webshop/i18n/nl/modals/modal_2fa_deactivate.mjs
@@ -8,7 +8,7 @@ export default {
     enter_app_code: 'Voer de 6-cijferige code in vanuit de app',
     enter_2fa_code_deactivation: 'Voer de tweefactorauthenticatiecode in voor deactivering',
     resend_code: 'Code opnieuw verzenden',
-    seconds: '{time} seconde(n)',
+    seconds: '{{time}} seconde(n)',
     cancel: 'Annuleer',
     verify: 'Verifieer',
     '2fa_disabled': 'Tweefactorauthenticatie is succesvol uitgeschakeld',
diff --git a/react/src/webshop/i18n/nl/modals/modal_2fa_setup.mjs b/react/src/webshop/i18n/nl/modals/modal_2fa_setup.mjs
index 2aec67007..8c629ad86 100644
--- a/react/src/webshop/i18n/nl/modals/modal_2fa_setup.mjs
+++ b/react/src/webshop/i18n/nl/modals/modal_2fa_setup.mjs
@@ -17,13 +17,13 @@ export default {
     enter_sms_code: 'Voer de 6-cijferige SMS-code in',
     enter_app_code: 'Voer de 6-cijferige code in vanuit de app',
     resend_code: 'Code opnieuw verzenden',
-    seconds: '{time} seconde(n)',
+    seconds: '{{time}} seconde(n)',
     back: 'Terug',
     verify: 'Verifieer',
     '2fa': 'Tweefactorauthenticatie',
     enter_sms_code_6_digits:
         'Om door te gaan, voer alstublieft de 6-cijferige SMS-code in die naar je telefoonnummer is verzonden.',
-    enter_app_code_6_digits: 'Om door te gaan, voer de 6-cijferige beveiligingscode in van {provider}',
+    enter_app_code_6_digits: 'Om door te gaan, voer de 6-cijferige beveiligingscode in van {{provider}}',
     successful_login: 'Het is gelukt!',
     welcome_back: 'Je bent succesvol ingelogd met tweefactorauthenticatie. Welkom terug!',
     '2fa_success': 'Tweefactorauthenticatie succesvol ingesteld',
diff --git a/react/src/webshop/i18n/nl/modals/modal_deactivate_voucher.js b/react/src/webshop/i18n/nl/modals/modal_deactivate_voucher.mjs
similarity index 79%
rename from react/src/webshop/i18n/nl/modals/modal_deactivate_voucher.js
rename to react/src/webshop/i18n/nl/modals/modal_deactivate_voucher.mjs
index 7bf9d1e16..8f9c0e705 100644
--- a/react/src/webshop/i18n/nl/modals/modal_deactivate_voucher.js
+++ b/react/src/webshop/i18n/nl/modals/modal_deactivate_voucher.mjs
@@ -7,16 +7,16 @@ export default {
         not_interested: 'Aanbod is niet aantrekkelijk',
         other: 'Anders',
     },
-    stop_participation: 'Je {name} deelname stoppen.',
+    stop_participation: 'Je {{name}} deelname stoppen.',
     reason_for_stopping: 'Reden van stoppen:',
     reason: 'Reden',
     max_characters: 'Max. 140 tekens',
     cancel: 'Annuleer',
     next: 'Volgende',
     confirm_stop_participation: 'Weet u zeker dat u uw deelname wilt stoppen?',
-    warning: 'Let op: Je kunt hierna geen gebruik meer maken van je tegoed. Je {name} tegoed wordt gedeactiveerd.',
+    warning: 'Let op: Je kunt hierna geen gebruik meer maken van je tegoed. Je {{name}} tegoed wordt gedeactiveerd.',
     back: 'Terug',
     confirm: 'Bevestigen',
     stop_successful: 'Deelname gestopt',
-    success_message: 'Je {name} deelname is gestopt.',
+    success_message: 'Je {{name}} deelname is gestopt.',
 };
diff --git a/react/src/webshop/i18n/nl/pages/preferences-notifications.mjs b/react/src/webshop/i18n/nl/pages/preferences-notifications.mjs
index e0bc6836a..930dc9fe0 100644
--- a/react/src/webshop/i18n/nl/pages/preferences-notifications.mjs
+++ b/react/src/webshop/i18n/nl/pages/preferences-notifications.mjs
@@ -17,7 +17,7 @@ export default {
         },
     },
     new_time_enabled: 'Nieuwe tijd is ingeschakeld',
-    auto_close_after: 'Pop-up meldingen worden automatisch na {value} seconden gesloten.',
+    auto_close_after: 'Pop-up meldingen worden automatisch na {{value}} seconden gesloten.',
     auto_close_disabled: 'Automatisch sluiten is uitgeschakeld',
     auto_close_disabled_description: 'Het automatisch sluiten van pop-up meldingen is uitgeschakeld.',
     auto_close_enabled: 'Automatisch sluiten is ingeschakeld',
diff --git a/react/src/webshop/i18n/nl/pages/reservation.mjs b/react/src/webshop/i18n/nl/pages/reservation.mjs
index 16fc23b80..a20221a84 100644
--- a/react/src/webshop/i18n/nl/pages/reservation.mjs
+++ b/react/src/webshop/i18n/nl/pages/reservation.mjs
@@ -48,7 +48,7 @@ export default {
         state: 'Status',
     },
     expiring:
-        'Houd er rekening mee dat er nog <strong>{expiresIn} minuten</strong> over zijn om de bijbetaling uit te voeren. Anders zal de reservering automatisch worden geannuleerd.',
+        'Houd er rekening mee dat er nog <strong>{{expiresIn}} minuten</strong> over zijn om de bijbetaling uit te voeren. Anders zal de reservering automatisch worden geannuleerd.',
     expired:
         'Sorry, uw reservering is tijdens het afrekenproces geannuleerd omdat het geselecteerde product uitverkocht is.',
 };

From 00547e5b3fa6316684835598ede508d97eb6803b Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Thu, 17 Apr 2025 12:21:40 +0300
Subject: [PATCH 11/23] update translations

---
 react/src/webshop/i18n/translated/ar.json    | 42 +++++++---
 react/src/webshop/i18n/translated/de.json    | 42 +++++++---
 react/src/webshop/i18n/translated/en-US.json | 42 +++++++---
 react/src/webshop/i18n/translated/fr.json    | 42 +++++++---
 react/src/webshop/i18n/translated/pl.json    | 42 +++++++---
 react/src/webshop/i18n/translated/ru.json    | 42 +++++++---
 react/src/webshop/i18n/translated/tr.json    | 42 +++++++---
 react/src/webshop/i18n/translated/uk.json    | 42 +++++++---
 translations/cache/cache.json                | 84 ++++++++++++++++++--
 9 files changed, 334 insertions(+), 86 deletions(-)

diff --git a/react/src/webshop/i18n/translated/ar.json b/react/src/webshop/i18n/translated/ar.json
index 05584eb7e..645f5a9b5 100644
--- a/react/src/webshop/i18n/translated/ar.json
+++ b/react/src/webshop/i18n/translated/ar.json
@@ -2298,7 +2298,6 @@
         }
     },
     "preferences_notifications": {
-        "auto_close_after": "يتم إغلاق التنبيهات المنبثقة تلقائياً بعد {القيمة} ثانية.",
         "auto_close_disabled": "تم تعطيل الإغلاق التلقائي",
         "auto_close_disabled_description": "تم تعطيل الإغلاق التلقائي للإشعارات المنبثقة.",
         "auto_close_enabled": "تم تمكين الإغلاق التلقائي",
@@ -2438,7 +2437,8 @@
         },
         "unsubscribe": "إلغاء الاشتراك من جميع إشعارات البريد الإلكتروني",
         "unsubscribe_button": "إلغاء الاشتراك",
-        "unsubscribe_desc": "أريد إلغاء الاشتراك من جميع إشعارات البريد الإلكتروني."
+        "unsubscribe_desc": "أريد إلغاء الاشتراك من جميع إشعارات البريد الإلكتروني.",
+        "auto_close_after": "يتم إغلاق الإشعارات المنبثقة تلقائياً بعد {{value}} ثانية."
     },
     "privacy": {
         "breadcrumbs": {
@@ -2629,7 +2629,6 @@
             "title": "تفاصيل الحجز"
         },
         "expired": "عذرًا، تم إلغاء حجزك أثناء عملية الدفع لأن المنتج المحدد تم بيعه بالكامل.",
-        "expiring": "يُرجى ملاحظة أن هناك <strong>{ينتهي في} دقائق</strong> متبقية لتنفيذ الدفعة الإضافية. وإلا فسيتم إلغاء الحجز تلقائياً.",
         "extra_amount_refund": {
             "amount": "المبلغ",
             "date": "التاريخ",
@@ -2665,7 +2664,8 @@
                 "waiting": "في انتظار الدفع"
             }
         },
-        "title": "تفاصيل التعبئة"
+        "title": "تفاصيل التعبئة",
+        "expiring": "يُرجى ملاحظة أن هناك <strong>{{expiresIn}} دقيقة</strong> متبقية لتسديد الدفعة الإضافية. وإلا سيتم إلغاء الحجز تلقائياً."
     },
     "reservations": {
         "breadcrumbs": {
@@ -2770,9 +2770,9 @@
         "enter_sms_code": "أدخل رمز الرسالة النصية القصيرة المكون من 6 أرقام",
         "error_404": "حدث خطأ. يرجى تحديث الصفحة.",
         "resend_code": "إعادة إرسال الرمز",
-        "seconds": "{الوقت} ثانية (ثوانٍ)",
         "unknown_error": "خطأ غير معروف.",
-        "verify": "تحقق"
+        "verify": "تحقق",
+        "seconds": "{{time}} ثانية (ثوانٍ)"
     },
     "modal_2fa_setup": {
         "2fa": "المصادقة الثنائية",
@@ -2783,7 +2783,6 @@
         "confirm": "تأكيد",
         "enter_2fa_code": "للمتابعة، أدخل رمز الأمان الخاص بالمصادقة الثنائية.",
         "enter_app_code": "أدخل الرمز المكون من 6 أرقام من داخل التطبيق",
-        "enter_app_code_6_digits": "للمتابعة، أدخل رمز الأمان المكون من 6 أرقام من {مقدم الخدمة}",
         "enter_phone": "للمتابعة، أدخل رقم هاتفك",
         "enter_sms_code": "أدخل رمز الرسالة النصية القصيرة المكون من 6 أرقام",
         "enter_sms_code_6_digits": "للمتابعة، يُرجى إدخال رمز الرسالة النصية القصيرة المكون من 6 أرقام المرسلة إلى رقم هاتفك.",
@@ -2794,7 +2793,6 @@
         "link_phone": "ربط رقم هاتفك",
         "phone_number": "رقم الهاتف",
         "resend_code": "إعادة إرسال الرمز",
-        "seconds": "{الوقت} ثانية (ثوانٍ)",
         "select_auth_app": "حدد تطبيق المصادقة الذي تريد استخدامه.",
         "setup_2fa": "إعداد المصادقة الثنائية",
         "successful_login": "لقد نجح الأمر!",
@@ -2803,7 +2801,9 @@
         "welcome_back": "لقد قمت بتسجيل الدخول بنجاح باستخدام المصادقة الثنائية. مرحباً بعودتك!",
         "already_have_app_steps": "1. في التطبيق، حدد <strong class=\"text-strong\">إعداد الحساب</strong><br>2. اختر <strong class=\"text-strong\">مسح رمز الاستجابة السريعة</strong> أو <strong class=\"text-strong\">مفتاح التثبيت</strong>: <strong class=\"text-strong\"> {{secret}}</strong>",
         "dont_have_app": "<strong class=\"text-strong\"> إذا لم يكن لديك تطبيق {{name}} ، </strong>يمكنك تنزيله من <strong class=\"text-strong\">متجر Play</strong> أو <strong class=\"text-strong\">متجر التطبيقات</strong>.",
-        "already_have_app": "إذا كان لديك بالفعل تطبيق {{name}} ، فاتبع الخطوات التالية:"
+        "already_have_app": "إذا كان لديك بالفعل تطبيق {{name}} ، فاتبع الخطوات التالية:",
+        "enter_app_code_6_digits": "للمتابعة، أدخل رمز الأمان المكوّن من 6 أرقام من {{provider}}",
+        "seconds": "{{time}} ثانية (ثوانٍ)"
     },
     "modal_fund_help": {
         "chat": "الدردشة",
@@ -3476,7 +3476,7 @@
         "error": "فشل!",
         "fund_activation": {
             "digid_success": "تم تسجيل الدخول باستخدام DigiD.",
-            "success": "تم تفعيل رصيد {اسم_الصندوق} الائتماني!"
+            "success": "{{fund_name}} تم تفعيل الائتمان!"
         },
         "pre_check": {
             "downloaded": "سيبدأ التنزيل في غضون لحظات قليلة.",
@@ -3514,5 +3514,27 @@
         "placeholders": {
             "select_option": "حدد الخيار"
         }
+    },
+    "modal_deactivate_voucher": {
+        "back": "رجوع",
+        "cancel": "إلغاء",
+        "close": "إغلاق",
+        "confirm": "تأكيد",
+        "confirm_stop_participation": "هل أنت متأكد من رغبتك في إيقاف مشاركتك؟",
+        "header_title": "إيقاف المشاركة",
+        "max_characters": "كحد أقصى. 140 حرفاً",
+        "next": "التالي",
+        "reason": "السبب",
+        "reason_for_stopping": "سبب التوقف:",
+        "reasons": {
+            "income_change": "التغير في الدخل",
+            "moved": "النقل",
+            "not_interested": "العرض غير جذاب",
+            "other": "غير ذلك"
+        },
+        "stop_participation": "إيقاف مشاركتك {{name}} ",
+        "stop_successful": "توقفت المشاركة",
+        "success_message": "لقد توقفت مشاركتك {{name}} ",
+        "warning": "ملاحظة: لم يعد بإمكانك استخدام رصيدك بعد ذلك. سيتم إلغاء تنشيط رصيدك {{name}} الخاص بك."
     }
 }
\ No newline at end of file
diff --git a/react/src/webshop/i18n/translated/de.json b/react/src/webshop/i18n/translated/de.json
index 13b9b0886..ca35177f6 100644
--- a/react/src/webshop/i18n/translated/de.json
+++ b/react/src/webshop/i18n/translated/de.json
@@ -1368,9 +1368,9 @@
         "enter_sms_code": "Geben Sie den 6-stelligen SMS-Code ein",
         "error_404": "Es ist ein Fehler aufgetreten. Bitte aktualisieren Sie die Seite.",
         "resend_code": "Code erneut senden",
-        "seconds": "{Zeit} Sekunde(n)",
         "unknown_error": "Unbekannter Fehler.",
-        "verify": "Überprüfen Sie"
+        "verify": "Überprüfen Sie",
+        "seconds": "{{time}} Sekunde(n)"
     },
     "modal_2fa_setup": {
         "2fa": "Zwei-Faktor-Authentifizierung",
@@ -1381,7 +1381,6 @@
         "confirm": "Bestätigen Sie",
         "enter_2fa_code": "Um fortzufahren, geben Sie den Sicherheitscode für die Zwei-Faktor-Authentifizierung ein.",
         "enter_app_code": "Geben Sie den 6-stelligen Code in der App ein",
-        "enter_app_code_6_digits": "Um fortzufahren, geben Sie den 6-stelligen Sicherheitscode von {Provider} ein.",
         "enter_phone": "Um fortzufahren, geben Sie Ihre Rufnummer ein",
         "enter_sms_code": "Geben Sie den 6-stelligen SMS-Code ein",
         "enter_sms_code_6_digits": "Um fortzufahren, geben Sie bitte den 6-stelligen SMS-Code ein, der Ihnen an Ihre Telefonnummer geschickt wurde.",
@@ -1392,7 +1391,6 @@
         "link_phone": "Verknüpfen Sie Ihre Rufnummer",
         "phone_number": "Rufnummer",
         "resend_code": "Code erneut senden",
-        "seconds": "{Zeit} Sekunde(n)",
         "select_auth_app": "Wählen Sie die Authentifizierungsanwendung, die Sie verwenden möchten.",
         "setup_2fa": "Einrichten der Zwei-Faktor-Authentifizierung",
         "successful_login": "Es hat geklappt!",
@@ -1401,7 +1399,9 @@
         "welcome_back": "Sie haben sich erfolgreich mit der Zwei-Faktor-Authentifizierung angemeldet. Willkommen zurück!",
         "already_have_app_steps": "1. Wählen Sie in der App <strong class=\"text-strong\">Kontoeinrichtung</strong><br>2. Wählen Sie <strong class=\"text-strong\">Scannen eines QR-Codes</strong> oder <strong class=\"text-strong\">Eingabe eines Installationsschlüssels</strong>: <strong class=\"text-strong\"> {{secret}}</strong>",
         "dont_have_app": "<strong class=\"text-strong\"> Wenn Sie die App {{name}} nicht haben, </strong>können Sie sie aus dem <strong class=\"text-strong\">Play Store</strong> oder dem <strong class=\"text-strong\">App Store</strong> herunterladen.",
-        "already_have_app": "Wenn Sie bereits über die App {{name}} verfügen, führen Sie die folgenden Schritte aus:"
+        "already_have_app": "Wenn Sie bereits über die App {{name}} verfügen, führen Sie die folgenden Schritte aus:",
+        "enter_app_code_6_digits": "Um fortzufahren, geben Sie den 6-stelligen Sicherheitscode von {{provider}}",
+        "seconds": "{{time}} Sekunde(n)"
     },
     "modal_fund_help": {
         "chat": "Chat",
@@ -2010,7 +2010,6 @@
         }
     },
     "preferences_notifications": {
-        "auto_close_after": "Popup-Benachrichtigungen werden nach {Wert} Sekunden automatisch geschlossen.",
         "auto_close_disabled": "Automatische Schließung ist deaktiviert",
         "auto_close_disabled_description": "Das automatische Schließen von Popup-Benachrichtigungen ist deaktiviert.",
         "auto_close_enabled": "Automatisches Schließen ist aktiviert",
@@ -2150,7 +2149,8 @@
         },
         "unsubscribe": "Alle E-Mail-Benachrichtigungen abbestellen",
         "unsubscribe_button": "Abbestellen",
-        "unsubscribe_desc": "Ich möchte mich von allen E-Mail-Benachrichtigungen abmelden."
+        "unsubscribe_desc": "Ich möchte mich von allen E-Mail-Benachrichtigungen abmelden.",
+        "auto_close_after": "Pop-up-Benachrichtigungen werden automatisch nach {{value}} Sekunden geschlossen."
     },
     "privacy": {
         "breadcrumbs": {
@@ -2666,7 +2666,6 @@
             "title": "Details zur Buchung"
         },
         "expired": "Ihre Reservierung wurde leider während des Bestellvorgangs storniert, da das ausgewählte Produkt ausverkauft ist.",
-        "expiring": "Bitte beachten Sie, dass Sie noch <strong>{expiresIn} Minuten</strong> Zeit haben, um die Nachzahlung zu leisten. Andernfalls wird die Reservierung automatisch storniert.",
         "extra_amount_refund": {
             "amount": "Betrag",
             "date": "Datum",
@@ -2702,7 +2701,8 @@
                 "waiting": "Warten auf die Zahlung"
             }
         },
-        "title": "Details zur Aufstockung"
+        "title": "Details zur Aufstockung",
+        "expiring": "Bitte beachten Sie, dass Sie nur noch <strong>{{expiresIn}} Minuten</strong> Zeit haben, um die zusätzliche Zahlung zu leisten. Andernfalls wird die Reservierung automatisch storniert."
     },
     "reservations": {
         "breadcrumbs": {
@@ -3476,7 +3476,7 @@
         "error": "Durchgefallen!",
         "fund_activation": {
             "digid_success": "Eingeloggt mit DigiD.",
-            "success": "{Fund_name} Kredit aktiviert!"
+            "success": "{{fund_name}} Kredit aktiviert!"
         },
         "pre_check": {
             "downloaded": "Der Download wird in wenigen Augenblicken beginnen.",
@@ -3514,5 +3514,27 @@
         "placeholders": {
             "select_option": "Option auswählen"
         }
+    },
+    "modal_deactivate_voucher": {
+        "back": "Zurück",
+        "cancel": "Abbrechen",
+        "close": "Schließen Sie",
+        "confirm": "Bestätigen Sie",
+        "confirm_stop_participation": "Sind Sie sicher, dass Sie Ihre Teilnahme beenden wollen?",
+        "header_title": "Teilnahme stoppen",
+        "max_characters": "Max. 140 Zeichen",
+        "next": "Weiter",
+        "reason": "Grund",
+        "reason_for_stopping": "Grund für die Unterbrechung:",
+        "reasons": {
+            "income_change": "Veränderung des Einkommens",
+            "moved": "Umsiedlung",
+            "not_interested": "Angebot ist nicht attraktiv",
+            "other": "Ansonsten"
+        },
+        "stop_participation": "Beenden Sie Ihre Teilnahme an {{name}}.",
+        "stop_successful": "Teilnahme gestoppt",
+        "success_message": "Ihre Teilnahme an {{name}} ist beendet.",
+        "warning": "Hinweis: Sie können Ihr Guthaben danach nicht mehr verwenden. Ihr {{name}} Guthaben wird deaktiviert."
     }
 }
\ No newline at end of file
diff --git a/react/src/webshop/i18n/translated/en-US.json b/react/src/webshop/i18n/translated/en-US.json
index c3e02f9e9..75eeeb772 100644
--- a/react/src/webshop/i18n/translated/en-US.json
+++ b/react/src/webshop/i18n/translated/en-US.json
@@ -2138,12 +2138,12 @@
         "unsubscribe": "Unsubscribe from all email notifications",
         "unsubscribe_button": "Unsubscribe",
         "unsubscribe_desc": "I want to unsubscribe from all email notifications.",
-        "auto_close_after": "Pop-up notifications are automatically closed after {value} seconds.",
         "auto_close_disabled": "Automatic closing is disabled",
         "auto_close_disabled_description": "Automatic closing of pop-up notifications is disabled.",
         "auto_close_enabled": "Auto-close is enabled",
         "auto_close_enabled_description": "Automatically closing pop-up notifications is enabled.",
-        "new_time_enabled": "New time is enabled"
+        "new_time_enabled": "New time is enabled",
+        "auto_close_after": "Pop-up notifications automatically close after {{value}} seconds."
     },
     "privacy": {
         "breadcrumbs": {
@@ -2371,7 +2371,6 @@
         "confirm": "Confirm",
         "enter_2fa_code": "To continue, enter the two-factor authentication security code.",
         "enter_app_code": "Enter the 6-digit code from within the app",
-        "enter_app_code_6_digits": "To continue, enter the 6-digit security code from {provider}",
         "enter_phone": "To continue, enter your phone number",
         "enter_sms_code": "Enter the 6-digit SMS code",
         "enter_sms_code_6_digits": "To proceed, please enter the 6-digit SMS code sent to your phone number.",
@@ -2379,7 +2378,6 @@
         "link_phone": "Link your phone number",
         "phone_number": "Phone number",
         "resend_code": "Resend code",
-        "seconds": "{time} second(s)",
         "select_auth_app": "Select the authentication app you want to use.",
         "setup_2fa": "Setting up two-factor authentication",
         "successful_login": "It worked!",
@@ -2388,7 +2386,9 @@
         "welcome_back": "You have successfully logged in with two-factor authentication. Welcome back!",
         "already_have_app_steps": "1. In the app, select <strong class=\"text-strong\">Account Setup</strong><br>2. Select <strong class=\"text-strong\">Scan a QR code</strong> or the <strong class=\"text-strong\">Enter an installation key</strong>: <strong class=\"text-strong\"> {{secret}}</strong>",
         "dont_have_app": "<strong class=\"text-strong\"> If you do not have the {{name}} app, </strong>You can download it from the <strong class=\"text-strong\">Play Store</strong> or the <strong class=\"text-strong\">App Store</strong>.",
-        "already_have_app": "If you already have the {{name}} app, follow the steps below:"
+        "already_have_app": "If you already have the {{name}} app, follow the steps below:",
+        "enter_app_code_6_digits": "To continue, enter the 6-digit security code from {{provider}}",
+        "seconds": "{{time}} second(s)"
     },
     "modal_product_reserve_cancel": {
         "description_not_cancelable": "This reservation has already been accepted by the provider. To cancel within 14 days of the date of the reservation, please contact the provider.",
@@ -2754,7 +2754,6 @@
             "title": "Reservation details"
         },
         "expired": "Sorry, your reservation was canceled during the checkout process because the selected product is sold out.",
-        "expiring": "Please note that there are <strong>{expiresIn} minutes</strong> left to make the additional payment. Otherwise, the reservation will be cancelled automatically.",
         "extra_amount_refund": {
             "amount": "Amount",
             "date": "Date",
@@ -2768,7 +2767,8 @@
             "status": "Status",
             "amount": "Self additional payment"
         },
-        "title": "Top-up data"
+        "title": "Top-up data",
+        "expiring": "Please note that there are <strong>{{expiresIn}} minutes</strong> left to make the additional payment. Otherwise, the reservation will be automatically canceled."
     },
     "top_navbar_search": {
         "noresult": {
@@ -3123,10 +3123,10 @@
         "enter_app_code": "Enter the 6-digit code from within the app",
         "enter_sms_code": "Enter the 6-digit SMS code",
         "resend_code": "Resend code",
-        "seconds": "{time} second(s)",
         "unknown_error": "Unknown error.",
         "verify": "Verify",
-        "error_404": "An error has occurred. Please refresh the page."
+        "error_404": "An error has occurred. Please refresh the page.",
+        "seconds": "{{time}} second(s)"
     },
     "modal_fund_help": {
         "chat": "Chat",
@@ -3476,7 +3476,7 @@
         "error": "Failed!",
         "fund_activation": {
             "digid_success": "Logged in with DigiD.",
-            "success": "{fund_name} credit activated!"
+            "success": "{{fund_name}} credit activated!"
         },
         "pre_check": {
             "downloaded": "The download will begin in a few moments.",
@@ -3514,5 +3514,27 @@
         "placeholders": {
             "select_option": "Select option"
         }
+    },
+    "modal_deactivate_voucher": {
+        "back": "Back",
+        "cancel": "Cancel",
+        "close": "Close",
+        "confirm": "Confirm",
+        "confirm_stop_participation": "Are you sure you want to stop your participation?",
+        "header_title": "Stop participation",
+        "max_characters": "Max. 140 characters",
+        "next": "Next",
+        "reason": "Reason",
+        "reason_for_stopping": "Reason for quitting:",
+        "reasons": {
+            "income_change": "Change in income",
+            "moved": "Relocation",
+            "not_interested": "Offer is not attractive",
+            "other": "Otherwise"
+        },
+        "stop_participation": "Your {{name}} participation stop.",
+        "stop_successful": "Participation stopped",
+        "success_message": "Your {{name}} participation has stopped.",
+        "warning": "Note: You cannot use your credit after this. Your {{name}} credit will be deactivated."
     }
 }
\ No newline at end of file
diff --git a/react/src/webshop/i18n/translated/fr.json b/react/src/webshop/i18n/translated/fr.json
index d0df84968..d96f100f6 100644
--- a/react/src/webshop/i18n/translated/fr.json
+++ b/react/src/webshop/i18n/translated/fr.json
@@ -1368,9 +1368,9 @@
         "enter_sms_code": "Saisir le code SMS à 6 chiffres",
         "error_404": "Une erreur s'est produite. Veuillez actualiser la page.",
         "resend_code": "Renvoyer le code",
-        "seconds": "{heure} seconde(s)",
         "unknown_error": "Erreur inconnue.",
-        "verify": "Vérifier"
+        "verify": "Vérifier",
+        "seconds": "{{time}} seconde(s)"
     },
     "modal_2fa_setup": {
         "2fa": "Authentification à deux facteurs",
@@ -1381,7 +1381,6 @@
         "confirm": "Confirmer",
         "enter_2fa_code": "Pour continuer, saisissez le code de sécurité de l'authentification à deux facteurs.",
         "enter_app_code": "Saisir le code à 6 chiffres à partir de l'application",
-        "enter_app_code_6_digits": "Pour continuer, entrez le code de sécurité à 6 chiffres de {fournisseur}.",
         "enter_phone": "Pour continuer, entrez votre numéro de téléphone",
         "enter_sms_code": "Saisir le code SMS à 6 chiffres",
         "enter_sms_code_6_digits": "Pour continuer, veuillez saisir le code SMS à 6 chiffres envoyé à votre numéro de téléphone.",
@@ -1392,7 +1391,6 @@
         "link_phone": "Liez votre numéro de téléphone",
         "phone_number": "Numéro de téléphone",
         "resend_code": "Renvoyer le code",
-        "seconds": "{heure} seconde(s)",
         "select_auth_app": "Sélectionnez l'application d'authentification que vous souhaitez utiliser.",
         "setup_2fa": "Mise en place de l'authentification à deux facteurs",
         "successful_login": "Cela a fonctionné !",
@@ -1401,7 +1399,9 @@
         "welcome_back": "Vous vous êtes connecté avec succès à l'aide de l'authentification à deux facteurs. Nous sommes heureux de vous revoir !",
         "already_have_app_steps": "1. Dans l'application, sélectionnez <strong class=\"text-strong\">Configuration du compte</strong><br>2. Sélectionnez <strong class=\"text-strong\">Scanner un code QR</strong> ou <strong class=\"text-strong\">Entrer une clé d'installation</strong>: <strong class=\"text-strong\"> {{secret}}</strong>",
         "dont_have_app": "<strong class=\"text-strong\"> Si vous n'avez pas l'application {{name}}, </strong>vous pouvez la télécharger sur le <strong class=\"text-strong\">Play Store</strong> ou l'<strong class=\"text-strong\">App Store</strong>.",
-        "already_have_app": "Si vous avez déjà l'application {{name}}, suivez les étapes ci-dessous :"
+        "already_have_app": "Si vous avez déjà l'application {{name}}, suivez les étapes ci-dessous :",
+        "enter_app_code_6_digits": "Pour continuer, entrez le code de sécurité à 6 chiffres de {{provider}}",
+        "seconds": "{{time}} seconde(s)"
     },
     "modal_fund_help": {
         "chat": "Chat",
@@ -2010,7 +2010,6 @@
         }
     },
     "preferences_notifications": {
-        "auto_close_after": "Les notifications pop-up sont automatiquement fermées après {valeur} secondes.",
         "auto_close_disabled": "La fermeture automatique est désactivée",
         "auto_close_disabled_description": "La fermeture automatique des notifications contextuelles est désactivée.",
         "auto_close_enabled": "La fermeture automatique est activée",
@@ -2150,7 +2149,8 @@
         },
         "unsubscribe": "Se désabonner de toutes les notifications par courrier électronique",
         "unsubscribe_button": "Se désinscrire",
-        "unsubscribe_desc": "Je souhaite me désinscrire de toutes les notifications par e-mail."
+        "unsubscribe_desc": "Je souhaite me désinscrire de toutes les notifications par e-mail.",
+        "auto_close_after": "Les notifications pop-up se ferment automatiquement après {{value}} secondes."
     },
     "privacy": {
         "breadcrumbs": {
@@ -2666,7 +2666,6 @@
             "title": "Détails de la réservation"
         },
         "expired": "Désolé, votre réservation a été annulée pendant le processus de paiement car le produit sélectionné est épuisé.",
-        "expiring": "Veuillez noter qu'il reste <strong>{expireIn} minutes</strong> pour effectuer le paiement supplémentaire. Dans le cas contraire, la réservation sera automatiquement annulée.",
         "extra_amount_refund": {
             "amount": "Montant",
             "date": "Date",
@@ -2702,7 +2701,8 @@
                 "waiting": "En attente de paiement"
             }
         },
-        "title": "Détails de l'appoint"
+        "title": "Détails de l'appoint",
+        "expiring": "Veuillez noter qu'il reste <strong>{{expiresIn}} minutes</strong> pour effectuer le paiement supplémentaire. Dans le cas contraire, la réservation sera automatiquement annulée."
     },
     "reservations": {
         "breadcrumbs": {
@@ -3476,7 +3476,7 @@
         "error": "Échec !",
         "fund_activation": {
             "digid_success": "Connecté avec DigiD.",
-            "success": "Crédit {nom_du_fonds} activé !"
+            "success": "{{fund_name}} crédit activé !"
         },
         "pre_check": {
             "downloaded": "Le téléchargement commencera dans quelques instants.",
@@ -3514,5 +3514,27 @@
         "placeholders": {
             "select_option": "Sélectionner une option"
         }
+    },
+    "modal_deactivate_voucher": {
+        "back": "Retour",
+        "cancel": "Annuler",
+        "close": "Fermer",
+        "confirm": "Confirmer",
+        "confirm_stop_participation": "Êtes-vous sûr de vouloir arrêter votre participation ?",
+        "header_title": "Arrêter la participation",
+        "max_characters": "Max. 140 caractères",
+        "next": "Suivant",
+        "reason": "Raison",
+        "reason_for_stopping": "Raison de l'arrêt :",
+        "reasons": {
+            "income_change": "Variation des revenus",
+            "moved": "Déménagement",
+            "not_interested": "L'offre n'est pas attrayante",
+            "other": "Dans le cas contraire"
+        },
+        "stop_participation": "Arrêt de votre participation à {{name}}.",
+        "stop_successful": "Arrêt de la participation",
+        "success_message": "Votre participation à {{name}} a cessé.",
+        "warning": "Note : Vous ne pouvez plus utiliser votre crédit après cela. Votre crédit {{name}} sera désactivé."
     }
 }
\ No newline at end of file
diff --git a/react/src/webshop/i18n/translated/pl.json b/react/src/webshop/i18n/translated/pl.json
index 55f464071..aea5ed94b 100644
--- a/react/src/webshop/i18n/translated/pl.json
+++ b/react/src/webshop/i18n/translated/pl.json
@@ -1368,9 +1368,9 @@
         "enter_sms_code": "Wprowadź 6-cyfrowy kod SMS",
         "error_404": "Wystąpił błąd. Odśwież stronę.",
         "resend_code": "Wyślij ponownie kod",
-        "seconds": "{time} second(s)",
         "unknown_error": "Nieznany błąd.",
-        "verify": "Weryfikacja"
+        "verify": "Weryfikacja",
+        "seconds": "{{time}} sekunda(y)"
     },
     "modal_2fa_setup": {
         "2fa": "Uwierzytelnianie dwuskładnikowe",
@@ -1381,7 +1381,6 @@
         "confirm": "Potwierdzenie",
         "enter_2fa_code": "Aby kontynuować, wprowadź kod bezpieczeństwa uwierzytelniania dwuskładnikowego.",
         "enter_app_code": "Wprowadź 6-cyfrowy kod z poziomu aplikacji.",
-        "enter_app_code_6_digits": "Aby kontynuować, wprowadź 6-cyfrowy kod bezpieczeństwa od {dostawcy}.",
         "enter_phone": "Aby kontynuować, wprowadź swój numer telefonu",
         "enter_sms_code": "Wprowadź 6-cyfrowy kod SMS",
         "enter_sms_code_6_digits": "Aby kontynuować, wprowadź 6-cyfrowy kod SMS wysłany na Twój numer telefonu.",
@@ -1392,7 +1391,6 @@
         "link_phone": "Połącz swój numer telefonu",
         "phone_number": "Numer telefonu",
         "resend_code": "Wyślij ponownie kod",
-        "seconds": "{time} second(s)",
         "select_auth_app": "Wybierz aplikację uwierzytelniającą, której chcesz użyć.",
         "setup_2fa": "Konfigurowanie uwierzytelniania dwuskładnikowego",
         "successful_login": "Udało się!",
@@ -1401,7 +1399,9 @@
         "welcome_back": "Pomyślnie zalogowano się przy użyciu uwierzytelniania dwuskładnikowego. Witamy ponownie!",
         "already_have_app_steps": "1. W aplikacji wybierz opcję <strong class=\"text-strong\">Konfiguracja konta</strong><br>2. Wybierz <strong class=\"text-strong\">Skanuj kod QR</strong> lub <strong class=\"text-strong\">Wprowadź klucz instalacyjny</strong>: <strong class=\"text-strong\"> {{secret}}</strong>",
         "dont_have_app": "<strong class=\"text-strong\"> Jeśli nie masz aplikacji {{name}}, </strong>możesz ją pobrać ze <strong class=\"text-strong\">Sklepu Play</strong> lub <strong class=\"text-strong\">App Store</strong>.",
-        "already_have_app": "Jeśli masz już aplikację {{name}}, wykonaj poniższe czynności:"
+        "already_have_app": "Jeśli masz już aplikację {{name}}, wykonaj poniższe czynności:",
+        "enter_app_code_6_digits": "Aby kontynuować, wprowadź 6-cyfrowy kod bezpieczeństwa {{provider}}",
+        "seconds": "{{time}} sekunda(y)"
     },
     "modal_fund_help": {
         "chat": "Czat",
@@ -2010,7 +2010,6 @@
         }
     },
     "preferences_notifications": {
-        "auto_close_after": "Powiadomienia wyskakujące są automatycznie zamykane po {wartość} sekundach.",
         "auto_close_disabled": "Automatyczne zamykanie jest wyłączone",
         "auto_close_disabled_description": "Automatyczne zamykanie wyskakujących powiadomień jest wyłączone.",
         "auto_close_enabled": "Automatyczne zamykanie jest włączone",
@@ -2150,7 +2149,8 @@
         },
         "unsubscribe": "Rezygnacja z subskrypcji wszystkich powiadomień e-mail",
         "unsubscribe_button": "Zrezygnuj z subskrypcji",
-        "unsubscribe_desc": "Chcę zrezygnować z subskrypcji wszystkich powiadomień e-mail."
+        "unsubscribe_desc": "Chcę zrezygnować z subskrypcji wszystkich powiadomień e-mail.",
+        "auto_close_after": "Powiadomienia wyskakujące zamykają się automatycznie po {{value}} sekundach."
     },
     "privacy": {
         "breadcrumbs": {
@@ -2666,7 +2666,6 @@
             "title": "Szczegóły rezerwacji"
         },
         "expired": "Przepraszamy, rezerwacja została anulowana podczas procesu realizacji zakupu, ponieważ wybrany produkt został wyprzedany.",
-        "expiring": "Należy pamiętać, że na dokonanie dodatkowej płatności pozostało <strong>{expiresIn} minut</strong>. W przeciwnym razie rezerwacja zostanie automatycznie anulowana.",
         "extra_amount_refund": {
             "amount": "Kwota",
             "date": "Data",
@@ -2702,7 +2701,8 @@
                 "waiting": "Oczekiwanie na płatność"
             }
         },
-        "title": "Szczegóły doładowania"
+        "title": "Szczegóły doładowania",
+        "expiring": "Należy pamiętać, że na dokonanie dodatkowej płatności pozostało <strong>{{expiresIn}} minut</strong>. W przeciwnym razie rezerwacja zostanie automatycznie anulowana."
     },
     "reservations": {
         "breadcrumbs": {
@@ -3476,7 +3476,7 @@
         "error": "Nie udało się!",
         "fund_activation": {
             "digid_success": "Zalogowany za pomocą DigiD.",
-            "success": "Kredyt {nazwa_funduszu} aktywowany!"
+            "success": "{{fund_name}} kredyt aktywowany!"
         },
         "pre_check": {
             "downloaded": "Pobieranie rozpocznie się za kilka chwil.",
@@ -3514,5 +3514,27 @@
         "placeholders": {
             "select_option": "Wybierz opcję"
         }
+    },
+    "modal_deactivate_voucher": {
+        "back": "Powrót",
+        "cancel": "Anuluj",
+        "close": "Zamknij",
+        "confirm": "Potwierdzenie",
+        "confirm_stop_participation": "Czy na pewno chcesz zrezygnować z uczestnictwa?",
+        "header_title": "Zaprzestanie uczestnictwa",
+        "max_characters": "Maks. 140 znaków",
+        "next": "Następny",
+        "reason": "Powód",
+        "reason_for_stopping": "Powód zatrzymania:",
+        "reasons": {
+            "income_change": "Zmiana dochodu",
+            "moved": "Relokacja",
+            "not_interested": "Oferta nie jest atrakcyjna",
+            "other": "W przeciwnym razie"
+        },
+        "stop_participation": "Zaprzestanie uczestnictwa w {{name}}.",
+        "stop_successful": "Udział został wstrzymany",
+        "success_message": "Twój udział w {{name}} został wstrzymany.",
+        "warning": "Uwaga: Po wykonaniu tej czynności nie można już korzystać z kredytu. Kredyt {{name}} zostanie dezaktywowany."
     }
 }
\ No newline at end of file
diff --git a/react/src/webshop/i18n/translated/ru.json b/react/src/webshop/i18n/translated/ru.json
index 4bb9487bf..081579d90 100644
--- a/react/src/webshop/i18n/translated/ru.json
+++ b/react/src/webshop/i18n/translated/ru.json
@@ -1368,9 +1368,9 @@
         "enter_sms_code": "Введите 6-значный код SMS",
         "error_404": "Произошла ошибка. Пожалуйста, обновите страницу.",
         "resend_code": "Повторная отправка кода",
-        "seconds": "{время} секунда(ы)",
         "unknown_error": "Неизвестная ошибка.",
-        "verify": "Проверьте"
+        "verify": "Проверьте",
+        "seconds": "{{time}} секунда(ы)"
     },
     "modal_2fa_setup": {
         "2fa": "Двухфакторная аутентификация",
@@ -1381,7 +1381,6 @@
         "confirm": "Подтвердите",
         "enter_2fa_code": "Чтобы продолжить, введите код безопасности двухфакторной аутентификации.",
         "enter_app_code": "Введите 6-значный код в приложении",
-        "enter_app_code_6_digits": "Чтобы продолжить, введите 6-значный код безопасности от {провайдера}",
         "enter_phone": "Чтобы продолжить, введите свой номер телефона",
         "enter_sms_code": "Введите 6-значный код SMS",
         "enter_sms_code_6_digits": "Чтобы продолжить, введите 6-значный SMS-код, отправленный на ваш номер телефона.",
@@ -1392,7 +1391,6 @@
         "link_phone": "Свяжите свой номер телефона",
         "phone_number": "Номер телефона",
         "resend_code": "Повторная отправка кода",
-        "seconds": "{время} секунда(ы)",
         "select_auth_app": "Выберите приложение для аутентификации, которое вы хотите использовать.",
         "setup_2fa": "Настройка двухфакторной аутентификации",
         "successful_login": "Это сработало!",
@@ -1401,7 +1399,9 @@
         "welcome_back": "Вы успешно вошли в систему с помощью двухфакторной аутентификации. С возвращением!",
         "already_have_app_steps": "1. В приложении выберите <strong class=\"text-strong\">Настройка учетной записи</strong><br>2. Выберите <strong class=\"text-strong\">Сканировать QR-код</strong> или <strong class=\"text-strong\">Ввести ключ установки</strong>: <strong class=\"text-strong\"> {{secret}}</strong>",
         "dont_have_app": "<strong class=\"text-strong\"> Если у вас нет приложения {{name}}, </strong>вы можете загрузить его из <strong class=\"text-strong\">Play Store</strong> или <strong class=\"text-strong\">App Store</strong>.",
-        "already_have_app": "Если у вас уже есть приложение {{name}}, выполните следующие действия:"
+        "already_have_app": "Если у вас уже есть приложение {{name}}, выполните следующие действия:",
+        "enter_app_code_6_digits": "Чтобы продолжить, введите 6-значный код безопасности {{provider}}",
+        "seconds": "{{time}} секунда(ы)"
     },
     "modal_fund_help": {
         "chat": "Чат",
@@ -2010,7 +2010,6 @@
         }
     },
     "preferences_notifications": {
-        "auto_close_after": "Всплывающие уведомления автоматически закрываются через {значение} секунд.",
         "auto_close_disabled": "Автоматическое закрытие отключено",
         "auto_close_disabled_description": "Автоматическое закрытие всплывающих уведомлений отключено.",
         "auto_close_enabled": "Автоматическое закрытие включено",
@@ -2150,7 +2149,8 @@
         },
         "unsubscribe": "Отказаться от всех уведомлений по электронной почте",
         "unsubscribe_button": "Отписаться от рассылки",
-        "unsubscribe_desc": "Я хочу отписаться от всех уведомлений по электронной почте."
+        "unsubscribe_desc": "Я хочу отписаться от всех уведомлений по электронной почте.",
+        "auto_close_after": "Всплывающие уведомления автоматически закрываются через {{value}} секунд."
     },
     "privacy": {
         "breadcrumbs": {
@@ -2666,7 +2666,6 @@
             "title": "Детали бронирования"
         },
         "expired": "Извините, ваше бронирование было отменено в процессе оформления заказа, поскольку выбранный товар распродан.",
-        "expiring": "Обратите внимание, что для внесения дополнительной оплаты осталось <strong>{expiresIn} минут</strong>. В противном случае бронирование будет отменено автоматически.",
         "extra_amount_refund": {
             "amount": "Сумма",
             "date": "Дата",
@@ -2702,7 +2701,8 @@
                 "waiting": "Ожидание оплаты"
             }
         },
-        "title": "Детали пополнения счета"
+        "title": "Детали пополнения счета",
+        "expiring": "Пожалуйста, обратите внимание, что для внесения дополнительной оплаты осталось <strong>{{expiresIn}} минут</strong>. В противном случае бронирование будет автоматически отменено."
     },
     "reservations": {
         "breadcrumbs": {
@@ -3476,7 +3476,7 @@
         "error": "Не удалось!",
         "fund_activation": {
             "digid_success": "Вошел в систему с помощью DigiD.",
-            "success": "{имя_фонда} кредит активирован!"
+            "success": "{{fund_name}} кредит активирован!"
         },
         "pre_check": {
             "downloaded": "Загрузка начнется через несколько мгновений.",
@@ -3514,5 +3514,27 @@
         "placeholders": {
             "select_option": "Выберите вариант"
         }
+    },
+    "modal_deactivate_voucher": {
+        "back": "Назад",
+        "cancel": "Отмена",
+        "close": "Закрыть",
+        "confirm": "Подтвердите",
+        "confirm_stop_participation": "Вы уверены, что хотите прекратить свое участие?",
+        "header_title": "Прекратить участие",
+        "max_characters": "Макс. 140 символов",
+        "next": "Следующий",
+        "reason": "Причина",
+        "reason_for_stopping": "Причина остановки:",
+        "reasons": {
+            "income_change": "Изменение в доходах",
+            "moved": "Переезд",
+            "not_interested": "Предложение не является привлекательным",
+            "other": "В противном случае"
+        },
+        "stop_participation": "Приостановить свое участие на сайте {{name}}.",
+        "stop_successful": "Участие прекращено",
+        "success_message": "Ваше участие на сайте {{name}} прекращено.",
+        "warning": "Примечание: После этого вы больше не сможете использовать свой кредит. Ваш кредит {{name}} будет деактивирован."
     }
 }
\ No newline at end of file
diff --git a/react/src/webshop/i18n/translated/tr.json b/react/src/webshop/i18n/translated/tr.json
index 19bcc9b95..26ea9aaa3 100644
--- a/react/src/webshop/i18n/translated/tr.json
+++ b/react/src/webshop/i18n/translated/tr.json
@@ -2298,7 +2298,6 @@
         }
     },
     "preferences_notifications": {
-        "auto_close_after": "Açılır bildirimler {değer} saniye sonra otomatik olarak kapatılır.",
         "auto_close_disabled": "Otomatik kapanma devre dışı",
         "auto_close_disabled_description": "Açılır bildirimlerin otomatik olarak kapatılması devre dışı bırakıldı.",
         "auto_close_enabled": "Otomatik kapatma etkinleştirildi",
@@ -2438,7 +2437,8 @@
         },
         "unsubscribe": "Tüm e-posta bildirimleri aboneliğinden çıkın",
         "unsubscribe_button": "Abonelikten çık",
-        "unsubscribe_desc": "Tüm e-posta bildirimleri aboneliğinden çıkmak istiyorum."
+        "unsubscribe_desc": "Tüm e-posta bildirimleri aboneliğinden çıkmak istiyorum.",
+        "auto_close_after": "Açılır bildirimler {{value}} saniye sonra otomatik olarak kapanır."
     },
     "privacy": {
         "breadcrumbs": {
@@ -2629,7 +2629,6 @@
             "title": "Rezervasyon detayları"
         },
         "expired": "Üzgünüz, seçilen ürün tükendiği için ödeme işlemi sırasında rezervasyonunuz iptal edildi.",
-        "expiring": "Lütfen ek ödemeyi gerçekleştirmek için <strong>{sona eren} dakikalar</strong> kaldığını unutmayın. Aksi takdirde rezervasyon otomatik olarak iptal edilecektir.",
         "extra_amount_refund": {
             "amount": "Miktar",
             "date": "Tarih",
@@ -2665,7 +2664,8 @@
                 "waiting": "Ödeme için bekliyorum"
             }
         },
-        "title": "Yükleme ayrıntıları"
+        "title": "Yükleme ayrıntıları",
+        "expiring": "Ek ödemeyi yapmak için <strong>{{expiresIn}} dakika</strong> kaldığını lütfen unutmayın. Aksi takdirde rezervasyon otomatik olarak iptal edilecektir."
     },
     "reservations": {
         "breadcrumbs": {
@@ -2770,9 +2770,9 @@
         "enter_sms_code": "6 haneli SMS kodunu girin",
         "error_404": "Bir hata meydana geldi. Lütfen sayfayı yenileyin.",
         "resend_code": "Kodu yeniden gönder",
-        "seconds": "{zaman} saniye(ler)",
         "unknown_error": "Bilinmeyen hata.",
-        "verify": "Doğrulama"
+        "verify": "Doğrulama",
+        "seconds": "{{time}} saniye(ler)"
     },
     "modal_2fa_setup": {
         "2fa": "İki faktörlü kimlik doğrulama",
@@ -2783,7 +2783,6 @@
         "confirm": "Onaylayın",
         "enter_2fa_code": "Devam etmek için iki faktörlü kimlik doğrulama güvenlik kodunu girin.",
         "enter_app_code": "Uygulama içinden 6 haneli kodu girin",
-        "enter_app_code_6_digits": "Devam etmek için {sağlayıcı}'dan 6 haneli güvenlik kodunu girin",
         "enter_phone": "Devam etmek için telefon numaranızı girin",
         "enter_sms_code": "6 haneli SMS kodunu girin",
         "enter_sms_code_6_digits": "Devam etmek için lütfen telefon numaranıza gönderilen 6 haneli SMS kodunu girin.",
@@ -2794,7 +2793,6 @@
         "link_phone": "Telefon numaranızı bağlayın",
         "phone_number": "Telefon numarası",
         "resend_code": "Kodu yeniden gönder",
-        "seconds": "{zaman} saniye(ler)",
         "select_auth_app": "Kullanmak istediğiniz kimlik doğrulama uygulamasını seçin.",
         "setup_2fa": "İki faktörlü kimlik doğrulamayı ayarlama",
         "successful_login": "İşe yaradı!",
@@ -2803,7 +2801,9 @@
         "welcome_back": "İki faktörlü kimlik doğrulama ile başarıyla giriş yaptınız. Tekrar hoş geldiniz!",
         "already_have_app_steps": "1. Uygulamada, <strong class=\"text-strong\">Hesap kurulumu</strong>'nu seçin<br>2. <strong class=\"text-strong\">QR kodu tara</strong> veya <strong class=\"text-strong\">Yükleme anahtarı girin öğesini</strong> seçin: <strong class=\"text-strong\"> {{secret}}</strong>",
         "dont_have_app": "<strong class=\"text-strong\"> {{name}} uygulamasına sahip değilseniz </strong>, <strong class=\"text-strong\">Play Store</strong> veya <strong class=\"text-strong\">App Store</strong>'dan indirebilirsiniz.",
-        "already_have_app": "{{name}} uygulamasına zaten sahipseniz, aşağıdaki adımları izleyin:"
+        "already_have_app": "{{name}} uygulamasına zaten sahipseniz, aşağıdaki adımları izleyin:",
+        "enter_app_code_6_digits": "Devam etmek için, 6 haneli güvenlik kodunu girin. {{provider}}",
+        "seconds": "{{time}} saniye(ler)"
     },
     "modal_fund_help": {
         "chat": "Sohbet",
@@ -3476,7 +3476,7 @@
         "error": "Başarısız!",
         "fund_activation": {
             "digid_success": "DigiD ile giriş yapıldı.",
-            "success": "{fon_adı} kredisi etkinleştirildi!"
+            "success": "{{fund_name}} kredi̇ akti̇fleşti̇ri̇ldi̇!"
         },
         "pre_check": {
             "downloaded": "İndirme işlemi birkaç dakika içinde başlayacaktır.",
@@ -3514,5 +3514,27 @@
         "placeholders": {
             "select_option": "Seçeneği seçin"
         }
+    },
+    "modal_deactivate_voucher": {
+        "back": "Geri",
+        "cancel": "İptal",
+        "close": "Kapat",
+        "confirm": "Onaylayın",
+        "confirm_stop_participation": "Katılımınızı durdurmak istediğinizden emin misiniz?",
+        "header_title": "Katılımı durdurun",
+        "max_characters": "Maks. 140 karakter",
+        "next": "Sonraki",
+        "reason": "Sebep",
+        "reason_for_stopping": "Durma sebebi:",
+        "reasons": {
+            "income_change": "Gelirdeki değişim",
+            "moved": "Yer Değiştirme",
+            "not_interested": "Teklif cazip değil",
+            "other": "Aksi takdirde"
+        },
+        "stop_participation": "{{name}} katılımınızı durdurmak.",
+        "stop_successful": "Katılım durduruldu",
+        "success_message": "{{name}} katılımınız sona ermiştir.",
+        "warning": "Not: Bundan sonra kredinizi artık kullanamazsınız. {{name}} krediniz devre dışı bırakılacaktır."
     }
 }
\ No newline at end of file
diff --git a/react/src/webshop/i18n/translated/uk.json b/react/src/webshop/i18n/translated/uk.json
index 6dfa67322..b0157286d 100644
--- a/react/src/webshop/i18n/translated/uk.json
+++ b/react/src/webshop/i18n/translated/uk.json
@@ -1368,9 +1368,9 @@
         "enter_sms_code": "Введіть 6-значний SMS-код",
         "error_404": "Виникла помилка. Будь ласка, оновіть сторінку.",
         "resend_code": "Код для повторного відправлення",
-        "seconds": "{час} секунда(и)",
         "unknown_error": "Невідома помилка.",
-        "verify": "Підтвердити"
+        "verify": "Підтвердити",
+        "seconds": "{{time}} другий(і)"
     },
     "modal_2fa_setup": {
         "2fa": "Двофакторна автентифікація",
@@ -1381,7 +1381,6 @@
         "confirm": "Підтвердити",
         "enter_2fa_code": "Щоб продовжити, введіть код безпеки двофакторної автентифікації.",
         "enter_app_code": "Введіть 6-значний код у додатку",
-        "enter_app_code_6_digits": "Щоб продовжити, введіть 6-значний код безпеки від {провайдера}",
         "enter_phone": "Щоб продовжити, введіть свій номер телефону",
         "enter_sms_code": "Введіть 6-значний SMS-код",
         "enter_sms_code_6_digits": "Щоб продовжити, введіть 6-значний SMS-код, надісланий на ваш номер телефону.",
@@ -1392,7 +1391,6 @@
         "link_phone": "Прив'яжіть свій номер телефону",
         "phone_number": "Номер телефону",
         "resend_code": "Код для повторного відправлення",
-        "seconds": "{час} секунда(и)",
         "select_auth_app": "Виберіть програму автентифікації, яку ви хочете використовувати.",
         "setup_2fa": "Налаштування двофакторної автентифікації",
         "successful_login": "Спрацювало!",
@@ -1401,7 +1399,9 @@
         "welcome_back": "Ви успішно увійшли за допомогою двофакторної автентифікації. З поверненням!",
         "already_have_app_steps": "1. У додатку виберіть Налаштування <strong class=\"text-strong\">облікового запису</strong><br>2. Виберіть <strong class=\"text-strong\">Відсканувати QR-код</strong> або <strong class=\"text-strong\">Ввести ключ встановлення</strong>: <strong class=\"text-strong\"> {{secret}}</strong>",
         "dont_have_app": "<strong class=\"text-strong\"> Якщо у вас немає програми {{name}} </strong>, ви можете завантажити її з <strong class=\"text-strong\">Play Store</strong> або <strong class=\"text-strong\">App Store</strong>.",
-        "already_have_app": "Якщо у вас вже є додаток {{name}}, виконайте наведені нижче дії:"
+        "already_have_app": "Якщо у вас вже є додаток {{name}}, виконайте наведені нижче дії:",
+        "enter_app_code_6_digits": "Щоб продовжити, введіть 6-значний код безпеки {{provider}}",
+        "seconds": "{{time}} другий(і)"
     },
     "modal_fund_help": {
         "chat": "Чат",
@@ -2010,7 +2010,6 @@
         }
     },
     "preferences_notifications": {
-        "auto_close_after": "Спливаючі сповіщення автоматично закриваються через {значення} секунд.",
         "auto_close_disabled": "Автоматичне закриття вимкнено",
         "auto_close_disabled_description": "Автоматичне закриття спливаючих сповіщень вимкнено.",
         "auto_close_enabled": "Автоматичне закриття ввімкнено",
@@ -2150,7 +2149,8 @@
         },
         "unsubscribe": "Відпишіться від усіх сповіщень на електронну пошту",
         "unsubscribe_button": "Відмовитися від підписки",
-        "unsubscribe_desc": "Я хочу відписатися від усіх сповіщень на електронну пошту."
+        "unsubscribe_desc": "Я хочу відписатися від усіх сповіщень на електронну пошту.",
+        "auto_close_after": "Спливаючі сповіщення закриваються автоматично через {{value}} секунд."
     },
     "privacy": {
         "breadcrumbs": {
@@ -2666,7 +2666,6 @@
             "title": "Деталі бронювання"
         },
         "expired": "На жаль, ваше бронювання було скасовано під час оформлення замовлення, оскільки обраний товар розпродано.",
-        "expiring": "Будь ласка, зверніть увагу, що до здійснення доплати залишилося <strong>{закінчується через} хвилин</strong>. В іншому випадку бронювання буде скасовано автоматично.",
         "extra_amount_refund": {
             "amount": "Сума",
             "date": "Дата",
@@ -2702,7 +2701,8 @@
                 "waiting": "Чекаємо на оплату"
             }
         },
-        "title": "Деталі поповнення"
+        "title": "Деталі поповнення",
+        "expiring": "Будь ласка, зверніть увагу, що залишилося <strong>{{expiresIn}} хвилин</strong>, щоб здійснити доплату. В іншому випадку бронювання буде автоматично скасовано."
     },
     "reservations": {
         "breadcrumbs": {
@@ -3476,7 +3476,7 @@
         "error": "Не вийшло!",
         "fund_activation": {
             "digid_success": "Увійшов за допомогою DigiD.",
-            "success": "{Кредит активовано!"
+            "success": "{{fund_name}} кредит активовано!"
         },
         "pre_check": {
             "downloaded": "Завантаження почнеться за кілька хвилин.",
@@ -3514,5 +3514,27 @@
         "placeholders": {
             "select_option": "Виберіть варіант"
         }
+    },
+    "modal_deactivate_voucher": {
+        "back": "Назад",
+        "cancel": "Скасувати",
+        "close": "Закрити",
+        "confirm": "Підтвердити",
+        "confirm_stop_participation": "Ви впевнені, що хочете припинити свою участь?",
+        "header_title": "Припинити участь",
+        "max_characters": "Макс. 140 символів",
+        "next": "Далі",
+        "reason": "Причина",
+        "reason_for_stopping": "Причина зупинки:",
+        "reasons": {
+            "income_change": "Зміна доходу",
+            "moved": "Переїзд",
+            "not_interested": "Пропозиція не є привабливою",
+            "other": "В іншому випадку"
+        },
+        "stop_participation": "Припинення вашої {{name}} участі.",
+        "stop_successful": "Участь припинено",
+        "success_message": "Ваша участь у {{name}} припинена.",
+        "warning": "Примітка: Після цього ви більше не зможете використовувати свій кредит. Ваш кредит {{name}} буде деактивовано."
     }
 }
\ No newline at end of file
diff --git a/translations/cache/cache.json b/translations/cache/cache.json
index 0dbec6151..f419a611d 100644
--- a/translations/cache/cache.json
+++ b/translations/cache/cache.json
@@ -3713,7 +3713,7 @@
     ],
     [
         "modal_2fa_deactivate.seconds",
-        "{time} seconde(n)"
+        "{{time}} seconde(n)"
     ],
     [
         "modal_2fa_deactivate.unknown_error",
@@ -3769,7 +3769,7 @@
     ],
     [
         "modal_2fa_setup.enter_app_code_6_digits",
-        "Om door te gaan, voer de 6-cijferige beveiligingscode in van {provider}"
+        "Om door te gaan, voer de 6-cijferige beveiligingscode in van {{provider}}"
     ],
     [
         "modal_2fa_setup.enter_phone",
@@ -3805,7 +3805,7 @@
     ],
     [
         "modal_2fa_setup.seconds",
-        "{time} seconde(n)"
+        "{{time}} seconde(n)"
     ],
     [
         "modal_2fa_setup.select_auth_app",
@@ -3831,6 +3831,78 @@
         "modal_2fa_setup.welcome_back",
         "Je bent succesvol ingelogd met tweefactorauthenticatie. Welkom terug!"
     ],
+    [
+        "modal_deactivate_voucher.back",
+        "Terug"
+    ],
+    [
+        "modal_deactivate_voucher.cancel",
+        "Annuleer"
+    ],
+    [
+        "modal_deactivate_voucher.close",
+        "Sluiten"
+    ],
+    [
+        "modal_deactivate_voucher.confirm",
+        "Bevestigen"
+    ],
+    [
+        "modal_deactivate_voucher.confirm_stop_participation",
+        "Weet u zeker dat u uw deelname wilt stoppen?"
+    ],
+    [
+        "modal_deactivate_voucher.header_title",
+        "Deelname stoppen"
+    ],
+    [
+        "modal_deactivate_voucher.max_characters",
+        "Max. 140 tekens"
+    ],
+    [
+        "modal_deactivate_voucher.next",
+        "Volgende"
+    ],
+    [
+        "modal_deactivate_voucher.reason",
+        "Reden"
+    ],
+    [
+        "modal_deactivate_voucher.reason_for_stopping",
+        "Reden van stoppen:"
+    ],
+    [
+        "modal_deactivate_voucher.reasons.income_change",
+        "Verandering in inkomen"
+    ],
+    [
+        "modal_deactivate_voucher.reasons.moved",
+        "Verhuizing"
+    ],
+    [
+        "modal_deactivate_voucher.reasons.not_interested",
+        "Aanbod is niet aantrekkelijk"
+    ],
+    [
+        "modal_deactivate_voucher.reasons.other",
+        "Anders"
+    ],
+    [
+        "modal_deactivate_voucher.stop_participation",
+        "Je {{name}} deelname stoppen."
+    ],
+    [
+        "modal_deactivate_voucher.stop_successful",
+        "Deelname gestopt"
+    ],
+    [
+        "modal_deactivate_voucher.success_message",
+        "Je {{name}} deelname is gestopt."
+    ],
+    [
+        "modal_deactivate_voucher.warning",
+        "Let op: Je kunt hierna geen gebruik meer maken van je tegoed. Je {{name}} tegoed wordt gedeactiveerd."
+    ],
     [
         "modal_fund_help.chat",
         "Chat"
@@ -5501,7 +5573,7 @@
     ],
     [
         "preferences_notifications.auto_close_after",
-        "Pop-up meldingen worden automatisch na {value} seconden gesloten."
+        "Pop-up meldingen worden automatisch na {{value}} seconden gesloten."
     ],
     [
         "preferences_notifications.auto_close_disabled",
@@ -6745,7 +6817,7 @@
     ],
     [
         "push.fund_activation.success",
-        "{fund_name} tegoed geactiveerd!"
+        "{{fund_name}} tegoed geactiveerd!"
     ],
     [
         "push.pre_check.downloaded",
@@ -7185,7 +7257,7 @@
     ],
     [
         "reservation.expiring",
-        "Houd er rekening mee dat er nog <strong>{expiresIn} minuten</strong> over zijn om de bijbetaling uit te voeren. Anders zal de reservering automatisch worden geannuleerd."
+        "Houd er rekening mee dat er nog <strong>{{expiresIn}} minuten</strong> over zijn om de bijbetaling uit te voeren. Anders zal de reservering automatisch worden geannuleerd."
     ],
     [
         "reservation.extra_amount_refund.amount",

From f4a0bf4d22e574e761b9bebb0b5642bd12061b5c Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Thu, 17 Apr 2025 15:51:34 +0300
Subject: [PATCH 12/23] add webshop payment options filter

---
 package-lock.json                             |  59 +++++-
 package.json                                  |   3 +
 .../_webshop-common/assets/img/icon-ideal.svg |   1 +
 .../blocks/block-products-icons-info.scss     | 100 +++++++++
 .../includes/blocks/block-products-list.scss  | 168 ++++++++++++---
 .../scss/includes/blocks/block-products.scss  |  39 +++-
 .../scss/includes/blocks/block-showcase.scss  | 131 +++++++++++-
 .../scss/includes/blocks/product.scss         | 200 ++++++++----------
 .../scss/includes/components/_form.scss       |  78 ++++++-
 react/assets/forus-webshop/scss/webshop.scss  |   1 +
 react/src/dashboard/props/models/Product.tsx  |   1 +
 .../elements/forms/RangeControl.tsx           |  47 ++++
 .../lists/products-list/ProductsListItem.tsx  |   3 +-
 .../templates/ProductsListItemGrid.tsx        |  57 ++++-
 .../templates/ProductsListItemList.tsx        | 100 +++++++--
 .../components/modals/ModalNotification.tsx   |   8 +-
 .../pages/products-show/ProductsShow.tsx      | 106 ++++++++--
 .../components/pages/products/Products.tsx    | 127 ++++++++++-
 .../elements/ProductsFilterOptions.tsx        |  87 ++++++++
 .../src/webshop/hooks/useProductFeatures.tsx  |  13 ++
 .../useShowProductPaymentOptionsInfoModal.tsx |  75 +++++++
 react/src/webshop/i18n/i18n-nl.mjs            |  23 +-
 .../modal_product_payment_options_info.mjs    |  15 ++
 react/src/webshop/i18n/nl/pages/product.mjs   |   7 +
 react/src/webshop/i18n/nl/pages/products.mjs  |   8 +
 react/src/webshop/services/ProductService.ts  |   2 +-
 26 files changed, 1241 insertions(+), 218 deletions(-)
 create mode 100644 react/assets/forus-webshop/resources/_webshop-common/assets/img/icon-ideal.svg
 create mode 100644 react/assets/forus-webshop/scss/includes/blocks/block-products-icons-info.scss
 create mode 100644 react/src/webshop/components/elements/forms/RangeControl.tsx
 create mode 100644 react/src/webshop/components/pages/products/elements/ProductsFilterOptions.tsx
 create mode 100644 react/src/webshop/hooks/useProductFeatures.tsx
 create mode 100644 react/src/webshop/hooks/useShowProductPaymentOptionsInfoModal.tsx
 create mode 100644 react/src/webshop/i18n/nl/modals/modal_product_payment_options_info.mjs

diff --git a/package-lock.json b/package-lock.json
index 1bb272d47..befd0445d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -45,7 +45,9 @@
         "react-gtm-module": "^2.0.11",
         "react-i18next": "^15.0.1",
         "react-image-crop": "^11.0.6",
+        "react-range-slider-input": "^3.2.1",
         "react-router-dom": "^6.27.0",
+        "react-slider": "^2.0.6",
         "summernote": "^0.9.1",
         "terser-webpack-plugin": "^5.3.9",
         "turndown": "^7.1.2",
@@ -69,6 +71,7 @@
         "@types/qrcode": "^1.4.1",
         "@types/react": "^18.1.0",
         "@types/react-dom": "^18.0.6",
+        "@types/react-slider": "^1.3.6",
         "@types/turndown": "^5.0.1",
         "@typescript-eslint/eslint-plugin": "^8.18",
         "@typescript-eslint/parser": "^8.8",
@@ -3531,6 +3534,16 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-slider": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/@types/react-slider/-/react-slider-1.3.6.tgz",
+      "integrity": "sha512-RS8XN5O159YQ6tu3tGZIQz1/9StMLTg/FCIPxwqh2gwVixJnlfIodtVx+fpXVMZHe7A58lAX1Q4XTgAGOQaCQg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/retry": {
       "version": "0.12.2",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.2.tgz",
@@ -10775,7 +10788,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -10785,8 +10797,7 @@
     "node_modules/prop-types/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
@@ -11053,6 +11064,36 @@
         "react": ">=16.13.1"
       }
     },
+    "node_modules/react-range-slider-input": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/react-range-slider-input/-/react-range-slider-input-3.2.1.tgz",
+      "integrity": "sha512-MApTX4a/Uzm9ZrJFoWu2kM87TKHJpnHHBV2JR9N9WmOSWk832DDBT3suNN6vCQmFRRtfJO9stw+bsiGpto0Hig==",
+      "license": "MIT",
+      "dependencies": {
+        "clsx": "^1.1.1",
+        "core-js": "^3.22.4"
+      }
+    },
+    "node_modules/react-range-slider-input/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/react-range-slider-input/node_modules/core-js": {
+      "version": "3.41.0",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.41.0.tgz",
+      "integrity": "sha512-SJ4/EHwS36QMJd6h/Rg+GyR4A5xE0FSI3eZ+iBVpfqf1x0eTSg1smWLHrA+2jQThZSh97fmSgFSU8B61nxosxA==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/react-router": {
       "version": "6.28.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.28.0.tgz",
@@ -11083,6 +11124,18 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-slider": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/react-slider/-/react-slider-2.0.6.tgz",
+      "integrity": "sha512-gJxG1HwmuMTJ+oWIRCmVWvgwotNCbByTwRkFZC6U4MBsHqJBmxwbYRJUmxy4Tke1ef8r9jfXjgkmY/uHOCEvbA==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": "^16 || ^17 || ^18"
+      }
+    },
     "node_modules/read-only-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-only-stream/-/read-only-stream-2.0.0.tgz",
diff --git a/package.json b/package.json
index 9ebbf9712..d4a0b211b 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "@types/qrcode": "^1.4.1",
     "@types/react": "^18.1.0",
     "@types/react-dom": "^18.0.6",
+    "@types/react-slider": "^1.3.6",
     "@types/turndown": "^5.0.1",
     "@typescript-eslint/eslint-plugin": "^8.18",
     "@typescript-eslint/parser": "^8.8",
@@ -116,7 +117,9 @@
     "react-gtm-module": "^2.0.11",
     "react-i18next": "^15.0.1",
     "react-image-crop": "^11.0.6",
+    "react-range-slider-input": "^3.2.1",
     "react-router-dom": "^6.27.0",
+    "react-slider": "^2.0.6",
     "summernote": "^0.9.1",
     "terser-webpack-plugin": "^5.3.9",
     "turndown": "^7.1.2",
diff --git a/react/assets/forus-webshop/resources/_webshop-common/assets/img/icon-ideal.svg b/react/assets/forus-webshop/resources/_webshop-common/assets/img/icon-ideal.svg
new file mode 100644
index 000000000..d05432a34
--- /dev/null
+++ b/react/assets/forus-webshop/resources/_webshop-common/assets/img/icon-ideal.svg
@@ -0,0 +1 @@
+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.429 11.086H2.224v5.313h3.205v-5.313ZM3.855 10.24c1.002 0 1.814-.81 1.814-1.81s-.812-1.811-1.814-1.811-1.814.81-1.814 1.81c0 1.001.812 1.812 1.814 1.812Z" fill="#000"/><path d="M11.498 1.286H0v17.41h11.498v-.004c2.512-.034 4.502-.657 5.914-1.856C19.129 15.376 20 13.074 20 9.99c0-1.473-.23-2.796-.68-3.929a7.162 7.162 0 0 0-1.899-2.74c-1.457-1.293-3.502-1.992-5.923-2.032v-.003Zm-.217 1.156c2.228 0 4.086.602 5.371 1.743 1.453 1.29 2.19 3.243 2.19 5.806 0 5.079-2.473 7.548-7.56 7.548H1.157V2.442H11.28Z" fill="#000"/><path d="M10.964 16.404H6.9V3.85h4.064-.164c3.39 0 7 1.336 7 6.294 0 5.241-3.61 6.261-7 6.261h.164Z" fill="#CC1B69"/><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="6" y="3" width="12" height="14"><path d="M10.964 16.404H6.9V3.85h4.064-.164c3.39 0 7 1.336 7 6.294 0 5.241-3.61 6.261-7 6.261h.164Z" fill="#CC1B69"/></mask><g mask="url(#a)" fill="#fff"><path d="M6.199 7.09h1.116c.252 0 .444.02.576.058.177.052.329.145.456.278.126.134.223.297.289.49.065.192.099.43.099.714 0 .248-.032.463-.093.642-.076.22-.184.398-.324.534-.106.103-.25.184-.429.241a1.862 1.862 0 0 1-.54.064h-1.15v-3.02Zm.61.513v1.996h.457c.17 0 .295-.01.37-.029a.561.561 0 0 0 .247-.125.637.637 0 0 0 .16-.291c.042-.135.063-.319.063-.552 0-.233-.021-.412-.063-.537a.689.689 0 0 0-.173-.292.58.58 0 0 0-.284-.142 2.8 2.8 0 0 0-.502-.028h-.275Z"/><path d="M6.116 7.008v3.186h1.232c.233 0 .423-.023.565-.068.192-.061.347-.149.462-.26.149-.145.265-.335.344-.567a2.08 2.08 0 0 0 .098-.67c0-.29-.035-.54-.104-.74a1.418 1.418 0 0 0-.307-.52 1.098 1.098 0 0 0-.492-.3 2.237 2.237 0 0 0-.6-.061H6.117Zm1.199.165c.242 0 .429.018.552.054a.936.936 0 0 1 .42.256c.117.124.208.278.27.46.063.183.094.414.094.687 0 .238-.03.445-.088.616a1.258 1.258 0 0 1-.303.501c-.097.094-.23.168-.397.222-.126.04-.3.06-.515.06H6.28V7.173h1.034Z"/><path d="M6.726 7.52v2.162h.54c.18 0 .307-.01.39-.032a.653.653 0 0 0 .283-.144.71.71 0 0 0 .184-.328c.044-.144.065-.333.065-.576a1.85 1.85 0 0 0-.066-.563.77.77 0 0 0-.195-.326.664.664 0 0 0-.323-.163 2.796 2.796 0 0 0-.52-.03h-.358Zm.358.165c.302 0 .43.015.485.027a.51.51 0 0 1 .244.121c.064.06.115.147.152.258.038.116.058.288.058.511 0 .224-.02.402-.058.528a.562.562 0 0 1-.137.254.482.482 0 0 1-.212.106 1.595 1.595 0 0 1-.35.027h-.374V7.685h.192ZM9.425 10.111v-3.02h2.24v.512h-1.63v.668h1.515v.513h-1.515v.815h1.687v.512H9.425Z"/><path d="M9.342 7.008v3.186h2.463v-.677h-1.688v-.65h1.516v-.678h-1.515v-.504h1.63v-.677H9.341Zm2.24.165v.347h-1.63v.834h1.516v.347H9.952v.98h1.687v.348H9.507V7.172h2.075ZM15.14 10.111h-.666l-.264-.686h-1.208l-.251.686h-.648l1.176-3.02h.65l1.21 3.02Zm-1.126-1.197-.417-1.12-.408 1.12h.825Z"/><path d="m13.222 7.008-1.24 3.186h.827l.25-.686h1.095l.264.686h.843l-1.276-3.186h-.763Zm.651.165 1.144 2.856h-.486l-.264-.686h-1.323l-.25.686h-.47l1.111-2.856h.538Z"/><path d="M13.07 8.996h1.063l-.537-1.44-.526 1.44Zm.528-.962.297.797h-.588l.291-.797ZM15.65 10.111V7.115h.61V9.6h1.52v.512h-2.13Z"/><path d="M15.567 7.033v3.16h2.296v-.676h-1.521V7.033h-.775Zm.61.165v2.484h1.52v.347h-1.965V7.198h.445Z"/></g></svg>
\ No newline at end of file
diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-products-icons-info.scss b/react/assets/forus-webshop/scss/includes/blocks/block-products-icons-info.scss
new file mode 100644
index 000000000..f7cb0c8bc
--- /dev/null
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-products-icons-info.scss
@@ -0,0 +1,100 @@
+.block.block-products-payment-options-info {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    padding: 0 15px;
+    margin: 15px 0 0;
+
+    .products-payment-option-info {
+        display: flex;
+        flex-direction: row;
+        gap: 15px;
+        align-items: flex-start;
+        padding: 20px 0;
+        border-bottom: 1px solid var(--border-color);
+
+        .products-payment-option-icon {
+            width: 40px;
+            height: 40px;
+            text-align: center;
+            line-height: 40px;
+            border-radius: 20px;
+            background-color: #f4f5f7;
+            flex: 0 0 40px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            em {
+                font-size: 24px;
+                display: block;
+            }
+
+            img {
+                width: 24px;
+                height: 24px;
+                display: block;
+            }
+        }
+
+        .products-payment-option-content {
+            flex: 1 1 auto;
+            display: flex;
+            flex-direction: column;
+
+            .products-payment-option-title {
+                font: 700 16px/24px var(--base-font);
+            }
+
+            .products-payment-option-description {
+                font: 400 14px/20px var(--base-font);
+            }
+        }
+
+        &:last-child {
+            border-bottom: none;
+        }
+    }
+
+    @media screen and (max-width: 1000px) {
+        border: none;
+        padding: 0;
+
+        .products-payment-option-info {
+            padding: 15px 0;
+            gap: 12px;
+
+            .products-payment-option-icon {
+                width: 36px;
+                height: 36px;
+                text-align: center;
+                line-height: 36px;
+                flex: 0 0 36px;
+
+                em {
+                    font-size: 20px;
+                }
+
+                img {
+                    width: 20px;
+                    height: 20px;
+                }
+            }
+
+            .products-payment-option-content {
+                .products-payment-option-title {
+                    font: 700 15px/22px var(--base-font);
+                }
+
+                .products-payment-option-description {
+                    font: 400 12px/17px var(--base-font);
+                }
+            }
+
+            &:last-child {
+                padding-bottom: 0;
+            }
+        }
+    }
+}
diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-products-list.scss b/react/assets/forus-webshop/scss/includes/blocks/block-products-list.scss
index 31a20af16..5dac3e377 100644
--- a/react/assets/forus-webshop/scss/includes/blocks/block-products-list.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-products-list.scss
@@ -31,55 +31,138 @@
 
         .product-content {
             display: flex;
-            flex-direction: row;
+            flex-direction: column;
             flex: 1 1 auto;
             padding: 15px 15px;
             min-width: 0;
+            gap: 10px;
 
             .product-details {
                 display: flex;
-                flex-direction: column;
+                flex-direction: row;
                 flex: 1 1 auto;
                 word-wrap: break-word;
                 align-items: flex-start;
-                gap: 5px;
+                gap: 10px;
                 min-width: 0;
                 color: var(--tc);
 
-                .product-title,
-                .product-subtitle,
-                .product-price {
+                .product-details-header {
                     display: flex;
-                    margin: 0 0;
-                    max-width: 100%;
-                    word-wrap: break-word;
                     flex-direction: column;
-                    color: var(--products-text-color);
-                }
+                    flex: 1 1 auto;
+                    min-width: 0;
+                    gap: 2px;
+
+                    .product-title,
+                    .product-subtitle {
+                        display: flex;
+                        margin: 0 0;
+                        max-width: 100%;
+                        word-wrap: break-word;
+                        word-break: break-word;
+                        flex-direction: column;
+                        color: var(--products-text-color);
+                    }
 
-                .product-title {
-                    color: var(--products-title-color);
-                    font: 700 18px/26px var(--heading-font-family);
-                    transition: .4s color;
+                    .product-title {
+                        color: var(--products-title-color);
+                        font: 700 18px/26px var(--heading-font-family);
+                        transition: 0.4s color;
+                        display: flex;
+                        flex-direction: row;
+                    }
+
+                    .product-subtitle {
+                        font: 400 14px/22px var(--base-font);
+                    }
                 }
 
-                .product-subtitle {
-                    font: 400 14px/22px var(--base-font);
+                .product-details-bookmark {
+                    flex: 0 0 auto;
                 }
+            }
+
+            .product-actions {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
 
                 .product-price {
+                    display: flex;
+                    margin: 0 0;
+                    max-width: 100%;
+                    word-wrap: break-word;
+                    flex-direction: column;
+                    color: var(--products-text-color);
                     font: 700 18px/24px var(--base-font);
                     flex: 1 0 auto;
                     justify-content: flex-end;
                 }
-            }
 
-            .product-actions {
-                flex: 0 0 auto;
-                display: flex;
-                flex-direction: column;
-                padding: 0 0 0 15px;
-                gap: 10px;
+                .product-icons {
+                    display: flex;
+                    flex-direction: row;
+                    margin: -6px -6px -6px 0;
+
+                    .product-icons-item {
+                        display: flex;
+                        padding: 10px 10px 6px;
+                        align-items: center;
+                        margin: 0 10px 0;
+                        flex-direction: column;
+                        position: relative;
+                        color: #595959;
+                        white-space: nowrap;
+                        gap: 4px;
+                        font: 500 10px/14px var(--base-font);
+                        background: transparent;
+                        transition:
+                            background-color 0.4s,
+                            color 0.4s;
+                        border-radius: var(--border-radius);
+
+                        .mdi {
+                            font-size: 18px;
+                            display: flex;
+                            height: 18px;
+                            align-items: center;
+                        }
+
+                        img {
+                            display: flex;
+                            width: 18px;
+                            height: 18px;
+                        }
+
+                        &:after {
+                            content: '';
+                            position: absolute;
+                            right: -10px;
+                            top: 50%;
+                            width: 1px;
+                            transform: translate(0, -50%);
+                            height: 13px;
+                            background: var(--border-color);
+                        }
+
+                        &:first-child {
+                            margin-left: 0;
+                        }
+
+                        &:last-child {
+                            margin-right: 0;
+
+                            &:after {
+                                content: none;
+                            }
+                        }
+
+                        &:hover {
+                            background: #f5f5f5;
+                        }
+                    }
+                }
             }
         }
 
@@ -98,6 +181,8 @@
 
     @media screen and (max-width: 1000px) {
         .product-item {
+            position: relative;
+
             .product-photo {
                 flex: 0 0 80px;
             }
@@ -111,12 +196,47 @@
                     .product-subtitle {
                         font: 400 14px/20px var(--base-font);
                     }
+                }
+
+                .product-actions {
+                    display: flex;
+                    flex-direction: column;
+                    align-items: flex-start;
+                    gap: 30px;
+                    padding-bottom: 55px;
 
                     .product-price {
                         font: 700 18px/24px var(--base-font);
                         flex: 1 0 auto;
                         justify-content: flex-end;
                     }
+
+                    .product-icons {
+                        justify-content: flex-start;
+                        width: 100%;
+                        flex-direction: row;
+                        margin: 0 0;
+                        border-bottom-left-radius: var(--border-radius);
+                        border-bottom-right-radius: var(--border-radius);
+                        border-top: 1px solid var(--border-color);
+                        height: 55px;
+                        position: absolute;
+                        left: 0;
+                        right: 0;
+                        bottom: 0;
+                        padding: 0 10px 2px;
+                        align-items: center;
+
+                        .product-icons-item {
+                            margin: 0 0 !important;
+                            padding: 5px 10px;
+                            flex: 1 1 auto;
+
+                            &:after {
+                                right: 0;
+                            }
+                        }
+                    }
                 }
             }
         }
diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-products.scss b/react/assets/forus-webshop/scss/includes/blocks/block-products.scss
index 013fb7081..74d854d92 100644
--- a/react/assets/forus-webshop/scss/includes/blocks/block-products.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-products.scss
@@ -20,7 +20,7 @@
         border-radius: var(--showcase-item-border-radius);
         box-shadow: var(--showcase-item-shadow);
         border: var(--showcase-item-border);
-        transition: box-shadow .4s;
+        transition: box-shadow 0.4s;
         overflow: hidden;
 
         .block-bookmark-toggle {
@@ -52,6 +52,7 @@
                 display: flex;
                 flex: 1 1 auto;
                 padding: var(--products-content-padding);
+                border-bottom: 1px solid var(--border-color);
                 flex-direction: column;
                 gap: 5px;
                 min-width: 0;
@@ -71,16 +72,48 @@
                 .product-title {
                     font: 700 17px/24px var(--base-font);
                     color: var(--products-title-color);
-                    transition: .4s color;
+                    transition: 0.4s color;
                 }
 
                 .product-subtitle {
                     font: 400 14px/20px var(--base-font);
                 }
+            }
+
+            .product-actions {
+                background-color: #fbfbfb;
+                padding: 15px 20px;
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                align-items: center;
 
                 .product-price {
                     font: 700 18px/24px var(--base-font);
-                    padding-top: 10px;
+                }
+
+                .product-icons {
+                    display: flex;
+                    flex-direction: row;
+                    align-items: center;
+                    gap: 10px;
+
+                    .product-icons-item {
+                        display: flex;
+                        flex: 0 0 18px;
+                        text-align: center;
+
+                        .mdi {
+                            font-size: 18px;
+                            line-height: 18px;
+                        }
+
+                        img {
+                            display: block;
+                            width: 18px;
+                            height: 18px;
+                        }
+                    }
                 }
             }
         }
diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-showcase.scss b/react/assets/forus-webshop/scss/includes/blocks/block-showcase.scss
index 0d0ab5d55..58084b361 100644
--- a/react/assets/forus-webshop/scss/includes/blocks/block-showcase.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-showcase.scss
@@ -59,6 +59,9 @@
             .showcase-aside-block {
                 position: relative;
                 width: 100%;
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
                 border: var(--showcase-aside-border);
                 padding: var(--showcase-aside-padding);
                 box-shadow: var(--showcase-aside-shadow);
@@ -67,17 +70,136 @@
                 margin-bottom: 30px;
 
                 .form-group {
-                    margin-bottom: 5px;
+                    margin: 0 0 0;
 
                     &:last-child {
                         margin-bottom: 0;
                     }
                 }
 
+                .showcase-aside-block-title {
+                    margin: 0 0;
+                    font: 600 15px/18px var(--base-font);
+                }
+
+                .showcase-aside-block-info {
+                    display: flex;
+                    flex-direction: column;
+
+                    .showcase-aside-block-info-link {
+                        font: 600 13px var(--base-font);
+                        color: #282b39;
+                        display: flex;
+                        flex-direction: row;
+                        gap: 5px;
+                        align-items: center;
+                        cursor: pointer;
+                        text-decoration: underline;
+
+                        .mdi {
+                            font-size: 18px;
+                        }
+
+                        &:hover {
+                            text-decoration: none;
+                        }
+                    }
+                }
+
+                .showcase-aside-block-options {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 8px;
+                    margin: 0 -6px;
+
+                    .showcase-aside-block-option {
+                        display: flex;
+                        flex: 0 0 auto;
+                        padding: 6px 8px 6px 6px;
+                        background: transparent;
+                        border-radius: var(--border-radius);
+                        cursor: pointer;
+                        align-items: center;
+                        gap: 8px;
+                        transition: background-color .4s;
+
+                        .showcase-aside-block-option-check {
+                            display: flex;
+                            flex-direction: column;
+                            flex: 0 0 20px;
+                            height: 20px;
+                            border: 1px solid var(--tc);
+                            border-radius: calc(var(--border-radius) / 2);
+                            background: #fff;
+                            align-items: center;
+                            text-align: center;
+
+                            .mdi {
+                                display: none;
+                                font-size: 18px;
+                                line-height: 18px;
+                            }
+                        }
+
+                        .showcase-aside-block-option-name {
+                            display: flex;
+                            flex: 1 1 auto;
+                            font: 600 13px/20px var(--base-font);
+                            color: var(--tc);
+                        }
+
+                        .showcase-aside-block-option-icon {
+                            display: flex;
+
+                            .mdi {
+                                font-size: 20px;
+                                line-height: 20px;
+                                height: 20px;
+                            }
+
+                            img {
+                                display: block;
+                                width: 20px;
+                                height: 20px;
+                            }
+                        }
+
+                        &:hover {
+                            background: #f5f5f5;
+                        }
+
+                        &.showcase-aside-block-option-active {
+                            background: #f5f5f5;
+
+                            .showcase-aside-block-option-check {
+                                background: var(--color-primary);
+                                border-color: var(--color-primary);
+
+                                .mdi {
+                                    display: flex;
+                                    color: #fff;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .showcase-aside-block-separator {
+                    display: block;
+                    height: 10px;
+                    padding: 10px 0;
+
+                    &:after {
+                        content: '';
+                        display: block;
+                        height: 1px;
+                        background: var(--border-color);
+                    }
+                }
+
                 .showcase-aside-tabs {
                     display: flex;
                     border-color: var(--color-primary);
-                    margin-bottom: 15px;
                     flex-wrap: nowrap;
                     background-color: #fff;
 
@@ -157,11 +279,6 @@
                     }
                 }
 
-                .showcase-aside-block-info {
-                    font: 500 12px var(--base-font);
-                    color: #646f79;
-                }
-
                 .showcase-aside-block-chevron {
                     position: absolute;
                     right: 0;
diff --git a/react/assets/forus-webshop/scss/includes/blocks/product.scss b/react/assets/forus-webshop/scss/includes/blocks/product.scss
index 4106216fe..a945141b2 100644
--- a/react/assets/forus-webshop/scss/includes/blocks/product.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/product.scss
@@ -1,78 +1,78 @@
 .block.block-product {
     position: relative;
 
-    .product-card {
-        background-color: #fff;
-        border: 1px solid var(--border-color);
-        border-radius: var(--border-radius);
-        margin-bottom: 30px;
-        box-shadow: var(--box-shadow);
-        cursor: default;
-        position: relative;
-        min-height: 300px;
+    .product-content {
         display: flex;
-        @include cf();
+        cursor: default;
+        flex-direction: row;
+        gap: 30px;
+        margin: 0 0 30px;
 
         .product-photo {
-            width: 70%;
-            border-top-left-radius: inherit;
-            border-bottom-left-radius: inherit;
-            max-height: 400px;
+            display: flex;
+            flex: 0 0 35%;
+            border-radius: var(--border-radius);
+            border: 1px solid var(--border-color);
+            box-shadow: var(--box-shadow);
+            background-color: #fff;
+            overflow: hidden;
+            user-select: none;
+            pointer-events: none;
 
             img {
                 width: 100%;
-                border-top-left-radius: inherit;
-                border-bottom-left-radius: inherit;
                 display: block;
             }
         }
 
         .product-details {
-            padding: 30px;
+            display: flex;
+            flex: 1 1 auto;
+            flex-direction: column;
             width: 100%;
             position: relative;
             background: #fff;
             border-radius: var(--border-radius);
             border-top-right-radius: inherit;
             border-bottom-right-radius: inherit;
+            gap: 10px;
+
+            .product-name,
+            .organization-name {
+                padding-right: 50px;
+                color: var(--product-title-color);
+                margin: 0 0;
+            }
 
             .product-name {
                 font: var(--product-title-font);
-                color: var(--product-title-color);
-                padding-right: 30px;
-                margin: 0 0 5px;
                 word-wrap: break-word;
                 hyphens: auto;
-
-                .label {
-                    margin-top: 6px;
-                    float: right;
-                    margin-left: 10px;
-                }
             }
 
             .organization-name {
-                color: #646f79;
                 font: 700 14px/24px var(--base-font);
-                margin: 0 0 20px;
+                margin: 0 0 10px;
             }
 
             .product-properties {
                 display: flex;
-                flex-direction: row;
-                align-items: center;
+                flex-direction: column;
                 padding: 0 0 20px;
                 margin: 0 0 20px;
                 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+                gap: 20px;
 
                 .product-property {
                     min-width: 250px;
+                    display: flex;
+                    flex-direction: column;
+                    gap: 10px;
 
                     .product-property-label {
                         display: flex;
                         font: 600 12px/16px var(--base-font);
                         color: #646f79;
-                        margin-bottom: 10px;
                     }
 
                     .product-property-value {
@@ -85,9 +85,36 @@
                         }
                     }
 
-                    &.product-property-full {
-                        width: 100%;
-                        max-width: 100%;
+                    .product-property-icons {
+                        display: flex;
+                        flex-direction: row;
+
+                        .product-property-icons-item {
+                            display: flex;
+                            flex-direction: row;
+                            gap: 8px;
+                            font: 600 14px/18px var(--base-font);
+                            text-decoration: underline;
+                            cursor: pointer;
+                            align-items: center;
+                            flex: 0 0 calc(100% / 3);
+                            padding-right: 20px;
+
+                            .mdi {
+                                font-size: 24px;
+                                line-height: 24px;
+                            }
+
+                            img {
+                                display: block;
+                                width: 24px;
+                                height: 24px;
+                            }
+
+                            &:hover {
+                                text-decoration: none;
+                            }
+                        }
                     }
                 }
 
@@ -101,8 +128,8 @@
 
         .block-bookmark-toggle {
             position: absolute;
-            top: 15px;
-            right: 15px;
+            top: 0;
+            right: 0;
         }
     }
 
@@ -133,10 +160,10 @@
                 .fund-item-section-label {
                     display: flex;
                     font: 700 12px/20px var(--base-font);
-                    color: #646F79;
+                    color: #646f79;
                     justify-content: flex-end;
                 }
-                
+
                 .flex-start {
                     justify-content: flex-start;
                 }
@@ -162,7 +189,7 @@
                     .fund-item-media {
                         width: 80px;
                         padding: 0 15px;
-        
+
                         .fund-item-media-img {
                             width: 100%;
                             display: block;
@@ -178,14 +205,14 @@
                             font: 700 18px/25px var(--base-font);
                             color: #303030;
                         }
-            
+
                         .fund-item-subtitle {
                             font: 400 14px/25px var(--base-font);
                             color: #303030;
                         }
                     }
                 }
-            
+
                 &:last-child {
                     border-right: 0;
                     min-width: 270px;
@@ -212,66 +239,12 @@
         }
     }
 
-    &.block-product-sm {
-        .product-card {
-            .product-details {
-                .product-name {
-                    font-size: 16px;
-                }
-
-                .product-categories {
-                    font-size: 13px;
-                    margin-bottom: 15px;
-                }
-            }
-
-            .product-funds {
-                margin-bottom: 10px;
-
-                .product-fund-label {
-                    font-size: 10px;
-                    margin: 0;
-                }
-
-                .product-fund-list {
-                    font-size: 15px;
-                }
-            }
-
-            .product-price {
-                width: 100%;
-                margin-bottom: 10px;
-                @include cf();
-
-                .product-price-new {
-                    float: left;
-                    margin: 0;
-                }
-
-                .product-price-old {
-                    float: left;
-                    margin-top: 8px;
-                    margin-left: 5px;
-                }
-            }
-
-            .product-expire {
-                .expire-label {
-                    font-size: 10px;
-                }
-
-                .expire-value {
-                    font-size: 15px;
-                }
-            }
-        }
-    }
-
     @media screen and (max-width: 1200px) {
         .product-funds-list {
             .fund-item {
                 .fund-item-section {
                     padding: 10px;
+
                     .fund-item-section-value {
                         &.fund-item-section-value-sm {
                             font: 700 14px/32px var(--base-font);
@@ -283,31 +256,14 @@
     }
 
     @media screen and (max-width: 1000px) {
-        .product-card {
+        .product-content {
             flex-direction: column;
 
             .product-photo {
-                width: 100%;
-                min-width: 100%;
-                max-width: 100%;
-                background: none;
-                border-radius: var(--border-radius);
-                max-height: inherit;
-
-                img {
-                    display: block;
-                    border-radius: var(--border-radius);
-                    border-top-left-radius: inherit;
-                    border-top-right-radius: inherit;
-                }
+                flex: 0 0 auto;
             }
 
             .product-details {
-                padding: 25px;
-                border-radius: var(--border-radius);
-                border-bottom-left-radius: inherit;
-                border-bottom-right-radius: inherit;
-
                 .product-properties {
                     flex-direction: column;
 
@@ -323,9 +279,23 @@
                     }
                 }
 
+                .product-name {
+                    font: 600 18px/28px var(--heading-font-family);
+                }
+
                 .organization-name {
                     word-wrap: break-word;
                 }
+
+                .product-properties {
+                    .product-property {
+                        .product-property-icons {
+                            flex-direction: column;
+                            gap: 15px;
+                            justify-content: flex-start;
+                        }
+                    }
+                }
             }
         }
 
diff --git a/react/assets/forus-webshop/scss/includes/components/_form.scss b/react/assets/forus-webshop/scss/includes/components/_form.scss
index ef5b67d43..79c7d809c 100644
--- a/react/assets/forus-webshop/scss/includes/components/_form.scss
+++ b/react/assets/forus-webshop/scss/includes/components/_form.scss
@@ -83,8 +83,8 @@
         font: var(--form-font);
         line-height: 20px;
         transition:
-            background-color .4s ease,
-            border .4s ease;
+            background-color 0.4s ease,
+            border 0.4s ease;
         appearance: none;
 
         &[disabled] {
@@ -239,7 +239,7 @@
                 transform: translate(0, -50%);
                 opacity: 1;
                 pointer-events: none;
-                transition: opacity .4s;
+                transition: opacity 0.4s;
 
                 .mdi {
                     color: #ccd0e0;
@@ -292,7 +292,9 @@
                     calc(calc(calc(var(--option-height) - 20px) / 2) - 1px);
                 border-bottom: 1px solid whitesmoke;
                 cursor: pointer;
-                transition: background-color .4s, color .4s;
+                transition:
+                    background-color 0.4s,
+                    color 0.4s;
                 height: var(--option-height);
                 font: var(--dropdown-item-font);
                 line-height: 20px;
@@ -547,6 +549,51 @@
         }
     }
 
+    .range-control {
+        display: block;
+        position: relative;
+        padding-bottom: 25px;
+
+        .horizontal-slider {
+            position: relative;
+            border-radius: var(--border-radius);
+            height: 24px;
+        }
+
+        .horizontal-slider-track {
+            top: 10px;
+            bottom: 10px;
+            border-radius: 999px;
+            background: #c0c5d4;
+
+            &.horizontal-slider-track-1 {
+                background: var(--color-primary);
+            }
+        }
+
+        .horizontal-slider-thumb {
+            line-height: 25px;
+            text-align: center;
+            background-color: rgb(0, 0, 0);
+            border-radius: 50%;
+            cursor: grab;
+            display: block;
+            height: 24px;
+            width: 24px;
+            background: var(--color-primary);
+            border: 4px solid #fff;
+
+            .horizontal-slider-thumb-text {
+                position: absolute;
+                white-space: nowrap;
+                left: 50%;
+                top: 100%;
+                transform: translate(-50%, 7px);
+                font: 700 14px/20px var(--base-font)
+            }
+        }
+    }
+
     .form-group {
         margin-bottom: 10px;
         @include cf();
@@ -694,7 +741,7 @@
                 line-height: 38px;
                 position: relative;
                 z-index: 1;
-                transition: color .4s;
+                transition: color 0.4s;
 
                 &:before {
                     content: '';
@@ -708,7 +755,7 @@
                     transform: translate(-50%, -50%);
                     z-index: -1;
                     border-radius: 20px;
-                    transition: background .4s;
+                    transition: background 0.4s;
                 }
 
                 &:hover {
@@ -793,7 +840,9 @@
                 top: 50%;
                 transform: translate3d(-50%, -50%, 0);
                 font-size: 18px;
-                transition: color .4s, background .4s;
+                transition:
+                    color 0.4s,
+                    background 0.4s;
                 opacity: 0;
             }
         }
@@ -845,7 +894,10 @@
             float: left;
             border-radius: 20px;
             margin-left: -30px;
-            transition: color .4s, background .4s, border .4s;
+            transition:
+                color 0.4s,
+                background 0.4s,
+                border 0.4s;
 
             &:after {
                 content: '';
@@ -985,7 +1037,7 @@
                 border: 1px solid #ddd;
                 height: 20px;
                 position: relative;
-                transition: all .4s ease-in-out;
+                transition: all 0.4s ease-in-out;
 
                 .toggle-input-dot {
                     width: 24px;
@@ -1001,7 +1053,7 @@
                     font-size: 18px;
                     transform: translate(0, -50%);
                     color: #fefefe;
-                    transition: all .4s ease-in-out;
+                    transition: all 0.4s ease-in-out;
                     position: relative;
 
                     .icon-disabled {
@@ -1042,7 +1094,7 @@
                 a {
                     font: inherit;
                     color: $colorPrimary;
-                    transition: color .4s;
+                    transition: color 0.4s;
 
                     &:hover {
                         color: var(--bc);
@@ -1228,6 +1280,10 @@
         .form-control:not([type='radio']):not([type='checkbox']).form-control-fancy {
             padding: 8px 15px;
             font: 500 13px/24px var(--base-font);
+
+            &[type='number'] {
+                padding-right: 0;
+            }
         }
 
         ::-webkit-input-placeholder {
diff --git a/react/assets/forus-webshop/scss/webshop.scss b/react/assets/forus-webshop/scss/webshop.scss
index ade4ef5a8..ee00e7def 100644
--- a/react/assets/forus-webshop/scss/webshop.scss
+++ b/react/assets/forus-webshop/scss/webshop.scss
@@ -128,6 +128,7 @@
 @import 'includes/blocks/block-fund-requests';
 @import 'includes/blocks/block-products';
 @import 'includes/blocks/block-products-list';
+@import 'includes/blocks/block-products-icons-info';
 @import 'includes/blocks/block-pre-check-banner';
 @import 'includes/blocks/block-fund-pre-check';
 @import 'includes/blocks/block-fund-pre-check-result';
diff --git a/react/src/dashboard/props/models/Product.tsx b/react/src/dashboard/props/models/Product.tsx
index d6c76c37b..c7d7d2d02 100644
--- a/react/src/dashboard/props/models/Product.tsx
+++ b/react/src/dashboard/props/models/Product.tsx
@@ -39,6 +39,7 @@ export default interface Product {
             };
             end_at: string;
             end_at_locale: string;
+            scanning_enabled: boolean;
             reservations_enabled: boolean;
             reservation_extra_payments_enabled: boolean;
             fund_id?: number;
diff --git a/react/src/webshop/components/elements/forms/RangeControl.tsx b/react/src/webshop/components/elements/forms/RangeControl.tsx
new file mode 100644
index 000000000..38f4860a4
--- /dev/null
+++ b/react/src/webshop/components/elements/forms/RangeControl.tsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import 'react-range-slider-input/dist/style.css';
+import ReactSlider from 'react-slider';
+
+export default function RangeControl({
+    from,
+    to,
+    setTo,
+    setFrom,
+    min,
+    max,
+    prefix = '',
+}: {
+    from?: number;
+    setFrom?: (from: number) => void;
+    to?: number;
+    setTo?: (to: number) => void;
+    min?: number;
+    max?: number;
+    prefix?: string;
+}) {
+    return (
+        <div className="range-control">
+            <ReactSlider
+                min={min}
+                max={max}
+                value={[from, to]}
+                onChange={([_from, _to]) => {
+                    setTo(_to);
+                    setFrom(_from);
+                }}
+                className="horizontal-slider"
+                thumbClassName="horizontal-slider-thumb"
+                trackClassName="horizontal-slider-track"
+                ariaLabelledby={['first-slider-label', 'second-slider-label']}
+                ariaValuetext={(state) => `Value ${state.valueNow}`}
+                renderThumb={(props, state) => (
+                    <div {...props}>
+                        <div className="horizontal-slider-thumb-text">{`${prefix}${state.valueNow}`}</div>
+                    </div>
+                )}
+                pearling
+                minDistance={0}
+            />
+        </div>
+    );
+}
diff --git a/react/src/webshop/components/elements/lists/products-list/ProductsListItem.tsx b/react/src/webshop/components/elements/lists/products-list/ProductsListItem.tsx
index bfba21212..4128b6347 100644
--- a/react/src/webshop/components/elements/lists/products-list/ProductsListItem.tsx
+++ b/react/src/webshop/components/elements/lists/products-list/ProductsListItem.tsx
@@ -6,6 +6,7 @@ import ProductsListItemGrid from './templates/ProductsListItemGrid';
 import ProductsListItemList from './templates/ProductsListItemList';
 import ProductsListItemSearch from './templates/ProductsListItemSearch';
 import useTranslate from '../../../../../dashboard/hooks/useTranslate';
+import classNames from 'classnames';
 
 export default function ProductsListItem({
     display,
@@ -57,7 +58,7 @@ export default function ProductsListItem({
             name={'product'}
             params={{ id: product.id }}
             state={stateParams || null}
-            className={display === 'search' ? 'search-item search-item-product' : 'product-item'}
+            className={classNames(display === 'search' ? 'search-item' : 'product-item')}
             dataDusk="productItem">
             {display === 'grid' && (
                 <ProductsListItemGrid price={price} toggleBookmark={toggleBookmark} product={product} />
diff --git a/react/src/webshop/components/elements/lists/products-list/templates/ProductsListItemGrid.tsx b/react/src/webshop/components/elements/lists/products-list/templates/ProductsListItemGrid.tsx
index 885154f9e..39670e991 100644
--- a/react/src/webshop/components/elements/lists/products-list/templates/ProductsListItemGrid.tsx
+++ b/react/src/webshop/components/elements/lists/products-list/templates/ProductsListItemGrid.tsx
@@ -5,6 +5,8 @@ import useAuthIdentity from '../../../../../hooks/useAuthIdentity';
 import { clickOnKeyEnter } from '../../../../../../dashboard/helpers/wcag';
 import { useProductService } from '../../../../../services/ProductService';
 import useTranslate from '../../../../../../dashboard/hooks/useTranslate';
+import useShowProductPaymentOptionsInfoModal from '../../../../../hooks/useShowProductPaymentOptionsInfoModal';
+import useProductFeatures from '../../../../../hooks/useProductFeatures';
 
 export default function ProductsListItemGrid({
     price,
@@ -15,9 +17,12 @@ export default function ProductsListItemGrid({
     product?: Product;
     toggleBookmark: (e: React.MouseEvent) => void;
 }) {
-    const translate = useTranslate();
-    const assetUrl = useAssetUrl();
     const authIdentity = useAuthIdentity();
+    const productFeatures = useProductFeatures(product);
+
+    const assetUrl = useAssetUrl();
+    const translate = useTranslate();
+    const showProductIconsInfoModal = useShowProductPaymentOptionsInfoModal();
 
     const productService = useProductService();
 
@@ -30,7 +35,7 @@ export default function ProductsListItemGrid({
                     role={'button'}
                     tabIndex={0}
                     className={`block block-bookmark-toggle ${product.bookmarked ? 'active' : ''}`}
-                    aria-label={translate('list_blocks.product_item_grid.bookmark')}
+                    aria-label={translate('list_blocks.product_item.bookmark')}
                     aria-pressed={product.bookmarked}>
                     {product.bookmarked ? (
                         <em className="mdi mdi-cards-heart" />
@@ -50,7 +55,53 @@ export default function ProductsListItemGrid({
                     {product.name}
                 </h3>
                 <div className="product-subtitle">{product.organization.name}</div>
+            </div>
+            <div className="product-actions">
                 <div className="product-price">{price}</div>
+                <div className="product-icons">
+                    {productFeatures?.scanning_enabled && (
+                        <div
+                            className="product-icons-item"
+                            role="button"
+                            tabIndex={0}
+                            aria-label={translate('list_blocks.product_item.payment_option_qr_aria_label')}
+                            onClick={(e) => {
+                                e.preventDefault();
+                                showProductIconsInfoModal();
+                            }}
+                            onKeyDown={(e) => clickOnKeyEnter(e, true)}>
+                            <em className="mdi mdi-qrcode-scan" aria-hidden="true" />
+                        </div>
+                    )}
+                    {productFeatures?.reservations_enabled && (
+                        <div
+                            className="product-icons-item"
+                            role="button"
+                            tabIndex={0}
+                            aria-label={translate('list_blocks.product_item.payment_option_reservation_aria_label')}
+                            onClick={(e) => {
+                                e.preventDefault();
+                                showProductIconsInfoModal();
+                            }}
+                            onKeyDown={(e) => clickOnKeyEnter(e, true)}>
+                            <em className="mdi mdi-tag-multiple-outline" aria-hidden="true" />
+                        </div>
+                    )}
+                    {productFeatures?.reservation_extra_payments_enabled && (
+                        <div
+                            className="product-icons-item"
+                            role="button"
+                            tabIndex={0}
+                            aria-label={translate('list_blocks.product_item.payment_option_ideal_aria_label')}
+                            onClick={(e) => {
+                                e.preventDefault();
+                                showProductIconsInfoModal();
+                            }}
+                            onKeyDown={(e) => clickOnKeyEnter(e, true)}>
+                            <img src={assetUrl('/assets/img/icon-ideal.svg')} alt="" aria-hidden="true" />
+                        </div>
+                    )}
+                </div>
             </div>
         </div>
     );
diff --git a/react/src/webshop/components/elements/lists/products-list/templates/ProductsListItemList.tsx b/react/src/webshop/components/elements/lists/products-list/templates/ProductsListItemList.tsx
index a3d069e02..f340e7927 100644
--- a/react/src/webshop/components/elements/lists/products-list/templates/ProductsListItemList.tsx
+++ b/react/src/webshop/components/elements/lists/products-list/templates/ProductsListItemList.tsx
@@ -5,6 +5,8 @@ import useAuthIdentity from '../../../../../hooks/useAuthIdentity';
 import { clickOnKeyEnter } from '../../../../../../dashboard/helpers/wcag';
 import { useProductService } from '../../../../../services/ProductService';
 import useTranslate from '../../../../../../dashboard/hooks/useTranslate';
+import useShowProductPaymentOptionsInfoModal from '../../../../../hooks/useShowProductPaymentOptionsInfoModal';
+import useProductFeatures from '../../../../../hooks/useProductFeatures';
 
 export default function ProductsListItemList({
     price,
@@ -17,8 +19,11 @@ export default function ProductsListItemList({
 }) {
     const assetUrl = useAssetUrl();
     const translate = useTranslate();
+    const showProductIconsInfoModal = useShowProductPaymentOptionsInfoModal();
 
     const authIdentity = useAuthIdentity();
+    const productFeatures = useProductFeatures(product);
+
     const productService = useProductService();
 
     return (
@@ -31,29 +36,82 @@ export default function ProductsListItemList({
             </div>
             <div className="product-content">
                 <div className="product-details">
-                    <h3 className="product-title" data-dusk="productName">
-                        {product.name}
-                    </h3>
-                    <div className="product-subtitle">{product.organization.name}</div>
-                    <div className="product-price">{price}</div>
+                    <div className="product-details-header">
+                        <h3 className="product-title" data-dusk="productName">
+                            {product.name}
+                        </h3>
+                        <div className="product-subtitle">{product.organization.name}</div>
+                    </div>
+
+                    <div className="product-details-bookmark">
+                        {authIdentity && (
+                            <div
+                                className={`block block-bookmark-toggle ${product.bookmarked ? 'active' : ''}`}
+                                onClick={toggleBookmark}
+                                onKeyDown={clickOnKeyEnter}
+                                role={'button'}
+                                tabIndex={0}
+                                aria-label={translate('list_blocks.product_item.bookmark')}
+                                aria-pressed={product.bookmarked}>
+                                {product.bookmarked ? (
+                                    <em className="mdi mdi-cards-heart" />
+                                ) : (
+                                    <em className="mdi mdi-cards-heart-outline" />
+                                )}
+                            </div>
+                        )}
+                    </div>
                 </div>
+
                 <div className="product-actions">
-                    {authIdentity && (
-                        <div
-                            className={`block block-bookmark-toggle ${product.bookmarked ? 'active' : ''}`}
-                            onClick={toggleBookmark}
-                            onKeyDown={clickOnKeyEnter}
-                            role={'button'}
-                            tabIndex={0}
-                            aria-label={translate('list_blocks.product_item_list.bookmark')}
-                            aria-pressed={product.bookmarked}>
-                            {product.bookmarked ? (
-                                <em className="mdi mdi-cards-heart" />
-                            ) : (
-                                <em className="mdi mdi-cards-heart-outline" />
-                            )}
-                        </div>
-                    )}
+                    <div className="product-price">{price}</div>
+                    <div className="product-icons">
+                        {productFeatures?.scanning_enabled && (
+                            <div
+                                className="product-icons-item"
+                                role="button"
+                                tabIndex={0}
+                                aria-label={translate('list_blocks.product_item.payment_option_qr_aria_label')}
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    showProductIconsInfoModal();
+                                }}
+                                onKeyDown={(e) => clickOnKeyEnter(e, true)}>
+                                <em className="mdi mdi-qrcode-scan" aria-hidden="true" />
+                                {translate('list_blocks.product_item.payment_option_qr')}
+                            </div>
+                        )}
+                        {productFeatures?.reservations_enabled && (
+                            <div
+                                className="product-icons-item"
+                                role="button"
+                                tabIndex={0}
+                                aria-label={translate('list_blocks.product_item.payment_option_reservation_aria_label')}
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    showProductIconsInfoModal();
+                                }}
+                                onKeyDown={(e) => clickOnKeyEnter(e, true)}>
+                                <em className="mdi mdi-tag-multiple-outline" aria-hidden="true" />
+                                {translate('list_blocks.product_item.payment_option_reservation')}
+                            </div>
+                        )}
+                        {productFeatures?.reservation_extra_payments_enabled && (
+                            <div
+                                className="product-icons-item"
+                                role="button"
+                                tabIndex={0}
+                                aria-label={translate('list_blocks.product_item.payment_option_ideal_aria_label')}
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    showProductIconsInfoModal();
+                                }}
+                                onKeyDown={(e) => clickOnKeyEnter(e, true)}>
+                                <img src={assetUrl('/assets/img/icon-ideal.svg')} alt="" aria-hidden="true" />
+                                {translate('list_blocks.product_item.payment_option_ideal')}
+                            </div>
+                        )}
+                    </div>
                 </div>
             </div>
         </Fragment>
diff --git a/react/src/webshop/components/modals/ModalNotification.tsx b/react/src/webshop/components/modals/ModalNotification.tsx
index d762fc87f..12bda7753 100644
--- a/react/src/webshop/components/modals/ModalNotification.tsx
+++ b/react/src/webshop/components/modals/ModalNotification.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState, ReactElement } from 'react';
 import { ModalState } from '../../../dashboard/modules/modals/context/ModalContext';
 import useTranslate from '../../../dashboard/hooks/useTranslate';
 import { clickOnKeyEnter } from '../../../dashboard/helpers/wcag';
@@ -19,6 +19,7 @@ export default function ModalNotification({
     description,
     mdiIconClass,
     mdiIconType = 'primary',
+    appendElement,
 }: {
     modal: ModalState;
     type: 'info' | 'confirm' | 'action-result';
@@ -34,7 +35,8 @@ export default function ModalNotification({
     email?: string;
     description?: string;
     mdiIconClass?: string;
-    mdiIconType?: 'primary' | 'warning' | 'success';
+    mdiIconType?: 'primary' | 'warning' | 'success' | 'default';
+    appendElement?: ReactElement | ReactElement[];
 }) {
     const translate = useTranslate();
 
@@ -120,6 +122,8 @@ export default function ModalNotification({
                                 ))}
                             </div>
                         )}
+
+                        {appendElement}
                     </div>
                 </div>
 
diff --git a/react/src/webshop/components/pages/products-show/ProductsShow.tsx b/react/src/webshop/components/pages/products-show/ProductsShow.tsx
index 76b97299f..308002a49 100644
--- a/react/src/webshop/components/pages/products-show/ProductsShow.tsx
+++ b/react/src/webshop/components/pages/products-show/ProductsShow.tsx
@@ -28,6 +28,8 @@ import { useFundService } from '../../../services/FundService';
 import PayoutTransaction from '../../../../dashboard/props/models/PayoutTransaction';
 import usePayoutTransactionService from '../../../services/PayoutTransactionService';
 import Section from '../../elements/sections/Section';
+import useShowProductPaymentOptionsInfoModal from '../../../hooks/useShowProductPaymentOptionsInfoModal';
+import useProductFeatures from '../../../hooks/useProductFeatures';
 
 export default function ProductsShow() {
     const { id } = useParams();
@@ -42,6 +44,7 @@ export default function ProductsShow() {
     const setProgress = useSetProgress();
     const navigateState = useNavigateState();
     const bookmarkProductToggle = useBookmarkProductToggle();
+    const showProductIconsInfoModal = useShowProductPaymentOptionsInfoModal();
 
     const fundService = useFundService();
     const productService = useProductService();
@@ -55,6 +58,8 @@ export default function ProductsShow() {
     const [payouts, setPayouts] = useState<Array<PayoutTransaction>>(null);
     const [vouchers, setVouchers] = useState<Array<Voucher>>(null);
 
+    const productFeatures = useProductFeatures(product);
+
     const { showBack } = useStateParams<{ showBack: boolean }>();
 
     const hasBudgetFunds = useMemo(() => {
@@ -181,7 +186,7 @@ export default function ProductsShow() {
             {product && funds && vouchers && (
                 <Section type={'product'}>
                     <div className="block block-product">
-                        <div className="product-card">
+                        <div className="product-content">
                             <div className="product-photo">
                                 <img
                                     src={
@@ -202,6 +207,24 @@ export default function ProductsShow() {
                                     )}
                                 </h1>
                                 <div className="organization-name">{product.organization?.name}</div>
+
+                                {authIdentity && (
+                                    <div
+                                        className={`block block-bookmark-toggle ${product.bookmarked ? 'active' : ''}`}
+                                        onClick={(e) => toggleBookmark(e, product)}
+                                        onKeyDown={clickOnKeyEnter}
+                                        role={'button'}
+                                        tabIndex={0}
+                                        aria-label={translate('product.buttons.bookmark')}
+                                        aria-pressed={product.bookmarked}>
+                                        {product.bookmarked ? (
+                                            <em className="mdi mdi-cards-heart" />
+                                        ) : (
+                                            <em className="mdi mdi-cards-heart-outline" />
+                                        )}
+                                    </div>
+                                )}
+
                                 <div className="product-properties">
                                     <div className="product-property">
                                         <div className="product-property-label">
@@ -209,9 +232,71 @@ export default function ProductsShow() {
                                         </div>
                                         <div className="product-property-value">{product.product_category.name}</div>
                                     </div>
+                                    <div className="product-property">
+                                        <div id="paymentOptionsLabel" className="product-property-label">
+                                            {translate('product.labels.payment_options')}
+                                        </div>
+                                        <div className="product-property-value">
+                                            <div
+                                                className="product-property-icons"
+                                                role="group"
+                                                aria-labelledby="paymentOptionsLabel">
+                                                {productFeatures.scanning_enabled && (
+                                                    <div
+                                                        className="product-property-icons-item"
+                                                        role="button"
+                                                        tabIndex={0}
+                                                        aria-label={translate(
+                                                            'product.labels.payment_option_qr_aria_label',
+                                                        )}
+                                                        onClick={() => showProductIconsInfoModal()}
+                                                        onKeyDown={(e) => clickOnKeyEnter(e, true)}>
+                                                        <em className="mdi mdi-qrcode-scan" aria-hidden="true" />
+                                                        {translate('product.labels.payment_option_qr')}
+                                                    </div>
+                                                )}
+                                                {productFeatures.reservations_enabled && (
+                                                    <div
+                                                        className="product-property-icons-item"
+                                                        role="button"
+                                                        tabIndex={0}
+                                                        aria-label={translate(
+                                                            'product.labels.payment_option_reservation_aria_label',
+                                                        )}
+                                                        onClick={() => showProductIconsInfoModal()}
+                                                        onKeyDown={(e) => clickOnKeyEnter(e, true)}>
+                                                        <em
+                                                            className="mdi mdi-tag-multiple-outline"
+                                                            aria-hidden="true"
+                                                        />
+                                                        {translate('product.labels.payment_option_reservation')}
+                                                    </div>
+                                                )}
+                                                {productFeatures.reservation_extra_payments_enabled && (
+                                                    <div
+                                                        className="product-property-icons-item"
+                                                        role="button"
+                                                        tabIndex={0}
+                                                        aria-label={translate(
+                                                            'product.labels.payment_option_ideal_aria_label',
+                                                        )}
+                                                        onClick={() => showProductIconsInfoModal()}
+                                                        onKeyDown={(e) => clickOnKeyEnter(e, true)}>
+                                                        <img
+                                                            src={assetUrl('/assets/img/icon-ideal.svg')}
+                                                            alt=""
+                                                            aria-hidden="true"
+                                                        />
+
+                                                        {translate('product.labels.payment_option_ideal')}
+                                                    </div>
+                                                )}
+                                            </div>
+                                        </div>
+                                    </div>
                                 </div>
                                 <div className="product-properties">
-                                    <div className="product-property product-property-full">
+                                    <div className="product-property">
                                         <div className="product-property-label">
                                             {translate('product.labels.description')}
                                         </div>
@@ -221,23 +306,6 @@ export default function ProductsShow() {
                                     </div>
                                 </div>
                             </div>
-
-                            {authIdentity && (
-                                <div
-                                    className={`block block-bookmark-toggle ${product.bookmarked ? 'active' : ''}`}
-                                    onClick={(e) => toggleBookmark(e, product)}
-                                    onKeyDown={clickOnKeyEnter}
-                                    role={'button'}
-                                    tabIndex={0}
-                                    aria-label={translate('product.buttons.bookmark')}
-                                    aria-pressed={product.bookmarked}>
-                                    {product.bookmarked ? (
-                                        <em className="mdi mdi-cards-heart" />
-                                    ) : (
-                                        <em className="mdi mdi-cards-heart-outline" />
-                                    )}
-                                </div>
-                            )}
                         </div>
 
                         <ProductFundsCard funds={funds} product={product} vouchers={vouchers} payouts={payouts} />
diff --git a/react/src/webshop/components/pages/products/Products.tsx b/react/src/webshop/components/pages/products/Products.tsx
index 0829a26ba..ffc18d5d3 100644
--- a/react/src/webshop/components/pages/products/Products.tsx
+++ b/react/src/webshop/components/pages/products/Products.tsx
@@ -24,6 +24,9 @@ import { BooleanParam, NumberParam, StringParam } from 'use-query-params';
 import { clickOnKeyEnter } from '../../../../dashboard/helpers/wcag';
 import useSetTitle from '../../../hooks/useSetTitle';
 import UIControlText from '../../../../dashboard/components/elements/forms/ui-controls/UIControlText';
+import RangeControl from '../../elements/forms/RangeControl';
+import useShowProductPaymentOptionsInfoModal from '../../../hooks/useShowProductPaymentOptionsInfoModal';
+import ProductsFilterOptions from './elements/ProductsFilterOptions';
 
 export default function Products({ fundType = 'budget' }: { fundType: 'budget' | 'subsidies' }) {
     const appConfigs = useAppConfigs();
@@ -37,12 +40,14 @@ export default function Products({ fundType = 'budget' }: { fundType: 'budget' |
     const setTitle = useSetTitle();
     const translate = useTranslate();
     const setProgress = useSetProgress();
+    const showProductIconsInfoModal = useShowProductPaymentOptionsInfoModal();
 
     const [sortByOptions] = useState(productService.getSortOptions(translate));
 
     const [errors, setErrors] = useState<{ [key: string]: string | Array<string> }>({});
 
     const [funds, setFunds] = useState<Array<Partial<Fund>>>(null);
+    const [toMax, setToMax] = useState(0);
     const [organizations, setOrganizations] = useState<Array<Partial<Organization>>>(null);
     const [productCategories, setProductCategories] = useState<Array<Partial<ProductCategory>>>(null);
     const [productSubCategories, setProductSubCategories] = useState<Array<Partial<ProductCategory>>>(null);
@@ -69,6 +74,11 @@ export default function Products({ fundType = 'budget' }: { fundType: 'budget' |
         product_sub_category_id: number;
         postcode: string;
         distance: number;
+        from: number;
+        to: number;
+        qr?: boolean;
+        reservation?: boolean;
+        extra_payment?: boolean;
         bookmarked: boolean;
         display_type: 'list' | 'grid';
         order_by: 'created_at' | 'price' | 'most_popular' | 'name';
@@ -83,13 +93,18 @@ export default function Products({ fundType = 'budget' }: { fundType: 'budget' |
             product_sub_category_id: null,
             postcode: '',
             distance: null,
+            from: 0,
+            to: null,
+            qr: false,
+            reservation: false,
+            extra_payment: false,
             bookmarked: false,
             display_type: 'list',
             order_by: sortByOptions[0]?.value.order_by,
             order_dir: sortByOptions[0]?.value.order_dir,
         },
         {
-            throttledValues: ['q'],
+            throttledValues: ['q', 'from', 'to', 'qr', 'reservation', 'extra_payment'],
             queryParams: {
                 q: StringParam,
                 page: NumberParam,
@@ -99,6 +114,11 @@ export default function Products({ fundType = 'budget' }: { fundType: 'budget' |
                 product_sub_category_id: NumberParam,
                 postcode: StringParam,
                 distance: NumberParam,
+                from: NumberParam,
+                to: NumberParam,
+                qr: BooleanParam,
+                reservation: BooleanParam,
+                extra_payment: BooleanParam,
                 bookmarked: BooleanParam,
                 display_type: StringParam,
                 order_by: StringParam,
@@ -121,7 +141,7 @@ export default function Products({ fundType = 'budget' }: { fundType: 'budget' |
         return filterValuesActive?.fund_id && funds?.find((item) => item.id === filterValuesActive?.fund_id);
     }, [filterValuesActive?.fund_id, funds]);
 
-    const [products, setProducts] = useState<PaginationData<Product>>(null);
+    const [products, setProducts] = useState<PaginationData<Product, { price_max: number }>>(null);
 
     const buildQuery = useCallback(
         (
@@ -134,13 +154,19 @@ export default function Products({ fundType = 'budget' }: { fundType: 'budget' |
                 product_sub_category_id: number;
                 postcode: string;
                 distance: number;
+                from: number;
+                to: number;
                 bookmarked: boolean;
+                qr: boolean;
+                reservation: boolean;
+                extra_payment: boolean;
                 display_type: 'list' | 'grid';
                 order_by: 'created_at' | 'price' | 'most_popular' | 'name';
                 order_dir: 'asc' | 'desc';
             }>,
         ) => {
             const isSortingByPrice = values.order_by === 'price';
+            const hasFilters = values.qr || values.extra_payment || values.reservation;
 
             return {
                 q: values.q,
@@ -151,6 +177,11 @@ export default function Products({ fundType = 'budget' }: { fundType: 'budget' |
                 fund_type: fundType,
                 postcode: values.postcode || '',
                 distance: values.distance || null,
+                from: values.from || null,
+                to: values.to || null,
+                qr: hasFilters ? (values.qr ? 1 : 0) : 0,
+                reservation: hasFilters ? (values.reservation ? 1 : 0) : 0,
+                extra_payment: hasFilters ? (values.extra_payment ? 1 : 0) : 0,
                 bookmarked: values.bookmarked ? 1 : 0,
                 order_by: isSortingByPrice ? (fundType === 'budget' ? 'price' : 'price_min') : values.order_by,
                 order_dir: values.order_dir,
@@ -166,8 +197,11 @@ export default function Products({ fundType = 'budget' }: { fundType: 'budget' |
 
             productService
                 .list({ fund_type: fundType, ...query })
-                .then((res) => setProducts(res.data))
-                .catch((e: ResponseError) => setErrors(e.data.errors))
+                .then((res) => {
+                    setProducts(res.data);
+                    setToMax((max) => Math.max(res.data?.meta?.price_max, max));
+                })
+                .catch((e: ResponseError) => setErrors(e.data?.errors))
                 .finally(() => setProgress(100));
         },
         [fundType, productService, setProgress],
@@ -396,6 +430,91 @@ export default function Products({ fundType = 'budget' }: { fundType: 'budget' |
                                 </div>
                             </div>
                         </div>
+
+                        <div className="showcase-aside-block-separator" />
+                        <div className="showcase-aside-block-title">{translate('products.filters.price')}</div>
+                        <div className="row">
+                            <div className="col col-md-5">
+                                <div className="form-group">
+                                    <label className="form-label" htmlFor="from">
+                                        {translate('products.filters.price_from')}
+                                    </label>
+                                    <input
+                                        className="form-control"
+                                        id="from"
+                                        min={0}
+                                        max={toMax}
+                                        value={filterValues.from || ''}
+                                        onChange={(e) =>
+                                            filterUpdate({
+                                                from: Math.min(Math.max(parseFloat(e.target.value) || 0, 0), toMax),
+                                            })
+                                        }
+                                        type="number"
+                                        aria-label={translate('products.filters.price_from')}
+                                    />
+                                    <FormError error={errors?.from} />
+                                </div>
+                            </div>
+                            <div className="col col-md-2" />
+                            <div className="col col-md-5">
+                                <div className="form-group">
+                                    <label className="form-label" htmlFor="to">
+                                        {translate('products.filters.price_to')}
+                                    </label>
+                                    <input
+                                        className="form-control"
+                                        id="to"
+                                        min={0}
+                                        max={toMax}
+                                        value={filterValues.to || toMax}
+                                        placeholder={translate('products.filters.price_to')}
+                                        onChange={(e) =>
+                                            filterUpdate({
+                                                to: Math.min(Math.max(parseFloat(e.target.value) || toMax, 0), toMax),
+                                            })
+                                        }
+                                        type="number"
+                                        aria-label={translate('products.filters.price_to')}
+                                    />
+                                    <FormError error={errors?.to} />
+                                </div>
+                            </div>
+                        </div>
+
+                        <div className="form-group">
+                            <RangeControl
+                                min={0}
+                                max={toMax}
+                                from={filterValues.from || 0}
+                                to={filterValues.to || toMax}
+                                setFrom={(from) => filterUpdate({ from })}
+                                setTo={(to) => filterUpdate({ to })}
+                                prefix={'€ '}
+                            />
+                        </div>
+
+                        <div className="showcase-aside-block-separator" />
+                        <div className="showcase-aside-block-title">
+                            {translate('products.filters.payment_options')}
+                        </div>
+                        <div className="showcase-aside-block-info">
+                            <a
+                                className="showcase-aside-block-info-link"
+                                role="button"
+                                tabIndex={0}
+                                aria-label={translate('products.filters.payment_options_info')}
+                                onClick={(e) => {
+                                    e.preventDefault();
+                                    showProductIconsInfoModal();
+                                }}
+                                onKeyDown={(e) => clickOnKeyEnter(e, true)}>
+                                <em className="mdi mdi-information-outline" aria-hidden="true" />
+                                {translate('products.filters.payment_options_info')}
+                            </a>
+                        </div>
+
+                        <ProductsFilterOptions value={filterValues} setValue={(value) => filterUpdate(value)} />
                     </div>
                 )
             }>
diff --git a/react/src/webshop/components/pages/products/elements/ProductsFilterOptions.tsx b/react/src/webshop/components/pages/products/elements/ProductsFilterOptions.tsx
new file mode 100644
index 000000000..88ab61560
--- /dev/null
+++ b/react/src/webshop/components/pages/products/elements/ProductsFilterOptions.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import classNames from 'classnames';
+import { clickOnKeyEnter } from '../../../../../dashboard/helpers/wcag';
+import useAssetUrl from '../../../../hooks/useAssetUrl';
+import useTranslate from '../../../../../dashboard/hooks/useTranslate';
+
+type ProductsFilterOptionsValue = {
+    qr?: boolean;
+    reservation?: boolean;
+    extra_payment?: boolean;
+};
+
+export default function ProductsFilterOptions({
+    value,
+    setValue,
+}: {
+    value: ProductsFilterOptionsValue;
+    setValue?: (value: ProductsFilterOptionsValue) => void;
+}) {
+    const assetUrl = useAssetUrl();
+    const translate = useTranslate();
+
+    return (
+        <div className="showcase-aside-block-options">
+            <div
+                role="button"
+                tabIndex={0}
+                aria-pressed={Boolean(value.qr)}
+                aria-label={translate('products.filters.payment_option_qr')}
+                onClick={() => setValue({ qr: !value.qr })}
+                onKeyDown={(e) => clickOnKeyEnter(e, true)}
+                className={classNames('showcase-aside-block-option', value.qr && 'showcase-aside-block-option-active')}>
+                <div className="showcase-aside-block-option-check">
+                    <em className="mdi mdi-check" aria-hidden="true" />
+                </div>
+                <div className="showcase-aside-block-option-name">
+                    {translate('products.filters.payment_option_qr')}
+                </div>
+                <div className="showcase-aside-block-option-icon">
+                    <em className="mdi mdi-qrcode-scan" aria-hidden="true" />
+                </div>
+            </div>
+            <div
+                role="button"
+                tabIndex={0}
+                aria-pressed={Boolean(value.reservation)}
+                aria-label={translate('products.filters.payment_option_reservation')}
+                onClick={() => setValue({ reservation: !value.reservation })}
+                onKeyDown={(e) => clickOnKeyEnter(e, true)}
+                className={classNames(
+                    'showcase-aside-block-option',
+                    value.reservation && 'showcase-aside-block-option-active',
+                )}>
+                <div className="showcase-aside-block-option-check">
+                    <em className="mdi mdi-check" aria-hidden="true" />
+                </div>
+                <div className="showcase-aside-block-option-name">
+                    {translate('products.filters.payment_option_reservation')}
+                </div>
+                <div className="showcase-aside-block-option-icon">
+                    <em className="mdi mdi-tag-multiple-outline" aria-hidden="true" />
+                </div>
+            </div>
+            <div
+                role="button"
+                tabIndex={0}
+                aria-pressed={Boolean(value.extra_payment)}
+                aria-label={translate('products.filters.payment_option_ideal')}
+                onClick={() => setValue({ extra_payment: !value.extra_payment })}
+                onKeyDown={(e) => clickOnKeyEnter(e, true)}
+                className={classNames(
+                    'showcase-aside-block-option',
+                    value.extra_payment && 'showcase-aside-block-option-active',
+                )}>
+                <div className="showcase-aside-block-option-check">
+                    <em className="mdi mdi-check" aria-hidden="true" />
+                </div>
+                <div className="showcase-aside-block-option-name">
+                    {translate('products.filters.payment_option_ideal')}
+                </div>
+                <div className="showcase-aside-block-option-icon">
+                    <img src={assetUrl('/assets/img/icon-ideal.svg')} alt="" aria-hidden="true" />
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/react/src/webshop/hooks/useProductFeatures.tsx b/react/src/webshop/hooks/useProductFeatures.tsx
new file mode 100644
index 000000000..a7040ed0a
--- /dev/null
+++ b/react/src/webshop/hooks/useProductFeatures.tsx
@@ -0,0 +1,13 @@
+import Product from '../props/models/Product';
+import { useMemo } from 'react';
+
+export default function useProductFeatures(product: Product) {
+    return useMemo(
+        () => ({
+            scanning_enabled: product?.funds?.some((fund) => fund.scanning_enabled),
+            reservations_enabled: product?.funds?.some((fund) => fund.reservations_enabled),
+            reservation_extra_payments_enabled: product?.funds?.some((fund) => fund.reservation_extra_payments_enabled),
+        }),
+        [product],
+    );
+}
diff --git a/react/src/webshop/hooks/useShowProductPaymentOptionsInfoModal.tsx b/react/src/webshop/hooks/useShowProductPaymentOptionsInfoModal.tsx
new file mode 100644
index 000000000..51263bf02
--- /dev/null
+++ b/react/src/webshop/hooks/useShowProductPaymentOptionsInfoModal.tsx
@@ -0,0 +1,75 @@
+import React, { useCallback, useMemo } from 'react';
+import ModalNotification from '../components/modals/ModalNotification';
+import useOpenModal from '../../dashboard/hooks/useOpenModal';
+import useAssetUrl from './useAssetUrl';
+import useTranslate from '../../dashboard/hooks/useTranslate';
+
+export default function useShowProductPaymentOptionsInfoModal() {
+    const assetUrl = useAssetUrl();
+    const openModal = useOpenModal();
+    const translate = useTranslate();
+
+    const iconsBlock = useMemo(() => {
+        return (
+            <div className={'block block-products-payment-options-info'}>
+                <div className="products-payment-option-info">
+                    <div className="products-payment-option-icon">
+                        <em className="mdi mdi-qrcode-scan" />
+                    </div>
+                    <div className="products-payment-option-content">
+                        <div className="products-payment-option-title">
+                            {translate('modal_product_payment_options_info.info_option_qr_title')}
+                        </div>
+                        <div className="products-payment-option-description">
+                            {translate('modal_product_payment_options_info.info_option_qr_description')}
+                        </div>
+                    </div>
+                </div>
+                <div className="products-payment-option-info">
+                    <div className="products-payment-option-icon">
+                        <em className="mdi mdi-tag-multiple-outline" />
+                    </div>
+                    <div className="products-payment-option-content">
+                        <div className="products-payment-option-title">
+                            {translate('modal_product_payment_options_info.info_option_reservation_title')}
+                        </div>
+                        <div className="products-payment-option-description">
+                            {translate('modal_product_payment_options_info.info_option_reservation_description')}
+                        </div>
+                    </div>
+                </div>
+                <div className="products-payment-option-info">
+                    <div className="products-payment-option-icon">
+                        <img src={assetUrl('/assets/img/icon-ideal.svg')} alt="" aria-hidden="true" />
+                    </div>
+                    <div className="products-payment-option-content">
+                        <div className="products-payment-option-title">
+                            {translate('modal_product_payment_options_info.info_option_extra_payment_ideal_title')}
+                        </div>
+                        <div className="products-payment-option-description">
+                            {translate(
+                                'modal_product_payment_options_info.info_option_extra_payment_ideal_description',
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }, [assetUrl, translate]);
+
+    return useCallback(() => {
+        openModal((modal) => (
+            <ModalNotification
+                modal={modal}
+                title={translate('modal_product_payment_options_info.title')}
+                header={translate('modal_product_payment_options_info.header')}
+                description={translate('modal_product_payment_options_info.description')}
+                mdiIconType={'default'}
+                mdiIconClass={'information-outline'}
+                type={'action-result'}
+                confirmBtnText={translate('modal_product_payment_options_info.confirm')}
+                appendElement={iconsBlock}
+            />
+        ));
+    }, [openModal, iconsBlock, translate]);
+}
diff --git a/react/src/webshop/i18n/i18n-nl.mjs b/react/src/webshop/i18n/i18n-nl.mjs
index dbbad7ea6..58679aedb 100644
--- a/react/src/webshop/i18n/i18n-nl.mjs
+++ b/react/src/webshop/i18n/i18n-nl.mjs
@@ -72,6 +72,7 @@ import modal_physical_card_unlink from './nl/modals/modal-physical_card_unlink.m
 import modal_fund_help from './nl/modals/modal_fund_help.mjs';
 import modal_pin_code from './nl/modals/modal_pin_code.mjs';
 import modal_logout from './nl/modals/modal_logout.mjs';
+import modal_product_payment_options_info from './nl/modals/modal_product_payment_options_info.mjs';
 
 import app_footer from './nl/directives/app-footer.mjs';
 import block_products from './nl/directives/block-products.mjs';
@@ -341,10 +342,23 @@ export default {
             buttons: { is_pending: 'In afwachting', is_applicable: 'Aanvragen' },
             status: { active: 'Actief' },
         },
-        product_item_grid: { bookmark: 'Toevoegen aan verlanglijstje' },
-        product_item_list: { bookmark: 'Toevoegen aan verlanglijstje' },
-        product_item_search: { free: 'Gratis' },
-        provider_item_list: { open_provider: 'Open aanbieder', show_locations: 'Toon locaties', no_data: 'Geen data' },
+        product_item: {
+            bookmark: 'Toevoegen aan verlanglijstje',
+            payment_option_qr: 'QR-betaling',
+            payment_option_qr_aria_label: 'QR-betaling: klik voor meer informatie',
+            payment_option_reservation: 'Online betalen',
+            payment_option_reservation_aria_label: 'Online betalen: klik voor meer informatie',
+            payment_option_ideal: 'Bijbetalen mogelijk',
+            payment_option_ideal_aria_label: 'Bijbetalen mogelijk: klik voor meer informatie',
+        },
+        product_item_search: {
+            free: 'Gratis',
+        },
+        provider_item_list: {
+            open_provider: 'Open aanbieder',
+            show_locations: 'Toon locaties',
+            no_data: 'Geen data',
+        },
         funds_list_pre_check: {
             show_more: 'Toon meer',
             show_less: 'Toon minder',
@@ -467,6 +481,7 @@ export default {
     modal_fund_help: modal_fund_help,
     modal_pin_code: modal_pin_code,
     modal_logout: modal_logout,
+    modal_product_payment_options_info: modal_product_payment_options_info,
 
     // DIRECTIVES
     app_footer: app_footer,
diff --git a/react/src/webshop/i18n/nl/modals/modal_product_payment_options_info.mjs b/react/src/webshop/i18n/nl/modals/modal_product_payment_options_info.mjs
new file mode 100644
index 000000000..ff8edc2a9
--- /dev/null
+++ b/react/src/webshop/i18n/nl/modals/modal_product_payment_options_info.mjs
@@ -0,0 +1,15 @@
+export default {
+    title: 'Betaalopties',
+    header: 'Betaalopties',
+    description: 'De betaalmogelijkheden verschillen per product. Betalen kan op verschillende manieren:',
+    confirm: 'Het is duidelijk!',
+    info_option_qr_title: 'QR-code',
+    info_option_qr_description:
+        'Betaal eenvoudig op de locatie van de aanbieder door de QR-code die u heeft ontvangen te tonen bij het afrekenen. De aanbieder scant de code, waarna de betaling direct wordt verwerkt.',
+    info_option_reservation_title: 'Reservering',
+    info_option_reservation_description:
+        'Betaal via deze website door een aanbod te bestellen. Klik hiervoor op de knop reserveren en vul de gevraagde gegevens in. Het bedrag wordt direct van het beschikbare tegoed afgetrokken. De aanbieder ontvangt de reservering en neemt indien nodig contact met u op.',
+    info_option_extra_payment_ideal_title: 'Bijbetalen (iDeal)',
+    info_option_extra_payment_ideal_description:
+        'Is uw tegoed niet voldoende voor een reservering? Bij sommige producten kunt u het resterende bedrag online veilig bijbetalen via iDEAL.',
+};
diff --git a/react/src/webshop/i18n/nl/pages/product.mjs b/react/src/webshop/i18n/nl/pages/product.mjs
index 00319df45..895a2d8de 100644
--- a/react/src/webshop/i18n/nl/pages/product.mjs
+++ b/react/src/webshop/i18n/nl/pages/product.mjs
@@ -30,6 +30,13 @@ export default {
         funds_card_description:
             'Wilt u weten welk tegoed u kunt gebruiken voor dit aanbod? Ga dan naar het overzicht van tegoeden!',
         funds_card_btn_text: 'Ga naar tegoeden',
+        payment_options: 'Betaalopties',
+        payment_option_qr: 'QR‑code tonen bij aanbieder',
+        payment_option_qr_aria_label: 'QR‑code tonen bij aanbieder: klik voor meer informatie',
+        payment_option_reservation: 'Online reserveren',
+        payment_option_reservation_aria_label: 'Online reserveren: klik voor meer informatie',
+        payment_option_ideal: 'Online bijbetalen (iDEAL)',
+        payment_option_ideal_aria_label: 'Online bijbetalen (iDEAL): klik voor meer informatie',
     },
     status: {
         active: 'Actief',
diff --git a/react/src/webshop/i18n/nl/pages/products.mjs b/react/src/webshop/i18n/nl/pages/products.mjs
index 95ba2bfd2..4b545b127 100644
--- a/react/src/webshop/i18n/nl/pages/products.mjs
+++ b/react/src/webshop/i18n/nl/pages/products.mjs
@@ -14,6 +14,14 @@ export default {
         fund: 'Tegoeden',
         postcode: 'Postcode',
         distance: 'Afstand',
+        price_from: 'Van',
+        price_to: 'Naar',
+        price: 'Prijs (€)',
+        payment_options: 'Betalingsmogelijkheden',
+        payment_options_info: 'Lees meer over de betalingsopties',
+        payment_option_qr: 'QR-code tonen bij de aanbieder',
+        payment_option_reservation: 'Online reserveren',
+        payment_option_ideal: 'Online bijbetalen met iDeal',
         sort: 'Sorteer',
         all_funds: 'Alle tegoeden...',
         all_providers: 'Selecteer aanbieder...',
diff --git a/react/src/webshop/services/ProductService.ts b/react/src/webshop/services/ProductService.ts
index 75e8fb3d6..e1f030416 100644
--- a/react/src/webshop/services/ProductService.ts
+++ b/react/src/webshop/services/ProductService.ts
@@ -21,7 +21,7 @@ export class ProductService<T = Product> {
     /**
      * Fetch list
      */
-    public list(data: object = {}): Promise<ApiResponse<T>> {
+    public list(data: object = {}): Promise<ApiResponse<T, { price_max: number }>> {
         return this.apiRequest.get(`${this.prefix}`, data);
     }
 

From 3f9703877cfeb7dc098728a39bd64d3dcefa626b Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Thu, 17 Apr 2025 15:56:34 +0300
Subject: [PATCH 13/23] update translations

---
 react/src/webshop/i18n/translated/ar.json    |  46 +++++--
 react/src/webshop/i18n/translated/de.json    |  46 +++++--
 react/src/webshop/i18n/translated/en-US.json |  46 +++++--
 react/src/webshop/i18n/translated/fr.json    |  46 +++++--
 react/src/webshop/i18n/translated/pl.json    |  46 +++++--
 react/src/webshop/i18n/translated/ru.json    |  46 +++++--
 react/src/webshop/i18n/translated/tr.json    |  46 +++++--
 react/src/webshop/i18n/translated/uk.json    |  46 +++++--
 translations/cache/cache.json                | 130 ++++++++++++++++++-
 9 files changed, 429 insertions(+), 69 deletions(-)

diff --git a/react/src/webshop/i18n/translated/ar.json b/react/src/webshop/i18n/translated/ar.json
index 645f5a9b5..818bb4e1a 100644
--- a/react/src/webshop/i18n/translated/ar.json
+++ b/react/src/webshop/i18n/translated/ar.json
@@ -270,12 +270,6 @@
             "why": "لماذا؟",
             "activate": "تفعيل"
         },
-        "product_item_grid": {
-            "bookmark": "إضافة إلى قائمة الرغبات"
-        },
-        "product_item_list": {
-            "bookmark": "إضافة إلى قائمة الرغبات"
-        },
         "product_item_search": {
             "free": "مجاناً"
         },
@@ -283,6 +277,15 @@
             "no_data": "لا توجد بيانات",
             "open_provider": "المزود المفتوح",
             "show_locations": "عرض المواقع"
+        },
+        "product_item": {
+            "bookmark": "إضافة إلى قائمة الرغبات",
+            "payment_option_ideal": "إمكانية الدفع الإضافي",
+            "payment_option_ideal_aria_label": "إمكانية الدفع الإضافي: انقر للحصول على مزيد من المعلومات",
+            "payment_option_qr": "مدفوعات QR",
+            "payment_option_qr_aria_label": "دفع QR: انقر للحصول على مزيد من المعلومات",
+            "payment_option_reservation": "الدفع عبر الإنترنت",
+            "payment_option_reservation_aria_label": "الدفع عبر الإنترنت: انقر للحصول على مزيد من المعلومات"
         }
     },
     "logo_alt_text": {
@@ -417,7 +420,15 @@
             "providers": "المزودون",
             "search": "عرض البحث",
             "sort": "فرز",
-            "sub_category": "الفئة الفرعية"
+            "sub_category": "الفئة الفرعية",
+            "payment_option_ideal": "الدفع عبر الإنترنت باستخدام iDeal",
+            "payment_option_qr": "إظهار رمز الاستجابة السريعة لدى المزود",
+            "payment_option_reservation": "احجز عبر الإنترنت",
+            "payment_options": "خيارات الدفع",
+            "payment_options_info": "اقرأ المزيد عن خيارات الدفع",
+            "price": "السعر (€)",
+            "price_from": "من",
+            "price_to": "إلى"
         },
         "sort": {
             "created_at_asc": "الأقدم أولاً",
@@ -1799,7 +1810,14 @@
             "limit": "الرصيد المتبقي",
             "max_limit": "الحد الأقصى للشخص الواحد:",
             "pay_from_voucher": "أنت تدفع من الرصيد",
-            "price": "السعر:"
+            "price": "السعر:",
+            "payment_option_ideal": "الدفع عبر الإنترنت (iDEAL)",
+            "payment_option_ideal_aria_label": "الدفع عبر الإنترنت (iDEAL): انقر للحصول على مزيد من المعلومات",
+            "payment_option_qr": "إظهار رمز الاستجابة السريعة لدى المزود",
+            "payment_option_qr_aria_label": "إظهار رمز الاستجابة السريعة لدى مقدم الخدمة: انقر للحصول على مزيد من المعلومات",
+            "payment_option_reservation": "احجز عبر الإنترنت",
+            "payment_option_reservation_aria_label": "الحجز عبر الإنترنت: انقر للحصول على مزيد من المعلومات",
+            "payment_options": "خيارات الدفع"
         },
         "low_amount": "ليس لديك رصيد ائتماني كافٍ.",
         "map": {
@@ -3536,5 +3554,17 @@
         "stop_successful": "توقفت المشاركة",
         "success_message": "لقد توقفت مشاركتك {{name}} ",
         "warning": "ملاحظة: لم يعد بإمكانك استخدام رصيدك بعد ذلك. سيتم إلغاء تنشيط رصيدك {{name}} الخاص بك."
+    },
+    "modal_product_payment_options_info": {
+        "confirm": "الأمر واضح!",
+        "description": "تختلف خيارات الدفع حسب المنتج. يمكن الدفع بعدة طرق:",
+        "header": "خيارات الدفع",
+        "info_option_extra_payment_ideal_description": "هل رصيدك لا يكفي للحجز؟ بالنسبة لبعض المنتجات، يمكنك دفع المبلغ المتبقي بأمان عبر الإنترنت من خلال iDEAL.",
+        "info_option_extra_payment_ideal_title": "دفعة إضافية (iDeal)",
+        "info_option_qr_description": "ادفع بسهولة في موقع مقدم الخدمة من خلال إظهار رمز الاستجابة السريعة الذي تلقيته عند الدفع. سيقوم مقدم الخدمة بمسح الرمز ضوئياً وستتم معالجة الدفع فوراً.",
+        "info_option_qr_title": "رمز الاستجابة السريعة",
+        "info_option_reservation_description": "ادفع عبر هذا الموقع الإلكتروني عن طريق طلب عرض. للقيام بذلك، انقر على زر الحجز واملأ التفاصيل المطلوبة. سيتم خصم المبلغ مباشرةً من الرصيد المتاح. سيتلقى مقدم الخدمة الحجز ويتصل بك إذا لزم الأمر.",
+        "info_option_reservation_title": "الحجز",
+        "title": "خيارات الدفع"
     }
 }
\ No newline at end of file
diff --git a/react/src/webshop/i18n/translated/de.json b/react/src/webshop/i18n/translated/de.json
index ca35177f6..ae27746f2 100644
--- a/react/src/webshop/i18n/translated/de.json
+++ b/react/src/webshop/i18n/translated/de.json
@@ -1261,12 +1261,6 @@
             "why": "Warum?",
             "activate": "Aktivieren Sie"
         },
-        "product_item_grid": {
-            "bookmark": "Zur Wunschliste hinzufügen"
-        },
-        "product_item_list": {
-            "bookmark": "Zur Wunschliste hinzufügen"
-        },
         "product_item_search": {
             "free": "Kostenlos"
         },
@@ -1274,6 +1268,15 @@
             "no_data": "Keine Daten",
             "open_provider": "Anbieter öffnen",
             "show_locations": "Standorte anzeigen"
+        },
+        "product_item": {
+            "bookmark": "Zur Wunschliste hinzufügen",
+            "payment_option_ideal": "Zusätzliche Zahlung möglich",
+            "payment_option_ideal_aria_label": "Zusätzliche Zahlung möglich: Klicken Sie für weitere Informationen",
+            "payment_option_qr": "QR-Zahlung",
+            "payment_option_qr_aria_label": "QR-Zahlung: Klicken Sie für weitere Informationen",
+            "payment_option_reservation": "Online bezahlen",
+            "payment_option_reservation_aria_label": "Online bezahlen: Klicken Sie für weitere Informationen"
         }
     },
     "logo_alt_text": {
@@ -2237,7 +2240,14 @@
             "limit": "Verbleibender Kredit:",
             "max_limit": "Maximal pro Person:",
             "pay_from_voucher": "Sie zahlen aus dem Guthaben:",
-            "price": "Preis:"
+            "price": "Preis:",
+            "payment_option_ideal": "Online bezahlen (iDEAL)",
+            "payment_option_ideal_aria_label": "Online-Zahlung (iDEAL): Klicken Sie für weitere Informationen",
+            "payment_option_qr": "QR-Code beim Anbieter anzeigen",
+            "payment_option_qr_aria_label": "QR-Code beim Anbieter anzeigen: Klicken Sie für weitere Informationen",
+            "payment_option_reservation": "Online buchen",
+            "payment_option_reservation_aria_label": "Online-Reservierung: Klicken Sie für weitere Informationen",
+            "payment_options": "Zahlungsmöglichkeiten"
         },
         "low_amount": "Sie haben keinen Kredit mit ausreichendem Guthaben.",
         "map": {
@@ -2284,7 +2294,15 @@
             "providers": "Anbieter",
             "search": "Angebot suchen",
             "sort": "Sortieren",
-            "sub_category": "Unterkategorie"
+            "sub_category": "Unterkategorie",
+            "payment_option_ideal": "Online-Bezahlung mit iDeal",
+            "payment_option_qr": "QR-Code beim Anbieter anzeigen",
+            "payment_option_reservation": "Online buchen",
+            "payment_options": "Zahlungsmöglichkeiten",
+            "payment_options_info": "Lesen Sie mehr über Zahlungsmöglichkeiten",
+            "price": "Preis (€)",
+            "price_from": "Von",
+            "price_to": "An"
         },
         "sort": {
             "created_at_asc": "Älteste zuerst",
@@ -3536,5 +3554,17 @@
         "stop_successful": "Teilnahme gestoppt",
         "success_message": "Ihre Teilnahme an {{name}} ist beendet.",
         "warning": "Hinweis: Sie können Ihr Guthaben danach nicht mehr verwenden. Ihr {{name}} Guthaben wird deaktiviert."
+    },
+    "modal_product_payment_options_info": {
+        "confirm": "Es ist klar!",
+        "description": "Die Zahlungsmöglichkeiten variieren je nach Produkt. Die Bezahlung kann auf verschiedene Arten erfolgen:",
+        "header": "Zahlungsmöglichkeiten",
+        "info_option_extra_payment_ideal_description": "Reicht Ihr Guthaben für eine Reservierung nicht aus? Für einige Produkte können Sie den Restbetrag sicher online über iDEAL bezahlen.",
+        "info_option_extra_payment_ideal_title": "Zusätzliche Zahlung (iDeal)",
+        "info_option_qr_description": "Bezahlen Sie ganz einfach vor Ort beim Anbieter, indem Sie den QR-Code zeigen, den Sie an der Kasse erhalten haben. Der Anbieter scannt den Code und die Zahlung wird sofort verarbeitet.",
+        "info_option_qr_title": "QR-Code",
+        "info_option_reservation_description": "Bezahlen Sie über diese Website, indem Sie ein Angebot bestellen. Klicken Sie dazu auf die Schaltfläche \"Reservieren\" und geben Sie die erforderlichen Daten ein. Der Betrag wird direkt von Ihrem Guthaben abgezogen. Der Anbieter wird die Reservierung erhalten und Sie gegebenenfalls kontaktieren.",
+        "info_option_reservation_title": "Buchung",
+        "title": "Zahlungsmöglichkeiten"
     }
 }
\ No newline at end of file
diff --git a/react/src/webshop/i18n/translated/en-US.json b/react/src/webshop/i18n/translated/en-US.json
index 75eeeb772..7d14910c5 100644
--- a/react/src/webshop/i18n/translated/en-US.json
+++ b/react/src/webshop/i18n/translated/en-US.json
@@ -457,7 +457,15 @@
             "providers": "Providers",
             "search": "Search offer",
             "sort": "Sort",
-            "sub_category": "Subcategory"
+            "sub_category": "Subcategory",
+            "payment_option_ideal": "Online additional payment with iDeal",
+            "payment_option_qr": "Show QR code at the provider",
+            "payment_option_reservation": "Online booking",
+            "payment_options": "Payment options",
+            "payment_options_info": "Learn more about payment options",
+            "price": "Price (€)",
+            "price_from": "From",
+            "price_to": "To"
         },
         "sort": {
             "created_at_asc": "Oldest first",
@@ -1504,7 +1512,14 @@
             "limit": "Remaining credit:",
             "max_limit": "Maximum per person:",
             "pay_from_voucher": "You pay from the credit:",
-            "price": "Price:"
+            "price": "Price:",
+            "payment_option_ideal": "Online additional payment (iDEAL)",
+            "payment_option_ideal_aria_label": "Online additional payment (iDEAL): click for more information",
+            "payment_option_qr": "Show QR code at provider",
+            "payment_option_qr_aria_label": "Show QR code at provider: click for more information",
+            "payment_option_reservation": "Online booking",
+            "payment_option_reservation_aria_label": "Online booking: click for more information",
+            "payment_options": "Payment options"
         },
         "low_amount": "You do not have a credit with sufficient balance.",
         "map": {
@@ -3059,12 +3074,6 @@
             "why": "Why?",
             "activate": "Activate"
         },
-        "product_item_grid": {
-            "bookmark": "Add to wish list"
-        },
-        "product_item_list": {
-            "bookmark": "Add to wish list"
-        },
         "product_item_search": {
             "free": "Free"
         },
@@ -3072,6 +3081,15 @@
             "no_data": "No data",
             "open_provider": "Open provider",
             "show_locations": "Show locations"
+        },
+        "product_item": {
+            "bookmark": "Add to wish list",
+            "payment_option_ideal": "Additional payment possible",
+            "payment_option_ideal_aria_label": "Additional payment possible: click for more information",
+            "payment_option_qr": "QR payment",
+            "payment_option_qr_aria_label": "QR payment: click for more information",
+            "payment_option_reservation": "Pay online",
+            "payment_option_reservation_aria_label": "Paying online: click for more information"
         }
     },
     "security_2fa": {
@@ -3536,5 +3554,17 @@
         "stop_successful": "Participation stopped",
         "success_message": "Your {{name}} participation has stopped.",
         "warning": "Note: You cannot use your credit after this. Your {{name}} credit will be deactivated."
+    },
+    "modal_product_payment_options_info": {
+        "confirm": "It is clear!",
+        "description": "Payment options vary by product. Payment can be made in several ways:",
+        "header": "Payment options",
+        "info_option_extra_payment_ideal_description": "Is your credit not enough for a reservation? For some products, you can safely top up the remaining amount online via iDEAL.",
+        "info_option_extra_payment_ideal_title": "Additional payment (iDeal)",
+        "info_option_qr_description": "Pay easily at the provider's location by showing the QR code you received at checkout. The provider scans the code, then the payment is processed immediately.",
+        "info_option_qr_title": "QR code",
+        "info_option_reservation_description": "Pay through this website by ordering an offer. To do so, click on the reserve button and enter the requested information. The amount will be deducted directly from the available credit. The provider will receive the reservation and contact you if necessary.",
+        "info_option_reservation_title": "Reservation",
+        "title": "Payment options"
     }
 }
\ No newline at end of file
diff --git a/react/src/webshop/i18n/translated/fr.json b/react/src/webshop/i18n/translated/fr.json
index d96f100f6..43deb9333 100644
--- a/react/src/webshop/i18n/translated/fr.json
+++ b/react/src/webshop/i18n/translated/fr.json
@@ -1261,12 +1261,6 @@
             "why": "Pourquoi ?",
             "activate": "Activer"
         },
-        "product_item_grid": {
-            "bookmark": "Ajouter à la liste de souhaits"
-        },
-        "product_item_list": {
-            "bookmark": "Ajouter à la liste de souhaits"
-        },
         "product_item_search": {
             "free": "Gratuit"
         },
@@ -1274,6 +1268,15 @@
             "no_data": "Pas de données",
             "open_provider": "Fournisseur ouvert",
             "show_locations": "Lieux d'exposition"
+        },
+        "product_item": {
+            "bookmark": "Ajouter à la liste de souhaits",
+            "payment_option_ideal": "Possibilité de paiement supplémentaire",
+            "payment_option_ideal_aria_label": "Paiement supplémentaire possible : cliquez pour plus d'informations",
+            "payment_option_qr": "Paiement QR",
+            "payment_option_qr_aria_label": "Paiement QR : cliquez pour plus d'informations",
+            "payment_option_reservation": "Payer en ligne",
+            "payment_option_reservation_aria_label": "Payer en ligne : cliquez pour plus d'informations"
         }
     },
     "logo_alt_text": {
@@ -2237,7 +2240,14 @@
             "limit": "Crédit restant :",
             "max_limit": "Maximum par personne :",
             "pay_from_voucher": "Vous payez à partir du crédit :",
-            "price": "Prix :"
+            "price": "Prix :",
+            "payment_option_ideal": "Payer en ligne (iDEAL)",
+            "payment_option_ideal_aria_label": "Paiement en ligne (iDEAL) : cliquez pour plus d'informations",
+            "payment_option_qr": "Afficher le code QR au fournisseur",
+            "payment_option_qr_aria_label": "Afficher le code QR chez le fournisseur : cliquer pour plus d'informations",
+            "payment_option_reservation": "Réserver en ligne",
+            "payment_option_reservation_aria_label": "Réservation en ligne : cliquez pour plus d'informations",
+            "payment_options": "Options de paiement"
         },
         "low_amount": "Vous n'avez pas de crédit avec un solde suffisant.",
         "map": {
@@ -2284,7 +2294,15 @@
             "providers": "Prestataires",
             "search": "Offre de recherche",
             "sort": "Trier",
-            "sub_category": "Sous-catégorie"
+            "sub_category": "Sous-catégorie",
+            "payment_option_ideal": "Payer en ligne avec iDeal",
+            "payment_option_qr": "Afficher le code QR au fournisseur",
+            "payment_option_reservation": "Réserver en ligne",
+            "payment_options": "Options de paiement",
+            "payment_options_info": "En savoir plus sur les options de paiement",
+            "price": "Prix (€)",
+            "price_from": "De",
+            "price_to": "Pour"
         },
         "sort": {
             "created_at_asc": "Le plus vieux d'abord",
@@ -3536,5 +3554,17 @@
         "stop_successful": "Arrêt de la participation",
         "success_message": "Votre participation à {{name}} a cessé.",
         "warning": "Note : Vous ne pouvez plus utiliser votre crédit après cela. Votre crédit {{name}} sera désactivé."
+    },
+    "modal_product_payment_options_info": {
+        "confirm": "C'est clair !",
+        "description": "Les options de paiement varient selon les produits. Le paiement peut être effectué de plusieurs manières :",
+        "header": "Options de paiement",
+        "info_option_extra_payment_ideal_description": "Votre crédit n'est pas suffisant pour une réservation ? Pour certains produits, vous pouvez payer en toute sécurité le montant restant en ligne via iDEAL.",
+        "info_option_extra_payment_ideal_title": "Paiement supplémentaire (iDeal)",
+        "info_option_qr_description": "Payez facilement dans les locaux du prestataire en montrant le code QR que vous avez reçu au moment du paiement. Le fournisseur scannera le code et le paiement sera traité immédiatement.",
+        "info_option_qr_title": "Code QR",
+        "info_option_reservation_description": "Payez via ce site web en commandant une offre. Pour ce faire, cliquez sur le bouton de réservation et remplissez les données demandées. Le montant sera directement déduit du crédit disponible. Le fournisseur recevra la réservation et vous contactera si nécessaire.",
+        "info_option_reservation_title": "Réservation",
+        "title": "Options de paiement"
     }
 }
\ No newline at end of file
diff --git a/react/src/webshop/i18n/translated/pl.json b/react/src/webshop/i18n/translated/pl.json
index aea5ed94b..e6bda8d07 100644
--- a/react/src/webshop/i18n/translated/pl.json
+++ b/react/src/webshop/i18n/translated/pl.json
@@ -1261,12 +1261,6 @@
             "why": "Dlaczego?",
             "activate": "Aktywuj"
         },
-        "product_item_grid": {
-            "bookmark": "Dodaj do listy życzeń"
-        },
-        "product_item_list": {
-            "bookmark": "Dodaj do listy życzeń"
-        },
         "product_item_search": {
             "free": "Darmowy"
         },
@@ -1274,6 +1268,15 @@
             "no_data": "Brak danych",
             "open_provider": "Otwarty dostawca",
             "show_locations": "Pokaż lokalizacje"
+        },
+        "product_item": {
+            "bookmark": "Dodaj do listy życzeń",
+            "payment_option_ideal": "Możliwa dodatkowa płatność",
+            "payment_option_ideal_aria_label": "Możliwa dodatkowa płatność: kliknij, aby uzyskać więcej informacji",
+            "payment_option_qr": "Płatność QR",
+            "payment_option_qr_aria_label": "Płatność QR: kliknij, aby uzyskać więcej informacji",
+            "payment_option_reservation": "Płatność online",
+            "payment_option_reservation_aria_label": "Płatność online: kliknij, aby uzyskać więcej informacji"
         }
     },
     "logo_alt_text": {
@@ -2237,7 +2240,14 @@
             "limit": "Pozostały kredyt:",
             "max_limit": "Maksymalnie na osobę:",
             "pay_from_voucher": "Płacisz z kredytu:",
-            "price": "Cena:"
+            "price": "Cena:",
+            "payment_option_ideal": "Płatność online (iDEAL)",
+            "payment_option_ideal_aria_label": "Płatność online (iDEAL): kliknij, aby uzyskać więcej informacji",
+            "payment_option_qr": "Pokaż kod QR u dostawcy",
+            "payment_option_qr_aria_label": "Pokaż kod QR u dostawcy: kliknij, aby uzyskać więcej informacji",
+            "payment_option_reservation": "Zarezerwuj online",
+            "payment_option_reservation_aria_label": "Rezerwacja online: kliknij, aby uzyskać więcej informacji",
+            "payment_options": "Opcje płatności"
         },
         "low_amount": "Nie masz kredytu z wystarczającym saldem.",
         "map": {
@@ -2284,7 +2294,15 @@
             "providers": "Dostawcy",
             "search": "Oferta wyszukiwania",
             "sort": "Sortuj",
-            "sub_category": "Podkategoria"
+            "sub_category": "Podkategoria",
+            "payment_option_ideal": "Płatność online za pomocą iDeal",
+            "payment_option_qr": "Pokaż kod QR u dostawcy",
+            "payment_option_reservation": "Zarezerwuj online",
+            "payment_options": "Opcje płatności",
+            "payment_options_info": "Więcej informacji o opcjach płatności",
+            "price": "Cena (€)",
+            "price_from": "Od",
+            "price_to": "Do"
         },
         "sort": {
             "created_at_asc": "Najstarszy pierwszy",
@@ -3536,5 +3554,17 @@
         "stop_successful": "Udział został wstrzymany",
         "success_message": "Twój udział w {{name}} został wstrzymany.",
         "warning": "Uwaga: Po wykonaniu tej czynności nie można już korzystać z kredytu. Kredyt {{name}} zostanie dezaktywowany."
+    },
+    "modal_product_payment_options_info": {
+        "confirm": "To jasne!",
+        "description": "Opcje płatności różnią się w zależności od produktu. Płatności można dokonać na kilka sposobów:",
+        "header": "Opcje płatności",
+        "info_option_extra_payment_ideal_description": "Twój kredyt nie wystarcza na rezerwację? W przypadku niektórych produktów możesz bezpiecznie zapłacić pozostałą kwotę online za pośrednictwem iDEAL.",
+        "info_option_extra_payment_ideal_title": "Dodatkowa płatność (iDeal)",
+        "info_option_qr_description": "Zapłać z łatwością w lokalizacji dostawcy, pokazując kod QR otrzymany przy kasie. Dostawca usług zeskanuje kod, a płatność zostanie natychmiast przetworzona.",
+        "info_option_qr_title": "Kod QR",
+        "info_option_reservation_description": "Zapłać za pośrednictwem tej strony, zamawiając ofertę. W tym celu należy kliknąć przycisk rezerwacji i podać wymagane dane. Kwota zostanie potrącona bezpośrednio z dostępnego kredytu. Dostawca otrzyma rezerwację i w razie potrzeby skontaktuje się z Tobą.",
+        "info_option_reservation_title": "Rezerwacja",
+        "title": "Opcje płatności"
     }
 }
\ No newline at end of file
diff --git a/react/src/webshop/i18n/translated/ru.json b/react/src/webshop/i18n/translated/ru.json
index 081579d90..e7a791d19 100644
--- a/react/src/webshop/i18n/translated/ru.json
+++ b/react/src/webshop/i18n/translated/ru.json
@@ -1261,12 +1261,6 @@
             "why": "Почему?",
             "activate": "Активируйте"
         },
-        "product_item_grid": {
-            "bookmark": "Добавить в список желаний"
-        },
-        "product_item_list": {
-            "bookmark": "Добавить в список желаний"
-        },
         "product_item_search": {
             "free": "Бесплатно"
         },
@@ -1274,6 +1268,15 @@
             "no_data": "Нет данных",
             "open_provider": "Открытый поставщик",
             "show_locations": "Показать места"
+        },
+        "product_item": {
+            "bookmark": "Добавить в список желаний",
+            "payment_option_ideal": "Возможна дополнительная оплата",
+            "payment_option_ideal_aria_label": "Возможна дополнительная оплата: нажмите для получения дополнительной информации",
+            "payment_option_qr": "QR-платеж",
+            "payment_option_qr_aria_label": "QR-платеж: нажмите для получения дополнительной информации",
+            "payment_option_reservation": "Оплатить онлайн",
+            "payment_option_reservation_aria_label": "Оплата онлайн: нажмите для получения дополнительной информации"
         }
     },
     "logo_alt_text": {
@@ -2237,7 +2240,14 @@
             "limit": "Оставшийся кредит:",
             "max_limit": "Максимум на человека:",
             "pay_from_voucher": "Вы платите из кредита:",
-            "price": "Цена:"
+            "price": "Цена:",
+            "payment_option_ideal": "Оплатить онлайн (iDEAL)",
+            "payment_option_ideal_aria_label": "Оплата онлайн (iDEAL): нажмите для получения дополнительной информации",
+            "payment_option_qr": "Показать QR-код у провайдера",
+            "payment_option_qr_aria_label": "Показать QR-код у провайдера: нажмите для получения дополнительной информации",
+            "payment_option_reservation": "Забронировать онлайн",
+            "payment_option_reservation_aria_label": "Онлайн-бронирование: нажмите для получения дополнительной информации",
+            "payment_options": "Варианты оплаты"
         },
         "low_amount": "У вас нет кредита с достаточным балансом.",
         "map": {
@@ -2284,7 +2294,15 @@
             "providers": "Провайдеры",
             "search": "Поисковое предложение",
             "sort": "Сортировать",
-            "sub_category": "Подкатегория"
+            "sub_category": "Подкатегория",
+            "payment_option_ideal": "Оплата онлайн с помощью iDeal",
+            "payment_option_qr": "Показать QR-код у провайдера",
+            "payment_option_reservation": "Забронировать онлайн",
+            "payment_options": "Варианты оплаты",
+            "payment_options_info": "Подробнее о вариантах оплаты",
+            "price": "Цена (€)",
+            "price_from": "С сайта",
+            "price_to": "На"
         },
         "sort": {
             "created_at_asc": "Самый старый первый",
@@ -3536,5 +3554,17 @@
         "stop_successful": "Участие прекращено",
         "success_message": "Ваше участие на сайте {{name}} прекращено.",
         "warning": "Примечание: После этого вы больше не сможете использовать свой кредит. Ваш кредит {{name}} будет деактивирован."
+    },
+    "modal_product_payment_options_info": {
+        "confirm": "Все ясно!",
+        "description": "Варианты оплаты зависят от товара. Оплата может быть произведена несколькими способами:",
+        "header": "Варианты оплаты",
+        "info_option_extra_payment_ideal_description": "Вашего кредита недостаточно для бронирования? Для некоторых продуктов вы можете спокойно оплатить оставшуюся сумму онлайн через iDEAL.",
+        "info_option_extra_payment_ideal_title": "Дополнительная оплата (iDeal)",
+        "info_option_qr_description": "Легко оплатите услугу в месте нахождения поставщика, предъявив QR-код, полученный при оформлении заказа. Поставщик отсканирует код, и платеж будет немедленно обработан.",
+        "info_option_qr_title": "QR-код",
+        "info_option_reservation_description": "Оплатите заказ через этот сайт, заказав предложение. Для этого нажмите на кнопку резервирования и заполните необходимые данные. Сумма будет вычтена непосредственно из доступного кредита. Поставщик получит заказ и при необходимости свяжется с вами.",
+        "info_option_reservation_title": "Бронирование",
+        "title": "Варианты оплаты"
     }
 }
\ No newline at end of file
diff --git a/react/src/webshop/i18n/translated/tr.json b/react/src/webshop/i18n/translated/tr.json
index 26ea9aaa3..7d7f021ee 100644
--- a/react/src/webshop/i18n/translated/tr.json
+++ b/react/src/webshop/i18n/translated/tr.json
@@ -270,12 +270,6 @@
             "why": "Neden?",
             "activate": "Etkinleştir"
         },
-        "product_item_grid": {
-            "bookmark": "İstek listesine ekle"
-        },
-        "product_item_list": {
-            "bookmark": "İstek listesine ekle"
-        },
         "product_item_search": {
             "free": "Ücretsiz"
         },
@@ -283,6 +277,15 @@
             "no_data": "Veri yok",
             "open_provider": "Açık sağlayıcı",
             "show_locations": "Yerleri göster"
+        },
+        "product_item": {
+            "bookmark": "İstek listesine ekle",
+            "payment_option_ideal": "Ek ödeme mümkün",
+            "payment_option_ideal_aria_label": "Ek ödeme mümkün: daha fazla bilgi için tıklayın",
+            "payment_option_qr": "QR ödeme",
+            "payment_option_qr_aria_label": "QR ödemesi: daha fazla bilgi için tıklayın",
+            "payment_option_reservation": "Online ödeme",
+            "payment_option_reservation_aria_label": "Online ödeme: daha fazla bilgi için tıklayın"
         }
     },
     "logo_alt_text": {
@@ -417,7 +420,15 @@
             "providers": "Sağlayıcılar",
             "search": "Arama teklifi",
             "sort": "Sırala",
-            "sub_category": "Alt Kategori"
+            "sub_category": "Alt Kategori",
+            "payment_option_ideal": "iDeal ile çevrimiçi ödeme",
+            "payment_option_qr": "QR kodunu sağlayıcıda göster",
+            "payment_option_reservation": "Online rezervasyon",
+            "payment_options": "Ödeme seçenekleri",
+            "payment_options_info": "Ödeme seçenekleri hakkında daha fazla bilgi edinin",
+            "price": "Fiyat (€)",
+            "price_from": "Kimden",
+            "price_to": "için"
         },
         "sort": {
             "created_at_asc": "Önce en yaşlı",
@@ -1799,7 +1810,14 @@
             "limit": "Kalan kredi:",
             "max_limit": "Kişi başına maksimum:",
             "pay_from_voucher": "Krediden ödeme yaparsınız:",
-            "price": "Fiyat:"
+            "price": "Fiyat:",
+            "payment_option_ideal": "Online ödeme (iDEAL)",
+            "payment_option_ideal_aria_label": "Online ödeme (iDEAL): daha fazla bilgi için tıklayın",
+            "payment_option_qr": "QR kodunu sağlayıcıda göster",
+            "payment_option_qr_aria_label": "QR kodunu sağlayıcıda göster: daha fazla bilgi için tıklayın",
+            "payment_option_reservation": "Online rezervasyon",
+            "payment_option_reservation_aria_label": "Online rezervasyon: daha fazla bilgi için tıklayın",
+            "payment_options": "Ödeme seçenekleri"
         },
         "low_amount": "Yeterli bakiyeye sahip krediniz yok.",
         "map": {
@@ -3536,5 +3554,17 @@
         "stop_successful": "Katılım durduruldu",
         "success_message": "{{name}} katılımınız sona ermiştir.",
         "warning": "Not: Bundan sonra kredinizi artık kullanamazsınız. {{name}} krediniz devre dışı bırakılacaktır."
+    },
+    "modal_product_payment_options_info": {
+        "confirm": "Bu çok açık!",
+        "description": "Ödeme seçenekleri ürüne göre değişir. Ödeme çeşitli şekillerde yapılabilir:",
+        "header": "Ödeme seçenekleri",
+        "info_option_extra_payment_ideal_description": "Krediniz rezervasyon için yeterli değil mi? Bazı ürünler için kalan tutarı iDEAL üzerinden online olarak güvenle ödeyebilirsiniz.",
+        "info_option_extra_payment_ideal_title": "Ek ödeme (iDeal)",
+        "info_option_qr_description": "Ödeme sırasında aldığınız QR kodunu göstererek sağlayıcının bulunduğu yerde kolayca ödeme yapın. Sağlayıcı kodu tarayacak ve ödeme hemen işleme alınacaktır.",
+        "info_option_qr_title": "QR kodu",
+        "info_option_reservation_description": "Bir teklif sipariş ederek bu web sitesi üzerinden ödeme yapın. Bunun için rezerve et butonuna tıklayın ve istenen bilgileri doldurun. Tutar doğrudan mevcut krediden düşülecektir. Sağlayıcı rezervasyonu alacak ve gerekirse sizinle iletişime geçecektir.",
+        "info_option_reservation_title": "Rezervasyon",
+        "title": "Ödeme seçenekleri"
     }
 }
\ No newline at end of file
diff --git a/react/src/webshop/i18n/translated/uk.json b/react/src/webshop/i18n/translated/uk.json
index b0157286d..94a8081a3 100644
--- a/react/src/webshop/i18n/translated/uk.json
+++ b/react/src/webshop/i18n/translated/uk.json
@@ -1261,12 +1261,6 @@
             "why": "Чому?",
             "activate": "Активувати"
         },
-        "product_item_grid": {
-            "bookmark": "Додати до списку бажань"
-        },
-        "product_item_list": {
-            "bookmark": "Додати до списку бажань"
-        },
         "product_item_search": {
             "free": "Безкоштовно"
         },
@@ -1274,6 +1268,15 @@
             "no_data": "Немає даних",
             "open_provider": "Відкритий постачальник",
             "show_locations": "Показати локації"
+        },
+        "product_item": {
+            "bookmark": "Додати до списку бажань",
+            "payment_option_ideal": "Можлива додаткова оплата",
+            "payment_option_ideal_aria_label": "Можлива додаткова оплата: натисніть для отримання додаткової інформації",
+            "payment_option_qr": "QR-платіж",
+            "payment_option_qr_aria_label": "QR-платіж: натисніть для отримання додаткової інформації",
+            "payment_option_reservation": "Оплачуйте онлайн",
+            "payment_option_reservation_aria_label": "Сплачуйте онлайн: натисніть для отримання додаткової інформації"
         }
     },
     "logo_alt_text": {
@@ -2237,7 +2240,14 @@
             "limit": "Залишок кредиту:",
             "max_limit": "Максимум на одну людину:",
             "pay_from_voucher": "Ви платите з кредиту:",
-            "price": "Ціна:"
+            "price": "Ціна:",
+            "payment_option_ideal": "Сплачуйте онлайн (iDEAL)",
+            "payment_option_ideal_aria_label": "Оплата онлайн (iDEAL): натисніть для отримання додаткової інформації",
+            "payment_option_qr": "Показати QR-код у постачальника",
+            "payment_option_qr_aria_label": "Показати QR-код у постачальника: натисніть для отримання додаткової інформації",
+            "payment_option_reservation": "Бронюйте онлайн",
+            "payment_option_reservation_aria_label": "Онлайн бронювання: натисніть для отримання додаткової інформації",
+            "payment_options": "Варіанти оплати"
         },
         "low_amount": "У вас немає кредиту з достатнім балансом.",
         "map": {
@@ -2284,7 +2294,15 @@
             "providers": "Провайдери",
             "search": "Пропозиція пошуку",
             "sort": "Сортування",
-            "sub_category": "Підкатегорія"
+            "sub_category": "Підкатегорія",
+            "payment_option_ideal": "Оплата в Інтернеті за допомогою iDeal",
+            "payment_option_qr": "Показати QR-код у постачальника",
+            "payment_option_reservation": "Бронюйте онлайн",
+            "payment_options": "Варіанти оплати",
+            "payment_options_info": "Дізнайтеся більше про способи оплати",
+            "price": "Ціна (€)",
+            "price_from": "Від",
+            "price_to": "До"
         },
         "sort": {
             "created_at_asc": "Найстарший перший",
@@ -3536,5 +3554,17 @@
         "stop_successful": "Участь припинено",
         "success_message": "Ваша участь у {{name}} припинена.",
         "warning": "Примітка: Після цього ви більше не зможете використовувати свій кредит. Ваш кредит {{name}} буде деактивовано."
+    },
+    "modal_product_payment_options_info": {
+        "confirm": "Все ясно!",
+        "description": "Варіанти оплати залежать від товару. Оплату можна здійснити кількома способами:",
+        "header": "Варіанти оплати",
+        "info_option_extra_payment_ideal_description": "Вашого кредиту недостатньо для бронювання? Для деяких товарів ви можете безпечно доплатити решту суми онлайн через iDEAL.",
+        "info_option_extra_payment_ideal_title": "Додатковий платіж (iDeal)",
+        "info_option_qr_description": "Сплачуйте легко в офісі провайдера, показавши QR-код, який ви отримали на касі. Провайдер відсканує код, і платіж буде негайно оброблено.",
+        "info_option_qr_title": "QR-код",
+        "info_option_reservation_description": "Сплатіть через цей сайт, замовивши пропозицію. Для цього натисніть на кнопку зарезервувати та заповніть необхідні дані. Сума буде списана безпосередньо з наявного кредиту. Постачальник отримає замовлення і зв'яжеться з вами у разі необхідності.",
+        "info_option_reservation_title": "Бронювання",
+        "title": "Варіанти оплати"
     }
 }
\ No newline at end of file
diff --git a/translations/cache/cache.json b/translations/cache/cache.json
index f419a611d..e83119db5 100644
--- a/translations/cache/cache.json
+++ b/translations/cache/cache.json
@@ -3424,16 +3424,36 @@
         "Waarom?"
     ],
     [
-        "list_blocks.product_item_grid.bookmark",
-        "Toevoegen aan verlanglijstje"
+        "list_blocks.product_item_search.free",
+        "Gratis"
     ],
     [
-        "list_blocks.product_item_list.bookmark",
+        "list_blocks.product_item.bookmark",
         "Toevoegen aan verlanglijstje"
     ],
     [
-        "list_blocks.product_item_search.free",
-        "Gratis"
+        "list_blocks.product_item.payment_option_ideal",
+        "Bijbetalen mogelijk"
+    ],
+    [
+        "list_blocks.product_item.payment_option_ideal_aria_label",
+        "Bijbetalen mogelijk: klik voor meer informatie"
+    ],
+    [
+        "list_blocks.product_item.payment_option_qr",
+        "QR-betaling"
+    ],
+    [
+        "list_blocks.product_item.payment_option_qr_aria_label",
+        "QR-betaling: klik voor meer informatie"
+    ],
+    [
+        "list_blocks.product_item.payment_option_reservation",
+        "Online betalen"
+    ],
+    [
+        "list_blocks.product_item.payment_option_reservation_aria_label",
+        "Online betalen: klik voor meer informatie"
     ],
     [
         "list_blocks.provider_item_list.no_data",
@@ -4287,6 +4307,46 @@
         "modal_pin_code.unknown_code",
         "Onbekende code"
     ],
+    [
+        "modal_product_payment_options_info.confirm",
+        "Het is duidelijk!"
+    ],
+    [
+        "modal_product_payment_options_info.description",
+        "De betaalmogelijkheden verschillen per product. Betalen kan op verschillende manieren:"
+    ],
+    [
+        "modal_product_payment_options_info.header",
+        "Betaalopties"
+    ],
+    [
+        "modal_product_payment_options_info.info_option_extra_payment_ideal_description",
+        "Is uw tegoed niet voldoende voor een reservering? Bij sommige producten kunt u het resterende bedrag online veilig bijbetalen via iDEAL."
+    ],
+    [
+        "modal_product_payment_options_info.info_option_extra_payment_ideal_title",
+        "Bijbetalen (iDeal)"
+    ],
+    [
+        "modal_product_payment_options_info.info_option_qr_description",
+        "Betaal eenvoudig op de locatie van de aanbieder door de QR-code die u heeft ontvangen te tonen bij het afrekenen. De aanbieder scant de code, waarna de betaling direct wordt verwerkt."
+    ],
+    [
+        "modal_product_payment_options_info.info_option_qr_title",
+        "QR-code"
+    ],
+    [
+        "modal_product_payment_options_info.info_option_reservation_description",
+        "Betaal via deze website door een aanbod te bestellen. Klik hiervoor op de knop reserveren en vul de gevraagde gegevens in. Het bedrag wordt direct van het beschikbare tegoed afgetrokken. De aanbieder ontvangt de reservering en neemt indien nodig contact met u op."
+    ],
+    [
+        "modal_product_payment_options_info.info_option_reservation_title",
+        "Reservering"
+    ],
+    [
+        "modal_product_payment_options_info.title",
+        "Betaalopties"
+    ],
     [
         "modal_product_reserve_cancel.buttons.cancel",
         "Annuleren"
@@ -6131,6 +6191,34 @@
         "product.labels.pay_from_voucher",
         "U betaalt vanuit het tegoed:"
     ],
+    [
+        "product.labels.payment_option_ideal",
+        "Online bijbetalen (iDEAL)"
+    ],
+    [
+        "product.labels.payment_option_ideal_aria_label",
+        "Online bijbetalen (iDEAL): klik voor meer informatie"
+    ],
+    [
+        "product.labels.payment_option_qr",
+        "QR‑code tonen bij aanbieder"
+    ],
+    [
+        "product.labels.payment_option_qr_aria_label",
+        "QR‑code tonen bij aanbieder: klik voor meer informatie"
+    ],
+    [
+        "product.labels.payment_option_reservation",
+        "Online reserveren"
+    ],
+    [
+        "product.labels.payment_option_reservation_aria_label",
+        "Online reserveren: klik voor meer informatie"
+    ],
+    [
+        "product.labels.payment_options",
+        "Betaalopties"
+    ],
     [
         "product.labels.price",
         "Prijs:"
@@ -6247,10 +6335,42 @@
         "products.filters.fund",
         "Tegoeden"
     ],
+    [
+        "products.filters.payment_option_ideal",
+        "Online bijbetalen met iDeal"
+    ],
+    [
+        "products.filters.payment_option_qr",
+        "QR-code tonen bij de aanbieder"
+    ],
+    [
+        "products.filters.payment_option_reservation",
+        "Online reserveren"
+    ],
+    [
+        "products.filters.payment_options",
+        "Betalingsmogelijkheden"
+    ],
+    [
+        "products.filters.payment_options_info",
+        "Lees meer over de betalingsopties"
+    ],
     [
         "products.filters.postcode",
         "Postcode"
     ],
+    [
+        "products.filters.price",
+        "Prijs (€)"
+    ],
+    [
+        "products.filters.price_from",
+        "Van"
+    ],
+    [
+        "products.filters.price_to",
+        "Naar"
+    ],
     [
         "products.filters.providers",
         "Aanbieders"

From b408c5a54206a14b2e0b0041fa357759f214116f Mon Sep 17 00:00:00 2001
From: Yaroslav Kosterin <ateamcms@gmail.com>
Date: Thu, 17 Apr 2025 20:59:02 +0300
Subject: [PATCH 14/23] add employee email to vouchers page

---
 .../vouchers-view/VouchersViewComponent.tsx   | 143 ++++++++----------
 .../vouchers/elements/VouchersTableRow.tsx    |  10 +-
 .../props/models/Sponsor/SponsorVoucher.tsx   |   4 +-
 3 files changed, 75 insertions(+), 82 deletions(-)

diff --git a/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx b/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx
index 093bc8ded..97d601ed1 100644
--- a/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx
+++ b/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx
@@ -513,81 +513,66 @@ export default function VouchersViewComponent() {
                 </div>
 
                 <div className="card-section">
-                    <div className="card-block card-block-table">
-                        <div className="table-wrapper">
-                            <table className="table table-fixed">
-                                <tbody>
-                                    <tr>
-                                        <td>
-                                            <strong className="text-strong text-md text-primary">
-                                                {translate('vouchers.labels.expire_at')}
-                                            </strong>
-                                            <br />
-                                            <strong className="text-black">{voucher.expire_at_locale}</strong>
-                                        </td>
-                                        <td>
-                                            <strong className="text-strong text-md text-primary">
-                                                {translate('vouchers.labels.created_at')}
-                                            </strong>
-                                            <br />
-                                            <strong className="text-black">
-                                                {voucher.created_at_locale.split(' - ')[1]}
-                                            </strong>
-                                        </td>
-                                        <td>
-                                            <strong className="text-strong text-md text-primary">
-                                                {translate('vouchers.labels.source')}
-                                            </strong>
-                                            <br />
-                                            <strong className="text-black">{voucher.source_locale}</strong>
-                                        </td>
-                                        <td>
-                                            <strong className="text-strong text-md text-primary">
-                                                {translate('vouchers.labels.in_use')}
-                                            </strong>
-                                            <br />
-                                            <em className="mdi mdi-close text-black" />
-                                            <strong className="text-black">
-                                                {!voucher.in_use
-                                                    ? translate('vouchers.labels.no')
-                                                    : translate('vouchers.labels.yes')}
-                                            </strong>
-                                        </td>
-                                        <td>
-                                            <strong className="text-strong text-md text-primary">
-                                                {translate('vouchers.labels.used_date')}
-                                            </strong>
-                                            <br />
-                                            {voucher.first_use_date_locale ? (
-                                                <div>
-                                                    <strong className="text-black">
-                                                        {voucher.first_use_date_locale}
-                                                    </strong>
-                                                </div>
-                                            ) : (
-                                                <div>
-                                                    <em className="mdi mdi-close text-black" />
-                                                    <strong className="text-black">
-                                                        {translate('vouchers.labels.no')}
-                                                    </strong>
-                                                </div>
-                                            )}
-                                        </td>
-                                        <td>
-                                            <strong className="text-strong text-md text-primary">
-                                                {translate('vouchers.labels.has_payouts')}
-                                            </strong>
-                                            <br />
-                                            <em className="mdi mdi-close text-black" />
-                                            <strong className="text-black">
-                                                {!voucher.has_payouts
-                                                    ? translate('vouchers.labels.no')
-                                                    : translate('vouchers.labels.yes')}
-                                            </strong>
-                                        </td>
-                                    </tr>
-
-                                    {!voucher.product && voucher.fund.type != 'subsidies' && (
+                    <div className="card-block card-block-keyvalue">
+                        <div className="keyvalue-item">
+                            <div className="keyvalue-key">{translate('vouchers.labels.expire_at')}</div>
+                            <div className="keyvalue-value">{voucher.expire_at_locale}</div>
+                        </div>
+
+                        <div className="keyvalue-item">
+                            <div className="keyvalue-key">{translate('vouchers.labels.created_at')}</div>
+                            <div className="keyvalue-value">{voucher.created_at_locale.split(' - ')[1]}</div>
+                        </div>
+
+                        <div className="keyvalue-item">
+                            <div className="keyvalue-key">{translate('vouchers.labels.source')}</div>
+                            <div className="keyvalue-value">
+                                {voucher.source_locale}
+                                {voucher.employee && <div className="text-muted-dark">({voucher.employee.email})</div>}
+                            </div>
+                        </div>
+
+                        <div className="keyvalue-item">
+                            <div className="keyvalue-key">{translate('vouchers.labels.in_use')}</div>
+                            <div className="keyvalue-value">
+                                {!voucher.in_use ? translate('vouchers.labels.no') : translate('vouchers.labels.yes')}
+                            </div>
+                        </div>
+
+                        <div className="keyvalue-item">
+                            <div className="keyvalue-key">{translate('vouchers.labels.used_date')}</div>
+                            <div className="keyvalue-value">
+                                {voucher.first_use_date_locale ? (
+                                    <div>{voucher.first_use_date_locale}</div>
+                                ) : (
+                                    <div>{translate('vouchers.labels.no')}</div>
+                                )}
+                            </div>
+                        </div>
+
+                        <div className="keyvalue-item">
+                            <div className="keyvalue-key">{translate('vouchers.labels.has_payouts')}</div>
+                            <div className="keyvalue-value">
+                                {!voucher.has_payouts
+                                    ? translate('vouchers.labels.no')
+                                    : translate('vouchers.labels.yes')}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {!voucher.product && voucher.fund.type != 'subsidies' && (
+                <div className="card">
+                    <div className="card-header">
+                        <div className="flex flex-grow card-title">Financiële details</div>
+                    </div>
+
+                    <div className="card-section">
+                        <div className="card-block card-block-table">
+                            <div className="table-wrapper">
+                                <table className="table table-fixed">
+                                    <tbody>
                                         <tr>
                                             <td>
                                                 <strong className="text-strong text-md text-primary">
@@ -627,13 +612,13 @@ export default function VouchersViewComponent() {
                                                 <strong className="text-black">{voucher.amount_spent_locale}</strong>
                                             </td>
                                         </tr>
-                                    )}
-                                </tbody>
-                            </table>
+                                    </tbody>
+                                </table>
+                            </div>
                         </div>
                     </div>
                 </div>
-            </div>
+            )}
 
             {voucher.fund.allow_voucher_records && (
                 <VoucherRecords voucher={voucher} organization={activeOrganization} />
diff --git a/react/src/dashboard/components/pages/vouchers/elements/VouchersTableRow.tsx b/react/src/dashboard/components/pages/vouchers/elements/VouchersTableRow.tsx
index ae2b060c8..4cf5c0a61 100644
--- a/react/src/dashboard/components/pages/vouchers/elements/VouchersTableRow.tsx
+++ b/react/src/dashboard/components/pages/vouchers/elements/VouchersTableRow.tsx
@@ -75,11 +75,17 @@ export default function VouchersTableRow({
             </td>
 
             <td>
-                <div className="text-md text-muted-dark text-semibold">{voucher.source_locale}</div>
+                {voucher.employee && (
+                    <div>
+                        <strong className="text-primary">{strLimit(voucher.employee.email, 32)}</strong>
+                    </div>
+                )}
+
+                <div className="text-strong text-md text-muted-dark">{voucher.source_locale}</div>
             </td>
 
             <td>
-                <div className="text-md text-muted-dark text-semibold">{voucher.product ? 'Product' : 'Budget'}</div>
+                <div className="text-strong text-md text-muted-dark">{voucher.product ? 'Product' : 'Budget'}</div>
             </td>
 
             {!voucher.product ? (
diff --git a/react/src/dashboard/props/models/Sponsor/SponsorVoucher.tsx b/react/src/dashboard/props/models/Sponsor/SponsorVoucher.tsx
index 2310acdf2..7a04a99f9 100644
--- a/react/src/dashboard/props/models/Sponsor/SponsorVoucher.tsx
+++ b/react/src/dashboard/props/models/Sponsor/SponsorVoucher.tsx
@@ -4,7 +4,8 @@ import Reservation from '../Reservation';
 import Office from '../Office';
 import PhysicalCard from '../PhysicalCard';
 import Transaction from '../Transaction';
-import Media from "../Media";
+import Media from '../Media';
+import Employee from '../Employee';
 
 export default interface SponsorVoucher {
     id: number;
@@ -76,4 +77,5 @@ export default interface SponsorVoucher {
     created_at?: string;
     created_at_locale?: string;
     expire_at?: string;
+    employee?: Employee;
 }

From 1d1ad9dcf6e67203524f7b33eb378c99c97ce16a Mon Sep 17 00:00:00 2001
From: Yaroslav Kosterin <ateamcms@gmail.com>
Date: Thu, 17 Apr 2025 21:01:08 +0300
Subject: [PATCH 15/23] add implementation name to fund forms page

---
 react/src/dashboard/components/pages/fund-forms/FundForms.tsx | 4 ++++
 react/src/dashboard/i18n/nl/i18n-components.js                | 2 ++
 react/src/dashboard/services/FundFormService.ts               | 2 +-
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/react/src/dashboard/components/pages/fund-forms/FundForms.tsx b/react/src/dashboard/components/pages/fund-forms/FundForms.tsx
index 7096b457b..176f99ed2 100644
--- a/react/src/dashboard/components/pages/fund-forms/FundForms.tsx
+++ b/react/src/dashboard/components/pages/fund-forms/FundForms.tsx
@@ -263,6 +263,10 @@ export default function FundForms() {
                                                 />
                                             </td>
 
+                                            <td className="text-strong text-muted-dark">
+                                                {fundForm.fund.implementation?.name || <TableEmptyValue />}
+                                            </td>
+
                                             <td className="text-strong text-muted-dark">
                                                 {fundForm?.steps || <TableEmptyValue />}
                                             </td>
diff --git a/react/src/dashboard/i18n/nl/i18n-components.js b/react/src/dashboard/i18n/nl/i18n-components.js
index 606d369ef..0d6f72a1e 100644
--- a/react/src/dashboard/i18n/nl/i18n-components.js
+++ b/react/src/dashboard/i18n/nl/i18n-components.js
@@ -43,6 +43,7 @@ export default {
         columns: {
             name: 'Naam',
             fund: 'Fonds',
+            implementation: 'Implementatie',
             steps: 'Aantal stappen',
             status: 'Status',
             created_at: 'Aangemaakt op',
@@ -50,6 +51,7 @@ export default {
         tooltips: {
             name: 'Naam',
             fund: 'Fonds',
+            implementation: 'Implementatie',
             steps: 'Aantal stappen',
             status: 'Status',
             created_at: 'Aangemaakt op',
diff --git a/react/src/dashboard/services/FundFormService.ts b/react/src/dashboard/services/FundFormService.ts
index 1e9ffe935..b528d03dd 100644
--- a/react/src/dashboard/services/FundFormService.ts
+++ b/react/src/dashboard/services/FundFormService.ts
@@ -32,7 +32,7 @@ export class FundFormService<T = FundForm> {
     }
 
     public getColumns(): Array<ConfigurableTableColumn> {
-        const list = ['name', 'created_at', 'fund', 'steps', 'status'].filter((item) => item);
+        const list = ['name', 'created_at', 'fund', 'implementation', 'steps', 'status'].filter((item) => item);
 
         return list.map((key) => ({
             key,

From 5f8b3b037f9293d23fcde923481a1ce7d81220f7 Mon Sep 17 00:00:00 2001
From: Yaroslav Kosterin <ateamcms@gmail.com>
Date: Thu, 17 Apr 2025 22:18:13 +0300
Subject: [PATCH 16/23] change datepicker style position

---
 .../components/elements/forms/controls/DatePickerControl.tsx     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/react/src/dashboard/components/elements/forms/controls/DatePickerControl.tsx b/react/src/dashboard/components/elements/forms/controls/DatePickerControl.tsx
index 7426a63ac..52bfdf51d 100644
--- a/react/src/dashboard/components/elements/forms/controls/DatePickerControl.tsx
+++ b/react/src/dashboard/components/elements/forms/controls/DatePickerControl.tsx
@@ -44,6 +44,7 @@ export default function DatePickerControl({
     return (
         <ReactDatePicker
             disabled={disabled}
+            popperProps={{ strategy: 'fixed' }}
             renderCustomHeader={({
                 date,
                 changeYear,

From f189e4a69df97535ae54a214b22fdaa0a52f4fc9 Mon Sep 17 00:00:00 2001
From: Yaroslav Kosterin <ateamcms@gmail.com>
Date: Thu, 17 Apr 2025 23:41:54 +0300
Subject: [PATCH 17/23] split identity contact section to contact and address
 on webshop

---
 .../components/pages/profile/Profile.tsx      |   7 +
 .../profile/cards/IdentityAddressCard.tsx     | 215 ++++++++++++++++++
 .../cards/IdentityContactInformationCard.tsx  |  83 +------
 react/src/webshop/i18n/nl/pages/profile.mjs   |   6 +
 4 files changed, 230 insertions(+), 81 deletions(-)
 create mode 100644 react/src/webshop/components/pages/profile/cards/IdentityAddressCard.tsx

diff --git a/react/src/webshop/components/pages/profile/Profile.tsx b/react/src/webshop/components/pages/profile/Profile.tsx
index ba97d1dd1..468700f7b 100644
--- a/react/src/webshop/components/pages/profile/Profile.tsx
+++ b/react/src/webshop/components/pages/profile/Profile.tsx
@@ -12,6 +12,7 @@ import IdentityContactInformationCard from './cards/IdentityContactInformationCa
 import { useProfileService } from '../../../../dashboard/services/ProfileService';
 import { differenceInYears } from 'date-fns';
 import { dateParse } from '../../../../dashboard/helpers/dates';
+import IdentityAddressCard from './cards/IdentityAddressCard';
 
 export default function Profile() {
     const translate = useTranslate();
@@ -184,6 +185,12 @@ export default function Profile() {
                         setProfile={setProfile}
                     />
 
+                    <IdentityAddressCard
+                        profile={profile}
+                        recordTypesByKey={recordTypesByKey}
+                        setProfile={setProfile}
+                    />
+
                     {profile?.bank_accounts?.length > 0 && (
                         <div className="card">
                             <div className="card-header">
diff --git a/react/src/webshop/components/pages/profile/cards/IdentityAddressCard.tsx b/react/src/webshop/components/pages/profile/cards/IdentityAddressCard.tsx
new file mode 100644
index 000000000..8c164636e
--- /dev/null
+++ b/react/src/webshop/components/pages/profile/cards/IdentityAddressCard.tsx
@@ -0,0 +1,215 @@
+import BlockKeyValueList from '../../../elements/block-key-value-list/BlockKeyValueList';
+import IdentityRecordKeyValueListHistory from '../elements/IdentityRecordKeyValueListHistory';
+import React, { Dispatch, SetStateAction, useCallback, useState } from 'react';
+import { ProfileRecords, ProfileRecordValues } from '../../../../../dashboard/props/models/Sponsor/SponsorIdentity';
+import useFormBuilder from '../../../../../dashboard/hooks/useFormBuilder';
+import Profile from '../../../../../dashboard/props/models/Profile';
+import { useProfileService } from '../../../../../dashboard/services/ProfileService';
+import { ResponseError } from '../../../../../dashboard/props/ApiResponses';
+import useSetProgress from '../../../../../dashboard/hooks/useSetProgress';
+import usePushDanger from '../../../../../dashboard/hooks/usePushDanger';
+import usePushSuccess from '../../../../../dashboard/hooks/usePushSuccess';
+import FormError from '../../../../../dashboard/components/elements/forms/errors/FormError';
+import useTranslate from '../../../../../dashboard/hooks/useTranslate';
+
+export default function IdentityAddressCard({
+    profile,
+    setProfile,
+    recordTypesByKey,
+}: {
+    profile: Profile;
+    setProfile?: Dispatch<SetStateAction<Profile>>;
+    recordTypesByKey: ProfileRecords;
+}) {
+    const [fields] = useState(['city', 'street', 'house_number', 'house_number_addition', 'postal_code']);
+
+    const [editAddress, setEditAddress] = useState(false);
+
+    const translate = useTranslate();
+    const pushDanger = usePushDanger();
+    const pushSuccess = usePushSuccess();
+    const setProgress = useSetProgress();
+    const profileService = useProfileService();
+
+    const form = useFormBuilder<Partial<ProfileRecordValues>>(
+        {
+            city: '',
+            street: '',
+            house_number: '',
+            house_number_addition: '',
+            postal_code: '',
+        },
+        (values) => {
+            setProgress(0);
+
+            profileService
+                .update(values)
+                .then((res) => {
+                    setProfile(res.data);
+                    setEditAddress(false);
+                    pushSuccess(translate('push.success'), translate('push.profile.updated'));
+                })
+                .catch((err: ResponseError) => {
+                    pushDanger(translate('push.error'), err.data.message);
+                    form.setErrors(err.data.errors);
+                })
+                .finally(() => {
+                    setProgress(100);
+                    form.setIsLocked(false);
+                });
+        },
+    );
+
+    const { update: formUpdate } = form;
+
+    const initFormValues = useCallback(() => {
+        formUpdate({
+            city: profile.records.city?.[0]?.value || '',
+            street: profile.records.street?.[0]?.value || '',
+            house_number: profile.records.house_number?.[0]?.value || '',
+            house_number_addition: profile.records.house_number_addition?.[0]?.value || '',
+            postal_code: profile.records.postal_code?.[0]?.value || '',
+        });
+    }, [
+        formUpdate,
+        profile.records.city,
+        profile.records.street,
+        profile.records.house_number,
+        profile.records.house_number_addition,
+        profile.records.postal_code,
+    ]);
+
+    if (editAddress) {
+        return (
+            <form className="card form form-compact form-compact-flat" onSubmit={form.submit}>
+                <div className="card-header flex">
+                    <h2 className="card-title flex flex-grow">{translate('profile.address.title')}</h2>
+                </div>
+
+                <div className="card-section">
+                    <div className="col col-sm-12 col-lg-8 col-md-10">
+                        {fields.map((field, index) => (
+                            <div className="form-group" key={index}>
+                                <label className="form-label">{recordTypesByKey?.[field]?.name}</label>
+                                <input
+                                    className="form-control"
+                                    value={form?.values?.[field] || ''}
+                                    onChange={(e) => form.update({ [field]: e.target.value })}
+                                />
+                                <FormError error={form.errors?.[field]} />
+                            </div>
+                        ))}
+                        <div className="form-group">
+                            <label className="form-label">{recordTypesByKey?.neighborhood_name?.name}</label>
+                            <input
+                                className="form-control"
+                                disabled={true}
+                                value={profile.records.neighborhood_name?.[0]?.value || ''}
+                            />
+                        </div>
+                        <div className="form-group">
+                            <label className="form-label">{recordTypesByKey?.municipality_name?.name}</label>
+                            <input
+                                className="form-control"
+                                disabled={true}
+                                value={profile.records.municipality_name?.[0]?.value || ''}
+                            />
+                        </div>
+                    </div>
+                </div>
+
+                <div className="card-section flex flex-center">
+                    <button
+                        type={'button'}
+                        className="button button-light button-sm"
+                        onClick={() => {
+                            setEditAddress(false);
+                            initFormValues();
+                        }}>
+                        {translate('profile.address.cancel')}
+                    </button>
+                    <div className="flex-grow" />
+                    <button type={'submit'} className="button button-primary button-sm">
+                        {translate('profile.address.save')}
+                    </button>
+                </div>
+            </form>
+        );
+    }
+
+    return (
+        <div className="card">
+            <div className="card-header flex">
+                <h2 className="card-title flex flex-grow">{translate('profile.address.title')}</h2>
+                <div className="button-group">
+                    <button
+                        className="button button-text button-xs hide-sm"
+                        onClick={() => {
+                            initFormValues();
+                            setEditAddress(true);
+                        }}>
+                        <em className="mdi mdi-pencil-outline" />
+                        {translate('profile.address.edit')}
+                    </button>
+                </div>
+            </div>
+
+            <div className="card-section">
+                <div className={'flex flex-vertical flex-gap-lg'}>
+                    <BlockKeyValueList
+                        items={[
+                            {
+                                label: recordTypesByKey?.city?.name,
+                                value: <IdentityRecordKeyValueListHistory records={profile.records.city} />,
+                            },
+                            {
+                                label: recordTypesByKey?.street?.name,
+                                value: <IdentityRecordKeyValueListHistory records={profile.records.street} />,
+                            },
+                            {
+                                label: recordTypesByKey?.house_number?.name,
+                                value: <IdentityRecordKeyValueListHistory records={profile.records.house_number} />,
+                            },
+                            {
+                                label: recordTypesByKey?.house_number_addition?.name,
+                                value: (
+                                    <IdentityRecordKeyValueListHistory
+                                        records={profile.records.house_number_addition}
+                                    />
+                                ),
+                            },
+                            {
+                                label: recordTypesByKey?.postal_code?.name,
+                                value: <IdentityRecordKeyValueListHistory records={profile.records.postal_code} />,
+                            },
+                            {
+                                label: recordTypesByKey?.neighborhood_name?.name,
+                                value: (
+                                    <IdentityRecordKeyValueListHistory records={profile.records.neighborhood_name} />
+                                ),
+                            },
+                            {
+                                label: recordTypesByKey?.municipality_name?.name,
+                                value: (
+                                    <IdentityRecordKeyValueListHistory records={profile.records.municipality_name} />
+                                ),
+                            },
+                        ]}
+                    />
+
+                    <button
+                        className="button button-light button-wide button-xs show-sm"
+                        onClick={() => {
+                            initFormValues();
+                            setEditAddress(true);
+                        }}>
+                        <span className="flex flex-center">
+                            <em className="mdi mdi-pencil-outline" />
+                            {translate('profile.address.edit')}
+                        </span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/react/src/webshop/components/pages/profile/cards/IdentityContactInformationCard.tsx b/react/src/webshop/components/pages/profile/cards/IdentityContactInformationCard.tsx
index ddbd72a44..92d02d408 100644
--- a/react/src/webshop/components/pages/profile/cards/IdentityContactInformationCard.tsx
+++ b/react/src/webshop/components/pages/profile/cards/IdentityContactInformationCard.tsx
@@ -24,15 +24,7 @@ export default function IdentityContactInformationCard({
     setProfile?: Dispatch<SetStateAction<Profile>>;
     recordTypesByKey: ProfileRecords;
 }) {
-    const [fields] = useState([
-        'telephone',
-        'mobile',
-        'city',
-        'street',
-        'house_number',
-        'house_number_addition',
-        'postal_code',
-    ]);
+    const [fields] = useState(['telephone', 'mobile']);
 
     const [editContacts, setEditContacts] = useState(false);
 
@@ -50,11 +42,6 @@ export default function IdentityContactInformationCard({
         {
             telephone: '',
             mobile: '',
-            city: '',
-            street: '',
-            house_number: '',
-            house_number_addition: '',
-            postal_code: '',
         },
         (values) => {
             setProgress(0);
@@ -83,22 +70,8 @@ export default function IdentityContactInformationCard({
         formUpdate({
             telephone: profile.records.telephone?.[0]?.value || '',
             mobile: profile.records.mobile?.[0]?.value || '',
-            city: profile.records.city?.[0]?.value || '',
-            street: profile.records.street?.[0]?.value || '',
-            house_number: profile.records.house_number?.[0]?.value || '',
-            house_number_addition: profile.records.house_number_addition?.[0]?.value || '',
-            postal_code: profile.records.postal_code?.[0]?.value || '',
         });
-    }, [
-        formUpdate,
-        profile.records.city,
-        profile.records.mobile,
-        profile.records.street,
-        profile.records.telephone,
-        profile.records.house_number,
-        profile.records.house_number_addition,
-        profile.records.postal_code,
-    ]);
+    }, [formUpdate, profile.records.mobile, profile.records.telephone]);
 
     if (editContacts) {
         return (
@@ -143,22 +116,6 @@ export default function IdentityContactInformationCard({
                                 <FormError error={form.errors?.[field]} />
                             </div>
                         ))}
-                        <div className="form-group">
-                            <label className="form-label">{recordTypesByKey?.neighborhood_name?.name}</label>
-                            <input
-                                className="form-control"
-                                disabled={true}
-                                value={profile.records.neighborhood_name?.[0]?.value || ''}
-                            />
-                        </div>
-                        <div className="form-group">
-                            <label className="form-label">{recordTypesByKey?.municipality_name?.name}</label>
-                            <input
-                                className="form-control"
-                                disabled={true}
-                                value={profile.records.municipality_name?.[0]?.value || ''}
-                            />
-                        </div>
                     </div>
                 </div>
 
@@ -218,42 +175,6 @@ export default function IdentityContactInformationCard({
                                 label: recordTypesByKey?.mobile?.name,
                                 value: <IdentityRecordKeyValueListHistory records={profile.records.mobile} />,
                             },
-                            {
-                                label: recordTypesByKey?.city?.name,
-                                value: <IdentityRecordKeyValueListHistory records={profile.records.city} />,
-                            },
-                            {
-                                label: recordTypesByKey?.street?.name,
-                                value: <IdentityRecordKeyValueListHistory records={profile.records.street} />,
-                            },
-                            {
-                                label: recordTypesByKey?.house_number?.name,
-                                value: <IdentityRecordKeyValueListHistory records={profile.records.house_number} />,
-                            },
-                            {
-                                label: recordTypesByKey?.house_number_addition?.name,
-                                value: (
-                                    <IdentityRecordKeyValueListHistory
-                                        records={profile.records.house_number_addition}
-                                    />
-                                ),
-                            },
-                            {
-                                label: recordTypesByKey?.postal_code?.name,
-                                value: <IdentityRecordKeyValueListHistory records={profile.records.postal_code} />,
-                            },
-                            {
-                                label: recordTypesByKey?.neighborhood_name?.name,
-                                value: (
-                                    <IdentityRecordKeyValueListHistory records={profile.records.neighborhood_name} />
-                                ),
-                            },
-                            {
-                                label: recordTypesByKey?.municipality_name?.name,
-                                value: (
-                                    <IdentityRecordKeyValueListHistory records={profile.records.municipality_name} />
-                                ),
-                            },
                         ]}
                     />
 
diff --git a/react/src/webshop/i18n/nl/pages/profile.mjs b/react/src/webshop/i18n/nl/pages/profile.mjs
index 1cb2fa087..5dafa145c 100644
--- a/react/src/webshop/i18n/nl/pages/profile.mjs
+++ b/react/src/webshop/i18n/nl/pages/profile.mjs
@@ -32,6 +32,12 @@ export default {
         edit: 'Bewerken',
         save: 'Opslaan',
     },
+    address: {
+        title: 'Adresgegevens',
+        cancel: 'Annuleren',
+        edit: 'Bewerken',
+        save: 'Opslaan',
+    },
 
     history: {
         title: '{{count}} keer bewerkt',

From eb8e9d1dc6cf5083df578b70582dca2a38359151 Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Fri, 18 Apr 2025 17:13:33 +0300
Subject: [PATCH 18/23] fix vouchers upload skip modal

---
 .../components/modals/ModalVouchersUpload.tsx | 141 ++++++++++--------
 1 file changed, 80 insertions(+), 61 deletions(-)

diff --git a/react/src/dashboard/components/modals/ModalVouchersUpload.tsx b/react/src/dashboard/components/modals/ModalVouchersUpload.tsx
index d3d050703..681feac92 100644
--- a/react/src/dashboard/components/modals/ModalVouchersUpload.tsx
+++ b/react/src/dashboard/components/modals/ModalVouchersUpload.tsx
@@ -257,56 +257,65 @@ export default function ModalVouchersUpload({
     );
 
     const validateCsvDataProduct = useCallback(
-        (data: Array<RowDataProp>) => {
+        (data: RowDataProp[]) => {
             const validation = validateProductId(data);
 
-            csvErrors.csvHasMissingProductId = validation.hasMissingProductId;
-            csvErrors.csvProductsInvalidStockIds = validation.invalidStockIds;
-            csvErrors.csvProductsInvalidUnknownIds = validation.invalidProductIds;
-
-            csvErrors.csvProductsInvalidStockIdsList = uniq(
-                map(csvErrors.csvProductsInvalidStockIds, 'product_id'),
-            ).join(', ');
-
-            csvErrors.csvProductsInvalidUnknownIdsList = uniq(
-                map(csvErrors.csvProductsInvalidUnknownIds, 'product_id'),
-            ).join(', ');
-
-            // product vouchers .csv should not have an `amount` field
-            csvErrors.hasAmountField = data.filter((row) => row.amount != undefined).length > 0;
+            const newErrors = {
+                ...csvErrors,
+                csvHasMissingProductId: validation.hasMissingProductId,
+                csvProductsInvalidStockIds: validation.invalidStockIds,
+                csvProductsInvalidUnknownIds: validation.invalidProductIds,
+                csvProductsInvalidStockIdsList: uniq(map(validation.invalidStockIds, 'product_id')).join(', '),
+                csvProductsInvalidUnknownIdsList: uniq(map(validation.invalidProductIds, 'product_id')).join(', '),
+                hasAmountField: data.some((row) => row.amount != undefined),
+            };
 
-            setCsvErrors({ ...csvErrors });
+            setCsvErrors(newErrors);
 
-            return !csvErrors.hasAmountField && !csvErrors.csvHasMissingProductId && validation.isValid;
+            return !newErrors.hasAmountField && !newErrors.csvHasMissingProductId && validation.isValid;
         },
         [csvErrors, validateProductId],
     );
 
-    const confirmLowAmountsSkip = useCallback(
-        (lowAmounts: Array<RowDataProp>, fund: Partial<Fund>, list: Array<RowDataProp>) => {
-            const items = lowAmounts.map((row) => ({
+    const pickSelectedOrUnflagged = useCallback(
+        (rows: RowDataProp[], selectedUids: string[], flaggedIds: string[]): RowDataProp[] => {
+            return rows.filter((row) => selectedUids.includes(row._uid) || !flaggedIds.includes(row._uid));
+        },
+        [],
+    );
+
+    const confirmLowAmountEntries = useCallback(
+        (lowAmountRows: RowDataProp[], targetFund: Partial<Fund>, originalRows: RowDataProp[]) => {
+            const lowAmountOptions = lowAmountRows.map((row) => ({
                 _uid: row._uid,
-                label: currencyFormat(parseFloat(row?.amount?.toString())),
-                columns: [fund.name],
+                label: currencyFormat(parseFloat(row.amount?.toString() || '0')),
+                columns: [targetFund.name],
             }));
 
-            return new Promise<Array<RowDataProp> | 'canceled'>((resolve) => {
-                if (items.length === 0) {
-                    return resolve(list);
+            const lowAmountOptionIds = lowAmountOptions.map((opt) => opt._uid);
+
+            return new Promise<RowDataProp[] | 'canceled'>((resolve) => {
+                if (lowAmountOptions.length === 0) {
+                    return resolve(originalRows);
                 }
 
                 openModal((modal) => (
                     <ModalDuplicatesPicker
                         modal={modal}
-                        hero_title={`Laag bedrag voor "${fund.name}".`}
-                        hero_subtitle={[`Er zijn ${items.length} tegoeden met een laag bedrag.`, 'Wilt u doorgaan?']}
+                        hero_title={`Laag bedrag voor "${targetFund.name}".`}
+                        hero_subtitle={[
+                            `Er zijn ${lowAmountOptions.length} tegoeden met een laag bedrag.`,
+                            'Wilt u doorgaan?',
+                        ]}
                         button_none={'Alle overslaan'}
                         button_all={'Alle aanmaken'}
                         enableToggles={true}
                         label_on={'Aanmaken'}
                         label_off={'Overslaan'}
-                        items={items}
-                        onConfirm={(data) => resolve(list.filter((row) => data.uids.includes(row._uid)))}
+                        items={lowAmountOptions}
+                        onConfirm={(data) => {
+                            resolve(pickSelectedOrUnflagged(originalRows, data.uids, lowAmountOptionIds));
+                        }}
                         onCancel={() => {
                             window.setTimeout(() => setHideModal(false), 300);
                             resolve('canceled');
@@ -315,28 +324,30 @@ export default function ModalVouchersUpload({
                 ));
             });
         },
-        [openModal],
+        [openModal, pickSelectedOrUnflagged],
     );
 
-    const confirmEmailSkip = useCallback(
-        (existingEmails: Array<RowDataProp>, fund: Partial<Fund>, list: Array<RowDataProp>) => {
-            const items = existingEmails.map((row) => ({
+    const confirmDuplicateEmails = useCallback(
+        (duplicateEmailRows: RowDataProp[], selectedFund: Partial<Fund>, originalRows: RowDataProp[]) => {
+            const duplicateOptions = duplicateEmailRows.map((row) => ({
                 _uid: row._uid,
                 label: row.email,
-                columns: [fund.name],
+                columns: [selectedFund.name],
             }));
 
-            return new Promise<Array<RowDataProp> | 'canceled'>((resolve) => {
-                if (items.length === 0) {
-                    return resolve(list);
+            const duplicateOptionIds = duplicateOptions.map((opt) => opt._uid);
+
+            return new Promise<RowDataProp[] | 'canceled'>((resolve) => {
+                if (duplicateOptions.length === 0) {
+                    return resolve(originalRows);
                 }
 
                 openModal((modal) => (
                     <ModalDuplicatesPicker
                         modal={modal}
-                        hero_title={`Dubbele e-mailadressen gedetecteerd voor "${fund.name}".`}
+                        hero_title={`Dubbele e-mailadressen gedetecteerd voor "${selectedFund.name}".`}
                         hero_subtitle={[
-                            `Weet u zeker dat u voor ${items.length} e-mailadres(sen) een extra tegoed wilt aanmaken?`,
+                            `Weet u zeker dat u voor ${duplicateOptions.length} e-mailadres(sen) een extra tegoed wilt aanmaken?`,
                             'Deze e-mailadressen bezitten al een tegoed van dit fonds.',
                         ]}
                         button_none={'Alle overslaan'}
@@ -344,8 +355,10 @@ export default function ModalVouchersUpload({
                         enableToggles={true}
                         label_on={'Aanmaken'}
                         label_off={'Overslaan'}
-                        items={items}
-                        onConfirm={(data) => resolve(list.filter((row) => data.uids.includes(row._uid)))}
+                        items={duplicateOptions}
+                        onConfirm={(data) => {
+                            resolve(pickSelectedOrUnflagged(originalRows, data.uids, duplicateOptionIds));
+                        }}
                         onCancel={() => {
                             window.setTimeout(() => setHideModal(false), 300);
                             resolve('canceled');
@@ -354,29 +367,31 @@ export default function ModalVouchersUpload({
                 ));
             });
         },
-        [openModal],
+        [openModal, pickSelectedOrUnflagged],
     );
 
-    const confirmBsnSkip = useCallback(
-        (existingBsn: Array<RowDataProp>, fund: Partial<Fund>, list: Array<RowDataProp>) => {
-            const items = existingBsn.map((row) => ({
+    const confirmDuplicateBsnEntries = useCallback(
+        (duplicateBsnRows: RowDataProp[], targetFund: Partial<Fund>, originalRows: RowDataProp[]) => {
+            const bsnOptions = duplicateBsnRows.map((row) => ({
                 _uid: row._uid,
                 label: row.bsn,
                 value: row.bsn,
-                columns: [fund.name],
+                columns: [targetFund.name],
             }));
 
-            return new Promise<Array<RowDataProp> | 'canceled'>((resolve) => {
-                if (items.length === 0) {
-                    return resolve(list);
+            const bsnOptionIds = bsnOptions.map((opt) => opt._uid);
+
+            return new Promise<RowDataProp[] | 'canceled'>((resolve) => {
+                if (bsnOptions.length === 0) {
+                    return resolve(originalRows);
                 }
 
                 openModal((modal) => (
                     <ModalDuplicatesPicker
                         modal={modal}
-                        hero_title={`Dubbele bsn(s) gedetecteerd voor "${fund.name}".`}
+                        hero_title={`Dubbele bsn(s) gedetecteerd voor "${targetFund.name}".`}
                         hero_subtitle={[
-                            `Weet u zeker dat u voor ${items.length} bsn(s) een extra tegoed wilt aanmaken?`,
+                            `Weet u zeker dat u voor ${bsnOptions.length} bsn(s) een extra tegoed wilt aanmaken?`,
                             'Deze bsn(s) bezitten al een tegoed van dit fonds.',
                         ]}
                         enableToggles={true}
@@ -384,8 +399,10 @@ export default function ModalVouchersUpload({
                         button_all={'Alle aanmaken'}
                         label_on={'Aanmaken'}
                         label_off={'Overslaan'}
-                        items={items}
-                        onConfirm={(data) => resolve(list.filter((row) => data.uids.includes(row._uid)))}
+                        items={bsnOptions}
+                        onConfirm={(data) => {
+                            resolve(pickSelectedOrUnflagged(originalRows, data.uids, bsnOptionIds));
+                        }}
                         onCancel={() => {
                             window.setTimeout(() => setHideModal(false), 300);
                             resolve('canceled');
@@ -394,7 +411,7 @@ export default function ModalVouchersUpload({
                 ));
             });
         },
-        [openModal],
+        [openModal, pickSelectedOrUnflagged],
     );
 
     const findDuplicates = useCallback(
@@ -433,17 +450,19 @@ export default function ModalVouchersUpload({
                     ...data.map((voucher) => voucher.identity_bsn),
                 ];
 
-                const existingEmails = list.filter((row: { email: string }) => emails.includes(row.email));
+                const existingEmails = list.filter((row) => emails.includes(row.email));
                 const existingBsn = list.filter((csvRow) => bsnList.includes(csvRow.bsn));
 
                 if (existingEmails.length === 0 && existingBsn.length === 0) {
                     return list;
                 }
 
-                const listFromEmails = await confirmEmailSkip(existingEmails, fund, list);
+                const listFromEmails = await confirmDuplicateEmails(existingEmails, fund, list);
 
                 const listFromBsn =
-                    listFromEmails !== 'canceled' ? await confirmBsnSkip(existingBsn, fund, listFromEmails) : null;
+                    listFromEmails !== 'canceled'
+                        ? await confirmDuplicateBsnEntries(existingBsn, fund, listFromEmails)
+                        : null;
 
                 if (listFromEmails === 'canceled' || listFromBsn === 'canceled') {
                     return 'canceled';
@@ -459,8 +478,8 @@ export default function ModalVouchersUpload({
         },
         [
             closeModal,
-            confirmBsnSkip,
-            confirmEmailSkip,
+            confirmDuplicateBsnEntries,
+            confirmDuplicateEmails,
             helperService,
             organization.id,
             pushDanger,
@@ -475,9 +494,9 @@ export default function ModalVouchersUpload({
         async (fund: Partial<Fund>, list: Array<RowDataProp>) => {
             const lowAmounts = list.filter((row) => parseFloat(row.amount?.toString()) <= 5);
 
-            return lowAmounts.length === 0 ? list : await confirmLowAmountsSkip(lowAmounts, fund, list);
+            return lowAmounts.length === 0 ? list : await confirmLowAmountEntries(lowAmounts, fund, list);
         },
-        [confirmLowAmountsSkip],
+        [confirmLowAmountEntries],
     );
 
     const validateCsvData = useCallback(

From 3ac7d7676212d80d0d4cce3c4f28e4579d001b06 Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Sat, 19 Apr 2025 19:06:59 +0300
Subject: [PATCH 19/23] add employee email to vouchers page minor visual update

---
 .../scss/_common/dashboard.scss               |  4 +++
 .../vouchers-view/VouchersViewComponent.tsx   | 34 +++++++++----------
 2 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/react/assets/forus-platform/scss/_common/dashboard.scss b/react/assets/forus-platform/scss/_common/dashboard.scss
index fe93e0082..27e8d5084 100644
--- a/react/assets/forus-platform/scss/_common/dashboard.scss
+++ b/react/assets/forus-platform/scss/_common/dashboard.scss
@@ -1594,6 +1594,10 @@ body {
                         }
                     }
                 }
+
+                &.keyvalue-value-gap-sm {
+                    gap: 5px;
+                }
             }
 
             .keyvalue-link {
diff --git a/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx b/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx
index 97d601ed1..935ec8980 100644
--- a/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx
+++ b/react/src/dashboard/components/pages/vouchers-view/VouchersViewComponent.tsx
@@ -526,36 +526,36 @@ export default function VouchersViewComponent() {
 
                         <div className="keyvalue-item">
                             <div className="keyvalue-key">{translate('vouchers.labels.source')}</div>
-                            <div className="keyvalue-value">
+                            <div className="keyvalue-value keyvalue-value-gap-sm">
                                 {voucher.source_locale}
-                                {voucher.employee && <div className="text-muted-dark">({voucher.employee.email})</div>}
+                                {voucher.employee && (
+                                    <strong className="text-strong text-primary">{`(${voucher.employee.email})`}</strong>
+                                )}
                             </div>
                         </div>
 
                         <div className="keyvalue-item">
                             <div className="keyvalue-key">{translate('vouchers.labels.in_use')}</div>
-                            <div className="keyvalue-value">
-                                {!voucher.in_use ? translate('vouchers.labels.no') : translate('vouchers.labels.yes')}
-                            </div>
-                        </div>
-
-                        <div className="keyvalue-item">
-                            <div className="keyvalue-key">{translate('vouchers.labels.used_date')}</div>
-                            <div className="keyvalue-value">
-                                {voucher.first_use_date_locale ? (
-                                    <div>{voucher.first_use_date_locale}</div>
+                            <div className="keyvalue-value keyvalue-value-gap-sm">
+                                {voucher.in_use ? (
+                                    <Fragment>
+                                        {translate('vouchers.labels.yes')}
+                                        {voucher.employee && (
+                                            <strong className="text-strong text-primary">{`(${voucher.first_use_date_locale})`}</strong>
+                                        )}
+                                    </Fragment>
                                 ) : (
-                                    <div>{translate('vouchers.labels.no')}</div>
+                                    <Fragment>{translate('vouchers.labels.no')}</Fragment>
                                 )}
                             </div>
                         </div>
 
                         <div className="keyvalue-item">
                             <div className="keyvalue-key">{translate('vouchers.labels.has_payouts')}</div>
-                            <div className="keyvalue-value">
-                                {!voucher.has_payouts
-                                    ? translate('vouchers.labels.no')
-                                    : translate('vouchers.labels.yes')}
+                            <div className="keyvalue-value keyvalue-value-gap-sm">
+                                {voucher.has_payouts
+                                    ? translate('vouchers.labels.yes')
+                                    : translate('vouchers.labels.no')}
                             </div>
                         </div>
                     </div>

From 0f87957ff9b53abd61c09de26ca85b8ad4f4c103 Mon Sep 17 00:00:00 2001
From: dev-rminds <dev@rminds.nl>
Date: Tue, 22 Apr 2025 15:48:35 +0300
Subject: [PATCH 20/23] minor visual fix

---
 .../forus-webshop/scss/includes/blocks/block-showcase.scss     | 2 +-
 .../components/elements/block-showcase/BlockShowcase.tsx       | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/react/assets/forus-webshop/scss/includes/blocks/block-showcase.scss b/react/assets/forus-webshop/scss/includes/blocks/block-showcase.scss
index 58084b361..fd64e52b2 100644
--- a/react/assets/forus-webshop/scss/includes/blocks/block-showcase.scss
+++ b/react/assets/forus-webshop/scss/includes/blocks/block-showcase.scss
@@ -2,7 +2,7 @@
     --aside-width: 330px;
     position: relative;
     cursor: default;
-    margin: 0 0;
+    margin: 0 0 30px;
 
     .showcase-title {
         font: 700 22px/36px var(--base-font);
diff --git a/react/src/webshop/components/elements/block-showcase/BlockShowcase.tsx b/react/src/webshop/components/elements/block-showcase/BlockShowcase.tsx
index 62b1a9784..88d959ac7 100644
--- a/react/src/webshop/components/elements/block-showcase/BlockShowcase.tsx
+++ b/react/src/webshop/components/elements/block-showcase/BlockShowcase.tsx
@@ -4,6 +4,7 @@ import BlockLoaderBreadcrumbs from '../block-loader/BlockLoaderBreadcrumbs';
 import BlockBreadcrumbs, { Breadcrumb } from '../block-breadcrumbs/BlockBreadcrumbs';
 import ReadSpeakerButton from '../../../modules/read_speaker/ReadSpeakerButton';
 import useReadSpeakerHref from '../../../modules/read_speaker/hooks/useReadSpeakerHref';
+import classNames from 'classnames';
 
 export default function BlockShowcase({
     children = null,
@@ -40,7 +41,7 @@ export default function BlockShowcase({
     }, [breadcrumbItems, readSpeakerHref]);
 
     return (
-        <div className={`block block-showcase ${className || ''}`}>
+        <div className={classNames('block', 'block-showcase', className)}>
             <main id="main-content">
                 {breadcrumbs || breadcrumbLoaderElement || <BlockLoaderBreadcrumbs />}
                 {children || loaderElement || <BlockLoader />}

From 3fc5c1cdc75923963bf0ad7598cabc01515ff88e Mon Sep 17 00:00:00 2001
From: RobinMeles <robinmeles@gmail.com>
Date: Wed, 23 Apr 2025 21:53:03 +0200
Subject: [PATCH 21/23] Update i18n-nl.mjs

---
 react/src/webshop/i18n/i18n-nl.mjs | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/react/src/webshop/i18n/i18n-nl.mjs b/react/src/webshop/i18n/i18n-nl.mjs
index 3cb6399c2..1f8eb4a67 100644
--- a/react/src/webshop/i18n/i18n-nl.mjs
+++ b/react/src/webshop/i18n/i18n-nl.mjs
@@ -345,12 +345,12 @@ export default {
         },
         product_item: {
             bookmark: 'Toevoegen aan verlanglijstje',
-            payment_option_qr: 'QR-betaling',
-            payment_option_qr_aria_label: 'QR-betaling: klik voor meer informatie',
-            payment_option_reservation: 'Online betalen',
-            payment_option_reservation_aria_label: 'Online betalen: klik voor meer informatie',
-            payment_option_ideal: 'Bijbetalen mogelijk',
-            payment_option_ideal_aria_label: 'Bijbetalen mogelijk: klik voor meer informatie',
+            payment_option_qr: 'QR-code',
+            payment_option_qr_aria_label: 'QR-code: klik voor meer informatie',
+            payment_option_reservation: 'Online reserveren',
+            payment_option_reservation_aria_label: 'Online reserveren: klik voor meer informatie',
+            payment_option_ideal: 'Online bijbetalen',
+            payment_option_ideal_aria_label: 'Online bijbetalen: klik voor meer informatie',
         },
         product_item_search: {
             free: 'Gratis',

From c144efad82c9e2915dc659169bee6c84a5188ff9 Mon Sep 17 00:00:00 2001
From: RobinMeles <robinmeles@gmail.com>
Date: Wed, 23 Apr 2025 21:56:48 +0200
Subject: [PATCH 22/23] Update modal_product_payment_options_info.mjs

---
 .../nl/modals/modal_product_payment_options_info.mjs   | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/react/src/webshop/i18n/nl/modals/modal_product_payment_options_info.mjs b/react/src/webshop/i18n/nl/modals/modal_product_payment_options_info.mjs
index ff8edc2a9..8641c001b 100644
--- a/react/src/webshop/i18n/nl/modals/modal_product_payment_options_info.mjs
+++ b/react/src/webshop/i18n/nl/modals/modal_product_payment_options_info.mjs
@@ -1,15 +1,15 @@
 export default {
     title: 'Betaalopties',
     header: 'Betaalopties',
-    description: 'De betaalmogelijkheden verschillen per product. Betalen kan op verschillende manieren:',
-    confirm: 'Het is duidelijk!',
+    description: 'De betaalmogelijkheden verschillen per product. Betalen kan op verschillende manieren.',
+    confirm: 'Sluiten',
     info_option_qr_title: 'QR-code',
     info_option_qr_description:
         'Betaal eenvoudig op de locatie van de aanbieder door de QR-code die u heeft ontvangen te tonen bij het afrekenen. De aanbieder scant de code, waarna de betaling direct wordt verwerkt.',
-    info_option_reservation_title: 'Reservering',
+    info_option_reservation_title: 'Online reserveren',
     info_option_reservation_description:
         'Betaal via deze website door een aanbod te bestellen. Klik hiervoor op de knop reserveren en vul de gevraagde gegevens in. Het bedrag wordt direct van het beschikbare tegoed afgetrokken. De aanbieder ontvangt de reservering en neemt indien nodig contact met u op.',
-    info_option_extra_payment_ideal_title: 'Bijbetalen (iDeal)',
+    info_option_extra_payment_ideal_title: 'Online bijbetalen (iDeal)',
     info_option_extra_payment_ideal_description:
-        'Is uw tegoed niet voldoende voor een reservering? Bij sommige producten kunt u het resterende bedrag online veilig bijbetalen via iDEAL.',
+        'Is uw tegoed niet voldoende voor een online reservering? Bij sommige producten kunt u het resterende bedrag online veilig bijbetalen via iDEAL.',
 };

From 642f1c37411c4f7bd6139fb0ec299a58b1e088ca Mon Sep 17 00:00:00 2001
From: RobinMeles <robinmeles@gmail.com>
Date: Wed, 23 Apr 2025 22:01:09 +0200
Subject: [PATCH 23/23] Update cache.json

---
 translations/cache/cache.json | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/translations/cache/cache.json b/translations/cache/cache.json
index e83119db5..e71156d52 100644
--- a/translations/cache/cache.json
+++ b/translations/cache/cache.json
@@ -3433,27 +3433,27 @@
     ],
     [
         "list_blocks.product_item.payment_option_ideal",
-        "Bijbetalen mogelijk"
+        "Online bijbetalen"
     ],
     [
         "list_blocks.product_item.payment_option_ideal_aria_label",
-        "Bijbetalen mogelijk: klik voor meer informatie"
+        "Online bijbetalen: klik voor meer informatie"
     ],
     [
         "list_blocks.product_item.payment_option_qr",
-        "QR-betaling"
+        "QR-code"
     ],
     [
         "list_blocks.product_item.payment_option_qr_aria_label",
-        "QR-betaling: klik voor meer informatie"
+        "QR-code: klik voor meer informatie"
     ],
     [
         "list_blocks.product_item.payment_option_reservation",
-        "Online betalen"
+        "Online reserveren"
     ],
     [
         "list_blocks.product_item.payment_option_reservation_aria_label",
-        "Online betalen: klik voor meer informatie"
+        "Online reserveren: klik voor meer informatie"
     ],
     [
         "list_blocks.provider_item_list.no_data",
@@ -4309,11 +4309,11 @@
     ],
     [
         "modal_product_payment_options_info.confirm",
-        "Het is duidelijk!"
+        "Sluiten"
     ],
     [
         "modal_product_payment_options_info.description",
-        "De betaalmogelijkheden verschillen per product. Betalen kan op verschillende manieren:"
+        "De betaalmogelijkheden verschillen per product. Betalen kan op verschillende manieren."
     ],
     [
         "modal_product_payment_options_info.header",
@@ -4321,11 +4321,11 @@
     ],
     [
         "modal_product_payment_options_info.info_option_extra_payment_ideal_description",
-        "Is uw tegoed niet voldoende voor een reservering? Bij sommige producten kunt u het resterende bedrag online veilig bijbetalen via iDEAL."
+        "Is uw tegoed niet voldoende voor een online reservering? Bij sommige producten kunt u het resterende bedrag online veilig bijbetalen via iDEAL."
     ],
     [
         "modal_product_payment_options_info.info_option_extra_payment_ideal_title",
-        "Bijbetalen (iDeal)"
+        "Online bijbetalen (iDeal)"
     ],
     [
         "modal_product_payment_options_info.info_option_qr_description",
@@ -4341,7 +4341,7 @@
     ],
     [
         "modal_product_payment_options_info.info_option_reservation_title",
-        "Reservering"
+        "Online reserveren"
     ],
     [
         "modal_product_payment_options_info.title",
@@ -9135,4 +9135,4 @@
         "wip.title",
         "Work in progress"
     ]
-]
\ No newline at end of file
+]