From 71e69c65e1f6a590efe910fd32cfd231dc76befc Mon Sep 17 00:00:00 2001
From: Kylee Fields <43586156+kyleecodes@users.noreply.github.com>
Date: Mon, 18 Dec 2023 21:37:40 -0500
Subject: [PATCH 1/8] Update pull_request_template.md

---
 .github/pull_request_template.md | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 20dda8e4..55271075 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -5,6 +5,9 @@
 ### Why did you make the changes?
 
 <!--- PR CHECKLIST: PLEASE REMOVE BEFORE SUBMITTING —>
-- [ ] You have answered the above questions.
-- [ ] You have followed the contributing guidelines in the CONTRIBUTING.md file
-- [ ] You have a descriptive and concise PR title.
+Before submitting, check that you have completed the following tasks:
+- [ ] Answered the questions above.
+- [ ] Read Chayn's Contributing Guidelines in the CONTRIBUTING.md file.
+- [ ] Enabled "Allow edits and access to secrets by maintainers" on this PR.
+- [ ] If applicable, include images in the description.
+After submitting, please be available for discussion. Thank you!

From 1cca3f39227ad2b360da2cbb18f23cc1d089cf9d Mon Sep 17 00:00:00 2001
From: Anna Hughes <annaraehughes@live.co.uk>
Date: Tue, 19 Dec 2023 08:44:33 +0000
Subject: [PATCH 2/8] Update axios + ESLint + prettier (#772)

---
 package.json |  10 +-
 yarn.lock    | 563 ++++++++++++++++++++++++++-------------------------
 2 files changed, 294 insertions(+), 279 deletions(-)

diff --git a/package.json b/package.json
index d92334b1..e612d348 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "@mui/material": "^5.14.20",
     "@reduxjs/toolkit": "^1.6.1",
     "@vercel/analytics": "^1.1.1",
-    "axios": "^0.24.0",
+    "axios": "^1.6.2",
     "firebase": "^10.7.1",
     "gemoji": "^8.1.0",
     "js-cookie": "^3.0.1",
@@ -57,13 +57,13 @@
     "babel-jest": "^27.2.4",
     "cypress": "^13.2.0",
     "dotenv": "^16.0.3",
-    "eslint": "7.32.0",
-    "eslint-config-next": "11.1.2",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint": "8.56.0",
+    "eslint-config-next": "14.0.4",
+    "eslint-config-prettier": "^9.1.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.2.4",
     "mailslurp-client": "^15.7.5",
-    "prettier": "^2.4.1",
+    "prettier": "^3.1.1",
     "puppeteer": "^21.5.2",
     "react-test-renderer": "^17.0.2",
     "ts-jest": "^27.0.5",
diff --git a/yarn.lock b/yarn.lock
index 37e451c5..6decc5c6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -29,13 +29,6 @@
     jsonpointer "^5.0.0"
     leven "^3.1.0"
 
-"@babel/code-frame@7.12.11":
-  version "7.12.11"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.12.11.tgz#f4ad435aa263db935b8f10f2c552d23fb716a63f"
-  integrity sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==
-  dependencies:
-    "@babel/highlight" "^7.10.4"
-
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.22.13", "@babel/code-frame@^7.23.5":
   version "7.23.5"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.23.5.tgz#9009b69a8c602293476ad598ff53e4562e15c244"
@@ -269,7 +262,7 @@
     "@babel/traverse" "^7.23.6"
     "@babel/types" "^7.23.6"
 
-"@babel/highlight@^7.10.4", "@babel/highlight@^7.23.4":
+"@babel/highlight@^7.23.4":
   version "7.23.4"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.23.4.tgz#edaadf4d8232e1a961432db785091207ead0621b"
   integrity sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==
@@ -1147,21 +1140,38 @@
   resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6"
   integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==
 
-"@eslint/eslintrc@^0.4.3":
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-0.4.3.tgz#9e42981ef035beb3dd49add17acb96e8ff6f394c"
-  integrity sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==
+"@eslint-community/eslint-utils@^4.2.0":
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
+  integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
+  dependencies:
+    eslint-visitor-keys "^3.3.0"
+
+"@eslint-community/regexpp@^4.6.1":
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/@eslint-community/regexpp/-/regexpp-4.10.0.tgz#548f6de556857c8bb73bbee70c35dc82a2e74d63"
+  integrity sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==
+
+"@eslint/eslintrc@^2.1.4":
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-2.1.4.tgz#388a269f0f25c1b6adc317b5a2c55714894c70ad"
+  integrity sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==
   dependencies:
     ajv "^6.12.4"
-    debug "^4.1.1"
-    espree "^7.3.0"
-    globals "^13.9.0"
-    ignore "^4.0.6"
+    debug "^4.3.2"
+    espree "^9.6.0"
+    globals "^13.19.0"
+    ignore "^5.2.0"
     import-fresh "^3.2.1"
-    js-yaml "^3.13.1"
-    minimatch "^3.0.4"
+    js-yaml "^4.1.0"
+    minimatch "^3.1.2"
     strip-json-comments "^3.1.1"
 
+"@eslint/js@8.56.0":
+  version "8.56.0"
+  resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.56.0.tgz#ef20350fec605a7f7035a01764731b2de0f3782b"
+  integrity sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==
+
 "@fastify/busboy@^2.0.0":
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/@fastify/busboy/-/busboy-2.1.0.tgz#0709e9f4cb252351c609c6e6d8d6779a8d25edff"
@@ -1646,19 +1656,24 @@
     protobufjs "^7.2.4"
     yargs "^17.7.2"
 
-"@humanwhocodes/config-array@^0.5.0":
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"
-  integrity sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==
+"@humanwhocodes/config-array@^0.11.13":
+  version "0.11.13"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.13.tgz#075dc9684f40a531d9b26b0822153c1e832ee297"
+  integrity sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==
   dependencies:
-    "@humanwhocodes/object-schema" "^1.2.0"
+    "@humanwhocodes/object-schema" "^2.0.1"
     debug "^4.1.1"
-    minimatch "^3.0.4"
+    minimatch "^3.0.5"
 
-"@humanwhocodes/object-schema@^1.2.0":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz#b520529ec21d8e5945a1851dfd1c32e94e39ff45"
-  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
+"@humanwhocodes/module-importer@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
+  integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
+
+"@humanwhocodes/object-schema@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@humanwhocodes/object-schema/-/object-schema-2.0.1.tgz#e5211452df060fa8522b55c7b3c0c4d1981cb044"
+  integrity sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==
 
 "@istanbuljs/load-nyc-config@^1.0.0":
   version "1.1.0"
@@ -2022,22 +2037,15 @@
   dependencies:
     webpack-bundle-analyzer "4.7.0"
 
-"@next/bundle-analyzer@^14.0.4":
-  version "14.0.4"
-  resolved "https://registry.yarnpkg.com/@next/bundle-analyzer/-/bundle-analyzer-14.0.4.tgz#12672238b8ee48dd7cfa253f024374690bde6991"
-  integrity sha512-Nn2PiCkFBJBlVmpSGVNItpISws0fuc9E8AkCafBz/moRv1cfASOpFBBVzSRfWLP9BPdAhfDkb6TafN0rvs2IJQ==
-  dependencies:
-    webpack-bundle-analyzer "4.7.0"
-
 "@next/env@13.4.19":
   version "13.4.19"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-13.4.19.tgz#46905b4e6f62da825b040343cbc233144e9578d3"
   integrity sha512-FsAT5x0jF2kkhNkKkukhsyYOrRqtSxrEhfliniIq0bwWbuXLgyt3Gv0Ml+b91XwjwArmuP7NxCiGd++GGKdNMQ==
 
-"@next/eslint-plugin-next@11.1.2":
-  version "11.1.2"
-  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-11.1.2.tgz#f26cf90bcb6cd2e4645e2ba253bbc9aaaa43a170"
-  integrity sha512-cN+ojHRsufr9Yz0rtvjv8WI5En0RPZRJnt0y16Ha7DD+0n473evz8i1ETEJHmOLeR7iPJR0zxRrxeTN/bJMOjg==
+"@next/eslint-plugin-next@14.0.4":
+  version "14.0.4"
+  resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-14.0.4.tgz#474fd88d92209270021186043513fbdc4203f5ec"
+  integrity sha512-U3qMNHmEZoVmHA0j/57nRfi3AscXNvkOnxDmle/69Jz/G0o/gWjXTDdlgILZdrxQ0Lw/jv2mPW8PGy0EGIHXhQ==
   dependencies:
     glob "7.1.7"
 
@@ -2099,7 +2107,7 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
 
-"@nodelib/fs.walk@^1.2.3":
+"@nodelib/fs.walk@^1.2.3", "@nodelib/fs.walk@^1.2.8":
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
   integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
@@ -2112,11 +2120,6 @@
   resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.24.tgz#58601079e11784d20f82d0585865bb42305c4df3"
   integrity sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==
 
-"@popperjs/core@^2.11.3":
-  version "2.11.4"
-  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.4.tgz#d8c7b8db9226d2d7664553a0741ad7d0397ee503"
-  integrity sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg==
-
 "@popperjs/core@^2.11.8":
   version "2.11.8"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
@@ -2235,7 +2238,7 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
-"@rushstack/eslint-patch@^1.0.6":
+"@rushstack/eslint-patch@^1.3.3":
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.6.1.tgz#9ab8f811930d7af3e3d549183a50884f9eb83f36"
   integrity sha512-UY+FGM/2jjMkzQLn8pxcHGMaVLh9aEitG3zY2CiY7XHdLiz3bZOwa6oDxNqEMv7zZkV+cj5DOdz0cQ1BP5Hjgw==
@@ -2567,49 +2570,55 @@
   dependencies:
     "@types/node" "*"
 
-"@typescript-eslint/parser@^4.20.0":
-  version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.33.0.tgz#dfe797570d9694e560528d18eecad86c8c744899"
-  integrity sha512-ZohdsbXadjGBSK0/r+d87X0SBmKzOq4/S5nzK6SBgJspFo9/CUDJ7hjayuze+JK7CZQLDMroqytp7pOcFKTxZA==
+"@typescript-eslint/parser@^5.4.2 || ^6.0.0":
+  version "6.15.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-6.15.0.tgz#1af69741cfa314a13c1434d0bdd5a0c3096699d7"
+  integrity sha512-MkgKNnsjC6QwcMdlNAel24jjkEO/0hQaMDLqP4S9zq5HBAUJNQB6y+3DwLjX7b3l2b37eNAxMPLwb3/kh8VKdA==
   dependencies:
-    "@typescript-eslint/scope-manager" "4.33.0"
-    "@typescript-eslint/types" "4.33.0"
-    "@typescript-eslint/typescript-estree" "4.33.0"
-    debug "^4.3.1"
+    "@typescript-eslint/scope-manager" "6.15.0"
+    "@typescript-eslint/types" "6.15.0"
+    "@typescript-eslint/typescript-estree" "6.15.0"
+    "@typescript-eslint/visitor-keys" "6.15.0"
+    debug "^4.3.4"
 
-"@typescript-eslint/scope-manager@4.33.0":
-  version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.33.0.tgz#d38e49280d983e8772e29121cf8c6e9221f280a3"
-  integrity sha512-5IfJHpgTsTZuONKbODctL4kKuQje/bzBRkwHE8UOZ4f89Zeddg+EGZs8PD8NcN4LdM3ygHWYB3ukPAYjvl/qbQ==
+"@typescript-eslint/scope-manager@6.15.0":
+  version "6.15.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-6.15.0.tgz#40e5214a3e9e048aca55ce33381bc61b6b51c32a"
+  integrity sha512-+BdvxYBltqrmgCNu4Li+fGDIkW9n//NrruzG9X1vBzaNK+ExVXPoGB71kneaVw/Jp+4rH/vaMAGC6JfMbHstVg==
   dependencies:
-    "@typescript-eslint/types" "4.33.0"
-    "@typescript-eslint/visitor-keys" "4.33.0"
+    "@typescript-eslint/types" "6.15.0"
+    "@typescript-eslint/visitor-keys" "6.15.0"
 
-"@typescript-eslint/types@4.33.0":
-  version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.33.0.tgz#a1e59036a3b53ae8430ceebf2a919dc7f9af6d72"
-  integrity sha512-zKp7CjQzLQImXEpLt2BUw1tvOMPfNoTAfb8l51evhYbOEEzdWyQNmHWWGPR6hwKJDAi+1VXSBmnhL9kyVTTOuQ==
+"@typescript-eslint/types@6.15.0":
+  version "6.15.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-6.15.0.tgz#a9f7b006aee52b0948be6e03f521814bf435ddd5"
+  integrity sha512-yXjbt//E4T/ee8Ia1b5mGlbNj9fB9lJP4jqLbZualwpP2BCQ5is6BcWwxpIsY4XKAhmdv3hrW92GdtJbatC6dQ==
 
-"@typescript-eslint/typescript-estree@4.33.0":
-  version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.33.0.tgz#0dfb51c2908f68c5c08d82aefeaf166a17c24609"
-  integrity sha512-rkWRY1MPFzjwnEVHsxGemDzqqddw2QbTJlICPD9p9I9LfsO8fdmfQPOX3uKfUaGRDFJbfrtm/sXhVXN4E+bzCA==
+"@typescript-eslint/typescript-estree@6.15.0":
+  version "6.15.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-6.15.0.tgz#2f8a513df1ce5e6e1ba8e5c6aa52f392ae023fc5"
+  integrity sha512-7mVZJN7Hd15OmGuWrp2T9UvqR2Ecg+1j/Bp1jXUEY2GZKV6FXlOIoqVDmLpBiEiq3katvj/2n2mR0SDwtloCew==
   dependencies:
-    "@typescript-eslint/types" "4.33.0"
-    "@typescript-eslint/visitor-keys" "4.33.0"
-    debug "^4.3.1"
-    globby "^11.0.3"
-    is-glob "^4.0.1"
-    semver "^7.3.5"
-    tsutils "^3.21.0"
+    "@typescript-eslint/types" "6.15.0"
+    "@typescript-eslint/visitor-keys" "6.15.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.5.4"
+    ts-api-utils "^1.0.1"
 
-"@typescript-eslint/visitor-keys@4.33.0":
-  version "4.33.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.33.0.tgz#2a22f77a41604289b7a186586e9ec48ca92ef1dd"
-  integrity sha512-uqi/2aSz9g2ftcHWf8uLPJA70rUv6yuMW5Bohw+bwcuzaxQIHaKFZCKGoGXIrc9vkTJ3+0txM73K0Hq3d5wgIg==
+"@typescript-eslint/visitor-keys@6.15.0":
+  version "6.15.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-6.15.0.tgz#5baf97a7bfeec6f4894d400437055155a46b2330"
+  integrity sha512-1zvtdC1a9h5Tb5jU9x3ADNXO9yjP8rXlaoChu0DQX40vf5ACVpYIVIZhIMZ6d5sDXH7vq4dsZBT1fEGj8D2n2w==
   dependencies:
-    "@typescript-eslint/types" "4.33.0"
-    eslint-visitor-keys "^2.0.0"
+    "@typescript-eslint/types" "6.15.0"
+    eslint-visitor-keys "^3.4.1"
+
+"@ungap/structured-clone@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
+  integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
 "@vercel/analytics@^1.1.1":
   version "1.1.1"
@@ -2631,7 +2640,7 @@ acorn-globals@^6.0.0:
     acorn "^7.1.1"
     acorn-walk "^7.1.1"
 
-acorn-jsx@^5.3.1:
+acorn-jsx@^5.3.2:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
@@ -2646,12 +2655,12 @@ acorn-walk@^8.0.0:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.3.1.tgz#2f10f5b69329d90ae18c58bf1fa8fccd8b959a43"
   integrity sha512-TgUZgYvqZprrl7YldZNoa9OciCAyZR+Ejm9eXzKCmjsF5IKp/wgQ7Z/ZpjpGTIUPwrHQIcYeI8qDh4PsEwxMbw==
 
-acorn@^7.1.1, acorn@^7.4.0:
+acorn@^7.1.1:
   version "7.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
-acorn@^8.0.4, acorn@^8.2.4, acorn@^8.8.2:
+acorn@^8.0.4, acorn@^8.2.4, acorn@^8.8.2, acorn@^8.9.0:
   version "8.11.2"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.2.tgz#ca0d78b51895be5390a5903c5b3bdcdaf78ae40b"
   integrity sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==
@@ -2683,7 +2692,7 @@ ajv-keywords@^3.5.2:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
   integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
 
-ajv@^6.10.0, ajv@^6.12.4, ajv@^6.12.5:
+ajv@^6.12.4, ajv@^6.12.5:
   version "6.12.6"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
@@ -2693,7 +2702,7 @@ ajv@^6.10.0, ajv@^6.12.4, ajv@^6.12.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ajv@^8.0.1, ajv@^8.6.0:
+ajv@^8.6.0:
   version "8.12.0"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.12.0.tgz#d1a0527323e22f53562c567c00991577dfbe19d1"
   integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==
@@ -2940,12 +2949,14 @@ axe-core@=4.7.0:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.7.0.tgz#34ba5a48a8b564f67e103f0aa5768d76e15bbbbf"
   integrity sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==
 
-axios@^0.24.0:
-  version "0.24.0"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.24.0.tgz#804e6fa1e4b9c5288501dd9dff56a7a0940d20d6"
-  integrity sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==
+axios@^1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.6.2.tgz#de67d42c755b571d3e698df1b6504cde9b0ee9f2"
+  integrity sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==
   dependencies:
-    follow-redirects "^1.14.4"
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
 
 axobject-query@^3.2.1:
   version "3.2.1"
@@ -3601,7 +3612,7 @@ dayjs@^1.10.4:
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
   integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==
 
-debug@4, debug@4.3.4, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.4:
+debug@4, debug@4.3.4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -3834,7 +3845,15 @@ end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
-enquirer@^2.3.5, enquirer@^2.3.6:
+enhanced-resolve@^5.12.0:
+  version "5.15.0"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.15.0.tgz#1af946c7d93603eb88e9896cee4904dc012e9c35"
+  integrity sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
+enquirer@^2.3.6:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/enquirer/-/enquirer-2.4.1.tgz#93334b3fbd74fc7097b224ab4a8fb7e40bf4ae56"
   integrity sha512-rRqJg/6gd538VHvR3PSrdRBb/1Vy2YfzHqzvbhGIQpDRKIa4FgV/54b5Q1xYSxOOwKvjXweS26E0Q+nAMwp2pQ==
@@ -3990,27 +4009,27 @@ escodegen@^2.0.0, escodegen@^2.1.0:
   optionalDependencies:
     source-map "~0.6.1"
 
-eslint-config-next@11.1.2:
-  version "11.1.2"
-  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-11.1.2.tgz#73c918f2fa6120d5f65080bf3fcf6b154905707e"
-  integrity sha512-dFutecxX2Z5/QVlLwdtKt+gIfmNMP8Qx6/qZh3LM/DFVdGJEAnUKrr4VwGmACB2kx/PQ5bx3R+QxnEg4fDPiTg==
-  dependencies:
-    "@next/eslint-plugin-next" "11.1.2"
-    "@rushstack/eslint-patch" "^1.0.6"
-    "@typescript-eslint/parser" "^4.20.0"
-    eslint-import-resolver-node "^0.3.4"
-    eslint-import-resolver-typescript "^2.4.0"
-    eslint-plugin-import "^2.22.1"
-    eslint-plugin-jsx-a11y "^6.4.1"
-    eslint-plugin-react "^7.23.1"
-    eslint-plugin-react-hooks "^4.2.0"
-
-eslint-config-prettier@^8.3.0:
-  version "8.10.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.10.0.tgz#3a06a662130807e2502fc3ff8b4143d8a0658e11"
-  integrity sha512-SM8AMJdeQqRYT9O9zguiruQZaN7+z+E4eAP9oiLNGKMtomwaB1E9dcgUD6ZAn/eQAb52USbvezbiljfZUhbJcg==
-
-eslint-import-resolver-node@^0.3.4, eslint-import-resolver-node@^0.3.9:
+eslint-config-next@14.0.4:
+  version "14.0.4"
+  resolved "https://registry.yarnpkg.com/eslint-config-next/-/eslint-config-next-14.0.4.tgz#7cd2c0a3b310203d41cf0dbf9d31f9b0a6235b4a"
+  integrity sha512-9/xbOHEQOmQtqvQ1UsTQZpnA7SlDMBtuKJ//S4JnoyK3oGLhILKXdBgu/UO7lQo/2xOykQULS1qQ6p2+EpHgAQ==
+  dependencies:
+    "@next/eslint-plugin-next" "14.0.4"
+    "@rushstack/eslint-patch" "^1.3.3"
+    "@typescript-eslint/parser" "^5.4.2 || ^6.0.0"
+    eslint-import-resolver-node "^0.3.6"
+    eslint-import-resolver-typescript "^3.5.2"
+    eslint-plugin-import "^2.28.1"
+    eslint-plugin-jsx-a11y "^6.7.1"
+    eslint-plugin-react "^7.33.2"
+    eslint-plugin-react-hooks "^4.5.0 || 5.0.0-canary-7118f5dd7-20230705"
+
+eslint-config-prettier@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz#31af3d94578645966c082fcb71a5846d3c94867f"
+  integrity sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==
+
+eslint-import-resolver-node@^0.3.6, eslint-import-resolver-node@^0.3.9:
   version "0.3.9"
   resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz#d4eaac52b8a2e7c3cd1903eb00f7e053356118ac"
   integrity sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==
@@ -4019,25 +4038,27 @@ eslint-import-resolver-node@^0.3.4, eslint-import-resolver-node@^0.3.9:
     is-core-module "^2.13.0"
     resolve "^1.22.4"
 
-eslint-import-resolver-typescript@^2.4.0:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-2.7.1.tgz#a90a4a1c80da8d632df25994c4c5fdcdd02b8751"
-  integrity sha512-00UbgGwV8bSgUv34igBDbTOtKhqoRMy9bFjNehT40bXg6585PNIct8HhXZ0SybqB9rWtXj9crcku8ndDn/gIqQ==
+eslint-import-resolver-typescript@^3.5.2:
+  version "3.6.1"
+  resolved "https://registry.yarnpkg.com/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.6.1.tgz#7b983680edd3f1c5bce1a5829ae0bc2d57fe9efa"
+  integrity sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==
   dependencies:
     debug "^4.3.4"
-    glob "^7.2.0"
+    enhanced-resolve "^5.12.0"
+    eslint-module-utils "^2.7.4"
+    fast-glob "^3.3.1"
+    get-tsconfig "^4.5.0"
+    is-core-module "^2.11.0"
     is-glob "^4.0.3"
-    resolve "^1.22.0"
-    tsconfig-paths "^3.14.1"
 
-eslint-module-utils@^2.8.0:
+eslint-module-utils@^2.7.4, eslint-module-utils@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/eslint-module-utils/-/eslint-module-utils-2.8.0.tgz#e439fee65fc33f6bba630ff621efc38ec0375c49"
   integrity sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==
   dependencies:
     debug "^3.2.7"
 
-eslint-plugin-import@^2.22.1:
+eslint-plugin-import@^2.28.1:
   version "2.29.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.29.1.tgz#d45b37b5ef5901d639c15270d74d46d161150643"
   integrity sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==
@@ -4060,7 +4081,7 @@ eslint-plugin-import@^2.22.1:
     semver "^6.3.1"
     tsconfig-paths "^3.15.0"
 
-eslint-plugin-jsx-a11y@^6.4.1:
+eslint-plugin-jsx-a11y@^6.7.1:
   version "6.8.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.8.0.tgz#2fa9c701d44fcd722b7c771ec322432857fcbad2"
   integrity sha512-Hdh937BS3KdwwbBaKd5+PLCOmYY6U4f2h9Z2ktwtNKvIdIEu137rjYbcb9ApSbVJfWxANNuiKTD/9tOKjK9qOA==
@@ -4082,12 +4103,12 @@ eslint-plugin-jsx-a11y@^6.4.1:
     object.entries "^1.1.7"
     object.fromentries "^2.0.7"
 
-eslint-plugin-react-hooks@^4.2.0:
+"eslint-plugin-react-hooks@^4.5.0 || 5.0.0-canary-7118f5dd7-20230705":
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
   integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
 
-eslint-plugin-react@^7.23.1:
+eslint-plugin-react@^7.33.2:
   version "7.33.2"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.33.2.tgz#69ee09443ffc583927eafe86ffebb470ee737608"
   integrity sha512-73QQMKALArI8/7xGLNI/3LylrEYrlKZSb5C9+q3OtOewTnMQi5cT+aE9E41sLCmli3I9PGGmD1yiZydyo4FEPw==
@@ -4109,92 +4130,78 @@ eslint-plugin-react@^7.23.1:
     semver "^6.3.1"
     string.prototype.matchall "^4.0.8"
 
-eslint-scope@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
-  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
+eslint-scope@^7.2.2:
+  version "7.2.2"
+  resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
+  integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
   dependencies:
     esrecurse "^4.3.0"
-    estraverse "^4.1.1"
-
-eslint-utils@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
-  integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
-  dependencies:
-    eslint-visitor-keys "^1.1.0"
-
-eslint-visitor-keys@^1.1.0, eslint-visitor-keys@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
-  integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
+    estraverse "^5.2.0"
 
-eslint-visitor-keys@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
-  integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
-
-eslint@7.32.0:
-  version "7.32.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-7.32.0.tgz#c6d328a14be3fb08c8d1d21e12c02fdb7a2a812d"
-  integrity sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==
-  dependencies:
-    "@babel/code-frame" "7.12.11"
-    "@eslint/eslintrc" "^0.4.3"
-    "@humanwhocodes/config-array" "^0.5.0"
-    ajv "^6.10.0"
+eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
+  integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
+
+eslint@8.56.0:
+  version "8.56.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.56.0.tgz#4957ce8da409dc0809f99ab07a1b94832ab74b15"
+  integrity sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.6.1"
+    "@eslint/eslintrc" "^2.1.4"
+    "@eslint/js" "8.56.0"
+    "@humanwhocodes/config-array" "^0.11.13"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@nodelib/fs.walk" "^1.2.8"
+    "@ungap/structured-clone" "^1.2.0"
+    ajv "^6.12.4"
     chalk "^4.0.0"
     cross-spawn "^7.0.2"
-    debug "^4.0.1"
+    debug "^4.3.2"
     doctrine "^3.0.0"
-    enquirer "^2.3.5"
     escape-string-regexp "^4.0.0"
-    eslint-scope "^5.1.1"
-    eslint-utils "^2.1.0"
-    eslint-visitor-keys "^2.0.0"
-    espree "^7.3.1"
-    esquery "^1.4.0"
+    eslint-scope "^7.2.2"
+    eslint-visitor-keys "^3.4.3"
+    espree "^9.6.1"
+    esquery "^1.4.2"
     esutils "^2.0.2"
     fast-deep-equal "^3.1.3"
     file-entry-cache "^6.0.1"
-    functional-red-black-tree "^1.0.1"
-    glob-parent "^5.1.2"
-    globals "^13.6.0"
-    ignore "^4.0.6"
-    import-fresh "^3.0.0"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    globals "^13.19.0"
+    graphemer "^1.4.0"
+    ignore "^5.2.0"
     imurmurhash "^0.1.4"
     is-glob "^4.0.0"
-    js-yaml "^3.13.1"
+    is-path-inside "^3.0.3"
+    js-yaml "^4.1.0"
     json-stable-stringify-without-jsonify "^1.0.1"
     levn "^0.4.1"
     lodash.merge "^4.6.2"
-    minimatch "^3.0.4"
+    minimatch "^3.1.2"
     natural-compare "^1.4.0"
-    optionator "^0.9.1"
-    progress "^2.0.0"
-    regexpp "^3.1.0"
-    semver "^7.2.1"
-    strip-ansi "^6.0.0"
-    strip-json-comments "^3.1.0"
-    table "^6.0.9"
+    optionator "^0.9.3"
+    strip-ansi "^6.0.1"
     text-table "^0.2.0"
-    v8-compile-cache "^2.0.3"
 
-espree@^7.3.0, espree@^7.3.1:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-7.3.1.tgz#f2df330b752c6f55019f8bd89b7660039c1bbbb6"
-  integrity sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==
+espree@^9.6.0, espree@^9.6.1:
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
+  integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
   dependencies:
-    acorn "^7.4.0"
-    acorn-jsx "^5.3.1"
-    eslint-visitor-keys "^1.3.0"
+    acorn "^8.9.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^3.4.1"
 
 esprima@^4.0.0, esprima@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
 
-esquery@^1.4.0:
+esquery@^1.4.2:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/esquery/-/esquery-1.5.0.tgz#6ce17738de8577694edd7361c57182ac8cb0db0b"
   integrity sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==
@@ -4208,11 +4215,6 @@ esrecurse@^4.3.0:
   dependencies:
     estraverse "^5.2.0"
 
-estraverse@^4.1.1:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
-  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
-
 estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
@@ -4332,7 +4334,7 @@ fast-fifo@^1.1.0, fast-fifo@^1.2.0:
   resolved "https://registry.yarnpkg.com/fast-fifo/-/fast-fifo-1.3.2.tgz#286e31de96eb96d38a97899815740ba2a4f3640c"
   integrity sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==
 
-fast-glob@^3.2.9:
+fast-glob@^3.2.9, fast-glob@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
   integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
@@ -4431,6 +4433,14 @@ find-up@^4.0.0, find-up@^4.1.0:
     locate-path "^5.0.0"
     path-exists "^4.0.0"
 
+find-up@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
+  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
+  dependencies:
+    locate-path "^6.0.0"
+    path-exists "^4.0.0"
+
 firebase@^10.7.1:
   version "10.7.1"
   resolved "https://registry.yarnpkg.com/firebase/-/firebase-10.7.1.tgz#71fa17a10146f388746ecc216a3e1e477a7bf9b5"
@@ -4477,7 +4487,7 @@ flatted@^3.2.9:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.9.tgz#7eb4c67ca1ba34232ca9d2d93e9886e611ad7daf"
   integrity sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==
 
-follow-redirects@^1.14.4:
+follow-redirects@^1.15.0:
   version "1.15.3"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.3.tgz#fe2f3ef2690afce7e82ed0b44db08165b207123a"
   integrity sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==
@@ -4503,6 +4513,15 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
 form-data@~2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6"
@@ -4556,11 +4575,6 @@ function.prototype.name@^1.1.5, function.prototype.name@^1.1.6:
     es-abstract "^1.22.1"
     functions-have-names "^1.2.3"
 
-functional-red-black-tree@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
-  integrity sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==
-
 functions-have-names@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
@@ -4621,6 +4635,13 @@ get-symbol-description@^1.0.0:
     call-bind "^1.0.2"
     get-intrinsic "^1.1.1"
 
+get-tsconfig@^4.5.0:
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/get-tsconfig/-/get-tsconfig-4.7.2.tgz#0dcd6fb330391d46332f4c6c1bf89a6514c2ddce"
+  integrity sha512-wuMsz4leaj5hbGgg4IvDU0bqJagpftG5l5cXIAvo8uZrqn0NJqwtfupTN00VnkQJPcIRrxYrm1Ue24btpCha2A==
+  dependencies:
+    resolve-pkg-maps "^1.0.0"
+
 get-uri@^6.0.1:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/get-uri/-/get-uri-6.0.2.tgz#e019521646f4a8ff6d291fbaea2c46da204bb75b"
@@ -4652,6 +4673,13 @@ glob-parent@^5.1.2:
   dependencies:
     is-glob "^4.0.1"
 
+glob-parent@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
+  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
+  dependencies:
+    is-glob "^4.0.3"
+
 glob-to-regexp@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
@@ -4669,7 +4697,7 @@ glob@7.1.7:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@^7.2.0:
+glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
   version "7.2.3"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
@@ -4693,7 +4721,7 @@ globals@^11.1.0:
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
 
-globals@^13.6.0, globals@^13.9.0:
+globals@^13.19.0:
   version "13.24.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
   integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
@@ -4707,7 +4735,7 @@ globalthis@^1.0.3:
   dependencies:
     define-properties "^1.1.3"
 
-globby@^11.0.3, globby@^11.0.4:
+globby@^11.0.4, globby@^11.1.0:
   version "11.1.0"
   resolved "https://registry.yarnpkg.com/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
   integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
@@ -4737,17 +4765,15 @@ gopd@^1.0.1:
   dependencies:
     get-intrinsic "^1.1.3"
 
-graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.9:
+graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.9:
   version "4.2.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
 
-gzip-size@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462"
-  integrity sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==
-  dependencies:
-    duplexer "^0.1.2"
+graphemer@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
+  integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
 gzip-size@^6.0.0:
   version "6.0.0"
@@ -4923,11 +4949,6 @@ ieee754@^1.1.13:
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
   integrity sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==
 
-ignore@^4.0.6:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
-  integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
-
 ignore@^5.2.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.0.tgz#67418ae40d34d6999c95ff56016759c718c82f78"
@@ -4938,7 +4959,7 @@ immer@^9.0.21:
   resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.21.tgz#1e025ea31a40f24fb064f1fef23e931496330176"
   integrity sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==
 
-import-fresh@^3.0.0, import-fresh@^3.2.1, import-fresh@^3.3.0:
+import-fresh@^3.2.1, import-fresh@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
   integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
@@ -5067,7 +5088,7 @@ is-ci@^3.0.0:
   dependencies:
     ci-info "^3.2.0"
 
-is-core-module@^2.13.0, is-core-module@^2.13.1:
+is-core-module@^2.11.0, is-core-module@^2.13.0, is-core-module@^2.13.1:
   version "2.13.1"
   resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.13.1.tgz#ad0d7532c6fea9da1ebdc82742d74525c6273384"
   integrity sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==
@@ -5176,7 +5197,7 @@ is-path-inside@^2.1.0:
   dependencies:
     path-is-inside "^1.0.2"
 
-is-path-inside@^3.0.2:
+is-path-inside@^3.0.2, is-path-inside@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
@@ -6069,6 +6090,13 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+locate-path@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
+  integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
+  dependencies:
+    p-locate "^5.0.0"
+
 lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
@@ -6099,11 +6127,6 @@ lodash.sortby@^4.7.0:
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==
 
-lodash.truncate@^4.4.2:
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
-  integrity sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==
-
 lodash@^4.17.15, lodash@^4.17.20, lodash@^4.17.21, lodash@^4.7.0:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
@@ -6250,7 +6273,7 @@ min-indent@^1.0.0:
   resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.1.tgz#a63f681673b30571fbe8bc25686ae746eefa9869"
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
-minimatch@^3.0.4, minimatch@^3.1.1, minimatch@^3.1.2:
+minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
@@ -6518,7 +6541,7 @@ opener@^1.5.2:
   resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
   integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==
 
-optionator@^0.9.1:
+optionator@^0.9.3:
   version "0.9.3"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.9.3.tgz#007397d44ed1872fdc6ed31360190f81814e2c64"
   integrity sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==
@@ -6542,6 +6565,13 @@ p-limit@^2.2.0:
   dependencies:
     p-try "^2.0.0"
 
+p-limit@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.1.0"
+
 p-locate@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
@@ -6549,6 +6579,13 @@ p-locate@^4.1.0:
   dependencies:
     p-limit "^2.2.0"
 
+p-locate@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
+  integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
+  dependencies:
+    p-limit "^3.0.2"
+
 p-map@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/p-map/-/p-map-2.1.0.tgz#310928feef9c9ecc65b68b17693018a665cea175"
@@ -6714,10 +6751,10 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prettier@^2.4.1:
-  version "2.8.8"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
-  integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
+prettier@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.1.1.tgz#6ba9f23165d690b6cbdaa88cb0807278f7019848"
+  integrity sha512-22UbSzg8luF4UuZtzgiUOfcGM8s4tjBv6dJRT7j275NXsy2jb4aJa4NNveul5x4eqlF1wuhuR2RElK71RvmVaw==
 
 pretty-bytes@^5.3.0, pretty-bytes@^5.4.1, pretty-bytes@^5.6.0:
   version "5.6.0"
@@ -6752,7 +6789,7 @@ process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==
 
-progress@2.0.3, progress@^2.0.0:
+progress@2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
   integrity sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==
@@ -7082,11 +7119,6 @@ regexp.prototype.flags@^1.5.0, regexp.prototype.flags@^1.5.1:
     define-properties "^1.2.0"
     set-function-name "^2.0.0"
 
-regexpp@^3.1.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
-  integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
-
 regexpu-core@^5.3.1:
   version "5.3.2"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-5.3.2.tgz#11a2b06884f3527aec3e93dbbf4a3b958a95546b"
@@ -7150,12 +7182,17 @@ resolve-from@^5.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-5.0.0.tgz#c35225843df8f776df21c57557bc087e9dfdfc69"
   integrity sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==
 
+resolve-pkg-maps@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/resolve-pkg-maps/-/resolve-pkg-maps-1.0.0.tgz#616b3dc2c57056b5588c31cdf4b3d64db133720f"
+  integrity sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==
+
 resolve.exports@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.1.tgz#05cfd5b3edf641571fd46fa608b610dda9ead999"
   integrity sha512-/NtpHNDN7jWhAaQ9BvBUYZ6YTXsRBgfqWFWP7BZBaoMJO/I3G5OFzvTuWNlZC3aPjins1F+TNrLKsGbH4rfsRQ==
 
-resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.22.4:
+resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.4:
   version "1.22.8"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d"
   integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==
@@ -7310,7 +7347,7 @@ schema-utils@^3.1.1:
     ajv "^6.12.5"
     ajv-keywords "^3.5.2"
 
-semver@7.x, semver@^7.2.1, semver@^7.3.2, semver@^7.3.5, semver@^7.5.3:
+semver@7.x, semver@^7.3.2, semver@^7.5.3, semver@^7.5.4:
   version "7.5.4"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
   integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
@@ -7395,15 +7432,6 @@ sirv@^1.0.7:
     mrmime "^1.0.0"
     totalist "^1.0.0"
 
-sirv@^1.0.7:
-  version "1.0.19"
-  resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.19.tgz#1d73979b38c7fe91fcba49c85280daa9c2363b49"
-  integrity sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==
-  dependencies:
-    "@polka/url" "^1.0.0-next.20"
-    mrmime "^1.0.0"
-    totalist "^1.0.0"
-
 sisteransi@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
@@ -7670,7 +7698,7 @@ strip-indent@^3.0.0:
   dependencies:
     min-indent "^1.0.0"
 
-strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
@@ -7726,16 +7754,10 @@ symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
-table@^6.0.9:
-  version "6.8.1"
-  resolved "https://registry.yarnpkg.com/table/-/table-6.8.1.tgz#ea2b71359fe03b017a5fbc296204471158080bdf"
-  integrity sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==
-  dependencies:
-    ajv "^8.0.1"
-    lodash.truncate "^4.4.2"
-    slice-ansi "^4.0.0"
-    string-width "^4.2.3"
-    strip-ansi "^6.0.1"
+tapable@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
+  integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
 
 tar-fs@3.0.4:
   version "3.0.4"
@@ -7894,6 +7916,11 @@ tr46@~0.0.3:
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
   integrity sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==
 
+ts-api-utils@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/ts-api-utils/-/ts-api-utils-1.0.3.tgz#f12c1c781d04427313dbac808f453f050e54a331"
+  integrity sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==
+
 ts-jest@^27.0.5:
   version "27.1.5"
   resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-27.1.5.tgz#0ddf1b163fbaae3d5b7504a1e65c914a95cff297"
@@ -7908,7 +7935,7 @@ ts-jest@^27.0.5:
     semver "7.x"
     yargs-parser "20.x"
 
-tsconfig-paths@^3.14.1, tsconfig-paths@^3.15.0:
+tsconfig-paths@^3.15.0:
   version "3.15.0"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz#5299ec605e55b1abb23ec939ef15edaf483070d4"
   integrity sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==
@@ -7918,23 +7945,11 @@ tsconfig-paths@^3.14.1, tsconfig-paths@^3.15.0:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@^1.8.1:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
-  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
-
 tslib@^2.0.1, tslib@^2.1.0, tslib@^2.4.0:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
 
-tsutils@^3.21.0:
-  version "3.21.0"
-  resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
-  integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
-  dependencies:
-    tslib "^1.8.1"
-
 tunnel-agent@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd"
@@ -8169,11 +8184,6 @@ uuid@^8.3.2:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
-v8-compile-cache@^2.0.3:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.4.0.tgz#cdada8bec61e15865f05d097c5f4fd30e94dc128"
-  integrity sha512-ocyWc3bAHBB/guyqJQVI5o4BZkPhznPYUG2ea80Gond/BgNWpap8TOmLSeeQG7bnh2KMISxskdADG59j7zruhw==
-
 v8-to-istanbul@^8.1.0:
   version "8.1.1"
   resolved "https://registry.yarnpkg.com/v8-to-istanbul/-/v8-to-istanbul-8.1.1.tgz#77b752fd3975e31bbcef938f85e9bd1c7a8d60ed"
@@ -8666,6 +8676,11 @@ yauzl@^2.10.0:
     buffer-crc32 "~0.2.3"
     fd-slicer "~1.1.0"
 
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
 zod@3.21.4:
   version "3.21.4"
   resolved "https://registry.yarnpkg.com/zod/-/zod-3.21.4.tgz#10882231d992519f0a10b5dd58a38c9dabbb64db"

From 04af2ab63bc66f96793f0d539da0914ed8dbe6a7 Mon Sep 17 00:00:00 2001
From: Anna Hughes <annaraehughes@live.co.uk>
Date: Tue, 19 Dec 2023 15:54:26 +0000
Subject: [PATCH 3/8] Update Redux  (#773)

---
 app/api.ts                        |  4 +-
 app/coursesSlice.tsx              |  7 +--
 app/partnerAccessSlice.tsx        |  2 -
 app/partnerAdminSlice.tsx         |  2 -
 app/partnersSlice.tsx             |  2 -
 app/store.ts                      | 15 ++----
 app/userSlice.tsx                 |  2 -
 components/forms/LoginForm.tsx    | 19 ++++---
 components/forms/RegisterForm.tsx | 18 ++++---
 components/layout/UserMenu.tsx    |  8 +--
 hooks/store.ts                    |  6 +--
 messages/auth/de.json             |  1 +
 messages/auth/en.json             |  1 +
 messages/auth/es.json             |  1 +
 messages/auth/fr.json             |  1 +
 messages/auth/hi.json             |  1 +
 messages/auth/pt.json             |  1 +
 package.json                      |  9 ++--
 yarn.lock                         | 82 +++++++++++++------------------
 19 files changed, 84 insertions(+), 98 deletions(-)

diff --git a/app/api.ts b/app/api.ts
index 699f474a..c14f3579 100644
--- a/app/api.ts
+++ b/app/api.ts
@@ -12,7 +12,7 @@ import { Course, Courses } from './coursesSlice';
 import { PartnerAccess, PartnerAccesses } from './partnerAccessSlice';
 import { PartnerAdmin } from './partnerAdminSlice';
 import { Partner, PartnerFeature } from './partnersSlice';
-import { RootState } from './store';
+import { AppState } from './store';
 import { Subscription, Subscriptions, User } from './userSlice';
 
 export interface GetUserResponse {
@@ -34,7 +34,7 @@ interface WhatsappUnsubscribePayload {
 const baseQuery = fetchBaseQuery({
   baseUrl: process.env.NEXT_PUBLIC_API_URL,
   prepareHeaders: (headers, { getState }) => {
-    const user = (getState() as RootState).user;
+    const user = (getState() as AppState).user;
     const token = user.token;
 
     if (token) {
diff --git a/app/coursesSlice.tsx b/app/coursesSlice.tsx
index 87d281fa..b4e823c7 100644
--- a/app/coursesSlice.tsx
+++ b/app/coursesSlice.tsx
@@ -1,8 +1,6 @@
-import { createSlice } from '@reduxjs/toolkit';
-import { WritableDraft } from 'immer/dist/internal';
+import { Draft, createSlice } from '@reduxjs/toolkit';
 import { STORYBLOK_STORY_STATUS } from '../constants/enums';
 import { api } from './api';
-import type { RootState } from './store';
 import { User } from './userSlice';
 
 export interface Session {
@@ -50,7 +48,7 @@ export interface Courses extends Array<Course> {}
 
 const initialState: Courses = [];
 
-const mergeUpdatedCourse = (state: WritableDraft<Courses>, payload: Course) => {
+const mergeUpdatedCourse = (state: Draft<Courses>, payload: Course) => {
   const course = state.filter((course) => course.id === payload.id);
 
   if (course) {
@@ -89,5 +87,4 @@ const slice = createSlice({
 
 const { actions, reducer } = slice;
 export const { clearCoursesSlice } = actions;
-export const selectCourses = (state: RootState) => state.courses;
 export default reducer;
diff --git a/app/partnerAccessSlice.tsx b/app/partnerAccessSlice.tsx
index 452fe8f5..b5c92d9a 100644
--- a/app/partnerAccessSlice.tsx
+++ b/app/partnerAccessSlice.tsx
@@ -2,7 +2,6 @@ import { createSlice } from '@reduxjs/toolkit';
 import { getPartnerContent, PartnerContent } from '../constants/partners';
 import { api } from './api';
 import { Partner } from './partnersSlice';
-import type { RootState } from './store';
 
 export interface PartnerAccess {
   id: string;
@@ -61,5 +60,4 @@ const slice = createSlice({
 
 const { actions, reducer } = slice;
 export const { clearPartnerAccessesSlice } = actions;
-export const selectPartnerAccesses = (state: RootState) => state.partnerAccesses;
 export default reducer;
diff --git a/app/partnerAdminSlice.tsx b/app/partnerAdminSlice.tsx
index 9206996f..c76f5cc8 100644
--- a/app/partnerAdminSlice.tsx
+++ b/app/partnerAdminSlice.tsx
@@ -1,7 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { getPartnerContent, PartnerContent } from '../constants/partners';
 import { api, GetUserResponse } from './api';
-import type { RootState } from './store';
 
 export interface PartnerAdmin {
   id: string | null;
@@ -55,5 +54,4 @@ const slice = createSlice({
 
 const { actions, reducer } = slice;
 export const { clearPartnerAdminSlice } = actions;
-export const selectPartnerAdmin = (state: RootState) => state.partnerAdmin;
 export default reducer;
diff --git a/app/partnersSlice.tsx b/app/partnersSlice.tsx
index 36fbda04..bf1b51dc 100644
--- a/app/partnersSlice.tsx
+++ b/app/partnersSlice.tsx
@@ -1,7 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 import { api } from './api';
 import { PartnerAccess } from './partnerAccessSlice';
-import type { RootState } from './store';
 
 export interface Feature {
   name: string;
@@ -87,5 +86,4 @@ const slice = createSlice({
 
 const { actions, reducer } = slice;
 export const { clearPartnersSlice } = actions;
-export const selectPartners = (state: RootState) => state.partners;
 export default reducer;
diff --git a/app/store.ts b/app/store.ts
index 74c08f23..a734198f 100644
--- a/app/store.ts
+++ b/app/store.ts
@@ -1,15 +1,13 @@
-import { configureStore, ThunkAction } from '@reduxjs/toolkit';
+import { Action, ThunkAction, configureStore } from '@reduxjs/toolkit';
 import { createWrapper } from 'next-redux-wrapper';
-import { Action } from 'redux';
 import { api } from './api';
 import coursesReducer from './coursesSlice';
 import partnerAccessesReducer from './partnerAccessSlice';
 import partnerAdminReducer from './partnerAdminSlice';
 import partnersReducer from './partnersSlice';
 import userReducer from './userSlice';
-let store: ReturnType<typeof configStore>;
 
-const configStore = () =>
+const makeStore = () =>
   configureStore({
     reducer: {
       [api.reducerPath]: api.reducer,
@@ -22,13 +20,10 @@ const configStore = () =>
     middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(api.middleware),
   });
 
-export const makeStore = () => {
-  store = configStore();
-  return store;
-};
 
 export type AppStore = ReturnType<typeof makeStore>;
-export type RootState = ReturnType<AppStore['getState']>;
-export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, RootState, unknown, Action>;
+export type AppState = ReturnType<AppStore['getState']>;
+export type AppDispatch = AppStore['dispatch'];
+export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, AppState, unknown, Action>;
 
 export const wrapper = createWrapper<AppStore>(makeStore);
diff --git a/app/userSlice.tsx b/app/userSlice.tsx
index c0cd5255..b36b20d9 100644
--- a/app/userSlice.tsx
+++ b/app/userSlice.tsx
@@ -2,7 +2,6 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { LANGUAGES } from '../constants/enums';
 import { api, GetUserResponse } from './api';
 import { PartnerAccesses } from './partnerAccessSlice';
-import type { RootState } from './store';
 
 export interface User {
   loading: boolean;
@@ -134,5 +133,4 @@ const isSubscriptionActive = (subscription: Subscription): subscription is Activ
 
 const { actions, reducer } = slice;
 export const { clearUserSlice, setUserToken, setUserLoading, setAuthStateLoading } = actions;
-export const selectCurrentUser = (state: RootState) => state.user;
 export default reducer;
diff --git a/components/forms/LoginForm.tsx b/components/forms/LoginForm.tsx
index ec5fec81..aefe8a28 100644
--- a/components/forms/LoginForm.tsx
+++ b/components/forms/LoginForm.tsx
@@ -75,15 +75,15 @@ const LoginForm = () => {
           // because a query value can be an array
           const returnUrl =
             typeof router.query.return_url === 'string' ? router.query.return_url : null;
-          dispatch(setUserLoading(false));
 
           if (userResponse.data.partnerAdmin?.id) {
-            router.push('/partner-admin/create-access-code');
+            await router.push('/partner-admin/create-access-code');
           } else if (returnUrl) {
-            router.push(returnUrl);
+            await router.push(returnUrl);
           } else {
-            router.push('/courses');
+            await router.push('/courses');
           }
+          dispatch(setUserLoading(false));
           setLoading(false);
         }
         if ('error' in userResponse) {
@@ -105,22 +105,25 @@ const LoginForm = () => {
         const errorCode = error.code;
         const errorMessage = error.message;
 
-        logEvent(LOGIN_ERROR, { message: errorCode });
-        (window as any).Rollbar?.error('User login firebase error', error);
-
         if (errorCode === 'auth/invalid-email') {
           setFormError(t('firebase.invalidEmail'));
         }
+        if (errorCode === 'auth/too-many-requests') {
+          setFormError(t('firebase.tooManyAttempts'));
+        }
         if (errorCode === 'auth/user-not-found' || 'auth/wrong-password') {
           setFormError(t('firebase.authError'));
         }
         setLoading(false);
 
         if (
+          errorCode !== 'auth/too-many-requests' &&
           errorCode !== 'auth/invalid-email' &&
           errorCode !== 'auth/user-not-found' &&
           errorCode !== 'auth/wrong-password'
         ) {
+          logEvent(LOGIN_ERROR, { message: errorCode });
+          (window as any).Rollbar?.error('User login firebase error', error);
           throw error;
         }
       });
@@ -148,7 +151,7 @@ const LoginForm = () => {
           required
         />
         {formError && (
-          <Typography color="error.main" mb={2}>
+          <Typography color="error.main" mb={'1rem !important'}>
             {formError}
           </Typography>
         )}
diff --git a/components/forms/RegisterForm.tsx b/components/forms/RegisterForm.tsx
index 9ad220df..3b9f3e47 100644
--- a/components/forms/RegisterForm.tsx
+++ b/components/forms/RegisterForm.tsx
@@ -150,7 +150,7 @@ const RegisterForm = (props: RegisterFormProps) => {
     if ('error' in userResponse) {
       const error = userResponse.error;
       const errorMessage = getErrorMessage(error);
-      logEvent(REGISTER_ERROR, { partner: partnerName, message: errorMessage });
+
       if (errorMessage === CREATE_USER_EMAIL_ALREADY_EXISTS) {
         setFormError(
           t.rich('firebase.emailAlreadyInUse', {
@@ -172,11 +172,17 @@ const RegisterForm = (props: RegisterFormProps) => {
           }),
         );
       }
-      logEvent(REGISTER_ERROR, { partner: partnerName, message: errorMessage });
-      (window as any).Rollbar?.error('User register create user error', error);
 
       setLoading(false);
-      throw error;
+      if (
+        errorMessage !== CREATE_USER_EMAIL_ALREADY_EXISTS &&
+        errorMessage !== CREATE_USER_WEAK_PASSWORD &&
+        errorMessage !== CREATE_USER_INVALID_EMAIL
+      ) {
+        logEvent(REGISTER_ERROR, { partner: partnerName, message: errorMessage });
+        (window as any).Rollbar?.error('User register create user error', error);
+        throw error;
+      }
     }
   };
 
@@ -189,7 +195,7 @@ const RegisterForm = (props: RegisterFormProps) => {
       partnerName && accessCodeRequired && (await validateAccessCode());
       dispatch(setUserLoading(true));
       await createUserRecord();
-      router.push('/account/about-you');
+      await router.push('/account/about-you');
       dispatch(setUserLoading(false));
       setLoading(false);
     } catch {
@@ -238,7 +244,7 @@ const RegisterForm = (props: RegisterFormProps) => {
           required
         />
         {formError && (
-          <Typography color="error.main" mb={2}>
+          <Typography color="error.main" mb={'1rem !important'}>
             {formError}
           </Typography>
         )}
diff --git a/components/layout/UserMenu.tsx b/components/layout/UserMenu.tsx
index ee840289..09f42c35 100644
--- a/components/layout/UserMenu.tsx
+++ b/components/layout/UserMenu.tsx
@@ -60,16 +60,16 @@ export default function UserMenu() {
 
   const logout = async () => {
     // clear all state
+    // sign out of firebase
+    const auth = getAuth();
+    await signOut(auth);
     await dispatch(clearPartnerAccessesSlice());
     await dispatch(clearPartnerAdminSlice());
     await dispatch(clearCoursesSlice());
     await dispatch(clearUserSlice());
     await dispatch(api.util.resetApiState());
-    // sign out of firebase
-    const auth = getAuth();
-    await signOut(auth);
 
-    router.push('/auth/login');
+    // router.push('/auth/login');
   };
 
   return (
diff --git a/hooks/store.ts b/hooks/store.ts
index 2d659888..f6b75d0b 100644
--- a/hooks/store.ts
+++ b/hooks/store.ts
@@ -1,5 +1,5 @@
 import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
-import type { RootState } from '../app/store';
+import type { AppDispatch, AppState } from '../app/store';
 
-export const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;
-export const useAppDispatch = () => useDispatch();
+export const useTypedSelector: TypedUseSelectorHook<AppState> = useSelector;
+export const useAppDispatch = () => useDispatch<AppDispatch>();
diff --git a/messages/auth/de.json b/messages/auth/de.json
index 88bad586..0c716135 100644
--- a/messages/auth/de.json
+++ b/messages/auth/de.json
@@ -45,6 +45,7 @@
       "firebase": {
         "authError": "Wir konnten kein Konto für diese Kombination aus Email und Passwort finden. Überprüfe Deine Email und Dein Passwort. ",
         "invalidEmail": "Deine Email-Adresse scheint ungültig zu sein. Korrigiere alle Tippfehler, um fortzufahren.",
+        "tooManyAttempts": "Zu viele fehlgeschlagene Login-Versuche. Bitte warten Sie einige Minuten oder setzen Sie Ihr Passwort jetzt zurück.",
         "weakPassword": "Dein Passwort muss etwas länger sein, damit es sicherer ist.",
         "emailAlreadyInUse": "Diese Email ist bereits bei Bloom registriert, bitte geh zum <loginLink>Login-Bereich</loginLink> um fortzufahren.",
         "invalidCode": "Dieser Link zum Zurücksetzen des Passworts ist ungültig. Bitte <resetLink>starte den Prozess neu</resetLink> und versuche es noch einmal. ",
diff --git a/messages/auth/en.json b/messages/auth/en.json
index 7ff084c4..c421f2c2 100644
--- a/messages/auth/en.json
+++ b/messages/auth/en.json
@@ -45,6 +45,7 @@
       "firebase": {
         "authError": "We couldn't find an account for that email and password combination. Check your email and password.",
         "invalidEmail": "Your email appears to be invalid, fix any typos to continue.",
+        "tooManyAttempts": "Too many failed login attempts, please wait a few minutes or reset your password now.",
         "weakPassword": "Your password needs to be a little longer, so it's more secure.",
         "emailAlreadyInUse": "This email is already registered with Bloom, go to <loginLink>login</loginLink> to continue.",
         "invalidCode": "This reset password link is invalid, please <resetLink>restart the process</resetLink> and try again.",
diff --git a/messages/auth/es.json b/messages/auth/es.json
index 452fc978..30c3e59d 100644
--- a/messages/auth/es.json
+++ b/messages/auth/es.json
@@ -43,6 +43,7 @@
       "firebase": {
         "authError": "No pudimos encontrar una cuenta con esa combinación de email y contraseña. Revisa tu email y contraseña.",
         "invalidEmail": "Tu email parece no ser válido. Arregla los errores tipográficos y continua.",
+        "tooManyAttempts": "Demasiados intentos de inicio de sesión fallidos. Por favor, espere unos minutos o restablezca su contraseña ahora.",
         "weakPassword": "Tu contraseña necesita ser un poquito más larga, así será más segura.",
         "emailAlreadyInUse": "Este email ya está registrado en Bloom. Ve al <loginLink>inicio de sesión</loginLink> para continuar.",
         "invalidCode": "Este link de recuperación de contraseña no es válido. Por favor <resetLink>comienza de nuevo el proceso</resetLink> e inténtalo otra vez.",
diff --git a/messages/auth/fr.json b/messages/auth/fr.json
index 3fec1318..aac8e144 100644
--- a/messages/auth/fr.json
+++ b/messages/auth/fr.json
@@ -45,6 +45,7 @@
       "firebase": {
         "authError": "Nous n'avons trouvé aucun compte correspondant à cette combinaison d'adresse électronique et de mot de passe. Vérifiez votre adresse électronique et votre mot de passe.",
         "invalidEmail": "Votre e-mail semble être invalide, corrigez les erreurs de frappe pour continuer.",
+        "tooManyAttempts": "Trop de tentatives de connexion infructueuses. Veuillez patienter quelques minutes ou réinitialiser votre mot de passe maintenant.",
         "weakPassword": "Votre mot de passe doit être un peu plus long pour plus de sécurité.",
         "emailAlreadyInUse": "Cet e-mail est déjà enregistré chez Bloom, allez sur <loginLink>login</loginLink> pour continuer.",
         "invalidCode": "Ce lien de réinitialisation du mot de passe n'est pas valide, veuillez <resetLink>recommencer le processus</resetLink> et réessayer.",
diff --git a/messages/auth/hi.json b/messages/auth/hi.json
index 002b69d2..db6adb0b 100644
--- a/messages/auth/hi.json
+++ b/messages/auth/hi.json
@@ -45,6 +45,7 @@
       "firebase": {
         "authError": "Humein uss email aur password ke combination ka koi account nahi mila. Apna email aur password check keejiye. ",
         "invalidEmail": "Apka email invalid aa raha hai, jaari rakhne ke liye kripya typos ko theek karein.",
+        "tooManyAttempts": "Bahut saare viphal login prayaas, krpaya kuchh minat prateeksha karen ya apana paasavard abhee reeset karen.",
         "weakPassword": "Aapke password ko thoda aur lamba hone ki zaroorat hai taki vo aur surakshit ho.",
         "emailAlreadyInUse": "Yeh email Bloom ke saath pehle se he registered hai, <loginLink>login</loginLink> par jaiye jaari rakhne ke liye.",
         "invalidCode": "Yeh reset password link ab samaapt hogaya hai, kripya <resetLink>prakriya restart kariya</resetLink> aur fir prayas kariya. ",
diff --git a/messages/auth/pt.json b/messages/auth/pt.json
index 27ba0f80..849ba93f 100644
--- a/messages/auth/pt.json
+++ b/messages/auth/pt.json
@@ -45,6 +45,7 @@
       "firebase": {
         "authError": "Não foi possível encontrar uma conta para essa combinação de e-mail e senha. Verifique se seu e-mail e senha estão corretos.",
         "invalidEmail": "Seu e-mail parece estar inválido. Por favor, corrija os erros de digitação para continuar.",
+        "tooManyAttempts": "Muitas tentativas de login falharam. Aguarde alguns minutos ou redefina sua senha agora.",
         "weakPassword": "Sua senha precisa ser um pouco mais longa para ser mais segura.",
         "emailAlreadyInUse": "Este e-mail já está cadastrado no Bloom, acesse <loginLink>login</loginLink> para continuar.",
         "invalidCode": "Este link de redefinição de senha é inválido. Por favor, <resetLink>reinicie o processo</resetLink> e tente novamente.",
diff --git a/package.json b/package.json
index e612d348..8fbda06f 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "resolutions": {
-    "@types/react": "18.2.43"
+    "@types/react": "18.2.43",
+    "redux": "^5.0.0"
   },
   "scripts": {
     "dev": "next dev",
@@ -24,7 +25,7 @@
     "@mui/icons-material": "^5.14.19",
     "@mui/lab": "^5.0.0-alpha.155",
     "@mui/material": "^5.14.20",
-    "@reduxjs/toolkit": "^1.6.1",
+    "@reduxjs/toolkit": "^2.0.1",
     "@vercel/analytics": "^1.1.1",
     "axios": "^1.6.2",
     "firebase": "^10.7.1",
@@ -42,7 +43,7 @@
     "react-dom": "18.0.0",
     "react-international-phone": "^4.0.4",
     "react-player": "^2.13.0",
-    "react-redux": "^8.0.5",
+    "react-redux": "^9.0.4",
     "storyblok-js-client": "^4.2.0",
     "storyblok-rich-text-react-renderer": "^2.9.0"
   },
@@ -67,6 +68,6 @@
     "puppeteer": "^21.5.2",
     "react-test-renderer": "^17.0.2",
     "ts-jest": "^27.0.5",
-    "typescript": "4.5.2"
+    "typescript": "5.3.3"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 6decc5c6..a737aa77 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -935,7 +935,7 @@
   resolved "https://registry.yarnpkg.com/@babel/regjsgen/-/regjsgen-0.8.0.tgz#f0ba69b075e1f05fb2825b7fad991e7adbb18310"
   integrity sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==
 
-"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.6.tgz#c05e610dc228855dc92ef1b53d07389ed8ab521d"
   integrity sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==
@@ -2191,15 +2191,15 @@
     unbzip2-stream "1.4.3"
     yargs "17.7.2"
 
-"@reduxjs/toolkit@^1.6.1":
-  version "1.9.7"
-  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.9.7.tgz#7fc07c0b0ebec52043f8cb43510cf346405f78a6"
-  integrity sha512-t7v8ZPxhhKgOKtU+uyJT13lu4vL7az5aFi4IdoDs/eS548edn2M8Ik9h8fxgvMjGoAUVFSt6ZC1P5cWmQ014QQ==
+"@reduxjs/toolkit@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-2.0.1.tgz#0a5233c1e35c1941b03aece39cceade3467a1062"
+  integrity sha512-fxIjrR9934cmS8YXIGd9e7s1XRsEU++aFc9DVNMFMRTM5Vtsg2DCRMj21eslGtDt43IUf9bJL3h5bwUlZleibA==
   dependencies:
-    immer "^9.0.21"
-    redux "^4.2.1"
-    redux-thunk "^2.4.2"
-    reselect "^4.1.8"
+    immer "^10.0.3"
+    redux "^5.0.0"
+    redux-thunk "^3.1.0"
+    reselect "^5.0.1"
 
 "@rollup/plugin-babel@^5.2.0":
   version "5.3.1"
@@ -2385,14 +2385,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/hoist-non-react-statics@^3.3.1":
-  version "3.3.5"
-  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494"
-  integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==
-  dependencies:
-    "@types/react" "*"
-    hoist-non-react-statics "^3.3.0"
-
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0", "@types/istanbul-lib-coverage@^2.0.1":
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz#7739c232a1fee9b4d3ce8985f314c0c6d33549d7"
@@ -4833,7 +4825,7 @@ hasown@^2.0.0:
   dependencies:
     function-bind "^1.1.2"
 
-hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.3.1:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -4954,10 +4946,10 @@ ignore@^5.2.0:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.0.tgz#67418ae40d34d6999c95ff56016759c718c82f78"
   integrity sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==
 
-immer@^9.0.21:
-  version "9.0.21"
-  resolved "https://registry.yarnpkg.com/immer/-/immer-9.0.21.tgz#1e025ea31a40f24fb064f1fef23e931496330176"
-  integrity sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==
+immer@^10.0.3:
+  version "10.0.3"
+  resolved "https://registry.yarnpkg.com/immer/-/immer-10.0.3.tgz#a8de42065e964aa3edf6afc282dfc7f7f34ae3c9"
+  integrity sha512-pwupu3eWfouuaowscykeckFmVTpqbzW+rXFCX8rQLkZzM9ftBmU/++Ra+o+L27mz03zJTlyV4UUr+fdKNffo4A==
 
 import-fresh@^3.2.1, import-fresh@^3.3.0:
   version "3.3.0"
@@ -6984,16 +6976,12 @@ react-player@^2.13.0:
     prop-types "^15.7.2"
     react-fast-compare "^3.0.1"
 
-react-redux@^8.0.5:
-  version "8.1.3"
-  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-8.1.3.tgz#4fdc0462d0acb59af29a13c27ffef6f49ab4df46"
-  integrity sha512-n0ZrutD7DaX/j9VscF+uTALI3oUPa/pO4Z3soOBIjuRn/FzVu6aehhysxZCLi6y7duMf52WNZGMl7CtuK5EnRw==
+react-redux@^9.0.4:
+  version "9.0.4"
+  resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-9.0.4.tgz#6892d465f086507a517d4b53eb589876e6bc8344"
+  integrity sha512-9J1xh8sWO0vYq2sCxK2My/QO7MzUMRi3rpiILP/+tDr8krBHixC6JMM17fMK88+Oh3e4Ae6/sHIhNBgkUivwFA==
   dependencies:
-    "@babel/runtime" "^7.12.1"
-    "@types/hoist-non-react-statics" "^3.3.1"
     "@types/use-sync-external-store" "^0.0.3"
-    hoist-non-react-statics "^3.3.2"
-    react-is "^18.0.0"
     use-sync-external-store "^1.0.0"
 
 react-shallow-renderer@^16.13.1:
@@ -7062,17 +7050,15 @@ redent@^3.0.0:
     indent-string "^4.0.0"
     strip-indent "^3.0.0"
 
-redux-thunk@^2.4.2:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-2.4.2.tgz#b9d05d11994b99f7a91ea223e8b04cf0afa5ef3b"
-  integrity sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==
+redux-thunk@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/redux-thunk/-/redux-thunk-3.1.0.tgz#94aa6e04977c30e14e892eae84978c1af6058ff3"
+  integrity sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==
 
-redux@^4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197"
-  integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==
-  dependencies:
-    "@babel/runtime" "^7.9.2"
+redux@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-5.0.0.tgz#29572e29a439e094ff8fec46883fc45053f6736d"
+  integrity sha512-blLIYmYetpZMET6Q6uCY7Jtl/Im5OBldy+vNPauA8vvsdqyt66oep4EUpAMWNHauTC6xa9JuRPhRB72rY82QGA==
 
 reflect.getprototypeof@^1.0.4:
   version "1.0.4"
@@ -7160,10 +7146,10 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
-reselect@^4.1.8:
-  version "4.1.8"
-  resolved "https://registry.yarnpkg.com/reselect/-/reselect-4.1.8.tgz#3f5dc671ea168dccdeb3e141236f69f02eaec524"
-  integrity sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==
+reselect@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/reselect/-/reselect-5.0.1.tgz#587cdaaeb4e0e8927cff80ebe2bbef05f74b1648"
+  integrity sha512-D72j2ubjgHpvuCiORWkOUxndHJrxDaSolheiz5CO+roz8ka97/4msh2E8F5qay4GawR5vzBt5MkbDHT+Rdy/Wg==
 
 resolve-cwd@^3.0.0:
   version "3.0.0"
@@ -8035,10 +8021,10 @@ typedarray-to-buffer@^3.1.5:
   dependencies:
     is-typedarray "^1.0.0"
 
-typescript@4.5.2:
-  version "4.5.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.2.tgz#8ac1fba9f52256fdb06fb89e4122fa6a346c2998"
-  integrity sha512-5BlMof9H1yGt0P8/WF+wPNw6GfctgGjXp5hkblpyT+8rkASSmkUKMXrxR0Xg8ThVCi/JnHQiKXeBaEwCeQwMFw==
+typescript@5.3.3:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37"
+  integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==
 
 unbox-primitive@^1.0.2:
   version "1.0.2"

From c2e1ae99163430e535ba322e79181aa1d7cffbad Mon Sep 17 00:00:00 2001
From: Ellie Re'em <eleanor.reem@hotmail.co.uk>
Date: Tue, 19 Dec 2023 15:46:15 +0000
Subject: [PATCH 4/8] feat: enable rows in carousels and add options to
 row/column

---
 components/common/Column.tsx                  | 28 ++++++++++++++++++-
 components/common/Row.tsx                     | 13 +++++++--
 components/storyblok/StoryblokCard.tsx        |  2 +-
 components/storyblok/StoryblokCarousel.tsx    |  7 ++---
 .../storyblok/StoryblokRowColumnBlock.tsx     |  6 ++--
 5 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/components/common/Column.tsx b/components/common/Column.tsx
index 8888230d..4ce91d08 100644
--- a/components/common/Column.tsx
+++ b/components/common/Column.tsx
@@ -3,12 +3,34 @@ import { Box } from '@mui/system';
 interface ColumnProps {
   children: any;
   width?: string;
+  horizontalAlignment?: string;
 }
 
 const Column = (props: ColumnProps) => {
-  const { width, children } = props;
+  const { width, children, horizontalAlignment } = props;
 
   const columnStyles = {
+    'h3:only-child': { marginBottom: 0 },
+    ...(horizontalAlignment && {
+      textAlign:
+        horizontalAlignment === 'center'
+          ? { xs: 'center', md: 'center' }
+          : horizontalAlignment === 'right'
+          ? { xs: 'right', md: 'right' }
+          : horizontalAlignment === 'mobile-left-desktop-center'
+          ? { xs: 'left', md: 'center' }
+          : { xs: 'left', md: 'left' },
+    }),
+    ...(horizontalAlignment && {
+      justifyContent:
+        horizontalAlignment === 'center'
+          ? 'center'
+          : horizontalAlignment === 'right'
+          ? 'flex-end'
+          : horizontalAlignment === 'mobile-left-desktop-center'
+          ? { xs: 'flex-start', md: 'center' }
+          : 'flex-start',
+    }),
     width:
       width === 'extra-small'
         ? {
@@ -27,6 +49,10 @@ const Column = (props: ColumnProps) => {
         ? { xs: '100%', md: '80%' }
         : width === 'full-width'
         ? { xs: `100%`, md: '100%' }
+        : width === 'mobile-large-desktop-full'
+        ? { xs: `60%`, md: '100%' }
+        : width === 'mobile-med-desktop-full'
+        ? { xs: `40%`, md: '100%' }
         : { xs: `100%`, md: 'auto' },
     ...(!width ? { flex: { md: 1 } } : {}),
   };
diff --git a/components/common/Row.tsx b/components/common/Row.tsx
index f27a5dd0..8ec9e364 100644
--- a/components/common/Row.tsx
+++ b/components/common/Row.tsx
@@ -6,20 +6,27 @@ interface RowProps {
   numberOfColumns: number;
   horizontalAlignment: string;
   verticalAlignment: string;
+  gap?: string;
 }
 
 const Row = (props: RowProps) => {
-  const { children, horizontalAlignment, verticalAlignment, numberOfColumns } = props;
+  const { children, horizontalAlignment, verticalAlignment, numberOfColumns, gap } = props;
+  const calculatedGap =
+    gap === 'none'
+      ? 0
+      : { xs: 3, sm: 8 / numberOfColumns, md: 10 / numberOfColumns, lg: 16 / numberOfColumns };
 
   const rowStyles = {
     width: '100%',
-    gap: { xs: 3, sm: 8 / numberOfColumns, md: 10 / numberOfColumns, lg: 16 / numberOfColumns },
+    gap: calculatedGap,
     ...rowStyle,
     textAlign:
       horizontalAlignment === 'center'
         ? 'center'
         : horizontalAlignment === 'right'
         ? 'right'
+        : horizontalAlignment === 'mobile-left-desktop-center'
+        ? { xs: 'left', md: 'center' }
         : 'left',
     ...(horizontalAlignment && {
       justifyContent:
@@ -27,6 +34,8 @@ const Row = (props: RowProps) => {
           ? 'center'
           : horizontalAlignment === 'right'
           ? 'flex-end'
+          : horizontalAlignment === 'mobile-left-desktop-center'
+          ? { xs: 'flex-start', md: 'center' }
           : 'flex-start',
     }),
     ...(verticalAlignment && {
diff --git a/components/storyblok/StoryblokCard.tsx b/components/storyblok/StoryblokCard.tsx
index 1e225af5..7acd3134 100644
--- a/components/storyblok/StoryblokCard.tsx
+++ b/components/storyblok/StoryblokCard.tsx
@@ -34,7 +34,7 @@ const StoryblokCard = (props: StoryblokCardProps) => {
     padding: { xs: 2, sm: 1, md: 2, lg: 2 },
     '&:last-child': { paddingBottom: { xs: 2, sm: 2, md: 2, lg: 2 } },
     gap: { xs: 3, sm: 1, md: 1 },
-    '& h3': {
+    '& h3:only-child': {
       marginBottom: 0,
     },
   };
diff --git a/components/storyblok/StoryblokCarousel.tsx b/components/storyblok/StoryblokCarousel.tsx
index dabf280d..ad137f65 100644
--- a/components/storyblok/StoryblokCarousel.tsx
+++ b/components/storyblok/StoryblokCarousel.tsx
@@ -5,16 +5,15 @@ import { Box } from '@mui/system';
 import NukaCarousel from 'nuka-carousel';
 import { StoryblokComponent } from 'storyblok-js-client';
 import { Component as DynamicComponent } from './DynamicComponent';
-import StoryblokCard from './StoryblokCard';
 import StoryblokImage from './StoryblokImage';
 import StoryblokQuote from './StoryblokQuote';
-import StoryblokVideo from './StoryblokVideo';
+import StoryblokRowColumnBlock from './StoryblokRowColumnBlock';
 
 const components: DynamicComponent[] = [
   { name: 'image', component: StoryblokImage },
-  { name: 'video', component: StoryblokVideo },
   { name: 'quote', component: StoryblokQuote },
-  { name: 'card', component: StoryblokCard },
+  { name: 'row_new', component: StoryblokRowColumnBlock },
+
 ];
 
 interface StoryblokCarouselProps {
diff --git a/components/storyblok/StoryblokRowColumnBlock.tsx b/components/storyblok/StoryblokRowColumnBlock.tsx
index f4948160..3be3ca5a 100644
--- a/components/storyblok/StoryblokRowColumnBlock.tsx
+++ b/components/storyblok/StoryblokRowColumnBlock.tsx
@@ -20,10 +20,11 @@ interface StoryblokRowColumnBlockProps {
   columns: StoryblokColumn[];
   horizontal_alignment: string;
   vertical_alignment: string;
+  gap: string;
 }
 
 const StoryblokRowColumnBlock = (props: StoryblokRowColumnBlockProps) => {
-  const { columns, horizontal_alignment, vertical_alignment } = props;
+  const { columns, horizontal_alignment, vertical_alignment, gap } = props;
 
   if (!columns) return <></>;
 
@@ -32,10 +33,11 @@ const StoryblokRowColumnBlock = (props: StoryblokRowColumnBlockProps) => {
       numberOfColumns={columns.length}
       verticalAlignment={vertical_alignment}
       horizontalAlignment={horizontal_alignment}
+      gap={gap}
     >
       {columns.map((column: any, index: number) => {
         return (
-          <Column width={column.width} key={`row_column_${index}_${Math.random() * 100}`}>
+          <Column width={column.width} horizontalAlignment={column.horizontal_alignment} key={`row_column_${index}_${Math.random() * 100}`}>
             {render(column.content, RichTextOptions)}
           </Column>
         );

From 59e62a8561e60f0198ec89d79f5a747fe9bc335b Mon Sep 17 00:00:00 2001
From: Anna Hughes <annaraehughes@live.co.uk>
Date: Wed, 20 Dec 2023 18:54:43 +0000
Subject: [PATCH 5/8] Fix graphql redirect warning (#776)

---
 components/forms/LoginForm.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/forms/LoginForm.tsx b/components/forms/LoginForm.tsx
index aefe8a28..6997cb75 100644
--- a/components/forms/LoginForm.tsx
+++ b/components/forms/LoginForm.tsx
@@ -79,7 +79,7 @@ const LoginForm = () => {
           if (userResponse.data.partnerAdmin?.id) {
             await router.push('/partner-admin/create-access-code');
           } else if (returnUrl) {
-            await router.push(returnUrl);
+            router.push(returnUrl);
           } else {
             await router.push('/courses');
           }

From 3d8e9ff9a759a90a073cb8c11f285d37be91ff91 Mon Sep 17 00:00:00 2001
From: Anna Hughes <annaraehughes@live.co.uk>
Date: Wed, 20 Dec 2023 19:02:55 +0000
Subject: [PATCH 6/8] Epic refactor to use @storyblok/react (#775)

---
 components/cards/CourseCard.tsx               |   4 +-
 components/cards/SessionCard.tsx              |   6 +-
 components/common/NoDataAvailable.tsx         |  14 +
 components/common/Quote.tsx                   |  20 +-
 components/course/CourseHeader.tsx            |  16 +-
 components/course/CourseIntroduction.tsx      |  28 +-
 components/layout/Header.tsx                  |  20 +-
 components/session/MultipleBonusContent.tsx   |  12 +-
 components/session/SessionCompleteButton.tsx  |   7 +-
 components/session/SessionProgressDisplay.tsx |   9 +-
 components/storyblok/DynamicComponent.tsx     |   7 +-
 components/storyblok/StoryblokAccordion.tsx   |  11 +-
 components/storyblok/StoryblokAudio.tsx       |   7 +-
 components/storyblok/StoryblokButton.tsx      |  37 +-
 components/storyblok/StoryblokCard.tsx        |  13 +-
 components/storyblok/StoryblokCarousel.tsx    |  83 ++--
 components/storyblok/StoryblokCoursePage.tsx  | 235 ++++++++++
 components/storyblok/StoryblokFaqs.tsx        |  20 +-
 components/storyblok/StoryblokImage.tsx       |  34 +-
 .../storyblok/StoryblokMeetTheTeamPage.tsx    | 189 ++++++++
 components/storyblok/StoryblokPage.tsx        |  57 +++
 components/storyblok/StoryblokPageSection.tsx |  18 +-
 components/storyblok/StoryblokQuote.tsx       |  27 +-
 components/storyblok/StoryblokRow.tsx         |  25 +-
 .../storyblok/StoryblokRowColumnBlock.tsx     |  47 +-
 .../storyblok/StoryblokSessionIbaPage.tsx     | 380 +++++++++++++++
 components/storyblok/StoryblokSessionPage.tsx | 416 +++++++++++++++++
 components/storyblok/StoryblokSpacer.tsx      |  13 +-
 components/storyblok/StoryblokStatement.tsx   |  26 +-
 .../StoryblokTeamMemberCard.tsx}              |  49 +-
 components/storyblok/StoryblokVideo.tsx       |  31 +-
 components/storyblok/StoryblokWelcomePage.tsx | 189 ++++++++
 components/video/VideoTranscriptModal.tsx     |   4 +-
 config/storyblok.ts                           | 140 ++----
 messages/shared/en.json                       |   3 +
 package.json                                  |   2 +-
 pages/[slug].tsx                              |  75 +--
 pages/_app.tsx                                |   4 +
 pages/about-our-courses.tsx                   |  47 +-
 pages/chat.tsx                                |  51 +-
 pages/courses/[slug].tsx                      | 211 ++-------
 pages/courses/[slug]/[sessionSlug].tsx        | 439 ++----------------
 .../[sessionSlug].tsx                         | 402 ++--------------
 .../index.tsx                                 | 154 +-----
 pages/courses/index.tsx                       |  42 +-
 pages/index.tsx                               |  44 +-
 pages/meet-the-team.tsx                       | 163 +------
 pages/partnership/[partnerName].tsx           |  72 ++-
 pages/subscription/whatsapp.tsx               |  56 +--
 pages/therapy/book-session.tsx                |   2 +-
 pages/welcome/[partnerName].tsx               | 223 ++-------
 utils/getStoryblokPageProps.ts                |  37 ++
 utils/helper-types/storyblok.d.ts             |   3 -
 yarn.lock                                     | 128 ++---
 54 files changed, 2318 insertions(+), 2034 deletions(-)
 create mode 100644 components/common/NoDataAvailable.tsx
 create mode 100644 components/storyblok/StoryblokCoursePage.tsx
 create mode 100644 components/storyblok/StoryblokMeetTheTeamPage.tsx
 create mode 100644 components/storyblok/StoryblokPage.tsx
 create mode 100644 components/storyblok/StoryblokSessionIbaPage.tsx
 create mode 100644 components/storyblok/StoryblokSessionPage.tsx
 rename components/{cards/TeamMemberCard.tsx => storyblok/StoryblokTeamMemberCard.tsx} (72%)
 create mode 100644 components/storyblok/StoryblokWelcomePage.tsx
 create mode 100644 utils/getStoryblokPageProps.ts
 delete mode 100644 utils/helper-types/storyblok.d.ts

diff --git a/components/cards/CourseCard.tsx b/components/cards/CourseCard.tsx
index 3aff9536..610b5e09 100644
--- a/components/cards/CourseCard.tsx
+++ b/components/cards/CourseCard.tsx
@@ -12,11 +12,11 @@ import {
   IconButton,
   Typography,
 } from '@mui/material';
+import { ISbStoryData } from '@storyblok/react';
 import { useTranslations } from 'next-intl';
 import Image from 'next/legacy/image';
 import { useRouter } from 'next/router';
 import { useState } from 'react';
-import { StoryData } from 'storyblok-js-client';
 import { PROGRESS_STATUS } from '../../constants/enums';
 import { iconTextRowStyle, rowStyle } from '../../styles/common';
 import { courseIsLiveNow, courseIsLiveSoon } from '../../utils/courseLiveStatus';
@@ -69,7 +69,7 @@ const statusRowStyle = {
 };
 
 interface CourseCardProps {
-  course: StoryData;
+  course: ISbStoryData;
   courseProgress: PROGRESS_STATUS | null;
   liveCourseAccess: boolean;
 }
diff --git a/components/cards/SessionCard.tsx b/components/cards/SessionCard.tsx
index 50cc3e51..dc544ab9 100644
--- a/components/cards/SessionCard.tsx
+++ b/components/cards/SessionCard.tsx
@@ -9,9 +9,9 @@ import {
   IconButton,
   Typography,
 } from '@mui/material';
+import { ISbStoryData } from '@storyblok/react';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
-import { StoryData } from 'storyblok-js-client';
 import { rowStyle } from '../../styles/common';
 import Link from '../common/Link';
 import { SessionProgressDisplay } from '../session/SessionProgressDisplay';
@@ -52,7 +52,7 @@ const cardActionStyle = {
 } as const;
 
 interface SessionCardProps {
-  session: StoryData;
+  session: ISbStoryData;
   sessionSubtitle: string;
   storyblokCourseId: number;
 }
@@ -81,7 +81,7 @@ const SessionCard = (props: SessionCardProps) => {
       >
         <CardContent sx={cardContentStyle}>
           <Box sx={cardContentRowStyles}>
-            <SessionProgressDisplay session={session} storyblokCourseId={storyblokCourseId} />
+            <SessionProgressDisplay sessionId={session.id} storyblokCourseId={storyblokCourseId} />
             <Typography flex={1} component="h3" variant="h3">
               {session.content.name}
             </Typography>
diff --git a/components/common/NoDataAvailable.tsx b/components/common/NoDataAvailable.tsx
new file mode 100644
index 00000000..145f59e9
--- /dev/null
+++ b/components/common/NoDataAvailable.tsx
@@ -0,0 +1,14 @@
+import { Box, Typography } from '@mui/material';
+import { useTranslations } from 'next-intl';
+
+const NoDataAvailable = () => {
+  const t = useTranslations('Shared.noDataAvailable');
+
+  return (
+    <Box m={10}>
+      <Typography>{t('title')}</Typography>
+    </Box>
+  );
+};
+
+export default NoDataAvailable;
diff --git a/components/common/Quote.tsx b/components/common/Quote.tsx
index 80a89e2e..ce810e80 100644
--- a/components/common/Quote.tsx
+++ b/components/common/Quote.tsx
@@ -1,10 +1,10 @@
 import { useTheme } from '@mui/material';
 import { Box } from '@mui/system';
-import { Richtext } from 'storyblok-js-client';
+import { ISbRichtext } from '@storyblok/react';
 import { richtextContentStyle } from '../../styles/common';
 
 interface QuoteProps {
-  text: Richtext | string;
+  text: ISbRichtext | string;
   textSize: string;
   iconColor: string;
 }
@@ -19,18 +19,18 @@ const Quote = (props: QuoteProps) => {
     textSize === 'extra-small'
       ? { xs: 0.875, md: 1 }
       : textSize === 'small'
-      ? { xs: 1, md: 1.125 }
-      : textSize === 'large'
-      ? { xs: 1.25, md: 1.5 }
-      : textSize === 'extra-large'
-      ? { xs: 1.5, md: 1.75 }
-      : { xs: 1.125, md: 1.25 }; // default / medium
+        ? { xs: 1, md: 1.125 }
+        : textSize === 'large'
+          ? { xs: 1.25, md: 1.5 }
+          : textSize === 'extra-large'
+            ? { xs: 1.5, md: 1.75 }
+            : { xs: 1.125, md: 1.25 }; // default / medium
   const quotePosition =
     textSize === 'extra-small'
       ? { top: '-4px', left: '0' }
       : textSize === 'small'
-      ? { top: '-8px', left: '0' }
-      : { top: '-16px', left: '-8px' }; // medium/ large/ extra large
+        ? { top: '-8px', left: '0' }
+        : { top: '-16px', left: '-8px' }; // medium/ large/ extra large
   const containerStyle = {
     fontFamily: 'Montserrat, sans-serif',
     fontStyle: 'italic',
diff --git a/components/course/CourseHeader.tsx b/components/course/CourseHeader.tsx
index 93ec789f..dcb92ca1 100644
--- a/components/course/CourseHeader.tsx
+++ b/components/course/CourseHeader.tsx
@@ -1,7 +1,7 @@
 import { Button } from '@mui/material';
+import { ISbRichtext } from '@storyblok/react';
 import { useTranslations } from 'next-intl';
 import { useEffect } from 'react';
-import { StoryData } from 'storyblok-js-client';
 import { PROGRESS_STATUS } from '../../constants/enums';
 import { COURSE_OVERVIEW_VIEWED } from '../../constants/events';
 import logEvent from '../../utils/logEvent';
@@ -9,22 +9,24 @@ import Link from '../common/Link';
 import Header from '../layout/Header';
 
 export interface CourseHeaderProps {
-  story: StoryData;
+  name: string;
+  description: ISbRichtext;
+  image_with_background: { filename: string; alt: string };
   courseProgress: PROGRESS_STATUS;
   eventData: {};
 }
 const CourseHeader = (props: CourseHeaderProps) => {
-  const { story, courseProgress, eventData } = props;
+  const { name, description, image_with_background, courseProgress, eventData } = props;
 
   useEffect(() => {
     logEvent(COURSE_OVERVIEW_VIEWED, eventData);
   });
 
   const headerProps = {
-    title: story.content.name,
-    introduction: story.content.description,
-    imageSrc: story.content.image_with_background?.filename,
-    translatedImageAlt: story.content.image_with_background?.alt,
+    title: name,
+    introduction: description,
+    imageSrc: image_with_background?.filename,
+    translatedImageAlt: image_with_background?.alt,
     progressStatus: courseProgress,
   };
 
diff --git a/components/course/CourseIntroduction.tsx b/components/course/CourseIntroduction.tsx
index c85f36f7..a1867551 100644
--- a/components/course/CourseIntroduction.tsx
+++ b/components/course/CourseIntroduction.tsx
@@ -1,7 +1,7 @@
 import { Box, Link as MuiLink, Typography } from '@mui/material';
+import { ISbRichtext } from '@storyblok/react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useState } from 'react';
-import { StoryData } from 'storyblok-js-client';
 import { render } from 'storyblok-rich-text-react-renderer';
 import {
   COURSE_INTRO_VIDEO_TRANSCRIPT_CLOSED,
@@ -25,7 +25,11 @@ const introductionContainerStyle = {
 } as const;
 
 interface CourseIntroductionProps {
-  course: StoryData;
+  video: { url: string };
+  name: string;
+  video_transcript: ISbRichtext;
+  live_soon_content: ISbRichtext;
+  live_now_content: ISbRichtext;
   courseLiveSoon?: boolean;
   courseLiveNow?: boolean;
   liveCourseAccess?: boolean;
@@ -34,7 +38,11 @@ interface CourseIntroductionProps {
 
 const CourseIntroduction = (props: CourseIntroductionProps) => {
   const {
-    course,
+    video,
+    name,
+    video_transcript,
+    live_soon_content,
+    live_now_content,
     courseLiveSoon = false,
     courseLiveNow = false,
     liveCourseAccess = false,
@@ -55,14 +63,14 @@ const CourseIntroduction = (props: CourseIntroductionProps) => {
         : COURSE_INTRO_VIDEO_TRANSCRIPT_CLOSED,
       {
         ...eventData,
-        course_name: course.content.name,
+        course_name: name,
       },
     );
-  }, [openTranscriptModal, course, eventData]);
+  }, [openTranscriptModal, name, eventData]);
 
   const IntroductionVideo = () => (
     <Video
-      url={course.content.video.url}
+      url={video.url}
       eventData={eventData}
       eventPrefix="COURSE_INTRO"
       containerStyles={{ width: { xs: '100%' }, flex: 1 }}
@@ -89,8 +97,8 @@ const CourseIntroduction = (props: CourseIntroductionProps) => {
           })}
         </Typography>
         <VideoTranscriptModal
-          videoName={course.content.name}
-          content={course.content.video_transcript}
+          videoName={name}
+          content={video_transcript}
           setOpenTranscriptModal={setOpenTranscriptModal}
           openTranscriptModal={openTranscriptModal}
         />
@@ -100,12 +108,12 @@ const CourseIntroduction = (props: CourseIntroductionProps) => {
       {liveCourseAccess && courseLiveSoon ? (
         <Box flex={1}>
           <CourseStatusHeader status="liveSoon" />
-          {render(course.content.live_soon_content, RichTextOptions)}
+          {render(live_soon_content, RichTextOptions)}
         </Box>
       ) : liveCourseAccess && courseLiveNow ? (
         <Box flex={1}>
           <CourseStatusHeader status="liveNow" />
-          {render(course.content.live_now_content, RichTextOptions)}
+          {render(live_now_content, RichTextOptions)}
         </Box>
       ) : (
         <IntroductionVideo />
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
index f20652b6..c730367a 100644
--- a/components/layout/Header.tsx
+++ b/components/layout/Header.tsx
@@ -1,7 +1,7 @@
 import { Box, Container, Typography } from '@mui/material';
+import { ISbRichtext } from '@storyblok/react';
 import { useTranslations } from 'next-intl';
 import Image, { StaticImageData } from 'next/legacy/image';
-import * as React from 'react';
 import { render } from 'storyblok-rich-text-react-renderer';
 import { PROGRESS_STATUS } from '../../constants/enums';
 import { columnStyle, rowStyle } from '../../styles/common';
@@ -10,15 +10,9 @@ import UserResearchBanner from '../banner/UserResearchBanner';
 import ProgressStatus from '../common/ProgressStatus';
 
 export interface HeaderProps {
-  title:
-    | string
-    | React.ReactNodeArray
-    | React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-  introduction:
-    | string
-    | React.ReactNodeArray
-    | React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-  imageSrc: StaticImageData;
+  title: string;
+  introduction: string | ISbRichtext;
+  imageSrc: string | StaticImageData;
   imageAlt?: string;
   translatedImageAlt?: string;
   progressStatus?: PROGRESS_STATUS;
@@ -86,7 +80,11 @@ const Header = (props: HeaderProps) => {
           <Typography variant="h1" component="h1">
             {title}
           </Typography>
-          <>{render(introduction, RichTextOptions)}</>
+          {typeof introduction === 'string' ? (
+            <Typography>{introduction}</Typography>
+          ) : (
+            render(introduction, RichTextOptions)
+          )}
         </Box>
         {progressStatus && <ProgressStatus status={progressStatus} />}
       </Box>
diff --git a/components/session/MultipleBonusContent.tsx b/components/session/MultipleBonusContent.tsx
index 6437dc68..84d0ca10 100644
--- a/components/session/MultipleBonusContent.tsx
+++ b/components/session/MultipleBonusContent.tsx
@@ -1,5 +1,5 @@
 import LinkIcon from '@mui/icons-material/Link';
-import { StoryData } from 'storyblok-js-client';
+import { ISbRichtext } from '@storyblok/react';
 import { render } from 'storyblok-rich-text-react-renderer';
 import SessionDetail from '../../pages/courses/image-based-abuse-and-rebuilding-ourselves/[sessionSlug]';
 import { RichTextOptions } from '../../utils/richText';
@@ -11,23 +11,23 @@ import { Dots } from '../common/Dots';
  * This is currently used in the following session page: {@link SessionDetail}
  */
 
-type BonusContent = {
+export type BonusContent = {
   _uid: string;
   title: string;
   content: unknown;
 };
 interface MultipleBonusContentProps {
-  story: StoryData;
+  bonus: BonusContent[];
   eventData: { [index: string]: any };
 }
 
 const MultipleBonusContent = (props: MultipleBonusContentProps) => {
-  const { story, eventData } = props;
+  const { bonus, eventData } = props;
 
   return (
     <>
       <Dots />
-      {story.content.bonus.map((bonus: BonusContent) => (
+      {bonus.map((bonus: BonusContent) => (
         <SessionContentCard
           key={bonus._uid}
           title={bonus.title}
@@ -36,7 +36,7 @@ const MultipleBonusContent = (props: MultipleBonusContentProps) => {
           eventPrefix="SESSION_BONUS_CONTENT"
           eventData={eventData}
         >
-          <>{render(bonus.content, RichTextOptions)}</>
+          <>{render(bonus.content as ISbRichtext, RichTextOptions)}</>
         </SessionContentCard>
       ))}
     </>
diff --git a/components/session/SessionCompleteButton.tsx b/components/session/SessionCompleteButton.tsx
index 4d39bc88..6d5d9503 100644
--- a/components/session/SessionCompleteButton.tsx
+++ b/components/session/SessionCompleteButton.tsx
@@ -2,7 +2,6 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import { Button, Typography } from '@mui/material';
 import { useTranslations } from 'next-intl';
 import { useState } from 'react';
-import { StoryData } from 'storyblok-js-client';
 import { useCompleteSessionMutation } from '../../app/api';
 import {
   SESSION_COMPLETE_ERROR,
@@ -20,12 +19,12 @@ const errorStyle = {
 } as const;
 
 interface SessionCompleteButtonProps {
-  story: StoryData;
+  storyId: number;
   eventData: any;
 }
 
 export const SessionCompleteButton = (props: SessionCompleteButtonProps) => {
-  const { story, eventData } = props;
+  const { storyId, eventData } = props;
 
   const t = useTranslations('Courses');
 
@@ -37,7 +36,7 @@ export const SessionCompleteButton = (props: SessionCompleteButtonProps) => {
     logEvent(SESSION_COMPLETE_REQUEST, eventData);
 
     const completeSessionResponse = await completeSession({
-      storyblokId: story.id,
+      storyblokId: storyId,
     });
 
     if ('data' in completeSessionResponse) {
diff --git a/components/session/SessionProgressDisplay.tsx b/components/session/SessionProgressDisplay.tsx
index b2fc19ba..4ad8b6a8 100644
--- a/components/session/SessionProgressDisplay.tsx
+++ b/components/session/SessionProgressDisplay.tsx
@@ -5,15 +5,14 @@ import { useEffect, useState } from 'react';
 import { Course } from '../../app/coursesSlice';
 import { PROGRESS_STATUS } from '../../constants/enums';
 import { useTypedSelector } from '../../hooks/store';
-import { StoryblokSessionJson } from '../../utils/helper-types/storyblok';
 
 interface SessionProgressDisplayProps {
-  session: StoryblokSessionJson;
+  sessionId: number;
   storyblokCourseId: number;
 }
 
 export const SessionProgressDisplay = (props: SessionProgressDisplayProps) => {
-  const { session, storyblokCourseId } = props;
+  const { sessionId, storyblokCourseId } = props;
 
   const [sessionProgress, setSessionProgress] = useState<PROGRESS_STATUS>(
     PROGRESS_STATUS.NOT_STARTED,
@@ -26,7 +25,7 @@ export const SessionProgressDisplay = (props: SessionProgressDisplayProps) => {
 
     if (userCourse) {
       const matchingSession = userCourse.sessions?.find(
-        (userSession) => userSession.storyblokId === session.id,
+        (userSession) => userSession.storyblokId === sessionId,
       );
 
       if (matchingSession) {
@@ -37,7 +36,7 @@ export const SessionProgressDisplay = (props: SessionProgressDisplayProps) => {
         setSessionProgress(PROGRESS_STATUS.NOT_STARTED);
       }
     }
-  }, [courses, session.id, storyblokCourseId]);
+  }, [courses, sessionId, storyblokCourseId]);
 
   return (
     <>
diff --git a/components/storyblok/DynamicComponent.tsx b/components/storyblok/DynamicComponent.tsx
index f21b7d3e..1e2656b4 100644
--- a/components/storyblok/DynamicComponent.tsx
+++ b/components/storyblok/DynamicComponent.tsx
@@ -1,4 +1,4 @@
-import { StoryblokComponent } from 'storyblok-js-client';
+import { SbBlokData } from '@storyblok/react';
 import Placeholder from './Placeholder';
 import StoryblokButton from './StoryblokButton';
 import StoryblokCard from './StoryblokCard';
@@ -32,7 +32,7 @@ const components: Component[] = [
 ];
 
 interface DynamicComponentProps {
-  blok: StoryblokComponent<string>;
+  blok: SbBlokData;
 }
 
 const DynamicComponent = (props: DynamicComponentProps) => {
@@ -43,7 +43,8 @@ const DynamicComponent = (props: DynamicComponentProps) => {
     const Component = component.component;
     return <Component blok={blok} />;
   }
-  return <Placeholder componentName={blok.component} />;
+
+  return <Placeholder componentName={blok.component || 'unnamed'} />;
 };
 
 export default DynamicComponent;
diff --git a/components/storyblok/StoryblokAccordion.tsx b/components/storyblok/StoryblokAccordion.tsx
index a5a28b1b..4b8b1344 100644
--- a/components/storyblok/StoryblokAccordion.tsx
+++ b/components/storyblok/StoryblokAccordion.tsx
@@ -7,6 +7,7 @@ import {
   Icon,
   Typography,
 } from '@mui/material';
+import { storyblokEditable } from '@storyblok/react';
 import Image from 'next/legacy/image';
 import { render } from 'storyblok-rich-text-react-renderer';
 import { ACCORDION_OPENED } from '../../constants/events';
@@ -33,16 +34,20 @@ const themes = {
 
 const secondaryStyling = {};
 interface StoryblokAccordionItemProps {
+  _uid: string;
+  _editable: string;
   body: any;
   title: string;
   icon: { filename: string; alt: string };
 }
 interface StoryblokAccordionProps {
+  _uid: string;
+  _editable: string;
   accordion_items: Array<StoryblokAccordionItemProps>;
   theme: 'primary' | 'secondary';
 }
 const StoryblokAccordion = (props: StoryblokAccordionProps) => {
-  const { accordion_items, theme } = props;
+  const { _uid, _editable, accordion_items, theme } = props;
 
   const handleChange =
     (accordionTitle: string) => (_event: React.SyntheticEvent, isExpanded: boolean) => {
@@ -51,7 +56,7 @@ const StoryblokAccordion = (props: StoryblokAccordionProps) => {
       }
     };
   return (
-    <Box sx={containerStyle}>
+    <Box sx={containerStyle} {...storyblokEditable({ _uid, _editable, accordion_items, theme })}>
       {accordion_items.map((ai, i) => (
         <Accordion key={`panel${i}`} onChange={handleChange(ai.title)} sx={themes[theme]}>
           <AccordionSummary
@@ -78,7 +83,7 @@ const StoryblokAccordion = (props: StoryblokAccordionProps) => {
                 variant="h3"
                 textAlign="left"
               >
-                {render(ai.title)}
+                {ai.title}
               </Typography>
             }
           </AccordionSummary>
diff --git a/components/storyblok/StoryblokAudio.tsx b/components/storyblok/StoryblokAudio.tsx
index 5a506770..84c4eee5 100644
--- a/components/storyblok/StoryblokAudio.tsx
+++ b/components/storyblok/StoryblokAudio.tsx
@@ -1,4 +1,5 @@
 import { Box } from '@mui/system';
+import { storyblokEditable } from '@storyblok/react';
 import dynamic from 'next/dynamic';
 import { richtextContentStyle } from '../../styles/common';
 // See React Player Hydration issue https://github.com/cookpete/react-player/issues/1474
@@ -9,12 +10,14 @@ const audioContainerStyle = {
 } as const;
 
 interface StoryblokAudioProps {
+  _uid: string;
+  _editable: string;
   audio_file: { filename: string };
   alignment: string;
 }
 
 const StoryblokAudio = (props: StoryblokAudioProps) => {
-  const { audio_file, alignment = 'left' } = props;
+  const { _uid, _editable, audio_file, alignment = 'left' } = props;
   if (!audio_file) return <></>;
 
   const containerStyle = {
@@ -26,7 +29,7 @@ const StoryblokAudio = (props: StoryblokAudioProps) => {
   } as const;
 
   return (
-    <Box sx={containerStyle}>
+    <Box sx={containerStyle} {...storyblokEditable({ _uid, _editable, audio_file, alignment })}>
       <Box sx={audioContainerStyle}>
         <ReactPlayer width="100%" height="50px" url={audio_file.filename} controls />
       </Box>
diff --git a/components/storyblok/StoryblokButton.tsx b/components/storyblok/StoryblokButton.tsx
index 509f45e5..535b880d 100644
--- a/components/storyblok/StoryblokButton.tsx
+++ b/components/storyblok/StoryblokButton.tsx
@@ -1,4 +1,5 @@
-import { Button } from '@mui/material';
+import { Box, Button } from '@mui/material';
+import { storyblokEditable } from '@storyblok/react';
 import { STORYBLOK_COLORS } from '../../constants/enums';
 import Link from '../common/Link';
 
@@ -6,6 +7,8 @@ interface StoryblokLink {
   cached_url: string;
 }
 interface StoryblokButtonProps {
+  _uid: string;
+  _editable: string;
   text: string;
   color: STORYBLOK_COLORS;
   link: StoryblokLink;
@@ -13,7 +16,7 @@ interface StoryblokButtonProps {
 }
 
 const StoryblokButton = (props: StoryblokButtonProps) => {
-  const { text, color = 'secondary.main', link, size = 'medium' } = props;
+  const { _uid, _editable, text, color = 'secondary.main', link, size = 'medium' } = props;
 
   if (!link || !link.cached_url) return <></>;
 
@@ -23,24 +26,26 @@ const StoryblokButton = (props: StoryblokButtonProps) => {
       color === 'background.default'
         ? 'secondary.main'
         : color === 'primary.light'
-        ? 'primary.main'
-        : color === 'secondary.light'
-        ? 'secondary.main'
-        : color,
+          ? 'primary.main'
+          : color === 'secondary.light'
+            ? 'secondary.main'
+            : color,
     color: color === 'primary.dark' ? 'common.white' : 'text.primary',
   } as const;
 
   return (
-    <Button
-      component={Link}
-      sx={buttonStyle}
-      variant="contained"
-      color={color.includes('primary') ? 'primary' : 'secondary'}
-      href={link.cached_url}
-      size={size}
-    >
-      {text}
-    </Button>
+    <Box {...storyblokEditable({ _uid, _editable, text, color, link, size })}>
+      <Button
+        component={Link}
+        sx={buttonStyle}
+        variant="contained"
+        color={color.includes('primary') ? 'primary' : 'secondary'}
+        href={link.cached_url}
+        size={size}
+      >
+        {text}
+      </Button>
+    </Box>
   );
 };
 
diff --git a/components/storyblok/StoryblokCard.tsx b/components/storyblok/StoryblokCard.tsx
index 7acd3134..ab44b51c 100644
--- a/components/storyblok/StoryblokCard.tsx
+++ b/components/storyblok/StoryblokCard.tsx
@@ -1,13 +1,15 @@
 import { Card, CardContent } from '@mui/material';
 import { Box } from '@mui/system';
+import { ISbRichtext, storyblokEditable } from '@storyblok/react';
 import Image from 'next/legacy/image';
-import { Richtext } from 'storyblok-js-client';
 import { render } from 'storyblok-rich-text-react-renderer';
 import { RichTextOptions } from '../../utils/richText';
 
 interface StoryblokCardProps {
+  _uid: string;
+  _editable: string;
   image: { filename: string; alt: string };
-  content: Richtext;
+  content: ISbRichtext;
   alignment: string;
   background: string;
   style: string;
@@ -15,6 +17,8 @@ interface StoryblokCardProps {
 
 const StoryblokCard = (props: StoryblokCardProps) => {
   const {
+    _uid,
+    _editable,
     image,
     content,
     alignment = 'left',
@@ -63,7 +67,10 @@ const StoryblokCard = (props: StoryblokCardProps) => {
   } as const;
 
   return (
-    <Card sx={cardStyle}>
+    <Card
+      {...storyblokEditable({ _uid, _editable, image, content, alignment, background, style })}
+      sx={cardStyle}
+    >
       <CardContent sx={cardContentStyle}>
         {image && image.filename && (
           <Box sx={imageContainerStyle}>
diff --git a/components/storyblok/StoryblokCarousel.tsx b/components/storyblok/StoryblokCarousel.tsx
index ad137f65..cd7125fc 100644
--- a/components/storyblok/StoryblokCarousel.tsx
+++ b/components/storyblok/StoryblokCarousel.tsx
@@ -2,8 +2,8 @@ import NavigateBeforeSharp from '@mui/icons-material/NavigateBeforeSharp';
 import NavigateNext from '@mui/icons-material/NavigateNext';
 import { IconButton, useMediaQuery, useTheme } from '@mui/material';
 import { Box } from '@mui/system';
+import { SbBlokData, storyblokEditable } from '@storyblok/react';
 import NukaCarousel from 'nuka-carousel';
-import { StoryblokComponent } from 'storyblok-js-client';
 import { Component as DynamicComponent } from './DynamicComponent';
 import StoryblokImage from './StoryblokImage';
 import StoryblokQuote from './StoryblokQuote';
@@ -13,11 +13,12 @@ const components: DynamicComponent[] = [
   { name: 'image', component: StoryblokImage },
   { name: 'quote', component: StoryblokQuote },
   { name: 'row_new', component: StoryblokRowColumnBlock },
-
 ];
 
 interface StoryblokCarouselProps {
-  items: Array<StoryblokComponent<string>>;
+  _uid: string;
+  _editable: string;
+  items: Array<SbBlokData>;
   theme: 'primary' | 'secondary';
 }
 const PreviousButton = ({ onClick }: { onClick: () => void }) => {
@@ -65,48 +66,52 @@ const NextButton = ({ onClick }: { onClick: () => void }) => {
     </IconButton>
   );
 };
-const StoryblokCarousel = ({ items, theme = 'primary' }: StoryblokCarouselProps) => {
+const StoryblokCarousel = (props: StoryblokCarouselProps) => {
+  const { _uid, _editable, items, theme = 'primary' } = props;
+
   const siteTheme = useTheme();
 
   const isMobileScreen = useMediaQuery(siteTheme.breakpoints.down('md'));
 
   return (
-    <NukaCarousel
-      wrapAround={true}
-      adaptiveHeight={false}
-      defaultControlsConfig={{
-        pagingDotsStyle: {
-          fill: theme === 'primary' ? '#F5E4E6' : '#FFFFFF',
-        },
-        pagingDotsContainerClassName: 'paging-dots-container',
-      }}
-      renderCenterLeftControls={
-        isMobileScreen
-          ? () => {
-              return <></>;
-            }
-          : ({ previousSlide }) => <PreviousButton onClick={previousSlide} />
-      }
-      renderCenterRightControls={
-        isMobileScreen
-          ? () => {
-              return <></>;
-            }
-          : ({ nextSlide }) => <NextButton onClick={nextSlide} />
-      }
-    >
-      {items.map((item, index: number) => {
-        const component = components.find((c) => c.name === item.component);
-        if (component) {
-          const Component = component.component;
-          return (
-            <Box sx={{}} key={index}>
-              <Component {...item} key={index} />
-            </Box>
-          );
+    <Box {...storyblokEditable({ _uid, _editable, items, theme })}>
+      <NukaCarousel
+        wrapAround={true}
+        adaptiveHeight={false}
+        defaultControlsConfig={{
+          pagingDotsStyle: {
+            fill: theme === 'primary' ? '#F5E4E6' : '#FFFFFF',
+          },
+          pagingDotsContainerClassName: 'paging-dots-container',
+        }}
+        renderCenterLeftControls={
+          isMobileScreen
+            ? () => {
+                return <></>;
+              }
+            : ({ previousSlide }) => <PreviousButton onClick={previousSlide} />
+        }
+        renderCenterRightControls={
+          isMobileScreen
+            ? () => {
+                return <></>;
+              }
+            : ({ nextSlide }) => <NextButton onClick={nextSlide} />
         }
-      })}
-    </NukaCarousel>
+      >
+        {items.map((item, index: number) => {
+          const component = components.find((c) => c.name === item.component);
+          if (component) {
+            const Component = component.component;
+            return (
+              <Box sx={{}} key={index}>
+                <Component {...item} key={index} />
+              </Box>
+            );
+          }
+        })}
+      </NukaCarousel>
+    </Box>
   );
 };
 
diff --git a/components/storyblok/StoryblokCoursePage.tsx b/components/storyblok/StoryblokCoursePage.tsx
new file mode 100644
index 00000000..729ee5cd
--- /dev/null
+++ b/components/storyblok/StoryblokCoursePage.tsx
@@ -0,0 +1,235 @@
+import { Box, Container, Typography } from '@mui/material';
+import { ISbRichtext, storyblokEditable } from '@storyblok/react';
+import { useTranslations } from 'next-intl';
+import Head from 'next/head';
+import { useEffect, useState } from 'react';
+import { render } from 'storyblok-rich-text-react-renderer';
+import SessionCard from '../../components/cards/SessionCard';
+import { ContentUnavailable } from '../../components/common/ContentUnavailable';
+import Link from '../../components/common/Link';
+import CourseHeader from '../../components/course/CourseHeader';
+import CourseIntroduction from '../../components/course/CourseIntroduction';
+import CourseStatusHeader from '../../components/course/CourseStatusHeader';
+import { PROGRESS_STATUS } from '../../constants/enums';
+import { COURSE_OVERVIEW_VIEWED } from '../../constants/events';
+import { useTypedSelector } from '../../hooks/store';
+import { rowStyle } from '../../styles/common';
+import { courseIsLiveNow, courseIsLiveSoon } from '../../utils/courseLiveStatus';
+import { determineCourseProgress } from '../../utils/courseProgress';
+import hasAccessToPage from '../../utils/hasAccessToPage';
+import { getEventUserData, logEvent } from '../../utils/logEvent';
+import { RichTextOptions } from '../../utils/richText';
+
+const containerStyle = {
+  backgroundColor: 'secondary.light',
+} as const;
+
+const sessionsContainerStyle = {
+  marginTop: 6,
+} as const;
+
+const cardsContainerStyle = {
+  ...rowStyle,
+  flexDirection: { xs: 'column', md: 'row' },
+  gap: 4,
+} as const;
+
+export interface StoryblokCoursePageProps {
+  storyId: number;
+  _uid: string;
+  _editable: string;
+  name: string;
+  description: ISbRichtext;
+  image: { filename: string; alt: string };
+  image_with_background: { filename: string; alt: string };
+  video: { url: string };
+  video_transcript: ISbRichtext;
+  weeks: { name: string; sessions: any }[]; // TODO: replace type with StoryblokSessionPageProps
+  included_for_partners: string[];
+  coming_soon: boolean;
+  coming_soon_content: ISbRichtext;
+  live_start_date: string;
+  live_end_date: string;
+  live_soon_content: ISbRichtext;
+  live_now_content: ISbRichtext;
+}
+
+const StoryblokCoursePage = (props: StoryblokCoursePageProps) => {
+  const {
+    storyId,
+    _uid,
+    _editable,
+    name,
+    description,
+    image,
+    image_with_background,
+    video,
+    video_transcript,
+    weeks,
+    included_for_partners,
+    coming_soon,
+    coming_soon_content,
+    live_start_date,
+    live_end_date,
+    live_soon_content,
+    live_now_content,
+  } = props;
+
+  const t = useTranslations('Courses');
+  const userCreatedAt = useTypedSelector((state) => state.user.createdAt);
+  const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
+  const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
+  const courses = useTypedSelector((state) => state.courses);
+
+  const [incorrectAccess, setIncorrectAccess] = useState<boolean>(true);
+  const [courseProgress, setCourseProgress] = useState<PROGRESS_STATUS>(
+    PROGRESS_STATUS.NOT_STARTED,
+  );
+
+  useEffect(() => {
+    const storyPartners = included_for_partners;
+
+    setIncorrectAccess(!hasAccessToPage(storyPartners, partnerAccesses, partnerAdmin));
+  }, [partnerAccesses, partnerAdmin, included_for_partners]);
+
+  useEffect(() => {
+    setCourseProgress(determineCourseProgress(courses, storyId));
+  }, [courses, storyId]);
+
+  useEffect(() => {
+    logEvent(COURSE_OVERVIEW_VIEWED, eventData);
+  });
+
+  const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);
+
+  const courseComingSoon: boolean = coming_soon;
+  const courseLiveSoon: boolean = courseIsLiveSoon({
+    live_start_date,
+    live_end_date,
+    coming_soon,
+    live_soon_content,
+  });
+  const courseLiveNow: boolean = courseIsLiveNow({
+    live_start_date,
+    live_end_date,
+    coming_soon,
+    live_now_content,
+  });
+  // only show live content to public users
+  const liveCourseAccess = partnerAccesses.length === 0 && !partnerAdmin.id;
+
+  const eventData = {
+    ...eventUserData,
+    course_name: name,
+    course_storyblok_id: storyId,
+    course_coming_soon: courseComingSoon,
+    course_live_soon: courseLiveSoon,
+    course_live_now: courseLiveNow,
+    course_progress: courseProgress,
+  };
+
+  if (incorrectAccess) {
+    return (
+      <ContentUnavailable
+        title={t('accessGuard.title')}
+        message={t.rich('accessGuard.introduction', {
+          contactLink: (children) => <Link href="/courses">{children}</Link>,
+        })}
+      />
+    );
+  }
+
+  return (
+    <Box
+      {...storyblokEditable({
+        _uid,
+        _editable,
+        name,
+        description,
+        image,
+        image_with_background,
+        video,
+        video_transcript,
+        weeks,
+        included_for_partners,
+        coming_soon,
+        coming_soon_content,
+        live_start_date,
+        live_end_date,
+        live_soon_content,
+        live_now_content,
+      })}
+    >
+      <Head>
+        <title>{name}</title>
+      </Head>
+      <CourseHeader
+        name={name}
+        description={description}
+        image_with_background={image_with_background}
+        eventData={eventData}
+        courseProgress={courseProgress}
+      />
+      <Container sx={containerStyle}>
+        {courseComingSoon ? (
+          <>
+            {liveCourseAccess && courseLiveSoon ? (
+              <Box maxWidth={700}>
+                <CourseStatusHeader status="liveSoon" />
+                {render(live_soon_content, RichTextOptions)}
+              </Box>
+            ) : (
+              <Box maxWidth={700}>
+                <CourseStatusHeader status="comingSoon" />
+                {render(coming_soon_content, RichTextOptions)}
+              </Box>
+            )}
+          </>
+        ) : (
+          <>
+            {video && (
+              <CourseIntroduction
+                video={video}
+                name={name}
+                video_transcript={video_transcript}
+                live_soon_content={live_soon_content}
+                live_now_content={live_now_content}
+                eventData={eventData}
+                courseLiveSoon={courseLiveSoon}
+                courseLiveNow={courseLiveNow}
+                liveCourseAccess={liveCourseAccess}
+              />
+            )}
+            <Box sx={sessionsContainerStyle}>
+              {weeks.map((week: any) => {
+                return (
+                  <Box mb={6} key={week.name.split(':')[0]}>
+                    <Typography mb={{ xs: 0, md: 3.5 }} key={week.name} component="h2" variant="h2">
+                      {week.name}
+                    </Typography>
+                    <Box sx={cardsContainerStyle}>
+                      {week.sessions.map((session: any) => {
+                        const position = `${t('session')} ${session.position / 10 - 1}`;
+
+                        return (
+                          <SessionCard
+                            key={session.id}
+                            session={session}
+                            sessionSubtitle={position}
+                            storyblokCourseId={storyId}
+                          />
+                        );
+                      })}
+                    </Box>
+                  </Box>
+                );
+              })}
+            </Box>
+          </>
+        )}
+      </Container>
+    </Box>
+  );
+};
+
+export default StoryblokCoursePage;
diff --git a/components/storyblok/StoryblokFaqs.tsx b/components/storyblok/StoryblokFaqs.tsx
index d720412e..b9fc47bd 100644
--- a/components/storyblok/StoryblokFaqs.tsx
+++ b/components/storyblok/StoryblokFaqs.tsx
@@ -1,9 +1,9 @@
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { Accordion, AccordionDetails, AccordionSummary, Box, Typography } from '@mui/material';
+import { ISbRichtext, storyblokEditable } from '@storyblok/react';
 import Image from 'next/legacy/image';
 import { render } from 'storyblok-rich-text-react-renderer';
 import { FAQ_OPENED } from '../../constants/events';
-import { FaqItem } from '../../constants/faqs';
 import illustrationLeafMix from '../../public/illustration_leaf_mix.svg';
 import logEvent from '../../utils/logEvent';
 import { RichTextOptions } from '../../utils/richText';
@@ -17,13 +17,20 @@ const accordionDetail = {
   textAlign: 'left',
 } as const;
 
+interface StoryblokFaqItem {
+  title: ISbRichtext;
+  body: ISbRichtext;
+}
+
 interface StoryblokFaqsProps {
-  faqs: Array<FaqItem>;
+  _uid: string;
+  _editable: string;
+  faqs: Array<StoryblokFaqItem>;
   title: string;
 }
 
 const StoryblokFaqs = (props: StoryblokFaqsProps) => {
-  const { faqs, title } = props;
+  const { _uid, _editable, faqs, title } = props;
 
   const handleChange =
     (faqTitle: string) => (_event: React.SyntheticEvent, isExpanded: boolean) => {
@@ -33,7 +40,7 @@ const StoryblokFaqs = (props: StoryblokFaqsProps) => {
     };
 
   return (
-    <Box sx={containerStyle}>
+    <Box sx={containerStyle} {...storyblokEditable({ _uid, _editable, faqs, title })}>
       <Typography variant="h2" mb={2} textAlign="center">
         {title}
       </Typography>
@@ -41,7 +48,10 @@ const StoryblokFaqs = (props: StoryblokFaqsProps) => {
         <Image alt={'alt'} src={illustrationLeafMix} width={125} height={100} />
       </Box>
       {faqs.map((faq, i) => (
-        <Accordion key={`panel${i}`} onChange={handleChange(faq.title)}>
+        <Accordion
+          key={`panel${i}`}
+          onChange={handleChange(faq.title.text || 'Error loading title')}
+        >
           <AccordionSummary
             expandIcon={<ExpandMoreIcon />}
             aria-controls={`panel${i}-content`}
diff --git a/components/storyblok/StoryblokImage.tsx b/components/storyblok/StoryblokImage.tsx
index b05b4954..debb2954 100644
--- a/components/storyblok/StoryblokImage.tsx
+++ b/components/storyblok/StoryblokImage.tsx
@@ -1,15 +1,18 @@
 import { Box } from '@mui/system';
+import { storyblokEditable } from '@storyblok/react';
 import Image from 'next/legacy/image';
 import { richtextContentStyle } from '../../styles/common';
 
 interface StoryblokImageProps {
+  _uid: string;
+  _editable: string;
   image: { filename: string; alt: string };
   size: string;
   alignment: string;
 }
 
 const StoryblokImage = (props: StoryblokImageProps) => {
-  const { image, size = 'extra-large', alignment = 'left' } = props;
+  const { _uid, _editable, image, size = 'extra-large', alignment = 'left' } = props;
 
   if (!image || !image.filename) return <></>;
 
@@ -18,23 +21,23 @@ const StoryblokImage = (props: StoryblokImageProps) => {
       size === 'extra-small'
         ? { xs: 40, md: 80 }
         : size === 'small'
-        ? { xs: 120, md: 160 }
-        : size === 'medium'
-        ? { xs: 200, md: 250 }
-        : size === 'large'
-        ? { xs: 400, md: 480 }
-        : '100%',
+          ? { xs: 120, md: 160 }
+          : size === 'medium'
+            ? { xs: 200, md: 250 }
+            : size === 'large'
+              ? { xs: 400, md: 480 }
+              : '100%',
     maxWidth: '100%',
     marginY:
       size === 'extra-small'
         ? 2
         : size === 'small'
-        ? 3
-        : size === 'medium'
-        ? 4
-        : size === 'large'
-        ? 5
-        : 6,
+          ? 3
+          : size === 'medium'
+            ? 4
+            : size === 'large'
+              ? 5
+              : 6,
     marginLeft: alignment === 'center' || alignment === 'right' ? 'auto' : 0,
     marginRight: alignment === 'center' ? 'auto' : 0,
 
@@ -53,7 +56,10 @@ const StoryblokImage = (props: StoryblokImageProps) => {
   } as const;
 
   return (
-    <Box sx={imageContainerStyle}>
+    <Box
+      {...storyblokEditable({ _uid, _editable, image, size, alignment })}
+      sx={imageContainerStyle}
+    >
       <Image src={image.filename} alt={image.alt} layout="fill" className="image"></Image>
     </Box>
   );
diff --git a/components/storyblok/StoryblokMeetTheTeamPage.tsx b/components/storyblok/StoryblokMeetTheTeamPage.tsx
new file mode 100644
index 00000000..1d7b5c35
--- /dev/null
+++ b/components/storyblok/StoryblokMeetTheTeamPage.tsx
@@ -0,0 +1,189 @@
+import { Box, Container, Typography } from '@mui/material';
+import { ISbRichtext, storyblokEditable } from '@storyblok/react';
+import Head from 'next/head';
+import { useEffect } from 'react';
+import { render } from 'storyblok-rich-text-react-renderer';
+import Header from '../../components/layout/Header';
+import StoryblokTeamMemberCard, {
+  StoryblokTeamMemberCardProps,
+} from '../../components/storyblok/StoryblokTeamMemberCard';
+import { MEET_THE_TEAM_VIEWED } from '../../constants/events';
+import { useTypedSelector } from '../../hooks/store';
+import { columnStyle, rowStyle } from '../../styles/common';
+import logEvent, { getEventUserData } from '../../utils/logEvent';
+import { RichTextOptions } from '../../utils/richText';
+import StoryblokPageSection, { StoryblokPageSectionProps } from './StoryblokPageSection';
+
+const coreContainerStyle = {
+  backgroundColor: 'secondary.light',
+} as const;
+
+const supportingContainerStyle = {
+  backgroundColor: 'primary.light',
+} as const;
+
+const cardColumnStyle = {
+  ...columnStyle,
+  justifyContent: 'flex-start',
+  width: { xs: '100%', sm: 'calc(50% - 1rem)' },
+  gap: { xs: 0, sm: 2, md: 4 },
+} as const;
+
+const cardColumnRowStyle = {
+  ...rowStyle,
+  marginTop: { xs: 2, md: 5 },
+} as const;
+
+export interface StoryblokMeetTheTeamPageProps {
+  _uid: string;
+  _editable: string;
+  title: string;
+  description: string;
+  header_image: { filename: string; alt: string };
+  core_team_title: string;
+  core_team_description: ISbRichtext;
+  core_team_members: StoryblokTeamMemberCardProps[];
+  supporting_team_title: string;
+  supporting_team_description: ISbRichtext;
+  supporting_team_members: StoryblokTeamMemberCardProps[];
+  page_section_1: StoryblokPageSectionProps[];
+  page_section_2: StoryblokPageSectionProps[];
+  page_section_3: StoryblokPageSectionProps[];
+}
+
+const StoryblokMeetTheTeamPage = (props: StoryblokMeetTheTeamPageProps) => {
+  const {
+    _uid,
+    _editable,
+    title,
+    description,
+    header_image,
+    core_team_title,
+    core_team_description,
+    core_team_members,
+    supporting_team_title,
+    supporting_team_description,
+    supporting_team_members,
+    page_section_1,
+    page_section_2,
+    page_section_3,
+  } = props;
+
+  const userCreatedAt = useTypedSelector((state) => state.user.createdAt);
+  const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
+  const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
+  const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);
+
+  useEffect(() => {
+    logEvent(MEET_THE_TEAM_VIEWED, eventUserData);
+  });
+
+  const headerProps = {
+    title: title,
+    introduction: description,
+    imageSrc: header_image.filename,
+    translatedImageAlt: header_image.alt,
+  };
+
+  return (
+    <Box
+      {...storyblokEditable({
+        _uid,
+        _editable,
+        title,
+        description,
+        header_image,
+        core_team_title,
+        core_team_description,
+        core_team_members,
+        supporting_team_title,
+        supporting_team_description,
+        supporting_team_members,
+        page_section_1,
+        page_section_2,
+        page_section_3,
+      })}
+    >
+      <Head>
+        <title>{headerProps.title}</title>
+      </Head>
+      <Header
+        title={headerProps.title}
+        introduction={headerProps.introduction}
+        imageSrc={headerProps.imageSrc}
+        translatedImageAlt={headerProps.translatedImageAlt}
+      />
+      {page_section_1?.length > 0 && <StoryblokPageSection {...page_section_1[0]} />}
+      <Container sx={coreContainerStyle}>
+        <Typography variant="h2" component="h2">
+          {core_team_title}
+        </Typography>
+        {core_team_description &&
+          // this was clearly expecting a string in the code but it was causing an error because an object was coming through from storyblok.
+          // This is a patch to help with release but should be readdressed
+          typeof core_team_description === 'string' && (
+            <Typography maxWidth={650}>{core_team_description}</Typography>
+          )}
+        <Box sx={cardColumnRowStyle}>
+          <Box sx={cardColumnStyle}>
+            {core_team_members.map((teamMember, index) => {
+              if (index % 2 === 1) return;
+              return (
+                <StoryblokTeamMemberCard
+                  key={`${teamMember.name}_team_member`}
+                  {...teamMember}
+                  alwaysOpen={true}
+                />
+              );
+            })}
+          </Box>
+          <Box sx={cardColumnStyle}>
+            {core_team_members.map((teamMember, index) => {
+              if (index % 2 === 0) return;
+              return (
+                <StoryblokTeamMemberCard
+                  key={`${teamMember.name}_team_member`}
+                  {...teamMember}
+                  alwaysOpen={true}
+                />
+              );
+            })}
+          </Box>
+        </Box>
+      </Container>
+
+      {page_section_2?.length > 0 && <StoryblokPageSection {...page_section_2[0]} />}
+
+      <Container sx={supportingContainerStyle}>
+        <Typography variant="h2" component="h2">
+          {supporting_team_title}
+        </Typography>
+        {supporting_team_description && (
+          <Box maxWidth={650}>{render(supporting_team_description, RichTextOptions)}</Box>
+        )}
+        <Box sx={cardColumnRowStyle}>
+          <Box sx={cardColumnStyle}>
+            {supporting_team_members.map((teamMember: any, index: number) => {
+              if (index % 2 === 1) return;
+              return (
+                <StoryblokTeamMemberCard key={`${teamMember.name}_team_member`} {...teamMember} />
+              );
+            })}
+          </Box>
+          <Box sx={cardColumnStyle}>
+            {supporting_team_members.map((teamMember: any, index: number) => {
+              if (index % 2 === 0) return;
+              return (
+                <StoryblokTeamMemberCard key={`${teamMember.name}_team_member`} {...teamMember} />
+              );
+            })}
+          </Box>
+        </Box>
+      </Container>
+
+      {page_section_3?.length > 0 && <StoryblokPageSection {...page_section_3[0]} />}
+    </Box>
+  );
+};
+
+export default StoryblokMeetTheTeamPage;
diff --git a/components/storyblok/StoryblokPage.tsx b/components/storyblok/StoryblokPage.tsx
new file mode 100644
index 00000000..893d6511
--- /dev/null
+++ b/components/storyblok/StoryblokPage.tsx
@@ -0,0 +1,57 @@
+import { ISbRichtext, storyblokEditable } from '@storyblok/react';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import { SignUpBanner } from '../../components/banner/SignUpBanner';
+import Header from '../../components/layout/Header';
+import StoryblokPageSection from '../../components/storyblok/StoryblokPageSection';
+import { useTypedSelector } from '../../hooks/store';
+import { StoryblokPageSectionProps } from './StoryblokPageSection';
+
+export interface StoryblokPageProps {
+  _uid: string;
+  _editable: string;
+  title: string;
+  description: ISbRichtext;
+  header_image: { filename: string; alt: string };
+  page_sections: StoryblokPageSectionProps[];
+}
+
+const StoryblokPage = (props: StoryblokPageProps) => {
+  const { _uid, _editable, title, description, header_image, page_sections } = props;
+
+  const userToken = useTypedSelector((state) => state.user.token);
+  const router = useRouter();
+
+  const headerProps = {
+    title: title,
+    introduction: description,
+    imageSrc: header_image?.filename,
+    translatedImageAlt: header_image?.alt,
+  };
+  const partiallyPublicPages = ['/activities', '/grounding'];
+  const isPartiallyPublicPage = partiallyPublicPages.includes(router.asPath);
+
+  return (
+    <>
+      <Head>{title}</Head>
+      <main
+        {...storyblokEditable({ _uid, _editable, title, description, header_image, page_sections })}
+      >
+        <Header
+          title={headerProps.title}
+          introduction={headerProps.introduction}
+          imageSrc={headerProps.imageSrc}
+          translatedImageAlt={headerProps.translatedImageAlt}
+        />
+        {!userToken && isPartiallyPublicPage && <SignUpBanner />}
+        {userToken &&
+          page_sections?.length > 0 &&
+          page_sections.map((section: StoryblokPageSectionProps, index: number) => (
+            <StoryblokPageSection key={`page_section_${index}`} {...section} />
+          ))}
+      </main>
+    </>
+  );
+};
+
+export default StoryblokPage;
diff --git a/components/storyblok/StoryblokPageSection.tsx b/components/storyblok/StoryblokPageSection.tsx
index 0897f59c..79b20a4a 100644
--- a/components/storyblok/StoryblokPageSection.tsx
+++ b/components/storyblok/StoryblokPageSection.tsx
@@ -1,23 +1,29 @@
+import { Box } from '@mui/material';
+import { ISbRichtext, storyblokEditable } from '@storyblok/react';
 import { render } from 'storyblok-rich-text-react-renderer';
 import { STORYBLOK_COLORS } from '../../constants/enums';
 import { RichTextOptions } from '../../utils/richText';
 import PageSection from '../common/PageSection';
 
-interface StoryblokPageSectionProps {
-  content: AnalyserNode;
+export interface StoryblokPageSectionProps {
+  _uid: string;
+  _editable: string;
+  content: ISbRichtext;
   color: STORYBLOK_COLORS;
   alignment: string;
 }
 
 const StoryblokPageSection = (props: StoryblokPageSectionProps) => {
-  const { content, color, alignment } = props;
+  const { _uid, _editable, content, color, alignment } = props;
 
   if (!content) return <></>;
 
   return (
-    <PageSection color={color} alignment={alignment}>
-      {render(content, RichTextOptions)}
-    </PageSection>
+    <Box {...storyblokEditable({ _uid, _editable, content, color, alignment })}>
+      <PageSection color={color} alignment={alignment}>
+        {render(content, RichTextOptions)}
+      </PageSection>
+    </Box>
   );
 };
 
diff --git a/components/storyblok/StoryblokQuote.tsx b/components/storyblok/StoryblokQuote.tsx
index b9eee9ac..43b79ff0 100644
--- a/components/storyblok/StoryblokQuote.tsx
+++ b/components/storyblok/StoryblokQuote.tsx
@@ -1,22 +1,37 @@
 import { Box } from '@mui/system';
-import { Richtext } from 'storyblok-js-client';
+import { ISbRichtext, storyblokEditable } from '@storyblok/react';
+import Image from 'next/image';
 import Quote from '../common/Quote';
-import StoryblokImage from './StoryblokImage';
+
+const imageContainerStyle = {
+  marginX: 'auto',
+  marginY: 4,
+  width: { xs: 200, md: 250 },
+  '.image': {
+    objectFit: 'contain',
+    width: '100% !important',
+    position: 'relative !important',
+    height: 'unset !important',
+  },
+};
 
 export interface StoryblokQuoteProps {
-  text: Richtext;
+  _uid: string;
+  _editable: string;
+  text: ISbRichtext;
   text_size: string;
   icon_color: string;
   image?: { alt: string; filename: string };
 }
 
 const StoryblokQuote = (props: StoryblokQuoteProps) => {
-  const { text, text_size, icon_color = 'primary.dark', image } = props;
+  const { _uid, _editable, text, text_size, icon_color = 'primary.dark', image } = props;
 
   if (!text) return <></>;
 
   return (
     <Box
+      {...storyblokEditable({ _uid, _editable, text, text_size, icon_color, image })}
       sx={{
         display: 'flex',
         flexDirection: { xs: 'column', md: 'row' },
@@ -26,8 +41,8 @@ const StoryblokQuote = (props: StoryblokQuoteProps) => {
       }}
     >
       {image && (
-        <Box>
-          <StoryblokImage image={image} alignment="center" size="medium" />
+        <Box sx={imageContainerStyle}>
+          <Image src={image.filename} alt={image.alt} layout="fill" className="image" />
         </Box>
       )}
       <Quote text={text} textSize={text_size} iconColor={icon_color} />
diff --git a/components/storyblok/StoryblokRow.tsx b/components/storyblok/StoryblokRow.tsx
index ecebbc88..2144a797 100644
--- a/components/storyblok/StoryblokRow.tsx
+++ b/components/storyblok/StoryblokRow.tsx
@@ -1,4 +1,5 @@
-import { Richtext } from 'storyblok-js-client';
+import { Box } from '@mui/material';
+import { ISbRichtext, storyblokEditable } from '@storyblok/react';
 import { render } from 'storyblok-rich-text-react-renderer';
 import { RichTextOptions } from '../../utils/richText';
 import Column from '../common/Column';
@@ -6,13 +7,15 @@ import Row from '../common/Row';
 import { StoryblokBlok, StoryblokColumn } from './StoryblokTypes';
 
 interface StoryblokRowProps {
-  columns: StoryblokColumn | StoryblokColumn[] | Richtext;
+  _uid: string;
+  _editable: string;
+  columns: StoryblokColumn | StoryblokColumn[] | ISbRichtext;
   horizontal_alignment: string;
   vertical_alignment: string;
 }
 
 const StoryblokRow = (props: StoryblokRowProps) => {
-  const { columns, horizontal_alignment, vertical_alignment } = props;
+  const { _uid, _editable, columns, horizontal_alignment, vertical_alignment } = props;
 
   const columnArray = Array.isArray(columns) ? columns : [columns];
 
@@ -58,13 +61,17 @@ const StoryblokRow = (props: StoryblokRowProps) => {
     });
   });
   return (
-    <Row
-      numberOfColumns={numberOfColumns}
-      horizontalAlignment={horizontal_alignment}
-      verticalAlignment={vertical_alignment}
+    <Box
+      {...storyblokEditable({ _uid, _editable, columns, horizontal_alignment, vertical_alignment })}
     >
-      {renderedColumns}
-    </Row>
+      <Row
+        numberOfColumns={numberOfColumns}
+        horizontalAlignment={horizontal_alignment}
+        verticalAlignment={vertical_alignment}
+      >
+        {renderedColumns}
+      </Row>
+    </Box>
   );
 };
 
diff --git a/components/storyblok/StoryblokRowColumnBlock.tsx b/components/storyblok/StoryblokRowColumnBlock.tsx
index 3be3ca5a..a239264c 100644
--- a/components/storyblok/StoryblokRowColumnBlock.tsx
+++ b/components/storyblok/StoryblokRowColumnBlock.tsx
@@ -1,3 +1,5 @@
+import { Box } from '@mui/material';
+import { storyblokEditable } from '@storyblok/react';
 import { render } from 'storyblok-rich-text-react-renderer';
 import { RichTextOptions } from '../../utils/richText';
 import Column from '../common/Column';
@@ -17,6 +19,8 @@ import { StoryblokColumn } from './StoryblokTypes';
  */
 
 interface StoryblokRowColumnBlockProps {
+  _uid: string;
+  _editable: string;
   columns: StoryblokColumn[];
   horizontal_alignment: string;
   vertical_alignment: string;
@@ -24,25 +28,40 @@ interface StoryblokRowColumnBlockProps {
 }
 
 const StoryblokRowColumnBlock = (props: StoryblokRowColumnBlockProps) => {
-  const { columns, horizontal_alignment, vertical_alignment, gap } = props;
+  const { _uid, _editable, columns, horizontal_alignment, vertical_alignment, gap } = props;
 
   if (!columns) return <></>;
 
   return (
-    <Row
-      numberOfColumns={columns.length}
-      verticalAlignment={vertical_alignment}
-      horizontalAlignment={horizontal_alignment}
-      gap={gap}
-    >
-      {columns.map((column: any, index: number) => {
-        return (
-          <Column width={column.width} horizontalAlignment={column.horizontal_alignment} key={`row_column_${index}_${Math.random() * 100}`}>
-            {render(column.content, RichTextOptions)}
-          </Column>
-        );
+    <Box
+      {...storyblokEditable({
+        _uid,
+        _editable,
+        columns,
+        horizontal_alignment,
+        vertical_alignment,
+        gap,
       })}
-    </Row>
+    >
+      <Row
+        numberOfColumns={columns.length}
+        verticalAlignment={vertical_alignment}
+        horizontalAlignment={horizontal_alignment}
+        gap={gap}
+      >
+        {columns.map((column: any, index: number) => {
+          return (
+            <Column
+              width={column.width}
+              horizontalAlignment={column.horizontal_alignment}
+              key={`row_column_${index}_${Math.random() * 100}`}
+            >
+              {render(column.content, RichTextOptions)}
+            </Column>
+          );
+        })}
+      </Row>
+    </Box>
   );
 };
 
diff --git a/components/storyblok/StoryblokSessionIbaPage.tsx b/components/storyblok/StoryblokSessionIbaPage.tsx
new file mode 100644
index 00000000..60de68a1
--- /dev/null
+++ b/components/storyblok/StoryblokSessionIbaPage.tsx
@@ -0,0 +1,380 @@
+import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';
+import CircleIcon from '@mui/icons-material/Circle';
+import SlowMotionVideoIcon from '@mui/icons-material/SlowMotionVideo';
+import StarBorderIcon from '@mui/icons-material/StarBorder';
+import { Box, Button, Container, Link as MuiLink, Typography } from '@mui/material';
+import { ISbRichtext, ISbStoryData, storyblokEditable } from '@storyblok/react';
+import { useTranslations } from 'next-intl';
+import Head from 'next/head';
+import { useEffect, useState } from 'react';
+import { render } from 'storyblok-rich-text-react-renderer';
+import { useStartSessionMutation } from '../../app/api';
+import { Course, Session } from '../../app/coursesSlice';
+import { PROGRESS_STATUS } from '../../constants/enums';
+import {
+  SESSION_STARTED_ERROR,
+  SESSION_STARTED_REQUEST,
+  SESSION_STARTED_SUCCESS,
+  SESSION_VIDEO_TRANSCRIPT_CLOSED,
+  SESSION_VIDEO_TRANSCRIPT_OPENED,
+  SESSION_VIEWED,
+} from '../../constants/events';
+import { useTypedSelector } from '../../hooks/store';
+import illustrationPerson4Peach from '../../public/illustration_person4_peach.svg';
+import { columnStyle } from '../../styles/common';
+import hasAccessToPage from '../../utils/hasAccessToPage';
+import logEvent, { getEventUserData } from '../../utils/logEvent';
+import { RichTextOptions } from '../../utils/richText';
+import SessionContentCard from '../cards/SessionContentCard';
+import { Dots } from '../common/Dots';
+import Link from '../common/Link';
+import CrispButton from '../crisp/CrispButton';
+import Header from '../layout/Header';
+import MultipleBonusContent, { BonusContent } from '../session/MultipleBonusContent';
+import { SessionCompleteButton } from '../session/SessionCompleteButton';
+import Video from '../video/Video';
+import VideoTranscriptModal from '../video/VideoTranscriptModal';
+
+const containerStyle = {
+  backgroundColor: 'secondary.light',
+} as const;
+
+const cardColumnStyle = {
+  ...columnStyle,
+  alignItems: 'center',
+  gap: { xs: 2, md: 3 },
+} as const;
+
+const dotsStyle = {
+  ...columnStyle,
+  color: 'primary.dark',
+  gap: { xs: 1, md: 1.25 },
+} as const;
+
+const dotStyle = {
+  width: { xs: 8, md: 10 },
+  height: { xs: 8, md: 10 },
+} as const;
+
+const sessionSubtitleStyle = {
+  marginTop: '0.75rem !important',
+} as const;
+
+const crispButtonContainerStyle = {
+  paddingTop: 4,
+  paddingBottom: 1,
+  display: 'flex',
+} as const;
+
+const chatDetailIntroStyle = { marginTop: 3, marginBottom: 1.5 } as const;
+
+export interface StoryblokSessionIbaPageProps {
+  storyId: number;
+  storyUuid: string;
+  storyPosition: number;
+  _uid: string;
+  _editable: string;
+  course: ISbStoryData;
+  name: string;
+  subtitle: string;
+  description: string;
+  video: { url: string };
+  video_transcript: ISbRichtext;
+  video_outro: ISbRichtext;
+  activity: ISbRichtext;
+  bonus: BonusContent[];
+}
+
+const StoryblokSessionIbaPage = (props: StoryblokSessionIbaPageProps) => {
+  const {
+    storyId,
+    storyUuid,
+    storyPosition,
+    _uid,
+    _editable,
+    course,
+    name,
+    subtitle,
+    description,
+    video,
+    video_transcript,
+    video_outro,
+    activity,
+    bonus,
+  } = props;
+
+  const t = useTranslations('Courses');
+
+  const userCreatedAt = useTypedSelector((state) => state.user.createdAt);
+  const userEmail = useTypedSelector((state) => state.user.email);
+  const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
+  const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
+  const courses = useTypedSelector((state) => state.courses);
+
+  const [incorrectAccess, setIncorrectAccess] = useState<boolean>(true);
+  const [liveChatAccess, setLiveChatAccess] = useState<boolean>(false);
+  const [sessionProgress, setSessionProgress] = useState<PROGRESS_STATUS>(
+    PROGRESS_STATUS.NOT_STARTED,
+  );
+  const [openTranscriptModal, setOpenTranscriptModal] = useState<boolean | null>(null);
+  const [videoStarted, setVideoStarted] = useState<boolean>(false);
+  const [weekString, setWeekString] = useState<string>('');
+  const [startSession] = useStartSessionMutation();
+
+  // TODO refactor chat access logic
+  useEffect(() => {
+    const coursePartners = course.content.included_for_partners;
+    setIncorrectAccess(!hasAccessToPage(coursePartners, partnerAccesses, partnerAdmin));
+
+    const liveAccess = partnerAccesses.find(
+      (partnerAccess) => partnerAccess.featureLiveChat === true,
+    );
+
+    if (liveAccess) setLiveChatAccess(true);
+  }, [partnerAccesses, course.content.included_for_partners, partnerAdmin]);
+
+  // TODO refactor session completion logic
+  useEffect(() => {
+    course.content.weeks.map((week: any) => {
+      week.sessions.map((session: any) => {
+        session === storyUuid && setWeekString(week.name);
+      });
+    });
+
+    const userCourse = courses.find((c: Course) => Number(c.storyblokId) === course.id);
+
+    if (userCourse) {
+      const userSession = userCourse.sessions.find(
+        (session: Session) => Number(session.storyblokId) === storyId,
+      );
+
+      if (userSession) {
+        userSession.completed
+          ? setSessionProgress(PROGRESS_STATUS.COMPLETED)
+          : setSessionProgress(PROGRESS_STATUS.STARTED);
+      }
+    }
+  }, [courses, course.content.weeks, storyId, course.id, storyUuid]);
+
+  useEffect(() => {
+    if (openTranscriptModal === null) return;
+
+    logEvent(
+      openTranscriptModal ? SESSION_VIDEO_TRANSCRIPT_OPENED : SESSION_VIDEO_TRANSCRIPT_CLOSED,
+      {
+        ...eventData,
+        session_name: name,
+        course_name: name,
+      },
+    );
+    if (openTranscriptModal && sessionProgress === PROGRESS_STATUS.NOT_STARTED) {
+      callStartSession();
+    }
+  }, [openTranscriptModal]);
+
+  useEffect(() => {
+    if (!videoStarted || sessionProgress !== PROGRESS_STATUS.NOT_STARTED) return;
+
+    if (videoStarted) {
+      callStartSession();
+    }
+  }, [videoStarted]);
+
+  useEffect(() => {
+    logEvent(SESSION_VIEWED, eventData);
+  });
+
+  const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);
+
+  const eventData = {
+    ...eventUserData,
+    session_name: name,
+    session_storyblok_id: storyId,
+    session_progress: sessionProgress,
+    course_name: course.content.name,
+    course_storyblok_id: course.id,
+  };
+
+  const headerProps = {
+    title: name,
+    introduction: description,
+    imageSrc: illustrationPerson4Peach,
+    imageAlt: 'alt.personTea',
+  };
+
+  async function callStartSession() {
+    logEvent(SESSION_STARTED_REQUEST, {
+      ...eventData,
+      session_name: name,
+      course_name: name,
+    });
+
+    const startSessionResponse = await startSession({
+      storyblokId: storyId,
+    });
+
+    if ('data' in startSessionResponse) {
+      logEvent(SESSION_STARTED_SUCCESS, eventData);
+    }
+
+    if ('error' in startSessionResponse) {
+      const error = startSessionResponse.error;
+
+      logEvent(SESSION_STARTED_ERROR, eventData);
+      (window as any).Rollbar?.error('Session started error', error);
+
+      throw error;
+    }
+  }
+
+  return (
+    <Box
+      {...storyblokEditable({
+        _uid,
+        _editable,
+        course,
+        name,
+        subtitle,
+        description,
+        video,
+        video_transcript,
+        video_outro,
+        activity,
+        bonus,
+      })}
+    >
+      <Head>
+        <title>{name}</title>
+      </Head>
+      {incorrectAccess ? (
+        <Container sx={containerStyle}></Container>
+      ) : (
+        <Box>
+          <Header
+            title={headerProps.title}
+            introduction={headerProps.introduction}
+            imageSrc={headerProps.imageSrc}
+            imageAlt={headerProps.imageAlt}
+            progressStatus={sessionProgress}
+          >
+            <Button variant="outlined" href="/courses" size="small" component={Link}>
+              Courses
+            </Button>
+
+            <CircleIcon color="error" sx={{ ...dotStyle, marginX: 1 }} />
+
+            <Button variant="outlined" href={`/${course.full_slug}`} size="small" component={Link}>
+              {course.name}
+            </Button>
+            <Typography sx={sessionSubtitleStyle} variant="body2">
+              {weekString} - {subtitle}
+            </Typography>
+          </Header>
+          <Box sx={containerStyle}>
+            <Box sx={cardColumnStyle}>
+              {video && (
+                <>
+                  <SessionContentCard
+                    title={t('sessionDetail.videoTitle')}
+                    titleIcon={SlowMotionVideoIcon}
+                    eventPrefix="SESSION_VIDEO"
+                    eventData={eventData}
+                    initialExpanded={true}
+                  >
+                    <Typography mb={3}>
+                      {t.rich('sessionDetail.videoDescription', {
+                        transcriptLink: (children) => (
+                          <MuiLink
+                            component="button"
+                            variant="body1"
+                            onClick={() => setOpenTranscriptModal(true)}
+                          >
+                            {children}
+                          </MuiLink>
+                        ),
+                      })}
+                    </Typography>
+                    <Video
+                      url={video.url}
+                      setVideoStarted={setVideoStarted}
+                      eventData={eventData}
+                      eventPrefix="SESSION"
+                      containerStyles={{ mx: 'auto', my: 2 }}
+                    />
+                    <VideoTranscriptModal
+                      videoName={name}
+                      content={video_transcript}
+                      setOpenTranscriptModal={setOpenTranscriptModal}
+                      openTranscriptModal={openTranscriptModal}
+                    />
+                  </SessionContentCard>
+                </>
+              )}
+              {activity.content &&
+                (activity.content?.length > 1 || activity.content[0].content) && (
+                  <>
+                    <Dots />
+                    <SessionContentCard
+                      title={t('sessionDetail.activityTitle')}
+                      titleIcon={StarBorderIcon}
+                      richtextContent
+                      eventPrefix="SESSION_ACTIVITY"
+                      eventData={eventData}
+                    >
+                      <>{render(activity, RichTextOptions)}</>
+                    </SessionContentCard>
+                  </>
+                )}
+              {bonus && <MultipleBonusContent bonus={bonus} eventData={eventData} />}
+              {liveChatAccess && (
+                <>
+                  <Dots />
+                  <SessionContentCard
+                    title={t('sessionDetail.chat.title')}
+                    titleIcon={ChatBubbleOutlineIcon}
+                    titleIconSize={24}
+                    eventPrefix="SESSION_CHAT"
+                    eventData={eventData}
+                  >
+                    <Typography paragraph>{t('sessionDetail.chat.description')}</Typography>
+                    <Typography paragraph>{t('sessionDetail.chat.videoIntro')}</Typography>
+                    <Video
+                      eventPrefix="SESSION_CHAT_VIDEO"
+                      eventData={eventData}
+                      url={t('sessionDetail.chat.videoLink')}
+                      containerStyles={{ mx: 'auto', my: 2 }}
+                    ></Video>
+                    <Box sx={chatDetailIntroStyle}>
+                      <Typography>{t('sessionDetail.chat.detailIntro')}</Typography>
+                    </Box>
+                    <Box>
+                      <ul>
+                        <li>{t('sessionDetail.chat.detailPrivacy')}</li>
+                        <li>{t('sessionDetail.chat.detailTimezone')}</li>
+                        <li>{t('sessionDetail.chat.detailLanguage')}</li>
+                        <li>{t('sessionDetail.chat.detailLegal')}</li>
+                        <li>{t('sessionDetail.chat.detailImmediateHelp')}</li>
+                      </ul>
+                    </Box>
+                    <Box sx={crispButtonContainerStyle}>
+                      <CrispButton
+                        email={userEmail}
+                        eventData={eventData}
+                        buttonText={t('sessionDetail.chat.startButton')}
+                      />
+                    </Box>
+                  </SessionContentCard>
+                </>
+              )}
+              {sessionProgress !== PROGRESS_STATUS.COMPLETED && (
+                <SessionCompleteButton storyId={storyId} eventData={eventData} />
+              )}
+            </Box>
+          </Box>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default StoryblokSessionIbaPage;
diff --git a/components/storyblok/StoryblokSessionPage.tsx b/components/storyblok/StoryblokSessionPage.tsx
new file mode 100644
index 00000000..131c8755
--- /dev/null
+++ b/components/storyblok/StoryblokSessionPage.tsx
@@ -0,0 +1,416 @@
+import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';
+import CircleIcon from '@mui/icons-material/Circle';
+import LinkIcon from '@mui/icons-material/Link';
+import SlowMotionVideoIcon from '@mui/icons-material/SlowMotionVideo';
+import StarBorderIcon from '@mui/icons-material/StarBorder';
+import { Box, Button, Container, Link as MuiLink, Typography } from '@mui/material';
+import { ISbRichtext, ISbStoryData, storyblokEditable } from '@storyblok/react';
+import { useTranslations } from 'next-intl';
+import Head from 'next/head';
+import { useEffect, useState } from 'react';
+import { render } from 'storyblok-rich-text-react-renderer';
+import { useStartSessionMutation } from '../../app/api';
+import { Course, Session } from '../../app/coursesSlice';
+import SessionContentCard from '../../components/cards/SessionContentCard';
+import Link from '../../components/common/Link';
+import CrispButton from '../../components/crisp/CrispButton';
+import Header from '../../components/layout/Header';
+import { SessionCompleteButton } from '../../components/session/SessionCompleteButton';
+import Video from '../../components/video/Video';
+import VideoTranscriptModal from '../../components/video/VideoTranscriptModal';
+import { PROGRESS_STATUS } from '../../constants/enums';
+import {
+  SESSION_STARTED_ERROR,
+  SESSION_STARTED_REQUEST,
+  SESSION_STARTED_SUCCESS,
+  SESSION_VIDEO_TRANSCRIPT_CLOSED,
+  SESSION_VIDEO_TRANSCRIPT_OPENED,
+  SESSION_VIEWED,
+} from '../../constants/events';
+import { useTypedSelector } from '../../hooks/store';
+import illustrationPerson4Peach from '../../public/illustration_person4_peach.svg';
+import { columnStyle } from '../../styles/common';
+import { courseIsLiveNow, courseIsLiveSoon } from '../../utils/courseLiveStatus';
+import hasAccessToPage from '../../utils/hasAccessToPage';
+import logEvent, { getEventUserData } from '../../utils/logEvent';
+import { RichTextOptions } from '../../utils/richText';
+
+const containerStyle = {
+  backgroundColor: 'secondary.light',
+} as const;
+
+const cardColumnStyle = {
+  ...columnStyle,
+  alignItems: 'center',
+  gap: { xs: 2, md: 3 },
+} as const;
+
+const dotsStyle = {
+  ...columnStyle,
+  color: 'primary.dark',
+  gap: { xs: 1, md: 1.25 },
+} as const;
+
+const dotStyle = {
+  width: { xs: 8, md: 10 },
+  height: { xs: 8, md: 10 },
+} as const;
+
+const sessionSubtitleStyle = {
+  marginTop: '0.75rem !important',
+} as const;
+
+const crispButtonContainerStyle = {
+  paddingTop: 4,
+  paddingBottom: 1,
+  display: 'flex',
+} as const;
+
+const chatDetailIntroStyle = { marginTop: 3, marginBottom: 1.5 } as const;
+
+export interface StoryblokSessionPageProps {
+  storyId: number;
+  storyUuid: string;
+  storyPosition: number;
+  _uid: string;
+  _editable: string;
+  course: ISbStoryData;
+  name: string;
+  description: ISbRichtext;
+  video: { url: string };
+  video_transcript: ISbRichtext;
+  video_outro: ISbRichtext;
+  activity: ISbRichtext;
+  bonus: ISbRichtext;
+  coming_soon: boolean;
+  coming_soon_content: ISbRichtext;
+}
+
+const StoryblokSessionPage = (props: StoryblokSessionPageProps) => {
+  const {
+    storyId,
+    storyUuid,
+    storyPosition,
+    _uid,
+    _editable,
+    course,
+    name,
+    description,
+    video,
+    video_transcript,
+    video_outro,
+    activity,
+    bonus,
+    coming_soon,
+    coming_soon_content,
+  } = props;
+
+  const t = useTranslations('Courses');
+
+  const userCreatedAt = useTypedSelector((state) => state.user.createdAt);
+  const userEmail = useTypedSelector((state) => state.user.email);
+  const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
+  const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
+  const courses = useTypedSelector((state) => state.courses);
+
+  const [incorrectAccess, setIncorrectAccess] = useState<boolean>(true);
+  const [liveChatAccess, setLiveChatAccess] = useState<boolean>(false);
+  const [sessionProgress, setSessionProgress] = useState<PROGRESS_STATUS>(
+    PROGRESS_STATUS.NOT_STARTED,
+  );
+  const [openTranscriptModal, setOpenTranscriptModal] = useState<boolean | null>(null);
+  const [videoStarted, setVideoStarted] = useState<boolean>(false);
+  const [weekString, setWeekString] = useState<string>('');
+  const [startSession, { isLoading: startSessionIsLoading }] = useStartSessionMutation();
+
+  const courseComingSoon: boolean = course.content.coming_soon;
+  const courseLiveSoon: boolean = courseIsLiveSoon(course);
+  const courseLiveNow: boolean = courseIsLiveNow(course);
+  // only show live content to public users
+  const liveCourseAccess = partnerAccesses.length === 0 && !partnerAdmin.id;
+
+  useEffect(() => {
+    const coursePartners = course.content.included_for_partners;
+    setIncorrectAccess(!hasAccessToPage(coursePartners, partnerAccesses, partnerAdmin));
+
+    const liveAccess = partnerAccesses.find(
+      (partnerAccess) => partnerAccess.featureLiveChat === true,
+    );
+
+    if (liveAccess || liveCourseAccess) setLiveChatAccess(true);
+  }, [partnerAccesses, course.content.included_for_partners, liveCourseAccess, partnerAdmin]);
+
+  useEffect(() => {
+    course.content.weeks.map((week: any) => {
+      week.sessions.map((session: any) => {
+        session === storyUuid && setWeekString(week.name);
+      });
+    });
+
+    const userCourse = courses.find((c: Course) => Number(c.storyblokId) === course.id);
+
+    if (userCourse) {
+      const userSession = userCourse.sessions.find(
+        (session: Session) => Number(session.storyblokId) === storyId,
+      );
+
+      if (userSession) {
+        userSession.completed
+          ? setSessionProgress(PROGRESS_STATUS.COMPLETED)
+          : setSessionProgress(PROGRESS_STATUS.STARTED);
+      }
+    }
+  }, [courses, course.content.weeks, course.id, storyId, storyUuid]);
+
+  useEffect(() => {
+    if (openTranscriptModal === null) return;
+
+    logEvent(
+      openTranscriptModal ? SESSION_VIDEO_TRANSCRIPT_OPENED : SESSION_VIDEO_TRANSCRIPT_CLOSED,
+      {
+        ...eventData,
+        session_name: name,
+        course_name: name,
+      },
+    );
+    if (openTranscriptModal && sessionProgress === PROGRESS_STATUS.NOT_STARTED) {
+      callStartSession();
+    }
+  }, [openTranscriptModal]);
+
+  async function callStartSession() {
+    logEvent(SESSION_STARTED_REQUEST, {
+      ...eventData,
+      session_name: name,
+      course_name: name,
+    });
+
+    const startSessionResponse = await startSession({
+      storyblokId: storyId,
+    });
+
+    if ('data' in startSessionResponse) {
+      logEvent(SESSION_STARTED_SUCCESS, eventData);
+    }
+
+    if ('error' in startSessionResponse) {
+      const error = startSessionResponse.error;
+
+      logEvent(SESSION_STARTED_ERROR, eventData);
+      (window as any).Rollbar?.error('Session started error', error);
+
+      throw error;
+    }
+  }
+
+  useEffect(() => {
+    if (!videoStarted || sessionProgress !== PROGRESS_STATUS.NOT_STARTED) return;
+
+    if (videoStarted) {
+      callStartSession();
+    }
+  }, [videoStarted]);
+
+  useEffect(() => {
+    logEvent(SESSION_VIEWED, eventData);
+  });
+
+  const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);
+  const eventData = {
+    ...eventUserData,
+    session_name: name,
+    session_storyblok_id: storyId,
+    session_progress: sessionProgress,
+    course_name: course.name,
+    course_storyblok_id: course.id,
+    course_coming_soon: courseComingSoon,
+    course_live_soon: courseLiveSoon,
+    course_live_now: courseLiveNow,
+  };
+
+  const headerProps = {
+    title: name,
+    introduction: description,
+    imageSrc: illustrationPerson4Peach,
+    imageAlt: 'alt.personTea',
+  };
+
+  const Dots = () => {
+    return (
+      <Box sx={dotsStyle}>
+        <CircleIcon sx={dotStyle} />
+        <CircleIcon sx={dotStyle} />
+      </Box>
+    );
+  };
+
+  return (
+    <Box
+      {...storyblokEditable({
+        _uid,
+        _editable,
+        course,
+        name,
+        description,
+        video,
+        video_transcript,
+        video_outro,
+        activity,
+        bonus,
+        coming_soon,
+        coming_soon_content,
+      })}
+    >
+      <Head>
+        <title>{name}</title>
+      </Head>
+      {incorrectAccess ? (
+        <Container sx={containerStyle}></Container>
+      ) : (
+        <Box>
+          <Header
+            title={headerProps.title}
+            introduction={headerProps.introduction}
+            imageSrc={headerProps.imageSrc}
+            imageAlt={headerProps.imageAlt}
+            progressStatus={sessionProgress}
+          >
+            <Button variant="outlined" href="/courses" size="small" component={Link}>
+              Courses
+            </Button>
+
+            <CircleIcon color="error" sx={{ ...dotStyle, marginX: 1 }} />
+
+            <Button variant="outlined" href={`/${course.full_slug}`} size="small" component={Link}>
+              {course.name}
+            </Button>
+            <Typography sx={sessionSubtitleStyle} variant="body2">
+              {weekString} - {t('session')} {storyPosition / 10 - 1}
+            </Typography>
+          </Header>
+          <Container sx={containerStyle}>
+            {coming_soon && (
+              <Box maxWidth={700}>{render(coming_soon_content, RichTextOptions)}</Box>
+            )}
+            {!coming_soon && (
+              <Box sx={cardColumnStyle}>
+                {video && (
+                  <>
+                    <SessionContentCard
+                      title={t('sessionDetail.videoTitle')}
+                      titleIcon={SlowMotionVideoIcon}
+                      eventPrefix="SESSION_VIDEO"
+                      eventData={eventData}
+                      initialExpanded={true}
+                    >
+                      <Typography mb={3}>
+                        {t.rich('sessionDetail.videoDescription', {
+                          transcriptLink: (children) => (
+                            <MuiLink
+                              component="button"
+                              variant="body1"
+                              onClick={() => setOpenTranscriptModal(true)}
+                            >
+                              {children}
+                            </MuiLink>
+                          ),
+                        })}
+                      </Typography>
+                      <Video
+                        url={video.url}
+                        setVideoStarted={setVideoStarted}
+                        eventData={eventData}
+                        eventPrefix="SESSION"
+                        containerStyles={{ mx: 'auto', my: 2 }}
+                      />
+                      <VideoTranscriptModal
+                        videoName={name}
+                        content={video_transcript}
+                        setOpenTranscriptModal={setOpenTranscriptModal}
+                        openTranscriptModal={openTranscriptModal}
+                      />
+                    </SessionContentCard>
+                  </>
+                )}
+                {activity.content &&
+                  (activity.content?.length > 1 || activity.content[0].content) && (
+                    <>
+                      <Dots />
+                      <SessionContentCard
+                        title={t('sessionDetail.activityTitle')}
+                        titleIcon={StarBorderIcon}
+                        richtextContent
+                        eventPrefix="SESSION_ACTIVITY"
+                        eventData={eventData}
+                      >
+                        <>{render(activity, RichTextOptions)}</>
+                      </SessionContentCard>
+                    </>
+                  )}
+                {bonus.content && (bonus.content?.length > 1 || bonus.content[0].content) && (
+                  <>
+                    <Dots />
+                    <SessionContentCard
+                      title={t('sessionDetail.bonusTitle')}
+                      titleIcon={LinkIcon}
+                      richtextContent
+                      eventPrefix="SESSION_BONUS_CONTENT"
+                      eventData={eventData}
+                    >
+                      <>{render(bonus, RichTextOptions)}</>
+                    </SessionContentCard>
+                  </>
+                )}
+                {liveChatAccess && (
+                  <>
+                    <Dots />
+                    <SessionContentCard
+                      title={t('sessionDetail.chat.title')}
+                      titleIcon={ChatBubbleOutlineIcon}
+                      titleIconSize={24}
+                      eventPrefix="SESSION_CHAT"
+                      eventData={eventData}
+                    >
+                      <Typography paragraph>{t('sessionDetail.chat.description')}</Typography>
+                      <Typography paragraph>{t('sessionDetail.chat.videoIntro')}</Typography>
+                      <Video
+                        eventPrefix="SESSION_CHAT_VIDEO"
+                        eventData={eventData}
+                        url={t('sessionDetail.chat.videoLink')}
+                        containerStyles={{ mx: 'auto', my: 2 }}
+                      ></Video>
+                      <Box sx={chatDetailIntroStyle}>
+                        <Typography>{t('sessionDetail.chat.detailIntro')}</Typography>
+                      </Box>
+                      <Box>
+                        <ul>
+                          <li>{t('sessionDetail.chat.detailPrivacy')}</li>
+                          <li>{t('sessionDetail.chat.detailTimezone')}</li>
+                          <li>{t('sessionDetail.chat.detailLanguage')}</li>
+                          <li>{t('sessionDetail.chat.detailLegal')}</li>
+                          <li>{t('sessionDetail.chat.detailImmediateHelp')}</li>
+                        </ul>
+                      </Box>
+                      <Box sx={crispButtonContainerStyle}>
+                        <CrispButton
+                          email={userEmail}
+                          eventData={eventData}
+                          buttonText={t('sessionDetail.chat.startButton')}
+                        />
+                      </Box>
+                    </SessionContentCard>
+                  </>
+                )}
+                {sessionProgress !== PROGRESS_STATUS.COMPLETED && (
+                  <SessionCompleteButton storyId={storyId} eventData={eventData} />
+                )}
+              </Box>
+            )}
+          </Container>
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default StoryblokSessionPage;
diff --git a/components/storyblok/StoryblokSpacer.tsx b/components/storyblok/StoryblokSpacer.tsx
index 3b8da75e..f0a0001b 100644
--- a/components/storyblok/StoryblokSpacer.tsx
+++ b/components/storyblok/StoryblokSpacer.tsx
@@ -1,19 +1,24 @@
 import { useTheme } from '@mui/material';
 import { Box } from '@mui/system';
+import { storyblokEditable } from '@storyblok/react';
 interface StoryblokSpacerProps {
+  _uid: string;
+  _editable: string;
   size: string;
 }
 
-const StoryblokSpacer = ({ size = 'small' }: StoryblokSpacerProps) => {
+const StoryblokSpacer = (props: StoryblokSpacerProps) => {
+  const { _uid, _editable, size = 'small' } = props;
+
   const theme = useTheme();
   const style = {
     ...(size === 'small'
       ? { height: theme.spacing(1) }
       : size === 'medium'
-      ? { height: theme.spacing(2) }
-      : { height: theme.spacing(3) }),
+        ? { height: theme.spacing(2) }
+        : { height: theme.spacing(3) }),
   };
-  return <Box sx={style} />;
+  return <Box sx={style} {...storyblokEditable({ _uid, _editable, size })} />;
 };
 
 export default StoryblokSpacer;
diff --git a/components/storyblok/StoryblokStatement.tsx b/components/storyblok/StoryblokStatement.tsx
index 3ecd192e..4bb58bfa 100644
--- a/components/storyblok/StoryblokStatement.tsx
+++ b/components/storyblok/StoryblokStatement.tsx
@@ -1,14 +1,17 @@
+import { Typography } from '@mui/material';
 import { Box } from '@mui/system';
-import { Richtext } from 'storyblok-js-client';
+import { storyblokEditable } from '@storyblok/react';
 import { richtextContentStyle } from '../../styles/common';
 
 interface StoryblokStatementProps {
-  text: Richtext;
+  _uid: string;
+  _editable: string;
+  text: string;
   text_size: string;
 }
 
 const StoryblokStatement = (props: StoryblokStatementProps) => {
-  const { text, text_size } = props;
+  const { _uid, _editable, text, text_size } = props;
 
   if (!text) return <></>;
 
@@ -16,12 +19,12 @@ const StoryblokStatement = (props: StoryblokStatementProps) => {
     text_size === 'extra-small'
       ? { xs: 0.875, md: 1 }
       : text_size === 'small'
-      ? { xs: 1, md: 1.125 }
-      : text_size === 'large'
-      ? { xs: 1.25, md: 1.5 }
-      : text_size === 'extra-large'
-      ? { xs: 1.5, md: 1.75 }
-      : { xs: 1.125, md: 1.25 }; // default / medium
+        ? { xs: 1, md: 1.125 }
+        : text_size === 'large'
+          ? { xs: 1.25, md: 1.5 }
+          : text_size === 'extra-large'
+            ? { xs: 1.5, md: 1.75 }
+            : { xs: 1.125, md: 1.25 }; // default / medium
 
   const containerStyle = {
     maxWidth: 600,
@@ -39,9 +42,8 @@ const StoryblokStatement = (props: StoryblokStatementProps) => {
   } as const;
 
   return (
-    <Box sx={containerStyle}>
-      {/* @ts-ignore */}
-      <text>{text}</text>
+    <Box sx={containerStyle} {...storyblokEditable({ _uid, _editable, text, text_size })}>
+      <Typography>{text}</Typography>
     </Box>
   );
 };
diff --git a/components/cards/TeamMemberCard.tsx b/components/storyblok/StoryblokTeamMemberCard.tsx
similarity index 72%
rename from components/cards/TeamMemberCard.tsx
rename to components/storyblok/StoryblokTeamMemberCard.tsx
index e1ab1440..7d3d3e6b 100644
--- a/components/cards/TeamMemberCard.tsx
+++ b/components/storyblok/StoryblokTeamMemberCard.tsx
@@ -1,6 +1,7 @@
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import LanguageIcon from '@mui/icons-material/Language';
 import { Box, Card, CardActionArea, CardContent, Collapse, Typography } from '@mui/material';
+import { ISbRichtext, storyblokEditable } from '@storyblok/react';
 import { useTranslations } from 'next-intl';
 import Image from 'next/legacy/image';
 import { useState } from 'react';
@@ -46,13 +47,20 @@ const languageRowStyles = {
   alignItems: 'center',
 } as const;
 
-interface TeamMemberCardProps {
-  teamMember: any;
+export interface StoryblokTeamMemberCardProps {
+  _uid: string;
+  _editable: string;
+  name: string;
+  role: string;
+  languages: string;
+  bio: ISbRichtext;
+  image: { filename: string; alt: string };
   alwaysOpen?: boolean;
 }
 
-const TeamMemberCard = (props: TeamMemberCardProps) => {
-  const { teamMember, alwaysOpen = false } = props;
+const StoryblokTeamMemberCard = (props: StoryblokTeamMemberCardProps) => {
+  const { _uid, _editable, name, role, languages, bio, image, alwaysOpen = false } = props;
+
   const [expanded, setExpanded] = useState<boolean>(alwaysOpen);
   const t = useTranslations('Shared.meetTheTeam');
 
@@ -66,31 +74,38 @@ const TeamMemberCard = (props: TeamMemberCardProps) => {
   } as const;
 
   return (
-    <Card sx={cardStyle}>
+    <Card
+      sx={cardStyle}
+      {...storyblokEditable({
+        _uid,
+        _editable,
+        name,
+        role,
+        languages,
+        bio,
+        image,
+        alwaysOpen,
+      })}
+    >
       <CardActionArea
         onClick={handleExpandClick}
-        aria-label={`${t.rich('expandTeamMember', { name: teamMember.name })}`}
+        aria-label={`${t.rich('expandTeamMember', { name: name })}`}
         disabled={alwaysOpen}
       >
         <CardContent sx={cardContentStyle}>
           <Box sx={imageContainerStyle}>
-            <Image
-              alt={teamMember.image.alt}
-              src={teamMember.image.filename}
-              layout="fill"
-              objectFit="cover"
-            />
+            <Image alt={image.alt} src={image.filename} layout="fill" objectFit="cover" />
           </Box>
           <Box sx={cardHeaderStyle}>
             <Box flex={1}>
               <Typography component="h3" variant="h3" mb={0.5}>
-                {teamMember.name}
+                {name}
               </Typography>
-              <Typography fontStyle={'italic'}>{teamMember.role}</Typography>
+              <Typography fontStyle={'italic'}>{role}</Typography>
               <Box style={languageRowStyles}>
                 <LanguageIcon color="error" />
                 <Typography variant="body2" flex="1">
-                  {teamMember.languages}
+                  {languages}
                 </Typography>
               </Box>
             </Box>
@@ -105,7 +120,7 @@ const TeamMemberCard = (props: TeamMemberCardProps) => {
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <CardContent sx={collapseContentStyle}>
           <Typography variant="body2" mb={0} paragraph>
-            {render(teamMember.bio, RichTextOptions)}
+            {render(bio, RichTextOptions)}
           </Typography>
         </CardContent>
       </Collapse>
@@ -113,4 +128,4 @@ const TeamMemberCard = (props: TeamMemberCardProps) => {
   );
 };
 
-export default TeamMemberCard;
+export default StoryblokTeamMemberCard;
diff --git a/components/storyblok/StoryblokVideo.tsx b/components/storyblok/StoryblokVideo.tsx
index d431ca3c..b66c34f1 100644
--- a/components/storyblok/StoryblokVideo.tsx
+++ b/components/storyblok/StoryblokVideo.tsx
@@ -1,4 +1,5 @@
 import { Box } from '@mui/system';
+import { storyblokEditable } from '@storyblok/react';
 import dynamic from 'next/dynamic';
 import { YouTubeConfig } from 'react-player/youtube';
 import { richtextContentStyle } from '../../styles/common';
@@ -17,13 +18,15 @@ const videoStyle = {
 } as const;
 
 interface StoryblokVideoProps {
+  _uid: string;
+  _editable: string;
   video: { url: string };
   size: string;
   alignment: string;
 }
 
 const StoryblokVideo = (props: StoryblokVideoProps) => {
-  const { video, size = 'extra-large', alignment = 'left' } = props;
+  const { _uid, _editable, video, size = 'extra-large', alignment = 'left' } = props;
 
   if (!video) return <></>;
 
@@ -33,22 +36,22 @@ const StoryblokVideo = (props: StoryblokVideoProps) => {
       size === 'extra-small'
         ? { xs: 80, md: 120 }
         : size === 'small'
-        ? { xs: 140, md: 180 }
-        : size === 'medium'
-        ? { xs: 200, md: 250 }
-        : size === 'large'
-        ? { xs: 400, md: 480 }
-        : '100%',
+          ? { xs: 140, md: 180 }
+          : size === 'medium'
+            ? { xs: 200, md: 250 }
+            : size === 'large'
+              ? { xs: 400, md: 480 }
+              : '100%',
     marginY:
       size === 'extra-small'
         ? 2
         : size === 'small'
-        ? 3
-        : size === 'medium'
-        ? 4
-        : size === 'large'
-        ? 5
-        : 6,
+          ? 3
+          : size === 'medium'
+            ? 4
+            : size === 'large'
+              ? 5
+              : 6,
     marginLeft: alignment === 'center' || alignment === 'right' ? 'auto' : 0,
     marginRight: alignment === 'center' ? 'auto' : 0,
 
@@ -65,7 +68,7 @@ const StoryblokVideo = (props: StoryblokVideoProps) => {
       : {};
 
   return (
-    <Box sx={containerStyle}>
+    <Box sx={containerStyle} {...storyblokEditable({ _uid, _editable, video, size, alignment })}>
       <Box sx={videoContainerStyle}>
         <ReactPlayer
           style={videoStyle}
diff --git a/components/storyblok/StoryblokWelcomePage.tsx b/components/storyblok/StoryblokWelcomePage.tsx
new file mode 100644
index 00000000..0fcc6753
--- /dev/null
+++ b/components/storyblok/StoryblokWelcomePage.tsx
@@ -0,0 +1,189 @@
+import { Box, Button, Card, CardContent, Container, Typography } from '@mui/material';
+import { ISbRichtext, storyblokEditable } from '@storyblok/react';
+import { useTranslations } from 'next-intl';
+import Head from 'next/head';
+import { useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
+import { render } from 'storyblok-rich-text-react-renderer';
+import { useGetAutomaticAccessCodeFeatureForPartnerQuery } from '../../app/api';
+import Link from '../../components/common/Link';
+import WelcomeCodeForm from '../../components/forms/WelcomeCodeForm';
+import PartnerHeader from '../../components/layout/PartnerHeader';
+import StoryblokPageSection, {
+  StoryblokPageSectionProps,
+} from '../../components/storyblok/StoryblokPageSection';
+import {
+  generatePartnerPromoGetStartedEvent,
+  generatePartnerPromoGoToCoursesEvent,
+} from '../../constants/events';
+import { getPartnerContent } from '../../constants/partners';
+import { useTypedSelector } from '../../hooks/store';
+import illustrationBloomHeadYellow from '../../public/illustration_bloom_head_yellow.svg';
+import welcomeToBloom from '../../public/welcome_to_bloom.svg';
+import { rowStyle } from '../../styles/common';
+import hasAutomaticAccessFeature from '../../utils/hasAutomaticAccessCodeFeature';
+import logEvent, { getEventUserData } from '../../utils/logEvent';
+import { RichTextOptions } from '../../utils/richText';
+
+const introContainerStyle = {
+  maxWidth: 600,
+  width: { xs: '100%', md: '45%' },
+  fontSize: '1.375rem',
+  fontFamily: 'Montserrat, sans-serif',
+  fontStyle: 'italic',
+  lineHeight: 1.75,
+  'p, a, span': {
+    fontSize: '1.375rem',
+    fontFamily: 'Montserrat, sans-serif',
+    fontStyle: 'italic',
+    lineHeight: 1.75,
+  },
+} as const;
+
+const rowItem = {
+  width: { xs: '100%', sm: '60%', md: '45%' },
+  height: '100%',
+} as const;
+
+export interface StoryblokWelcomePageProps {
+  _uid: string;
+  _editable: string;
+  storySlug: string;
+  title: string;
+  introduction: ISbRichtext;
+  header_image: { filename: string; alt: string };
+  page_sections: StoryblokPageSectionProps[];
+}
+
+const StoryblokWelcomePage = (props: StoryblokWelcomePageProps) => {
+  const { _uid, _editable, storySlug, title, introduction, header_image, page_sections } = props;
+
+  const partnerContent = getPartnerContent(storySlug);
+
+  const headerProps = {
+    partnerLogoSrc: partnerContent.partnershipLogo || welcomeToBloom,
+    partnerLogoAlt: partnerContent.partnershipLogoAlt || 'alt.welcomeToBloom',
+    imageSrc: partnerContent.bloomGirlIllustration || illustrationBloomHeadYellow,
+    imageAlt: 'alt.bloomHead',
+  };
+
+  return (
+    <Box
+      {...storyblokEditable({
+        _uid,
+        _editable,
+        title,
+        introduction,
+        header_image,
+        page_sections,
+      })}
+    >
+      <Head>
+        <title>{title}</title>
+      </Head>
+      <PartnerHeader
+        partnerLogoSrc={headerProps.partnerLogoSrc}
+        partnerLogoAlt={headerProps.partnerLogoAlt}
+        imageSrc={headerProps.imageSrc}
+        imageAlt={headerProps.imageAlt}
+      />
+      <Container sx={{ ...rowStyle, backgroundColor: 'primary.light' }}>
+        <Box sx={introContainerStyle}>{render(introduction, RichTextOptions)}</Box>
+        <CallToActionCard partnerName={partnerContent.name} />
+      </Container>
+      {page_sections?.length > 0 &&
+        page_sections.map((section: any, index: number) => (
+          <StoryblokPageSection key={`page_section_${index}`} {...section} />
+        ))}
+    </Box>
+  );
+};
+
+const CallToActionCard = ({ partnerName }: { partnerName: string }) => {
+  const router = useRouter();
+
+  const userToken = useTypedSelector((state) => state.user.token);
+  const userCreatedAt = useTypedSelector((state) => state.user.createdAt);
+  const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
+  const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
+  const partners = useTypedSelector((state) => state.partners);
+  const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);
+
+  const [accessCodeRequired, setAccessCodeRequired] = useState<boolean>(true);
+  const [codeParam, setCodeParam] = useState<string>('');
+
+  const t = useTranslations('Welcome');
+
+  useGetAutomaticAccessCodeFeatureForPartnerQuery(partnerName);
+  useEffect(() => {
+    const partnerData = partners.find((p) => p.name.toLowerCase() === partnerName.toLowerCase());
+    if (partnerData) {
+      setAccessCodeRequired(!hasAutomaticAccessFeature(partnerData));
+    }
+  }, [partners, partnerName]);
+
+  useEffect(() => {
+    const { code } = router.query;
+    if (code) setCodeParam(code + '');
+  }, [setCodeParam, router.query]);
+
+  return (
+    <Card sx={rowItem}>
+      <CardContent>
+        {userToken && (
+          <>
+            <Typography variant="h2" component="h2">
+              {t('continueCourses')}
+            </Typography>
+            <Typography>{t('continueCoursesDescription')}</Typography>
+            <Button
+              sx={{ mt: 3 }}
+              variant="contained"
+              fullWidth
+              component={Link}
+              color="secondary"
+              onClick={() => {
+                logEvent(generatePartnerPromoGoToCoursesEvent(partnerName), eventUserData);
+              }}
+              href="/courses"
+            >
+              {t('goToCourses')}
+            </Button>
+          </>
+        )}
+        {!userToken && accessCodeRequired && (
+          <>
+            <Typography variant="h2" component="h2">
+              {t('getStarted')}
+            </Typography>
+            <Typography>{t.rich('accessIntroduction', { partnerName })}</Typography>
+            <WelcomeCodeForm codeParam={codeParam} partnerParam={partnerName} />
+          </>
+        )}
+        {!userToken && !accessCodeRequired && (
+          <>
+            <Typography variant="h2" component="h2">
+              {t('getStarted')}
+            </Typography>
+            <Typography>{t.rich('publicIntroduction', { partnerName })}</Typography>
+            <Button
+              sx={{ mt: 3 }}
+              variant="contained"
+              fullWidth
+              component={Link}
+              color="secondary"
+              onClick={() => {
+                logEvent(generatePartnerPromoGetStartedEvent(partnerName), eventUserData);
+              }}
+              href={`/auth/register?partner=${partnerName.toLocaleLowerCase()}`}
+            >
+              {t('getStarted')}
+            </Button>
+          </>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default StoryblokWelcomePage;
diff --git a/components/video/VideoTranscriptModal.tsx b/components/video/VideoTranscriptModal.tsx
index 5b452d1c..5d3a781f 100644
--- a/components/video/VideoTranscriptModal.tsx
+++ b/components/video/VideoTranscriptModal.tsx
@@ -1,7 +1,7 @@
 import { Box, Button, Modal, Typography } from '@mui/material';
+import { ISbRichtext } from '@storyblok/react';
 import { useTranslations } from 'next-intl';
 import { Dispatch, SetStateAction } from 'react';
-import { Richtext } from 'storyblok-js-client';
 import { render } from 'storyblok-rich-text-react-renderer';
 import { RichTextOptions } from '../../utils/richText';
 
@@ -41,7 +41,7 @@ const transcriptDescriptionStyle = {
 };
 interface TranscriptModalProps {
   videoName: string;
-  content: Richtext;
+  content: ISbRichtext;
   openTranscriptModal: boolean | null;
   setOpenTranscriptModal: Dispatch<SetStateAction<boolean | null>>;
 }
diff --git a/config/storyblok.ts b/config/storyblok.ts
index d7cf3118..3985c474 100644
--- a/config/storyblok.ts
+++ b/config/storyblok.ts
@@ -1,98 +1,48 @@
-import { useEffect, useState } from 'react';
-import StoryblokClient, { StoryParams } from 'storyblok-js-client';
-import { LANGUAGES } from '../constants/enums';
-
-const Storyblok = new StoryblokClient({
+import { apiPlugin, storyblokInit } from '@storyblok/react';
+import StoryblokAccordion from '../components/storyblok/StoryblokAccordion';
+import StoryblokAudio from '../components/storyblok/StoryblokAudio';
+import StoryblokButton from '../components/storyblok/StoryblokButton';
+import StoryblokCard from '../components/storyblok/StoryblokCard';
+import StoryblokCarousel from '../components/storyblok/StoryblokCarousel';
+import StoryblokCoursePage from '../components/storyblok/StoryblokCoursePage';
+import StoryblokFaqs from '../components/storyblok/StoryblokFaqs';
+import StoryblokImage from '../components/storyblok/StoryblokImage';
+import StoryblokMeetTheTeamPage from '../components/storyblok/StoryblokMeetTheTeamPage';
+import StoryblokPage from '../components/storyblok/StoryblokPage';
+import StoryblokPageSection from '../components/storyblok/StoryblokPageSection';
+import StoryblokQuote from '../components/storyblok/StoryblokQuote';
+import StoryblokRow from '../components/storyblok/StoryblokRow';
+import StoryblokRowColumnBlock from '../components/storyblok/StoryblokRowColumnBlock';
+import StoryblokSessionIbaPage from '../components/storyblok/StoryblokSessionIbaPage';
+import StoryblokSessionPage from '../components/storyblok/StoryblokSessionPage';
+import StoryblokSpacer from '../components/storyblok/StoryblokSpacer';
+import StoryblokStatement from '../components/storyblok/StoryblokStatement';
+import StoryblokVideo from '../components/storyblok/StoryblokVideo';
+import StoryblokWelcomePage from '../components/storyblok/StoryblokWelcomePage';
+
+export const storyblok = storyblokInit({
   accessToken: process.env.NEXT_PUBLIC_STORYBLOK_TOKEN,
-  cache: {
-    clear: 'auto',
-    type: 'memory',
+  use: [apiPlugin],
+  components: {
+    image: StoryblokImage,
+    video: StoryblokVideo,
+    audio: StoryblokAudio,
+    row: StoryblokRow,
+    row_new: StoryblokRowColumnBlock,
+    quote: StoryblokQuote,
+    card: StoryblokCard,
+    button: StoryblokButton,
+    faq_list: StoryblokFaqs,
+    statement: StoryblokStatement,
+    accordion: StoryblokAccordion,
+    carousel: StoryblokCarousel,
+    spacer: StoryblokSpacer,
+    page_section: StoryblokPageSection,
+    page: StoryblokPage,
+    course: StoryblokCoursePage,
+    session: StoryblokSessionPage,
+    session_iba: StoryblokSessionIbaPage,
+    welcome: StoryblokWelcomePage,
+    meet_the_team: StoryblokMeetTheTeamPage,
   },
 });
-
-export function useStoryblok(
-  originalStory: any,
-  preview: boolean,
-  params: StoryParams,
-  locale: LANGUAGES,
-) {
-  let [story, setStory] = useState(originalStory);
-
-  // adds the events for updating the visual editor
-  // see https://www.storyblok.com/docs/guide/essentials/visual-editor#initializing-the-storyblok-js-bridge
-  function initEventListeners() {
-    const { StoryblokBridge } = window as any;
-
-    if (typeof StoryblokBridge !== 'undefined') {
-      // initialize the bridge with your token
-      const storyblokInstance = new StoryblokBridge({
-        language: locale,
-      });
-
-      // reload on Next.js page on save or publish event in the Visual Editor
-      storyblokInstance.on(['change', 'published'], () => location.reload());
-
-      // live update the story on input events
-      storyblokInstance.on('input', (event: any) => {
-        // doesnt currently work when using resolve_relations
-        if (!params || !params.resolve_relations) {
-          if (story && event.story._uid === story._uid) {
-            setStory(event.story);
-          }
-        }
-      });
-
-      storyblokInstance.on('enterEditmode', (event: any) => {
-        // loading the draft version on initial enter of editor
-        Storyblok.get(`cdn/stories/${event.storyId}`, {
-          ...params,
-          version: 'draft',
-          language: locale,
-        })
-          .then(({ data }) => {
-            if (data.story) {
-              setStory(data.story);
-            }
-          })
-          .catch((error) => {
-            console.log(error);
-          });
-      });
-    }
-  }
-
-  // appends the bridge script tag to our document
-  // see https://www.storyblok.com/docs/guide/essentials/visual-editor#installing-the-storyblok-js-bridge
-  function addBridge(callback: any) {
-    // check if the script is already present
-    const existingScript = document.getElementById('storyblokBridge');
-    if (!existingScript) {
-      const script = document.createElement('script');
-      script.src = '//app.storyblok.com/f/storyblok-v2-latest.js';
-      script.id = 'storyblokBridge';
-      document.body.appendChild(script);
-      script.onload = () => {
-        // once the scrip is loaded, init the event listeners
-        callback();
-      };
-    } else {
-      callback();
-    }
-  }
-
-  useEffect(() => {
-    // only load inside preview mode
-    if (preview) {
-      // first load the bridge, then initialize the event listeners
-      addBridge(initEventListeners);
-    }
-  });
-
-  useEffect(() => {
-    setStory(originalStory);
-  }, [originalStory]);
-
-  return story;
-}
-
-export default Storyblok;
diff --git a/messages/shared/en.json b/messages/shared/en.json
index 96c82ffb..2a2e54cd 100644
--- a/messages/shared/en.json
+++ b/messages/shared/en.json
@@ -27,6 +27,9 @@
     "meetTheTeam": {
       "expandTeamMember": "Expand bio for {name}"
     },
+    "noDataAvailable": {
+      "title": "There was an issue loading this page. Please go back and try again soon, or get in touch."
+    },
     "404": {
       "title": "404 - Page not found",
       "authenticatedDescription": "This page could not be found. Check the url or go back to the courses page.",
diff --git a/package.json b/package.json
index 8fbda06f..f6b697eb 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     "@mui/lab": "^5.0.0-alpha.155",
     "@mui/material": "^5.14.20",
     "@reduxjs/toolkit": "^2.0.1",
+    "@storyblok/react": "^3.0.0",
     "@vercel/analytics": "^1.1.1",
     "axios": "^1.6.2",
     "firebase": "^10.7.1",
@@ -44,7 +45,6 @@
     "react-international-phone": "^4.0.4",
     "react-player": "^2.13.0",
     "react-redux": "^9.0.4",
-    "storyblok-js-client": "^4.2.0",
     "storyblok-rich-text-react-renderer": "^2.9.0"
   },
   "devDependencies": {
diff --git a/pages/[slug].tsx b/pages/[slug].tsx
index f84c42a6..9cd4625f 100644
--- a/pages/[slug].tsx
+++ b/pages/[slug].tsx
@@ -1,88 +1,43 @@
-import { Box } from '@mui/system';
+import { ISbStoryData, getStoryblokApi, useStoryblokState } from '@storyblok/react';
 import { GetStaticPathsContext, GetStaticPropsContext, NextPage } from 'next';
-import Head from 'next/head';
-import { useRouter } from 'next/router';
-import { StoriesParams, StoryData } from 'storyblok-js-client';
-import { SignUpBanner } from '../components/banner/SignUpBanner';
-import Header from '../components/layout/Header';
-import StoryblokPageSection from '../components/storyblok/StoryblokPageSection';
-import Storyblok, { useStoryblok } from '../config/storyblok';
-import { LANGUAGES } from '../constants/enums';
-import { useTypedSelector } from '../hooks/store';
+import NoDataAvailable from '../components/common/NoDataAvailable';
+import StoryblokPage, { StoryblokPageProps } from '../components/storyblok/StoryblokPage';
+import { getStoryblokPageProps } from '../utils/getStoryblokPageProps';
 
 interface Props {
-  story: StoryData;
-  preview: boolean;
-  sbParams: StoriesParams;
-  locale: LANGUAGES;
+  story: ISbStoryData | null;
 }
 
-const Page: NextPage<Props> = ({ story, preview, sbParams, locale }) => {
-  story = useStoryblok(story, preview, sbParams, locale);
-  const userToken = useTypedSelector((state) => state.user.token);
-  const router = useRouter();
+const Page: NextPage<Props> = ({ story }) => {
+  story = useStoryblokState(story);
 
-  const headerProps = {
-    title: story.content.title,
-    introduction: story.content.description,
-    imageSrc: story.content.header_image?.filename,
-    translatedImageAlt: story.content.header_image?.alt,
-  };
-  const partiallyPublicPages = ['/activities', '/grounding'];
-  const isPartiallyPublicPage = partiallyPublicPages.includes(router.asPath);
+  if (!story) {
+    return <NoDataAvailable />;
+  }
 
-  return (
-    <Box>
-      <Head>{story.content.title}</Head>
-      <Header
-        title={headerProps.title}
-        introduction={headerProps.introduction}
-        imageSrc={headerProps.imageSrc}
-        translatedImageAlt={headerProps.translatedImageAlt}
-      />
-      {!userToken && isPartiallyPublicPage && <SignUpBanner />}
-      {userToken &&
-        story.content.page_sections?.length > 0 &&
-        story.content.page_sections.map((section: any, index: number) => (
-          <StoryblokPageSection
-            key={`page_section_${index}`}
-            content={section.content}
-            alignment={section.alignment}
-            color={section.color}
-          />
-        ))}
-    </Box>
-  );
+  return <StoryblokPage {...(story.content as StoryblokPageProps)} />;
 };
 
 export async function getStaticProps({ locale, preview = false, params }: GetStaticPropsContext) {
   const slug = params?.slug instanceof Array ? params.slug.join('/') : params?.slug;
 
-  const sbParams = {
-    version: preview ? 'draft' : 'published',
-    language: locale,
-    ...(preview && { cv: Date.now() }),
-  };
-
-  let { data } = await Storyblok.get(`cdn/stories/${slug}`, sbParams);
+  const storyblokProps = await getStoryblokPageProps(slug, locale, preview);
 
   return {
     props: {
-      story: data ? data.story : null,
-      preview,
-      sbParams: JSON.stringify(sbParams),
+      ...storyblokProps,
       messages: {
         ...require(`../messages/shared/${locale}.json`),
         ...require(`../messages/navigation/${locale}.json`),
       },
-      locale,
     },
     revalidate: 3600, // revalidate every hour
   };
 }
 
 export async function getStaticPaths({ locales }: GetStaticPathsContext) {
-  let { data } = await Storyblok.get('cdn/links/');
+  const storyblokApi = getStoryblokApi();
+  let { data } = await storyblokApi.get('cdn/links/', { published: true });
 
   const excludePaths: string[] = [
     'home',
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 2f19b076..ac7927fc 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -20,6 +20,7 @@ import LeaveSiteButton from '../components/layout/LeaveSiteButton';
 import TopBar from '../components/layout/TopBar';
 import createEmotionCache from '../config/emotionCache';
 import firebase from '../config/firebase';
+import { storyblok } from '../config/storyblok';
 import { AuthGuard } from '../guards/authGuard';
 import { PartnerAdminGuard } from '../guards/partnerAdminGuard';
 import { PublicPageDataWrapper } from '../guards/publicPageDataWrapper';
@@ -32,7 +33,10 @@ import theme from '../styles/theme';
 // For SSG compatibility with MUI
 // Client-side emotion cache, shared for the whole session of the user in the browser.
 const clientSideEmotionCache = createEmotionCache();
+// Init firebase
 firebase;
+// Init storyblok
+storyblok;
 
 export interface MyAppProps extends AppProps {
   emotionCache?: EmotionCache;
diff --git a/pages/about-our-courses.tsx b/pages/about-our-courses.tsx
index dfde984b..90d48fc1 100644
--- a/pages/about-our-courses.tsx
+++ b/pages/about-our-courses.tsx
@@ -1,30 +1,36 @@
 import { Box } from '@mui/material';
+import { ISbStoryData, useStoryblokState } from '@storyblok/react';
 import { GetStaticPropsContext, NextPage } from 'next';
 import Head from 'next/head';
 import { useEffect } from 'react';
-import { StoriesParams, StoryData } from 'storyblok-js-client';
+import NoDataAvailable from '../components/common/NoDataAvailable';
 import Header from '../components/layout/Header';
 import StoryblokPageSection from '../components/storyblok/StoryblokPageSection';
-import Storyblok, { useStoryblok } from '../config/storyblok';
-import { LANGUAGES } from '../constants/enums';
 import { ABOUT_COURSES_VIEWED } from '../constants/events';
 import { useTypedSelector } from '../hooks/store';
+import { getStoryblokPageProps } from '../utils/getStoryblokPageProps';
 import logEvent, { getEventUserData } from '../utils/logEvent';
 
 interface Props {
-  storyData: StoryData;
-  preview: boolean;
-  sbParams: StoriesParams;
-  locale: LANGUAGES;
+  story: ISbStoryData | null;
 }
 
-const CourseAbout: NextPage<Props> = ({ storyData, preview, sbParams, locale }) => {
-  const story = useStoryblok(storyData, preview, sbParams, locale);
+const CourseAbout: NextPage<Props> = ({ story }) => {
+  story = useStoryblokState(story);
+
   const userCreatedAt = useTypedSelector((state) => state.user.createdAt);
   const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
   const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
   const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);
 
+  useEffect(() => {
+    logEvent(ABOUT_COURSES_VIEWED, eventUserData);
+  });
+
+  if (!story) {
+    return <NoDataAvailable />;
+  }
+
   const headerProps = {
     title: story.content.title,
     introduction: story.content.description || '',
@@ -32,10 +38,6 @@ const CourseAbout: NextPage<Props> = ({ storyData, preview, sbParams, locale })
     translatedImageAlt: story.content.header_image.alt,
   };
 
-  useEffect(() => {
-    logEvent(ABOUT_COURSES_VIEWED, eventUserData);
-  });
-
   return (
     <Box>
       <Head>
@@ -49,35 +51,22 @@ const CourseAbout: NextPage<Props> = ({ storyData, preview, sbParams, locale })
       />
       {story.content.page_sections?.length > 0 &&
         story.content.page_sections.map((section: any, index: number) => (
-          <StoryblokPageSection
-            key={`page_section_${index}`}
-            content={section.content}
-            alignment={section.alignment}
-            color={section.color}
-          />
+          <StoryblokPageSection key={`page_section_${index}`} {...section} />
         ))}
     </Box>
   );
 };
 
 export async function getStaticProps({ locale, preview = false }: GetStaticPropsContext) {
-  const sbParams = {
-    version: preview ? 'draft' : 'published',
-    ...(preview && { cv: Date.now() }),
-    language: locale,
-  };
+  const storyblokProps = await getStoryblokPageProps('about-our-courses', locale, preview);
 
-  let { data } = await Storyblok.get(`cdn/stories/about-our-courses`, sbParams);
   return {
     props: {
-      storyData: data && data?.story ? data.story : null,
-      preview,
-      sbParams: JSON.stringify(sbParams),
+      ...storyblokProps,
       messages: {
         ...require(`../messages/shared/${locale}.json`),
         ...require(`../messages/navigation/${locale}.json`),
       },
-      locale,
     },
     revalidate: 3600, // revalidate every hour
   };
diff --git a/pages/chat.tsx b/pages/chat.tsx
index 72200e40..fc423924 100644
--- a/pages/chat.tsx
+++ b/pages/chat.tsx
@@ -1,26 +1,24 @@
 import { Box } from '@mui/material';
+import { ISbStoryData, useStoryblokState } from '@storyblok/react';
 import { GetStaticPropsContext, NextPage } from 'next';
 import { useTranslations } from 'next-intl';
 import Head from 'next/head';
-import { StoriesParams, StoryData } from 'storyblok-js-client';
 import { SignUpBanner } from '../components/banner/SignUpBanner';
+import NoDataAvailable from '../components/common/NoDataAvailable';
 import CrispButton from '../components/crisp/CrispButton';
 import Header, { HeaderProps } from '../components/layout/Header';
 import StoryblokPageSection from '../components/storyblok/StoryblokPageSection';
-import Storyblok, { useStoryblok } from '../config/storyblok';
-import { LANGUAGES } from '../constants/enums';
 import { useTypedSelector } from '../hooks/store';
+import { getStoryblokPageProps } from '../utils/getStoryblokPageProps';
 import { getEventUserData } from '../utils/logEvent';
 
 interface Props {
-  story: StoryData;
-  preview: boolean;
-  sbParams: StoriesParams;
-  locale: LANGUAGES;
+  story: ISbStoryData | null;
 }
 
-const Chat: NextPage<Props> = ({ story, preview, sbParams, locale }) => {
-  let configuredStory = useStoryblok(story, preview, sbParams, locale);
+const Chat: NextPage<Props> = ({ story }) => {
+  story = useStoryblokState(story);
+
   const t = useTranslations('Courses');
 
   const userEmail = useTypedSelector((state) => state.user.email);
@@ -29,11 +27,15 @@ const Chat: NextPage<Props> = ({ story, preview, sbParams, locale }) => {
   const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
   const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
 
+  if (!story) {
+    return <NoDataAvailable />;
+  }
+
   const headerProps: HeaderProps = {
-    title: configuredStory.content.title,
-    introduction: configuredStory.content.description,
-    imageSrc: configuredStory.content.header_image.filename,
-    translatedImageAlt: configuredStory.content.header_image.alt,
+    title: story.content.title,
+    introduction: story.content.description,
+    imageSrc: story.content.header_image.filename,
+    translatedImageAlt: story.content.header_image.alt,
   };
   const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);
 
@@ -54,14 +56,9 @@ const Chat: NextPage<Props> = ({ story, preview, sbParams, locale }) => {
           }
         />
         {userToken ? (
-          configuredStory.content.page_sections?.length > 0 &&
-          configuredStory.content.page_sections.map((section: any, index: number) => (
-            <StoryblokPageSection
-              key={`page_section_${index}`}
-              content={section.content}
-              alignment={section.alignment}
-              color={section.color}
-            />
+          story.content.page_sections?.length > 0 &&
+          story.content.page_sections.map((section: any, index: number) => (
+            <StoryblokPageSection key={`page_section_${index}`} {...section} />
           ))
         ) : (
           <SignUpBanner />
@@ -72,25 +69,17 @@ const Chat: NextPage<Props> = ({ story, preview, sbParams, locale }) => {
 };
 
 export async function getStaticProps({ locale, preview = false }: GetStaticPropsContext) {
-  let sbParams = {
-    version: preview ? 'draft' : 'published',
-    language: locale,
-    ...(preview && { cv: Date.now() }),
-  };
+  const storyblokProps = await getStoryblokPageProps('chat', locale, preview);
 
-  let { data } = await Storyblok.get(`cdn/stories/chat`, sbParams);
   return {
     props: {
-      story: data ? data.story : null,
-      preview,
-      sbParams: JSON.stringify(sbParams),
+      ...storyblokProps,
       messages: {
         ...require(`../messages/shared/${locale}.json`),
         ...require(`../messages/navigation/${locale}.json`),
         ...require(`../messages/courses/${locale}.json`),
         ...require(`../messages/chat/${locale}.json`),
       },
-      locale,
     },
     revalidate: 3600, // revalidate every hour
   };
diff --git a/pages/courses/[slug].tsx b/pages/courses/[slug].tsx
index 9b9a9c12..6ca30d08 100644
--- a/pages/courses/[slug].tsx
+++ b/pages/courses/[slug].tsx
@@ -1,212 +1,77 @@
-import { Box, Container, Typography } from '@mui/material';
+import {
+  ISbStoriesParams,
+  ISbStoryData,
+  getStoryblokApi,
+  useStoryblokState,
+} from '@storyblok/react';
 import { GetStaticPathsContext, GetStaticPropsContext, NextPage } from 'next';
-import { useTranslations } from 'next-intl';
-import Head from 'next/head';
-import { useEffect, useState } from 'react';
-import { StoriesParams, StoryData } from 'storyblok-js-client';
-import { render } from 'storyblok-rich-text-react-renderer';
-import SessionCard from '../../components/cards/SessionCard';
-import { ContentUnavailable } from '../../components/common/ContentUnavailable';
-import Link from '../../components/common/Link';
-import CourseHeader from '../../components/course/CourseHeader';
-import CourseIntroduction from '../../components/course/CourseIntroduction';
-import CourseStatusHeader from '../../components/course/CourseStatusHeader';
-import Storyblok, { useStoryblok } from '../../config/storyblok';
-import { LANGUAGES, PROGRESS_STATUS } from '../../constants/enums';
-import { COURSE_OVERVIEW_VIEWED } from '../../constants/events';
-import { useTypedSelector } from '../../hooks/store';
-import { rowStyle } from '../../styles/common';
-import { courseIsLiveNow, courseIsLiveSoon } from '../../utils/courseLiveStatus';
-import { determineCourseProgress } from '../../utils/courseProgress';
-import hasAccessToPage from '../../utils/hasAccessToPage';
-import { getEventUserData, logEvent } from '../../utils/logEvent';
-import { RichTextOptions } from '../../utils/richText';
-
-const containerStyle = {
-  backgroundColor: 'secondary.light',
-} as const;
-
-const sessionsContainerStyle = {
-  marginTop: 6,
-} as const;
-
-const cardsContainerStyle = {
-  ...rowStyle,
-  flexDirection: { xs: 'column', md: 'row' },
-  gap: 4,
-} as const;
+import NoDataAvailable from '../../components/common/NoDataAvailable';
+import StoryblokCoursePage, {
+  StoryblokCoursePageProps,
+} from '../../components/storyblok/StoryblokCoursePage';
+import { getStoryblokPageProps } from '../../utils/getStoryblokPageProps';
 
 interface Props {
-  story: StoryData;
-  preview: boolean;
-  sbParams: StoriesParams;
-  locale: LANGUAGES;
+  story: ISbStoryData | null;
 }
 
-const CourseOverview: NextPage<Props> = ({ story, preview, sbParams, locale }) => {
-  const t = useTranslations('Courses');
+const CourseOverview: NextPage<Props> = ({ story }) => {
+  story = useStoryblokState(story);
 
-  story = useStoryblok(story, preview, sbParams, locale);
-
-  const userCreatedAt = useTypedSelector((state) => state.user.createdAt);
-  const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
-  const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
-  const courses = useTypedSelector((state) => state.courses);
-
-  const [incorrectAccess, setIncorrectAccess] = useState<boolean>(true);
-  const [courseProgress, setCourseProgress] = useState<PROGRESS_STATUS>(
-    PROGRESS_STATUS.NOT_STARTED,
-  );
-
-  const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);
-
-  const courseComingSoon: boolean = story.content.coming_soon;
-  const courseLiveSoon: boolean = courseIsLiveSoon(story.content);
-  const courseLiveNow: boolean = courseIsLiveNow(story.content);
-  // only show live content to public users
-  const liveCourseAccess = partnerAccesses.length === 0 && !partnerAdmin.id;
-
-  const eventData = {
-    ...eventUserData,
-    course_name: story.content.name,
-    course_storyblok_id: story.id,
-    course_coming_soon: courseComingSoon,
-    course_live_soon: courseLiveSoon,
-    course_live_now: courseLiveNow,
-    course_progress: courseProgress,
-  };
-
-  useEffect(() => {
-    const storyPartners = story.content.included_for_partners;
-
-    setIncorrectAccess(!hasAccessToPage(storyPartners, partnerAccesses, partnerAdmin));
-  }, [partnerAccesses, story.content.included_for_partners, partnerAdmin]);
-
-  useEffect(() => {
-    setCourseProgress(determineCourseProgress(courses, story.id));
-  }, [courses, story.id]);
-
-  useEffect(() => {
-    logEvent(COURSE_OVERVIEW_VIEWED, eventData);
-  });
-
-  if (incorrectAccess) {
-    return (
-      <ContentUnavailable
-        title={t('accessGuard.title')}
-        message={t.rich('accessGuard.introduction', {
-          contactLink: (children) => <Link href="/courses">{children}</Link>,
-        })}
-      />
-    );
+  if (!story) {
+    return <NoDataAvailable />;
   }
 
   return (
-    <Box>
-      <Head>
-        <title>{story.content.name}</title>
-      </Head>
-      <CourseHeader story={story} eventData={eventData} courseProgress={courseProgress} />
-      <Container sx={containerStyle}>
-        {courseComingSoon ? (
-          <>
-            {liveCourseAccess && courseLiveSoon ? (
-              <Box maxWidth={700}>
-                <CourseStatusHeader status="liveSoon" />
-                {render(story.content.live_soon_content, RichTextOptions)}
-              </Box>
-            ) : (
-              <Box maxWidth={700}>
-                <CourseStatusHeader status="comingSoon" />
-                {render(story.content.coming_soon_content, RichTextOptions)}
-              </Box>
-            )}
-          </>
-        ) : (
-          <>
-            {story.content.video && (
-              <CourseIntroduction
-                course={story}
-                eventData={eventData}
-                courseLiveSoon={courseLiveSoon}
-                courseLiveNow={courseLiveNow}
-                liveCourseAccess={liveCourseAccess}
-              />
-            )}
-            <Box sx={sessionsContainerStyle}>
-              {story.content.weeks.map((week: any) => {
-                return (
-                  <Box mb={6} key={week.name.split(':')[0]}>
-                    <Typography mb={{ xs: 0, md: 3.5 }} key={week.name} component="h2" variant="h2">
-                      {week.name}
-                    </Typography>
-                    <Box sx={cardsContainerStyle}>
-                      {week.sessions.map((session: any) => {
-                        const position = `${t('session')} ${session.position / 10 - 1}`;
-
-                        return (
-                          <SessionCard
-                            key={session.id}
-                            session={session}
-                            sessionSubtitle={position}
-                            storyblokCourseId={story.id}
-                          />
-                        );
-                      })}
-                    </Box>
-                  </Box>
-                );
-              })}
-            </Box>
-          </>
-        )}
-      </Container>
-    </Box>
+    <StoryblokCoursePage {...(story.content as StoryblokCoursePageProps)} storyId={story.id} />
   );
 };
 
 export async function getStaticProps({ locale, preview = false, params }: GetStaticPropsContext) {
   const slug = params?.slug instanceof Array ? params.slug.join('/') : params?.slug;
 
-  const sbParams = {
+  const storyblokProps = await getStoryblokPageProps(`courses/${slug}`, locale, preview, {
     resolve_relations: 'week.sessions',
-    version: preview ? 'draft' : 'published',
-    language: locale,
-    ...(preview && { cv: Date.now() }),
-  };
-
-  let { data } = await Storyblok.get(`cdn/stories/courses/${slug}`, sbParams);
+  });
 
   return {
     props: {
-      story: data ? data.story : null,
-      preview,
-      sbParams: JSON.stringify(sbParams),
+      ...storyblokProps,
       messages: {
         ...require(`../../messages/shared/${locale}.json`),
         ...require(`../../messages/navigation/${locale}.json`),
         ...require(`../../messages/courses/${locale}.json`),
       },
-      locale,
     },
     revalidate: 3600, // revalidate every hour
   };
 }
 
 export async function getStaticPaths({ locales }: GetStaticPathsContext) {
-  let { data } = await Storyblok.get('cdn/links/?starts_with=courses/');
+  let sbParams: ISbStoriesParams = {
+    published: true,
+    starts_with: 'courses/',
+    filter_query: {
+      component: {
+        in: 'Course',
+      },
+    },
+  };
+
+  const storyblokApi = getStoryblokApi();
+  let courses = await storyblokApi.getAll('cdn/links', sbParams);
 
   let paths: any = [];
-  Object.keys(data.links).forEach((linkKey) => {
-    if (
-      !data.links[linkKey].is_startpage ||
-      isAlternativelyHandledCourse(data.links[linkKey].slug)
-    ) {
+
+  courses.forEach((course: Partial<ISbStoryData>) => {
+    if (!course.slug) return;
+
+    if (!course.is_startpage || isAlternativelyHandledCourse(course.slug)) {
       return;
     }
 
     // get array for slug because of catch all
-    const slug = data.links[linkKey].slug;
+    const slug = course.slug;
     let splittedSlug = slug.split('/');
 
     if (locales) {
diff --git a/pages/courses/[slug]/[sessionSlug].tsx b/pages/courses/[slug]/[sessionSlug].tsx
index 9b66094b..6db55971 100644
--- a/pages/courses/[slug]/[sessionSlug].tsx
+++ b/pages/courses/[slug]/[sessionSlug].tsx
@@ -1,437 +1,80 @@
-import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';
-import CircleIcon from '@mui/icons-material/Circle';
-import LinkIcon from '@mui/icons-material/Link';
-import SlowMotionVideoIcon from '@mui/icons-material/SlowMotionVideo';
-import StarBorderIcon from '@mui/icons-material/StarBorder';
-import { Box, Button, Container, Link as MuiLink, Typography } from '@mui/material';
-import { GetStaticPathsContext, GetStaticPropsContext, NextPage } from 'next';
-import { useTranslations } from 'next-intl';
-import Head from 'next/head';
-import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
-import { StoriesParams, StoryData } from 'storyblok-js-client';
-import { render } from 'storyblok-rich-text-react-renderer';
-import { useStartSessionMutation } from '../../../app/api';
-import { Course, Session } from '../../../app/coursesSlice';
-import SessionContentCard from '../../../components/cards/SessionContentCard';
-import Link from '../../../components/common/Link';
-import CrispButton from '../../../components/crisp/CrispButton';
-import Header from '../../../components/layout/Header';
-import { SessionCompleteButton } from '../../../components/session/SessionCompleteButton';
-import Video from '../../../components/video/Video';
-import VideoTranscriptModal from '../../../components/video/VideoTranscriptModal';
-import Storyblok, { useStoryblok } from '../../../config/storyblok';
-import { LANGUAGES, PROGRESS_STATUS } from '../../../constants/enums';
 import {
-  SESSION_STARTED_ERROR,
-  SESSION_STARTED_REQUEST,
-  SESSION_STARTED_SUCCESS,
-  SESSION_VIDEO_TRANSCRIPT_CLOSED,
-  SESSION_VIDEO_TRANSCRIPT_OPENED,
-  SESSION_VIEWED,
-} from '../../../constants/events';
-import { useTypedSelector } from '../../../hooks/store';
-import illustrationPerson4Peach from '../../../public/illustration_person4_peach.svg';
-import { columnStyle } from '../../../styles/common';
-import { courseIsLiveNow, courseIsLiveSoon } from '../../../utils/courseLiveStatus';
-import hasAccessToPage from '../../../utils/hasAccessToPage';
-import logEvent, { getEventUserData } from '../../../utils/logEvent';
-import { RichTextOptions } from '../../../utils/richText';
-
-const containerStyle = {
-  backgroundColor: 'secondary.light',
-} as const;
-
-const cardColumnStyle = {
-  ...columnStyle,
-  alignItems: 'center',
-  gap: { xs: 2, md: 3 },
-} as const;
-
-const dotsStyle = {
-  ...columnStyle,
-  color: 'primary.dark',
-  gap: { xs: 1, md: 1.25 },
-} as const;
-
-const dotStyle = {
-  width: { xs: 8, md: 10 },
-  height: { xs: 8, md: 10 },
-} as const;
-
-const sessionSubtitleStyle = {
-  marginTop: '0.75rem !important',
-} as const;
-
-const crispButtonContainerStyle = {
-  paddingTop: 4,
-  paddingBottom: 1,
-  display: 'flex',
-} as const;
-
-const chatDetailIntroStyle = { marginTop: 3, marginBottom: 1.5 } as const;
+  ISbStoriesParams,
+  ISbStoryData,
+  getStoryblokApi,
+  useStoryblokState,
+} from '@storyblok/react';
+import { GetStaticPathsContext, GetStaticPropsContext, NextPage } from 'next';
+import NoDataAvailable from '../../../components/common/NoDataAvailable';
+import StoryblokSessionPage, {
+  StoryblokSessionPageProps,
+} from '../../../components/storyblok/StoryblokSessionPage';
+import { getStoryblokPageProps } from '../../../utils/getStoryblokPageProps';
 
 interface Props {
-  story: StoryData;
-  preview: boolean;
-  sbParams: StoriesParams;
-  locale: LANGUAGES;
+  story: ISbStoryData | null;
 }
 
-const SessionDetail: NextPage<Props> = ({ story, preview, sbParams, locale }) => {
-  const t = useTranslations('Courses');
-  const router = useRouter();
-
-  story = useStoryblok(story, preview, sbParams, locale);
-  const course = story.content.course.content;
-
-  const userCreatedAt = useTypedSelector((state) => state.user.createdAt);
-  const userEmail = useTypedSelector((state) => state.user.email);
-  const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
-  const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
-  const courses = useTypedSelector((state) => state.courses);
-
-  const [incorrectAccess, setIncorrectAccess] = useState<boolean>(true);
-  const [liveChatAccess, setLiveChatAccess] = useState<boolean>(false);
-  const [sessionProgress, setSessionProgress] = useState<PROGRESS_STATUS>(
-    PROGRESS_STATUS.NOT_STARTED,
-  );
-  const [openTranscriptModal, setOpenTranscriptModal] = useState<boolean | null>(null);
-  const [videoStarted, setVideoStarted] = useState<boolean>(false);
-  const [weekString, setWeekString] = useState<string>('');
-  const [startSession, { isLoading: startSessionIsLoading }] = useStartSessionMutation();
-
-  const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);
-  const courseComingSoon: boolean = course.coming_soon;
-  const courseLiveSoon: boolean = courseIsLiveSoon(course);
-  const courseLiveNow: boolean = courseIsLiveNow(course);
-  // only show live content to public users
-  const liveCourseAccess = partnerAccesses.length === 0 && !partnerAdmin.id;
-
-  const eventData = {
-    ...eventUserData,
-    session_name: story.content.name,
-    session_storyblok_id: story.id,
-    session_progress: sessionProgress,
-    course_name: story.content.course.content.name,
-    course_storyblok_id: story.content.course.id,
-    course_coming_soon: courseComingSoon,
-    course_live_soon: courseLiveSoon,
-    course_live_now: courseLiveNow,
-  };
-
-  const headerProps = {
-    title: story.content.name,
-    introduction: story.content.description,
-    imageSrc: illustrationPerson4Peach,
-    imageAlt: 'alt.personTea',
-  };
-
-  useEffect(() => {
-    const coursePartners = course.included_for_partners;
-    setIncorrectAccess(!hasAccessToPage(coursePartners, partnerAccesses, partnerAdmin));
-
-    const liveAccess = partnerAccesses.find(
-      (partnerAccess) => partnerAccess.featureLiveChat === true,
-    );
-
-    if (liveAccess || liveCourseAccess) setLiveChatAccess(true);
-  }, [partnerAccesses, course.included_for_partners, liveCourseAccess, partnerAdmin]);
-
-  useEffect(() => {
-    course.weeks.map((week: any) => {
-      week.sessions.map((session: any) => {
-        session === story.uuid && setWeekString(week.name);
-      });
-    });
-
-    const userCourse = courses.find(
-      (course: Course) => Number(course.storyblokId) === story.content.course.id,
-    );
-
-    if (userCourse) {
-      const userSession = userCourse.sessions.find(
-        (session: Session) => Number(session.storyblokId) === story.id,
-      );
-
-      if (userSession) {
-        userSession.completed
-          ? setSessionProgress(PROGRESS_STATUS.COMPLETED)
-          : setSessionProgress(PROGRESS_STATUS.STARTED);
-      }
-    }
-  }, [courses, course.weeks, story]);
-
-  useEffect(() => {
-    if (openTranscriptModal === null) return;
+const SessionDetail: NextPage<Props> = ({ story }) => {
+  story = useStoryblokState(story);
 
-    logEvent(
-      openTranscriptModal ? SESSION_VIDEO_TRANSCRIPT_OPENED : SESSION_VIDEO_TRANSCRIPT_CLOSED,
-      {
-        ...eventData,
-        session_name: story.content.name,
-        course_name: story.content.name,
-      },
-    );
-    if (openTranscriptModal && sessionProgress === PROGRESS_STATUS.NOT_STARTED) {
-      callStartSession();
-    }
-  }, [openTranscriptModal]);
-
-  async function callStartSession() {
-    logEvent(SESSION_STARTED_REQUEST, {
-      ...eventData,
-      session_name: story.content.name,
-      course_name: story.content.name,
-    });
-
-    const startSessionResponse = await startSession({
-      storyblokId: story.id,
-    });
-
-    if ('data' in startSessionResponse) {
-      logEvent(SESSION_STARTED_SUCCESS, eventData);
-    }
-
-    if ('error' in startSessionResponse) {
-      const error = startSessionResponse.error;
-
-      logEvent(SESSION_STARTED_ERROR, eventData);
-      (window as any).Rollbar?.error('Session started error', error);
-
-      throw error;
-    }
+  if (!story) {
+    return <NoDataAvailable />;
   }
 
-  useEffect(() => {
-    if (!videoStarted || sessionProgress !== PROGRESS_STATUS.NOT_STARTED) return;
-
-    if (videoStarted) {
-      callStartSession();
-    }
-  }, [videoStarted]);
-
-  useEffect(() => {
-    logEvent(SESSION_VIEWED, eventData);
-  });
-
-  const Dots = () => {
-    return (
-      <Box sx={dotsStyle}>
-        <CircleIcon sx={dotStyle} />
-        <CircleIcon sx={dotStyle} />
-      </Box>
-    );
-  };
-
   return (
-    <Box>
-      <Head>
-        <title>{story.content.name}</title>
-      </Head>
-      {incorrectAccess ? (
-        <Container sx={containerStyle}></Container>
-      ) : (
-        <Box>
-          <Header
-            title={headerProps.title}
-            introduction={headerProps.introduction}
-            imageSrc={headerProps.imageSrc}
-            imageAlt={headerProps.imageAlt}
-            progressStatus={sessionProgress}
-          >
-            <Button variant="outlined" href="/courses" size="small" component={Link}>
-              Courses
-            </Button>
-
-            <CircleIcon color="error" sx={{ ...dotStyle, marginX: 1 }} />
-
-            <Button
-              variant="outlined"
-              href={`/${story.content.course.full_slug}`}
-              size="small"
-              component={Link}
-            >
-              {course.name}
-            </Button>
-            <Typography sx={sessionSubtitleStyle} variant="body2">
-              {weekString} - {t('session')} {story.position / 10 - 1}
-            </Typography>
-          </Header>
-          <Container sx={containerStyle}>
-            {story.content.coming_soon && (
-              <Box maxWidth={700}>{render(story.content.coming_soon_content, RichTextOptions)}</Box>
-            )}
-            {!story.content.coming_soon && (
-              <Box sx={cardColumnStyle}>
-                {story.content.video && (
-                  <>
-                    <SessionContentCard
-                      title={t('sessionDetail.videoTitle')}
-                      titleIcon={SlowMotionVideoIcon}
-                      eventPrefix="SESSION_VIDEO"
-                      eventData={eventData}
-                      initialExpanded={true}
-                    >
-                      <Typography mb={3}>
-                        {t.rich('sessionDetail.videoDescription', {
-                          transcriptLink: (children) => (
-                            <MuiLink
-                              component="button"
-                              variant="body1"
-                              onClick={() => setOpenTranscriptModal(true)}
-                            >
-                              {children}
-                            </MuiLink>
-                          ),
-                        })}
-                      </Typography>
-                      <Video
-                        url={story.content.video.url}
-                        setVideoStarted={setVideoStarted}
-                        eventData={eventData}
-                        eventPrefix="SESSION"
-                        containerStyles={{ mx: 'auto', my: 2 }}
-                      />
-                      <VideoTranscriptModal
-                        videoName={story.content.name}
-                        content={story.content.video_transcript}
-                        setOpenTranscriptModal={setOpenTranscriptModal}
-                        openTranscriptModal={openTranscriptModal}
-                      />
-                    </SessionContentCard>
-                  </>
-                )}
-                {story.content.activity.content &&
-                  (story.content.activity.content?.length > 1 ||
-                    story.content.activity.content[0].content) && (
-                    <>
-                      <Dots />
-                      <SessionContentCard
-                        title={t('sessionDetail.activityTitle')}
-                        titleIcon={StarBorderIcon}
-                        richtextContent
-                        eventPrefix="SESSION_ACTIVITY"
-                        eventData={eventData}
-                      >
-                        <>{render(story.content.activity, RichTextOptions)}</>
-                      </SessionContentCard>
-                    </>
-                  )}
-                {story.content.bonus.content &&
-                  (story.content.bonus.content?.length > 1 ||
-                    story.content.bonus.content[0].content) && (
-                    <>
-                      <Dots />
-                      <SessionContentCard
-                        title={t('sessionDetail.bonusTitle')}
-                        titleIcon={LinkIcon}
-                        richtextContent
-                        eventPrefix="SESSION_BONUS_CONTENT"
-                        eventData={eventData}
-                      >
-                        <>{render(story.content.bonus, RichTextOptions)}</>
-                      </SessionContentCard>
-                    </>
-                  )}
-                {liveChatAccess && (
-                  <>
-                    <Dots />
-                    <SessionContentCard
-                      title={t('sessionDetail.chat.title')}
-                      titleIcon={ChatBubbleOutlineIcon}
-                      titleIconSize={24}
-                      eventPrefix="SESSION_CHAT"
-                      eventData={eventData}
-                    >
-                      <Typography paragraph>{t('sessionDetail.chat.description')}</Typography>
-                      <Typography paragraph>{t('sessionDetail.chat.videoIntro')}</Typography>
-                      <Video
-                        eventPrefix="SESSION_CHAT_VIDEO"
-                        eventData={eventData}
-                        url={t('sessionDetail.chat.videoLink')}
-                        containerStyles={{ mx: 'auto', my: 2 }}
-                      ></Video>
-                      <Box sx={chatDetailIntroStyle}>
-                        <Typography>{t('sessionDetail.chat.detailIntro')}</Typography>
-                      </Box>
-                      <Box>
-                        <ul>
-                          <li>{t('sessionDetail.chat.detailPrivacy')}</li>
-                          <li>{t('sessionDetail.chat.detailTimezone')}</li>
-                          <li>{t('sessionDetail.chat.detailLanguage')}</li>
-                          <li>{t('sessionDetail.chat.detailLegal')}</li>
-                          <li>{t('sessionDetail.chat.detailImmediateHelp')}</li>
-                        </ul>
-                      </Box>
-                      <Box sx={crispButtonContainerStyle}>
-                        <CrispButton
-                          email={userEmail}
-                          eventData={eventData}
-                          buttonText={t('sessionDetail.chat.startButton')}
-                        />
-                      </Box>
-                    </SessionContentCard>
-                  </>
-                )}
-                {sessionProgress !== PROGRESS_STATUS.COMPLETED && (
-                  <SessionCompleteButton story={story} eventData={eventData} />
-                )}
-              </Box>
-            )}
-          </Container>
-        </Box>
-      )}
-    </Box>
+    <StoryblokSessionPage
+      {...(story.content as StoryblokSessionPageProps)}
+      storyId={story.id}
+      storyUuid={story.uuid}
+      storyPosition={story.position}
+    />
   );
 };
 
 export async function getStaticProps({ locale, preview = false, params }: GetStaticPropsContext) {
-  let slug = params?.slug instanceof Array ? params.slug.join('/') : params?.slug;
-  let sessionSlug =
+  const slug = params?.slug instanceof Array ? params.slug.join('/') : params?.slug;
+  const sessionSlug =
     params?.sessionSlug instanceof Array ? params.sessionSlug.join('/') : params?.sessionSlug;
+  const fullSlug = `courses/${slug}/${sessionSlug}`;
 
-  const sbParams = {
+  const storyblokProps = await getStoryblokPageProps(fullSlug, locale, preview, {
     resolve_relations: 'Session.course',
-    version: preview ? 'draft' : 'published',
-    language: locale,
-    ...(preview && { cv: Date.now() }),
-  };
-
-  let { data } = await Storyblok.get(`cdn/stories/courses/${slug}/${sessionSlug}/`, sbParams);
+  });
 
   return {
     props: {
-      story: data ? data.story : null,
-      preview,
-      sbParams: JSON.stringify(sbParams),
+      ...storyblokProps,
       messages: {
         ...require(`../../../messages/shared/${locale}.json`),
         ...require(`../../../messages/navigation/${locale}.json`),
         ...require(`../../../messages/courses/${locale}.json`),
       },
-      locale,
     },
-
     revalidate: 3600, // revalidate every hour
   };
 }
 
 export async function getStaticPaths({ locales }: GetStaticPathsContext) {
-  let { data } = await Storyblok.get('cdn/links/?starts_with=courses/');
+  let sbParams: ISbStoriesParams = {
+    published: true,
+    starts_with: 'courses/',
+  };
+
+  const storyblokApi = getStoryblokApi();
+  let sessions = await storyblokApi.getAll('cdn/links', sbParams);
 
   let paths: any = [];
-  Object.keys(data.links).forEach((linkKey) => {
-    if (
-      data.links[linkKey].is_startpage ||
-      data.links[linkKey].is_folder ||
-      isAlternativelyHandledSession(data.links[linkKey].slug)
-    ) {
+
+  sessions.forEach((session: Partial<ISbStoryData>) => {
+    const slug = session.slug;
+    if (!slug) return;
+
+    if (session.is_startpage || session.is_folder || isAlternativelyHandledSession(slug)) {
       return;
     }
 
     // get array for slug because of catch all
-    const slug = data.links[linkKey].slug;
     let splittedSlug = slug.split('/');
 
     if (locales) {
diff --git a/pages/courses/image-based-abuse-and-rebuilding-ourselves/[sessionSlug].tsx b/pages/courses/image-based-abuse-and-rebuilding-ourselves/[sessionSlug].tsx
index d49c7b73..0c27792b 100644
--- a/pages/courses/image-based-abuse-and-rebuilding-ourselves/[sessionSlug].tsx
+++ b/pages/courses/image-based-abuse-and-rebuilding-ourselves/[sessionSlug].tsx
@@ -1,385 +1,54 @@
-import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';
-import CircleIcon from '@mui/icons-material/Circle';
-import SlowMotionVideoIcon from '@mui/icons-material/SlowMotionVideo';
-import StarBorderIcon from '@mui/icons-material/StarBorder';
-import { Box, Button, Container, Link as MuiLink, Typography } from '@mui/material';
-import { GetStaticPathsContext, GetStaticPropsContext, NextPage } from 'next';
-import { useTranslations } from 'next-intl';
-import Head from 'next/head';
-import { useEffect, useState } from 'react';
-import { StoriesParams, StoryData } from 'storyblok-js-client';
-import { render } from 'storyblok-rich-text-react-renderer';
-import { useStartSessionMutation } from '../../../app/api';
-import { Course, Session } from '../../../app/coursesSlice';
-import SessionContentCard from '../../../components/cards/SessionContentCard';
-import { Dots } from '../../../components/common/Dots';
-import Link from '../../../components/common/Link';
-import CrispButton from '../../../components/crisp/CrispButton';
-import Header from '../../../components/layout/Header';
-import MultipleBonusContent from '../../../components/session/MultipleBonusContent';
-import { SessionCompleteButton } from '../../../components/session/SessionCompleteButton';
-import Video from '../../../components/video/Video';
-import VideoTranscriptModal from '../../../components/video/VideoTranscriptModal';
-import Storyblok, { useStoryblok } from '../../../config/storyblok';
-import { LANGUAGES, PROGRESS_STATUS } from '../../../constants/enums';
 import {
-  SESSION_STARTED_ERROR,
-  SESSION_STARTED_REQUEST,
-  SESSION_STARTED_SUCCESS,
-  SESSION_VIDEO_TRANSCRIPT_CLOSED,
-  SESSION_VIDEO_TRANSCRIPT_OPENED,
-  SESSION_VIEWED,
-} from '../../../constants/events';
-import { useTypedSelector } from '../../../hooks/store';
-import illustrationPerson4Peach from '../../../public/illustration_person4_peach.svg';
-import { columnStyle } from '../../../styles/common';
-import hasAccessToPage from '../../../utils/hasAccessToPage';
-import logEvent, { getEventUserData } from '../../../utils/logEvent';
-import { RichTextOptions } from '../../../utils/richText';
-
-const containerStyle = {
-  backgroundColor: 'secondary.light',
-  paddingLeft: { xs: 4, sm: 6 },
-  paddingRight: { xs: 4, sm: 6 },
-  paddingTop: { xs: 6, sm: 8, lg: 10 },
-  paddingBottom: { xs: 6, sm: 8, lg: 10 },
-} as const;
-
-const cardColumnStyle = {
-  ...columnStyle,
-  alignItems: 'center',
-  gap: { xs: 2, md: 3 },
-} as const;
-
-const dotsStyle = {
-  ...columnStyle,
-  color: 'primary.dark',
-  gap: { xs: 1, md: 1.25 },
-} as const;
-
-const dotStyle = {
-  width: { xs: 8, md: 10 },
-  height: { xs: 8, md: 10 },
-} as const;
-
-const sessionSubtitleStyle = {
-  marginTop: '0.75rem !important',
-} as const;
-
-const crispButtonContainerStyle = {
-  paddingTop: 4,
-  paddingBottom: 1,
-  display: 'flex',
-} as const;
-
-const chatDetailIntroStyle = { marginTop: 3, marginBottom: 1.5 } as const;
+  ISbStoriesParams,
+  ISbStoryData,
+  getStoryblokApi,
+  useStoryblokState,
+} from '@storyblok/react';
+import { GetStaticPathsContext, GetStaticPropsContext, NextPage } from 'next';
+import NoDataAvailable from '../../../components/common/NoDataAvailable';
+import StoryblokSessionIbaPage, {
+  StoryblokSessionIbaPageProps,
+} from '../../../components/storyblok/StoryblokSessionIbaPage';
+import { getStoryblokPageProps } from '../../../utils/getStoryblokPageProps';
 
 interface Props {
-  story: StoryData;
-  preview: boolean;
-  sbParams: StoriesParams;
-  locale: LANGUAGES;
+  story: ISbStoryData | null;
 }
 
-const SessionDetail: NextPage<Props> = ({ story, preview, sbParams, locale }) => {
-  const t = useTranslations('Courses');
-
-  story = useStoryblok(story, preview, sbParams, locale);
-  const course = story.content.course.content;
-
-  const userCreatedAt = useTypedSelector((state) => state.user.createdAt);
-  const userEmail = useTypedSelector((state) => state.user.email);
-  const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
-  const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
-  const courses = useTypedSelector((state) => state.courses);
-
-  const [incorrectAccess, setIncorrectAccess] = useState<boolean>(true);
-  const [liveChatAccess, setLiveChatAccess] = useState<boolean>(false);
-  const [sessionProgress, setSessionProgress] = useState<PROGRESS_STATUS>(
-    PROGRESS_STATUS.NOT_STARTED,
-  );
-  const [openTranscriptModal, setOpenTranscriptModal] = useState<boolean | null>(null);
-  const [videoStarted, setVideoStarted] = useState<boolean>(false);
-  const [weekString, setWeekString] = useState<string>('');
-  const [startSession] = useStartSessionMutation();
-
-  const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);
-
-  const eventData = {
-    ...eventUserData,
-    session_name: story.content.name,
-    session_storyblok_id: story.id,
-    session_progress: sessionProgress,
-    course_name: story.content.course.content.name,
-    course_storyblok_id: story.content.course.id,
-  };
-
-  const headerProps = {
-    title: story.content.name,
-    introduction: story.content.description,
-    imageSrc: illustrationPerson4Peach,
-    imageAlt: 'alt.personTea',
-  };
-
-  // TODO refactor chat access logic
-  useEffect(() => {
-    const coursePartners = course.included_for_partners;
-    setIncorrectAccess(!hasAccessToPage(coursePartners, partnerAccesses, partnerAdmin));
-
-    const liveAccess = partnerAccesses.find(
-      (partnerAccess) => partnerAccess.featureLiveChat === true,
-    );
-
-    if (liveAccess) setLiveChatAccess(true);
-  }, [partnerAccesses, course.included_for_partners, partnerAdmin]);
-
-  // TODO refactor session completion logic
-  useEffect(() => {
-    course.weeks.map((week: any) => {
-      week.sessions.map((session: any) => {
-        session === story.uuid && setWeekString(week.name);
-      });
-    });
-
-    const userCourse = courses.find(
-      (course: Course) => Number(course.storyblokId) === story.content.course.id,
-    );
-
-    if (userCourse) {
-      const userSession = userCourse.sessions.find(
-        (session: Session) => Number(session.storyblokId) === story.id,
-      );
-
-      if (userSession) {
-        userSession.completed
-          ? setSessionProgress(PROGRESS_STATUS.COMPLETED)
-          : setSessionProgress(PROGRESS_STATUS.STARTED);
-      }
-    }
-  }, [courses, story]);
-
-  useEffect(() => {
-    if (openTranscriptModal === null) return;
-
-    logEvent(
-      openTranscriptModal ? SESSION_VIDEO_TRANSCRIPT_OPENED : SESSION_VIDEO_TRANSCRIPT_CLOSED,
-      {
-        ...eventData,
-        session_name: story.content.name,
-        course_name: story.content.name,
-      },
-    );
-    if (openTranscriptModal && sessionProgress === PROGRESS_STATUS.NOT_STARTED) {
-      callStartSession();
-    }
-  }, [openTranscriptModal]);
-
-  async function callStartSession() {
-    logEvent(SESSION_STARTED_REQUEST, {
-      ...eventData,
-      session_name: story.content.name,
-      course_name: story.content.name,
-    });
-
-    const startSessionResponse = await startSession({
-      storyblokId: story.id,
-    });
-
-    if ('data' in startSessionResponse) {
-      logEvent(SESSION_STARTED_SUCCESS, eventData);
-    }
-
-    if ('error' in startSessionResponse) {
-      const error = startSessionResponse.error;
+const SessionDetail: NextPage<Props> = ({ story }) => {
+  story = useStoryblokState(story);
 
-      logEvent(SESSION_STARTED_ERROR, eventData);
-      (window as any).Rollbar?.error('Session started error', error);
-
-      throw error;
-    }
+  if (!story) {
+    return <NoDataAvailable />;
   }
 
-  useEffect(() => {
-    if (!videoStarted || sessionProgress !== PROGRESS_STATUS.NOT_STARTED) return;
-
-    if (videoStarted) {
-      callStartSession();
-    }
-  }, [videoStarted]);
-
-  useEffect(() => {
-    logEvent(SESSION_VIEWED, eventData);
-  });
-
   return (
-    <Box>
-      <Head>
-        <title>{story.content.name}</title>
-      </Head>
-      {incorrectAccess ? (
-        <Container sx={containerStyle}></Container>
-      ) : (
-        <Box>
-          <Header
-            title={headerProps.title}
-            introduction={headerProps.introduction}
-            imageSrc={headerProps.imageSrc}
-            imageAlt={headerProps.imageAlt}
-            progressStatus={sessionProgress}
-          >
-            <Button variant="outlined" href="/courses" size="small" component={Link}>
-              Courses
-            </Button>
-
-            <CircleIcon color="error" sx={{ ...dotStyle, marginX: 1 }} />
-
-            <Button
-              variant="outlined"
-              href={`/${story.content.course.full_slug}`}
-              size="small"
-              component={Link}
-            >
-              {course.name}
-            </Button>
-            <Typography sx={sessionSubtitleStyle} variant="body2">
-              {weekString} - {story.content.subtitle}
-            </Typography>
-          </Header>
-          <Box sx={containerStyle}>
-            <Box sx={cardColumnStyle}>
-              {story.content.video && (
-                <>
-                  <SessionContentCard
-                    title={t('sessionDetail.videoTitle')}
-                    titleIcon={SlowMotionVideoIcon}
-                    eventPrefix="SESSION_VIDEO"
-                    eventData={eventData}
-                    initialExpanded={true}
-                  >
-                    <Typography mb={3}>
-                      {t.rich('sessionDetail.videoDescription', {
-                        transcriptLink: (children) => (
-                          <MuiLink
-                            component="button"
-                            variant="body1"
-                            onClick={() => setOpenTranscriptModal(true)}
-                          >
-                            {children}
-                          </MuiLink>
-                        ),
-                      })}
-                    </Typography>
-                    <Video
-                      url={story.content.video.url}
-                      setVideoStarted={setVideoStarted}
-                      eventData={eventData}
-                      eventPrefix="SESSION"
-                      containerStyles={{ mx: 'auto', my: 2 }}
-                    />
-                    <VideoTranscriptModal
-                      videoName={story.content.name}
-                      content={story.content.video_transcript}
-                      setOpenTranscriptModal={setOpenTranscriptModal}
-                      openTranscriptModal={openTranscriptModal}
-                    />
-                  </SessionContentCard>
-                </>
-              )}
-              {story.content.activity.content &&
-                (story.content.activity.content?.length > 1 ||
-                  story.content.activity.content[0].content) && (
-                  <>
-                    <Dots />
-                    <SessionContentCard
-                      title={t('sessionDetail.activityTitle')}
-                      titleIcon={StarBorderIcon}
-                      richtextContent
-                      eventPrefix="SESSION_ACTIVITY"
-                      eventData={eventData}
-                    >
-                      <>{render(story.content.activity, RichTextOptions)}</>
-                    </SessionContentCard>
-                  </>
-                )}
-              {story.content.bonus && <MultipleBonusContent story={story} eventData={eventData} />}
-              {liveChatAccess && (
-                <>
-                  <Dots />
-                  <SessionContentCard
-                    title={t('sessionDetail.chat.title')}
-                    titleIcon={ChatBubbleOutlineIcon}
-                    titleIconSize={24}
-                    eventPrefix="SESSION_CHAT"
-                    eventData={eventData}
-                  >
-                    <Typography paragraph>{t('sessionDetail.chat.description')}</Typography>
-                    <Typography paragraph>{t('sessionDetail.chat.videoIntro')}</Typography>
-                    <Video
-                      eventPrefix="SESSION_CHAT_VIDEO"
-                      eventData={eventData}
-                      url={t('sessionDetail.chat.videoLink')}
-                      containerStyles={{ mx: 'auto', my: 2 }}
-                    ></Video>
-                    <Box sx={chatDetailIntroStyle}>
-                      <Typography>{t('sessionDetail.chat.detailIntro')}</Typography>
-                    </Box>
-                    <Box>
-                      <ul>
-                        <li>{t('sessionDetail.chat.detailPrivacy')}</li>
-                        <li>{t('sessionDetail.chat.detailTimezone')}</li>
-                        <li>{t('sessionDetail.chat.detailLanguage')}</li>
-                        <li>{t('sessionDetail.chat.detailLegal')}</li>
-                        <li>{t('sessionDetail.chat.detailImmediateHelp')}</li>
-                      </ul>
-                    </Box>
-                    <Box sx={crispButtonContainerStyle}>
-                      <CrispButton
-                        email={userEmail}
-                        eventData={eventData}
-                        buttonText={t('sessionDetail.chat.startButton')}
-                      />
-                    </Box>
-                  </SessionContentCard>
-                </>
-              )}
-              {sessionProgress !== PROGRESS_STATUS.COMPLETED && (
-                <SessionCompleteButton story={story} eventData={eventData} />
-              )}
-            </Box>
-          </Box>
-        </Box>
-      )}
-    </Box>
+    <StoryblokSessionIbaPage
+      {...(story.content as StoryblokSessionIbaPageProps)}
+      storyId={story.id}
+      storyUuid={story.uuid}
+      storyPosition={story.position}
+    />
   );
 };
 
 export async function getStaticProps({ locale, preview = false, params }: GetStaticPropsContext) {
   let sessionSlug =
     params?.sessionSlug instanceof Array ? params.sessionSlug.join('/') : params?.sessionSlug;
+  const fullSlug = `courses/image-based-abuse-and-rebuilding-ourselves/${sessionSlug}`;
 
-  const sbParams = {
+  const storyblokProps = await getStoryblokPageProps(fullSlug, locale, preview, {
     resolve_relations: 'session_iba.course',
-    version: preview ? 'draft' : 'published',
-    language: locale,
-    ...(preview && { cv: Date.now() }),
-  };
-
-  let { data } = await Storyblok.get(
-    `cdn/stories/courses/image-based-abuse-and-rebuilding-ourselves/${sessionSlug}/`,
-    sbParams,
-  );
+  });
 
   return {
     props: {
-      story: data ? data.story : null,
-      preview,
-      sbParams: JSON.stringify(sbParams),
+      ...storyblokProps,
       messages: {
         ...require(`../../../messages/shared/${locale}.json`),
         ...require(`../../../messages/navigation/${locale}.json`),
         ...require(`../../../messages/courses/${locale}.json`),
       },
-      locale,
     },
 
     revalidate: 3600, // revalidate every hour
@@ -387,18 +56,25 @@ export async function getStaticProps({ locale, preview = false, params }: GetSta
 }
 
 export async function getStaticPaths({ locales }: GetStaticPathsContext) {
-  let { data } = await Storyblok.get(
-    'cdn/links/?starts_with=courses/image-based-abuse-and-rebuilding-ourselves/',
-  );
+  let sbParams: ISbStoriesParams = {
+    published: true,
+    starts_with: 'courses/image-based-abuse-and-rebuilding-ourselves/',
+  };
+
+  const storyblokApi = getStoryblokApi();
+  let sessions = await storyblokApi.getAll('cdn/links', sbParams);
 
   let paths: any = [];
-  Object.keys(data.links).forEach((linkKey) => {
-    if (data.links[linkKey].is_startpage || data.links[linkKey].is_folder) {
+
+  sessions.forEach((session: Partial<ISbStoryData>) => {
+    const slug = session.slug;
+    if (!slug) return;
+
+    if (session.is_startpage || session.is_folder) {
       return;
     }
 
     // get array for slug because of catch all
-    const slug = data.links[linkKey].slug;
     let splittedSlug = slug.split('/');
 
     if (locales) {
diff --git a/pages/courses/image-based-abuse-and-rebuilding-ourselves/index.tsx b/pages/courses/image-based-abuse-and-rebuilding-ourselves/index.tsx
index d37bedd1..965a3402 100644
--- a/pages/courses/image-based-abuse-and-rebuilding-ourselves/index.tsx
+++ b/pages/courses/image-based-abuse-and-rebuilding-ourselves/index.tsx
@@ -1,155 +1,45 @@
-import { Box, Container, Typography } from '@mui/material';
+import { ISbStoryData, useStoryblokState } from '@storyblok/react';
 import { GetStaticPropsContext, NextPage } from 'next';
-import { useTranslations } from 'next-intl';
-import Head from 'next/head';
-import { useEffect, useState } from 'react';
-import { StoriesParams, StoryData } from 'storyblok-js-client';
-import SessionCard from '../../../components/cards/SessionCard';
-import { ContentUnavailable } from '../../../components/common/ContentUnavailable';
-import Link from '../../../components/common/Link';
-import CourseHeader from '../../../components/course/CourseHeader';
-import CourseIntroduction from '../../../components/course/CourseIntroduction';
-import Storyblok, { useStoryblok } from '../../../config/storyblok';
-import { LANGUAGES, PROGRESS_STATUS } from '../../../constants/enums';
-import { COURSE_OVERVIEW_VIEWED } from '../../../constants/events';
-import { useTypedSelector } from '../../../hooks/store';
-import { rowStyle } from '../../../styles/common';
-import { determineCourseProgress } from '../../../utils/courseProgress';
-import hasAccessToPage from '../../../utils/hasAccessToPage';
-import { getEventUserData, logEvent } from '../../../utils/logEvent';
-
-const containerStyle = {
-  backgroundColor: 'secondary.light',
-} as const;
-
-const sessionsContainerStyle = {
-  marginTop: 6,
-} as const;
-
-const cardsContainerStyle = {
-  ...rowStyle,
-  flexDirection: { xs: 'column', md: 'row' },
-  gap: 4,
-} as const;
+import NoDataAvailable from '../../../components/common/NoDataAvailable';
+import StoryblokCoursePage, {
+  StoryblokCoursePageProps,
+} from '../../../components/storyblok/StoryblokCoursePage';
+import { getStoryblokPageProps } from '../../../utils/getStoryblokPageProps';
 
 interface Props {
-  story: StoryData;
-  preview: boolean;
-  sbParams: StoriesParams;
-  locale: LANGUAGES;
+  story: ISbStoryData | null;
 }
 
-const CourseOverview: NextPage<Props> = ({ story, preview, sbParams, locale }) => {
-  const t = useTranslations('Courses');
-  const tS = useTranslations('Shared');
-
-  story = useStoryblok(story, preview, sbParams, locale);
-
-  const userCreatedAt = useTypedSelector((state) => state.user.createdAt);
-  const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
-  const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
-  const courses = useTypedSelector((state) => state.courses);
-
-  const [incorrectAccess, setIncorrectAccess] = useState<boolean>(true);
-  const [courseProgress, setCourseProgress] = useState<PROGRESS_STATUS>(
-    PROGRESS_STATUS.NOT_STARTED,
-  );
-
-  const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);
-
-  const eventData = {
-    ...eventUserData,
-    course_name: story.content.name,
-    course_storyblok_id: story.id,
-    course_progress: courseProgress,
-  };
-
-  useEffect(() => {
-    const storyPartners = story.content.included_for_partners;
-
-    setIncorrectAccess(!hasAccessToPage(storyPartners, partnerAccesses, partnerAdmin));
-  }, [partnerAccesses, story.content.included_for_partners, partnerAdmin]);
-
-  useEffect(() => {
-    setCourseProgress(determineCourseProgress(courses, story.id));
-  }, [courses, story.id]);
-
-  useEffect(() => {
-    logEvent(COURSE_OVERVIEW_VIEWED, eventData);
-  });
+const CourseOverview: NextPage<Props> = ({ story }) => {
+  story = useStoryblokState(story);
 
-  if (incorrectAccess) {
-    return (
-      <ContentUnavailable
-        title={t('accessGuard.title')}
-        message={t.rich('accessGuard.introduction', {
-          contactLink: (children) => <Link href="/courses">{children}</Link>,
-        })}
-      />
-    );
+  if (!story) {
+    return <NoDataAvailable />;
   }
 
   return (
-    <Box>
-      <Head>
-        <title>{story.content.name}</title>
-      </Head>
-      <CourseHeader story={story} eventData={eventData} courseProgress={courseProgress} />
-      <Container sx={containerStyle}>
-        <>
-          {story.content.video && <CourseIntroduction course={story} eventData={eventData} />}
-          <Box sx={sessionsContainerStyle}>
-            {story.content.weeks.map((week: any) => {
-              return (
-                <Box mb={6} key={week.name.split(':')[0]}>
-                  <Typography mb={{ xs: 0, md: 3.5 }} key={week.name} component="h2" variant="h2">
-                    {week.name}
-                  </Typography>
-                  <Box sx={cardsContainerStyle}>
-                    {week.sessions.map((session: any) => {
-                      return (
-                        <SessionCard
-                          key={session.id}
-                          session={session}
-                          sessionSubtitle={session.content.subtitle}
-                          storyblokCourseId={story.id}
-                        />
-                      );
-                    })}
-                  </Box>
-                </Box>
-              );
-            })}
-          </Box>
-        </>
-      </Container>
-    </Box>
+    <StoryblokCoursePage {...(story.content as StoryblokCoursePageProps)} storyId={story.id} />
   );
 };
 
-export async function getStaticProps({ locale, preview = false, params }: GetStaticPropsContext) {
-  const sbParams = {
-    resolve_relations: 'week.sessions',
-    version: preview ? 'draft' : 'published',
-    language: locale,
-    ...(preview && { cv: Date.now() }),
-  };
-
-  let { data } = await Storyblok.get(
-    `cdn/stories/courses/image-based-abuse-and-rebuilding-ourselves/`,
-    sbParams,
+export async function getStaticProps({ locale, preview = false }: GetStaticPropsContext) {
+  const storyblokProps = await getStoryblokPageProps(
+    'courses/image-based-abuse-and-rebuilding-ourselves/',
+    locale,
+    preview,
+    {
+      resolve_relations: 'week.sessions',
+    },
   );
+
   return {
     props: {
-      story: data ? data.story : null,
-      preview,
-      sbParams: JSON.stringify(sbParams),
+      ...storyblokProps,
       messages: {
         ...require(`../../../messages/shared/${locale}.json`),
         ...require(`../../../messages/navigation/${locale}.json`),
         ...require(`../../../messages/courses/${locale}.json`),
       },
-      locale,
     },
     revalidate: 3600, // revalidate every hour
   };
diff --git a/pages/courses/index.tsx b/pages/courses/index.tsx
index 3e936fe7..d5ed06e0 100644
--- a/pages/courses/index.tsx
+++ b/pages/courses/index.tsx
@@ -1,16 +1,15 @@
 import { Box, Container, Typography } from '@mui/material';
+import { ISbStoriesParams, ISbStoryData, getStoryblokApi } from '@storyblok/react';
 import { GetStaticPropsContext, NextPage } from 'next';
 import { useTranslations } from 'next-intl';
 import Head from 'next/head';
 import { useEffect, useState } from 'react';
-import { StoryData, StoryParams } from 'storyblok-js-client';
 import { SignUpBanner } from '../../components/banner/SignUpBanner';
 import CourseCard from '../../components/cards/CourseCard';
 import LoadingContainer from '../../components/common/LoadingContainer';
 import Header from '../../components/layout/Header';
 import { FeatureFlag } from '../../config/featureFlag';
-import Storyblok from '../../config/storyblok';
-import { LANGUAGES, PROGRESS_STATUS } from '../../constants/enums';
+import { PROGRESS_STATUS } from '../../constants/enums';
 import { COURSE_LIST_VIEWED } from '../../constants/events';
 import { useTypedSelector } from '../../hooks/store';
 import illustrationPerson3Pink from '../../public/illustration_person3_pink.svg';
@@ -32,14 +31,11 @@ const cardColumnStyle = {
 } as const;
 
 interface Props {
-  stories: StoryData[];
-  preview: boolean;
-  sbParams: StoryParams;
-  locale: LANGUAGES;
+  stories: ISbStoryData[];
 }
 
-const CourseList: NextPage<Props> = ({ stories, preview, sbParams, locale }) => {
-  const [loadedCourses, setLoadedCourses] = useState<StoryData[] | null>(null);
+const CourseList: NextPage<Props> = ({ stories }) => {
+  const [loadedCourses, setLoadedCourses] = useState<ISbStoryData[] | null>(null);
   const [coursesStarted, setCoursesStarted] = useState<Array<number>>([]);
   const [coursesCompleted, setCoursesCompleted] = useState<Array<number>>([]);
 
@@ -62,7 +58,7 @@ const CourseList: NextPage<Props> = ({ stories, preview, sbParams, locale }) =>
 
   useEffect(() => {
     logEvent(COURSE_LIST_VIEWED, eventUserData);
-  });
+  }, []);
 
   useEffect(() => {
     if (partnerAdmin && partnerAdmin.partner) {
@@ -80,13 +76,13 @@ const CourseList: NextPage<Props> = ({ stories, preview, sbParams, locale }) =>
         }
       });
 
-      const coursesWithAccess = stories.filter((course) =>
-        userPartners.some((partner) => course.content.included_for_partners.includes(partner)),
+      const coursesWithAccess = stories.filter((story) =>
+        userPartners.some((partner) => story.content.included_for_partners.includes(partner)),
       );
       setLoadedCourses(coursesWithAccess);
     } else {
-      const coursesWithAccess = stories.filter((course) =>
-        course.content.included_for_partners.includes('Public'),
+      const coursesWithAccess = stories.filter((story) =>
+        story.content.included_for_partners.includes('Public'),
       );
       setLoadedCourses(coursesWithAccess);
     }
@@ -127,8 +123,8 @@ const CourseList: NextPage<Props> = ({ stories, preview, sbParams, locale }) =>
     return coursesStarted.includes(courseId)
       ? PROGRESS_STATUS.STARTED
       : coursesCompleted.includes(courseId)
-      ? PROGRESS_STATUS.COMPLETED
-      : null;
+        ? PROGRESS_STATUS.COMPLETED
+        : null;
   };
 
   return (
@@ -187,8 +183,8 @@ const CourseList: NextPage<Props> = ({ stories, preview, sbParams, locale }) =>
 };
 
 export async function getStaticProps({ locale, preview = false }: GetStaticPropsContext) {
-  let sbParams = {
-    language: locale,
+  let sbParams: ISbStoriesParams = {
+    language: locale || 'en',
     version: preview ? 'draft' : 'published',
     starts_with: 'courses/',
     sort_by: 'position:desc',
@@ -197,29 +193,27 @@ export async function getStaticProps({ locale, preview = false }: GetStaticProps
         in: 'Course',
       },
     },
-    ...(preview && { cv: Date.now() }),
   };
 
-  let { data } = await Storyblok.get('cdn/stories/', sbParams);
+  const storyblokApi = getStoryblokApi();
+
+  let { data } = await storyblokApi.get('cdn/stories/', sbParams);
 
   return {
     props: {
       stories: data ? getEnabledCourses(data.stories) : null,
-      preview,
-      sbParams: JSON.stringify(sbParams),
       messages: {
         ...require(`../../messages/shared/${locale}.json`),
         ...require(`../../messages/navigation/${locale}.json`),
         ...require(`../../messages/courses/${locale}.json`),
       },
-      locale,
     },
     revalidate: 3600, // revalidate every hour
   };
 }
 
 // TODO remove this when hindi and french courses are fixed
-const getEnabledCourses = (courseStories: StoryData[]): StoryData[] => {
+const getEnabledCourses = (courseStories: ISbStoryData[]): ISbStoryData[] => {
   // Note that this filter only removes the course from the courses page for the user.
   // If the user navigates to the URL, they may still be able to access the course.
   return courseStories.filter((course) => !FeatureFlag.getDisabledCourses().has(course.full_slug));
diff --git a/pages/index.tsx b/pages/index.tsx
index 74ba5088..1cc76f3b 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,20 +1,20 @@
 import { Box, Button, Card, CardContent, Container, Typography } from '@mui/material';
+import { ISbStoryData, useStoryblokState } from '@storyblok/react';
 import type { NextPage } from 'next';
 import { GetStaticPropsContext } from 'next';
 import { useTranslations } from 'next-intl';
 import Head from 'next/head';
-import { StoriesParams, StoryData } from 'storyblok-js-client';
 import { render } from 'storyblok-rich-text-react-renderer';
 import Link from '../components/common/Link';
+import NoDataAvailable from '../components/common/NoDataAvailable';
 import PartnerHeader from '../components/layout/PartnerHeader';
 import StoryblokPageSection from '../components/storyblok/StoryblokPageSection';
-import Storyblok, { useStoryblok } from '../config/storyblok';
-import { LANGUAGES } from '../constants/enums';
 import { PROMO_GET_STARTED_CLICKED, PROMO_GO_TO_COURSES_CLICKED } from '../constants/events';
 import { useTypedSelector } from '../hooks/store';
 import illustrationBloomHeadYellow from '../public/illustration_bloom_head_yellow.svg';
 import welcomeToBloom from '../public/welcome_to_bloom.svg';
 import { rowStyle } from '../styles/common';
+import { getStoryblokPageProps } from '../utils/getStoryblokPageProps';
 import logEvent, { getEventUserData } from '../utils/logEvent';
 import { RichTextOptions } from '../utils/richText';
 
@@ -39,13 +39,13 @@ const rowItem = {
 } as const;
 
 interface Props {
-  story: StoryData;
+  story: ISbStoryData | null;
   preview: boolean;
-  sbParams: StoriesParams;
-  locale: LANGUAGES;
 }
 
-const Index: NextPage<Props> = ({ story, preview, sbParams, locale }) => {
+const Index: NextPage<Props> = ({ story, preview }) => {
+  story = useStoryblokState(story);
+
   const t = useTranslations('Welcome');
 
   const userToken = useTypedSelector((state) => state.user.token);
@@ -54,8 +54,6 @@ const Index: NextPage<Props> = ({ story, preview, sbParams, locale }) => {
   const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
   const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);
 
-  story = useStoryblok(story, preview, sbParams, locale);
-
   const headerProps = {
     partnerLogoSrc: welcomeToBloom,
     partnerLogoAlt: 'alt.welcomeToBloom',
@@ -63,6 +61,10 @@ const Index: NextPage<Props> = ({ story, preview, sbParams, locale }) => {
     imageAlt: 'alt.bloomHead',
   };
 
+  if (!story) {
+    return <NoDataAvailable />;
+  }
+
   return (
     <Box>
       <Head>
@@ -125,37 +127,25 @@ const Index: NextPage<Props> = ({ story, preview, sbParams, locale }) => {
       </Container>
       {story.content.page_sections?.length > 0 &&
         story.content.page_sections.map((section: any, index: number) => (
-          <StoryblokPageSection
-            key={`page_section_${index}`}
-            content={section.content}
-            alignment={section.alignment}
-            color={section.color}
-          />
+          <StoryblokPageSection key={`page_section_${index}`} {...section} />
         ))}
     </Box>
   );
 };
 
-export async function getStaticProps({ locale, preview = false, params }: GetStaticPropsContext) {
-  const sbParams = {
-    version: preview ? 'draft' : 'published',
-    language: locale,
-    ...(preview && { cv: Date.now() }),
-  };
-
-  let { data } = await Storyblok.get(`cdn/stories/home`, sbParams);
+export async function getStaticProps({ locale, preview = false }: GetStaticPropsContext) {
+  const storyblokProps = await getStoryblokPageProps('home', locale, preview);
 
   return {
     props: {
-      story: data ? data.story : null,
-      preview,
-      sbParams: JSON.stringify(sbParams),
+      ...storyblokProps,
       messages: {
         ...require(`../messages/shared/${locale}.json`),
         ...require(`../messages/navigation/${locale}.json`),
         ...require(`../messages/welcome/${locale}.json`),
+        ...require(`../messages/courses/${locale}.json`),
+        ...require(`../messages/chat/${locale}.json`),
       },
-      locale,
     },
     revalidate: 3600, // revalidate every hour
   };
diff --git a/pages/meet-the-team.tsx b/pages/meet-the-team.tsx
index e8e8cb4b..385eea0e 100644
--- a/pages/meet-the-team.tsx
+++ b/pages/meet-the-team.tsx
@@ -1,19 +1,11 @@
-import { Box, Container, Typography } from '@mui/material';
+import { ISbStoryData, useStoryblokState } from '@storyblok/react';
 import { GetStaticPropsContext, NextPage } from 'next';
-import Head from 'next/head';
-import { useEffect } from 'react';
-import { StoriesParams, StoryData } from 'storyblok-js-client';
-import { render } from 'storyblok-rich-text-react-renderer';
-import TeamMemberCard from '../components/cards/TeamMemberCard';
-import Header from '../components/layout/Header';
-import StoryblokPageSection from '../components/storyblok/StoryblokPageSection';
-import Storyblok, { useStoryblok } from '../config/storyblok';
-import { LANGUAGES } from '../constants/enums';
-import { MEET_THE_TEAM_VIEWED } from '../constants/events';
-import { useTypedSelector } from '../hooks/store';
+import NoDataAvailable from '../components/common/NoDataAvailable';
+import StoryblokMeetTheTeamPage, {
+  StoryblokMeetTheTeamPageProps,
+} from '../components/storyblok/StoryblokMeetTheTeamPage';
 import { columnStyle, rowStyle } from '../styles/common';
-import logEvent, { getEventUserData } from '../utils/logEvent';
-import { RichTextOptions } from '../utils/richText';
+import { getStoryblokPageProps } from '../utils/getStoryblokPageProps';
 
 const coreContainerStyle = {
   backgroundColor: 'secondary.light',
@@ -36,154 +28,29 @@ const cardColumnRowStyle = {
 } as const;
 
 interface Props {
-  story: StoryData;
-  preview: boolean;
-  sbParams: StoriesParams;
-  locale: LANGUAGES;
+  story: ISbStoryData | null;
 }
 
-const MeetTheTeam: NextPage<Props> = ({ story, preview, sbParams, locale }) => {
-  story = useStoryblok(story, preview, sbParams, locale);
+const MeetTheTeam: NextPage<Props> = ({ story }) => {
+  story = useStoryblokState(story);
 
-  const userCreatedAt = useTypedSelector((state) => state.user.createdAt);
-  const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
-  const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
-  const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);
+  if (!story) {
+    return <NoDataAvailable />;
+  }
 
-  const headerProps = {
-    title: story.content.title,
-    introduction: story.content.description,
-    imageSrc: story.content.header_image.filename,
-    translatedImageAlt: story.content.header_image.alt,
-  };
-
-  useEffect(() => {
-    logEvent(MEET_THE_TEAM_VIEWED, eventUserData);
-  });
-
-  return (
-    <Box>
-      <Head>
-        <title>{headerProps.title}</title>
-      </Head>
-      <Header
-        title={headerProps.title}
-        introduction={headerProps.introduction}
-        imageSrc={headerProps.imageSrc}
-        translatedImageAlt={headerProps.translatedImageAlt}
-      />
-      {story.content.page_section_1?.length > 0 && (
-        <StoryblokPageSection
-          content={story.content.page_section_1[0].content}
-          alignment={story.content.page_section_1[0].alignment}
-          color={story.content.page_section_1[0].color}
-        />
-      )}
-      <Container sx={coreContainerStyle}>
-        <Typography variant="h2" component="h2">
-          {story.content.core_team_title}
-        </Typography>
-        {story.content.core_team_description &&
-          // this was clearly expecting a string in the code but it was causing an error because an object was coming through from storyblok.
-          // This is a patch to help with release but should be readdressed
-          typeof story.content.core_team_description === 'string' && (
-            <Typography maxWidth={650}>{story.content.core_team_description}</Typography>
-          )}
-        <Box sx={cardColumnRowStyle}>
-          <Box sx={cardColumnStyle}>
-            {story.content.core_team_members.map((teamMember: any, index: number) => {
-              if (index % 2 === 1) return;
-              return (
-                <TeamMemberCard
-                  key={`${teamMember.name}_team_member`}
-                  teamMember={teamMember}
-                  alwaysOpen={true}
-                />
-              );
-            })}
-          </Box>
-          <Box sx={cardColumnStyle}>
-            {story.content.core_team_members.map((teamMember: any, index: number) => {
-              if (index % 2 === 0) return;
-              return (
-                <TeamMemberCard
-                  key={`${teamMember.name}_team_member`}
-                  teamMember={teamMember}
-                  alwaysOpen={true}
-                />
-              );
-            })}
-          </Box>
-        </Box>
-      </Container>
-
-      {story.content.page_section_2?.length > 0 && (
-        <StoryblokPageSection
-          content={story.content.page_section_2[0].content}
-          alignment={story.content.page_section_2[0].alignment}
-          color={story.content.page_section_2[0].color}
-        />
-      )}
-
-      <Container sx={supportingContainerStyle}>
-        <Typography variant="h2" component="h2">
-          {story.content.supporting_team_title}
-        </Typography>
-        {story.content.supporting_team_description && (
-          <Box maxWidth={650}>
-            {render(story.content.supporting_team_description, RichTextOptions)}
-          </Box>
-        )}
-        <Box sx={cardColumnRowStyle}>
-          <Box sx={cardColumnStyle}>
-            {story.content.supporting_team_members.map((teamMember: any, index: number) => {
-              if (index % 2 === 1) return;
-              return (
-                <TeamMemberCard key={`${teamMember.name}_team_member`} teamMember={teamMember} />
-              );
-            })}
-          </Box>
-          <Box sx={cardColumnStyle}>
-            {story.content.supporting_team_members.map((teamMember: any, index: number) => {
-              if (index % 2 === 0) return;
-              return (
-                <TeamMemberCard key={`${teamMember.name}_team_member`} teamMember={teamMember} />
-              );
-            })}
-          </Box>
-        </Box>
-      </Container>
-
-      {story.content.page_section_3?.length > 0 && (
-        <StoryblokPageSection
-          content={story.content.page_section_3[0].content}
-          alignment={story.content.page_section_3[0].alignment}
-          color={story.content.page_section_3[0].color}
-        />
-      )}
-    </Box>
-  );
+  return <StoryblokMeetTheTeamPage {...(story.content as StoryblokMeetTheTeamPageProps)} />;
 };
 
 export async function getStaticProps({ locale, preview = false }: GetStaticPropsContext) {
-  let sbParams = {
-    version: preview ? 'draft' : 'published',
-    language: locale,
-    ...(preview && { cv: Date.now() }),
-  };
-
-  let { data } = await Storyblok.get(`cdn/stories/meet-the-team`, sbParams);
+  const storyblokProps = await getStoryblokPageProps('meet-the-team', locale, preview);
 
   return {
     props: {
-      story: data ? data.story : null,
-      preview,
-      sbParams: JSON.stringify(sbParams),
+      ...storyblokProps,
       messages: {
         ...require(`../messages/shared/${locale}.json`),
         ...require(`../messages/navigation/${locale}.json`),
       },
-      locale,
     },
     revalidate: 3600, // revalidate every hour
   };
diff --git a/pages/partnership/[partnerName].tsx b/pages/partnership/[partnerName].tsx
index c7aa2222..59b98c25 100644
--- a/pages/partnership/[partnerName].tsx
+++ b/pages/partnership/[partnerName].tsx
@@ -1,41 +1,34 @@
 import { Box } from '@mui/material';
+import {
+  ISbStoriesParams,
+  ISbStoryData,
+  getStoryblokApi,
+  useStoryblokState,
+} from '@storyblok/react';
 import { GetStaticPathsContext, GetStaticPropsContext, NextPage } from 'next';
-import { useTranslations } from 'next-intl';
 import Head from 'next/head';
-import { StoriesParams, StoryData, StoryblokComponent } from 'storyblok-js-client';
+import NoDataAvailable from '../../components/common/NoDataAvailable';
 import PartnerHeader from '../../components/layout/PartnerHeader';
 import StoryblokPageSection from '../../components/storyblok/StoryblokPageSection';
-import Storyblok, { useStoryblok } from '../../config/storyblok';
-import { LANGUAGES } from '../../constants/enums';
 import { PartnerContent, getPartnerContent } from '../../constants/partners';
 import illustrationBloomHeadYellow from '../../public/illustration_bloom_head_yellow.svg';
 import welcomeToBloom from '../../public/welcome_to_bloom.svg';
+import { getStoryblokPageProps } from '../../utils/getStoryblokPageProps';
 
 interface Props {
-  story: StoryData;
-  preview: boolean;
-  sbParams: StoriesParams;
-  locale: LANGUAGES;
+  story: ISbStoryData | null;
 }
 
-// TODO pull out
-type StoryBlokData = StoryData<
-  StoryblokComponent<string> & {
-    [index: string]: any;
+const Partnership: NextPage<Props> = ({ story }) => {
+  story = useStoryblokState(story);
+
+  if (!story) {
+    return <NoDataAvailable />;
   }
->;
 
-const Partnership: NextPage<Props> = ({ story, preview, sbParams, locale }) => {
   const partnerName = story.slug;
-  const configuredStory = useStoryblok(story, preview, sbParams, locale);
-
-  const t = useTranslations('Partnership');
-  const tS = useTranslations('Shared');
+  const partnerContent: PartnerContent = getPartnerContent(partnerName);
 
-  return showPartnershipView(configuredStory, getPartnerContent(partnerName));
-};
-//
-const showPartnershipView = (story: StoryBlokData, partnerContent: PartnerContent) => {
   return (
     <Box>
       <Head>
@@ -49,12 +42,7 @@ const showPartnershipView = (story: StoryBlokData, partnerContent: PartnerConten
       />
       {story.content.page_sections?.length > 0 &&
         story.content.page_sections.map((section: any, index: number) => (
-          <StoryblokPageSection
-            key={`page_section_${index}`}
-            content={section.content}
-            alignment={section.alignment}
-            color={section.color}
-          />
+          <StoryblokPageSection key={`page_section_${index}`} {...section} />
         ))}
     </Box>
   );
@@ -63,37 +51,37 @@ const showPartnershipView = (story: StoryBlokData, partnerContent: PartnerConten
 export async function getStaticProps({ locale, preview = false, params }: GetStaticPropsContext) {
   const partnerName = params?.partnerName;
 
-  const sbParams = {
-    version: preview ? 'draft' : 'published',
-    cv: preview ? Date.now() : 0,
-    language: locale,
-  };
-
-  let { data } = await Storyblok.get(`cdn/stories/partnership/${partnerName}`, sbParams);
+  const storyblokProps = await getStoryblokPageProps(`partnership/${partnerName}`, locale, preview);
 
   return {
     props: {
-      story: data ? data.story : null,
-      preview,
+      ...storyblokProps,
       messages: {
         ...require(`../../messages/shared/${locale}.json`),
         ...require(`../../messages/navigation/${locale}.json`),
         ...require(`../../messages/partnership/${locale}.json`),
       },
-      locale,
     },
     revalidate: 3600, // revalidate every hour
   };
 }
 
 export async function getStaticPaths({ locales }: GetStaticPathsContext) {
-  let { data } = await Storyblok.get('cdn/links/?starts_with=partnership/');
+  let sbParams: ISbStoriesParams = {
+    published: true,
+    starts_with: 'partnership/',
+  };
+
+  const storyblokApi = getStoryblokApi();
+  let data = await storyblokApi.getAll('cdn/links', sbParams);
 
   let paths: any = [];
-  Object.keys(data.links).forEach((linkKey) => {
+
+  data.forEach((story: Partial<ISbStoryData>) => {
+    if (!story.slug) return;
+
     // get array for slug because of catch all
-    const slug = data.links[linkKey].slug;
-    let splittedSlug = slug.split('/');
+    let splittedSlug = story.slug.split('/');
 
     if (locales) {
       // create additional languages
diff --git a/pages/subscription/whatsapp.tsx b/pages/subscription/whatsapp.tsx
index 8c583805..afeff140 100644
--- a/pages/subscription/whatsapp.tsx
+++ b/pages/subscription/whatsapp.tsx
@@ -1,9 +1,7 @@
 import { Box, Container } from '@mui/material';
 import { GetStaticPropsContext, NextPage } from 'next';
-import { useTranslations } from 'next-intl';
 import Head from 'next/head';
 import { useEffect, useState } from 'react';
-import { StoriesParams, StoryData } from 'storyblok-js-client';
 import { SignUpBanner } from '../../components/banner/SignUpBanner';
 import ImageTextColumn from '../../components/common/ImageTextColumn';
 import { ImageTextItem } from '../../components/common/ImageTextGrid';
@@ -11,14 +9,15 @@ import WhatsappSubscribeForm from '../../components/forms/WhatsappSubscribeForm'
 import WhatsappUnsubscribeForm from '../../components/forms/WhatsappUnsubscribeForm';
 import Header, { HeaderProps } from '../../components/layout/Header';
 import StoryblokPageSection from '../../components/storyblok/StoryblokPageSection';
-import Storyblok, { useStoryblok } from '../../config/storyblok';
-import { LANGUAGES } from '../../constants/enums';
 import { useTypedSelector } from '../../hooks/store';
 import illustrationChange from '../../public/illustration_change.svg';
 import illustrationChooseTherapist from '../../public/illustration_choose_therapist.svg';
 import illustrationDateSelector from '../../public/illustration_date_selector.svg';
 
+import { ISbStoryData, useStoryblokState } from '@storyblok/react';
+import NoDataAvailable from '../../components/common/NoDataAvailable';
 import { rowStyle } from '../../styles/common';
+import { getStoryblokPageProps } from '../../utils/getStoryblokPageProps';
 import { hasWhatsappSubscription } from '../../utils/whatsappUtils';
 
 const containerStyle = {
@@ -36,10 +35,7 @@ const formContainerStyle = {
 } as const;
 
 interface Props {
-  story: StoryData;
-  preview: boolean;
-  sbParams: StoriesParams;
-  locale: LANGUAGES;
+  story: ISbStoryData | null;
 }
 
 const steps: Array<ImageTextItem> = [
@@ -60,10 +56,8 @@ const steps: Array<ImageTextItem> = [
   },
 ];
 
-const ManageWhatsappSubscription: NextPage<Props> = ({ story, preview, sbParams, locale }) => {
-  let configuredStory = useStoryblok(story, preview, sbParams, locale);
-
-  const t = useTranslations('Whatsapp');
+const ManageWhatsappSubscription: NextPage<Props> = ({ story }) => {
+  story = useStoryblokState(story);
 
   const [hasActiveWhatsappSub, setHasActiveWhatsappSub] = useState<boolean>(false);
 
@@ -74,16 +68,20 @@ const ManageWhatsappSubscription: NextPage<Props> = ({ story, preview, sbParams,
     setHasActiveWhatsappSub(hasWhatsappSubscription(userActiveSubscriptions));
   }, [userActiveSubscriptions]);
 
+  if (!story) {
+    return <NoDataAvailable />;
+  }
+
   const headerProps: HeaderProps = {
-    title: configuredStory.content.title,
-    introduction: configuredStory.content.description,
-    imageSrc: configuredStory.content.header_image.filename,
-    translatedImageAlt: configuredStory.content.header_image.alt,
+    title: story.content.title,
+    introduction: story.content.description,
+    imageSrc: story.content.header_image.filename,
+    translatedImageAlt: story.content.header_image.alt,
   };
 
   return (
     <>
-      <Head>{configuredStory.content.title}</Head>
+      <Head>{story.content.title}</Head>
       <Box>
         <Header {...headerProps} />
         {!userToken && <SignUpBanner />}
@@ -98,14 +96,9 @@ const ManageWhatsappSubscription: NextPage<Props> = ({ story, preview, sbParams,
           </Container>
         )}
         {userToken &&
-          configuredStory.content.page_sections?.length > 0 &&
-          configuredStory.content.page_sections.map((section: any, index: number) => (
-            <StoryblokPageSection
-              key={`page_section_${index}`}
-              content={section.content}
-              alignment={section.alignment}
-              color={section.color}
-            />
+          story.content.page_sections?.length > 0 &&
+          story.content.page_sections.map((section: any, index: number) => (
+            <StoryblokPageSection key={`page_section_${index}`} {...section} />
           ))}
       </Box>
     </>
@@ -113,25 +106,16 @@ const ManageWhatsappSubscription: NextPage<Props> = ({ story, preview, sbParams,
 };
 
 export async function getStaticProps({ locale, preview = false }: GetStaticPropsContext) {
-  let sbParams = {
-    version: preview ? 'draft' : 'published',
-    language: locale,
-    ...(preview && { cv: Date.now() }),
-  };
-
-  let { data } = await Storyblok.get(`cdn/stories/subscription/whatsapp`, sbParams);
+  const storyblokProps = await getStoryblokPageProps(`subscription/whatsapp`, locale, preview);
 
   return {
     props: {
-      story: data ? data.story : null,
-      preview,
-      sbParams: JSON.stringify(sbParams),
+      ...storyblokProps,
       messages: {
         ...require(`../../messages/shared/${locale}.json`),
         ...require(`../../messages/navigation/${locale}.json`),
         ...require(`../../messages/whatsapp/${locale}.json`),
       },
-      locale,
     },
     revalidate: 3600, // revalidate every hour
   };
diff --git a/pages/therapy/book-session.tsx b/pages/therapy/book-session.tsx
index 7014fac3..61894412 100644
--- a/pages/therapy/book-session.tsx
+++ b/pages/therapy/book-session.tsx
@@ -106,7 +106,7 @@ const BookSession: NextPage = () => {
 
   const headerProps = {
     title: t('title'),
-    introduction: t.rich('introduction', { partnerName: partnerAccess?.partner?.name }),
+    introduction: `${t.rich('introduction', { partnerName: partnerAccess?.partner?.name })}`,
     imageSrc: illustrationPerson4Peach,
     imageAlt: 'alt.personTea',
   };
diff --git a/pages/welcome/[partnerName].tsx b/pages/welcome/[partnerName].tsx
index 8a42d44f..d4e36009 100644
--- a/pages/welcome/[partnerName].tsx
+++ b/pages/welcome/[partnerName].tsx
@@ -1,220 +1,69 @@
-import { Box, Button, Card, CardContent, Container, Typography } from '@mui/material';
+import {
+  ISbStoriesParams,
+  ISbStoryData,
+  getStoryblokApi,
+  useStoryblokState,
+} from '@storyblok/react';
 import type { GetStaticPathsContext, NextPage } from 'next';
 import { GetStaticPropsContext } from 'next';
-import { useTranslations } from 'next-intl';
-import Head from 'next/head';
-import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
-import { StoriesParams, StoryData } from 'storyblok-js-client';
-import { render } from 'storyblok-rich-text-react-renderer';
-import { useGetAutomaticAccessCodeFeatureForPartnerQuery } from '../../app/api';
-import Link from '../../components/common/Link';
-import WelcomeCodeForm from '../../components/forms/WelcomeCodeForm';
-import PartnerHeader from '../../components/layout/PartnerHeader';
-import StoryblokPageSection from '../../components/storyblok/StoryblokPageSection';
-import Storyblok, { useStoryblok } from '../../config/storyblok';
-import { LANGUAGES } from '../../constants/enums';
-import {
-  generatePartnerPromoGetStartedEvent,
-  generatePartnerPromoGoToCoursesEvent,
-} from '../../constants/events';
-import { getPartnerContent } from '../../constants/partners';
-import { useTypedSelector } from '../../hooks/store';
-import illustrationBloomHeadYellow from '../../public/illustration_bloom_head_yellow.svg';
-import welcomeToBloom from '../../public/welcome_to_bloom.svg';
-import { rowStyle } from '../../styles/common';
-import hasAutomaticAccessFeature from '../../utils/hasAutomaticAccessCodeFeature';
-import logEvent, { getEventUserData } from '../../utils/logEvent';
-import { RichTextOptions } from '../../utils/richText';
-
-const introContainerStyle = {
-  maxWidth: 600,
-  width: { xs: '100%', md: '45%' },
-  fontSize: '1.375rem',
-  fontFamily: 'Montserrat, sans-serif',
-  fontStyle: 'italic',
-  lineHeight: 1.75,
-  'p, a, span': {
-    fontSize: '1.375rem',
-    fontFamily: 'Montserrat, sans-serif',
-    fontStyle: 'italic',
-    lineHeight: 1.75,
-  },
-} as const;
-
-const rowItem = {
-  width: { xs: '100%', sm: '60%', md: '45%' },
-  height: '100%',
-} as const;
+import NoDataAvailable from '../../components/common/NoDataAvailable';
+import StoryblokWelcomePage, {
+  StoryblokWelcomePageProps,
+} from '../../components/storyblok/StoryblokWelcomePage';
+import { getStoryblokPageProps } from '../../utils/getStoryblokPageProps';
 
 interface Props {
-  story: StoryData;
-  preview: boolean;
-  sbParams: StoriesParams;
-  locale: LANGUAGES;
+  story: ISbStoryData | null;
 }
 
-const Welcome: NextPage<Props> = ({ story, preview, sbParams, locale }) => {
-  story = useStoryblok(story, preview, sbParams, locale);
-  const partnerContent = getPartnerContent(story.slug);
+const Welcome: NextPage<Props> = ({ story }) => {
+  story = useStoryblokState(story);
 
-  const headerProps = {
-    partnerLogoSrc: partnerContent.partnershipLogo || welcomeToBloom,
-    partnerLogoAlt: partnerContent.partnershipLogoAlt || 'alt.welcomeToBloom',
-    imageSrc: partnerContent.bloomGirlIllustration || illustrationBloomHeadYellow,
-    imageAlt: 'alt.bloomHead',
-  };
+  if (!story) {
+    return <NoDataAvailable />;
+  }
 
   return (
-    <Box>
-      <Head>
-        <title>{story.content.title}</title>
-      </Head>
-      <PartnerHeader
-        partnerLogoSrc={headerProps.partnerLogoSrc}
-        partnerLogoAlt={headerProps.partnerLogoAlt}
-        imageSrc={headerProps.imageSrc}
-        imageAlt={headerProps.imageAlt}
-      />
-      <Container sx={{ ...rowStyle, backgroundColor: 'primary.light' }}>
-        <Box sx={introContainerStyle}>{render(story.content.introduction, RichTextOptions)}</Box>
-        <CallToActionCard partnerName={partnerContent.name} />
-      </Container>
-      {story.content.page_sections?.length > 0 &&
-        story.content.page_sections.map((section: any, index: number) => (
-          <StoryblokPageSection
-            key={`page_section_${index}`}
-            content={section.content}
-            alignment={section.alignment}
-            color={section.color}
-          />
-        ))}
-    </Box>
-  );
-};
-
-const CallToActionCard = ({ partnerName }: { partnerName: string }) => {
-  const router = useRouter();
-
-  const userToken = useTypedSelector((state) => state.user.token);
-  const userCreatedAt = useTypedSelector((state) => state.user.createdAt);
-  const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
-  const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
-  const partners = useTypedSelector((state) => state.partners);
-  const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);
-
-  const [accessCodeRequired, setAccessCodeRequired] = useState<boolean>(true);
-  const [codeParam, setCodeParam] = useState<string>('');
-
-  const t = useTranslations('Welcome');
-
-  useGetAutomaticAccessCodeFeatureForPartnerQuery(partnerName);
-  useEffect(() => {
-    const partnerData = partners.find((p) => p.name.toLowerCase() === partnerName.toLowerCase());
-    if (partnerData) {
-      setAccessCodeRequired(!hasAutomaticAccessFeature(partnerData));
-    }
-  }, [partners, partnerName]);
-
-  useEffect(() => {
-    const { code } = router.query;
-    if (code) setCodeParam(code + '');
-  }, [setCodeParam, router.query]);
-
-  return (
-    <Card sx={rowItem}>
-      <CardContent>
-        {userToken && (
-          <>
-            <Typography variant="h2" component="h2">
-              {t('continueCourses')}
-            </Typography>
-            <Typography>{t('continueCoursesDescription')}</Typography>
-            <Button
-              sx={{ mt: 3 }}
-              variant="contained"
-              fullWidth
-              component={Link}
-              color="secondary"
-              onClick={() => {
-                logEvent(generatePartnerPromoGoToCoursesEvent(partnerName), eventUserData);
-              }}
-              href="/courses"
-            >
-              {t('goToCourses')}
-            </Button>
-          </>
-        )}
-        {!userToken && accessCodeRequired && (
-          <>
-            <Typography variant="h2" component="h2">
-              {t('getStarted')}
-            </Typography>
-            <Typography>{t.rich('accessIntroduction', { partnerName })}</Typography>
-            <WelcomeCodeForm codeParam={codeParam} partnerParam={partnerName} />
-          </>
-        )}
-        {!userToken && !accessCodeRequired && (
-          <>
-            <Typography variant="h2" component="h2">
-              {t('getStarted')}
-            </Typography>
-            <Typography>{t.rich('publicIntroduction', { partnerName })}</Typography>
-            <Button
-              sx={{ mt: 3 }}
-              variant="contained"
-              fullWidth
-              component={Link}
-              color="secondary"
-              onClick={() => {
-                logEvent(generatePartnerPromoGetStartedEvent(partnerName), eventUserData);
-              }}
-              href={`/auth/register?partner=${partnerName.toLocaleLowerCase()}`}
-            >
-              {t('getStarted')}
-            </Button>
-          </>
-        )}
-      </CardContent>
-    </Card>
+    <StoryblokWelcomePage
+      {...(story.content as StoryblokWelcomePageProps)}
+      storySlug={story.slug}
+    />
   );
 };
 
 export async function getStaticProps({ locale, preview = false, params }: GetStaticPropsContext) {
   const partnerName = params?.partnerName;
-
-  const sbParams = {
-    version: preview ? 'draft' : 'published',
-    language: locale,
-    ...(preview && { cv: Date.now() }),
-  };
-
-  let { data } = await Storyblok.get(`cdn/stories/welcome/${partnerName}`, sbParams);
+  const storyblokProps = await getStoryblokPageProps(`welcome/${partnerName}`, locale, preview);
 
   return {
     props: {
-      story: data ? data.story : null,
-      preview,
-      sbParams: JSON.stringify(sbParams),
+      ...storyblokProps,
       messages: {
         ...require(`../../messages/shared/${locale}.json`),
         ...require(`../../messages/navigation/${locale}.json`),
         ...require(`../../messages/welcome/${locale}.json`),
       },
-      locale,
     },
     revalidate: 3600, // revalidate every hour
   };
 }
 
 export async function getStaticPaths({ locales }: GetStaticPathsContext) {
-  let { data } = await Storyblok.get('cdn/links/?starts_with=welcome/');
+  let sbParams: ISbStoriesParams = {
+    published: true,
+    starts_with: 'welcome/',
+  };
+
+  const storyblokApi = getStoryblokApi();
+  let data = await storyblokApi.getAll('cdn/links', sbParams);
 
   let paths: any = [];
-  Object.keys(data.links).forEach((linkKey) => {
+
+  data.forEach((story: Partial<ISbStoryData>) => {
+    if (!story.slug) return;
+
     // get array for slug because of catch all
-    const slug = data.links[linkKey].slug;
-    let splittedSlug = slug.split('/');
+    let splittedSlug = story.slug.split('/');
 
     if (locales) {
       // create additional languages
@@ -225,7 +74,7 @@ export async function getStaticPaths({ locales }: GetStaticPathsContext) {
   });
 
   return {
-    paths: paths,
+    paths,
     fallback: false,
   };
 }
diff --git a/utils/getStoryblokPageProps.ts b/utils/getStoryblokPageProps.ts
new file mode 100644
index 00000000..ec5fe2aa
--- /dev/null
+++ b/utils/getStoryblokPageProps.ts
@@ -0,0 +1,37 @@
+import { ISbStoriesParams, getStoryblokApi } from '@storyblok/react';
+
+export const getStoryblokPageProps = async (
+  slug: string | undefined,
+  locale: string | undefined,
+  preview: boolean,
+  params?: Partial<ISbStoriesParams>,
+) => {
+  if (!slug) {
+    return {
+      story: null,
+      key: false,
+      preview,
+      locale: locale || null,
+      error: 'No slug provided',
+    };
+  }
+
+  const sbParams: ISbStoriesParams = {
+    version: preview ? 'draft' : 'published',
+    language: locale || 'en',
+    ...(params && params),
+  };
+
+  try {
+    const storyblokApi = getStoryblokApi();
+    let { data } = await storyblokApi.get(`cdn/stories/${slug}`, sbParams);
+    return {
+      story: data ? data.story : null,
+      key: data ? data.story.id : false,
+      preview,
+      locale: locale || null,
+    };
+  } catch (error) {
+    console.log('Error getting storyblok data for page', error);
+  }
+};
diff --git a/utils/helper-types/storyblok.d.ts b/utils/helper-types/storyblok.d.ts
deleted file mode 100644
index 445e8f4c..00000000
--- a/utils/helper-types/storyblok.d.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export type StoryblokSessionJson = {
-  id: number;
-};
diff --git a/yarn.lock b/yarn.lock
index a737aa77..46a4c295 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1926,91 +1926,91 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
-"@mui/base@5.0.0-beta.27":
-  version "5.0.0-beta.27"
-  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.27.tgz#21a9c7d954a5f88f6706dfee630154c651ee73af"
-  integrity sha512-duL37qxihT1N0pW/gyXVezP7SttLkF+cLAs/y6g6ubEFmVadjbnZ45SeF12/vAiKzqwf5M0uFH1cczIPXFZygA==
+"@mui/base@5.0.0-beta.28":
+  version "5.0.0-beta.28"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-beta.28.tgz#f072e55c0530f456ee5cb5cde2af788fdda3bf05"
+  integrity sha512-KIoSc5sUFceeCaZTq5MQBapFzhHqMo4kj+4azWaCAjorduhcRQtN+BCgVHmo+gvEjix74bUfxwTqGifnu2fNTg==
   dependencies:
     "@babel/runtime" "^7.23.5"
     "@floating-ui/react-dom" "^2.0.4"
     "@mui/types" "^7.2.11"
-    "@mui/utils" "^5.15.0"
+    "@mui/utils" "^5.15.1"
     "@popperjs/core" "^2.11.8"
     clsx "^2.0.0"
     prop-types "^15.8.1"
 
-"@mui/core-downloads-tracker@^5.15.0":
-  version "5.15.0"
-  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.0.tgz#6b45d5bff38f305402d24d3bf86075b56c578909"
-  integrity sha512-NpGtlHwuyLfJtdrlERXb8qRqd279O0VnuGaZAor1ehdNhUJOD1bSxHDeXKZkbqNpvi50hasFj7lsbTpluworTQ==
+"@mui/core-downloads-tracker@^5.15.1":
+  version "5.15.1"
+  resolved "https://registry.yarnpkg.com/@mui/core-downloads-tracker/-/core-downloads-tracker-5.15.1.tgz#8aad47e2b198640244f05f6486a927ce362e814e"
+  integrity sha512-y/nUEsWHyBzaKYp9zLtqJKrLod/zMNEWpMj488FuQY9QTmqBiyUhI2uh7PVaLqLewXRtdmG6JV0b6T5exyuYRw==
 
 "@mui/icons-material@^5.14.19":
-  version "5.15.0"
-  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.15.0.tgz#fdc93611ca77ce3b79128be02fb6c1ae79b972b8"
-  integrity sha512-zHY6fOkaK7VfhWeyxO8MjO3IAjEYpYMXuqUhX7TkUZJ9+TSH/9dn4ClG4K2j6hdgBU5Yrq2Z/89Bo6BHHp7AdQ==
+  version "5.15.1"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.15.1.tgz#38f51a88d224a107e753313b4d9815247caa5398"
+  integrity sha512-VPJdBSyap6uOxCb5BLbWbkvd6aeJCp1pQZm8DcZBITCH0NOSv8Mz9c8Zvo8xr4Od7+xyWHUAgvRSL4047pL2WQ==
   dependencies:
     "@babel/runtime" "^7.23.5"
 
 "@mui/lab@^5.0.0-alpha.155":
-  version "5.0.0-alpha.156"
-  resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.156.tgz#9fee3a408ded367ab4fe84275789155b65dee7e7"
-  integrity sha512-OUAckFeqlAG6aIBG1Ud1fDCBqnU1wltWZYHsA7YCGzRBykNzQC/W/dYddp+RJLu0BgYpMiXwPXq2Hg0ERVtaog==
+  version "5.0.0-alpha.157"
+  resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.157.tgz#cb248823ffd881153eef86c2e3786c35601d1986"
+  integrity sha512-gY7UM2kNSxiVLfsm0o6HG2G5rM2Vr47prJhDCazY+VG/NOSRc8CG7la6dpL9WDTJhotEZdWwfj1FOUxTonmuQA==
   dependencies:
     "@babel/runtime" "^7.23.5"
-    "@mui/base" "5.0.0-beta.27"
-    "@mui/system" "^5.15.0"
+    "@mui/base" "5.0.0-beta.28"
+    "@mui/system" "^5.15.1"
     "@mui/types" "^7.2.11"
-    "@mui/utils" "^5.15.0"
+    "@mui/utils" "^5.15.1"
     clsx "^2.0.0"
     prop-types "^15.8.1"
 
 "@mui/material@^5.14.20":
-  version "5.15.0"
-  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.15.0.tgz#f801cf56d505cc52dca225438360ab9c62057285"
-  integrity sha512-60CDI/hQNwJv9a3vEZtFG7zz0USdQhVwpBd3fZqrzhuXSdiMdYMaZcCXeX/KMuNq0ZxQEAZd74Pv+gOb408QVA==
+  version "5.15.1"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.15.1.tgz#5fc15c6eb9efe4b62b0c30b13bf5fa042bda71a1"
+  integrity sha512-WA5DVyvacxDakVyAhNqu/rRT28ppuuUFFw1bLpmRzrCJ4uw/zLTATcd4WB3YbB+7MdZNEGG/SJNWTDLEIyn3xQ==
   dependencies:
     "@babel/runtime" "^7.23.5"
-    "@mui/base" "5.0.0-beta.27"
-    "@mui/core-downloads-tracker" "^5.15.0"
-    "@mui/system" "^5.15.0"
+    "@mui/base" "5.0.0-beta.28"
+    "@mui/core-downloads-tracker" "^5.15.1"
+    "@mui/system" "^5.15.1"
     "@mui/types" "^7.2.11"
-    "@mui/utils" "^5.15.0"
-    "@types/react-transition-group" "^4.4.9"
+    "@mui/utils" "^5.15.1"
+    "@types/react-transition-group" "^4.4.10"
     clsx "^2.0.0"
     csstype "^3.1.2"
     prop-types "^15.8.1"
     react-is "^18.2.0"
     react-transition-group "^4.4.5"
 
-"@mui/private-theming@^5.15.0":
-  version "5.15.0"
-  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.15.0.tgz#96de66ce097ba417e1b6b769cd67cbf516bd8876"
-  integrity sha512-7WxtIhXxNek0JjtsYy+ut2LtFSLpsUW5JSDehQO+jF7itJ8ehy7Bd9bSt2yIllbwGjCFowLfYpPk2Ykgvqm1tA==
+"@mui/private-theming@^5.15.1":
+  version "5.15.1"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.15.1.tgz#58fd8da48295e105067fa7361734ee0b166d9cca"
+  integrity sha512-wTbzuy5KjSvCPE9UVJktWHJ0b/tD5biavY9wvF+OpYDLPpdXK52vc1hTDxSbdkHIFMkJExzrwO9GvpVAHZBnFQ==
   dependencies:
     "@babel/runtime" "^7.23.5"
-    "@mui/utils" "^5.15.0"
+    "@mui/utils" "^5.15.1"
     prop-types "^15.8.1"
 
-"@mui/styled-engine@^5.15.0":
-  version "5.15.0"
-  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.15.0.tgz#44e068dbb855699053b9e6e4e6d3ed5efe98b7d9"
-  integrity sha512-6NysIsHkuUS2lF+Lzv1jiK3UjBJk854/vKVcJQVGKlPiqNEVZJNlwaSpsaU5xYXxWEZYfbVFSAomLOS/LV/ovQ==
+"@mui/styled-engine@^5.15.1":
+  version "5.15.1"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.15.1.tgz#00f179e51afe252022bf356f72354968f9c5bf25"
+  integrity sha512-7WDZTJLqGexWDjqE9oAgjU8ak6hEtUw2yQU7SIYID5kLVO2Nj/Wi/KicbLsXnTsJNvSqePIlUIWTBSXwWJCPZw==
   dependencies:
     "@babel/runtime" "^7.23.5"
     "@emotion/cache" "^11.11.0"
     csstype "^3.1.2"
     prop-types "^15.8.1"
 
-"@mui/system@^5.15.0":
-  version "5.15.0"
-  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.15.0.tgz#d4f6fd65ad8e404d4d7c7b56d755d2a63b0edddb"
-  integrity sha512-8TPjfTlYBNB7/zBJRL4QOD9kImwdZObbiYNh0+hxvhXr2koezGx8USwPXj8y/JynbzGCkIybkUztCdWlMZe6OQ==
+"@mui/system@^5.15.1":
+  version "5.15.1"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.15.1.tgz#e2a79b5e188ca89a3e58aa4d27e3484edf9e24b0"
+  integrity sha512-LAnP0ls69rqW9eBgI29phIx/lppv+WDGI7b3EJN7VZIqw0RezA0GD7NRpV12BgEYJABEii6z5Q9B5tg7dsX0Iw==
   dependencies:
     "@babel/runtime" "^7.23.5"
-    "@mui/private-theming" "^5.15.0"
-    "@mui/styled-engine" "^5.15.0"
+    "@mui/private-theming" "^5.15.1"
+    "@mui/styled-engine" "^5.15.1"
     "@mui/types" "^7.2.11"
-    "@mui/utils" "^5.15.0"
+    "@mui/utils" "^5.15.1"
     clsx "^2.0.0"
     csstype "^3.1.2"
     prop-types "^15.8.1"
@@ -2020,10 +2020,10 @@
   resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.2.11.tgz#36b99a88f8010dc716128e568dc05681a69dc7ae"
   integrity sha512-KWe/QTEsFFlFSH+qRYf3zoFEj3z67s+qAuSnMMg+gFwbxG7P96Hm6g300inQL1Wy///gSRb8juX7Wafvp93m3w==
 
-"@mui/utils@^5.15.0":
-  version "5.15.0"
-  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.15.0.tgz#87b4db92dd2ddf3e2676377427f50662124013b4"
-  integrity sha512-XSmTKStpKYamewxyJ256+srwEnsT3/6eNo6G7+WC1tj2Iq9GfUJ/6yUoB7YXjOD2jTZ3XobToZm4pVz1LBt6GA==
+"@mui/utils@^5.15.1":
+  version "5.15.1"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.15.1.tgz#71d69dc8c0f13a1fd6aca20b53ec496636e6b854"
+  integrity sha512-V1/d0E3Bju5YdB59HJf2G0tnHrFEvWLN+f8hAXp9+JSNy/LC2zKyqUfPPahflR6qsI681P8G9r4mEZte/SrrYA==
   dependencies:
     "@babel/runtime" "^7.23.5"
     "@types/prop-types" "^15.7.11"
@@ -2262,6 +2262,20 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@storyblok/js@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@storyblok/js/-/js-3.0.0.tgz#d4d04f1fc9e0496894638978b7ba67b6efc79339"
+  integrity sha512-caeS9sHRh/7Kpemdk5mcaH7SrrNpuynmiR+WPHxKCLJ8DDbVljzPPaivAV8WJMHXOFz/9dw9qd63eevMUOp2eg==
+  dependencies:
+    storyblok-js-client "^6.4.1"
+
+"@storyblok/react@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@storyblok/react/-/react-3.0.0.tgz#a3017d3e55302d81a6c5e293cd6d4f788fc55f27"
+  integrity sha512-iZl4j3e1rMliIyH9RPrCxLXS1YiZGPIjGPFUTP0mf1ppV8qCcRXBWQguXjPEKFjIvxS58Fjiz5dquJwPWDbCjw==
+  dependencies:
+    "@storyblok/js" "^3.0.0"
+
 "@surma/rollup-plugin-off-main-thread@^2.2.3":
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-2.2.3.tgz#ee34985952ca21558ab0d952f00298ad2190c053"
@@ -2476,7 +2490,7 @@
   dependencies:
     "@types/react" "^17"
 
-"@types/react-transition-group@^4.4.9":
+"@types/react-transition-group@^4.4.10":
   version "4.4.10"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.10.tgz#6ee71127bdab1f18f11ad8fb3322c6da27c327ac"
   integrity sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==
@@ -3806,9 +3820,9 @@ ejs@^3.1.6:
     jake "^10.8.5"
 
 electron-to-chromium@^1.4.601:
-  version "1.4.614"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.614.tgz#2fe789d61fa09cb875569f37c309d0c2701f91c0"
-  integrity sha512-X4ze/9Sc3QWs6h92yerwqv7aB/uU8vCjZcrMjA8N9R1pjMFRe44dLsck5FzLilOYvcXuDn93B+bpGYyufc70gQ==
+  version "1.4.615"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.615.tgz#b1c41839962d2e4e63dca05519da9040e34848c2"
+  integrity sha512-/bKPPcgZVUziECqDc+0HkT87+0zhaWSZHNXqF8FLd2lQcptpmUFwoCSWjCdOng9Gdq+afKArPdEg/0ZW461Eng==
 
 emittery@^0.8.1:
   version "0.8.1"
@@ -6966,9 +6980,9 @@ react-is@^17.0.1, react-is@^17.0.2:
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
 react-player@^2.13.0:
-  version "2.14.0"
-  resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.14.0.tgz#b8fabb2e528ff6fbc39c5e729ca3ad62b9703864"
-  integrity sha512-tUyv6oVD+B+ccJD81GuQQUVU++q3wsMUoDeDsZ0wAivRsmkq0RjERLT79Bi/JDcMwQm3wCwBEzXYbLnCW7c2nQ==
+  version "2.14.1"
+  resolved "https://registry.yarnpkg.com/react-player/-/react-player-2.14.1.tgz#fc434c0e1e6161e76f5d5970721596c4acec52b1"
+  integrity sha512-jILj7F9o+6NHzrJ1GqZIxfJgskvGmKeJ05FNhPvgiCpvMZFmFneKEkukywHcULDO2lqITm+zcEkLSq42mX0FbA==
   dependencies:
     deepmerge "^4.0.0"
     load-script "^1.0.0"
@@ -7547,10 +7561,10 @@ stop-iteration-iterator@^1.0.0:
   dependencies:
     internal-slot "^1.0.4"
 
-storyblok-js-client@^4.2.0:
-  version "4.5.8"
-  resolved "https://registry.yarnpkg.com/storyblok-js-client/-/storyblok-js-client-4.5.8.tgz#862f67d4f25b6c50334e6965bf27f6b6a755ccae"
-  integrity sha512-0Wp7Kn4RdKaKRgMmNDu8c6OC81x1mgeri4ziKDY9BsUZEIGLTNw8KFIWlHYACgMnJQn/6qZaV9kGo8IY4hv6GA==
+storyblok-js-client@^6.4.1:
+  version "6.4.1"
+  resolved "https://registry.yarnpkg.com/storyblok-js-client/-/storyblok-js-client-6.4.1.tgz#c3f16fefd9dd59e5340a9947ee4011068f21b5a3"
+  integrity sha512-Gcwh/1nX3B7Vv5uTgJ2vATwiK/Y57gs+bKPXfsPOUr3Us475u1x2nlS8Sfe3zc+hDRUTD0WmwBNqI0qJLyp7kg==
 
 storyblok-rich-text-react-renderer@^2.9.0:
   version "2.9.1"

From 615d7d0e5d800ccf8a49cb07635e07821bcc3b02 Mon Sep 17 00:00:00 2001
From: Anna Hughes <annaraehughes@live.co.uk>
Date: Wed, 20 Dec 2023 19:45:36 +0000
Subject: [PATCH 7/8] Fix events dependencies (#777)

---
 components/course/CourseHeader.tsx                | 7 -------
 components/crisp/CrispScript.tsx                  | 2 +-
 components/storyblok/StoryblokCoursePage.tsx      | 2 +-
 components/storyblok/StoryblokMeetTheTeamPage.tsx | 2 +-
 components/storyblok/StoryblokSessionIbaPage.tsx  | 2 +-
 components/storyblok/StoryblokSessionPage.tsx     | 2 +-
 guards/authGuard.tsx                              | 4 ++--
 guards/publicPageDataWrapper.tsx                  | 2 +-
 pages/_app.tsx                                    | 2 +-
 pages/about-our-courses.tsx                       | 2 +-
 pages/account/about-you.tsx                       | 2 +-
 pages/account/apply-a-code.tsx                    | 2 +-
 pages/admin/dashboard.tsx                         | 2 +-
 pages/partner-admin/create-access-code.tsx        | 2 +-
 pages/therapy/book-session.tsx                    | 2 +-
 pages/therapy/confirmed-session.tsx               | 2 +-
 16 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/components/course/CourseHeader.tsx b/components/course/CourseHeader.tsx
index dcb92ca1..b8dcbf91 100644
--- a/components/course/CourseHeader.tsx
+++ b/components/course/CourseHeader.tsx
@@ -1,10 +1,7 @@
 import { Button } from '@mui/material';
 import { ISbRichtext } from '@storyblok/react';
 import { useTranslations } from 'next-intl';
-import { useEffect } from 'react';
 import { PROGRESS_STATUS } from '../../constants/enums';
-import { COURSE_OVERVIEW_VIEWED } from '../../constants/events';
-import logEvent from '../../utils/logEvent';
 import Link from '../common/Link';
 import Header from '../layout/Header';
 
@@ -18,10 +15,6 @@ export interface CourseHeaderProps {
 const CourseHeader = (props: CourseHeaderProps) => {
   const { name, description, image_with_background, courseProgress, eventData } = props;
 
-  useEffect(() => {
-    logEvent(COURSE_OVERVIEW_VIEWED, eventData);
-  });
-
   const headerProps = {
     title: name,
     introduction: description,
diff --git a/components/crisp/CrispScript.tsx b/components/crisp/CrispScript.tsx
index 23f44e62..82ae6875 100644
--- a/components/crisp/CrispScript.tsx
+++ b/components/crisp/CrispScript.tsx
@@ -43,7 +43,7 @@ const CrispScript = () => {
         logEvent(CHAT_STARTED, eventUserData);
       },
     ]);
-  });
+  }, []);
 
   useEffect(() => {
     const hasLiveAccess =
diff --git a/components/storyblok/StoryblokCoursePage.tsx b/components/storyblok/StoryblokCoursePage.tsx
index 729ee5cd..494e6247 100644
--- a/components/storyblok/StoryblokCoursePage.tsx
+++ b/components/storyblok/StoryblokCoursePage.tsx
@@ -98,7 +98,7 @@ const StoryblokCoursePage = (props: StoryblokCoursePageProps) => {
 
   useEffect(() => {
     logEvent(COURSE_OVERVIEW_VIEWED, eventData);
-  });
+  }, []);
 
   const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);
 
diff --git a/components/storyblok/StoryblokMeetTheTeamPage.tsx b/components/storyblok/StoryblokMeetTheTeamPage.tsx
index 1d7b5c35..b789f5b4 100644
--- a/components/storyblok/StoryblokMeetTheTeamPage.tsx
+++ b/components/storyblok/StoryblokMeetTheTeamPage.tsx
@@ -76,7 +76,7 @@ const StoryblokMeetTheTeamPage = (props: StoryblokMeetTheTeamPageProps) => {
 
   useEffect(() => {
     logEvent(MEET_THE_TEAM_VIEWED, eventUserData);
-  });
+  }, []);
 
   const headerProps = {
     title: title,
diff --git a/components/storyblok/StoryblokSessionIbaPage.tsx b/components/storyblok/StoryblokSessionIbaPage.tsx
index 60de68a1..b97a6e68 100644
--- a/components/storyblok/StoryblokSessionIbaPage.tsx
+++ b/components/storyblok/StoryblokSessionIbaPage.tsx
@@ -182,7 +182,7 @@ const StoryblokSessionIbaPage = (props: StoryblokSessionIbaPageProps) => {
 
   useEffect(() => {
     logEvent(SESSION_VIEWED, eventData);
-  });
+  }, []);
 
   const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);
 
diff --git a/components/storyblok/StoryblokSessionPage.tsx b/components/storyblok/StoryblokSessionPage.tsx
index 131c8755..bf551abb 100644
--- a/components/storyblok/StoryblokSessionPage.tsx
+++ b/components/storyblok/StoryblokSessionPage.tsx
@@ -213,7 +213,7 @@ const StoryblokSessionPage = (props: StoryblokSessionPageProps) => {
 
   useEffect(() => {
     logEvent(SESSION_VIEWED, eventData);
-  });
+  }, []);
 
   const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);
   const eventData = {
diff --git a/guards/authGuard.tsx b/guards/authGuard.tsx
index 25b6d668..942bbab9 100644
--- a/guards/authGuard.tsx
+++ b/guards/authGuard.tsx
@@ -54,7 +54,7 @@ export function AuthGuard({ children }: { children: JSX.Element }) {
     });
 
     return () => unsubscribe();
-  });
+  }, []);
 
   // 2. Add ongoing event listener to check for token changes
   useEffect(() => {
@@ -67,7 +67,7 @@ export function AuthGuard({ children }: { children: JSX.Element }) {
         await dispatch(setUserToken(token));
       }
     });
-  });
+  }, []);
 
   // Function to get User details from the backend api
   async function callGetUser() {
diff --git a/guards/publicPageDataWrapper.tsx b/guards/publicPageDataWrapper.tsx
index e0875679..6f6479fa 100644
--- a/guards/publicPageDataWrapper.tsx
+++ b/guards/publicPageDataWrapper.tsx
@@ -54,7 +54,7 @@ export function PublicPageDataWrapper({ children }: { children: JSX.Element }) {
       dispatch(setAuthStateLoading(false));
     });
     return () => unsubscribe();
-  });
+  }, []);
 
   useEffect(() => {
     async function callGetUser() {
diff --git a/pages/_app.tsx b/pages/_app.tsx
index ac7927fc..889eb50d 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -148,7 +148,7 @@ function AppReduxWrapper({ Component, ...rest }: MyAppProps) {
         (window as any).store = store;
       }
     }
-  });
+  }, []);
 
   return (
     <Provider store={store}>
diff --git a/pages/about-our-courses.tsx b/pages/about-our-courses.tsx
index 90d48fc1..b1a58778 100644
--- a/pages/about-our-courses.tsx
+++ b/pages/about-our-courses.tsx
@@ -25,7 +25,7 @@ const CourseAbout: NextPage<Props> = ({ story }) => {
 
   useEffect(() => {
     logEvent(ABOUT_COURSES_VIEWED, eventUserData);
-  });
+  }, []);
 
   if (!story) {
     return <NoDataAvailable />;
diff --git a/pages/account/about-you.tsx b/pages/account/about-you.tsx
index ae944870..38ad1573 100644
--- a/pages/account/about-you.tsx
+++ b/pages/account/about-you.tsx
@@ -63,7 +63,7 @@ const AboutYou: NextPage = () => {
 
   useEffect(() => {
     logEvent(ABOUT_YOU_VIEWED, eventUserData);
-  });
+  }, []);
 
   const headerProps = {
     partnerLogoSrc: welcomeToBloom,
diff --git a/pages/account/apply-a-code.tsx b/pages/account/apply-a-code.tsx
index 8b5d21e6..158b8c71 100644
--- a/pages/account/apply-a-code.tsx
+++ b/pages/account/apply-a-code.tsx
@@ -63,7 +63,7 @@ const ApplyACode: NextPage = () => {
     const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);
 
     logEvent(ASSIGN_NEW_PARTNER_VIEWED, eventUserData);
-  });
+  }, []);
 
   const headerProps = {
     title: t('applyCode.title'),
diff --git a/pages/admin/dashboard.tsx b/pages/admin/dashboard.tsx
index bcafaeed..3917d37b 100644
--- a/pages/admin/dashboard.tsx
+++ b/pages/admin/dashboard.tsx
@@ -34,7 +34,7 @@ const Dashboard: NextPage = () => {
 
   useEffect(() => {
     logEvent(CREATE_PARTNER_ACCESS_VIEWED, eventUserData);
-  });
+  }, []);
 
   return (
     <Box>
diff --git a/pages/partner-admin/create-access-code.tsx b/pages/partner-admin/create-access-code.tsx
index 6cf460ba..f089f1ea 100644
--- a/pages/partner-admin/create-access-code.tsx
+++ b/pages/partner-admin/create-access-code.tsx
@@ -36,7 +36,7 @@ const CreateAccessCode: NextPage = () => {
 
   useEffect(() => {
     logEvent(CREATE_PARTNER_ACCESS_VIEWED, { ...eventUserData });
-  });
+  }, []);
 
   return (
     <Box>
diff --git a/pages/therapy/book-session.tsx b/pages/therapy/book-session.tsx
index 61894412..d5e05cc4 100644
--- a/pages/therapy/book-session.tsx
+++ b/pages/therapy/book-session.tsx
@@ -102,7 +102,7 @@ const BookSession: NextPage = () => {
 
   useEffect(() => {
     logEvent(THERAPY_BOOKING_VIEWED, eventUserData);
-  });
+  }, []);
 
   const headerProps = {
     title: t('title'),
diff --git a/pages/therapy/confirmed-session.tsx b/pages/therapy/confirmed-session.tsx
index e4625feb..d6e8e683 100644
--- a/pages/therapy/confirmed-session.tsx
+++ b/pages/therapy/confirmed-session.tsx
@@ -44,7 +44,7 @@ const ConfirmedSession: NextPage = () => {
 
   useEffect(() => {
     logEvent(THERAPY_CONFIRMATION_VIEWED, eventUserData);
-  });
+  }, []);
 
   const headerProps = {
     title: t('confirmation.title'),

From a6945fe4f3669cde7b399b628c36272d61499ce5 Mon Sep 17 00:00:00 2001
From: Anna Hughes <annaraehughes@live.co.uk>
Date: Wed, 20 Dec 2023 19:57:39 +0000
Subject: [PATCH 8/8] Increase lighthouse desktop total-blocking-time (#778)

---
 lighthouse_desktop_budget.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lighthouse_desktop_budget.json b/lighthouse_desktop_budget.json
index 5a998f39..98e26cbe 100644
--- a/lighthouse_desktop_budget.json
+++ b/lighthouse_desktop_budget.json
@@ -34,7 +34,7 @@
       },
       {
         "metric": "total-blocking-time",
-        "budget": 800
+        "budget": 1500
       },
       {
         "metric": "speed-index",