diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 85e99cfc4..1bdd922f8 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -13,4 +13,4 @@ jobs:
     secrets:
       SONAR_TOKEN: ${{ secrets.SONAR_TOKEN }}
     with:
-      node-version: 24.x
\ No newline at end of file
+      node-version: 24.x
diff --git a/package.json b/package.json
index 983aa2983..b62e4f56d 100644
--- a/package.json
+++ b/package.json
@@ -13,20 +13,16 @@
     "pnpm": ">=11.1.3"
   },
   "dependencies": {
-    "@apollo/client": "^3.13.8",
-    "@babel/runtime": "^7.27.1",
+    "@apollo/client": "^3.14.0",
+    "@city-of-helsinki/react-helsinki-headless-cms": "^3.0.1",
     "@date-fns/tz": "^1.2.0",
     "@faker-js/faker": "^9.7.0",
     "@nabla/vite-plugin-eslint": "^3.0.1",
     "@playwright/test": "^1.60.0",
     "@sentry/browser": "^10.25.0",
     "@stylistic/eslint-plugin": "^5.10.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
+    "@tanstack/react-table": "^8.20.0",
     "@types/apollo-upload-client": "^18.0.0",
-    "@types/classnames": "^2.3.4",
-    "@types/dompurify": "^3.2.0",
     "@types/draft-js": "^0.11.20",
     "@types/draftjs-to-html": "^0.8.4",
     "@types/file-saver": "^2.0.7",
@@ -34,12 +30,10 @@
     "@types/jsonwebtoken": "^9.0.9",
     "@types/lodash": "^4.17.16",
     "@types/node": "^20.17.43",
-    "@types/react": "^18.3.20",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "@types/react-draft-wysiwyg": "^1.13.9",
     "@types/react-helmet": "^6.1.11",
-    "@types/react-modal": "^3.16.3",
-    "@types/react-table": "^7.7.20",
     "@typescript-eslint/eslint-plugin": "^8.57.2",
     "@typescript-eslint/parser": "^8.57.2",
     "@vitejs/plugin-react-swc": "^4.3.0",
@@ -50,12 +44,10 @@
     "classnames": "^2.5.1",
     "cross-env": "^7.0.3",
     "date-fns": "^4.1.0",
-    "dompurify": "^3.4.0",
     "dotenv": "^16.5.0",
     "draft-js": "^0.11.7",
     "draftjs-to-html": "^0.9.1",
     "eslint": "^9.39.4",
-    "eslint-config-prettier": "^10.1.8",
     "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.32.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
@@ -68,9 +60,8 @@
     "globals": "^16.1.0",
     "graphql": "^16.11.0",
     "graphql-tag": "^2.12.6",
-    "hds-design-tokens": "^5.0.0",
-    "hds-react": "^5.0.0",
-    "html-react-parser": "^5.2.3",
+    "hds-design-tokens": "^6.0.2",
+    "hds-react": "^6.0.2",
     "html-to-draftjs": "^1.5.0",
     "i18next": "^24.2.3",
     "i18next-browser-languagedetector": "^8.1.0",
@@ -80,18 +71,13 @@
     "jsonwebtoken": "^9.0.3",
     "msw": "^2.7.6",
     "path": "^0.12.7",
-    "react": "^18.3.1",
-    "react-content-loader": "^7.0.2",
-    "react-dom": "^18.3.1",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "react-draft-wysiwyg": "^1.15.0",
     "react-helmet": "^6.1.0",
-    "react-helsinki-headless-cms": "^1.0.2",
     "react-i18next": "^15.5.1",
     "react-idle-timer": "^5.7.2",
-    "react-modal": "^3.16.3",
     "react-router": "^7.15.0",
-    "react-table": "^7.8.0",
-    "react-toastify": "^11.0.5",
     "sass": "^1.87.0",
     "typescript": "^5.8.3",
     "use-deep-compare-effect": "^1.8.1",
@@ -146,7 +132,10 @@
     "@graphql-codegen/typescript": "^4.1.6",
     "@graphql-codegen/typescript-operations": "^4.6.1",
     "@graphql-codegen/typescript-react-apollo": "^4.3.2",
-    "dequal": "^2.0.3",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "doctoc": "^2.3.0",
     "husky": "^9.1.7",
     "lint-staged": "^16.4.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d1f309be7..a3d33b466 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,11 +29,11 @@ importers:
   .:
     dependencies:
       '@apollo/client':
-        specifier: ^3.13.8
-        version: 3.14.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(graphql@16.14.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@babel/runtime':
-        specifier: ^7.27.1
-        version: 7.29.7
+        specifier: ^3.14.0
+        version: 3.14.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(graphql@16.14.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@city-of-helsinki/react-helsinki-headless-cms':
+        specifier: ^3.0.1
+        version: 3.0.3(@apollo/client@3.14.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(graphql@16.14.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@types/node@20.19.41)(@types/react@18.3.29)(hds-react@6.0.2(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(postcss@8.5.15)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(typescript@5.9.3)
       '@date-fns/tz':
         specifier: ^1.2.0
         version: 1.5.0
@@ -52,24 +52,12 @@ importers:
       '@stylistic/eslint-plugin':
         specifier: ^5.10.0
         version: 5.10.0(eslint@9.39.4(jiti@2.7.0))
-      '@testing-library/jest-dom':
-        specifier: ^6.6.3
-        version: 6.9.1
-      '@testing-library/react':
-        specifier: ^16.3.0
-        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@testing-library/user-event':
-        specifier: ^14.6.1
-        version: 14.6.1(@testing-library/dom@10.4.1)
+      '@tanstack/react-table':
+        specifier: ^8.20.0
+        version: 8.21.3(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@types/apollo-upload-client':
         specifier: ^18.0.0
-        version: 18.0.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@types/classnames':
-        specifier: ^2.3.4
-        version: 2.3.4
-      '@types/dompurify':
-        specifier: ^3.2.0
-        version: 3.2.0
+        version: 18.0.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@types/draft-js':
         specifier: ^0.11.20
         version: 0.11.20
@@ -95,20 +83,14 @@ importers:
         specifier: ^18.3.20
         version: 18.3.29
       '@types/react-dom':
-        specifier: ^18.3.7
-        version: 18.3.7(@types/react@18.3.29)
+        specifier: ^19.2.3
+        version: 19.2.3(@types/react@18.3.29)
       '@types/react-draft-wysiwyg':
         specifier: ^1.13.9
         version: 1.13.9
       '@types/react-helmet':
         specifier: ^6.1.11
         version: 6.1.11
-      '@types/react-modal':
-        specifier: ^3.16.3
-        version: 3.16.3
-      '@types/react-table':
-        specifier: ^7.7.20
-        version: 7.7.20
       '@typescript-eslint/eslint-plugin':
         specifier: ^8.57.2
         version: 8.60.0(@typescript-eslint/parser@8.60.0(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3))(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)
@@ -123,10 +105,10 @@ importers:
         version: 4.1.7(vitest@4.1.7)
       apollo-upload-client:
         specifier: ^18.0.1
-        version: 18.0.1(@apollo/client@3.14.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(graphql@16.14.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(graphql@16.14.0)
+        version: 18.0.1(@apollo/client@3.14.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(graphql@16.14.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(graphql@16.14.0)
       apollo3-cache-persist:
         specifier: ^0.15.0
-        version: 0.15.0(@apollo/client@3.14.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(graphql@16.14.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))
+        version: 0.15.0(@apollo/client@3.14.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(graphql@16.14.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))
       axios:
         specifier: ^1.16.0
         version: 1.16.1
@@ -139,24 +121,18 @@ importers:
       date-fns:
         specifier: ^4.1.0
         version: 4.3.0
-      dompurify:
-        specifier: ^3.4.0
-        version: 3.4.7
       dotenv:
         specifier: ^16.5.0
         version: 16.6.1
       draft-js:
         specifier: ^0.11.7
-        version: 0.11.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 0.11.7(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       draftjs-to-html:
         specifier: ^0.9.1
         version: 0.9.1
       eslint:
         specifier: ^9.39.4
         version: 9.39.4(jiti@2.7.0)
-      eslint-config-prettier:
-        specifier: ^10.1.8
-        version: 10.1.8(eslint@9.39.4(jiti@2.7.0))
       eslint-import-resolver-typescript:
         specifier: ^4.4.4
         version: 4.4.4(eslint-plugin-import@2.32.0)(eslint@9.39.4(jiti@2.7.0))
@@ -171,7 +147,7 @@ importers:
         version: 3.4.0
       eslint-plugin-prettier:
         specifier: ^5.5.5
-        version: 5.5.6(@types/eslint@9.6.1)(eslint-config-prettier@10.1.8(eslint@9.39.4(jiti@2.7.0)))(eslint@9.39.4(jiti@2.7.0))(prettier@3.8.3)
+        version: 5.5.6(@types/eslint@9.6.1)(eslint@9.39.4(jiti@2.7.0))(prettier@3.8.3)
       eslint-plugin-react:
         specifier: ^7.37.5
         version: 7.37.5(eslint@9.39.4(jiti@2.7.0))
@@ -183,7 +159,7 @@ importers:
         version: 2.0.5
       formik:
         specifier: ^2.4.6
-        version: 2.4.9(@types/react@18.3.29)(react@18.3.1)
+        version: 2.4.9(@types/react@18.3.29)(react@19.2.7)
       globals:
         specifier: ^16.0.0
         version: 16.5.0
@@ -194,17 +170,14 @@ importers:
         specifier: ^2.12.6
         version: 2.12.6(graphql@16.14.0)
       hds-design-tokens:
-        specifier: ^5.0.0
-        version: 5.2.0
+        specifier: ^6.0.2
+        version: 6.0.2
       hds-react:
-        specifier: ^5.0.0
-        version: 5.2.0(@types/react@18.3.29)(eslint@9.39.4(jiti@2.7.0))(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(postcss@8.5.15)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)
-      html-react-parser:
-        specifier: ^5.2.3
-        version: 5.2.17(@types/react@18.3.29)(react@18.3.1)
+        specifier: ^6.0.2
+        version: 6.0.2(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(postcss@8.5.15)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       html-to-draftjs:
         specifier: ^1.5.0
-        version: 1.5.0(draft-js@0.11.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(immutable@3.8.3)
+        version: 1.5.0(draft-js@0.11.7(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(immutable@3.8.3)
       i18next:
         specifier: ^24.2.3
         version: 24.2.3(typescript@5.9.3)
@@ -230,41 +203,26 @@ importers:
         specifier: ^0.12.7
         version: 0.12.7
       react:
-        specifier: ^18.3.1
-        version: 18.3.1
-      react-content-loader:
-        specifier: ^7.0.2
-        version: 7.1.2(react@18.3.1)
+        specifier: ^19.2.5
+        version: 19.2.7
       react-dom:
-        specifier: ^18.3.1
-        version: 18.3.1(react@18.3.1)
+        specifier: ^19.2.5
+        version: 19.2.7(react@19.2.7)
       react-draft-wysiwyg:
         specifier: ^1.15.0
-        version: 1.15.0(draft-js@0.11.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(immutable@3.8.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 1.15.0(draft-js@0.11.7(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(immutable@3.8.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       react-helmet:
         specifier: ^6.1.0
-        version: 6.1.0(react@18.3.1)
-      react-helsinki-headless-cms:
-        specifier: ^1.0.2
-        version: 1.3.0(@apollo/client@3.14.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(graphql@16.14.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(date-fns@4.3.0)(hds-react@5.2.0(@types/react@18.3.29)(eslint@9.39.4(jiti@2.7.0))(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(postcss@8.5.15)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 6.1.0(react@19.2.7)
       react-i18next:
         specifier: ^15.5.1
-        version: 15.7.4(i18next@24.2.3(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)
+        version: 15.7.4(i18next@24.2.3(typescript@5.9.3))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(typescript@5.9.3)
       react-idle-timer:
         specifier: ^5.7.2
-        version: 5.7.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-modal:
-        specifier: ^3.16.3
-        version: 3.16.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 5.7.3(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       react-router:
         specifier: ^7.15.0
-        version: 7.15.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-table:
-        specifier: ^7.8.0
-        version: 7.8.0(react@18.3.1)
-      react-toastify:
-        specifier: ^11.0.5
-        version: 11.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+        version: 7.15.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       sass:
         specifier: ^1.87.0
         version: 1.100.0
@@ -273,7 +231,7 @@ importers:
         version: 5.9.3
       use-deep-compare-effect:
         specifier: ^1.8.1
-        version: 1.8.1(react@18.3.1)
+        version: 1.8.1(react@19.2.7)
       vite:
         specifier: ^8.0.5
         version: 8.0.14(@types/node@20.19.41)(esbuild@0.28.0)(jiti@2.7.0)(sass@1.100.0)(tsx@4.22.3)(yaml@2.9.0)
@@ -314,9 +272,18 @@ importers:
       '@graphql-codegen/typescript-react-apollo':
         specifier: ^4.3.2
         version: 4.4.2(graphql@16.14.0)
-      dequal:
-        specifier: ^2.0.3
-        version: 2.0.3
+      '@testing-library/dom':
+        specifier: ^10.4.0
+        version: 10.4.1
+      '@testing-library/jest-dom':
+        specifier: ^6.9.1
+        version: 6.9.1
+      '@testing-library/react':
+        specifier: ^16.3.2
+        version: 16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@testing-library/user-event':
+        specifier: ^14.6.1
+        version: 14.6.1(@testing-library/dom@10.4.1)
       doctoc:
         specifier: ^2.3.0
         version: 2.4.1
@@ -470,6 +437,18 @@ packages:
     resolution: {integrity: sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==}
     hasBin: true
 
+  '@city-of-helsinki/react-helsinki-headless-cms@3.0.3':
+    resolution: {integrity: sha512-wPGDRzc13eCDwbIUKmVei/2x8/AfpBzBT3AswWkvDs1L/6vrtzmU4RVs0qAUXHFPke9xNbdPWEvRkA420jHOow==}
+    engines: {node: '>=22.11.0'}
+    peerDependencies:
+      '@apollo/client': ^3.14.0
+      hds-react: '>=4.8.1'
+      react: ^18
+      react-dom: ^18
+    peerDependenciesMeta:
+      '@apollo/client':
+        optional: true
+
   '@commitlint/cli@20.5.3':
     resolution: {integrity: sha512-OJdL0EXWD5y9LPa0nr/geOwzaS8BsdaybKkcloB0JgsguGxNv2R+hC2FTPqrAcprg35zF33KOQerY0x8W1aesA==}
     engines: {node: '>=v18'}
@@ -627,9 +606,6 @@ packages:
   '@emnapi/wasi-threads@1.2.1':
     resolution: {integrity: sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==}
 
-  '@emotion/styled-base@11.0.0':
-    resolution: {integrity: sha512-/NY/PXrQkl/wI0+0E3QWd+m9kMg7h4THmjbPEe0VVnplNtdJC6db0VHDqmaC2tsEDcda6zvy3b8giM9DHa6BLw==}
-
   '@envelop/core@5.5.1':
     resolution: {integrity: sha512-3DQg8sFskDo386TkL5j12jyRAdip/8yzK3x7YGbZBgobZ4aKXrvDU0GppU0SnmrpQnNaiTUsxBs9LKkwQ/eyvw==}
     engines: {node: '>=18.0.0'}
@@ -1242,22 +1218,6 @@ packages:
   '@internationalized/string@3.2.8':
     resolution: {integrity: sha512-NdbMQUSfXLYIQol5VyMtinm9pZDciiMfN7RtmSuSB78io1hqwJ0naYfxyW6vgxWBkzWymQa/3uLDlbfmshtCaA==}
 
-  '@jest/environment@29.7.0':
-    resolution: {integrity: sha512-aQIfHDq33ExsN4jP1NWGXhxgQ/wixs60gDiKO+XVMd8Mn0NWPWgc34ZQDTb2jKaUWQ7MuwoitXAsN2XVXNMpAw==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  '@jest/fake-timers@29.7.0':
-    resolution: {integrity: sha512-q4DH1Ha4TTFPdxLsqDXK1d3+ioSL7yL5oCMJZgDYm6i+6CygW5E5xVr/D1HdsGxjt1ZWSfUAs9OxSB/BNelWrQ==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  '@jest/schemas@29.6.3':
-    resolution: {integrity: sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  '@jest/types@29.6.3':
-    resolution: {integrity: sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
@@ -1605,15 +1565,6 @@ packages:
     resolution: {integrity: sha512-KxXvfapcixpz6rVEB6HPjOUZT22yN6v0vI0urQSk1L8MlEWPDFCZkhw2xmkyoTGYeFw7tWTZd7e3lVzRZRN/EA==}
     engines: {node: '>=18'}
 
-  '@sinclair/typebox@0.27.10':
-    resolution: {integrity: sha512-MTBk/3jGLNB2tVxv6uLlFh1iu64iYOQ2PbdOSK3NW8JZsmlaOh2q6sdtKowBhfw8QFLmYNzTW4/oK4uATIi6ZA==}
-
-  '@sinonjs/commons@3.0.1':
-    resolution: {integrity: sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==}
-
-  '@sinonjs/fake-timers@10.3.0':
-    resolution: {integrity: sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==}
-
   '@standard-schema/spec@1.1.0':
     resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
 
@@ -1719,6 +1670,17 @@ packages:
   '@swc/types@0.1.26':
     resolution: {integrity: sha512-lyMwd7WGgG79RS7EERZV3T8wMdmPq3xwyg+1nmAM64kIhx5yl+juO2PYIHb7vTiPgPCj8LYjsNV2T5wiQHUEaw==}
 
+  '@tanstack/react-table@8.21.3':
+    resolution: {integrity: sha512-5nNMTSETP4ykGegmVkhjcS8tTLW6Vl4axfEGQN3v0zdHYbK4UfoqfPChclTrJ4EoK9QynqAu9oUf8VEmrpZ5Ww==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      react: '>=16.8'
+      react-dom: '>=16.8'
+
+  '@tanstack/table-core@8.21.3':
+    resolution: {integrity: sha512-ldZXEhOBb8Is7xLs01fR3YEc3DERiz5silj8tnGkFZytt1abEvl/GhUmCE0PMLaMPTa3Jk4HbKmRlHmu+gCftg==}
+    engines: {node: '>=12'}
+
   '@testing-library/dom@10.4.1':
     resolution: {integrity: sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==}
     engines: {node: '>=18'}
@@ -1754,10 +1716,6 @@ packages:
   '@textlint/markdown-to-ast@15.7.1':
     resolution: {integrity: sha512-9DLSah7g6mYNHvO6pssLdFvFPAl3HHyEIm4RE5of/1QN9FXJXDgdOcVV3YpQmbYT/YntuIvOQiqOndCSPWTW2A==}
 
-  '@tootallnate/once@3.0.1':
-    resolution: {integrity: sha512-VyMVKRrpHTT8PnotUeV8L/mDaMwD5DaAKCFLP73zAqAtvF0FCqky+Ki7BYbFCYQmqFyTe9316Ed5zS70QUR9eg==}
-    engines: {node: '>= 10'}
-
   '@tybys/wasm-util@0.10.2':
     resolution: {integrity: sha512-RoBvJ2X0wuKlWFIjrwffGw1IqZHKQqzIchKaadZZfnNpsAYp2mM0h36JtPCjNDAHGgYez/15uMBpfGwchhiMgg==}
 
@@ -1770,20 +1728,12 @@ packages:
   '@types/chai@5.2.3':
     resolution: {integrity: sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA==}
 
-  '@types/classnames@2.3.4':
-    resolution: {integrity: sha512-dwmfrMMQb9ujX1uYGvB5ERDlOzBNywnZAZBtOe107/hORWP05ESgU4QyaanZMWYYfd2BzrG78y13/Bju8IQcMQ==}
-    deprecated: This is a stub types definition. classnames provides its own type definitions, so you do not need this installed.
-
   '@types/cookie@0.6.0':
     resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
 
   '@types/deep-eql@4.0.2':
     resolution: {integrity: sha512-c9h9dVVMigMPc4bwTvC5dxqtqJZwQPePsWjPlpSOnojbor6pGqdk541lfA7AqFQr5pB1BRdq0juY9db81BwyFw==}
 
-  '@types/dompurify@3.2.0':
-    resolution: {integrity: sha512-Fgg31wv9QbLDA0SpTOXO3MaxySc4DKGLi8sna4/Utjo4r3ZRPdCt4UQee8BWr+Q5z21yifghREPJGYaEOEIACg==}
-    deprecated: This is a stub types definition. dompurify provides its own type definitions, so you do not need this installed.
-
   '@types/draft-js@0.11.20':
     resolution: {integrity: sha512-bZHtHxXnCu4wlUXlDWrIlJSG2LJ6wcycSWoxcTCcGd0cVOm35p0vh87qpIPzGK2NALMMvJhQXdS330iYB3iGlw==}
 
@@ -1810,21 +1760,9 @@ packages:
   '@types/html-to-draftjs@1.5.0':
     resolution: {integrity: sha512-6t0ZAkSR4n822+XD7PCtf7kPcG9GmqJzC3sm38xU0TbozbCCjculgp9wfMgyWR1q8VuEO+3rCf7iLFU7vslkPQ==}
 
-  '@types/istanbul-lib-coverage@2.0.6':
-    resolution: {integrity: sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w==}
-
-  '@types/istanbul-lib-report@3.0.3':
-    resolution: {integrity: sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA==}
-
-  '@types/istanbul-reports@3.0.4':
-    resolution: {integrity: sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ==}
-
   '@types/js-yaml@4.0.9':
     resolution: {integrity: sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==}
 
-  '@types/jsdom@20.0.1':
-    resolution: {integrity: sha512-d0r18sZPmMQr1eG35u12FZfhIXNrnsPU/g5wvRKCUf/tOGilKKwYMYGqh33BNR6ba+2gkHw1EUiHoN3mn7E5IQ==}
-
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
@@ -1849,8 +1787,8 @@ packages:
   '@types/prop-types@15.7.15':
     resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
 
-  '@types/react-dom@18.3.7':
-    resolution: {integrity: sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==}
+  '@types/react-dom@19.2.3':
+    resolution: {integrity: sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==}
     peerDependencies:
       '@types/react': ^18.3.20
 
@@ -1860,27 +1798,15 @@ packages:
   '@types/react-helmet@6.1.11':
     resolution: {integrity: sha512-0QcdGLddTERotCXo3VFlUSWO3ztraw8nZ6e3zJSgG7apwV5xt+pJUS8ewPBqT4NYB1optGLprNQzFleIY84u/g==}
 
-  '@types/react-modal@3.16.3':
-    resolution: {integrity: sha512-xXuGavyEGaFQDgBv4UVm8/ZsG+qxeQ7f77yNrW3n+1J6XAstUy5rYHeIHPh1KzsGc6IkCIdu6lQ2xWzu1jBTLg==}
-
-  '@types/react-table@7.7.20':
-    resolution: {integrity: sha512-ahMp4pmjVlnExxNwxyaDrFgmKxSbPwU23sGQw2gJK4EhCvnvmib2s/O/+y1dfV57dXOwpr2plfyBol+vEHbi2w==}
-
   '@types/react@18.3.29':
     resolution: {integrity: sha512-ch0qJdr2JY0r04NXSprbK6TXOgnaJ1Tz23fm5W+z0/CBah6BSBc3n96h7K9GOtwh0HrilNWHIBzE1Ko4Dcw/Wg==}
 
   '@types/set-cookie-parser@2.4.10':
     resolution: {integrity: sha512-GGmQVGpQWUe5qglJozEjZV/5dyxbOOZ0LHe/lqyWssB88Y4svNfst0uqBVscdDeIKl5Jy5+aPSvy7mI9tYRguw==}
 
-  '@types/stack-utils@2.0.3':
-    resolution: {integrity: sha512-9aEbYZ3TbYMznPdcdr3SmIrLXwC/AKZXQeCf9Pgao5CKb8CyHuEX5jzWPTkvregvhRJHcpRO6BFoGW9ycaOkYw==}
-
   '@types/statuses@2.0.6':
     resolution: {integrity: sha512-xMAgYwceFhRA2zY+XbEA7mxYbA093wdiW8Vu6gZPGWy9cmOyU9XesH1tNcEWsKFd5Vzrqx5T3D38PWx1FIIXkA==}
 
-  '@types/tough-cookie@4.0.5':
-    resolution: {integrity: sha512-/Ad8+nIOV7Rl++6f1BdKxFSMgmoqEoYbHRpPcx3JEfv8VRsQe9Z4mCXeJBzxs7mbHY/XOZZuXlRNfhpVPbs6ZA==}
-
   '@types/trusted-types@2.0.7':
     resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
 
@@ -1890,12 +1816,6 @@ packages:
   '@types/ws@8.18.1':
     resolution: {integrity: sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==}
 
-  '@types/yargs-parser@21.0.3':
-    resolution: {integrity: sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ==}
-
-  '@types/yargs@17.0.35':
-    resolution: {integrity: sha512-qUHkeCyQFxMXg79wQfTtfndEC+N9ZZg76HJftDJp+qH2tV7Gj4OJi7l+PiWwJ+pWtW8GwSmqsDj/oymhrTWXjg==}
-
   '@typescript-eslint/eslint-plugin@8.60.0':
     resolution: {integrity: sha512-QYb/sa74/s7OKMbACMjrYnGspj9Hs5YI5aaffSL65UfeBUzVzBJfVo3oWSpbzPurvm7yaCCo2Lk7lVj610HqKw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1904,16 +1824,6 @@ packages:
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/parser@6.21.0':
-    resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      eslint: ^7.0.0 || ^8.0.0
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   '@typescript-eslint/parser@8.60.0':
     resolution: {integrity: sha512-fcqpj/MyK4sxDPcbe7STNPbpQL4RLZOPWuaTmwZYuc+hJKzRf58yRxfhqGpc6PIq9ZyfSBpfHgmUHmHs0KwHwg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1927,10 +1837,6 @@ packages:
     peerDependencies:
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/scope-manager@6.21.0':
-    resolution: {integrity: sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-
   '@typescript-eslint/scope-manager@8.60.0':
     resolution: {integrity: sha512-pFzqhllJMs+jghLQWzV00ds39xLzuyqPSev5pd8f4Ir0rtKR3ZLUB4/4dhjOFighWb9larvtfJvqL+4yKDI3Xw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1948,23 +1854,10 @@ packages:
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/types@6.21.0':
-    resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-
   '@typescript-eslint/types@8.60.0':
     resolution: {integrity: sha512-AsE7x2XaAK+CVbeih0Fvbn+r1qHxtpLDJ3XUuFcIinT318T90yHMJC+Zgv+jUuDjQQd06HKwxnDu6sz1IcTilA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/typescript-estree@6.21.0':
-    resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-    peerDependencies:
-      typescript: '*'
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-
   '@typescript-eslint/typescript-estree@8.60.0':
     resolution: {integrity: sha512-3AcZNBGMClm6CXDyo8kYvVGT/sx29sS0oBsIb9oZI2gunA4Vm2M3YHzRLPvsUBBsl+yB5FPtltq7gGH0iTlp9g==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1978,10 +1871,6 @@ packages:
       eslint: ^8.57.0 || ^9.0.0 || ^10.0.0
       typescript: '>=4.8.4 <6.1.0'
 
-  '@typescript-eslint/visitor-keys@6.21.0':
-    resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==}
-    engines: {node: ^16.0.0 || >=18.0.0}
-
   '@typescript-eslint/visitor-keys@8.60.0':
     resolution: {integrity: sha512-9WI52t8ZGLVGrPMBet25yAftqY/n95+zmoUUtJBBQTKDSKUu7OsPTroT2op7U9JatkoRccL0YkWDNMFfC4Sjxg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2182,22 +2071,11 @@ packages:
     resolution: {integrity: sha512-FNoYzHawTMk/6KMQoEG5O4PuioX19UbwdQKF44yw0nLfOypfQdjtfZzo/UIJWAJ23sNIFbD1Ug9lbaDGMwbqQA==}
     engines: {node: '>=8'}
 
-  abab@2.0.6:
-    resolution: {integrity: sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==}
-    deprecated: Use your platform's native atob() and btoa() methods instead
-
-  acorn-globals@7.0.1:
-    resolution: {integrity: sha512-umOSDSDrfHbTNPuNpC2NSnnA3LUrqpevPb4T9jRx4MagXNS0rs+gwiTcAvqCRmsD6utzsrzNt+ebm00SNWiC3Q==}
-
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
       acorn: ^6.0.0 || ^7.0.0 || ^8.0.0
 
-  acorn-walk@8.3.5:
-    resolution: {integrity: sha512-HEHNfbars9v4pgpW6SO1KSPkfoS0xVOM/9UzkJltjlsHZmJasxg8aXkuZa7SMf8vKGIBhpUsPluQSqhJFCqebw==}
-    engines: {node: '>=0.4.0'}
-
   acorn@8.16.0:
     resolution: {integrity: sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==}
     engines: {node: '>=0.4.0'}
@@ -2469,10 +2347,6 @@ packages:
     resolution: {integrity: sha512-TQMmc3w+5AxjpL8iIiwebF73dRDF4fBIieAqGn9RGCWaEVwQ6Fb2cGe31Yns0RRIzii5goJ1Y7xbMwo1TxMplw==}
     engines: {node: '>= 20.19.0'}
 
-  ci-info@3.9.0:
-    resolution: {integrity: sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ==}
-    engines: {node: '>=8'}
-
   classnames@2.5.1:
     resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
 
@@ -2632,16 +2506,6 @@ packages:
   css.escape@1.5.1:
     resolution: {integrity: sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==}
 
-  cssom@0.3.8:
-    resolution: {integrity: sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==}
-
-  cssom@0.5.0:
-    resolution: {integrity: sha512-iKuQcq+NdHqlAcwUY0o/HL69XQrUaQdMjmStJ8JFmUaiiQErlhrmuigkg/CU4E2J0IyUKUrMAgl36TvN67MqTw==}
-
-  cssstyle@2.3.0:
-    resolution: {integrity: sha512-AZL67abkUzIuvcHqk7c09cezpGNcxUxU4Ioi/05xHk4DQeTkWmGYftIE6ctU6AEt+Gn4n1lDStOtj7FKycP71A==}
-    engines: {node: '>=8'}
-
   cssstyle@4.6.0:
     resolution: {integrity: sha512-2z+rWdzbbSZv6/rhtvzvqeZQHrBaqgogqt85sqFNbabZOuFbCVFb8kPeEtZjiKkbrm395irpNKiYeFeLiQnFPg==}
     engines: {node: '>=18'}
@@ -2660,10 +2524,6 @@ packages:
     resolution: {integrity: sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==}
     engines: {node: '>= 12'}
 
-  data-urls@3.0.2:
-    resolution: {integrity: sha512-Jy/tj3ldjZJo63sVAvg6LHt2mHvl4V6AgRAmNDtLdm7faqtsx+aJG42rsyCo9JCoRVKwPFzKlIPx3DIibwSIaQ==}
-    engines: {node: '>=12'}
-
   data-urls@5.0.0:
     resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==}
     engines: {node: '>=18'}
@@ -2786,11 +2646,6 @@ packages:
   domelementtype@2.3.0:
     resolution: {integrity: sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==}
 
-  domexception@4.0.0:
-    resolution: {integrity: sha512-A2is4PLG+eeSfoTMA95/s4pvAoSo2mKtiM5jlHkAVewmiO8ISFTFKZjH7UAM1Atli/OT/7JHOrJRJiMKUZKYBw==}
-    engines: {node: '>=12'}
-    deprecated: Use your platform's native DOMException instead
-
   domhandler@4.3.1:
     resolution: {integrity: sha512-GrwoxYN+uWlzO8uhUXRl0P+kHE4GtVPfYzVLcUxPL7KNdHKj66vvlhiweIHqYYXWlw+T8iLMp42Lm67ghw4WMQ==}
     engines: {node: '>= 4'}
@@ -2942,25 +2797,10 @@ packages:
     resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==}
     engines: {node: '>=0.8.0'}
 
-  escape-string-regexp@2.0.0:
-    resolution: {integrity: sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w==}
-    engines: {node: '>=8'}
-
   escape-string-regexp@4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
-  escodegen@2.1.0:
-    resolution: {integrity: sha512-2NlIDTwUWJN0mRPQOdtQBzbUHvdGY2P1VXSyU83Q3xKxM7WHX2Ql8dKq782Q9TgQUNOLEzEYu9bzLNj1q88I5w==}
-    engines: {node: '>=6.0'}
-    hasBin: true
-
-  eslint-config-prettier@10.1.8:
-    resolution: {integrity: sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==}
-    hasBin: true
-    peerDependencies:
-      eslint: '>=7.0.0'
-
   eslint-import-context@0.1.9:
     resolution: {integrity: sha512-K9Hb+yRaGAGUbwjhFNHvSmmkZs9+zbuoe3kFQ4V1wYjrepUFYM2dZAfNtjbbj3qsPfUfsA68Bx/ICWQMi+C8Eg==}
     engines: {node: ^12.20.0 || ^14.18.0 || >=16.0.0}
@@ -3083,11 +2923,6 @@ packages:
     resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  esprima@4.0.1:
-    resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
-    engines: {node: '>=4'}
-    hasBin: true
-
   esquery@1.7.0:
     resolution: {integrity: sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==}
     engines: {node: '>=0.10'}
@@ -3110,9 +2945,6 @@ packages:
   eventemitter3@5.0.4:
     resolution: {integrity: sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==}
 
-  exenv@1.2.2:
-    resolution: {integrity: sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==}
-
   exit-on-epipe@1.0.1:
     resolution: {integrity: sha512-h2z5mrROTxce56S+pnvAV890uu7ls7f1kEvVGJbw1OlFH3/mlJ5bkXu0KRyW94v37zzHPiUd55iLn3DA7TjWpw==}
     engines: {node: '>=0.8'}
@@ -3327,9 +3159,6 @@ packages:
     resolution: {integrity: sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==}
     engines: {node: '>= 0.4'}
 
-  graceful-fs@4.2.11:
-    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
-
   graphql-config@5.1.6:
     resolution: {integrity: sha512-fCkYnm4Kdq3un0YIM4BCZHVR5xl0UeLP6syxxO7KAstdY7QVyVvTHP0kRPDYEP1v08uwtJVgis5sj3IOTLOniQ==}
     engines: {node: '>= 16.0.0'}
@@ -3398,25 +3227,25 @@ packages:
     resolution: {integrity: sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg==}
     engines: {node: '>= 0.4'}
 
-  hds-core@5.2.0:
-    resolution: {integrity: sha512-8L7wi54U8u00Ei4H4614y3UT2YZcSIHO2Xijah+Vda3UUWoro+arOYsTEpUAa3pxjwCOXO9dydAzsQOGT0sozA==}
-    engines: {node: ^22.13.1}
-
-  hds-design-tokens@3.13.0:
-    resolution: {integrity: sha512-AJXnFevroztUrZGkP9cM9pewkMt31EM0MhT8hBQN5nzzC1tKFVcn75Yxke4lS//hmB+Bdxv+/PudKPUeqF6ctw==}
-    deprecated: Versions prior to v4 are deprecated, please update.
+  hds-core@6.0.2:
+    resolution: {integrity: sha512-WJoIjxGFUSnpFQOGzkpphdbC/2fa9eDXYK2+ODt1pJCCZARLrkl5vMt3+0dqq5oRZ7g/kZd9j7Xc7ZDqR5/aDA==}
+    engines: {node: ^24}
 
-  hds-design-tokens@5.2.0:
-    resolution: {integrity: sha512-9fSl+Wfy3y0p26gESblyo91s2D32Q29r1jsioRCwD6W3mh/gF+xUsws/B+LYxyFz35vY5y+rwRluR1g6twQCXg==}
+  hds-design-tokens@4.10.0:
+    resolution: {integrity: sha512-MBfJRuH9/SiGGpQHqoCDjiCD7o8URTOQ4WH/8qg1lv6n5q8uyoPvguMqUH+EEqvRorzctXMuYe71lqPfkDCt1A==}
     engines: {node: ^22.13.1}
 
-  hds-react@5.2.0:
-    resolution: {integrity: sha512-MN1Y7WNWcD4RLpL4X9MF3NxhcBxXMdXBvQpALSw9dRnFeUMgyZnNzqyUQ+KBHGbxpSCdWsSoigAJt5QnOBGE5A==}
-    engines: {node: ^22.13.1}
+  hds-design-tokens@6.0.2:
+    resolution: {integrity: sha512-/OxfpXo+lTU8OkaXGVYhZxpdzRcO8sUSMo5gfxqAvryvtvNv4RPx0xDrAEq7mhr3I6DFPJVRYvExQicoqHFgPQ==}
+    engines: {node: ^24}
+
+  hds-react@6.0.2:
+    resolution: {integrity: sha512-ALlUjw+rkJ6m3muH8r/9QsVvImQ8jAKuAK6W8gIQ55R09N9NoZf/imPelAvZBgi/w8mqhfyLsQfuexUWUJRaWw==}
+    engines: {node: ^24}
     peerDependencies:
       postcss: ^8.4.21
-      react: ^16.8.0 || ^17 || ^18 || ^19
-      react-dom: ^16.8.0 || ^17 || ^18 || ^19
+      react: ^19.0.0
+      react-dom: ^19.0.0
 
   header-case@2.0.4:
     resolution: {integrity: sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==}
@@ -3427,16 +3256,9 @@ packages:
   hoist-non-react-statics@3.3.2:
     resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
 
-  html-dom-parser@5.0.3:
-    resolution: {integrity: sha512-slsc6ipw88OUZjAayRs5NTmfOQCwcUa3hNyk6AdsbQxY09H5Lr1Y3CZ4ZlconMKql3Ga6sWg3HMoUzo7KSItaQ==}
-
   html-dom-parser@5.1.8:
     resolution: {integrity: sha512-MCIUng//mF2qTtGHXJWr6OLfHWmg3Pm8ezpfiltF83tizPWY17JxT4dRLE8lykJ5bChJELoY3onQKPbufJHxYA==}
 
-  html-encoding-sniffer@3.0.0:
-    resolution: {integrity: sha512-oWv4T4yJ52iKrufjnyZPkrN0CH3QnrUqdB6In1g5Fe1mia8GmF36gnfNySxoZtxD5+NmYw1EElVXiBk93UeskA==}
-    engines: {node: '>=12'}
-
   html-encoding-sniffer@4.0.0:
     resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==}
     engines: {node: '>=18'}
@@ -3454,11 +3276,6 @@ packages:
   html-parse-stringify@3.0.1:
     resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==}
 
-  html-react-parser@4.2.10:
-    resolution: {integrity: sha512-JyKZVQ+kQ8PdycISwkuLbEEvV/k4hWhU6cb6TT7yGaYwdqA7cPt4VRYXkCZcix2vlQtgDBSMJUmPI2jpNjPGvg==}
-    peerDependencies:
-      react: 0.14 || 15 || 16 || 17 || 18
-
   html-react-parser@5.2.17:
     resolution: {integrity: sha512-m+K/7Moq1jodAB4VL0RXSOmtwLUYoAsikZhwd+hGQe5Vtw2dbWfpFd60poxojMU0Tsh9w59mN1QLEcoHz0Dx9w==}
     peerDependencies:
@@ -3480,13 +3297,6 @@ packages:
   htmlparser2@7.2.0:
     resolution: {integrity: sha512-H7MImA4MS6cw7nbyURtLPO1Tms7C5H602LRETv95z1MxO/7CP7rDVROehUYeYBUYEON94NXXDEPmZuq+hX4sog==}
 
-  htmlparser2@9.0.0:
-    resolution: {integrity: sha512-uxbSI98wmFT/G4P2zXx4OVx04qWUmyFPrD2/CNepa2Zo3GPNaCaaxElDgwUrwYWkK1nr9fft0Ya8dws8coDLLQ==}
-
-  http-proxy-agent@5.0.0:
-    resolution: {integrity: sha512-n2hY8YdoRE1i7r6M0w9DIw5GgZN0G25P8zLCRQ8rjXtTU3vsNFBI/vWK/UIeE6g5MUUz6avwAPXmL6Fy9D/90w==}
-    engines: {node: '>= 6'}
-
   http-proxy-agent@7.0.2:
     resolution: {integrity: sha512-T1gkAiYYDWYx3V5Bmyu7HcfcvL7mUrTWiM6yOfa3PIphViJ/gFPbvidQ+veqSOHci/PxBcDabeUNCzpOODJZig==}
     engines: {node: '>= 14'}
@@ -3576,9 +3386,6 @@ packages:
     resolution: {integrity: sha512-IBTdIkzZNOpqm7q3dRqJvMaldXjDHWkEDfrwGEQTs5eaQMWV+djAhR+wahyNNMAa+qpbDUhBMVt4ZKNwpPm7xQ==}
     engines: {node: ^20.17.0 || >=22.9.0}
 
-  inline-style-parser@0.2.2:
-    resolution: {integrity: sha512-EcKzdTHVe8wFVOGEYXiW9WmJXPjqi1T+234YpJr98RiFYKHV3cdy1+3mkTE+KHTHxFFLH51SfaGOoUdW+v7ViQ==}
-
   inline-style-parser@0.2.7:
     resolution: {integrity: sha512-Nb2ctOyNR8DqQoR0OwRG95uNWIC0C1lCgf5Naz5H6Ji72KZ8OcFZLz2P5sNgwlyoJ8Yif11oMuYs5pBQa86csA==}
 
@@ -3807,27 +3614,6 @@ packages:
     resolution: {integrity: sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==}
     engines: {node: '>= 0.4'}
 
-  jest-environment-jsdom@29.7.0:
-    resolution: {integrity: sha512-k9iQbsf9OyOfdzWH8HDmrRT0gSIcX+FLNW7IQq94tFX0gynPwqDTW0Ho6iMVNjGz/nb+l/vW3dWM2bbLLpkbXA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-    peerDependencies:
-      canvas: ^2.5.0
-    peerDependenciesMeta:
-      canvas:
-        optional: true
-
-  jest-message-util@29.7.0:
-    resolution: {integrity: sha512-GBEV4GRADeP+qtB2+6u61stea8mGcOT4mCtrYISZwfu9/ISHFJ/5zOMXYbpBE9RsS5+Gb63DW4FgmnKJ79Kf6w==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  jest-mock@29.7.0:
-    resolution: {integrity: sha512-ITOMZn+UkYS4ZFh83xYAOzWStloNzJFO2s8DWrE4lhtGD+AorgnbkiKERe4wQVBydIGPx059g6riW5Btp6Llnw==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
-  jest-util@29.7.0:
-    resolution: {integrity: sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
   jiti@1.21.7:
     resolution: {integrity: sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==}
     hasBin: true
@@ -3853,15 +3639,6 @@ packages:
     resolution: {integrity: sha512-qQKT4zQxXl8lLwBtHMWwaTcGfFOZviOJet3Oy/xmGk2gZH677CJM9EvtfdSkgWcATZhj/55JZ0rmy3myCT5lsA==}
     hasBin: true
 
-  jsdom@20.0.3:
-    resolution: {integrity: sha512-SYhBvTh89tTfCD/CRdSOm13mOBa42iTaTyfyEWBdKcGdPxPtLFBXuHR8XHb33YNYaP+lLbmSvBTsnoesCNJEsQ==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      canvas: ^2.5.0
-    peerDependenciesMeta:
-      canvas:
-        optional: true
-
   jsdom@26.1.0:
     resolution: {integrity: sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==}
     engines: {node: '>=18'}
@@ -4522,10 +4299,6 @@ packages:
     resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==}
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
 
-  pretty-format@29.7.0:
-    resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
-    engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
-
   printj@1.1.2:
     resolution: {integrity: sha512-zA2SmoLaxZyArQTOPj5LXecR+RagfPSU5Kw1qP+jkWeNlrq+eJZyY2oS68SU1Z/7/myXM4lo9716laOFAVStCQ==}
     engines: {node: '>=0.8'}
@@ -4548,16 +4321,10 @@ packages:
     resolution: {integrity: sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==}
     engines: {node: '>=10'}
 
-  psl@1.15.0:
-    resolution: {integrity: sha512-JZd3gMVBAVQkSs6HdNZo9Sdo0LNcQeMNP3CozBJb3JYC/QUYZTnKxP+f8oWRX4rHP5EurWxqAHTSwUCjlNKa1w==}
-
   punycode@2.3.1:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
-  querystringify@2.2.0:
-    resolution: {integrity: sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==}
-
   queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
 
@@ -4567,16 +4334,10 @@ packages:
       react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
       react-dom: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
 
-  react-content-loader@7.1.2:
-    resolution: {integrity: sha512-naFG7OERUQNPKQt1QWHyBF0/y6Zmr7dOzqjs1U5yOnu4OZmcE3+b/blp40dEKa9lvYAzOuj5dvfTK1cg5YWJkA==}
-    engines: {node: '>=10'}
+  react-dom@19.2.7:
+    resolution: {integrity: sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==}
     peerDependencies:
-      react: '>=18.0.0'
-
-  react-dom@18.3.1:
-    resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
-    peerDependencies:
-      react: ^18.3.1
+      react: ^19.2.7
 
   react-draft-wysiwyg@1.15.0:
     resolution: {integrity: sha512-p1cYZcWc6/ALFBVksbFoCM3b29fGQDlZLIMrXng0TU/UElxIOF2/AWWo4L5auIYVhmqKTZ0NkNjnXOzGGuxyeA==}
@@ -4597,20 +4358,6 @@ packages:
     peerDependencies:
       react: '>=16.3.0'
 
-  react-helsinki-headless-cms@1.3.0:
-    resolution: {integrity: sha512-jbMLACpKk8a+AW7psHUD2AzT9kMVoGMK1qGvOOUU0YvKRnzEGle+LjimGmw1esDiPSoXAPJwjKxPoXnUFW3a9A==}
-    engines: {node: '>=18.17.1'}
-    deprecated: Package has been moved to a scoped name. Please use @city-of-helsinki/react-helsinki-headless-cms instead.
-    peerDependencies:
-      '@apollo/client': ^3.10.16
-      date-fns: ^2.28.0
-      hds-react: '>=1.11.1'
-      react: '>=16.8.0'
-      react-dom: '>=16.8.0'
-    peerDependenciesMeta:
-      '@apollo/client':
-        optional: true
-
   react-hook-form@7.76.1:
     resolution: {integrity: sha512-rYM7tPiWlu3nZchkR/ex7piyzui2vFPyaLnXnI/RnblB/L4qfMmyses8llJVtF1NpE9WBBsJlGtcSZzPCXW1qQ==}
     engines: {node: '>=18.0.0'}
@@ -4645,21 +4392,9 @@ packages:
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
-  react-is@18.3.1:
-    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
-
-  react-lifecycles-compat@3.0.4:
-    resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==}
-
   react-merge-refs@1.1.0:
     resolution: {integrity: sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ==}
 
-  react-modal@3.16.3:
-    resolution: {integrity: sha512-yCYRJB5YkeQDQlTt17WGAgFJ7jr2QYcWa1SHqZ3PluDmnKJ/7+tVU+E6uKyZ0nODaeEj+xCpK4LcSnKXLMC0Nw==}
-    peerDependencies:
-      react: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 || ^19
-      react-dom: ^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 || ^19
-
   react-popper@2.2.5:
     resolution: {integrity: sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==}
     peerDependencies:
@@ -4689,25 +4424,14 @@ packages:
     peerDependencies:
       react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1
 
-  react-table@7.8.0:
-    resolution: {integrity: sha512-hNaz4ygkZO4bESeFfnfOft73iBUj8K5oKi1EcSHPAibEydfsX2MyU6Z8KCr3mv3C9Kqqh71U+DhZkFvibbnPbA==}
-    peerDependencies:
-      react: ^16.8.3 || ^17.0.0-0 || ^18.0.0
-
-  react-toastify@11.1.0:
-    resolution: {integrity: sha512-e9h23x3phN0wbFeB6yovmWp7lobzV4CaCH0LO8nVP6H7Y+3GbcLpIzMm9dJhcp1RXbpyfvjgpfXqO80QAmn7sg==}
-    peerDependencies:
-      react: ^18 || ^19
-      react-dom: ^18 || ^19
-
   react-use-measure@2.0.1:
     resolution: {integrity: sha512-lFfHiqcXbJ2/6aUkZwt8g5YYM7EGqNVxJhMqMPqv1BVXRKp8D7jYLlmma0SvhRY4WYxxkZpCdbJvhDylb5gcEA==}
     peerDependencies:
       react: '>=16.13'
       react-dom: '>=16.13'
 
-  react@18.3.1:
-    resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
+  react@19.2.7:
+    resolution: {integrity: sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==}
     engines: {node: '>=0.10.0'}
 
   readable-stream@3.6.2:
@@ -4777,9 +4501,6 @@ packages:
     resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
     engines: {node: '>=0.10.0'}
 
-  requires-port@1.0.0:
-    resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==}
-
   reselect@4.1.8:
     resolution: {integrity: sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==}
 
@@ -4865,8 +4586,8 @@ packages:
     resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
     engines: {node: '>=v12.22.7'}
 
-  scheduler@0.23.2:
-    resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==}
+  scheduler@0.27.0:
+    resolution: {integrity: sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==}
 
   scuid@1.1.0:
     resolution: {integrity: sha512-MuCAyrGZcTLfQoH2XoBlQ8C6bzwN88XT/0slOGz0pn8+gIP85BOAfYa44ZXQUTOwRwPU0QvgU+V+OSajl/59Xg==}
@@ -4969,10 +4690,6 @@ packages:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
 
-  source-map@0.6.1:
-    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
-    engines: {node: '>=0.10.0'}
-
   sponge-case@1.0.1:
     resolution: {integrity: sha512-dblb9Et4DAtiZ5YSUZHLl4XhH4uK80GhAZrVXdN4O2P4gQ40Wa5UIOPUHlA/nFd2PLblBZWUioLMMAVrgpoYcA==}
 
@@ -4980,10 +4697,6 @@ packages:
     resolution: {integrity: sha512-o3yWv49B/o4QZk5ZcsALc6t0+eCelPc44zZsLtCQnZPDwFpDYSWcDnrv2TtMmMbQ7uKo3J0HTURCqckw23czNQ==}
     engines: {node: '>=12.0.0'}
 
-  stack-utils@2.0.6:
-    resolution: {integrity: sha512-XlkWvfIm6RmsWtNJx+uqtKLS8eqFbxUg0ZzLXqY0caEy9l7hruX8IpiDnjsLavoBgqCCR71TqWO8MaXYheJ3RQ==}
-    engines: {node: '>=10'}
-
   stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
 
@@ -5072,15 +4785,9 @@ packages:
   style-to-js@1.1.21:
     resolution: {integrity: sha512-RjQetxJrrUJLQPHbLku6U/ocGtzyjbJMP9lCNK7Ag0CNh690nSH8woqWH9u16nMjYBAok+i7JO1NP2pOy8IsPQ==}
 
-  style-to-js@1.1.8:
-    resolution: {integrity: sha512-bPSspCXkkhETLXnEgDbaoWRWyv3lF2bj32YIc8IElok2IIMHUlZtQUrxYmAkKUNxpluhH0qnKWrmuoXUyTY12g==}
-
   style-to-object@1.0.14:
     resolution: {integrity: sha512-LIN7rULI0jBscWQYaSswptyderlarFkjQ+t79nzty8tcIAceVomEVlLzH5VP4Cmsv6MtKhs7qaAiwlcp+Mgaxw==}
 
-  style-to-object@1.0.3:
-    resolution: {integrity: sha512-xOpx7S53E0V3DpVsvt7ySvoiumRpfXiC99PUXLqGB3wiAnN9ybEIpuzlZ8LAZg+h1sl9JkEUwtSQXxcCgFqbbg==}
-
   supports-color@7.2.0:
     resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
     engines: {node: '>=8'}
@@ -5167,10 +4874,6 @@ packages:
   toposort@2.0.2:
     resolution: {integrity: sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==}
 
-  tough-cookie@4.1.4:
-    resolution: {integrity: sha512-Loo5UUvLD9ScZ6jh8beX1T6sO1w2/MpCRpEP7V280GKMVUQ0Jzar2U3UJPsrdbziLEMMhu3Ujnq//rhiFuIeag==}
-    engines: {node: '>=6'}
-
   tough-cookie@5.1.2:
     resolution: {integrity: sha512-FVDYdxtnj0G6Qm/DhNPSb8Ju59ULcup3tuJxkFb5K8Bv2pUXILbf0xZWU8PX8Ov19OXljbUyveOFwRMwkXzO+A==}
     engines: {node: '>=16'}
@@ -5182,10 +4885,6 @@ packages:
   tr46@0.0.3:
     resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
 
-  tr46@3.0.0:
-    resolution: {integrity: sha512-l7FvfAHlcmulp8kr+flpQZmVwtu7nfRV7NZujtN0OqES8EL4O4e0qqzL0DC5gAvx/ZC/9lk6rhcUwYvkBnBnYA==}
-    engines: {node: '>=12'}
-
   tr46@5.1.1:
     resolution: {integrity: sha512-hdF5ZgjTqgAntKkklYw0R03MG2x/bSzTtkxmIRw/sTNV8YXsCJ1tfLAX23lhxhHJlEf3CRCOCGGWw3vI3GaSPw==}
     engines: {node: '>=18'}
@@ -5197,12 +4896,6 @@ packages:
   trough@1.0.5:
     resolution: {integrity: sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==}
 
-  ts-api-utils@1.4.3:
-    resolution: {integrity: sha512-i3eMG77UTMD0hZhgRS562pv83RC6ukSAC2GMNWc+9dieh/+jDM5u5YG+NHX6VNDRHQcHwmsTHctP9LhbC3WxVw==}
-    engines: {node: '>=16'}
-    peerDependencies:
-      typescript: '>=4.2.0'
-
   ts-api-utils@2.5.0:
     resolution: {integrity: sha512-OJ/ibxhPlqrMM0UiNHJ/0CKQkoKF243/AEmplt3qpRgkW8VG7IfOS41h7V8TjITqdByHzrjcS/2si+y4lIh8NA==}
     engines: {node: '>=18.12'}
@@ -5244,10 +4937,6 @@ packages:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
 
-  type-detect@4.0.8:
-    resolution: {integrity: sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==}
-    engines: {node: '>=4'}
-
   type-fest@0.21.3:
     resolution: {integrity: sha512-t0rzBq87m3fVcduHDUFhKmyyX+9eo6WQjZvf51Ea/M0Q7+T374Jp1aUiyUl0GKxp8M/OETVHSDvmkyPgvX+X2w==}
     engines: {node: '>=10'}
@@ -5315,10 +5004,6 @@ packages:
   unist-util-visit-parents@3.1.1:
     resolution: {integrity: sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==}
 
-  universalify@0.2.0:
-    resolution: {integrity: sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==}
-    engines: {node: '>= 4.0.0'}
-
   unixify@1.0.0:
     resolution: {integrity: sha512-6bc58dPYhCMHHuwxldQxO3RRNZ4eCogZ/st++0+fcC1nr0jiGUtAdBJ2qzmLQWSxbtz42pWt4QQMiZ9HvZf5cg==}
     engines: {node: '>=0.10.0'}
@@ -5344,9 +5029,6 @@ packages:
   uri-js@4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
 
-  url-parse@1.5.10:
-    resolution: {integrity: sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==}
-
   urlpattern-polyfill@10.1.0:
     resolution: {integrity: sha512-IGjKp/o0NL3Bso1PymYURCJxMPNAf/ILOpendP9f5B6e1rTJgdgiOvgfoT8VxCAdY+Wisb9uhGaJJf3yZ2V9nw==}
 
@@ -5487,10 +5169,6 @@ packages:
     resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
     engines: {node: '>=0.10.0'}
 
-  w3c-xmlserializer@4.0.0:
-    resolution: {integrity: sha512-d+BFHzbiCx6zGfz0HyQ6Rg69w9k19nviJspaj4yNscGjrHu94sVP+aRm75yEbCh+r2/yR+7q6hux9LVtbuTGBw==}
-    engines: {node: '>=14'}
-
   w3c-xmlserializer@5.0.0:
     resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
     engines: {node: '>=18'}
@@ -5519,20 +5197,11 @@ packages:
     resolution: {integrity: sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==}
     engines: {node: '>=20'}
 
-  whatwg-encoding@2.0.0:
-    resolution: {integrity: sha512-p41ogyeMUrw3jWclHWTQg1k05DSVXPLcVxRTYsXUk+ZooOCZLcoYgPZ/HL/D/N+uQPOtcp1me1WhBEaX02mhWg==}
-    engines: {node: '>=12'}
-    deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation
-
   whatwg-encoding@3.1.1:
     resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==}
     engines: {node: '>=18'}
     deprecated: Use @exodus/bytes instead for a more spec-conformant and faster implementation
 
-  whatwg-mimetype@3.0.0:
-    resolution: {integrity: sha512-nt+N2dzIutVRxARx1nghPKGv1xHikU7HKdfafKkLNLindmPU/ch3U31NOCGGA/dmPcmb1VlofO0vnKAcsm0o/Q==}
-    engines: {node: '>=12'}
-
   whatwg-mimetype@4.0.0:
     resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==}
     engines: {node: '>=18'}
@@ -5541,10 +5210,6 @@ packages:
     resolution: {integrity: sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==}
     engines: {node: '>=20'}
 
-  whatwg-url@11.0.0:
-    resolution: {integrity: sha512-RKT8HExMpoYx4igMiVMY83lN6UeITKJlBQ+vR/8ZJ8OCdSiN3RwCq+9gH0+Xzj0+5IrM6i4j/6LuvzbZIQgEcQ==}
-    engines: {node: '>=12'}
-
   whatwg-url@14.2.0:
     resolution: {integrity: sha512-De72GdQZzNTUBBChsXueQUnPKDkg/5A5zp7pFDuQAj5UFoENpiACU0wlCvzpAGnTkj++ihpKwKyYewn/XNUbKw==}
     engines: {node: '>=18'}
@@ -5610,10 +5275,6 @@ packages:
       utf-8-validate:
         optional: true
 
-  xml-name-validator@4.0.0:
-    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
-    engines: {node: '>=12'}
-
   xml-name-validator@5.0.0:
     resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
     engines: {node: '>=18'}
@@ -5666,7 +5327,7 @@ snapshots:
 
   '@adobe/css-tools@4.5.0': {}
 
-  '@apollo/client@3.14.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(graphql@16.14.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@apollo/client@3.14.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(graphql@16.14.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
       '@graphql-typed-document-node/core': 3.2.0(graphql@16.14.0)
       '@wry/caches': 1.0.1
@@ -5677,15 +5338,15 @@ snapshots:
       hoist-non-react-statics: 3.3.2
       optimism: 0.18.1
       prop-types: 15.8.1
-      rehackt: 0.1.0(@types/react@18.3.29)(react@18.3.1)
+      rehackt: 0.1.0(@types/react@18.3.29)(react@19.2.7)
       symbol-observable: 4.0.0
       ts-invariant: 0.10.3
       tslib: 2.8.1
       zen-observable-ts: 1.2.5
     optionalDependencies:
       graphql-ws: 6.0.8(graphql@16.14.0)(ws@8.21.0)
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
     transitivePeerDependencies:
       - '@types/react'
 
@@ -5839,6 +5500,30 @@ snapshots:
     dependencies:
       css-tree: 3.2.1
 
+  '@city-of-helsinki/react-helsinki-headless-cms@3.0.3(@apollo/client@3.14.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(graphql@16.14.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(@types/node@20.19.41)(@types/react@18.3.29)(hds-react@6.0.2(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(postcss@8.5.15)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(typescript@5.9.3)':
+    dependencies:
+      classnames: 2.5.1
+      date-fns: 4.3.0
+      doctoc: 2.4.1
+      hds-design-tokens: 4.10.0
+      hds-react: 6.0.2(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(postcss@8.5.15)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      html-entities: 2.6.0
+      html-react-parser: 5.2.17(@types/react@18.3.29)(react@19.2.7)
+      isomorphic-dompurify: 2.36.0
+      lodash-es: 4.18.1
+      msw: 2.14.6(@types/node@20.19.41)(typescript@5.9.3)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+    optionalDependencies:
+      '@apollo/client': 3.14.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(graphql@16.14.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+    transitivePeerDependencies:
+      - '@noble/hashes'
+      - '@types/node'
+      - '@types/react'
+      - canvas
+      - supports-color
+      - typescript
+
   '@commitlint/cli@20.5.3(@types/node@20.19.41)(conventional-commits-parser@6.4.0)(typescript@5.9.3)':
     dependencies:
       '@commitlint/format': 20.5.0
@@ -6019,8 +5704,6 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
-  '@emotion/styled-base@11.0.0': {}
-
   '@envelop/core@5.5.1':
     dependencies:
       '@envelop/instrumentation': 1.0.0
@@ -6603,7 +6286,7 @@ snapshots:
   '@graphql-tools/optimize@2.0.0(graphql@16.14.0)':
     dependencies:
       graphql: 16.14.0
-      tslib: 2.6.3
+      tslib: 2.8.1
 
   '@graphql-tools/prisma-loader@8.0.17(@types/node@20.19.41)(graphql@16.14.0)':
     dependencies:
@@ -6638,7 +6321,7 @@ snapshots:
       '@ardatan/relay-compiler': 13.0.1(graphql@16.14.0)
       '@graphql-tools/utils': 11.1.0(graphql@16.14.0)
       graphql: 16.14.0
-      tslib: 2.6.3
+      tslib: 2.8.1
 
   '@graphql-tools/schema@10.0.33(graphql@16.14.0)':
     dependencies:
@@ -6729,9 +6412,9 @@ snapshots:
     dependencies:
       graphql: 16.14.0
 
-  '@hookform/resolvers@2.9.11(react-hook-form@7.76.1(react@18.3.1))':
+  '@hookform/resolvers@2.9.11(react-hook-form@7.76.1(react@19.2.7))':
     dependencies:
-      react-hook-form: 7.76.1(react@18.3.1)
+      react-hook-form: 7.76.1(react@19.2.7)
 
   '@humanfs/core@0.19.2':
     dependencies:
@@ -6795,35 +6478,6 @@ snapshots:
     dependencies:
       '@swc/helpers': 0.5.23
 
-  '@jest/environment@29.7.0':
-    dependencies:
-      '@jest/fake-timers': 29.7.0
-      '@jest/types': 29.6.3
-      '@types/node': 20.19.41
-      jest-mock: 29.7.0
-
-  '@jest/fake-timers@29.7.0':
-    dependencies:
-      '@jest/types': 29.6.3
-      '@sinonjs/fake-timers': 10.3.0
-      '@types/node': 20.19.41
-      jest-message-util: 29.7.0
-      jest-mock: 29.7.0
-      jest-util: 29.7.0
-
-  '@jest/schemas@29.6.3':
-    dependencies:
-      '@sinclair/typebox': 0.27.10
-
-  '@jest/types@29.6.3':
-    dependencies:
-      '@jest/schemas': 29.6.3
-      '@types/istanbul-lib-coverage': 2.0.6
-      '@types/istanbul-reports': 3.0.4
-      '@types/node': 20.19.41
-      '@types/yargs': 17.0.35
-      chalk: 4.1.2
-
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -6965,67 +6619,67 @@ snapshots:
 
   '@popperjs/core@2.11.5': {}
 
-  '@react-aria/interactions@3.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@react-aria/interactions@3.28.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
-      '@react-types/shared': 3.34.0(react@18.3.1)
+      '@react-types/shared': 3.34.0(react@19.2.7)
       '@swc/helpers': 0.5.23
-      react: 18.3.1
-      react-aria: 3.48.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.7
+      react-aria: 3.48.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      react-dom: 19.2.7(react@19.2.7)
 
-  '@react-aria/utils@3.34.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@react-aria/utils@3.34.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
       '@swc/helpers': 0.5.23
-      react: 18.3.1
-      react-aria: 3.48.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      react-dom: 18.3.1(react@18.3.1)
-      react-stately: 3.46.0(react@18.3.1)
+      react: 19.2.7
+      react-aria: 3.48.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      react-dom: 19.2.7(react@19.2.7)
+      react-stately: 3.46.0(react@19.2.7)
 
-  '@react-aria/visually-hidden@3.8.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@react-aria/visually-hidden@3.8.16(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
-      '@react-aria/interactions': 3.28.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@react-aria/utils': 3.34.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@react-types/shared': 3.34.0(react@18.3.1)
+      '@react-aria/interactions': 3.28.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@react-aria/utils': 3.34.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@react-types/shared': 3.34.0(react@19.2.7)
       '@swc/helpers': 0.5.23
-      react: 18.3.1
+      react: 19.2.7
     transitivePeerDependencies:
       - react-dom
 
-  '@react-spring/animated@9.3.2(react@18.3.1)':
+  '@react-spring/animated@9.3.2(react@19.2.7)':
     dependencies:
-      '@react-spring/shared': 9.3.2(react@18.3.1)
+      '@react-spring/shared': 9.3.2(react@19.2.7)
       '@react-spring/types': 9.3.2
-      react: 18.3.1
+      react: 19.2.7
 
-  '@react-spring/core@9.3.2(react@18.3.1)':
+  '@react-spring/core@9.3.2(react@19.2.7)':
     dependencies:
-      '@react-spring/animated': 9.3.2(react@18.3.1)
-      '@react-spring/shared': 9.3.2(react@18.3.1)
+      '@react-spring/animated': 9.3.2(react@19.2.7)
+      '@react-spring/shared': 9.3.2(react@19.2.7)
       '@react-spring/types': 9.3.2
-      react: 18.3.1
+      react: 19.2.7
 
   '@react-spring/rafz@9.3.2': {}
 
-  '@react-spring/shared@9.3.2(react@18.3.1)':
+  '@react-spring/shared@9.3.2(react@19.2.7)':
     dependencies:
       '@react-spring/rafz': 9.3.2
       '@react-spring/types': 9.3.2
-      react: 18.3.1
+      react: 19.2.7
 
   '@react-spring/types@9.3.2': {}
 
-  '@react-spring/web@9.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@react-spring/web@9.3.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
-      '@react-spring/animated': 9.3.2(react@18.3.1)
-      '@react-spring/core': 9.3.2(react@18.3.1)
-      '@react-spring/shared': 9.3.2(react@18.3.1)
+      '@react-spring/animated': 9.3.2(react@19.2.7)
+      '@react-spring/core': 9.3.2(react@19.2.7)
+      '@react-spring/shared': 9.3.2(react@19.2.7)
       '@react-spring/types': 9.3.2
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
 
-  '@react-types/shared@3.34.0(react@18.3.1)':
+  '@react-types/shared@3.34.0(react@19.2.7)':
     dependencies:
-      react: 18.3.1
+      react: 19.2.7
 
   '@repeaterjs/repeater@3.0.6': {}
 
@@ -7116,16 +6770,6 @@ snapshots:
 
   '@simple-libs/stream-utils@1.2.0': {}
 
-  '@sinclair/typebox@0.27.10': {}
-
-  '@sinonjs/commons@3.0.1':
-    dependencies:
-      type-detect: 4.0.8
-
-  '@sinonjs/fake-timers@10.3.0':
-    dependencies:
-      '@sinonjs/commons': 3.0.1
-
   '@standard-schema/spec@1.1.0': {}
 
   '@stylistic/eslint-plugin@5.10.0(eslint@9.39.4(jiti@2.7.0))':
@@ -7203,6 +6847,14 @@ snapshots:
     dependencies:
       '@swc/counter': 0.1.3
 
+  '@tanstack/react-table@8.21.3(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@tanstack/table-core': 8.21.3
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+
+  '@tanstack/table-core@8.21.3': {}
+
   '@testing-library/dom@10.4.1':
     dependencies:
       '@babel/code-frame': 7.29.7
@@ -7223,15 +6875,15 @@ snapshots:
       picocolors: 1.1.1
       redent: 3.0.0
 
-  '@testing-library/react@16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@18.3.7(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@testing-library/react@16.3.2(@testing-library/dom@10.4.1)(@types/react-dom@19.2.3(@types/react@18.3.29))(@types/react@18.3.29)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
       '@babel/runtime': 7.29.7
       '@testing-library/dom': 10.4.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
     optionalDependencies:
       '@types/react': 18.3.29
-      '@types/react-dom': 18.3.7(@types/react@18.3.29)
+      '@types/react-dom': 19.2.3(@types/react@18.3.29)
 
   '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.1)':
     dependencies:
@@ -7254,16 +6906,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@tootallnate/once@3.0.1': {}
-
   '@tybys/wasm-util@0.10.2':
     dependencies:
       tslib: 2.8.1
     optional: true
 
-  '@types/apollo-upload-client@18.0.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+  '@types/apollo-upload-client@18.0.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
     dependencies:
-      '@apollo/client': 3.14.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(graphql@16.14.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@apollo/client': 3.14.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(graphql@16.14.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@types/extract-files': 13.0.2
       graphql: 16.14.0
     transitivePeerDependencies:
@@ -7280,18 +6930,10 @@ snapshots:
       '@types/deep-eql': 4.0.2
       assertion-error: 2.0.1
 
-  '@types/classnames@2.3.4':
-    dependencies:
-      classnames: 2.5.1
-
   '@types/cookie@0.6.0': {}
 
   '@types/deep-eql@4.0.2': {}
 
-  '@types/dompurify@3.2.0':
-    dependencies:
-      dompurify: 3.4.7
-
   '@types/draft-js@0.11.20':
     dependencies:
       '@types/react': 18.3.29
@@ -7321,24 +6963,8 @@ snapshots:
     dependencies:
       '@types/draft-js': 0.11.20
 
-  '@types/istanbul-lib-coverage@2.0.6': {}
-
-  '@types/istanbul-lib-report@3.0.3':
-    dependencies:
-      '@types/istanbul-lib-coverage': 2.0.6
-
-  '@types/istanbul-reports@3.0.4':
-    dependencies:
-      '@types/istanbul-lib-report': 3.0.3
-
   '@types/js-yaml@4.0.9': {}
 
-  '@types/jsdom@20.0.1':
-    dependencies:
-      '@types/node': 20.19.41
-      '@types/tough-cookie': 4.0.5
-      parse5: 7.3.0
-
   '@types/json-schema@7.0.15': {}
 
   '@types/json5@0.0.29': {}
@@ -7362,7 +6988,7 @@ snapshots:
 
   '@types/prop-types@15.7.15': {}
 
-  '@types/react-dom@18.3.7(@types/react@18.3.29)':
+  '@types/react-dom@19.2.3(@types/react@18.3.29)':
     dependencies:
       '@types/react': 18.3.29
 
@@ -7375,14 +7001,6 @@ snapshots:
     dependencies:
       '@types/react': 18.3.29
 
-  '@types/react-modal@3.16.3':
-    dependencies:
-      '@types/react': 18.3.29
-
-  '@types/react-table@7.7.20':
-    dependencies:
-      '@types/react': 18.3.29
-
   '@types/react@18.3.29':
     dependencies:
       '@types/prop-types': 15.7.15
@@ -7392,12 +7010,8 @@ snapshots:
     dependencies:
       '@types/node': 20.19.41
 
-  '@types/stack-utils@2.0.3': {}
-
   '@types/statuses@2.0.6': {}
 
-  '@types/tough-cookie@4.0.5': {}
-
   '@types/trusted-types@2.0.7':
     optional: true
 
@@ -7407,12 +7021,6 @@ snapshots:
     dependencies:
       '@types/node': 20.19.41
 
-  '@types/yargs-parser@21.0.3': {}
-
-  '@types/yargs@17.0.35':
-    dependencies:
-      '@types/yargs-parser': 21.0.3
-
   '@typescript-eslint/eslint-plugin@8.60.0(@typescript-eslint/parser@8.60.0(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3))(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
@@ -7429,19 +7037,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@6.21.0(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/scope-manager': 6.21.0
-      '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.4.3
-      eslint: 9.39.4(jiti@2.7.0)
-    optionalDependencies:
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/parser@8.60.0(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.60.0
@@ -7463,11 +7058,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@6.21.0':
-    dependencies:
-      '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/visitor-keys': 6.21.0
-
   '@typescript-eslint/scope-manager@8.60.0':
     dependencies:
       '@typescript-eslint/types': 8.60.0
@@ -7489,25 +7079,8 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/types@6.21.0': {}
-
   '@typescript-eslint/types@8.60.0': {}
 
-  '@typescript-eslint/typescript-estree@6.21.0(typescript@5.9.3)':
-    dependencies:
-      '@typescript-eslint/types': 6.21.0
-      '@typescript-eslint/visitor-keys': 6.21.0
-      debug: 4.4.3
-      globby: 11.1.0
-      is-glob: 4.0.3
-      minimatch: 10.2.5
-      semver: 7.8.1
-      ts-api-utils: 1.4.3(typescript@5.9.3)
-    optionalDependencies:
-      typescript: 5.9.3
-    transitivePeerDependencies:
-      - supports-color
-
   '@typescript-eslint/typescript-estree@8.60.0(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/project-service': 8.60.0(typescript@5.9.3)
@@ -7534,11 +7107,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/visitor-keys@6.21.0':
-    dependencies:
-      '@typescript-eslint/types': 6.21.0
-      eslint-visitor-keys: 3.4.3
-
   '@typescript-eslint/visitor-keys@8.60.0':
     dependencies:
       '@typescript-eslint/types': 8.60.0
@@ -7715,21 +7283,10 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  abab@2.0.6: {}
-
-  acorn-globals@7.0.1:
-    dependencies:
-      acorn: 8.16.0
-      acorn-walk: 8.3.5
-
   acorn-jsx@5.3.2(acorn@8.16.0):
     dependencies:
       acorn: 8.16.0
 
-  acorn-walk@8.3.5:
-    dependencies:
-      acorn: 8.16.0
-
   acorn@8.16.0: {}
 
   agent-base@6.0.2:
@@ -7784,15 +7341,15 @@ snapshots:
 
   ansi-styles@6.2.3: {}
 
-  apollo-upload-client@18.0.1(@apollo/client@3.14.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(graphql@16.14.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(graphql@16.14.0):
+  apollo-upload-client@18.0.1(@apollo/client@3.14.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(graphql@16.14.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(graphql@16.14.0):
     dependencies:
-      '@apollo/client': 3.14.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(graphql@16.14.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@apollo/client': 3.14.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(graphql@16.14.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       extract-files: 13.0.0
       graphql: 16.14.0
 
-  apollo3-cache-persist@0.15.0(@apollo/client@3.14.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(graphql@16.14.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)):
+  apollo3-cache-persist@0.15.0(@apollo/client@3.14.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(graphql@16.14.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)):
     dependencies:
-      '@apollo/client': 3.14.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(graphql@16.14.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@apollo/client': 3.14.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(graphql@16.14.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
 
   argparse@2.0.1: {}
 
@@ -8043,8 +7600,6 @@ snapshots:
     dependencies:
       readdirp: 5.0.0
 
-  ci-info@3.9.0: {}
-
   classnames@2.5.1: {}
 
   clean-stack@2.2.0: {}
@@ -8190,14 +7745,6 @@ snapshots:
 
   css.escape@1.5.1: {}
 
-  cssom@0.3.8: {}
-
-  cssom@0.5.0: {}
-
-  cssstyle@2.3.0:
-    dependencies:
-      cssom: 0.3.8
-
   cssstyle@4.6.0:
     dependencies:
       '@asamuzakjp/css-color': 3.2.0
@@ -8216,12 +7763,6 @@ snapshots:
 
   data-uri-to-buffer@4.0.1: {}
 
-  data-urls@3.0.2:
-    dependencies:
-      abab: 2.0.6
-      whatwg-mimetype: 3.0.0
-      whatwg-url: 11.0.0
-
   data-urls@5.0.0:
     dependencies:
       whatwg-mimetype: 4.0.0
@@ -8338,10 +7879,6 @@ snapshots:
 
   domelementtype@2.3.0: {}
 
-  domexception@4.0.0:
-    dependencies:
-      webidl-conversions: 7.0.0
-
   domhandler@4.3.1:
     dependencies:
       domelementtype: 2.3.0
@@ -8377,21 +7914,21 @@ snapshots:
 
   dotenv@16.6.1: {}
 
-  draft-js@0.11.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  draft-js@0.11.7(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
     dependencies:
       fbjs: 2.0.0
       immutable: 3.8.3
       object-assign: 4.1.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
     transitivePeerDependencies:
       - encoding
 
   draftjs-to-html@0.9.1: {}
 
-  draftjs-utils@0.10.2(draft-js@0.11.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(immutable@3.8.3):
+  draftjs-utils@0.10.2(draft-js@0.11.7(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(immutable@3.8.3):
     dependencies:
-      draft-js: 0.11.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      draft-js: 0.11.7(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       immutable: 3.8.3
 
   dset@3.1.4: {}
@@ -8572,22 +8109,8 @@ snapshots:
 
   escape-string-regexp@1.0.5: {}
 
-  escape-string-regexp@2.0.0: {}
-
   escape-string-regexp@4.0.0: {}
 
-  escodegen@2.1.0:
-    dependencies:
-      esprima: 4.0.1
-      estraverse: 5.3.0
-      esutils: 2.0.3
-    optionalDependencies:
-      source-map: 0.6.1
-
-  eslint-config-prettier@10.1.8(eslint@9.39.4(jiti@2.7.0)):
-    dependencies:
-      eslint: 9.39.4(jiti@2.7.0)
-
   eslint-import-context@0.1.9(unrs-resolver@1.12.2):
     dependencies:
       get-tsconfig: 4.14.0
@@ -8679,7 +8202,7 @@ snapshots:
 
   eslint-plugin-no-only-tests@3.4.0: {}
 
-  eslint-plugin-prettier@5.5.6(@types/eslint@9.6.1)(eslint-config-prettier@10.1.8(eslint@9.39.4(jiti@2.7.0)))(eslint@9.39.4(jiti@2.7.0))(prettier@3.8.3):
+  eslint-plugin-prettier@5.5.6(@types/eslint@9.6.1)(eslint@9.39.4(jiti@2.7.0))(prettier@3.8.3):
     dependencies:
       eslint: 9.39.4(jiti@2.7.0)
       prettier: 3.8.3
@@ -8687,7 +8210,6 @@ snapshots:
       synckit: 0.11.13
     optionalDependencies:
       '@types/eslint': 9.6.1
-      eslint-config-prettier: 10.1.8(eslint@9.39.4(jiti@2.7.0))
 
   eslint-plugin-react-hooks@5.2.0(eslint@9.39.4(jiti@2.7.0)):
     dependencies:
@@ -8773,8 +8295,6 @@ snapshots:
       acorn-jsx: 5.3.2(acorn@8.16.0)
       eslint-visitor-keys: 4.2.1
 
-  esprima@4.0.1: {}
-
   esquery@1.7.0:
     dependencies:
       estraverse: 5.3.0
@@ -8793,8 +8313,6 @@ snapshots:
 
   eventemitter3@5.0.4: {}
 
-  exenv@1.2.2: {}
-
   exit-on-epipe@1.0.1: {}
 
   expect-type@1.3.0: {}
@@ -8911,14 +8429,14 @@ snapshots:
     dependencies:
       fetch-blob: 3.2.0
 
-  formik@2.4.9(@types/react@18.3.29)(react@18.3.1):
+  formik@2.4.9(@types/react@18.3.29)(react@19.2.7):
     dependencies:
       '@types/hoist-non-react-statics': 3.3.7(@types/react@18.3.29)
       deepmerge: 2.2.1
       hoist-non-react-statics: 3.3.2
       lodash: 4.18.1
       lodash-es: 4.18.1
-      react: 18.3.1
+      react: 19.2.7
       react-fast-compare: 2.0.4
       tiny-warning: 1.0.3
       tslib: 2.8.1
@@ -9024,8 +8542,6 @@ snapshots:
 
   gopd@1.2.0: {}
 
-  graceful-fs@4.2.11: {}
-
   graphql-config@5.1.6(@types/node@20.19.41)(graphql@16.14.0)(typescript@5.9.3):
     dependencies:
       '@graphql-tools/graphql-file-loader': 8.1.14(graphql@16.14.0)
@@ -9091,51 +8607,47 @@ snapshots:
     dependencies:
       function-bind: 1.1.2
 
-  hds-core@5.2.0: {}
+  hds-core@6.0.2: {}
 
-  hds-design-tokens@3.13.0: {}
+  hds-design-tokens@4.10.0: {}
 
-  hds-design-tokens@5.2.0: {}
+  hds-design-tokens@6.0.2: {}
 
-  hds-react@5.2.0(@types/react@18.3.29)(eslint@9.39.4(jiti@2.7.0))(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(postcss@8.5.15)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3):
+  hds-react@6.0.2(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(postcss@8.5.15)(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
     dependencies:
-      '@apollo/client': 3.14.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(graphql@16.14.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@apollo/client': 3.14.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(graphql@16.14.0)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@babel/runtime': 7.29.7
-      '@emotion/styled-base': 11.0.0
-      '@hookform/resolvers': 2.9.11(react-hook-form@7.76.1(react@18.3.1))
+      '@hookform/resolvers': 2.9.11(react-hook-form@7.76.1(react@19.2.7))
       '@juggle/resize-observer': 3.2.0
       '@popperjs/core': 2.11.5
-      '@react-aria/visually-hidden': 3.8.16(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      '@react-spring/web': 9.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@react-aria/visually-hidden': 3.8.16(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      '@react-spring/web': 9.3.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       '@types/cookie': 0.6.0
-      '@typescript-eslint/parser': 6.21.0(eslint@9.39.4(jiti@2.7.0))(typescript@5.9.3)
       await-to-js: 3.0.0
       cookie: 0.7.2
       crc-32: 1.2.0
       date-fns: 2.16.1
       graphql: 16.14.0
-      hds-core: 5.2.0
+      hds-core: 6.0.2
+      hds-design-tokens: 6.0.2
       jwt-decode: 3.1.2
       kashe: 1.0.4
       lodash: 4.18.1
       memoize-one: 5.2.1
       oidc-client-ts: 2.5.0
       postcss: 8.5.15
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-hook-form: 7.76.1(react@18.3.1)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      react-hook-form: 7.76.1(react@19.2.7)
       react-merge-refs: 1.1.0
-      react-popper: 2.2.5(@popperjs/core@2.11.5)(react@18.3.1)
-      react-use-measure: 2.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-popper: 2.2.5(@popperjs/core@2.11.5)(react@19.2.7)
+      react-use-measure: 2.0.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       uuid: 14.0.0
       yup: 1.7.1
     transitivePeerDependencies:
       - '@types/react'
-      - eslint
       - graphql-ws
       - subscriptions-transport-ws
-      - supports-color
-      - typescript
 
   header-case@2.0.4:
     dependencies:
@@ -9151,20 +8663,11 @@ snapshots:
     dependencies:
       react-is: 16.13.1
 
-  html-dom-parser@5.0.3:
-    dependencies:
-      domhandler: 5.0.3
-      htmlparser2: 9.0.0
-
   html-dom-parser@5.1.8:
     dependencies:
       domhandler: 5.0.3
       htmlparser2: 10.1.0
 
-  html-encoding-sniffer@3.0.0:
-    dependencies:
-      whatwg-encoding: 2.0.0
-
   html-encoding-sniffer@4.0.0:
     dependencies:
       whatwg-encoding: 3.1.1
@@ -9183,27 +8686,19 @@ snapshots:
     dependencies:
       void-elements: 3.1.0
 
-  html-react-parser@4.2.10(react@18.3.1):
-    dependencies:
-      domhandler: 5.0.3
-      html-dom-parser: 5.0.3
-      react: 18.3.1
-      react-property: 2.0.2
-      style-to-js: 1.1.8
-
-  html-react-parser@5.2.17(@types/react@18.3.29)(react@18.3.1):
+  html-react-parser@5.2.17(@types/react@18.3.29)(react@19.2.7):
     dependencies:
       domhandler: 5.0.3
       html-dom-parser: 5.1.8
-      react: 18.3.1
+      react: 19.2.7
       react-property: 2.0.2
       style-to-js: 1.1.21
     optionalDependencies:
       '@types/react': 18.3.29
 
-  html-to-draftjs@1.5.0(draft-js@0.11.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(immutable@3.8.3):
+  html-to-draftjs@1.5.0(draft-js@0.11.7(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(immutable@3.8.3):
     dependencies:
-      draft-js: 0.11.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      draft-js: 0.11.7(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       immutable: 3.8.3
 
   htmlparser2@10.1.0:
@@ -9220,21 +8715,6 @@ snapshots:
       domutils: 2.8.0
       entities: 3.0.1
 
-  htmlparser2@9.0.0:
-    dependencies:
-      domelementtype: 2.3.0
-      domhandler: 5.0.3
-      domutils: 3.2.2
-      entities: 4.5.0
-
-  http-proxy-agent@5.0.0:
-    dependencies:
-      '@tootallnate/once': 3.0.1
-      agent-base: 6.0.2
-      debug: 4.4.3
-    transitivePeerDependencies:
-      - supports-color
-
   http-proxy-agent@7.0.2:
     dependencies:
       agent-base: 7.1.4
@@ -9313,8 +8793,6 @@ snapshots:
 
   ini@6.0.0: {}
 
-  inline-style-parser@0.2.2: {}
-
   inline-style-parser@0.2.7: {}
 
   inquirer@8.2.7(@types/node@20.19.41):
@@ -9560,48 +9038,6 @@ snapshots:
       has-symbols: 1.1.0
       set-function-name: 2.0.2
 
-  jest-environment-jsdom@29.7.0:
-    dependencies:
-      '@jest/environment': 29.7.0
-      '@jest/fake-timers': 29.7.0
-      '@jest/types': 29.6.3
-      '@types/jsdom': 20.0.1
-      '@types/node': 20.19.41
-      jest-mock: 29.7.0
-      jest-util: 29.7.0
-      jsdom: 20.0.3
-    transitivePeerDependencies:
-      - bufferutil
-      - supports-color
-      - utf-8-validate
-
-  jest-message-util@29.7.0:
-    dependencies:
-      '@babel/code-frame': 7.29.7
-      '@jest/types': 29.6.3
-      '@types/stack-utils': 2.0.3
-      chalk: 4.1.2
-      graceful-fs: 4.2.11
-      micromatch: 4.0.8
-      pretty-format: 29.7.0
-      slash: 3.0.0
-      stack-utils: 2.0.6
-
-  jest-mock@29.7.0:
-    dependencies:
-      '@jest/types': 29.6.3
-      '@types/node': 20.19.41
-      jest-util: 29.7.0
-
-  jest-util@29.7.0:
-    dependencies:
-      '@jest/types': 29.6.3
-      '@types/node': 20.19.41
-      chalk: 4.1.2
-      ci-info: 3.9.0
-      graceful-fs: 4.2.11
-      picomatch: 2.3.2
-
   jiti@1.21.7: {}
 
   jiti@2.6.1: {}
@@ -9618,39 +9054,6 @@ snapshots:
     dependencies:
       argparse: 2.0.1
 
-  jsdom@20.0.3:
-    dependencies:
-      abab: 2.0.6
-      acorn: 8.16.0
-      acorn-globals: 7.0.1
-      cssom: 0.5.0
-      cssstyle: 2.3.0
-      data-urls: 3.0.2
-      decimal.js: 10.6.0
-      domexception: 4.0.0
-      escodegen: 2.1.0
-      form-data: 4.0.5
-      html-encoding-sniffer: 3.0.0
-      http-proxy-agent: 5.0.0
-      https-proxy-agent: 5.0.1
-      is-potential-custom-element-name: 1.0.1
-      nwsapi: 2.2.23
-      parse5: 7.3.0
-      saxes: 6.0.0
-      symbol-tree: 3.2.4
-      tough-cookie: 4.1.4
-      w3c-xmlserializer: 4.0.0
-      webidl-conversions: 7.0.0
-      whatwg-encoding: 2.0.0
-      whatwg-mimetype: 3.0.0
-      whatwg-url: 11.0.0
-      ws: 8.21.0
-      xml-name-validator: 4.0.0
-    transitivePeerDependencies:
-      - bufferutil
-      - supports-color
-      - utf-8-validate
-
   jsdom@26.1.0:
     dependencies:
       cssstyle: 4.6.0
@@ -10404,12 +9807,6 @@ snapshots:
       ansi-styles: 5.2.0
       react-is: 17.0.2
 
-  pretty-format@29.7.0:
-    dependencies:
-      '@jest/schemas': 29.6.3
-      ansi-styles: 5.2.0
-      react-is: 18.3.1
-
   printj@1.1.2: {}
 
   process@0.11.10: {}
@@ -10428,174 +9825,116 @@ snapshots:
 
   proxy-from-env@2.1.0: {}
 
-  psl@1.15.0:
-    dependencies:
-      punycode: 2.3.1
-
   punycode@2.3.1: {}
 
-  querystringify@2.2.0: {}
-
   queue-microtask@1.2.3: {}
 
-  react-aria@3.48.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-aria@3.48.0(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
     dependencies:
       '@internationalized/date': 3.12.1
       '@internationalized/number': 3.6.6
       '@internationalized/string': 3.2.8
-      '@react-types/shared': 3.34.0(react@18.3.1)
+      '@react-types/shared': 3.34.0(react@19.2.7)
       '@swc/helpers': 0.5.23
       aria-hidden: 1.2.6
       clsx: 2.1.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-stately: 3.46.0(react@18.3.1)
-      use-sync-external-store: 1.6.0(react@18.3.1)
-
-  react-content-loader@7.1.2(react@18.3.1):
-    dependencies:
-      react: 18.3.1
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      react-stately: 3.46.0(react@19.2.7)
+      use-sync-external-store: 1.6.0(react@19.2.7)
 
-  react-dom@18.3.1(react@18.3.1):
+  react-dom@19.2.7(react@19.2.7):
     dependencies:
-      loose-envify: 1.4.0
-      react: 18.3.1
-      scheduler: 0.23.2
+      react: 19.2.7
+      scheduler: 0.27.0
 
-  react-draft-wysiwyg@1.15.0(draft-js@0.11.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(immutable@3.8.3)(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-draft-wysiwyg@1.15.0(draft-js@0.11.7(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(immutable@3.8.3)(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
     dependencies:
       classnames: 2.5.1
-      draft-js: 0.11.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-      draftjs-utils: 0.10.2(draft-js@0.11.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(immutable@3.8.3)
-      html-to-draftjs: 1.5.0(draft-js@0.11.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(immutable@3.8.3)
+      draft-js: 0.11.7(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
+      draftjs-utils: 0.10.2(draft-js@0.11.7(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(immutable@3.8.3)
+      html-to-draftjs: 1.5.0(draft-js@0.11.7(react-dom@19.2.7(react@19.2.7))(react@19.2.7))(immutable@3.8.3)
       immutable: 3.8.3
       linkify-it: 2.2.0
       prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
 
   react-fast-compare@2.0.4: {}
 
   react-fast-compare@3.2.2: {}
 
-  react-helmet@6.1.0(react@18.3.1):
+  react-helmet@6.1.0(react@19.2.7):
     dependencies:
       object-assign: 4.1.1
       prop-types: 15.8.1
-      react: 18.3.1
+      react: 19.2.7
       react-fast-compare: 3.2.2
-      react-side-effect: 2.1.2(react@18.3.1)
-
-  react-helsinki-headless-cms@1.3.0(@apollo/client@3.14.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(graphql@16.14.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(date-fns@4.3.0)(hds-react@5.2.0(@types/react@18.3.29)(eslint@9.39.4(jiti@2.7.0))(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(postcss@8.5.15)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      classnames: 2.5.1
-      date-fns: 4.3.0
-      hds-design-tokens: 3.13.0
-      hds-react: 5.2.0(@types/react@18.3.29)(eslint@9.39.4(jiti@2.7.0))(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(postcss@8.5.15)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3)
-      html-entities: 2.6.0
-      html-react-parser: 4.2.10(react@18.3.1)
-      isomorphic-dompurify: 2.36.0
-      jest-environment-jsdom: 29.7.0
-      lodash-es: 4.18.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-    optionalDependencies:
-      '@apollo/client': 3.14.1(@types/react@18.3.29)(graphql-ws@6.0.8(graphql@16.14.0)(ws@8.21.0))(graphql@16.14.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
-    transitivePeerDependencies:
-      - '@noble/hashes'
-      - bufferutil
-      - canvas
-      - supports-color
-      - utf-8-validate
+      react-side-effect: 2.1.2(react@19.2.7)
 
-  react-hook-form@7.76.1(react@18.3.1):
+  react-hook-form@7.76.1(react@19.2.7):
     dependencies:
-      react: 18.3.1
+      react: 19.2.7
 
-  react-i18next@15.7.4(i18next@24.2.3(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3):
+  react-i18next@15.7.4(i18next@24.2.3(typescript@5.9.3))(react-dom@19.2.7(react@19.2.7))(react@19.2.7)(typescript@5.9.3):
     dependencies:
       '@babel/runtime': 7.29.7
       html-parse-stringify: 3.0.1
       i18next: 24.2.3(typescript@5.9.3)
-      react: 18.3.1
+      react: 19.2.7
     optionalDependencies:
-      react-dom: 18.3.1(react@18.3.1)
+      react-dom: 19.2.7(react@19.2.7)
       typescript: 5.9.3
 
-  react-idle-timer@5.7.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-idle-timer@5.7.3(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
     dependencies:
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
 
   react-is@16.13.1: {}
 
   react-is@17.0.2: {}
 
-  react-is@18.3.1: {}
-
-  react-lifecycles-compat@3.0.4: {}
-
   react-merge-refs@1.1.0: {}
 
-  react-modal@3.16.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      exenv: 1.2.2
-      prop-types: 15.8.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-      react-lifecycles-compat: 3.0.4
-      warning: 4.0.3
-
-  react-popper@2.2.5(@popperjs/core@2.11.5)(react@18.3.1):
+  react-popper@2.2.5(@popperjs/core@2.11.5)(react@19.2.7):
     dependencies:
       '@popperjs/core': 2.11.5
-      react: 18.3.1
+      react: 19.2.7
       react-fast-compare: 3.2.2
       warning: 4.0.3
 
   react-property@2.0.2: {}
 
-  react-router@7.15.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-router@7.15.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
     dependencies:
       cookie: 1.1.1
-      react: 18.3.1
+      react: 19.2.7
       set-cookie-parser: 2.7.2
     optionalDependencies:
-      react-dom: 18.3.1(react@18.3.1)
+      react-dom: 19.2.7(react@19.2.7)
 
-  react-side-effect@2.1.2(react@18.3.1):
+  react-side-effect@2.1.2(react@19.2.7):
     dependencies:
-      react: 18.3.1
+      react: 19.2.7
 
-  react-stately@3.46.0(react@18.3.1):
+  react-stately@3.46.0(react@19.2.7):
     dependencies:
       '@internationalized/date': 3.12.1
       '@internationalized/number': 3.6.6
       '@internationalized/string': 3.2.8
-      '@react-types/shared': 3.34.0(react@18.3.1)
+      '@react-types/shared': 3.34.0(react@19.2.7)
       '@swc/helpers': 0.5.23
-      react: 18.3.1
-      use-sync-external-store: 1.6.0(react@18.3.1)
-
-  react-table@7.8.0(react@18.3.1):
-    dependencies:
-      react: 18.3.1
+      react: 19.2.7
+      use-sync-external-store: 1.6.0(react@19.2.7)
 
-  react-toastify@11.1.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
-    dependencies:
-      clsx: 2.1.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
-
-  react-use-measure@2.0.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+  react-use-measure@2.0.1(react-dom@19.2.7(react@19.2.7))(react@19.2.7):
     dependencies:
       debounce: 1.2.1
-      react: 18.3.1
-      react-dom: 18.3.1(react@18.3.1)
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
 
-  react@18.3.1:
-    dependencies:
-      loose-envify: 1.4.0
+  react@19.2.7: {}
 
   readable-stream@3.6.2:
     dependencies:
@@ -10630,10 +9969,10 @@ snapshots:
       gopd: 1.2.0
       set-function-name: 2.0.2
 
-  rehackt@0.1.0(@types/react@18.3.29)(react@18.3.1):
+  rehackt@0.1.0(@types/react@18.3.29)(react@19.2.7):
     optionalDependencies:
       '@types/react': 18.3.29
-      react: 18.3.1
+      react: 19.2.7
 
   remark-footnotes@3.0.0:
     dependencies:
@@ -10674,8 +10013,6 @@ snapshots:
 
   require-from-string@2.0.2: {}
 
-  requires-port@1.0.0: {}
-
   reselect@4.1.8: {}
 
   resolve-from@4.0.0: {}
@@ -10779,9 +10116,7 @@ snapshots:
     dependencies:
       xmlchars: 2.2.0
 
-  scheduler@0.23.2:
-    dependencies:
-      loose-envify: 1.4.0
+  scheduler@0.27.0: {}
 
   scuid@1.1.0: {}
 
@@ -10896,19 +10231,12 @@ snapshots:
 
   source-map-js@1.2.1: {}
 
-  source-map@0.6.1:
-    optional: true
-
   sponge-case@1.0.1:
     dependencies:
       tslib: 2.8.1
 
   stable-hash-x@0.2.0: {}
 
-  stack-utils@2.0.6:
-    dependencies:
-      escape-string-regexp: 2.0.0
-
   stackback@0.0.2: {}
 
   statuses@2.0.2: {}
@@ -11021,18 +10349,10 @@ snapshots:
     dependencies:
       style-to-object: 1.0.14
 
-  style-to-js@1.1.8:
-    dependencies:
-      style-to-object: 1.0.3
-
   style-to-object@1.0.14:
     dependencies:
       inline-style-parser: 0.2.7
 
-  style-to-object@1.0.3:
-    dependencies:
-      inline-style-parser: 0.2.2
-
   supports-color@7.2.0:
     dependencies:
       has-flag: 4.0.0
@@ -11106,13 +10426,6 @@ snapshots:
 
   toposort@2.0.2: {}
 
-  tough-cookie@4.1.4:
-    dependencies:
-      psl: 1.15.0
-      punycode: 2.3.1
-      universalify: 0.2.0
-      url-parse: 1.5.10
-
   tough-cookie@5.1.2:
     dependencies:
       tldts: 6.1.86
@@ -11123,10 +10436,6 @@ snapshots:
 
   tr46@0.0.3: {}
 
-  tr46@3.0.0:
-    dependencies:
-      punycode: 2.3.1
-
   tr46@5.1.1:
     dependencies:
       punycode: 2.3.1
@@ -11137,10 +10446,6 @@ snapshots:
 
   trough@1.0.5: {}
 
-  ts-api-utils@1.4.3(typescript@5.9.3):
-    dependencies:
-      typescript: 5.9.3
-
   ts-api-utils@2.5.0(typescript@5.9.3):
     dependencies:
       typescript: 5.9.3
@@ -11176,8 +10481,6 @@ snapshots:
     dependencies:
       prelude-ls: 1.2.1
 
-  type-detect@4.0.8: {}
-
   type-fest@0.21.3: {}
 
   type-fest@2.19.0: {}
@@ -11259,8 +10562,6 @@ snapshots:
       '@types/unist': 2.0.11
       unist-util-is: 4.1.0
 
-  universalify@0.2.0: {}
-
   unixify@1.0.0:
     dependencies:
       normalize-path: 2.1.1
@@ -11312,22 +10613,17 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
-  url-parse@1.5.10:
-    dependencies:
-      querystringify: 2.2.0
-      requires-port: 1.0.0
-
   urlpattern-polyfill@10.1.0: {}
 
-  use-deep-compare-effect@1.8.1(react@18.3.1):
+  use-deep-compare-effect@1.8.1(react@19.2.7):
     dependencies:
       '@babel/runtime': 7.29.7
       dequal: 2.0.3
-      react: 18.3.1
+      react: 19.2.7
 
-  use-sync-external-store@1.6.0(react@18.3.1):
+  use-sync-external-store@1.6.0(react@19.2.7):
     dependencies:
-      react: 18.3.1
+      react: 19.2.7
 
   util-arity@1.1.0: {}
 
@@ -11423,10 +10719,6 @@ snapshots:
 
   void-elements@3.1.0: {}
 
-  w3c-xmlserializer@4.0.0:
-    dependencies:
-      xml-name-validator: 4.0.0
-
   w3c-xmlserializer@5.0.0:
     dependencies:
       xml-name-validator: 5.0.0
@@ -11449,25 +10741,14 @@ snapshots:
 
   webidl-conversions@8.0.1: {}
 
-  whatwg-encoding@2.0.0:
-    dependencies:
-      iconv-lite: 0.6.3
-
   whatwg-encoding@3.1.1:
     dependencies:
       iconv-lite: 0.6.3
 
-  whatwg-mimetype@3.0.0: {}
-
   whatwg-mimetype@4.0.0: {}
 
   whatwg-mimetype@5.0.0: {}
 
-  whatwg-url@11.0.0:
-    dependencies:
-      tr46: 3.0.0
-      webidl-conversions: 7.0.0
-
   whatwg-url@14.2.0:
     dependencies:
       tr46: 5.1.1
@@ -11558,8 +10839,6 @@ snapshots:
 
   ws@8.21.0: {}
 
-  xml-name-validator@4.0.0: {}
-
   xml-name-validator@5.0.0: {}
 
   xmlchars@2.2.0: {}
diff --git a/src/clients/apiReportClient/useReportClientQuery.ts b/src/clients/apiReportClient/useReportClientQuery.ts
index 78805a512..5f1d9cf39 100644
--- a/src/clients/apiReportClient/useReportClientQuery.ts
+++ b/src/clients/apiReportClient/useReportClientQuery.ts
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
-import { toast } from 'react-toastify';
 
 import apiReportClient, { ROUTES } from './apiReportClient';
+import { useNotificationsContext } from '../../common/components/notificationsContext/hooks/useNotificationsContext';
 
 /**
  * A browser hack to download a file instead of just a byte string.
@@ -18,6 +18,8 @@ function downloadFile(data: string, filename: string) {
 
 function useDownloadEventsEnrolmentsCsvQuery(pEventId: string | undefined) {
   const { t } = useTranslation();
+  const { addNotification } = useNotificationsContext();
+
   if (!pEventId) return undefined;
   return async () => {
     const filename = `kultus_events_approved_enrolments.csv`;
@@ -39,7 +41,10 @@ function useDownloadEventsEnrolmentsCsvQuery(pEventId: string | undefined) {
     if (response.status === 200 && response?.data?.type === 'text/csv') {
       downloadFile(response.data, filename);
     } else {
-      toast.error(t('eventEnrolmentsReport.downloadError'));
+      addNotification({
+        type: 'error',
+        label: t('eventEnrolmentsReport.downloadError'),
+      });
     }
   };
 }
diff --git a/src/common/components/autoSuggest/__test__/AutoSuggest.test.tsx b/src/common/components/autoSuggest/__test__/AutoSuggest.test.tsx
index b663204fa..e9c87e156 100644
--- a/src/common/components/autoSuggest/__test__/AutoSuggest.test.tsx
+++ b/src/common/components/autoSuggest/__test__/AutoSuggest.test.tsx
@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 import { vi } from 'vitest';
 
+import { NotificationsProvider } from '../../notificationsContext/NotificationsContext';
 import AutoSuggest, { AutoSuggestProps } from '../AutoSuggest';
 
 const options = [
@@ -34,7 +35,11 @@ function renderAutoSuggest(props?: Partial<AutoSuggestProps>) {
     ...props,
   };
 
-  const { rerender } = render(<AutoSuggest {...defaultProps} />);
+  const { rerender } = render(
+    <NotificationsProvider>
+      <AutoSuggest {...defaultProps} />
+    </NotificationsProvider>
+  );
 
   return {
     ...defaultProps,
@@ -42,7 +47,11 @@ function renderAutoSuggest(props?: Partial<AutoSuggestProps>) {
     onBlur,
     setInputValue,
     rerender: (newProps: Partial<AutoSuggestProps>) =>
-      rerender(<AutoSuggest {...defaultProps} {...newProps} />),
+      rerender(
+        <NotificationsProvider>
+          <AutoSuggest {...defaultProps} {...newProps} />
+        </NotificationsProvider>
+      ),
   };
 }
 
diff --git a/src/common/components/deleteButton/__tests__/__snapshots__/DeleteButton.test.tsx.snap b/src/common/components/deleteButton/__tests__/__snapshots__/DeleteButton.test.tsx.snap
index 723db321a..45125c0ff 100644
--- a/src/common/components/deleteButton/__tests__/__snapshots__/DeleteButton.test.tsx.snap
+++ b/src/common/components/deleteButton/__tests__/__snapshots__/DeleteButton.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`matches snapshot 1`] = `
       <svg
         aria-hidden="true"
         aria-label="cross-circle"
-        class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+        class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
         role="img"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/src/common/components/fieldLabel/__tests__/__snapshots__/FieldLabel.test.tsx.snap b/src/common/components/fieldLabel/__tests__/__snapshots__/FieldLabel.test.tsx.snap
index bfc5dbc13..23e088043 100644
--- a/src/common/components/fieldLabel/__tests__/__snapshots__/FieldLabel.test.tsx.snap
+++ b/src/common/components/fieldLabel/__tests__/__snapshots__/FieldLabel.test.tsx.snap
@@ -15,12 +15,12 @@ exports[`matched snapshot 1`] = `
     </span>
   </label>
   <div
-    class="Tooltip-module_root__1Yo9t"
+    class="Tooltip-module_root__dqH0-"
   >
     <button
       aria-expanded="false"
       aria-label="Tooltip"
-      class="Tooltip-module_button__2x9m0 tooltipButton"
+      class="Tooltip-module_button__MvCgA tooltipButton"
       title="Tooltip"
       type="button"
     >
@@ -30,7 +30,7 @@ exports[`matched snapshot 1`] = `
         <svg
           aria-hidden="true"
           aria-label="question-circle"
-          class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+          class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
           role="img"
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
diff --git a/src/common/components/imageInput/ImageInput.tsx b/src/common/components/imageInput/ImageInput.tsx
index 42ab0ead8..799657edc 100644
--- a/src/common/components/imageInput/ImageInput.tsx
+++ b/src/common/components/imageInput/ImageInput.tsx
@@ -2,9 +2,9 @@ import { FormikErrors } from 'formik';
 import { Button, ButtonVariant } from 'hds-react';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { toast } from 'react-toastify';
 
 import { useUploadSingleImageMutation } from '../../../generated/graphql';
+import { useNotificationsContext } from '../notificationsContext/hooks/useNotificationsContext';
 import InputWrapper, { InputWrapperProps } from '../textInput/InputWrapper';
 
 // 2 megabytes
@@ -27,6 +27,7 @@ const ImageInput: React.FC<ImageInputProps> = ({
   const { t } = useTranslation();
   const inputRef = React.useRef<HTMLInputElement>(null);
   const [uploadImage] = useUploadSingleImageMutation();
+  const { addNotification } = useNotificationsContext();
 
   const handleChooseImageClick = () => {
     inputRef.current?.click();
@@ -42,7 +43,10 @@ const ImageInput: React.FC<ImageInputProps> = ({
     const file = e.currentTarget.files?.[0];
     const fileSize = file?.size;
     if (fileSize && fileSize > IMAGE_MAX_SIZE) {
-      toast.error(t('form.error.imageTooBig'));
+      addNotification({
+        type: 'error',
+        label: t('form.error.imageTooBig'),
+      });
       resetImageInput();
       return;
     }
diff --git a/src/common/components/menuDropdown/MenuDropdown.tsx b/src/common/components/menuDropdown/MenuDropdown.tsx
deleted file mode 100644
index b30e89979..000000000
--- a/src/common/components/menuDropdown/MenuDropdown.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-// FIXME: Make MenuDropdown component accessible and remove this eslint-disable comment:
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-// "Visible, non-interactive elements with click handlers must have at least one
-// keyboard listener. (jsx-a11y/click-events-have-key-events)"
-
-import classNames from 'classnames';
-import { IconAngleDown } from 'hds-react';
-import * as React from 'react';
-
-import styles from './menuDropdown.module.scss';
-import useKeyboardNavigation from '../../../hooks/useDropdownKeyboardNavigation';
-import type { Language } from '../../../types';
-
-export type MenuItem = {
-  className?: string;
-  icon?: React.ReactElement;
-  language?: Language;
-  onClick?: (value: string) => void;
-  text: string;
-  value: string;
-};
-
-const MenuItemComponent: React.FC<{
-  item: MenuItem;
-  isFocused: boolean;
-  isSelected: boolean;
-  onClick: (item: MenuItem) => void;
-}> = ({ item, isFocused, isSelected, onClick }) => {
-  const selfRef = React.useRef<HTMLLIElement>(null);
-
-  const handleClick = () => {
-    onClick(item);
-  };
-
-  React.useEffect(() => {
-    if (isFocused && selfRef.current) {
-      selfRef.current.focus();
-    }
-  }, [isFocused]);
-
-  return (
-    <li
-      ref={selfRef}
-      key={item.value}
-      lang={item.language || undefined}
-      className={classNames(
-        styles.menuItem,
-        {
-          [styles.isFocused]: isFocused,
-          [styles.isSelected]: isSelected,
-        },
-        item.className
-      )}
-      onClick={handleClick}
-      role="menuitem"
-      tabIndex={0}
-    >
-      {item.icon && (
-        <div className={styles.menuItemIconWrapper}>{item.icon}</div>
-      )}
-      {item.text}
-    </li>
-  );
-};
-
-export interface MenuDropdownProps {
-  buttonAriaLabel?: string;
-  buttonText: string;
-  icon?: React.ReactElement;
-  items: MenuItem[];
-  onMenuItemClick?: (item: MenuItem) => void;
-  value?: string;
-}
-
-const MenuDropdown: React.FC<MenuDropdownProps> = ({
-  buttonAriaLabel,
-  buttonText,
-  icon,
-  items,
-  onMenuItemClick,
-  value,
-}) => {
-  const container = React.useRef<HTMLDivElement>(null);
-  const toggleButton = React.useRef<HTMLButtonElement>(null);
-
-  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
-
-  const toggleMenu = () => {
-    setIsMenuOpen(!isMenuOpen);
-  };
-
-  const ensureMenuIsClosed = () => {
-    if (isMenuOpen) {
-      setIsMenuOpen(false);
-    }
-  };
-
-  const ensureMenuIsOpen = () => {
-    if (!isMenuOpen) {
-      setIsMenuOpen(true);
-    }
-  };
-
-  const isComponentFocused = () =>
-    !!container.current?.contains(document.activeElement);
-
-  const setFocusToButton = () => {
-    toggleButton.current?.focus();
-  };
-
-  const handleMenuItemClick = (item: MenuItem) => {
-    if (item.onClick) {
-      item.onClick(item.value);
-    } else if (onMenuItemClick) {
-      onMenuItemClick(item);
-    }
-
-    ensureMenuIsClosed();
-  };
-
-  const {
-    focusedIndex,
-    setup: setupKeyboardNav,
-    teardown: teardownKeyboardNav,
-  } = useKeyboardNavigation({
-    container: container,
-    initialFocusedIndex: 0,
-    listLength: items.length,
-    onKeyDown: (event) => {
-      if (!isComponentFocused()) return;
-
-      switch (event.key) {
-        case 'ArrowUp':
-        case 'ArrowDown':
-          ensureMenuIsOpen();
-          break;
-        case 'Escape':
-          if (isMenuOpen) {
-            ensureMenuIsClosed();
-            setFocusToButton();
-          }
-          break;
-        case 'Enter':
-        case 'Space':
-          {
-            const item = items[focusedIndex];
-            if (isMenuOpen && item) {
-              handleMenuItemClick(item);
-              setFocusToButton();
-              event.preventDefault();
-            }
-          }
-          break;
-        case 'Tab':
-          setIsMenuOpen(false);
-      }
-    },
-  });
-
-  const onDocumentClick = (event: MouseEvent) => {
-    const target = event.target;
-    const current = container && container.current;
-
-    if (!(target instanceof Node && current?.contains(target))) {
-      ensureMenuIsClosed();
-    }
-  };
-
-  const onDocumentFocusin = (event: FocusEvent) => {
-    const target = event.target;
-    const current = container && container.current;
-
-    if (!(target instanceof Node && current?.contains(target))) {
-      ensureMenuIsClosed();
-    }
-  };
-
-  React.useEffect(() => {
-    setupKeyboardNav();
-    document.addEventListener('click', onDocumentClick);
-    document.addEventListener('focusin', onDocumentFocusin);
-
-    return () => {
-      teardownKeyboardNav();
-      document.removeEventListener('click', onDocumentClick);
-      document.removeEventListener('focusin', onDocumentFocusin);
-    };
-  });
-
-  return (
-    <div className={styles.menuDropdown} ref={container}>
-      <button
-        ref={toggleButton}
-        aria-haspopup="true"
-        aria-expanded={isMenuOpen}
-        aria-label={buttonAriaLabel}
-        className={styles.dropdownButton}
-        onClick={toggleMenu}
-        type="button"
-      >
-        {icon && <div className={styles.iconWrapper}>{icon}</div>}
-        <div className={styles.textWrapper}>
-          {buttonText}
-          <IconAngleDown
-            className={classNames(styles.iconAngle, {
-              [styles.iconAngleUp]: isMenuOpen,
-            })}
-          />
-        </div>
-      </button>
-      <ul
-        role="menu"
-        className={classNames(styles.dropdownMenu, {
-          [styles.isOpen]: isMenuOpen,
-        })}
-      >
-        {items.map((item, index) => {
-          return (
-            <MenuItemComponent
-              key={item.value}
-              item={item}
-              isFocused={focusedIndex === index}
-              isSelected={item.value === value}
-              onClick={handleMenuItemClick}
-            />
-          );
-        })}
-      </ul>
-    </div>
-  );
-};
-
-export default MenuDropdown;
diff --git a/src/common/components/menuDropdown/__tests__/MenuDropdown.test.tsx b/src/common/components/menuDropdown/__tests__/MenuDropdown.test.tsx
deleted file mode 100644
index 32f13e3b6..000000000
--- a/src/common/components/menuDropdown/__tests__/MenuDropdown.test.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import {
-  act,
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-} from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import * as React from 'react';
-import { vi } from 'vitest';
-
-import MenuDropdown, { MenuDropdownProps, MenuItem } from '../MenuDropdown';
-
-const renderMenuDropdown = async (props: MenuDropdownProps) => {
-  const ui = <MenuDropdown {...props} />;
-
-  // FIXME: Remove act() wrapping workaround, see if warning can be fixed better:
-  const { container } = await act(() => render(ui));
-
-  const toggleButton = await screen.findByLabelText(props.buttonText, {
-    selector: 'button',
-  });
-
-  const getItemAtIndex = async (index: number) =>
-    (await screen.findAllByRole('menuitem'))[index];
-
-  const arrowDown = () => {
-    fireEvent.keyDown(container, { key: 'ArrowDown' });
-  };
-
-  const arrowUp = () => {
-    fireEvent.keyDown(container, { key: 'ArrowUp' });
-  };
-
-  return {
-    toggleButton,
-    getItemAtIndex,
-    arrowDown,
-    arrowUp,
-  };
-};
-
-const onClickMock = vi.fn();
-
-const items: MenuItem[] = [1, 2, 3, 4].map((item) => ({
-  onClick: onClickMock,
-  text: `Item ${item}`,
-  value: `item_${item}`,
-}));
-
-const buttonText = 'Select item';
-
-const defaultProps: MenuDropdownProps = {
-  buttonAriaLabel: buttonText,
-  buttonText,
-  items,
-};
-
-describe('MenuDropdown component', () => {
-  it('changes focused item correctly', async () => {
-    const { arrowDown, arrowUp, toggleButton, getItemAtIndex } =
-      await renderMenuDropdown(defaultProps);
-
-    await userEvent.click(toggleButton);
-
-    arrowDown();
-
-    expect(await getItemAtIndex(0)).toHaveClass('isFocused');
-
-    arrowDown();
-    arrowDown();
-
-    expect(await getItemAtIndex(2)).toHaveClass('isFocused');
-
-    arrowDown();
-
-    expect(await getItemAtIndex(3)).toHaveClass('isFocused');
-
-    arrowDown();
-
-    expect(await getItemAtIndex(0)).toHaveClass('isFocused');
-
-    arrowUp();
-
-    expect(await getItemAtIndex(3)).toHaveClass('isFocused');
-  });
-
-  it('calls onChange callback correctly', async () => {
-    const { getItemAtIndex, toggleButton } =
-      await renderMenuDropdown(defaultProps);
-
-    await userEvent.click(toggleButton);
-
-    for (const [index, item] of items.entries()) {
-      await userEvent.click(await getItemAtIndex(index));
-      await waitFor(() => expect(onClickMock).toHaveBeenCalledTimes(index + 1));
-      await waitFor(() => expect(onClickMock).toHaveBeenCalledWith(item.value));
-    }
-  });
-});
diff --git a/src/common/components/menuDropdown/menuDropdown.module.scss b/src/common/components/menuDropdown/menuDropdown.module.scss
deleted file mode 100644
index 23968bb67..000000000
--- a/src/common/components/menuDropdown/menuDropdown.module.scss
+++ /dev/null
@@ -1,120 +0,0 @@
-.menuDropdown {
-  --background-color-menu: var(--color-white);
-  --background-color-menu-item-focus: var(--color-fog);
-
-  --border-color-button: var(--color-white);
-  --border-color-button-focus: var(--color-black);
-  --border-bottom-color-menu-item: var(--color-black-10);
-
-  --color-button: var(--color-black);
-
-  --fontsize-button: var(--fontsize-body-m);
-  --fontsize-menu-item: var(--fontsize-body-m);
-
-  --fontweight-menu-item: normal;
-  --fontweight-menu-item-selected: 600;
-
-  --margin-left-icon-angle: var(--spacing-xs);
-
-  --margin-right-button-icon: var(--spacing-xs);
-  --margin-right-menu-item-icon: var(--spacing-xs);
-
-  --size-menu-item-icon: 1.5rem;
-  --size-button-icon: 1.5rem;
-  --size-button-angle-icon: 1.25rem;
-
-  --spacing-button: var(--spacing-2-xs);
-  --spacing-menu-item: var(--spacing-s);
-}
-
-.menuDropdown {
-  position: relative;
-  align-self: center;
-}
-
-.dropdownButton {
-  display: flex;
-  font-size: var(--fontsize-button);
-  color: var(--color-button);
-  font-weight: normal;
-  align-items: center;
-  padding: var(--spacing-button);
-  border: 2px solid var(--border-color-button);
-
-  .iconWrapper {
-    height: var(--size-button-icon);
-    width: var(--size-button-icon);
-    margin-right: var(--margin-right-button-icon);
-  }
-
-  .textWrapper {
-    display: flex;
-    align-items: center;
-  }
-
-  .iconAngle {
-    height: var(--size-button-angle-icon);
-    width: var(--size-button-angle-icon);
-    margin-left: var(--margin-left-icon-angle);
-  }
-
-  .iconAngleUp {
-    transform: rotate(180deg);
-  }
-
-  &:focus {
-    border-color: var(--border-color-button-focus);
-  }
-}
-
-.dropdownMenu {
-  display: none;
-
-  &.isOpen {
-    display: block;
-    position: absolute;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-    top: 100%;
-    right: 0;
-    background-color: var(--background-color-menu);
-    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.2);
-    z-index: 1000;
-    min-width: -webkit-fill-available;
-  }
-}
-
-.menuItem {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  white-space: nowrap;
-  padding: var(--spacing-menu-item);
-  font-size: var(--fontsize-menu-item);
-  font-weight: var(--fontweight-menu-item);
-  border-bottom: 1px solid var(--border-bottom-color-menu-item);
-
-  &.isSelected {
-    font-weight: var(--fontweight-menu-item-selected);
-  }
-
-  &.isFocused {
-    background-color: var(--background-color-menu-item-focus);
-  }
-
-  &:hover {
-    text-decoration: underline;
-  }
-
-  .menuItemIconWrapper {
-    margin-right: var(--margin-right-menu-item-icon);
-    align-items: center;
-    display: flex;
-
-    svg {
-      height: var(--size-menu-item-icon);
-      width: var(--size-menu-item-icon);
-    }
-  }
-}
diff --git a/src/common/components/modal/AlertModal.tsx b/src/common/components/modal/AlertModal.tsx
index 896496a16..a684a275d 100644
--- a/src/common/components/modal/AlertModal.tsx
+++ b/src/common/components/modal/AlertModal.tsx
@@ -1,9 +1,8 @@
-import { Button, ButtonVariant, IconInfoCircle } from 'hds-react';
+import { Button, ButtonVariant } from 'hds-react';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import Modal from './Modal';
-import styles from './modal.module.scss';
+import BaseDialogModal from './BaseDialogModal';
 
 interface Props {
   confirmButtonText: string;
@@ -23,32 +22,35 @@ const AlertModal: React.FC<Props> = ({
   toggleModal,
 }) => {
   const { t } = useTranslation();
+
   return (
-    <Modal
-      className={styles.alertModal}
-      icon={<IconInfoCircle />}
+    <BaseDialogModal
+      id="alert-modal"
       isOpen={isOpen}
       title={title}
       toggleModal={toggleModal}
+      variant="danger"
+      actions={
+        <>
+          <Button
+            type="button"
+            onClick={toggleModal}
+            variant={ButtonVariant.Secondary}
+          >
+            {t('common.alertModal.buttonCancel')}
+          </Button>
+          <Button
+            type="button"
+            onClick={onConfirm}
+            variant={ButtonVariant.Danger}
+          >
+            {confirmButtonText}
+          </Button>
+        </>
+      }
     >
       {children}
-      <div className={styles.buttonWrapper}>
-        <Button
-          type="button"
-          onClick={toggleModal}
-          variant={ButtonVariant.Secondary}
-        >
-          {t('common.alertModal.buttonCancel')}
-        </Button>
-        <Button
-          type="button"
-          onClick={onConfirm}
-          variant={ButtonVariant.Danger}
-        >
-          {confirmButtonText}
-        </Button>
-      </div>
-    </Modal>
+    </BaseDialogModal>
   );
 };
 
diff --git a/src/common/components/modal/BaseDialogModal.tsx b/src/common/components/modal/BaseDialogModal.tsx
new file mode 100644
index 000000000..7d8357ac8
--- /dev/null
+++ b/src/common/components/modal/BaseDialogModal.tsx
@@ -0,0 +1,61 @@
+import { Dialog, IconInfoCircle } from 'hds-react';
+import * as React from 'react';
+import { useTranslation } from 'react-i18next';
+
+type Props = {
+  id: string;
+  isOpen: boolean;
+  title: string;
+  toggleModal: () => void;
+  actions: React.ReactNode;
+  children?: React.ReactNode;
+  variant?: React.ComponentProps<typeof Dialog>['variant'];
+  iconStart?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+const BaseDialogModal: React.FC<Props> = ({
+  actions,
+  children,
+  id,
+  isOpen,
+  title,
+  toggleModal,
+  variant,
+  iconStart,
+  className,
+  style,
+}) => {
+  const { t } = useTranslation();
+  const instanceSuffix = React.useId().replaceAll(':', '');
+  const dialogId = `${id}-${instanceSuffix}`;
+
+  const titleId = `${dialogId}-title`;
+  const descriptionId = `${dialogId}-content`;
+
+  return (
+    <Dialog
+      id={dialogId}
+      aria-labelledby={titleId}
+      aria-describedby={descriptionId}
+      isOpen={isOpen}
+      title={title}
+      close={toggleModal}
+      closeButtonLabelText={t('common.close')}
+      variant={variant}
+      className={className}
+      style={style}
+    >
+      <Dialog.Header
+        id={titleId}
+        title={title}
+        iconStart={iconStart ?? <IconInfoCircle />}
+      />
+      <Dialog.Content id={descriptionId}>{children}</Dialog.Content>
+      <Dialog.ActionButtons>{actions}</Dialog.ActionButtons>
+    </Dialog>
+  );
+};
+
+export default BaseDialogModal;
diff --git a/src/common/components/modal/ConfirmationModal.tsx b/src/common/components/modal/ConfirmationModal.tsx
index ab32829d0..66352b911 100644
--- a/src/common/components/modal/ConfirmationModal.tsx
+++ b/src/common/components/modal/ConfirmationModal.tsx
@@ -1,9 +1,8 @@
-import { Button, ButtonVariant, IconInfoCircle } from 'hds-react';
+import { Button, ButtonVariant } from 'hds-react';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import Modal from './Modal';
-import styles from './modal.module.scss';
+import BaseDialogModal from './BaseDialogModal';
 
 interface Props {
   confirmButtonText: string;
@@ -23,31 +22,34 @@ const ConfirmationModal: React.FC<Props> = ({
   toggleModal,
 }) => {
   const { t } = useTranslation();
+
   return (
-    <Modal
-      icon={<IconInfoCircle />}
+    <BaseDialogModal
+      id="confirmation-modal"
       isOpen={isOpen}
       title={title}
       toggleModal={toggleModal}
+      actions={
+        <>
+          <Button
+            type="button"
+            onClick={toggleModal}
+            variant={ButtonVariant.Secondary}
+          >
+            {t('common.alertModal.buttonCancel')}
+          </Button>
+          <Button
+            type="button"
+            onClick={onConfirm}
+            variant={ButtonVariant.Primary}
+          >
+            {confirmButtonText}
+          </Button>
+        </>
+      }
     >
       {children}
-      <div className={styles.buttonWrapper}>
-        <Button
-          type="button"
-          onClick={toggleModal}
-          variant={ButtonVariant.Secondary}
-        >
-          {t('common.alertModal.buttonCancel')}
-        </Button>
-        <Button
-          type="button"
-          onClick={onConfirm}
-          variant={ButtonVariant.Primary}
-        >
-          {confirmButtonText}
-        </Button>
-      </div>
-    </Modal>
+    </BaseDialogModal>
   );
 };
 
diff --git a/src/common/components/modal/Modal.tsx b/src/common/components/modal/Modal.tsx
deleted file mode 100644
index 00711a966..000000000
--- a/src/common/components/modal/Modal.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import classNames from 'classnames';
-import * as React from 'react';
-import ReactModal from 'react-modal';
-
-import styles from './modal.module.scss';
-
-interface Props {
-  className?: string;
-  icon: React.ReactElement;
-  isOpen: boolean;
-  title: string;
-  toggleModal: () => void;
-  children?: React.ReactNode;
-}
-
-const Modal: React.FC<Props> = ({
-  children,
-  className,
-  icon,
-  isOpen,
-  title,
-  toggleModal,
-}) => {
-  return (
-    <div className={styles.modalWrapper}>
-      {isOpen && (
-        <ReactModal
-          isOpen={isOpen}
-          onRequestClose={toggleModal}
-          bodyOpenClassName={styles.bodyOpen}
-          className={classNames(styles.modal, className)}
-          overlayClassName={styles.overlay}
-          shouldCloseOnOverlayClick={false}
-        >
-          <div className={styles.modalContent}>
-            <div className={styles.iconWrapper}>{icon}</div>
-            <div className={styles.contentWrapper}>
-              <div className={styles.title}>{title}</div>
-              <div className={styles.modalChildren}>{children}</div>
-            </div>
-          </div>
-        </ReactModal>
-      )}
-    </div>
-  );
-};
-
-export default Modal;
diff --git a/src/common/components/modal/NotificationModal.tsx b/src/common/components/modal/NotificationModal.tsx
index 04b3c99e4..f52d75b71 100644
--- a/src/common/components/modal/NotificationModal.tsx
+++ b/src/common/components/modal/NotificationModal.tsx
@@ -1,9 +1,8 @@
-import { Button, ButtonVariant, IconInfoCircle } from 'hds-react';
+import { Button, ButtonVariant } from 'hds-react';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import Modal from './Modal';
-import styles from './modal.module.scss';
+import BaseDialogModal from './BaseDialogModal';
 
 interface Props {
   isOpen: boolean;
@@ -21,15 +20,14 @@ const NotificationModal: React.FC<Props> = ({
   onConfirm,
 }) => {
   const { t } = useTranslation();
+
   return (
-    <Modal
-      icon={<IconInfoCircle />}
+    <BaseDialogModal
+      id="notification-modal"
       isOpen={isOpen}
       title={title}
       toggleModal={toggleModal}
-    >
-      {children}
-      <div className={styles.notificationButtonWrapper}>
+      actions={
         <Button
           type="button"
           onClick={onConfirm}
@@ -38,8 +36,10 @@ const NotificationModal: React.FC<Props> = ({
         >
           {t('common.notificationModal.buttonClose')}
         </Button>
-      </div>
-    </Modal>
+      }
+    >
+      {children}
+    </BaseDialogModal>
   );
 };
 
diff --git a/src/common/components/modal/confirmModal.module b/src/common/components/modal/confirmModal.module
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/common/components/modal/modal.module.scss b/src/common/components/modal/modal.module.scss
deleted file mode 100644
index fcbd42408..000000000
--- a/src/common/components/modal/modal.module.scss
+++ /dev/null
@@ -1,105 +0,0 @@
-@use '~styles/layout';
-
-.bodyOpen {
-  overflow: hidden;
-}
-
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(#000, 0.75);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 10;
-}
-
-.modal {
-  --background-color-modal: var(--color-white);
-
-  --border-color-modal: var(--color-bus);
-  --border-color-modal-alert: var(--color-error);
-
-  --color-icon: var(--color-black);
-  --color-title: var(--color-black);
-
-  --fontsize-title: var(--fontsize-heading-s);
-
-  --fontweight-title: bold;
-
-  --lineheight-title: 2.5rem;
-
-  --grid-gap: var(--spacing-m);
-
-  --spacing-modal: var(--spacing-3-xl);
-
-  --width-icon: 2.5rem;
-  --width-modal: 660px;
-}
-
-.modal {
-  background-color: var(--background-color-modal);
-  border: 1px solid var(--border-color-modal);
-  position: relative;
-  padding: var(--spacing-modal);
-  outline: none;
-
-  @include layout.respond-below(l-plus) {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-
-  @include layout.respond-above(l-plus) {
-    width: var(--width-modal);
-  }
-}
-
-.modalContent {
-  display: grid;
-  grid-template-columns: var(--width-icon) 1fr var(--width-icon);
-  grid-gap: var(--grid-gap);
-
-  p {
-    margin: var(--spacing-m) 0;
-  }
-}
-
-.iconWrapper {
-  fill: var(--color-icon);
-
-  svg {
-    height: var(--width-icon);
-    width: var(--width-icon);
-  }
-}
-
-.title {
-  color: var(--color-title);
-  font-size: var(--fontsize-title);
-  font-weight: var(--fontweight-title);
-  line-height: var(--lineheight-title);
-  text-transform: uppercase;
-}
-
-.buttonWrapper {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  margin-top: var(--spacing-3-xl);
-  grid-gap: var(--grid-gap);
-}
-
-.alertModal {
-  border-color: var(--border-color-modal-alert);
-  overflow-y: auto;
-}
-
-.notificationButtonWrapper {
-  display: flex;
-  margin-top: var(--spacing-3-xl);
-}
diff --git a/src/common/components/notificationsContext/NotificationsContext.tsx b/src/common/components/notificationsContext/NotificationsContext.tsx
new file mode 100644
index 000000000..28cc9bb37
--- /dev/null
+++ b/src/common/components/notificationsContext/NotificationsContext.tsx
@@ -0,0 +1,99 @@
+import { Notification, NotificationProps, NotificationSize } from 'hds-react';
+import uniqueId from 'lodash/uniqueId';
+import React, {
+  CSSProperties,
+  createContext,
+  FC,
+  PropsWithChildren,
+  useCallback,
+  useMemo,
+  useState,
+  useLayoutEffect,
+} from 'react';
+
+export type NotificationsContextProps = {
+  addNotification: (props: NotificationProps) => void;
+};
+
+export const NotificationsContext = createContext<
+  NotificationsContextProps | undefined
+>(undefined);
+
+const NOTIFICATION_OFFSET = 24;
+const NOTIFICATION_Z_INDEX = 1000;
+const AUTO_CLOSE_DURATION = 10000;
+
+const removeNotificationById = (
+  items: NotificationProps[],
+  id: NotificationProps['id']
+) => items.filter((item) => item.id !== id);
+
+const getNotificationStyle = (
+  heights: number[],
+  index: number
+): CSSProperties => {
+  const topMargin = heights
+    .slice(0, index)
+    .reduce(
+      (acc, curr) => acc + curr + NOTIFICATION_OFFSET,
+      NOTIFICATION_OFFSET
+    );
+
+  return {
+    top: topMargin,
+    transform: 'translate3d(0px, 0px, 0px)',
+    zIndex: NOTIFICATION_Z_INDEX,
+  };
+};
+
+export const NotificationsProvider: FC<PropsWithChildren> = ({ children }) => {
+  const [notifications, setNotifications] = useState<NotificationProps[]>([]);
+
+  const addNotification = useCallback((props: NotificationProps) => {
+    setNotifications((items) => [
+      ...items,
+      { ...props, id: uniqueId('notification-') },
+    ]);
+  }, []);
+
+  const value = useMemo<NotificationsContextProps>(
+    () => ({ addNotification }),
+    [addNotification]
+  );
+
+  const [heights, setHeights] = useState<number[]>([]);
+  useLayoutEffect(() => {
+    setHeights(
+      notifications.map(
+        ({ id }) => document.getElementById(id as string)?.clientHeight ?? 0
+      )
+    );
+  }, [notifications]);
+
+  return (
+    <NotificationsContext.Provider value={value}>
+      {notifications.map((props, index) => {
+        return (
+          <Notification
+            notificationAriaLabel={
+              typeof props.label === 'string' ? props.label : undefined
+            }
+            autoCloseDuration={AUTO_CLOSE_DURATION}
+            autoClose={true}
+            {...props}
+            size={NotificationSize.Medium}
+            style={getNotificationStyle(heights, index)}
+            key={props.id}
+            position="top-right"
+            onClose={() =>
+              setNotifications((items) =>
+                removeNotificationById(items, props.id)
+              )
+            }
+          />
+        );
+      })}
+      {children}
+    </NotificationsContext.Provider>
+  );
+};
diff --git a/src/common/components/notificationsContext/__tests__/NotificationsContext.test.tsx b/src/common/components/notificationsContext/__tests__/NotificationsContext.test.tsx
new file mode 100644
index 000000000..6f744d8ef
--- /dev/null
+++ b/src/common/components/notificationsContext/__tests__/NotificationsContext.test.tsx
@@ -0,0 +1,58 @@
+import { configure, render, screen, waitFor } from '@testing-library/react';
+import React, { useEffect } from 'react';
+
+import { useNotificationsContext } from '../hooks/useNotificationsContext';
+import { NotificationsProvider } from '../NotificationsContext';
+
+configure({ defaultHidden: true });
+
+it('should show several notifications', async () => {
+  const Component = () => {
+    const { addNotification } = useNotificationsContext();
+
+    useEffect(() => {
+      addNotification({ label: 'Notification 1', type: 'success' });
+      addNotification({ label: 'Notification 2', type: 'error' });
+      addNotification({ label: 'Notification 3', type: 'info' });
+    }, [addNotification]);
+    return null;
+  };
+
+  render(
+    <NotificationsProvider>
+      <Component />
+    </NotificationsProvider>
+  );
+
+  await screen.findByRole('alert', { name: 'Notification 1' });
+  await screen.findByRole('alert', { name: 'Notification 2' });
+  await screen.findByRole('alert', { name: 'Notification 3' });
+});
+
+it('should automatically hide notification after certain period of time', async () => {
+  const Component = () => {
+    const { addNotification } = useNotificationsContext();
+
+    useEffect(() => {
+      addNotification({
+        autoCloseDuration: 50,
+        label: 'Notification 1',
+        type: 'success',
+      });
+    });
+    return null;
+  };
+
+  render(
+    <NotificationsProvider>
+      <Component />
+    </NotificationsProvider>
+  );
+
+  await screen.findByRole('alert', { name: 'Notification 1' });
+  await waitFor(() =>
+    expect(
+      screen.queryByRole('alert', { name: 'Notification 1' })
+    ).not.toBeInTheDocument()
+  );
+});
diff --git a/src/common/components/notificationsContext/hooks/useNotificationsContext.ts b/src/common/components/notificationsContext/hooks/useNotificationsContext.ts
new file mode 100644
index 000000000..ea7eaa8f7
--- /dev/null
+++ b/src/common/components/notificationsContext/hooks/useNotificationsContext.ts
@@ -0,0 +1,23 @@
+/* eslint @typescript-eslint/explicit-function-return-type: 0 */
+import { useContext } from 'react';
+
+import {
+  NotificationsContext,
+  NotificationsContextProps,
+} from '../NotificationsContext';
+
+export const useNotificationsContext = (): NotificationsContextProps => {
+  const context = useContext<NotificationsContextProps | undefined>(
+    NotificationsContext
+  );
+
+  /* istanbul ignore next */
+  if (!context) {
+    throw new Error(
+      // eslint-disable-next-line max-len
+      'NotificationsContext context is undefined, please verify you are calling useNotificationsContext() as child of a <NotificationsProvider> component.'
+    );
+  }
+
+  return context;
+};
diff --git a/src/common/components/resetFocus/ResetFocus.tsx b/src/common/components/resetFocus/ResetFocus.tsx
deleted file mode 100644
index 49159bcd3..000000000
--- a/src/common/components/resetFocus/ResetFocus.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-
-export const resetFocusId = 'reset-focus';
-
-/**
- * Ensure that browser focus is set to body when navigating using
- * <Link> from react-router.
- */
-const ResetFocus = (): React.ReactElement => {
-  const pathname = window?.location?.pathname;
-  const node = React.useRef<HTMLDivElement>(null);
-
-  React.useEffect(() => {
-    const isClient = typeof window !== 'undefined';
-    if (isClient) {
-      node.current?.focus();
-    }
-  }, [pathname]);
-
-  return <div ref={node} tabIndex={-1} id={resetFocusId} />;
-};
-
-export default ResetFocus;
diff --git a/src/common/components/skeletonLoader/SkeletonLoader.tsx b/src/common/components/skeletonLoader/SkeletonLoader.tsx
deleted file mode 100644
index 2679c7890..000000000
--- a/src/common/components/skeletonLoader/SkeletonLoader.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import ContentLoader from 'react-content-loader';
-
-interface Props {
-  width?: string;
-  height?: string;
-  backgroundColor?: string;
-  foregroundColor?: string;
-}
-
-const SkeletonLoader: FunctionComponent<Props> = ({
-  width = '200',
-  height = '18',
-  backgroundColor = '#f3f3f3',
-  foregroundColor = '#ecebeb',
-}) => {
-  return (
-    <ContentLoader
-      speed={2}
-      width={width}
-      height={height}
-      viewBox={`0 0 ${width} ${height}`}
-      backgroundColor={backgroundColor}
-      foregroundColor={foregroundColor}
-    >
-      <rect x="0" y="0" rx="3" ry="3" width={width} height={height} />
-    </ContentLoader>
-  );
-};
-
-export default SkeletonLoader;
diff --git a/src/common/components/table/Table.tsx b/src/common/components/table/Table.tsx
index 33abb222e..6f9d575f1 100644
--- a/src/common/components/table/Table.tsx
+++ b/src/common/components/table/Table.tsx
@@ -1,16 +1,23 @@
+import {
+  ColumnDef,
+  ExpandedState,
+  flexRender,
+  getCoreRowModel,
+  getExpandedRowModel,
+  useReactTable,
+} from '@tanstack/react-table';
 import classNames from 'classnames';
-import React, { ReactElement } from 'react';
-import { Column, Row, useExpanded, useTable } from 'react-table';
+import React, { ReactElement, useState } from 'react';
 
 import styles from './table.module.scss';
-import { ExtendedCell, ExtendedHeaderGroup, ExtendedRow } from './types';
+import { ExtendedColumnDef, ExtendedRow } from './types';
 
 type Props<D extends Record<string, unknown>> = {
-  columns: Array<Column<D>>;
+  columns: Array<ColumnDef<D>>;
   data: Array<D>;
   expandedAreaOffset?: number;
-  onRowClick?: (row: Row<D>) => void;
-  renderExpandedArea?: (row: D) => JSX.Element;
+  onRowClick?: (row: ExtendedRow<D>) => void;
+  renderExpandedArea?: (row: D) => React.ReactElement;
   tableHeaderRowClassName?: string;
 };
 
@@ -22,48 +29,47 @@ export default function Table<D extends Record<string, unknown>>({
   renderExpandedArea,
   tableHeaderRowClassName,
 }: Props<D>): ReactElement {
-  const { getTableBodyProps, getTableProps, headerGroups, prepareRow, rows } =
-    useTable(
-      {
-        columns,
-        data,
-      },
-      useExpanded
-    );
+  const [expanded, setExpanded] = useState<ExpandedState>({});
+
+  const table = useReactTable({
+    data,
+    columns,
+    state: {
+      expanded,
+    },
+    onExpandedChange: setExpanded,
+    getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+  });
+
+  const { getHeaderGroups, getRowModel } = table;
 
   // Render the UI for your table
   return (
     <div className={styles.tableWrapper}>
-      <table {...getTableProps({ className: styles.table })}>
+      <table className={styles.table}>
         <thead>
-          {headerGroups.map((headerGroup) => {
-            const headerGroupProps = headerGroup.getHeaderGroupProps({
-              className: tableHeaderRowClassName,
-            });
-            const { key, ...restHeaderGroupProps } = headerGroupProps;
-            return (
-              <tr {...restHeaderGroupProps} key={key}>
-                {headerGroup.headers.map((column: ExtendedHeaderGroup<D>) => {
-                  const { style, className } = column;
-                  const { key, ...restHeaderProps } = column.getHeaderProps();
-                  return (
-                    <th
-                      {...restHeaderProps}
-                      {...{ style, className }}
-                      key={key}
-                    >
-                      {column.render('Header')}
-                    </th>
-                  );
-                })}
-              </tr>
-            );
-          })}
+          {getHeaderGroups().map((headerGroup) => (
+            <tr key={headerGroup.id} className={tableHeaderRowClassName}>
+              {headerGroup.headers.map((header) => {
+                const { className, style } =
+                  (header.column.columnDef as ExtendedColumnDef<D>) || {};
+                return (
+                  <th key={header.id} style={style} className={className}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        )}
+                  </th>
+                );
+              })}
+            </tr>
+          ))}
         </thead>
-        <tbody {...getTableBodyProps()}>
-          {rows.map((row: ExtendedRow<D>) => {
-            prepareRow(row);
-
+        <tbody>
+          {getRowModel().rows.map((row) => {
             const handleClick = (event: React.MouseEvent) => {
               const element = event.target as HTMLElement;
               if (
@@ -87,40 +93,42 @@ export default function Table<D extends Record<string, unknown>>({
               }
             };
 
-            const { key, ...restRowProps } = row.getRowProps();
-
             return (
-              <React.Fragment key={key}>
+              <React.Fragment key={row.id}>
                 <tr
-                  {...restRowProps}
                   className={classNames({
                     [styles.clickableRow]: onRowClick,
-                    [styles.expandedRow]: row.isExpanded,
+                    [styles.expandedRow]: row.getIsExpanded(),
                   })}
                   onClick={handleClick}
                   onKeyDown={handleKeyDown}
                   tabIndex={onRowClick ? 0 : -1}
                 >
-                  {row.cells.map((cell: ExtendedCell<D>) => {
-                    const { className, style } = cell.column;
-                    const { key, ...restCellProps } = cell.getCellProps();
+                  {row.getVisibleCells().map((cell) => {
+                    const { className, style } =
+                      (cell.column.columnDef as ExtendedColumnDef<D>) || {};
                     return (
-                      <td
-                        {...restCellProps}
-                        {...{ className, style }}
-                        key={key}
-                      >
-                        {cell.render('Cell')}
+                      <td key={cell.id} style={style} className={className}>
+                        {flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )}
                       </td>
                     );
                   })}
                 </tr>
-                {row.isExpanded && (
+                {row.getIsExpanded() && (
                   <tr className={styles.expandedArea}>
-                    {expandedAreaOffset > 0 && (
-                      <td colSpan={expandedAreaOffset}></td>
-                    )}
-                    <td colSpan={row.cells.length - expandedAreaOffset}>
+                    {expandedAreaOffset > 0 &&
+                      expandedAreaOffset < row.getVisibleCells().length && (
+                        <td colSpan={expandedAreaOffset}></td>
+                      )}
+                    <td
+                      colSpan={Math.max(
+                        1,
+                        row.getVisibleCells().length - expandedAreaOffset
+                      )}
+                    >
                       {renderExpandedArea && renderExpandedArea(row.original)}
                     </td>
                   </tr>
diff --git a/src/common/components/table/types.ts b/src/common/components/table/types.ts
index c3371bad5..976dddfc4 100644
--- a/src/common/components/table/types.ts
+++ b/src/common/components/table/types.ts
@@ -1,34 +1,22 @@
-import {
-  Cell,
-  ColumnInstance,
-  HeaderGroup,
-  Row,
-  UseExpandedRowProps,
-} from 'react-table';
+import { Cell, ColumnDef, Header, Row, Table } from '@tanstack/react-table';
 
 type StyleProps = {
   className?: string;
   style?: React.CSSProperties;
 };
 
-type ExtendedColumnInstance<D extends Record<string, unknown>> =
-  ColumnInstance<D> & StyleProps;
+export type ExtendedColumnDef<D extends Record<string, unknown>> =
+  ColumnDef<D> & StyleProps;
 
-export type ExtendedCell<D extends Record<string, unknown>> = Cell<
+export type ExtendedCell<D extends Record<string, unknown>> = Cell<D, unknown> &
+  StyleProps;
+
+export type ExtendedHeader<D extends Record<string, unknown>> = Header<
   D,
   unknown
-> & {
-  column: ExtendedColumnInstance<D>;
-};
+> &
+  StyleProps;
 
-export type ExtendedHeaderGroup<D extends Record<string, unknown>> =
-  HeaderGroup<D> & StyleProps;
+export type ExtendedRow<D extends Record<string, unknown>> = Row<D>;
 
-export type ExtendedRow<D extends Record<string, unknown>> = Row<D> & {
-  isExpanded?: boolean;
-};
-
-export type UseExpandedColumnCell<D extends Record<string, unknown>> = {
-  value: D;
-  row: UseExpandedRowProps<D>;
-};
+export type ExtendedTable<D extends Record<string, unknown>> = Table<D>;
diff --git a/src/domain/app/App.tsx b/src/domain/app/App.tsx
index 05ecb1548..958b163dd 100644
--- a/src/domain/app/App.tsx
+++ b/src/domain/app/App.tsx
@@ -1,21 +1,26 @@
 import { ApolloProvider } from '@apollo/client';
+import { ConfigProvider as RHHCConfigProvider } from '@city-of-helsinki/react-helsinki-headless-cms';
 import * as React from 'react';
-import { ConfigProvider as RHHCConfigProvider } from 'react-helsinki-headless-cms';
 import { BrowserRouter } from 'react-router';
-import { ToastContainer } from 'react-toastify';
 
 import { useApolloClient } from './apollo/apolloClient';
 import AppRoutes from './routes/AppRoutes';
 import { FORCE_SCROLL_TO_TOP, IGNORE_SCROLL_TO_TOP } from './routes/constants';
 import ScrollToTop from './ScrollToTop';
+import { useNotificationsContext } from '../../common/components/notificationsContext/hooks/useNotificationsContext';
+import { NotificationsProvider } from '../../common/components/notificationsContext/NotificationsContext';
 import { useCMSApolloClient } from '../../headless-cms/apollo/apolloClient';
 import useRHHCConfig from '../../hooks/useRHHCConfig';
 import IdleTimer from '../auth/IdleTimerProvider';
 import KultusAdminHDSLoginProvider from '../auth/KultusAdminHDSLoginProvider';
 import { OrganisationProvider } from '../organisation/contextProviders/OrganisationProvider';
 
-const App = () => {
-  const apolloClient = useApolloClient();
+const AppContent = () => {
+  const { addNotification } = useNotificationsContext();
+  const apolloClient = useApolloClient({
+    addNotification,
+    initialApolloState: null,
+  });
   const cmsClient = useCMSApolloClient();
 
   const rhhcConfig = useRHHCConfig({
@@ -24,26 +29,31 @@ const App = () => {
     venuesApolloClient: apolloClient,
   });
   return (
-    <>
-      <KultusAdminHDSLoginProvider>
-        <IdleTimer>
-          <ApolloProvider client={apolloClient}>
-            <BrowserRouter>
-              <OrganisationProvider>
-                <RHHCConfigProvider config={rhhcConfig}>
-                  <ScrollToTop
-                    ignoredPaths={IGNORE_SCROLL_TO_TOP}
-                    forceScrollToTopPaths={FORCE_SCROLL_TO_TOP}
-                  />
-                  <AppRoutes />
-                </RHHCConfigProvider>
-              </OrganisationProvider>
-            </BrowserRouter>
-          </ApolloProvider>
-        </IdleTimer>
-      </KultusAdminHDSLoginProvider>
-      <ToastContainer />
-    </>
+    <KultusAdminHDSLoginProvider>
+      <IdleTimer>
+        <ApolloProvider client={apolloClient}>
+          <BrowserRouter>
+            <OrganisationProvider>
+              <RHHCConfigProvider config={rhhcConfig}>
+                <ScrollToTop
+                  ignoredPaths={IGNORE_SCROLL_TO_TOP}
+                  forceScrollToTopPaths={FORCE_SCROLL_TO_TOP}
+                />
+                <AppRoutes />
+              </RHHCConfigProvider>
+            </OrganisationProvider>
+          </BrowserRouter>
+        </ApolloProvider>
+      </IdleTimer>
+    </KultusAdminHDSLoginProvider>
+  );
+};
+
+const App = () => {
+  return (
+    <NotificationsProvider>
+      <AppContent />
+    </NotificationsProvider>
   );
 };
 
diff --git a/src/domain/app/__tests__/__snapshots__/apolloRHHC.test.tsx.snap b/src/domain/app/__tests__/__snapshots__/apolloRHHC.test.tsx.snap
index 00954fb12..a8746d14b 100644
--- a/src/domain/app/__tests__/__snapshots__/apolloRHHC.test.tsx.snap
+++ b/src/domain/app/__tests__/__snapshots__/apolloRHHC.test.tsx.snap
@@ -29,75 +29,75 @@ exports[`test issues in connection between the apollo client and the RHHC-lib >
 exports[`test issues in connection between the apollo client and the RHHC-lib > apollo client should work with RHHC-lib > renders component that needs the apollo client with a custom wrapper [Function ApolloNavigationComponent] 1`] = `
 <div>
   <header
-    class="hds-header Header-module_header__291GF"
+    class="hds-header Header-module_header__8wQWT"
     style="--header-max-width: var(--breakpoint-xl);"
   >
     <div
-      class="Header-module_headerBackgroundWrapper__KsFy2"
+      class="Header-module_headerBackgroundWrapper__Ajnmy"
     >
       <a
-        class="SkipLink-module_skipLink__1knzF"
+        class="SkipLink-module_skipLink__6PN15"
         href="#main-content"
       >
         <span
-          class="SkipLink-module_skipLinkLabel__21n5B"
+          class="SkipLink-module_skipLinkLabel__-13Ba"
         >
           Siirry sisältöön
         </span>
       </a>
       <div
-        class="HeaderActionBar-module_headerActionBarContainer__5tfj-"
+        class="HeaderActionBar-module_headerActionBarContainer__-cBwf"
       >
         <div
-          class="HeaderActionBar-module_headerActionBar__lPeGE"
+          class="HeaderActionBar-module_headerActionBar__k3ncT"
         >
           <a
             aria-label="Helsingin kaupunki"
-            class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_logo__2r2T0"
+            class="HeaderActionBar-module_titleAndLogoContainer__q4Awq HeaderActionBar-module_logo__tOoSx"
             href="#"
             role="link"
           >
             <span
-              class="HeaderActionBarLogo-module_logoWrapper__8NgfS"
+              class="HeaderActionBarLogo-module_logoWrapper__elkMB"
             >
               <img
                 alt="Helsinki"
-                class="Logo-module_logo__Y2mwP Logo-module_large__3Tjj3"
+                class="Logo-module_logo__uZrXp Logo-module_large__xo4CC"
                 src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="
               />
             </span>
           </a>
           <a
-            class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_title__opzt9 HeaderActionBar-module_normal__3B4qi"
+            class="HeaderActionBar-module_titleAndLogoContainer__q4Awq HeaderActionBar-module_title__bLL5z HeaderActionBar-module_normal__kh4pL"
             href="#"
           >
             <span
-              class="HeaderActionBar-module_title__opzt9"
+              class="HeaderActionBar-module_title__bLL5z"
             >
               Kultus Admin
             </span>
           </a>
           <div
-            class="HeaderActionBar-module_headerActions__3lNnM"
+            class="HeaderActionBar-module_headerActions__H4unU"
           >
             <div
-              class="HeaderLanguageSelector-module_languageSelector__3d38B"
+              class="HeaderLanguageSelector-module_languageSelector__5whey"
             >
               <div
-                class="HeaderLanguageSelector-module_languageNodes__lTe8p"
+                class="HeaderLanguageSelector-module_languageNodes__LXQ2h"
               />
             </div>
           </div>
         </div>
       </div>
       <div
-        class="HeaderNavigationMenu-module_headerNavigationMenuContainer__2nK9z"
+        class="HeaderNavigationMenu-module_headerNavigationMenuContainer__ZIb-h"
       >
         <nav
-          class="HeaderNavigationMenu-module_headerNavigationMenu__3G6-N"
+          class="HeaderNavigationMenu-module_headerNavigationMenu__YRpgY"
         >
           <ul
-            class="HeaderNavigationMenu-module_headerNavigationMenuList__3HIzx"
+            class="HeaderNavigationMenu-module_headerNavigationMenuList__eybgp"
           />
         </nav>
       </div>
diff --git a/src/domain/app/__tests__/apolloRHHC.test.tsx b/src/domain/app/__tests__/apolloRHHC.test.tsx
index 24881e2e8..7bcaf6253 100644
--- a/src/domain/app/__tests__/apolloRHHC.test.tsx
+++ b/src/domain/app/__tests__/apolloRHHC.test.tsx
@@ -4,15 +4,18 @@ import {
   useApolloClient,
 } from '@apollo/client';
 import { MockedProvider } from '@apollo/client/testing';
-import { render, renderHook } from '@testing-library/react';
-import React from 'react';
-import { ConfigProvider, useConfig } from 'react-helsinki-headless-cms';
+import {
+  ConfigProvider,
+  useConfig,
+} from '@city-of-helsinki/react-helsinki-headless-cms';
 import {
   LanguagesDocument,
   MenuDocument,
   Navigation,
   useLanguagesQuery,
-} from 'react-helsinki-headless-cms/apollo';
+} from '@city-of-helsinki/react-helsinki-headless-cms/apollo';
+import { render, renderHook } from '@testing-library/react';
+import React from 'react';
 import { vi } from 'vitest';
 
 import useRHHCConfig from '../../../hooks/useRHHCConfig';
diff --git a/src/domain/app/apollo/__tests__/apolloClient.test.ts b/src/domain/app/apollo/__tests__/apolloClient.test.ts
index 561f71771..8cc0dd033 100644
--- a/src/domain/app/apollo/__tests__/apolloClient.test.ts
+++ b/src/domain/app/apollo/__tests__/apolloClient.test.ts
@@ -15,23 +15,23 @@ describe('initializeApolloClient', () => {
   });
 
   it('should create a new Apollo Client instance if no instance exists', () => {
-    const client = initializeApolloClient();
+    const client = initializeApolloClient(null, vi.fn());
     expect(client).toBeInstanceOf(ApolloClient);
   });
 
   it('should return the existing Apollo Client instance if one exists', () => {
-    const existingClient = initializeApolloClient();
-    const client = initializeApolloClient();
+    const existingClient = initializeApolloClient(null, vi.fn());
+    const client = initializeApolloClient(null, vi.fn());
     expect(client).toBe(existingClient);
     expect(client).toBeInstanceOf(ApolloClient);
   });
 
   it('should hydrate the cache with initial state if provided', () => {
-    const client = initializeApolloClient();
+    const client = initializeApolloClient(null, vi.fn());
     const restoreSpy = vitest.spyOn(client.cache, 'restore');
     const extractSpy = vitest.spyOn(client, 'extract');
 
-    initializeApolloClient(initialState);
+    initializeApolloClient(initialState, vi.fn());
 
     expect(extractSpy).toHaveBeenCalled();
     expect(restoreSpy).toHaveBeenCalledWith(
@@ -73,11 +73,11 @@ describe('initializeApolloClient', () => {
       },
     };
 
-    const client = initializeApolloClient();
+    const client = initializeApolloClient(null, vi.fn());
     client.cache.restore(existingState);
     const restoreSpy = vitest.spyOn(client.cache, 'restore');
 
-    initializeApolloClient(initialState);
+    initializeApolloClient(initialState, vi.fn());
 
     expect(restoreSpy).toHaveBeenCalled();
     const mergedState = restoreSpy.mock.calls[0][0] as any;
diff --git a/src/domain/app/apollo/apolloClient.ts b/src/domain/app/apollo/apolloClient.ts
index 0d56de22e..b9539e2ac 100644
--- a/src/domain/app/apollo/apolloClient.ts
+++ b/src/domain/app/apollo/apolloClient.ts
@@ -8,10 +8,9 @@ import * as Sentry from '@sentry/browser';
 import createUploadLink from 'apollo-upload-client/createUploadLink.mjs';
 import fetch from 'cross-fetch';
 import merge from 'deepmerge';
-import { ErrorMessage } from 'formik';
+import { NotificationProps } from 'hds-react';
 import isEqual from 'lodash/isEqual';
 import { useRef } from 'react';
-import { toast } from 'react-toastify';
 
 import { createApolloCache } from './cache';
 import { getKultusAdminApiTokenFromStorage } from '../../auth/kultusAdminApiUtils';
@@ -19,6 +18,23 @@ import AppConfig from '../AppConfig';
 import i18n from '../i18n/i18nInit';
 
 let apolloClient: ApolloClient<NormalizedCacheObject> | undefined;
+const defaultNotify = () => {};
+let notify: (props: NotificationProps) => void = defaultNotify;
+
+function notifyGraphQLError(props: NotificationProps, errorMessage: string) {
+  if (notify === defaultNotify) {
+    if (import.meta.env.DEV) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        '[Apollo] Notification callback missing; GraphQL error was not shown to the user.',
+        errorMessage
+      );
+    }
+    return;
+  }
+
+  notify(props);
+}
 
 /**
  * Creates a new Apollo Client instance.
@@ -39,12 +55,18 @@ function createApolloClient(): ApolloClient<NormalizedCacheObject> {
       graphQLErrors.forEach(({ extensions, message, locations, path }) => {
         const errorMessage = `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`;
 
-        Sentry.captureException(ErrorMessage);
+        Sentry.captureException(new Error(errorMessage));
 
         const code = extensions && extensions['code'];
         switch (code) {
           case 'PERMISSION_DENIED_ERROR':
-            toast.error(i18n.t('apollo.graphQLErrors.permissionDeniedError'));
+            notifyGraphQLError(
+              {
+                label: i18n.t('apollo.graphQLErrors.permissionDeniedError'),
+                type: 'error',
+              },
+              errorMessage
+            );
             break;
           default:
             if (import.meta.env.DEV) {
@@ -78,7 +100,11 @@ function createApolloClient(): ApolloClient<NormalizedCacheObject> {
 
   return new ApolloClient({
     connectToDevTools: true,
-    link: ApolloLink.from([errorLink, authLink, httpLink]),
+    link: ApolloLink.from([
+      errorLink,
+      authLink,
+      httpLink as unknown as ApolloLink,
+    ]),
 
     cache: createApolloCache(),
   });
@@ -94,8 +120,11 @@ function createApolloClient(): ApolloClient<NormalizedCacheObject> {
  * @returns An Apollo Client instance.
  */
 export function initializeApolloClient(
-  initialState: NormalizedCacheObject | null = null
+  initialState: NormalizedCacheObject | null = null,
+  addNotification?: (props: NotificationProps) => void
 ): ApolloClient<NormalizedCacheObject> {
+  notify = addNotification ?? notify;
+
   const _apolloClient = apolloClient ?? createApolloClient();
 
   // Initial state hydration
@@ -140,18 +169,18 @@ export function initializeApolloClient(
  * @param options Optional object containing `initialApolloState` for cache hydration.
  * @returns An Apollo Client instance.
  */
-export function useApolloClient(
-  {
-    initialApolloState,
-  }:
-    | {
-        initialApolloState: NormalizedCacheObject | null;
-      }
-    | undefined = { initialApolloState: null }
-): ApolloClient<NormalizedCacheObject> {
-  const storeRef = useRef<ApolloClient<NormalizedCacheObject>>();
+export function useApolloClient(options?: {
+  initialApolloState?: NormalizedCacheObject | null;
+  addNotification?: (props: NotificationProps) => void;
+}): ApolloClient<NormalizedCacheObject> {
+  const { initialApolloState = null, addNotification } = options ?? {};
+
+  const storeRef = useRef<ApolloClient<NormalizedCacheObject> | null>(null);
   if (!storeRef.current) {
-    storeRef.current = initializeApolloClient(initialApolloState);
+    storeRef.current = initializeApolloClient(
+      initialApolloState,
+      addNotification
+    );
   }
   return storeRef.current;
 }
@@ -162,6 +191,7 @@ export function useApolloClient(
  */
 export function resetApolloClient() {
   apolloClient = undefined;
+  notify = defaultNotify;
 }
 
 export const clearApolloCache = async () => {
diff --git a/src/domain/app/footer/Footer.tsx b/src/domain/app/footer/Footer.tsx
index ee0dbee8e..19f11cea2 100644
--- a/src/domain/app/footer/Footer.tsx
+++ b/src/domain/app/footer/Footer.tsx
@@ -1,13 +1,13 @@
+import type { MenuItem } from '@city-of-helsinki/react-helsinki-headless-cms';
+import { useMenuQuery } from '@city-of-helsinki/react-helsinki-headless-cms/apollo';
 import { Footer as HDSFooter, Logo, logoFi, LogoSize, logoSv } from 'hds-react';
 import React, { FunctionComponent } from 'react';
-import type { MenuItem } from 'react-helsinki-headless-cms';
-import { useMenuQuery } from 'react-helsinki-headless-cms/apollo';
 import { useTranslation } from 'react-i18next';
 
 import styles from './footer.module.scss';
-import { resetFocusId } from '../../../common/components/resetFocus/ResetFocus';
 import { FOOTER_MENU_NAME } from '../../../headless-cms/constants';
 import useLocale from '../../../hooks/useLocale';
+import { resetFocusId } from '../ScrollToTop';
 
 type ValidMenuItem = {
   id: MenuItem['id'];
diff --git a/src/domain/app/footer/__tests__/__snapshots__/Footer.test.tsx.snap b/src/domain/app/footer/__tests__/__snapshots__/Footer.test.tsx.snap
index d33e6ef07..3f1f84a9d 100644
--- a/src/domain/app/footer/__tests__/__snapshots__/Footer.test.tsx.snap
+++ b/src/domain/app/footer/__tests__/__snapshots__/Footer.test.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`Footer matches snapshot 1`] = `
 <footer
-  class="Footer-module_footer__1aD3T footer"
+  class="Footer-module_footer__7u3nd footer"
 >
   <div
-    class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W"
+    class="Koros-module_koros__NeX-o Footer-module_koros__wtlaj"
     style="height: 15px;"
   >
     <svg
@@ -38,38 +38,38 @@ exports[`Footer matches snapshot 1`] = `
     </svg>
   </div>
   <div
-    class="Footer-module_footerContent__3MC14"
+    class="Footer-module_footerContent__rkiWs"
   >
     <div
-      class="Footer-module_footerSections__2nrr8"
+      class="Footer-module_footerSections__CWRc6"
     >
       <h2
-        class="Footer-module_title__269y7"
+        class="Footer-module_title__xabVz"
       >
         Kultus Admin
       </h2>
       <div
-        class="FooterBase-module_base__2f0eu footerBase"
+        class="FooterBase-module_base__ndakn footerBase"
       >
         <hr
           aria-hidden="true"
-          class="FooterBase-module_divider__3sz3q"
+          class="FooterBase-module_divider__scofd"
         />
         <div
-          class="FooterBase-module_logoWrapper__3BI7d"
+          class="FooterBase-module_logoWrapper__lheeb"
         >
           <a
-            class="Link-module_link__TeBQo link_hds-link__5Oxo- FooterLink-module_item__3Ig3B"
+            class="Link-module_link__8XuKE link_hds-link__MZCD0 FooterLink-module_item__rvkky"
           >
             <img
               alt="Helsingin kaupunki"
-              class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm"
+              class="Logo-module_logo__uZrXp Logo-module_medium__Kpggg"
               src="mocked hds-react logoFi"
             />
           </a>
         </div>
         <div
-          class="FooterBase-module_copyright__2iiev"
+          class="FooterBase-module_copyright__-sKpP"
         >
           <span>
             © 
@@ -78,7 +78,7 @@ exports[`Footer matches snapshot 1`] = `
             2026
           </span>
           <span
-            class="FooterBase-module_copyrightDot__2AfS6"
+            class="FooterBase-module_copyrightDot__qc85L"
           >
             •
           </span>
@@ -87,19 +87,19 @@ exports[`Footer matches snapshot 1`] = `
           </span>
         </div>
         <div
-          class="FooterBase-module_baseActions__1hCiR"
+          class="FooterBase-module_baseActions__3C-J5"
         >
           <div
-            class="FooterBase-module_links__3lfLo"
+            class="FooterBase-module_links__7i-pZ"
           >
             <span
               aria-hidden="true"
-              class="FooterBase-module_separator__cwQTe"
+              class="FooterBase-module_separator__RoVb3"
             >
               |
             </span>
             <a
-              class="Link-module_link__TeBQo link_hds-link__5Oxo- FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj"
+              class="Link-module_link__8XuKE link_hds-link__MZCD0 FooterLink-module_item__rvkky FooterLink-module_base__0Qd2m"
               href="https://kultus.hel.fi/fi"
             >
               <span>
@@ -108,12 +108,12 @@ exports[`Footer matches snapshot 1`] = `
             </a>
             <span
               aria-hidden="true"
-              class="FooterBase-module_separator__cwQTe"
+              class="FooterBase-module_separator__RoVb3"
             >
               |
             </span>
             <a
-              class="Link-module_link__TeBQo link_hds-link__5Oxo- FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj"
+              class="Link-module_link__8XuKE link_hds-link__MZCD0 FooterLink-module_item__rvkky FooterLink-module_base__0Qd2m"
               href="https://hkih.production.geniem.io/uploads/sites/5/2022/11/739f5edc-rekisteriseloste-kultus.fi_.pdf"
             >
               <span>
@@ -122,7 +122,7 @@ exports[`Footer matches snapshot 1`] = `
             </a>
           </div>
           <button
-            class="FooterBase-module_backToTopButton__hXTHm"
+            class="FooterBase-module_backToTopButton__YzPvo"
             role="link"
             type="button"
           >
@@ -130,7 +130,7 @@ exports[`Footer matches snapshot 1`] = `
             <svg
               aria-hidden="true"
               aria-label="arrow-up"
-              class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+              class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
               role="img"
               viewBox="0 0 24 24"
               xmlns="http://www.w3.org/2000/svg"
diff --git a/src/domain/app/header/Header.tsx b/src/domain/app/header/Header.tsx
index 3f2fbf1b8..178b671bc 100644
--- a/src/domain/app/header/Header.tsx
+++ b/src/domain/app/header/Header.tsx
@@ -1,3 +1,13 @@
+import {
+  Language as RHHCLanguage,
+  LanguageCodeEnum,
+  MenuItem,
+  Navigation,
+} from '@city-of-helsinki/react-helsinki-headless-cms';
+import {
+  useLanguagesQuery,
+  useMenuQuery,
+} from '@city-of-helsinki/react-helsinki-headless-cms/apollo';
 import {
   ButtonVariant,
   Button as HDSButton,
@@ -9,16 +19,6 @@ import {
   useOidcClient,
 } from 'hds-react';
 import * as React from 'react';
-import {
-  Language as RHHCLanguage,
-  LanguageCodeEnum,
-  MenuItem,
-  Navigation,
-} from 'react-helsinki-headless-cms';
-import {
-  useLanguagesQuery,
-  useMenuQuery,
-} from 'react-helsinki-headless-cms/apollo';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useMatch } from 'react-router';
 
diff --git a/src/domain/app/header/HeaderLink.tsx b/src/domain/app/header/HeaderLink.tsx
deleted file mode 100644
index 0bb2fa5be..000000000
--- a/src/domain/app/header/HeaderLink.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react';
-import { Link as RouterLink } from 'react-router';
-
-const Link: React.FC<{ to: string; children?: React.ReactNode }> = ({
-  to,
-  children,
-  ...rest
-}) => {
-  return (
-    <RouterLink to={to} {...rest}>
-      {children}
-    </RouterLink>
-  );
-};
-
-export default Link;
diff --git a/src/domain/app/header/__tests__/Header.test.tsx b/src/domain/app/header/__tests__/Header.test.tsx
index b3eff2be6..3901c8402 100644
--- a/src/domain/app/header/__tests__/Header.test.tsx
+++ b/src/domain/app/header/__tests__/Header.test.tsx
@@ -1,10 +1,10 @@
 import { MockedResponse } from '@apollo/client/testing';
+import { MenuItem } from '@city-of-helsinki/react-helsinki-headless-cms';
 import { waitFor, within, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import * as HdsReact from 'hds-react';
 import { graphql, HttpResponse } from 'msw';
 import * as React from 'react';
-import { MenuItem } from 'react-helsinki-headless-cms';
 import { vi } from 'vitest';
 
 import { MyProfileDocument } from '../../../../generated/graphql';
diff --git a/src/domain/app/header/__tests__/__snapshots__/Header.test.tsx.snap b/src/domain/app/header/__tests__/__snapshots__/Header.test.tsx.snap
index d44ef7da5..a12d51aa7 100644
--- a/src/domain/app/header/__tests__/__snapshots__/Header.test.tsx.snap
+++ b/src/domain/app/header/__tests__/__snapshots__/Header.test.tsx.snap
@@ -2,66 +2,66 @@
 
 exports[`Header matches snapshot 1`] = `
 <header
-  class="hds-header Header-module_header__291GF"
+  class="hds-header Header-module_header__8wQWT"
   style="--header-max-width: var(--breakpoint-xl);"
 >
   <div
-    class="Header-module_headerBackgroundWrapper__KsFy2"
+    class="Header-module_headerBackgroundWrapper__Ajnmy"
   >
     <a
-      class="SkipLink-module_skipLink__1knzF"
+      class="SkipLink-module_skipLink__6PN15"
       href="#main-content"
     >
       <span
-        class="SkipLink-module_skipLinkLabel__21n5B"
+        class="SkipLink-module_skipLinkLabel__-13Ba"
       >
         Siirry sisältöön
       </span>
     </a>
     <div
-      class="HeaderActionBar-module_headerActionBarContainer__5tfj-"
+      class="HeaderActionBar-module_headerActionBarContainer__-cBwf"
     >
       <div
-        class="HeaderActionBar-module_headerActionBar__lPeGE"
+        class="HeaderActionBar-module_headerActionBar__k3ncT"
       >
         <a
           aria-label="Helsingin kaupunki"
-          class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_logo__2r2T0"
+          class="HeaderActionBar-module_titleAndLogoContainer__q4Awq HeaderActionBar-module_logo__tOoSx"
           href="#"
           role="link"
         >
           <span
-            class="HeaderActionBarLogo-module_logoWrapper__8NgfS"
+            class="HeaderActionBarLogo-module_logoWrapper__elkMB"
           >
             <img
               alt="Helsinki"
-              class="Logo-module_logo__Y2mwP Logo-module_large__3Tjj3"
+              class="Logo-module_logo__uZrXp Logo-module_large__xo4CC"
               src="mocked hds-react logoFi"
             />
           </span>
         </a>
         <a
-          class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_title__opzt9 HeaderActionBar-module_normal__3B4qi"
+          class="HeaderActionBar-module_titleAndLogoContainer__q4Awq HeaderActionBar-module_title__bLL5z HeaderActionBar-module_normal__kh4pL"
           href="#"
         >
           <span
-            class="HeaderActionBar-module_title__opzt9"
+            class="HeaderActionBar-module_title__bLL5z"
           >
             Kultus Admin
           </span>
         </a>
         <div
-          class="HeaderActionBar-module_headerActions__3lNnM"
+          class="HeaderActionBar-module_headerActions__H4unU"
         >
           <div
-            class="HeaderLanguageSelector-module_languageSelector__3d38B"
+            class="HeaderLanguageSelector-module_languageSelector__5whey"
           >
             <div
-              class="HeaderLanguageSelector-module_languageNodes__lTe8p"
+              class="HeaderLanguageSelector-module_languageNodes__LXQ2h"
             >
               <button
                 aria-current="true"
-                class="HeaderLanguageSelector-module_item__3_I7N HeaderLanguageSelector-module_activeItem__15LKg"
+                class="HeaderLanguageSelector-module_item__1Q-m0 HeaderLanguageSelector-module_activeItem__KlpC1"
                 lang="fi"
                 type="button"
               >
@@ -71,7 +71,7 @@ exports[`Header matches snapshot 1`] = `
               </button>
               <button
                 aria-current="false"
-                class="HeaderLanguageSelector-module_item__3_I7N"
+                class="HeaderLanguageSelector-module_item__1Q-m0"
                 lang="sv"
                 type="button"
               >
@@ -81,7 +81,7 @@ exports[`Header matches snapshot 1`] = `
               </button>
               <button
                 aria-current="false"
-                class="HeaderLanguageSelector-module_item__3_I7N"
+                class="HeaderLanguageSelector-module_item__1Q-m0"
                 lang="en"
                 type="button"
               >
@@ -92,27 +92,27 @@ exports[`Header matches snapshot 1`] = `
             </div>
           </div>
           <div
-            class="HeaderActionBarItem-module_container__1uq2m HeaderActionBarItem-module_hasContent__YJfOU HeaderActionBarItem-module_hasSubItems__1LVkh"
+            class="HeaderActionBarItem-module_container__6F--R HeaderActionBarItem-module_hasContent__9gdAB HeaderActionBarItem-module_hasSubItems__4T1UJ"
             id="user-menu"
           >
             <button
               aria-controls="user-menu-dropdown"
               aria-expanded="false"
               aria-label="Avaa käyttäjän valikko"
-              class="HeaderActionBarItemButton-module_actionBarItemButton__2ALyH HeaderActionBarItem-module_icon__1Ug_k HeaderActionBarItemButton-module_hasSubItems__3wX3Y"
+              class="HeaderActionBarItemButton-module_actionBarItemButton__5WYgl HeaderActionBarItem-module_icon__ZgvEN HeaderActionBarItemButton-module_hasSubItems__Tcqx9"
               type="button"
             >
               <div
-                class="HeaderActionBarItemButton-module_buttonContent__3JeY0"
+                class="HeaderActionBarItemButton-module_buttonContent__XcysH"
               >
                 <span>
                   <span
-                    class="HeaderActionBarItemButton-module_actionBarItemButtonIcon__1_1Cg"
+                    class="HeaderActionBarItemButton-module_actionBarItemButtonIcon__J1HAc"
                   >
                     <svg
                       aria-hidden="true"
                       aria-label="user"
-                      class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+                      class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
                       role="img"
                       viewBox="0 0 24 24"
                       xmlns="http://www.w3.org/2000/svg"
@@ -126,7 +126,7 @@ exports[`Header matches snapshot 1`] = `
                     </svg>
                   </span>
                   <span
-                    class="HeaderActionBarItemButton-module_actionBarItemButtonLabel__12Iec"
+                    class="HeaderActionBarItemButton-module_actionBarItemButtonLabel__SVUhV"
                   >
                     John Doe
                   </span>
@@ -134,7 +134,7 @@ exports[`Header matches snapshot 1`] = `
                 <svg
                   aria-hidden="true"
                   aria-label="angle-down"
-                  class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+                  class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
                   role="img"
                   viewBox="0 0 24 24"
                   xmlns="http://www.w3.org/2000/svg"
@@ -149,25 +149,25 @@ exports[`Header matches snapshot 1`] = `
               </div>
             </button>
             <div
-              class="HeaderActionBarItem-module_dropdownWrapper__39cBw"
+              class="HeaderActionBarItem-module_dropdownWrapper__llvKa"
             >
               <div
-                class="HeaderActionBarItem-module_dropdown__3daDZ userMenuDropdown HeaderActionBarItem-module_hasContent__YJfOU HeaderActionBarItem-module_hasSubItems__1LVkh"
+                class="HeaderActionBarItem-module_dropdown__NGD0J userMenuDropdown HeaderActionBarItem-module_hasContent__9gdAB HeaderActionBarItem-module_hasSubItems__4T1UJ"
                 id="user-menu-dropdown"
               >
                 <ul>
                   <button
-                    class="Button-module_button__1msFE Button-module_supplementary__3YKiS dropdownButton"
+                    class="Button-module_button__P7hTI Button-module_supplementary__uEAdn dropdownButton"
                     type="button"
                   >
                     <div
                       aria-hidden="true"
-                      class="Button-module_icon__O-h7R"
+                      class="Button-module_icon__Di-Ga"
                     >
                       <svg
                         aria-hidden="true"
                         aria-label="user"
-                        class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+                        class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
                         role="img"
                         viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg"
@@ -185,17 +185,17 @@ exports[`Header matches snapshot 1`] = `
                     </span>
                   </button>
                   <button
-                    class="Button-module_button__1msFE Button-module_supplementary__3YKiS dropdownButton"
+                    class="Button-module_button__P7hTI Button-module_supplementary__uEAdn dropdownButton"
                     type="button"
                   >
                     <div
                       aria-hidden="true"
-                      class="Button-module_icon__O-h7R"
+                      class="Button-module_icon__Di-Ga"
                     >
                       <svg
                         aria-hidden="true"
                         aria-label="link-external"
-                        class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+                        class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
                         role="img"
                         viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg"
@@ -213,17 +213,17 @@ exports[`Header matches snapshot 1`] = `
                     </span>
                   </button>
                   <button
-                    class="Button-module_button__1msFE Button-module_supplementary__3YKiS dropdownButton"
+                    class="Button-module_button__P7hTI Button-module_supplementary__uEAdn dropdownButton"
                     type="button"
                   >
                     <div
                       aria-hidden="true"
-                      class="Button-module_icon__O-h7R"
+                      class="Button-module_icon__Di-Ga"
                     >
                       <svg
                         aria-hidden="true"
                         aria-label="signout"
-                        class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+                        class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
                         role="img"
                         viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg"
@@ -248,23 +248,23 @@ exports[`Header matches snapshot 1`] = `
       </div>
     </div>
     <div
-      class="HeaderNavigationMenu-module_headerNavigationMenuContainer__2nK9z"
+      class="HeaderNavigationMenu-module_headerNavigationMenuContainer__ZIb-h"
     >
       <nav
-        class="HeaderNavigationMenu-module_headerNavigationMenu__3G6-N"
+        class="HeaderNavigationMenu-module_headerNavigationMenu__YRpgY"
       >
         <ul
-          class="HeaderNavigationMenu-module_headerNavigationMenuList__3HIzx"
+          class="HeaderNavigationMenu-module_headerNavigationMenuList__eybgp"
         >
           <li>
             <span
-              class="HeaderNavigationMenu-module_headerNavigationMenuLinkContent__3zC2j"
+              class="HeaderNavigationMenu-module_headerNavigationMenuLinkContent__2SjZT"
             >
               <span
-                class="HeaderLink-module_navigationLinkWrapper__2jd7A"
+                class="HeaderLink-module_navigationLinkWrapper__20PDO"
               >
                 <a
-                  class="HeaderLink-module_headerLink__2i9-J HeaderNavigationMenu-module_headerNavigationMenuLink__H_ogS"
+                  class="HeaderLink-module_headerLink__tuR5f HeaderNavigationMenu-module_headerNavigationMenuLink__bjuzK"
                   data-discover="true"
                   href="/fi/cms-page/mika-kultus-2/"
                   id="cG9zdDo0MDk"
@@ -274,14 +274,14 @@ exports[`Header matches snapshot 1`] = `
                 <button
                   aria-expanded="false"
                   aria-label="Avaa alasvetovalikko."
-                  class="HeaderLinkDropdown-module_button__2xVuy HeaderLinkDropdown-module_depth-0__Xeyks"
+                  class="HeaderLinkDropdown-module_button__QB4IP HeaderLinkDropdown-module_depth-0__3vMEu"
                   data-testid="dropdown-button-0"
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
                     aria-label="angle-down"
-                    class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik HeaderLinkDropdown-module_chevron__1KsTd"
+                    class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo HeaderLinkDropdown-module_chevron__Xhgxx"
                     role="img"
                     viewBox="0 0 24 24"
                     xmlns="http://www.w3.org/2000/svg"
@@ -295,16 +295,16 @@ exports[`Header matches snapshot 1`] = `
                   </svg>
                 </button>
                 <ul
-                  class="HeaderLinkDropdown-module_dropdownMenu__3oeWC"
+                  class="HeaderLinkDropdown-module_dropdownMenu__3RVrF"
                   data-testid="dropdown-menu-0"
                   style="display: none;"
                 >
                   <li>
                     <span
-                      class="HeaderLink-module_navigationLinkWrapper__2jd7A"
+                      class="HeaderLink-module_navigationLinkWrapper__20PDO"
                     >
                       <a
-                        class="HeaderLink-module_headerLink__2i9-J HeaderLinkDropdown-module_dropdownLink__2UIF3"
+                        class="HeaderLink-module_headerLink__tuR5f HeaderLinkDropdown-module_dropdownLink__S7m8e"
                         data-discover="true"
                         href="/fi/cms-page/mika-kultus-2/katrin-testisivu/"
                         id="cG9zdDo0MTE"
@@ -319,13 +319,13 @@ exports[`Header matches snapshot 1`] = `
           </li>
           <li>
             <span
-              class="HeaderNavigationMenu-module_headerNavigationMenuLinkContent__3zC2j"
+              class="HeaderNavigationMenu-module_headerNavigationMenuLinkContent__2SjZT"
             >
               <span
-                class="HeaderLink-module_navigationLinkWrapper__2jd7A"
+                class="HeaderLink-module_navigationLinkWrapper__20PDO"
               >
                 <a
-                  class="HeaderLink-module_headerLink__2i9-J HeaderNavigationMenu-module_headerNavigationMenuLink__H_ogS"
+                  class="HeaderLink-module_headerLink__tuR5f HeaderNavigationMenu-module_headerNavigationMenuLink__bjuzK"
                   data-discover="true"
                   href="/fi/cms-page/kulttuurikasvatus/"
                   id="cG9zdDo0MTI"
@@ -335,14 +335,14 @@ exports[`Header matches snapshot 1`] = `
                 <button
                   aria-expanded="false"
                   aria-label="Avaa alasvetovalikko."
-                  class="HeaderLinkDropdown-module_button__2xVuy HeaderLinkDropdown-module_depth-0__Xeyks"
+                  class="HeaderLinkDropdown-module_button__QB4IP HeaderLinkDropdown-module_depth-0__3vMEu"
                   data-testid="dropdown-button-1"
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
                     aria-label="angle-down"
-                    class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik HeaderLinkDropdown-module_chevron__1KsTd"
+                    class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo HeaderLinkDropdown-module_chevron__Xhgxx"
                     role="img"
                     viewBox="0 0 24 24"
                     xmlns="http://www.w3.org/2000/svg"
@@ -356,16 +356,16 @@ exports[`Header matches snapshot 1`] = `
                   </svg>
                 </button>
                 <ul
-                  class="HeaderLinkDropdown-module_dropdownMenu__3oeWC"
+                  class="HeaderLinkDropdown-module_dropdownMenu__3RVrF"
                   data-testid="dropdown-menu-1"
                   style="display: none;"
                 >
                   <li>
                     <span
-                      class="HeaderLink-module_navigationLinkWrapper__2jd7A"
+                      class="HeaderLink-module_navigationLinkWrapper__20PDO"
                     >
                       <a
-                        class="HeaderLink-module_headerLink__2i9-J HeaderLinkDropdown-module_dropdownLink__2UIF3"
+                        class="HeaderLink-module_headerLink__tuR5f HeaderLinkDropdown-module_dropdownLink__S7m8e"
                         data-discover="true"
                         href="/fi/cms-page/kulttuurikasvatus/kulttuuripolulla-kulttuuria-kaikille/"
                         id="cG9zdDo0MTQ"
@@ -376,10 +376,10 @@ exports[`Header matches snapshot 1`] = `
                   </li>
                   <li>
                     <span
-                      class="HeaderLink-module_navigationLinkWrapper__2jd7A"
+                      class="HeaderLink-module_navigationLinkWrapper__20PDO"
                     >
                       <a
-                        class="HeaderLink-module_headerLink__2i9-J HeaderLinkDropdown-module_dropdownLink__2UIF3"
+                        class="HeaderLink-module_headerLink__tuR5f HeaderLinkDropdown-module_dropdownLink__S7m8e"
                         data-discover="true"
                         href="/fi/cms-page/kulttuurikasvatus/kulttuurikoordinaattori-olet-meille-tarkea/"
                         id="cG9zdDo0MTU"
@@ -390,10 +390,10 @@ exports[`Header matches snapshot 1`] = `
                   </li>
                   <li>
                     <span
-                      class="HeaderLink-module_navigationLinkWrapper__2jd7A"
+                      class="HeaderLink-module_navigationLinkWrapper__20PDO"
                     >
                       <a
-                        class="HeaderLink-module_headerLink__2i9-J HeaderLinkDropdown-module_dropdownLink__2UIF3"
+                        class="HeaderLink-module_headerLink__tuR5f HeaderLinkDropdown-module_dropdownLink__S7m8e"
                         data-discover="true"
                         href="/fi/cms-page/kulttuurikasvatus/kulttuurikasvatuksen-kasitteita/"
                         id="cG9zdDo0MTY"
@@ -408,13 +408,13 @@ exports[`Header matches snapshot 1`] = `
           </li>
           <li>
             <span
-              class="HeaderNavigationMenu-module_headerNavigationMenuLinkContent__3zC2j"
+              class="HeaderNavigationMenu-module_headerNavigationMenuLinkContent__2SjZT"
             >
               <span
-                class="HeaderLink-module_navigationLinkWrapper__2jd7A"
+                class="HeaderLink-module_navigationLinkWrapper__20PDO"
               >
                 <a
-                  class="HeaderLink-module_headerLink__2i9-J HeaderNavigationMenu-module_headerNavigationMenuLink__H_ogS"
+                  class="HeaderLink-module_headerLink__tuR5f HeaderNavigationMenu-module_headerNavigationMenuLink__bjuzK"
                   data-discover="true"
                   href="/fi/cms-page/oppimateriaalit-2/"
                   id="cG9zdDo0MTc"
@@ -424,14 +424,14 @@ exports[`Header matches snapshot 1`] = `
                 <button
                   aria-expanded="false"
                   aria-label="Avaa alasvetovalikko."
-                  class="HeaderLinkDropdown-module_button__2xVuy HeaderLinkDropdown-module_depth-0__Xeyks"
+                  class="HeaderLinkDropdown-module_button__QB4IP HeaderLinkDropdown-module_depth-0__3vMEu"
                   data-testid="dropdown-button-2"
                   type="button"
                 >
                   <svg
                     aria-hidden="true"
                     aria-label="angle-down"
-                    class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik HeaderLinkDropdown-module_chevron__1KsTd"
+                    class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo HeaderLinkDropdown-module_chevron__Xhgxx"
                     role="img"
                     viewBox="0 0 24 24"
                     xmlns="http://www.w3.org/2000/svg"
@@ -445,16 +445,16 @@ exports[`Header matches snapshot 1`] = `
                   </svg>
                 </button>
                 <ul
-                  class="HeaderLinkDropdown-module_dropdownMenu__3oeWC"
+                  class="HeaderLinkDropdown-module_dropdownMenu__3RVrF"
                   data-testid="dropdown-menu-2"
                   style="display: none;"
                 >
                   <li>
                     <span
-                      class="HeaderLink-module_navigationLinkWrapper__2jd7A"
+                      class="HeaderLink-module_navigationLinkWrapper__20PDO"
                     >
                       <a
-                        class="HeaderLink-module_headerLink__2i9-J HeaderLinkDropdown-module_dropdownLink__2UIF3"
+                        class="HeaderLink-module_headerLink__tuR5f HeaderLinkDropdown-module_dropdownLink__S7m8e"
                         data-discover="true"
                         href="/fi/cms-page/oppimateriaalit-2/ylakoulu-ja-toinen-aste/"
                         id="cG9zdDo0MTk"
@@ -465,10 +465,10 @@ exports[`Header matches snapshot 1`] = `
                   </li>
                   <li>
                     <span
-                      class="HeaderLink-module_navigationLinkWrapper__2jd7A"
+                      class="HeaderLink-module_navigationLinkWrapper__20PDO"
                     >
                       <a
-                        class="HeaderLink-module_headerLink__2i9-J HeaderLinkDropdown-module_dropdownLink__2UIF3"
+                        class="HeaderLink-module_headerLink__tuR5f HeaderLinkDropdown-module_dropdownLink__S7m8e"
                         data-discover="true"
                         href="/fi/cms-page/oppimateriaalit-2/varhaiskasvatus-ja-esiopetus/"
                         id="cG9zdDo0MjA"
@@ -479,10 +479,10 @@ exports[`Header matches snapshot 1`] = `
                   </li>
                   <li>
                     <span
-                      class="HeaderLink-module_navigationLinkWrapper__2jd7A"
+                      class="HeaderLink-module_navigationLinkWrapper__20PDO"
                     >
                       <a
-                        class="HeaderLink-module_headerLink__2i9-J HeaderLinkDropdown-module_dropdownLink__2UIF3"
+                        class="HeaderLink-module_headerLink__tuR5f HeaderLinkDropdown-module_dropdownLink__S7m8e"
                         data-discover="true"
                         href="/fi/cms-page/oppimateriaalit-2/alakoulu/"
                         id="cG9zdDo0MjE"
diff --git a/src/domain/app/layout/__tests__/__snapshots__/PageLayout.test.tsx.snap b/src/domain/app/layout/__tests__/__snapshots__/PageLayout.test.tsx.snap
index e94c7c8b4..74654d792 100644
--- a/src/domain/app/layout/__tests__/__snapshots__/PageLayout.test.tsx.snap
+++ b/src/domain/app/layout/__tests__/__snapshots__/PageLayout.test.tsx.snap
@@ -5,66 +5,66 @@ exports[`PageLayout matches snapshot 1`] = `
   class="pageLayout"
 >
   <header
-    class="hds-header Header-module_header__291GF"
+    class="hds-header Header-module_header__8wQWT"
     style="--header-max-width: var(--breakpoint-xl);"
   >
     <div
-      class="Header-module_headerBackgroundWrapper__KsFy2"
+      class="Header-module_headerBackgroundWrapper__Ajnmy"
     >
       <a
-        class="SkipLink-module_skipLink__1knzF"
+        class="SkipLink-module_skipLink__6PN15"
         href="#main-content"
       >
         <span
-          class="SkipLink-module_skipLinkLabel__21n5B"
+          class="SkipLink-module_skipLinkLabel__-13Ba"
         >
           Siirry sisältöön
         </span>
       </a>
       <div
-        class="HeaderActionBar-module_headerActionBarContainer__5tfj-"
+        class="HeaderActionBar-module_headerActionBarContainer__-cBwf"
       >
         <div
-          class="HeaderActionBar-module_headerActionBar__lPeGE"
+          class="HeaderActionBar-module_headerActionBar__k3ncT"
         >
           <a
             aria-label="Helsingin kaupunki"
-            class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_logo__2r2T0"
+            class="HeaderActionBar-module_titleAndLogoContainer__q4Awq HeaderActionBar-module_logo__tOoSx"
             href="#"
             role="link"
           >
             <span
-              class="HeaderActionBarLogo-module_logoWrapper__8NgfS"
+              class="HeaderActionBarLogo-module_logoWrapper__elkMB"
             >
               <img
                 alt="Helsinki"
-                class="Logo-module_logo__Y2mwP Logo-module_large__3Tjj3"
+                class="Logo-module_logo__uZrXp Logo-module_large__xo4CC"
                 src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="
               />
             </span>
           </a>
           <a
-            class="HeaderActionBar-module_titleAndLogoContainer__2LEAb HeaderActionBar-module_title__opzt9 HeaderActionBar-module_normal__3B4qi"
+            class="HeaderActionBar-module_titleAndLogoContainer__q4Awq HeaderActionBar-module_title__bLL5z HeaderActionBar-module_normal__kh4pL"
             href="#"
           >
             <span
-              class="HeaderActionBar-module_title__opzt9"
+              class="HeaderActionBar-module_title__bLL5z"
             >
               Kultus Admin
             </span>
           </a>
           <div
-            class="HeaderActionBar-module_headerActions__3lNnM"
+            class="HeaderActionBar-module_headerActions__H4unU"
           >
             <div
-              class="HeaderLanguageSelector-module_languageSelector__3d38B"
+              class="HeaderLanguageSelector-module_languageSelector__5whey"
             >
               <div
-                class="HeaderLanguageSelector-module_languageNodes__lTe8p"
+                class="HeaderLanguageSelector-module_languageNodes__LXQ2h"
               >
                 <button
                   aria-current="true"
-                  class="HeaderLanguageSelector-module_item__3_I7N HeaderLanguageSelector-module_activeItem__15LKg"
+                  class="HeaderLanguageSelector-module_item__1Q-m0 HeaderLanguageSelector-module_activeItem__KlpC1"
                   lang="fi"
                   type="button"
                 >
@@ -74,7 +74,7 @@ exports[`PageLayout matches snapshot 1`] = `
                 </button>
                 <button
                   aria-current="false"
-                  class="HeaderLanguageSelector-module_item__3_I7N"
+                  class="HeaderLanguageSelector-module_item__1Q-m0"
                   lang="sv"
                   type="button"
                 >
@@ -84,7 +84,7 @@ exports[`PageLayout matches snapshot 1`] = `
                 </button>
                 <button
                   aria-current="false"
-                  class="HeaderLanguageSelector-module_item__3_I7N"
+                  class="HeaderLanguageSelector-module_item__1Q-m0"
                   lang="en"
                   type="button"
                 >
@@ -95,27 +95,27 @@ exports[`PageLayout matches snapshot 1`] = `
               </div>
             </div>
             <div
-              class="HeaderActionBarItem-module_container__1uq2m HeaderActionBarItem-module_hasContent__YJfOU HeaderActionBarItem-module_hasSubItems__1LVkh"
+              class="HeaderActionBarItem-module_container__6F--R HeaderActionBarItem-module_hasContent__9gdAB HeaderActionBarItem-module_hasSubItems__4T1UJ"
               id="user-menu"
             >
               <button
                 aria-controls="user-menu-dropdown"
                 aria-expanded="false"
                 aria-label="Avaa käyttäjän valikko"
-                class="HeaderActionBarItemButton-module_actionBarItemButton__2ALyH HeaderActionBarItem-module_icon__1Ug_k HeaderActionBarItemButton-module_hasSubItems__3wX3Y"
+                class="HeaderActionBarItemButton-module_actionBarItemButton__5WYgl HeaderActionBarItem-module_icon__ZgvEN HeaderActionBarItemButton-module_hasSubItems__Tcqx9"
                 type="button"
               >
                 <div
-                  class="HeaderActionBarItemButton-module_buttonContent__3JeY0"
+                  class="HeaderActionBarItemButton-module_buttonContent__XcysH"
                 >
                   <span>
                     <span
-                      class="HeaderActionBarItemButton-module_actionBarItemButtonIcon__1_1Cg"
+                      class="HeaderActionBarItemButton-module_actionBarItemButtonIcon__J1HAc"
                     >
                       <svg
                         aria-hidden="true"
                         aria-label="user"
-                        class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+                        class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
                         role="img"
                         viewBox="0 0 24 24"
                         xmlns="http://www.w3.org/2000/svg"
@@ -129,7 +129,7 @@ exports[`PageLayout matches snapshot 1`] = `
                       </svg>
                     </span>
                     <span
-                      class="HeaderActionBarItemButton-module_actionBarItemButtonLabel__12Iec"
+                      class="HeaderActionBarItemButton-module_actionBarItemButtonLabel__SVUhV"
                     >
                       John Doe
                     </span>
@@ -137,7 +137,7 @@ exports[`PageLayout matches snapshot 1`] = `
                   <svg
                     aria-hidden="true"
                     aria-label="angle-down"
-                    class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+                    class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
                     role="img"
                     viewBox="0 0 24 24"
                     xmlns="http://www.w3.org/2000/svg"
@@ -152,25 +152,25 @@ exports[`PageLayout matches snapshot 1`] = `
                 </div>
               </button>
               <div
-                class="HeaderActionBarItem-module_dropdownWrapper__39cBw"
+                class="HeaderActionBarItem-module_dropdownWrapper__llvKa"
               >
                 <div
-                  class="HeaderActionBarItem-module_dropdown__3daDZ userMenuDropdown HeaderActionBarItem-module_hasContent__YJfOU HeaderActionBarItem-module_hasSubItems__1LVkh"
+                  class="HeaderActionBarItem-module_dropdown__NGD0J userMenuDropdown HeaderActionBarItem-module_hasContent__9gdAB HeaderActionBarItem-module_hasSubItems__4T1UJ"
                   id="user-menu-dropdown"
                 >
                   <ul>
                     <button
-                      class="Button-module_button__1msFE Button-module_supplementary__3YKiS dropdownButton"
+                      class="Button-module_button__P7hTI Button-module_supplementary__uEAdn dropdownButton"
                       type="button"
                     >
                       <div
                         aria-hidden="true"
-                        class="Button-module_icon__O-h7R"
+                        class="Button-module_icon__Di-Ga"
                       >
                         <svg
                           aria-hidden="true"
                           aria-label="user"
-                          class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+                          class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
                           role="img"
                           viewBox="0 0 24 24"
                           xmlns="http://www.w3.org/2000/svg"
@@ -188,17 +188,17 @@ exports[`PageLayout matches snapshot 1`] = `
                       </span>
                     </button>
                     <button
-                      class="Button-module_button__1msFE Button-module_supplementary__3YKiS dropdownButton"
+                      class="Button-module_button__P7hTI Button-module_supplementary__uEAdn dropdownButton"
                       type="button"
                     >
                       <div
                         aria-hidden="true"
-                        class="Button-module_icon__O-h7R"
+                        class="Button-module_icon__Di-Ga"
                       >
                         <svg
                           aria-hidden="true"
                           aria-label="link-external"
-                          class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+                          class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
                           role="img"
                           viewBox="0 0 24 24"
                           xmlns="http://www.w3.org/2000/svg"
@@ -216,17 +216,17 @@ exports[`PageLayout matches snapshot 1`] = `
                       </span>
                     </button>
                     <button
-                      class="Button-module_button__1msFE Button-module_supplementary__3YKiS dropdownButton"
+                      class="Button-module_button__P7hTI Button-module_supplementary__uEAdn dropdownButton"
                       type="button"
                     >
                       <div
                         aria-hidden="true"
-                        class="Button-module_icon__O-h7R"
+                        class="Button-module_icon__Di-Ga"
                       >
                         <svg
                           aria-hidden="true"
                           aria-label="signout"
-                          class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+                          class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
                           role="img"
                           viewBox="0 0 24 24"
                           xmlns="http://www.w3.org/2000/svg"
@@ -251,23 +251,23 @@ exports[`PageLayout matches snapshot 1`] = `
         </div>
       </div>
       <div
-        class="HeaderNavigationMenu-module_headerNavigationMenuContainer__2nK9z"
+        class="HeaderNavigationMenu-module_headerNavigationMenuContainer__ZIb-h"
       >
         <nav
-          class="HeaderNavigationMenu-module_headerNavigationMenu__3G6-N"
+          class="HeaderNavigationMenu-module_headerNavigationMenu__YRpgY"
         >
           <ul
-            class="HeaderNavigationMenu-module_headerNavigationMenuList__3HIzx"
+            class="HeaderNavigationMenu-module_headerNavigationMenuList__eybgp"
           >
             <li>
               <span
-                class="HeaderNavigationMenu-module_headerNavigationMenuLinkContent__3zC2j"
+                class="HeaderNavigationMenu-module_headerNavigationMenuLinkContent__2SjZT"
               >
                 <span
-                  class="HeaderLink-module_navigationLinkWrapper__2jd7A"
+                  class="HeaderLink-module_navigationLinkWrapper__20PDO"
                 >
                   <a
-                    class="HeaderLink-module_headerLink__2i9-J HeaderNavigationMenu-module_headerNavigationMenuLink__H_ogS"
+                    class="HeaderLink-module_headerLink__tuR5f HeaderNavigationMenu-module_headerNavigationMenuLink__bjuzK"
                     data-discover="true"
                     href="/fi/cms-page/mika-kultus-2/"
                     id="cG9zdDo0MDk"
@@ -277,14 +277,14 @@ exports[`PageLayout matches snapshot 1`] = `
                   <button
                     aria-expanded="false"
                     aria-label="Avaa alasvetovalikko."
-                    class="HeaderLinkDropdown-module_button__2xVuy HeaderLinkDropdown-module_depth-0__Xeyks"
+                    class="HeaderLinkDropdown-module_button__QB4IP HeaderLinkDropdown-module_depth-0__3vMEu"
                     data-testid="dropdown-button-0"
                     type="button"
                   >
                     <svg
                       aria-hidden="true"
                       aria-label="angle-down"
-                      class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik HeaderLinkDropdown-module_chevron__1KsTd"
+                      class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo HeaderLinkDropdown-module_chevron__Xhgxx"
                       role="img"
                       viewBox="0 0 24 24"
                       xmlns="http://www.w3.org/2000/svg"
@@ -298,16 +298,16 @@ exports[`PageLayout matches snapshot 1`] = `
                     </svg>
                   </button>
                   <ul
-                    class="HeaderLinkDropdown-module_dropdownMenu__3oeWC"
+                    class="HeaderLinkDropdown-module_dropdownMenu__3RVrF"
                     data-testid="dropdown-menu-0"
                     style="display: none;"
                   >
                     <li>
                       <span
-                        class="HeaderLink-module_navigationLinkWrapper__2jd7A"
+                        class="HeaderLink-module_navigationLinkWrapper__20PDO"
                       >
                         <a
-                          class="HeaderLink-module_headerLink__2i9-J HeaderLinkDropdown-module_dropdownLink__2UIF3"
+                          class="HeaderLink-module_headerLink__tuR5f HeaderLinkDropdown-module_dropdownLink__S7m8e"
                           data-discover="true"
                           href="/fi/cms-page/mika-kultus-2/katrin-testisivu/"
                           id="cG9zdDo0MTE"
@@ -322,13 +322,13 @@ exports[`PageLayout matches snapshot 1`] = `
             </li>
             <li>
               <span
-                class="HeaderNavigationMenu-module_headerNavigationMenuLinkContent__3zC2j"
+                class="HeaderNavigationMenu-module_headerNavigationMenuLinkContent__2SjZT"
               >
                 <span
-                  class="HeaderLink-module_navigationLinkWrapper__2jd7A"
+                  class="HeaderLink-module_navigationLinkWrapper__20PDO"
                 >
                   <a
-                    class="HeaderLink-module_headerLink__2i9-J HeaderNavigationMenu-module_headerNavigationMenuLink__H_ogS"
+                    class="HeaderLink-module_headerLink__tuR5f HeaderNavigationMenu-module_headerNavigationMenuLink__bjuzK"
                     data-discover="true"
                     href="/fi/cms-page/kulttuurikasvatus/"
                     id="cG9zdDo0MTI"
@@ -338,14 +338,14 @@ exports[`PageLayout matches snapshot 1`] = `
                   <button
                     aria-expanded="false"
                     aria-label="Avaa alasvetovalikko."
-                    class="HeaderLinkDropdown-module_button__2xVuy HeaderLinkDropdown-module_depth-0__Xeyks"
+                    class="HeaderLinkDropdown-module_button__QB4IP HeaderLinkDropdown-module_depth-0__3vMEu"
                     data-testid="dropdown-button-1"
                     type="button"
                   >
                     <svg
                       aria-hidden="true"
                       aria-label="angle-down"
-                      class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik HeaderLinkDropdown-module_chevron__1KsTd"
+                      class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo HeaderLinkDropdown-module_chevron__Xhgxx"
                       role="img"
                       viewBox="0 0 24 24"
                       xmlns="http://www.w3.org/2000/svg"
@@ -359,16 +359,16 @@ exports[`PageLayout matches snapshot 1`] = `
                     </svg>
                   </button>
                   <ul
-                    class="HeaderLinkDropdown-module_dropdownMenu__3oeWC"
+                    class="HeaderLinkDropdown-module_dropdownMenu__3RVrF"
                     data-testid="dropdown-menu-1"
                     style="display: none;"
                   >
                     <li>
                       <span
-                        class="HeaderLink-module_navigationLinkWrapper__2jd7A"
+                        class="HeaderLink-module_navigationLinkWrapper__20PDO"
                       >
                         <a
-                          class="HeaderLink-module_headerLink__2i9-J HeaderLinkDropdown-module_dropdownLink__2UIF3"
+                          class="HeaderLink-module_headerLink__tuR5f HeaderLinkDropdown-module_dropdownLink__S7m8e"
                           data-discover="true"
                           href="/fi/cms-page/kulttuurikasvatus/kulttuuripolulla-kulttuuria-kaikille/"
                           id="cG9zdDo0MTQ"
@@ -379,10 +379,10 @@ exports[`PageLayout matches snapshot 1`] = `
                     </li>
                     <li>
                       <span
-                        class="HeaderLink-module_navigationLinkWrapper__2jd7A"
+                        class="HeaderLink-module_navigationLinkWrapper__20PDO"
                       >
                         <a
-                          class="HeaderLink-module_headerLink__2i9-J HeaderLinkDropdown-module_dropdownLink__2UIF3"
+                          class="HeaderLink-module_headerLink__tuR5f HeaderLinkDropdown-module_dropdownLink__S7m8e"
                           data-discover="true"
                           href="/fi/cms-page/kulttuurikasvatus/kulttuurikoordinaattori-olet-meille-tarkea/"
                           id="cG9zdDo0MTU"
@@ -393,10 +393,10 @@ exports[`PageLayout matches snapshot 1`] = `
                     </li>
                     <li>
                       <span
-                        class="HeaderLink-module_navigationLinkWrapper__2jd7A"
+                        class="HeaderLink-module_navigationLinkWrapper__20PDO"
                       >
                         <a
-                          class="HeaderLink-module_headerLink__2i9-J HeaderLinkDropdown-module_dropdownLink__2UIF3"
+                          class="HeaderLink-module_headerLink__tuR5f HeaderLinkDropdown-module_dropdownLink__S7m8e"
                           data-discover="true"
                           href="/fi/cms-page/kulttuurikasvatus/kulttuurikasvatuksen-kasitteita/"
                           id="cG9zdDo0MTY"
@@ -411,13 +411,13 @@ exports[`PageLayout matches snapshot 1`] = `
             </li>
             <li>
               <span
-                class="HeaderNavigationMenu-module_headerNavigationMenuLinkContent__3zC2j"
+                class="HeaderNavigationMenu-module_headerNavigationMenuLinkContent__2SjZT"
               >
                 <span
-                  class="HeaderLink-module_navigationLinkWrapper__2jd7A"
+                  class="HeaderLink-module_navigationLinkWrapper__20PDO"
                 >
                   <a
-                    class="HeaderLink-module_headerLink__2i9-J HeaderNavigationMenu-module_headerNavigationMenuLink__H_ogS"
+                    class="HeaderLink-module_headerLink__tuR5f HeaderNavigationMenu-module_headerNavigationMenuLink__bjuzK"
                     data-discover="true"
                     href="/fi/cms-page/oppimateriaalit-2/"
                     id="cG9zdDo0MTc"
@@ -427,14 +427,14 @@ exports[`PageLayout matches snapshot 1`] = `
                   <button
                     aria-expanded="false"
                     aria-label="Avaa alasvetovalikko."
-                    class="HeaderLinkDropdown-module_button__2xVuy HeaderLinkDropdown-module_depth-0__Xeyks"
+                    class="HeaderLinkDropdown-module_button__QB4IP HeaderLinkDropdown-module_depth-0__3vMEu"
                     data-testid="dropdown-button-2"
                     type="button"
                   >
                     <svg
                       aria-hidden="true"
                       aria-label="angle-down"
-                      class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik HeaderLinkDropdown-module_chevron__1KsTd"
+                      class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo HeaderLinkDropdown-module_chevron__Xhgxx"
                       role="img"
                       viewBox="0 0 24 24"
                       xmlns="http://www.w3.org/2000/svg"
@@ -448,16 +448,16 @@ exports[`PageLayout matches snapshot 1`] = `
                     </svg>
                   </button>
                   <ul
-                    class="HeaderLinkDropdown-module_dropdownMenu__3oeWC"
+                    class="HeaderLinkDropdown-module_dropdownMenu__3RVrF"
                     data-testid="dropdown-menu-2"
                     style="display: none;"
                   >
                     <li>
                       <span
-                        class="HeaderLink-module_navigationLinkWrapper__2jd7A"
+                        class="HeaderLink-module_navigationLinkWrapper__20PDO"
                       >
                         <a
-                          class="HeaderLink-module_headerLink__2i9-J HeaderLinkDropdown-module_dropdownLink__2UIF3"
+                          class="HeaderLink-module_headerLink__tuR5f HeaderLinkDropdown-module_dropdownLink__S7m8e"
                           data-discover="true"
                           href="/fi/cms-page/oppimateriaalit-2/ylakoulu-ja-toinen-aste/"
                           id="cG9zdDo0MTk"
@@ -468,10 +468,10 @@ exports[`PageLayout matches snapshot 1`] = `
                     </li>
                     <li>
                       <span
-                        class="HeaderLink-module_navigationLinkWrapper__2jd7A"
+                        class="HeaderLink-module_navigationLinkWrapper__20PDO"
                       >
                         <a
-                          class="HeaderLink-module_headerLink__2i9-J HeaderLinkDropdown-module_dropdownLink__2UIF3"
+                          class="HeaderLink-module_headerLink__tuR5f HeaderLinkDropdown-module_dropdownLink__S7m8e"
                           data-discover="true"
                           href="/fi/cms-page/oppimateriaalit-2/varhaiskasvatus-ja-esiopetus/"
                           id="cG9zdDo0MjA"
@@ -482,10 +482,10 @@ exports[`PageLayout matches snapshot 1`] = `
                     </li>
                     <li>
                       <span
-                        class="HeaderLink-module_navigationLinkWrapper__2jd7A"
+                        class="HeaderLink-module_navigationLinkWrapper__20PDO"
                       >
                         <a
-                          class="HeaderLink-module_headerLink__2i9-J HeaderLinkDropdown-module_dropdownLink__2UIF3"
+                          class="HeaderLink-module_headerLink__tuR5f HeaderLinkDropdown-module_dropdownLink__S7m8e"
                           data-discover="true"
                           href="/fi/cms-page/oppimateriaalit-2/alakoulu/"
                           id="cG9zdDo0MjE"
@@ -519,7 +519,7 @@ exports[`PageLayout matches snapshot 1`] = `
           style="height: 300px;"
         />
         <div
-          class="Koros-module_koros__1r3rg koros"
+          class="Koros-module_koros__NeX-o koros"
         >
           <svg
             aria-hidden="true"
@@ -581,10 +581,10 @@ exports[`PageLayout matches snapshot 1`] = `
     </div>
   </div>
   <footer
-    class="Footer-module_footer__1aD3T footer"
+    class="Footer-module_footer__7u3nd footer"
   >
     <div
-      class="Koros-module_koros__1r3rg Footer-module_koros__Orx_W"
+      class="Koros-module_koros__NeX-o Footer-module_koros__wtlaj"
       style="height: 15px;"
     >
       <svg
@@ -617,38 +617,38 @@ exports[`PageLayout matches snapshot 1`] = `
       </svg>
     </div>
     <div
-      class="Footer-module_footerContent__3MC14"
+      class="Footer-module_footerContent__rkiWs"
     >
       <div
-        class="Footer-module_footerSections__2nrr8"
+        class="Footer-module_footerSections__CWRc6"
       >
         <h2
-          class="Footer-module_title__269y7"
+          class="Footer-module_title__xabVz"
         >
           Kultus Admin
         </h2>
         <div
-          class="FooterBase-module_base__2f0eu footerBase"
+          class="FooterBase-module_base__ndakn footerBase"
         >
           <hr
             aria-hidden="true"
-            class="FooterBase-module_divider__3sz3q"
+            class="FooterBase-module_divider__scofd"
           />
           <div
-            class="FooterBase-module_logoWrapper__3BI7d"
+            class="FooterBase-module_logoWrapper__lheeb"
           >
             <a
-              class="Link-module_link__TeBQo link_hds-link__5Oxo- FooterLink-module_item__3Ig3B"
+              class="Link-module_link__8XuKE link_hds-link__MZCD0 FooterLink-module_item__rvkky"
             >
               <img
                 alt="Helsingin kaupunki"
-                class="Logo-module_logo__Y2mwP Logo-module_medium__1zyWm"
+                class="Logo-module_logo__uZrXp Logo-module_medium__Kpggg"
                 src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNzggMzYiIHRpdGxlPSJIZWxzaW5naW4ga2F1cHVua2kiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoCiAgICAgICAgZD0iTTc1Ljc1MyAyLjI1MXYyMC43YzAgMy45NS0zLjI3NSA3LjE3OC03LjMxIDcuMTc4aC0yMi4yNmMtMi42NzQgMC01LjIwNS45Ni03LjE4MyAyLjczOWExMC43NDkgMTAuNzQ5IDAgMDAtNy4xODMtMi43NEg5LjUwOWMtNC4wMDMgMC03LjI0Ny0zLjIxLTcuMjQ3LTcuMTc3VjIuMjVoNzMuNDkxek00MC4xODcgMzQuODM1YTguNDcgOC40NyAwIDAxNi4wMTItMi40NzFoMjIuMjQ1YzUuMjY4IDAgOS41NTYtNC4yMTkgOS41NTYtOS40MTNWMEgwdjIyLjkzNWMwIDUuMTk0IDQuMjU2IDkuNDEzIDkuNTA5IDkuNDEzaDIyLjMwOGMyLjI2MyAwIDQuMzk4Ljg4MiA2LjAxMiAyLjQ3MUwzOS4wMTYgMzZsMS4xNy0xLjE2NXoiCiAgICAgICAgZmlsbD0iY3VycmVudENvbG9yIiAvPgogICAgPHBhdGgKICAgICAgICBkPSJNNjcuNTIyIDExLjY3NmMwIC42ODEtLjU1NiAxLjE3Ny0xLjI1NSAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43LS4wMyAxLjI1NS40NjUgMS4yNTUgMS4xNzh6bS0yLjM1MiA5LjYyMmgyLjE3OHYtNy41NDZINjUuMTd2Ny41NDZ6bS0zLjkwOS00LjU1NmwyLjg0NSA0LjU1NmgtMi4zNjhsLTEuOTA3LTMuMDIyLTEuMDMzIDEuMjcxdjEuNzVoLTIuMTYxVjEwLjQ1M2gyLjE2djUuMDA0YzAgLjkzLS4xMSAxLjg2LS4xMSAxLjg2aC4wNDdzLjUwOS0uODIxLjkzOC0xLjQxbDEuNjUzLTIuMTU0aDIuNTQybC0yLjYwNiAyLjk5em0tNi44MTctLjI3OGMwLTEuODc1LS45MzgtMi44OTgtMi40MzItMi44OTgtMS4yNzEgMC0xLjkzOS43MjgtMi4zMiAxLjQyNmgtLjA0OGwuMTEyLTEuMjRoLTIuMTYydjcuNTQ2aDIuMTYyVjE2LjgyYzAtLjg2OC41MjQtMS40NzIgMS4zMzUtMS40NzIuODEgMCAxLjE2LjUyNyAxLjE2IDEuNTM0djQuNDE2aDIuMTc3bC4wMTYtNC44MzR6bS04LjkzMS00Ljc4OGMwIC42ODEtLjU1NyAxLjE3Ny0xLjI1NiAxLjE3Ny0uNyAwLTEuMjU1LS40OTYtMS4yNTUtMS4xNzcgMC0uNjgyLjU1Ni0xLjE3OCAxLjI1NS0xLjE3OC43MTUtLjAzIDEuMjU2LjQ2NSAxLjI1NiAxLjE3OHptLTIuMzUyIDkuNjIyaDIuMTc3di03LjU0Nkg0My4xNnY3LjU0NnptLTMuNzUtMi4xMDdjMC0uNjA1LS44NTktLjcyOS0xLjg2LTEuMDA4LTEuMTYtLjI5NC0yLjYyMi0uODY3LTIuNjIyLTIuMzA4IDAtMS40MjYgMS4zOTgtMi4zMjQgMy4wNTEtMi4zMjQgMS41NDEgMCAyLjk1Ni43MTIgMy41NDQgMS43MmwtMS44NiAxLjAyMmMtLjE5LS42NjYtLjc2Mi0xLjE5My0xLjYyLTEuMTkzLS41NTcgMC0xLjAxOC4yMzItMS4wMTguNjgyIDAgLjU3MyAxLjAxOC42MzUgMi4xNjIuOTkxIDEuMjA4LjM3MiAyLjMyLjkxNSAyLjMyIDIuMjk0IDAgMS41MTgtMS40NDYgMi40MTctMy4xMTUgMi40MTctMS44MTEgMC0zLjI0Mi0uNzQ0LTMuODc3LTEuOTUybDEuODktMS4wMzljLjI0LjgyMi45MjIgMS40NDEgMS45NTUgMS40NDEuNjIgMCAxLjA1LS4yNDggMS4wNS0uNzQzem0tNi44ODItOC42NzdoLTIuMTc3djguNjkyYzAgLjc3NS4xNzUgMS4zNDguNTA5IDEuNzA1LjM1LjM1Ni44OS41MjYgMS42MzYuNTI2LjI1NSAwIC41MjUtLjAzLjc4LS4wNzcuMjctLjA2Mi40NzYtLjE0LjY1LS4yMzNsLjE5MS0xLjQyNWEyLjA3IDIuMDcgMCAwMS0uNDYuMTI0Yy0uMTI4LjAzLS4yODcuMDMtLjQ2MS4wMy0uMjg2IDAtLjQxNC0uMDc3LS41MDktLjIxNi0uMTExLS4xNC0uMTU5LS4zODctLjE1OS0uNzQ0di04LjM4MnptLTcuMjQ2IDQuNTdjLS43OTUgMC0xLjQ0Ni41NTgtMS42MjEgMS41ODFoMy4wNWMuMDE3LS44OTktLjU4Ny0xLjU4LTEuNDMtMS41OHptMy4zNTMgMy4wMDdIMjMuNjNjLjA5NSAxLjIyNC43OTQgMS44MjggMS43IDEuODI4LjgxIDAgMS4zNjctLjUyNyAxLjQ5NC0xLjI0bDEuODI4IDEuMDA3Yy0uNTQuOTYxLTEuNyAxLjc5OC0zLjMyMiAxLjc5OC0yLjE2IDAtMy43NS0xLjQ3Mi0zLjc1LTMuOTUxIDAtMi40NjQgMS42Mi0zLjk1MSAzLjcwMy0zLjk1MSAyLjA4MSAwIDMuNDY0IDEuNDQgMy40NjQgMy40ODYtLjAxNi42MDQtLjExMSAxLjAyMy0uMTExIDEuMDIzem0tMTEuMDc3IDMuMjA3aDIuMjU3VjEwLjkxNmgtMi4yNTd2NC4xMDdoLTQuMjQzdi00LjA5MUgxMS4wNnYxMC4zNjZoMi4yNTZ2LTQuMjkyaDQuMjQzdjQuMjkyeiIKICAgICAgICBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg=="
               />
             </a>
           </div>
           <div
-            class="FooterBase-module_copyright__2iiev"
+            class="FooterBase-module_copyright__-sKpP"
           >
             <span>
               © 
@@ -657,7 +657,7 @@ exports[`PageLayout matches snapshot 1`] = `
               2026
             </span>
             <span
-              class="FooterBase-module_copyrightDot__2AfS6"
+              class="FooterBase-module_copyrightDot__qc85L"
             >
               •
             </span>
@@ -666,19 +666,19 @@ exports[`PageLayout matches snapshot 1`] = `
             </span>
           </div>
           <div
-            class="FooterBase-module_baseActions__1hCiR"
+            class="FooterBase-module_baseActions__3C-J5"
           >
             <div
-              class="FooterBase-module_links__3lfLo"
+              class="FooterBase-module_links__7i-pZ"
             >
               <span
                 aria-hidden="true"
-                class="FooterBase-module_separator__cwQTe"
+                class="FooterBase-module_separator__RoVb3"
               >
                 |
               </span>
               <a
-                class="Link-module_link__TeBQo link_hds-link__5Oxo- FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj"
+                class="Link-module_link__8XuKE link_hds-link__MZCD0 FooterLink-module_item__rvkky FooterLink-module_base__0Qd2m"
                 href="https://kultus.hel.fi/fi"
               >
                 <span>
@@ -687,12 +687,12 @@ exports[`PageLayout matches snapshot 1`] = `
               </a>
               <span
                 aria-hidden="true"
-                class="FooterBase-module_separator__cwQTe"
+                class="FooterBase-module_separator__RoVb3"
               >
                 |
               </span>
               <a
-                class="Link-module_link__TeBQo link_hds-link__5Oxo- FooterLink-module_item__3Ig3B FooterLink-module_base__bzKoj"
+                class="Link-module_link__8XuKE link_hds-link__MZCD0 FooterLink-module_item__rvkky FooterLink-module_base__0Qd2m"
                 href="https://hkih.production.geniem.io/uploads/sites/5/2022/11/739f5edc-rekisteriseloste-kultus.fi_.pdf"
               >
                 <span>
@@ -701,7 +701,7 @@ exports[`PageLayout matches snapshot 1`] = `
               </a>
             </div>
             <button
-              class="FooterBase-module_backToTopButton__hXTHm"
+              class="FooterBase-module_backToTopButton__YzPvo"
               role="link"
               type="button"
             >
@@ -709,7 +709,7 @@ exports[`PageLayout matches snapshot 1`] = `
               <svg
                 aria-hidden="true"
                 aria-label="arrow-up"
-                class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+                class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
                 role="img"
                 viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/src/domain/app/routes/__tests__/AppRoutes.test.tsx b/src/domain/app/routes/__tests__/AppRoutes.test.tsx
index 8dd5e82ec..d3e0640fb 100644
--- a/src/domain/app/routes/__tests__/AppRoutes.test.tsx
+++ b/src/domain/app/routes/__tests__/AppRoutes.test.tsx
@@ -1,8 +1,8 @@
+import { MenuDocument } from '@city-of-helsinki/react-helsinki-headless-cms/apollo';
 import { act, waitFor } from '@testing-library/react';
 import i18n from 'i18next';
 import { graphql, HttpResponse } from 'msw';
 import * as React from 'react';
-import { MenuDocument } from 'react-helsinki-headless-cms/apollo';
 
 import { MyProfileDocument } from '../../../../generated/graphql';
 import {
diff --git a/src/domain/auth/KultusAdminHDSLoginCallbackHandler.tsx b/src/domain/auth/KultusAdminHDSLoginCallbackHandler.tsx
index 399776f97..bbff97524 100644
--- a/src/domain/auth/KultusAdminHDSLoginCallbackHandler.tsx
+++ b/src/domain/auth/KultusAdminHDSLoginCallbackHandler.tsx
@@ -8,10 +8,12 @@ import {
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router';
-import { toast } from 'react-toastify';
+
+import { useNotificationsContext } from '../../common/components/notificationsContext/hooks/useNotificationsContext';
 
 function KultusAdminHDSLoginCallbackHandler() {
   const { t } = useTranslation();
+  const { addNotification } = useNotificationsContext();
   const navigate = useNavigate();
   const [lastSignal] = useApiTokensClientTracking();
   const [nextUrl, setNextUrl] = useState('');
@@ -54,7 +56,10 @@ function KultusAdminHDSLoginCallbackHandler() {
     }
     Sentry.captureException(error);
     const shortMessage = t('authentication.errorMessage');
-    toast.error(shortMessage);
+    addNotification({
+      type: 'error',
+      label: shortMessage,
+    });
   };
 
   return (
diff --git a/src/domain/auth/constants.ts b/src/domain/auth/constants.ts
index 6365a22a0..496d488e5 100644
--- a/src/domain/auth/constants.ts
+++ b/src/domain/auth/constants.ts
@@ -2,15 +2,6 @@ import { LoginProviderProps } from 'hds-react';
 
 import AppConfig from '../app/AppConfig';
 
-// todo: delete this when new login implemented
-export const API_TOKEN_ACTIONS = {
-  FETCH_TOKEN_ERROR: 'FETCH_TOKEN_ERROR',
-  FETCH_TOKEN_SUCCESS: 'FETCH_TOKEN_SUCCESS',
-  RESET_API_TOKEN_DATA: 'RESET_API_TOKEN_DATA',
-  START_FETCHING_TOKEN: 'START_FETCHING_TOKEN',
-  TOKEN_FETCHED: 'TOKEN_FETCHED',
-};
-
 const providerPropertiesBase: LoginProviderProps = {
   userManagerSettings: {
     authority: AppConfig.oidcAuthority,
diff --git a/src/domain/auth/useAuthorization.ts b/src/domain/auth/useAuthorization.ts
deleted file mode 100644
index aad78661c..000000000
--- a/src/domain/auth/useAuthorization.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from 'react';
-
-export type Authorization = (() => Promise<boolean>) | boolean;
-
-export function useAuthorization(
-  authorization: Authorization
-): [boolean, boolean] {
-  const [isAuthorized, setAuthorized] = React.useState<boolean | null>(null);
-  const [isLoading, setLoading] = React.useState<boolean>(true);
-
-  React.useEffect(() => {
-    let ignore = false;
-
-    if (typeof authorization === 'function') {
-      authorization()
-        .then((result) => {
-          if (!ignore) {
-            setAuthorized(result);
-          }
-        })
-        .finally(() => {
-          if (!ignore) {
-            setLoading(false);
-          }
-        });
-    }
-
-    return () => {
-      ignore = true;
-    };
-  }, [authorization]);
-
-  if (typeof authorization === 'boolean') {
-    return [false, authorization];
-  }
-
-  return [isLoading, Boolean(isAuthorized)];
-}
diff --git a/src/domain/auth/useIsAuthorizationReady.ts b/src/domain/auth/useIsAuthorizationReady.ts
deleted file mode 100644
index f88c1810f..000000000
--- a/src/domain/auth/useIsAuthorizationReady.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import {
-  useApiTokensClient,
-  useApiTokensClientTracking,
-  useOidcClient,
-} from 'hds-react';
-
-/**
- * Checks whether the OIDC and the API tokens clients have finished authenticating and
- * fetching the API tokens.
- */
-export function useIsAuthorizationReady() {
-  const { isAuthenticated, isRenewing: isRenewingSession } = useOidcClient();
-  const { getTokens, isRenewing: isRenewingApiToken } = useApiTokensClient();
-
-  // The isRenewing* -properties are not updating the hook!
-  // All the signals needs to be tracked,
-  // because othrerwise the initial loading is not returned properly
-  // and the profile provider will keep spinning forever.
-
-  // todo: remove with new login component?
-  useApiTokensClientTracking();
-
-  const isLoggedIn = isAuthenticated();
-  const hasTokens = Boolean(getTokens());
-  const loading = isRenewingSession() || isRenewingApiToken();
-  const isReady = isLoggedIn && hasTokens;
-
-  return [isReady, loading];
-}
diff --git a/src/domain/enrolment/EditEnrolmentPage.tsx b/src/domain/enrolment/EditEnrolmentPage.tsx
index f0cc3e56f..b4b0aefbb 100644
--- a/src/domain/enrolment/EditEnrolmentPage.tsx
+++ b/src/domain/enrolment/EditEnrolmentPage.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useParams } from 'react-router';
-import { toast } from 'react-toastify';
 
 import styles from './editEnrolmentPage.module.scss';
 import EnrolmentForm, {
@@ -11,6 +10,7 @@ import { EnrolmentFormFields } from './types';
 import { getGroupSizeBoundaries, getUpdateEnrolmentPayload } from './utils';
 import BackButton from '../../common/components/backButton/BackButton';
 import LoadingSpinner from '../../common/components/loadingSpinner/LoadingSpinner';
+import { useNotificationsContext } from '../../common/components/notificationsContext/hooks/useNotificationsContext';
 import {
   Language,
   NotificationType,
@@ -39,6 +39,7 @@ const EditorEnrolmentPage: React.FC = () => {
   const [selectedLanguage] = React.useState(locale);
   const [initialValues, setInitialValues] =
     React.useState<EnrolmentFormFields>(defaultInitialValues);
+  const { addNotification } = useNotificationsContext();
 
   const [updateEnrolment] = useUpdateEnrolmentMutation();
 
@@ -103,7 +104,10 @@ const EditorEnrolmentPage: React.FC = () => {
         goToOccurrenceDetailsPage({ enrolmentUpdated: true });
       }
     } catch (error) {
-      toast.error(t('enrolment.errors.updateFailed'));
+      addNotification({
+        type: 'error',
+        label: t('enrolment.errors.updateFailed'),
+      });
       // eslint-disable-next-line no-console
       console.error('Failed to update enrolment', { error });
     }
diff --git a/src/domain/enrolment/enrolmentForm/enrolmentForm.module.scss b/src/domain/enrolment/enrolmentForm/enrolmentForm.module.scss
index 90e8e56b5..170a7abb7 100644
--- a/src/domain/enrolment/enrolmentForm/enrolmentForm.module.scss
+++ b/src/domain/enrolment/enrolmentForm/enrolmentForm.module.scss
@@ -40,11 +40,6 @@
     font-size: var(--fontsize-body-l);
   }
 
-  .privacyPolicyLink {
-    text-decoration: none;
-    color: var(--color-bus);
-  }
-
   .submitButtonWrapper {
     text-align: right;
   }
diff --git a/src/domain/errorPage/__tests__/__snapshots__/ErrorPage.test.tsx.snap b/src/domain/errorPage/__tests__/__snapshots__/ErrorPage.test.tsx.snap
index dc0235a2c..918540dc1 100644
--- a/src/domain/errorPage/__tests__/__snapshots__/ErrorPage.test.tsx.snap
+++ b/src/domain/errorPage/__tests__/__snapshots__/ErrorPage.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`matches snapshot 1`] = `
         <svg
           aria-hidden="true"
           aria-label="info-circle"
-          class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+          class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
           role="img"
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
@@ -36,7 +36,7 @@ exports[`matches snapshot 1`] = `
         Pahoittelemme, mutta palvelussa ilmeni virhe. Voit yrittää uudestaan, mutta jos tilanne toistuu, kerro siitä meille alalaidan palautelinkin kautta.
       </p>
       <button
-        class="Button-module_button__1msFE Button-module_primary__2LfKB"
+        class="Button-module_button__P7hTI Button-module_primary__b-5q5"
         style="max-width: 300px;"
         type="button"
       >
diff --git a/src/domain/event/CreateEventPage.tsx b/src/domain/event/CreateEventPage.tsx
index 18b723a22..486cebdcc 100644
--- a/src/domain/event/CreateEventPage.tsx
+++ b/src/domain/event/CreateEventPage.tsx
@@ -4,9 +4,9 @@ import compact from 'lodash/compact';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router';
-import { toast } from 'react-toastify';
 
 import LoadingSpinner from '../../common/components/loadingSpinner/LoadingSpinner';
+import { useNotificationsContext } from '../../common/components/notificationsContext/hooks/useNotificationsContext';
 import { SUPPORT_LANGUAGES } from '../../constants';
 import {
   EventDocument,
@@ -49,6 +49,7 @@ const CreateEventPage: React.FC = () => {
     useCreateEventMutation();
 
   const { activeOrganisation: selectedOrganisation } = useOrganisationContext();
+  const { addNotification } = useNotificationsContext();
 
   const [eventOrganisation, setEventOrganisation] = useState<
     OrganisationNodeFieldsFragment | null | undefined
@@ -61,9 +62,12 @@ const CreateEventPage: React.FC = () => {
         // eslint-disable-next-line no-console
         console.log(err);
       }
-      toast.error(t('createEvent.error'));
+      addNotification({
+        type: 'error',
+        label: t('createEvent.error'),
+      });
     },
-    [t]
+    [t, addNotification]
   );
 
   useEffect(() => {
diff --git a/src/domain/event/EditEventPage.tsx b/src/domain/event/EditEventPage.tsx
index e8d13644d..c6f471695 100644
--- a/src/domain/event/EditEventPage.tsx
+++ b/src/domain/event/EditEventPage.tsx
@@ -2,9 +2,9 @@ import { compact } from 'lodash';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router';
-import { toast } from 'react-toastify';
 
 import LoadingSpinner from '../../common/components/loadingSpinner/LoadingSpinner';
+import { useNotificationsContext } from '../../common/components/notificationsContext/hooks/useNotificationsContext';
 import { SUPPORT_LANGUAGES } from '../../constants';
 import {
   EventQuery,
@@ -58,6 +58,7 @@ const useEventFormEditSubmit = (
   const navigatedFrom = useSearchParams().get(
     EDIT_EVENT_QUERY_PARAMS.NAVIGATED_FROM
   );
+  const { addNotification } = useNotificationsContext();
 
   const goToOccurrencesPage = () => {
     if (id) {
@@ -139,7 +140,10 @@ const useEventFormEditSubmit = (
         console.error(e);
       }
       // TODO: Improve error handling when API returns more informative errors
-      toast.error(t('editEvent.error'));
+      addNotification({
+        label: t('editEvent.error'),
+        type: 'error',
+      });
     }
   };
 
diff --git a/src/domain/event/EventSummaryPage.tsx b/src/domain/event/EventSummaryPage.tsx
index c064fd893..2aa116532 100644
--- a/src/domain/event/EventSummaryPage.tsx
+++ b/src/domain/event/EventSummaryPage.tsx
@@ -3,7 +3,6 @@ import { Button, ButtonVariant } from 'hds-react';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router';
-import { toast } from 'react-toastify';
 
 import EventPublish from './eventPublish/EventPublish';
 import styles from './eventSummaryPage.module.scss';
@@ -13,6 +12,7 @@ import EditButton from '../../common/components/editButton/EditButton';
 import EventSteps from '../../common/components/EventSteps/EventSteps';
 import FormHelperText from '../../common/components/FormHelperText/FormHelperText';
 import LoadingSpinner from '../../common/components/loadingSpinner/LoadingSpinner';
+import { useNotificationsContext } from '../../common/components/notificationsContext/hooks/useNotificationsContext';
 import {
   OccurrenceFieldsFragment,
   useCancelOccurrenceMutation,
@@ -50,6 +50,7 @@ const EventSummaryPage: React.FC = () => {
   const [loadingOccurrences, setLoadingOccurrences] = React.useState<string[]>(
     []
   );
+  const { addNotification } = useNotificationsContext();
   const {
     data: eventData,
     loading,
@@ -145,10 +146,16 @@ const EventSummaryPage: React.FC = () => {
       });
       await refetchEventData();
       deleteLoadingOccurrence(occurrence.id);
-      toast.success(t('occurrences.cancelSuccess'));
+      addNotification({
+        type: 'success',
+        label: t('occurrences.cancelSuccess'),
+      });
     } catch (error) {
       deleteLoadingOccurrence(occurrence.id);
-      toast.error(t('occurrences.cancelError'));
+      addNotification({
+        type: 'error',
+        label: t('occurrences.cancelError'),
+      });
       // eslint-disable-next-line no-console
       console.error('Failed to cancel occurrence', { error });
     }
@@ -164,10 +171,16 @@ const EventSummaryPage: React.FC = () => {
       });
       await refetchEventData();
       deleteLoadingOccurrence(occurrence.id);
-      toast.success(t('occurrences.deleteSuccess'));
+      addNotification({
+        type: 'success',
+        label: t('occurrences.deleteSuccess'),
+      });
     } catch (error) {
       deleteLoadingOccurrence(occurrence.id);
-      toast.error(t('occurrences.deleteError'));
+      addNotification({
+        type: 'error',
+        label: t('occurrences.deleteError'),
+      });
       // eslint-disable-next-line no-console
       console.error('Failed to delete occurrence', { error });
     }
diff --git a/src/domain/event/__tests__/EventDetailsPage.test.tsx b/src/domain/event/__tests__/EventDetailsPage.test.tsx
index b6db4fbe8..78f9c709e 100644
--- a/src/domain/event/__tests__/EventDetailsPage.test.tsx
+++ b/src/domain/event/__tests__/EventDetailsPage.test.tsx
@@ -2,7 +2,6 @@ import { MockedResponse } from '@apollo/client/testing';
 import { screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';
-import Modal from 'react-modal';
 import { vi } from 'vitest';
 
 import * as graphql from '../../../generated/graphql';
@@ -170,14 +169,12 @@ test('renders correct information and delete works', async () => {
   vi.spyOn(graphql, 'useDeleteSingleEventMutation').mockReturnValue([
     deleteMock,
   ] as any);
-  const { container } = renderWithRoute(<EventDetailsPage />, {
+  renderWithRoute(<EventDetailsPage />, {
     routes: ['/events/palvelutarjotin:afzunowba4'],
     path: ROUTES.EVENT_DETAILS,
     mocks: apolloMocks,
   });
 
-  Modal.setAppElement(container);
-
   await waitFor(() =>
     expect(screen.queryByTestId('loading-spinner')).not.toBeInTheDocument()
   );
@@ -228,7 +225,7 @@ test('renders correct information and delete works', async () => {
 
   const modal = within(screen.getByRole('dialog'));
   expect(
-    modal.getByText('Poista tapahtuma', { selector: 'div' })
+    modal.getByRole('heading', { name: 'Poista tapahtuma' })
   ).toBeInTheDocument();
 
   const modalTexts = [
@@ -261,7 +258,7 @@ test('renders correct information and delete works', async () => {
 });
 
 test('enrolment info is not shown when enrolments are not done internally', async () => {
-  const { container } = renderWithRoute(<EventDetailsPage />, {
+  renderWithRoute(<EventDetailsPage />, {
     routes: ['/events/palvelutarjotin:afzunowba4'],
     path: ROUTES.EVENT_DETAILS,
     mocks: [
@@ -283,8 +280,6 @@ test('enrolment info is not shown when enrolments are not done internally', asyn
     ],
   });
 
-  Modal.setAppElement(container);
-
   await waitFor(() =>
     expect(screen.queryByTestId('loading-spinner')).not.toBeInTheDocument()
   );
diff --git a/src/domain/event/__tests__/EventSummaryPage.test.tsx b/src/domain/event/__tests__/EventSummaryPage.test.tsx
index 396d3c82c..6e675a6cd 100644
--- a/src/domain/event/__tests__/EventSummaryPage.test.tsx
+++ b/src/domain/event/__tests__/EventSummaryPage.test.tsx
@@ -11,7 +11,6 @@ import { userEvent } from '@testing-library/user-event';
 import * as ICS from 'ics';
 import * as React from 'react';
 import { Route, Routes } from 'react-router';
-import { toast } from 'react-toastify';
 import { vi, Mock } from 'vitest';
 
 import {
@@ -553,8 +552,6 @@ it('can cancel occurrences from occurrence table actions', async () => {
   let cancelDialog: BoundFunctions<typeof queries>;
   renderComponent({ mocks: [eventResponseWithOneCancelledOccurrence] });
 
-  const toastSuccessSpy = vi.spyOn(toast, 'success');
-
   async function getOccurrenceRow() {
     expect(await screen.findByText(organisationName)).toBeInTheDocument();
     occurrenceRow = within((await screen.findAllByRole('row'))[1]);
@@ -608,12 +605,7 @@ it('can cancel occurrences from occurrence table actions', async () => {
     await waitFor(() =>
       expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
     );
-    await waitFor(
-      () => {
-        expect(toastSuccessSpy).toHaveBeenCalled();
-      },
-      { timeout: 2_000 }
-    );
+    await screen.findByRole('alert', { name: 'Tapahtuma-aika peruutettu' });
   }
 
   async function checkThatOccurrenHasUpdated() {
diff --git a/src/domain/event/eventCard/__tests__/__snapshots__/EventCard.test.tsx.snap b/src/domain/event/eventCard/__tests__/__snapshots__/EventCard.test.tsx.snap
index f19645f28..d68a6a6e4 100644
--- a/src/domain/event/eventCard/__tests__/__snapshots__/EventCard.test.tsx.snap
+++ b/src/domain/event/eventCard/__tests__/__snapshots__/EventCard.test.tsx.snap
@@ -37,7 +37,7 @@ exports[`matches snapshot 1`] = `
           <svg
             aria-hidden="true"
             aria-label="clock"
-            class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+            class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
             role="img"
             viewBox="0 0 24 24"
             xmlns="http://www.w3.org/2000/svg"
@@ -57,7 +57,7 @@ exports[`matches snapshot 1`] = `
           <svg
             aria-hidden="true"
             aria-label="user"
-            class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+            class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
             role="img"
             viewBox="0 0 24 24"
             xmlns="http://www.w3.org/2000/svg"
@@ -77,7 +77,7 @@ exports[`matches snapshot 1`] = `
           <svg
             aria-hidden="true"
             aria-label="eye"
-            class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+            class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
             role="img"
             viewBox="0 0 24 24"
             xmlns="http://www.w3.org/2000/svg"
diff --git a/src/domain/event/eventForm/eventForm.module.scss b/src/domain/event/eventForm/eventForm.module.scss
index 120440029..b41fd147d 100644
--- a/src/domain/event/eventForm/eventForm.module.scss
+++ b/src/domain/event/eventForm/eventForm.module.scss
@@ -53,29 +53,6 @@
     }
   }
 
-  .keywordRow {
-    display: grid;
-    grid-gap: var(--grid-gap);
-
-    @include layout.respond-above(m) {
-      grid-template-columns: 3fr 1fr;
-    }
-  }
-
-  .isVirtualCheckbox {
-    margin-top: var(--spacing-s);
-  }
-
-  .neededOccurrencesRow {
-    display: grid;
-    grid-gap: var(--grid-gap);
-    margin-bottom: var(--spacing-m);
-
-    @include layout.respond-above(m) {
-      grid-template-columns: 1fr 3fr;
-    }
-  }
-
   .priceRow {
     display: grid;
     grid-gap: var(--grid-gap);
diff --git a/src/domain/event/eventForm/useEventFormSubmitRequests.tsx b/src/domain/event/eventForm/useEventFormSubmitRequests.tsx
index b3e03601b..c0e93ea69 100644
--- a/src/domain/event/eventForm/useEventFormSubmitRequests.tsx
+++ b/src/domain/event/eventForm/useEventFormSubmitRequests.tsx
@@ -1,5 +1,6 @@
 import { ApolloClient } from '@apollo/client';
 
+import { useNotificationsContext } from '../../../common/components/notificationsContext/hooks/useNotificationsContext';
 import { useUpdateSingleImageMutation } from '../../../generated/graphql';
 import { getImageName } from '../../image/utils';
 import { VenueDataFields } from '../../venue/types';
@@ -25,11 +26,12 @@ const useCreateOrUpdateVenueRequest = (apolloClient: ApolloClient<object>) => {
 const useUpdateImageRequest = () => {
   const [updateImage, { loading: updateImageLoading }] =
     useUpdateSingleImageMutation();
+  const { addNotification } = useNotificationsContext();
 
   const updateImageRequest = (values: CreateEventFormFields) => {
     const imageId = values.image;
     if (imageId) {
-      const imageName = getImageName(imageId);
+      const imageName = getImageName(imageId, addNotification);
       if (imageName) {
         // Request to update image data
         return updateImage({
diff --git a/src/domain/event/eventPreviewBasicInfo/eventPreviewBasicInfo.module.scss b/src/domain/event/eventPreviewBasicInfo/eventPreviewBasicInfo.module.scss
index 502463c18..46e73afc6 100644
--- a/src/domain/event/eventPreviewBasicInfo/eventPreviewBasicInfo.module.scss
+++ b/src/domain/event/eventPreviewBasicInfo/eventPreviewBasicInfo.module.scss
@@ -48,12 +48,6 @@
     margin-bottom: var(--spacing-s);
   }
 
-  .organizationLink {
-    display: block;
-    align-self: center;
-    text-decoration: none;
-  }
-
   .contactInfo {
     p {
       margin: 0;
diff --git a/src/domain/event/eventPreviewCard/__tests__/__snapshots__/EventPreviewCard.test.tsx.snap b/src/domain/event/eventPreviewCard/__tests__/__snapshots__/EventPreviewCard.test.tsx.snap
index 417ceaae7..88be6e288 100644
--- a/src/domain/event/eventPreviewCard/__tests__/__snapshots__/EventPreviewCard.test.tsx.snap
+++ b/src/domain/event/eventPreviewCard/__tests__/__snapshots__/EventPreviewCard.test.tsx.snap
@@ -37,7 +37,7 @@ exports[`renders event information correctly and matches snapshot 1`] = `
           <svg
             aria-hidden="true"
             aria-label="clock"
-            class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+            class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
             role="img"
             viewBox="0 0 24 24"
             xmlns="http://www.w3.org/2000/svg"
@@ -57,7 +57,7 @@ exports[`renders event information correctly and matches snapshot 1`] = `
           <svg
             aria-hidden="true"
             aria-label="location"
-            class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+            class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
             role="img"
             viewBox="0 0 24 24"
             xmlns="http://www.w3.org/2000/svg"
diff --git a/src/domain/event/eventPreviewPage.module.scss b/src/domain/event/eventPreviewPage.module.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/src/domain/event/eventPublish/EventPublish.tsx b/src/domain/event/eventPublish/EventPublish.tsx
index 1970ac355..fe9b51869 100644
--- a/src/domain/event/eventPublish/EventPublish.tsx
+++ b/src/domain/event/eventPublish/EventPublish.tsx
@@ -2,10 +2,10 @@ import classNames from 'classnames';
 import { Button, RadioButton } from 'hds-react';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { toast } from 'react-toastify';
 
 import styles from './eventPublish.module.scss';
 import ConfirmationModal from '../../../common/components/modal/ConfirmationModal';
+import { useNotificationsContext } from '../../../common/components/notificationsContext/hooks/useNotificationsContext';
 import {
   EventFieldsFragment,
   usePublishSingleEventMutation,
@@ -29,6 +29,8 @@ const EventPublish: React.FC<Props> = ({ event }) => {
 
   const [showPublishModal, setShowPublishModal] = React.useState(false);
 
+  const { addNotification } = useNotificationsContext();
+
   const isEventPublished =
     event?.publicationStatus === PUBLICATION_STATUS.PUBLIC;
 
@@ -44,9 +46,15 @@ const EventPublish: React.FC<Props> = ({ event }) => {
           },
         });
       }
-      toast.success(t('eventSummary.eventHasBeenPublished'));
+      addNotification({
+        label: t('eventSummary.eventHasBeenPublished'),
+        type: 'success',
+      });
     } catch (error) {
-      toast.error(t('occurrences.errorEventPublicationFailed'));
+      addNotification({
+        label: t('occurrences.errorEventPublicationFailed'),
+        type: 'error',
+      });
       // eslint-disable-next-line no-console
       console.error('Failed to publish event', { error });
     }
diff --git a/src/domain/event/types.ts b/src/domain/event/types.ts
index f79d3ae04..43d5de90a 100644
--- a/src/domain/event/types.ts
+++ b/src/domain/event/types.ts
@@ -1,9 +1,4 @@
-import { Event, Image, LocalisedObject } from '../../generated/graphql';
-
-export type EventInList = Pick<Event, 'id' | 'startTime' | 'endTime'> & {
-  images: Array<Pick<Image, 'id' | 'name' | 'url'>>;
-  name: LocalisedObject;
-};
+import { LocalisedObject } from '../../generated/graphql';
 
 export interface CreateEventFormFields {
   audience: string[];
diff --git a/src/domain/events/__tests__/EventsPage.test.tsx b/src/domain/events/__tests__/EventsPage.test.tsx
index 6be6cf172..ab9edae7a 100644
--- a/src/domain/events/__tests__/EventsPage.test.tsx
+++ b/src/domain/events/__tests__/EventsPage.test.tsx
@@ -2,7 +2,6 @@ import { MockedResponse } from '@apollo/client/testing';
 import { configure, waitFor, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import * as React from 'react';
-import { toast } from 'react-toastify';
 
 import {
   Event,
@@ -258,7 +257,6 @@ const renderComponent = ({ mocks }: { mocks?: MockedResponse[] } = {}) => {
 
 test('renders events list and load more events button works', async () => {
   vi.setSystemTime(new Date(2020, 5, 20));
-  const toastErrorSpy = vi.spyOn(toast, 'error');
   const consoleErrorSpy = vi
     .spyOn(console, 'error')
     .mockImplementation(() => {});
@@ -307,20 +305,9 @@ test('renders events list and load more events button works', async () => {
     await screen.findByRole('button', { name: /näytä lisää/i })
   );
 
-  await waitFor(
-    () => {
-      expect(toastErrorSpy).toHaveBeenCalled();
-    },
-    { timeout: 5_000 }
-  );
-
-  expect(toastErrorSpy.mock.calls).toMatchInlineSnapshot(`
-    [
-      [
-        "Tapahtumien lataaminen epäonnistui",
-      ],
-    ]
-  `);
+  await screen.findByRole('alert', {
+    name: 'Tapahtumien lataaminen epäonnistui',
+  });
 
   expect(consoleErrorSpy.mock.calls.at(-1)).toMatchInlineSnapshot(`
     [
diff --git a/src/domain/events/utils.ts b/src/domain/events/utils.ts
index 1d5e563e5..e0d88ab42 100644
--- a/src/domain/events/utils.ts
+++ b/src/domain/events/utils.ts
@@ -1,8 +1,8 @@
 import { QueryHookOptions } from '@apollo/client';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { toast } from 'react-toastify';
 
+import { useNotificationsContext } from '../../common/components/notificationsContext/hooks/useNotificationsContext';
 import {
   EventsQuery,
   EventsQueryVariables,
@@ -16,6 +16,7 @@ export const useEventsQueryHelper = ({
 }: QueryHookOptions<EventsQuery, EventsQueryVariables>) => {
   const [isLoadingMore, setIsLoadingMore] = React.useState(false);
   const { t } = useTranslation();
+  const { addNotification } = useNotificationsContext();
 
   const {
     fetchMore: fetchMoreEvents,
@@ -44,7 +45,10 @@ export const useEventsQueryHelper = ({
         });
         setIsLoadingMore(false);
       } catch (error) {
-        toast.error(t('events.errorFetchMoreEvents'));
+        addNotification({
+          label: t('events.errorFetchMoreEvents'),
+          type: 'error',
+        });
         setIsLoadingMore(false);
         // eslint-disable-next-line no-console
         console.error('Failed to fetch more events', { error });
diff --git a/src/domain/image/utils.ts b/src/domain/image/utils.ts
index fbf88af35..0adeec9e6 100644
--- a/src/domain/image/utils.ts
+++ b/src/domain/image/utils.ts
@@ -1,8 +1,13 @@
+import { NotificationProps } from 'hds-react';
+
 import { ImageDocument, ImageQuery } from '../../generated/graphql';
 import { initializeApolloClient } from '../app/apollo/apolloClient';
 
-export const getImageName = (id: string) => {
-  const apolloClient = initializeApolloClient();
+export const getImageName = (
+  id: string,
+  addNotification: (props: NotificationProps) => void
+) => {
+  const apolloClient = initializeApolloClient(undefined, addNotification);
   const data = apolloClient.readQuery<ImageQuery>({
     query: ImageDocument,
     variables: { id },
diff --git a/src/domain/languages/constants.ts b/src/domain/languages/constants.ts
index 3021d22e0..47013557a 100644
--- a/src/domain/languages/constants.ts
+++ b/src/domain/languages/constants.ts
@@ -1,6 +1,9 @@
-import { type Language, LanguageCodeEnum } from 'react-helsinki-headless-cms';
+import {
+  type Language,
+  LanguageCodeEnum,
+} from '@city-of-helsinki/react-helsinki-headless-cms';
 
-export const CMS_FINNISH_LANGUAGE_ENTRY = {
+const CMS_FINNISH_LANGUAGE_ENTRY = {
   code: LanguageCodeEnum.Fi,
   id: 'TGFuZ3VhZ2U6Zmk=',
   locale: 'fi',
@@ -9,7 +12,7 @@ export const CMS_FINNISH_LANGUAGE_ENTRY = {
   __typename: 'Language',
 } as const satisfies Language;
 
-export const CMS_ENGLISH_LANGUAGE_ENTRY = {
+const CMS_ENGLISH_LANGUAGE_ENTRY = {
   code: LanguageCodeEnum.En,
   id: 'TGFuZ3VhZ2U6ZW4=',
   locale: 'en_US',
@@ -18,7 +21,7 @@ export const CMS_ENGLISH_LANGUAGE_ENTRY = {
   __typename: 'Language',
 } as const satisfies Language;
 
-export const CMS_SWEDISH_LANGUAGE_ENTRY = {
+const CMS_SWEDISH_LANGUAGE_ENTRY = {
   code: LanguageCodeEnum.Sv,
   id: 'TGFuZ3VhZ2U6c3Y=',
   locale: 'sv_SE',
diff --git a/src/domain/myProfile/CreateMyProfile.tsx b/src/domain/myProfile/CreateMyProfile.tsx
index 93c45e0c6..6db1ef979 100644
--- a/src/domain/myProfile/CreateMyProfile.tsx
+++ b/src/domain/myProfile/CreateMyProfile.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { toast } from 'react-toastify';
 
 import styles from './myProfile.module.scss';
 import MyProfileForm, {
   MyProfileCreateFormFields,
 } from './myProfileForm/MyProfileForm';
 import { getMyProfileCreatePayload } from './utils';
+import { useNotificationsContext } from '../../common/components/notificationsContext/hooks/useNotificationsContext';
 import { useCreateMyProfileMutation } from '../../generated/graphql';
 import HeroBackground from '../app/heroBackground/HeroBackground';
 import Container from '../app/layout/Container';
@@ -19,6 +19,7 @@ interface Props {
 const CreateMyProfile: React.FC<Props> = ({ refetch }) => {
   const { t } = useTranslation();
   const [createMyProfile] = useCreateMyProfileMutation();
+  const { addNotification } = useNotificationsContext();
 
   const submit = async (values: MyProfileCreateFormFields) => {
     try {
@@ -29,7 +30,10 @@ const CreateMyProfile: React.FC<Props> = ({ refetch }) => {
       });
       refetch();
     } catch (error) {
-      toast.error(t('createMyProfile.error'));
+      addNotification({
+        label: t('createMyProfile.error'),
+        type: 'error',
+      });
       // eslint-disable-next-line no-console
       console.error('Failed to create my profile', { error });
     }
diff --git a/src/domain/myProfile/MyProfilePage.tsx b/src/domain/myProfile/MyProfilePage.tsx
index 939345a97..bdfe8df0e 100644
--- a/src/domain/myProfile/MyProfilePage.tsx
+++ b/src/domain/myProfile/MyProfilePage.tsx
@@ -1,7 +1,6 @@
 import { Notification } from 'hds-react';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { toast } from 'react-toastify';
 
 import styles from './myProfile.module.scss';
 import LoadingSpinner from '../../common/components/loadingSpinner/LoadingSpinner';
@@ -19,6 +18,7 @@ import MyProfileForm, {
   MyProfileEditFormFields,
 } from './myProfileForm/MyProfileForm';
 import { getMyProfileEditPayload } from './utils';
+import { useNotificationsContext } from '../../common/components/notificationsContext/hooks/useNotificationsContext';
 
 const MyProfilePage: React.FC = () => {
   const { t } = useTranslation();
@@ -26,6 +26,7 @@ const MyProfilePage: React.FC = () => {
   const { data: myProfileData, loading } = useMyProfileQuery();
   const [updateMyProfile] = useUpdateMyProfileMutation();
   const [isSaved, setIsSaved] = React.useState(false);
+  const { addNotification } = useNotificationsContext();
 
   const initialValues = React.useMemo(
     () =>
@@ -51,7 +52,10 @@ const MyProfilePage: React.FC = () => {
       scrollToTop();
       setIsSaved(true);
     } catch (error) {
-      toast.error(t('editMyProfile.error'));
+      addNotification({
+        label: t('editMyProfile.error'),
+        type: 'error',
+      });
       setIsSaved(false);
       // eslint-disable-next-line no-console
       console.error('Failed to update my profile', { error });
diff --git a/src/domain/notFound/__tests__/__snapshots__/NotFoundPage.test.tsx.snap b/src/domain/notFound/__tests__/__snapshots__/NotFoundPage.test.tsx.snap
index 608273b6f..2c68ff6e9 100644
--- a/src/domain/notFound/__tests__/__snapshots__/NotFoundPage.test.tsx.snap
+++ b/src/domain/notFound/__tests__/__snapshots__/NotFoundPage.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`it matches snapshot 1`] = `
         <svg
           aria-hidden="true"
           aria-label="info-circle"
-          class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+          class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
           role="img"
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
@@ -36,7 +36,7 @@ exports[`it matches snapshot 1`] = `
         Pahoittelemme, mutta palvelussa ilmeni virhe. Voit yrittää uudestaan, mutta jos tilanne toistuu, kerro siitä meille alalaidan palautelinkin kautta.
       </p>
       <button
-        class="Button-module_button__1msFE Button-module_primary__2LfKB"
+        class="Button-module_button__P7hTI Button-module_primary__b-5q5"
         style="max-width: 300px;"
         type="button"
       >
diff --git a/src/domain/occurrence/CreateOccurrencePage.tsx b/src/domain/occurrence/CreateOccurrencePage.tsx
index 1ea2accab..6171db352 100644
--- a/src/domain/occurrence/CreateOccurrencePage.tsx
+++ b/src/domain/occurrence/CreateOccurrencePage.tsx
@@ -13,7 +13,6 @@ import omit from 'lodash/omit';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router';
-import { toast } from 'react-toastify';
 import * as Yup from 'yup';
 
 import { defaultInitialValues, EnrolmentType } from './constants';
@@ -35,6 +34,7 @@ import FocusToFirstError from '../../common/components/form/FocusToFirstError';
 import FormLanguageSelector from '../../common/components/formLanguageSelector/FormLanguageSelector';
 import LoadingSpinner from '../../common/components/loadingSpinner/LoadingSpinner';
 import NotificationModal from '../../common/components/modal/NotificationModal';
+import { useNotificationsContext } from '../../common/components/notificationsContext/hooks/useNotificationsContext';
 import {
   EventQuery,
   useAddOccurrenceMutation,
@@ -253,7 +253,8 @@ const CreateOccurrencePage: React.FC = () => {
   const { id: eventId } = useParams<Params>();
   const [initialValues, setInitialValues] =
     React.useState<TimeAndLocationFormFields | null>(null);
-  const eventDataRef = React.useRef<EventQuery>();
+  const eventDataRef = React.useRef<EventQuery | null>(null);
+  const { addNotification } = useNotificationsContext();
 
   const createOrUpdateVenue = useCreateOrUpdateVenueRequest(apolloClient);
 
@@ -273,7 +274,7 @@ const CreateOccurrencePage: React.FC = () => {
 
   // Get access to latest eventData in handleGoToPublishingClick when it is called
   // from child component
-  eventDataRef.current = eventData;
+  eventDataRef.current = eventData ?? null;
 
   const organisationId = eventData?.event?.pEvent?.organisation?.id || '';
 
@@ -452,7 +453,10 @@ const CreateOccurrencePage: React.FC = () => {
         await Promise.all(requests);
         formikHelpers.resetForm({ values });
         refetchEvent();
-        toast.success(t('eventForm.saveSuccesful'));
+        addNotification({
+          type: 'success',
+          label: t('eventForm.saveSuccesful'),
+        });
       } else {
         throw new Error("Can't submit because event wasn't defined");
       }
@@ -461,7 +465,10 @@ const CreateOccurrencePage: React.FC = () => {
         // eslint-disable-next-line no-console
         console.log(error);
       }
-      toast.error(t('createOccurrence.error'));
+      addNotification({
+        type: 'error',
+        label: t('createOccurrence.error'),
+      });
 
       if (error instanceof Error) {
         return Promise.reject(error);
diff --git a/src/domain/occurrence/__tests__/CreateOccurrencePageEnrolmentInfo.test.tsx b/src/domain/occurrence/__tests__/CreateOccurrencePageEnrolmentInfo.test.tsx
index 2e60219ea..3b1dfb73e 100644
--- a/src/domain/occurrence/__tests__/CreateOccurrencePageEnrolmentInfo.test.tsx
+++ b/src/domain/occurrence/__tests__/CreateOccurrencePageEnrolmentInfo.test.tsx
@@ -3,9 +3,7 @@ import { configure, waitFor, within, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import { format, parse as parseDate } from 'date-fns';
 import * as React from 'react';
-import Modal from 'react-modal';
 import * as Router from 'react-router';
-import { toast } from 'react-toastify';
 import { vi } from 'vitest';
 
 import { OccurrenceNode } from '../../../generated/graphql';
@@ -100,7 +98,6 @@ describe('location and enrolment info', () => {
     const formattedEnrolmentStartTime = formatIntoTime(
       new Date(enrolmentStartDateTimeValue)
     );
-    const toastSuccess = vi.spyOn(toast, 'success');
 
     expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
 
@@ -176,9 +173,7 @@ describe('location and enrolment info', () => {
     const goToPublishingButton = getFormElement('goToPublishing');
     const addNewOccurrenceButton = getOccurrenceFormElement('submit');
 
-    await waitFor(() =>
-      expect(toastSuccess).toHaveBeenCalledWith('Tiedot tallennettu')
-    );
+    await screen.findByRole('alert', { name: 'Tiedot tallennettu' });
 
     await waitFor(() => expect(goToPublishingButton).toBeEnabled());
     await waitFor(() => expect(addNewOccurrenceButton).toBeEnabled());
@@ -211,8 +206,6 @@ describe('location and enrolment info', () => {
       ],
     });
 
-    const toastSuccess = vi.spyOn(toast, 'success');
-
     expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
 
     // Wait for form to have been initialized
@@ -263,9 +256,7 @@ describe('location and enrolment info', () => {
 
     const goToPublishingButton = getFormElement('goToPublishing');
 
-    await waitFor(() =>
-      expect(toastSuccess).toHaveBeenCalledWith('Tiedot tallennettu')
-    );
+    await screen.findByRole('alert', { name: 'Tiedot tallennettu' });
 
     expect(goToPublishingButton).toBeEnabled();
   }, 30_000);
@@ -299,8 +290,6 @@ describe('location and enrolment info', () => {
       ],
     });
 
-    const toastSuccess = vi.spyOn(toast, 'success');
-
     // Wait for form to have been initialized
     await screen.findByTestId('time-and-location-form');
 
@@ -337,9 +326,7 @@ describe('location and enrolment info', () => {
 
     await userEvent.click(getFormElement('saveButton'));
 
-    await waitFor(() =>
-      expect(toastSuccess).toHaveBeenCalledWith('Tiedot tallennettu')
-    );
+    await screen.findByRole('alert', { name: 'Tiedot tallennettu' });
   });
 
   test('notification modal works correctly when info is not filled', async () => {
@@ -427,7 +414,7 @@ describe('location and enrolment info', () => {
     const updateEventMockResponse = getUpdateEventMockResponse({
       ...eventData,
     });
-    const { container } = renderComponent({
+    renderComponent({
       mocks: [
         eventMockResponse,
         // refetch mock after saving
@@ -440,9 +427,6 @@ describe('location and enrolment info', () => {
         updatedEventWithOccurrenceMockResponse, // Mock used twice
       ],
     });
-    Modal.setAppElement(container);
-
-    const toastSuccess = vi.spyOn(toast, 'success');
 
     // Wait for form to have been initialized
     await screen.findByTestId('time-and-location-form');
@@ -481,14 +465,13 @@ describe('location and enrolment info', () => {
       expect(enrolmentStartDateInput).toHaveValue(formattedEnrolmentStartDate)
     );
 
-    expect(toastSuccess).not.toHaveBeenCalled();
+    expect(
+      screen.queryByRole('alert', { name: 'Tiedot tallennettu' })
+    ).not.toBeInTheDocument();
 
     // Try to go to publish page
     await userEvent.click(goToPublishButton);
-    await waitFor(() => expect(toastSuccess).toHaveBeenCalledTimes(1));
-    await waitFor(() =>
-      expect(toastSuccess).toHaveBeenLastCalledWith('Tiedot tallennettu')
-    );
+    await screen.findByRole('alert', { name: 'Tiedot tallennettu' });
 
     // Modal should only have complaint about needing at least one occurrence
     const withinModal2 = within(
@@ -509,7 +492,9 @@ describe('location and enrolment info', () => {
     ).toBeInTheDocument();
 
     // Close modal again
-    await userEvent.click(withinModal2.getByRole('button', { name: 'Sulje' }));
+    await userEvent.click(
+      withinModal2.getAllByRole('button', { name: 'Sulje' })[0]
+    );
 
     expect(
       screen.queryByTestId(occurrencesTableTestId)
@@ -536,12 +521,7 @@ describe('location and enrolment info', () => {
       })
     ).toHaveLength(1);
 
-    await waitFor(() => expect(toastSuccess).toHaveBeenCalledTimes(2));
-    await waitFor(() =>
-      expect(toastSuccess).toHaveBeenLastCalledWith(
-        'Tapahtuma-aika tallennettu'
-      )
-    );
+    await screen.findByRole('alert', { name: 'Tapahtuma-aika tallennettu' });
 
     // Make sure the "Go to publish" button could be pressed
     expect(goToPublishButton).toBeVisible();
@@ -590,8 +570,6 @@ describe('location and enrolment info', () => {
       ],
     });
 
-    const toastSuccess = vi.spyOn(toast, 'success');
-
     // Wait for form to have been initialized
     await screen.findByTestId('time-and-location-form');
     await selectLocation();
@@ -607,7 +585,7 @@ describe('location and enrolment info', () => {
 
     await userEvent.click(getFormElement('saveButton'));
 
-    await waitFor(() => expect(toastSuccess).toHaveBeenCalled());
+    await screen.findByRole('alert', { name: 'Tiedot tallennettu' });
   });
 
   test('user can add external enrolment and save form', async () => {
@@ -639,8 +617,6 @@ describe('location and enrolment info', () => {
       ],
     });
 
-    const toastSuccess = vi.spyOn(toast, 'success');
-
     // Wait for form to have been initialized
     await screen.findByTestId('time-and-location-form');
     await selectLocation();
@@ -674,6 +650,6 @@ describe('location and enrolment info', () => {
 
     await userEvent.click(getFormElement('saveButton'));
 
-    await waitFor(() => expect(toastSuccess).toHaveBeenCalled());
+    await screen.findByRole('alert', { name: 'Tiedot tallennettu' });
   }, 20_000);
 });
diff --git a/src/domain/occurrence/__tests__/CreateOccurrencePageEnrolmentType.test.tsx b/src/domain/occurrence/__tests__/CreateOccurrencePageEnrolmentType.test.tsx
index 9dd693b48..fbf53c0ba 100644
--- a/src/domain/occurrence/__tests__/CreateOccurrencePageEnrolmentType.test.tsx
+++ b/src/domain/occurrence/__tests__/CreateOccurrencePageEnrolmentType.test.tsx
@@ -2,7 +2,6 @@ import { MockedResponse } from '@apollo/client/testing';
 import { configure, waitFor, within, screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import * as React from 'react';
-import { toast } from 'react-toastify';
 import { vi } from 'vitest';
 
 import {
@@ -173,7 +172,6 @@ describe('auto acceptance for enrolments', () => {
 
   it('submits the auto acceptance message right', async () => {
     const spyGetEditEventPayload = vi.spyOn(Utils, 'getEditEventPayload');
-    const toastSuccess = vi.spyOn(toast, 'success');
     const enrolmentStart = '2021-05-03T21:00:00.000Z';
     const enrolmentEndDays = 1;
     const neededOccurrences = 1;
@@ -222,12 +220,7 @@ describe('auto acceptance for enrolments', () => {
     );
     expect(getFormElement('autoAcceptanceMessage')).toHaveValue(customMessage);
     await userEvent.click(getFormElement('saveButton'));
-    await waitFor(
-      () => {
-        expect(toastSuccess).toHaveBeenCalledWith('Tiedot tallennettu');
-      },
-      { timeout: 10000 }
-    );
+    await screen.findByRole('alert', { name: 'Tiedot tallennettu' });
     await waitFor(() => {
       expect(spyGetEditEventPayload).toHaveBeenCalledWith({
         event: expect.anything(),
@@ -252,7 +245,6 @@ describe('auto acceptance for enrolments', () => {
 
   it('clears the auto acceptance message on submit when auto acceptance is set off', async () => {
     const spyGetEditEventPayload = vi.spyOn(Utils, 'getEditEventPayload');
-    const toastSuccess = vi.spyOn(toast, 'success');
     const enrolmentStart = '2021-05-03T21:00:00.000Z';
     const enrolmentEndDays = 1;
     const neededOccurrences = 1;
@@ -310,12 +302,7 @@ describe('auto acceptance for enrolments', () => {
     });
 
     await userEvent.click(getFormElement('saveButton'));
-    await waitFor(
-      () => {
-        expect(toastSuccess).toHaveBeenCalledWith('Tiedot tallennettu');
-      },
-      { timeout: 10000 }
-    );
+    await screen.findByRole('alert', { name: 'Tiedot tallennettu' });
     await waitFor(() => {
       expect(spyGetEditEventPayload).toHaveBeenCalledWith({
         event: expect.anything(),
diff --git a/src/domain/occurrence/__tests__/CreateOccurrencePageSimultaneousSave.test.tsx b/src/domain/occurrence/__tests__/CreateOccurrencePageSimultaneousSave.test.tsx
index 998c7d9fe..bdb7295be 100644
--- a/src/domain/occurrence/__tests__/CreateOccurrencePageSimultaneousSave.test.tsx
+++ b/src/domain/occurrence/__tests__/CreateOccurrencePageSimultaneousSave.test.tsx
@@ -4,7 +4,6 @@ import { userEvent } from '@testing-library/user-event';
 import { parse as parseDate } from 'date-fns';
 import * as React from 'react';
 import * as Router from 'react-router';
-import { toast } from 'react-toastify';
 import { vi } from 'vitest';
 
 import { OccurrenceNode } from '../../../generated/graphql';
@@ -190,29 +189,23 @@ describe('save occurrence and event info simultaneously', () => {
 
   it('saves occurrence and event info when using save button', async () => {
     vi.setSystemTime('2021-04-02');
-    const toastSuccess = vi.spyOn(toast, 'success');
 
     await fillForm();
     await userEvent.click(getFormElement('saveButton'));
 
-    await waitFor(() => expect(toastSuccess).toHaveBeenCalledTimes(2));
-
-    expect(toastSuccess).toHaveBeenCalledWith('Tapahtuma-aika tallennettu');
-    expect(toastSuccess).toHaveBeenCalledWith('Tiedot tallennettu');
+    await screen.findByRole('alert', { name: 'Tiedot tallennettu' });
+    await screen.findByRole('alert', { name: 'Tapahtuma-aika tallennettu' });
   }, 70_000);
 
   it('saves occurrence and event info when using to go to publish button', async () => {
     vi.spyOn(Router, 'useNavigate').mockImplementation(() => navigate);
     vi.setSystemTime('2021-04-02');
-    const toastSuccess = vi.spyOn(toast, 'success');
     await fillForm();
 
     await userEvent.click(getFormElement('goToPublishing'));
 
-    await waitFor(() => expect(toastSuccess).toHaveBeenCalledTimes(2));
-
-    expect(toastSuccess).toHaveBeenCalledWith('Tapahtuma-aika tallennettu');
-    expect(toastSuccess).toHaveBeenCalledWith('Tiedot tallennettu');
+    await screen.findByRole('alert', { name: 'Tiedot tallennettu' });
+    await screen.findByRole('alert', { name: 'Tapahtuma-aika tallennettu' });
 
     // FIXME: Broken after dependency upgrade
     // await waitFor(() => {
diff --git a/src/domain/occurrence/__tests__/CreateOccurrencePageVenueInfo.test.tsx b/src/domain/occurrence/__tests__/CreateOccurrencePageVenueInfo.test.tsx
index bb383f7c4..ddcd254a1 100644
--- a/src/domain/occurrence/__tests__/CreateOccurrencePageVenueInfo.test.tsx
+++ b/src/domain/occurrence/__tests__/CreateOccurrencePageVenueInfo.test.tsx
@@ -1,7 +1,6 @@
 import { MockedResponse } from '@apollo/client/testing';
 import { configure, waitFor, screen } from '@testing-library/react';
 import React from 'react';
-import { toast } from 'react-toastify';
 
 import {
   baseApolloMocks,
@@ -66,8 +65,6 @@ describe('venue info', () => {
       ],
     });
 
-    const toastSuccess = vi.spyOn(toast, 'success');
-
     // Wait for form to have been initialized
     await screen.findByTestId('time-and-location-form');
 
@@ -95,11 +92,6 @@ describe('venue info', () => {
 
     await user.click(getFormElement('saveButton'));
 
-    await waitFor(
-      () => {
-        expect(toastSuccess).toHaveBeenCalledWith('Tiedot tallennettu');
-      },
-      { timeout: 10_000 }
-    );
+    await screen.findByRole('alert', { name: 'Tiedot tallennettu' });
   }, 20_000);
 });
diff --git a/src/domain/occurrence/enrolmentDetails/EnrolmentDetails.tsx b/src/domain/occurrence/enrolmentDetails/EnrolmentDetails.tsx
index 5c29caf14..de114100a 100644
--- a/src/domain/occurrence/enrolmentDetails/EnrolmentDetails.tsx
+++ b/src/domain/occurrence/enrolmentDetails/EnrolmentDetails.tsx
@@ -11,12 +11,12 @@ import {
 } from 'hds-react';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { toast } from 'react-toastify';
 
 import styles from './enrolmentDetails.module.scss';
 import EnrolmentInfoRow from './EnrolmentInfoRow';
 import { getNotificationInfoText } from './utils';
 import LoadingSpinner from '../../../common/components/loadingSpinner/LoadingSpinner';
+import { useNotificationsContext } from '../../../common/components/notificationsContext/hooks/useNotificationsContext';
 import {
   EnrolmentStatus,
   OccurrenceDocument,
@@ -64,6 +64,7 @@ const EnrolmentDetails: React.FC<EnrolmentDetailsProps> = ({
       id: enrolmentId,
     },
   });
+  const { addNotification } = useNotificationsContext();
   const enrolment = enrolmentData?.enrolment;
   const enrolmentIsNotApproved = enrolment?.status !== EnrolmentStatus.Approved;
   const enrolmentIsNotDeclined = enrolment?.status !== EnrolmentStatus.Declined;
@@ -71,7 +72,10 @@ const EnrolmentDetails: React.FC<EnrolmentDetailsProps> = ({
   const [approveEnrolment, { loading: loadingApproveEnrolment }] =
     useApproveEnrolmentMutation({
       onError: (error) => {
-        toast.error(t('enrolment.approveEnrolmentError'));
+        addNotification({
+          type: 'error',
+          label: t('enrolment.approveEnrolmentError'),
+        });
         // eslint-disable-next-line no-console
         console.error('Could not approve enrolment', { error });
       },
@@ -81,7 +85,10 @@ const EnrolmentDetails: React.FC<EnrolmentDetailsProps> = ({
   const [declineEnrolment, { loading: loadingDeclineEnrolment }] =
     useDeclineEnrolmentMutation({
       onError: (error) => {
-        toast.error(t('enrolment.declineEnrolmentError'));
+        addNotification({
+          type: 'error',
+          label: t('enrolment.declineEnrolmentError'),
+        });
         // eslint-disable-next-line no-console
         console.error('Could not decline enrolment', { error });
       },
@@ -91,7 +98,10 @@ const EnrolmentDetails: React.FC<EnrolmentDetailsProps> = ({
   const [deleteEnrolment, { loading: loadingDeleteEnrolment }] =
     useDeleteEnrolmentMutation({
       onError: (error) => {
-        toast.error(t('enrolment.deleteEnrolmentError'));
+        addNotification({
+          type: 'error',
+          label: t('enrolment.deleteEnrolmentError'),
+        });
         // eslint-disable-next-line no-console
         console.error('Could not delete enrolment', { error });
       },
diff --git a/src/domain/occurrence/enrolmentDetails/__tests__/EnrolmentDetails.test.tsx b/src/domain/occurrence/enrolmentDetails/__tests__/EnrolmentDetails.test.tsx
index 83c877493..ba19c5974 100644
--- a/src/domain/occurrence/enrolmentDetails/__tests__/EnrolmentDetails.test.tsx
+++ b/src/domain/occurrence/enrolmentDetails/__tests__/EnrolmentDetails.test.tsx
@@ -1,7 +1,6 @@
 import { waitFor, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';
-import Modal from 'react-modal';
 
 import {
   EnrolmentDocument,
@@ -109,9 +108,7 @@ test('renders correct information', async () => {
 });
 
 test('enrolment action buttons work correctly', async () => {
-  const { container } = renderEnrolmentDetails();
-
-  Modal.setAppElement(container);
+  renderEnrolmentDetails();
 
   await waitFor(() =>
     expect(screen.queryByTestId('loading-spinner')).not.toBeInTheDocument()
@@ -133,18 +130,21 @@ test('enrolment action buttons work correctly', async () => {
     )
   ).toBeVisible();
 
-  await userEvent.click(screen.getByText('Sulje'));
+  await userEvent.click(
+    screen.getByRole('button', {
+      name: /sulje/i,
+    })
+  );
 });
 
 test('renders multiple studygroups correctly', async () => {
-  const { container } = renderEnrolmentDetails(
+  renderEnrolmentDetails(
     getMocks({
       studyGroup: fakeStudyGroup({
         studyLevels: fakeStudyLevels(),
       }),
     })
   );
-  Modal.setAppElement(container);
 
   await waitFor(() =>
     expect(screen.queryByTestId('loading-spinner')).not.toBeInTheDocument()
diff --git a/src/domain/occurrence/enrolmentDetails/__tests__/__snapshots__/EnrolmentDetails.test.tsx.snap b/src/domain/occurrence/enrolmentDetails/__tests__/__snapshots__/EnrolmentDetails.test.tsx.snap
index db9c96dbf..d5411e2bb 100644
--- a/src/domain/occurrence/enrolmentDetails/__tests__/__snapshots__/EnrolmentDetails.test.tsx.snap
+++ b/src/domain/occurrence/enrolmentDetails/__tests__/__snapshots__/EnrolmentDetails.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`matches snapshot 1`] = `
         <svg
           aria-hidden="true"
           aria-label="arrow-left"
-          class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+          class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
           role="img"
           viewBox="0 0 24 24"
           xmlns="http://www.w3.org/2000/svg"
@@ -45,17 +45,17 @@ exports[`matches snapshot 1`] = `
           class="actionButtons"
         >
           <button
-            class="Button-module_button__1msFE Button-module_secondary__1nABp declineButton actionButton"
+            class="Button-module_button__P7hTI Button-module_secondary__ieoHb declineButton actionButton"
             type="button"
           >
             <div
               aria-hidden="true"
-              class="Button-module_icon__O-h7R"
+              class="Button-module_icon__Di-Ga"
             >
               <svg
                 aria-hidden="true"
                 aria-label="cross"
-                class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+                class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
                 role="img"
                 viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg"
@@ -73,17 +73,17 @@ exports[`matches snapshot 1`] = `
             </span>
           </button>
           <button
-            class="Button-module_button__1msFE Button-module_secondary__1nABp editButton"
+            class="Button-module_button__P7hTI Button-module_secondary__ieoHb editButton"
             type="button"
           >
             <div
               aria-hidden="true"
-              class="Button-module_icon__O-h7R"
+              class="Button-module_icon__Di-Ga"
             >
               <svg
                 aria-hidden="true"
                 aria-label="pen"
-                class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+                class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
                 role="img"
                 viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg"
@@ -101,17 +101,17 @@ exports[`matches snapshot 1`] = `
             </span>
           </button>
           <button
-            class="Button-module_button__1msFE Button-module_secondary__1nABp deleteButton actionButton"
+            class="Button-module_button__P7hTI Button-module_secondary__ieoHb deleteButton actionButton"
             type="button"
           >
             <div
               aria-hidden="true"
-              class="Button-module_icon__O-h7R"
+              class="Button-module_icon__Di-Ga"
             >
               <svg
                 aria-hidden="true"
                 aria-label="cross-circle"
-                class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+                class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
                 role="img"
                 viewBox="0 0 24 24"
                 xmlns="http://www.w3.org/2000/svg"
diff --git a/src/domain/occurrence/enrolmentDetails/enrolmentDetails.module.scss b/src/domain/occurrence/enrolmentDetails/enrolmentDetails.module.scss
index a7f21e822..b1520bd3e 100644
--- a/src/domain/occurrence/enrolmentDetails/enrolmentDetails.module.scss
+++ b/src/domain/occurrence/enrolmentDetails/enrolmentDetails.module.scss
@@ -74,10 +74,6 @@
   padding-right: var(--spacing-2-xl);
 }
 
-.detailsArea {
-  display: table;
-}
-
 .spacingRow {
   td {
     padding-top: var(--spacing-xl);
diff --git a/src/domain/occurrence/enrolmentTable/EnrolmentExpandToggleCell.tsx b/src/domain/occurrence/enrolmentTable/EnrolmentExpandToggleCell.tsx
new file mode 100644
index 000000000..a67faf35c
--- /dev/null
+++ b/src/domain/occurrence/enrolmentTable/EnrolmentExpandToggleCell.tsx
@@ -0,0 +1,34 @@
+import classNames from 'classnames';
+import { IconAngleDown } from 'hds-react';
+import * as React from 'react';
+
+import styles from './enrolmentTable.module.scss';
+
+type Props = {
+  isExpanded: boolean;
+  onToggle: () => void;
+  ariaLabel: string;
+};
+
+const EnrolmentExpandToggleCell: React.FC<Props> = ({
+  isExpanded,
+  onToggle,
+  ariaLabel,
+}) => {
+  return (
+    <button
+      type="button"
+      aria-label={ariaLabel}
+      onClick={onToggle}
+      aria-expanded={isExpanded}
+    >
+      <IconAngleDown
+        className={classNames(styles.iconAngle, {
+          [styles.iconAngleUp]: isExpanded,
+        })}
+      />
+    </button>
+  );
+};
+
+export default EnrolmentExpandToggleCell;
diff --git a/src/domain/occurrence/enrolmentTable/EnrolmentGroupSizeCell.tsx b/src/domain/occurrence/enrolmentTable/EnrolmentGroupSizeCell.tsx
new file mode 100644
index 000000000..9ff85e9f2
--- /dev/null
+++ b/src/domain/occurrence/enrolmentTable/EnrolmentGroupSizeCell.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+type Props = {
+  studyGroup: {
+    groupSize?: number | null;
+    amountOfAdult?: number | null;
+  };
+};
+
+const EnrolmentGroupSizeCell: React.FC<Props> = ({ studyGroup }) => {
+  return (
+    <>
+      {studyGroup.groupSize} / {studyGroup.amountOfAdult}
+    </>
+  );
+};
+
+export default EnrolmentGroupSizeCell;
diff --git a/src/domain/occurrence/enrolmentTable/EnrolmentQueueTable.tsx b/src/domain/occurrence/enrolmentTable/EnrolmentQueueTable.tsx
index bb0836f02..245a537fd 100644
--- a/src/domain/occurrence/enrolmentTable/EnrolmentQueueTable.tsx
+++ b/src/domain/occurrence/enrolmentTable/EnrolmentQueueTable.tsx
@@ -1,16 +1,16 @@
-import classNames from 'classnames';
-import { IconAngleDown } from 'hds-react';
+import { ColumnDef } from '@tanstack/react-table';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Column } from 'react-table';
 
 import QueueActionsDropdown from './actionsDropdown/QueueActionsDropdown';
 import AdditionalInfo from './additionalInfo/AdditionalInfo';
+import EnrolmentExpandToggleCell from './EnrolmentExpandToggleCell';
+import EnrolmentGroupSizeCell from './EnrolmentGroupSizeCell';
+import EnrolmentStatusCell from './EnrolmentStatusCell';
 import styles from './enrolmentTable.module.scss';
 import Table from '../../../common/components/table/Table';
 import { EventQueueEnrolmentFieldsFragment } from '../../../generated/graphql';
 import { formatLocalizedDate } from '../../../utils/time/format';
-import EnrolmentStatusBadge from '../../enrolment/enrolmentStatusBadge/EnrolmentStatusBadge';
 
 interface Props {
   enrolments: EventQueueEnrolmentFieldsFragment[];
@@ -29,83 +29,64 @@ const EnrolmentQueueTable: React.FC<Props> = ({
 
   const queuedEnrolmentsCount = enrolments.length;
 
-  const columns: Array<Column<EventQueueEnrolmentFieldsFragment>> = [
+  const columns: Array<ColumnDef<EventQueueEnrolmentFieldsFragment>> = [
     {
-      Header: t('occurrenceDetails.enrolmentTable.columnEnrolmentTime'),
-      accessor: (row) => formatLocalizedDate(new Date(row.enrolmentTime)),
+      header: t('occurrenceDetails.enrolmentTable.columnEnrolmentTime'),
+      accessorFn: (row: EventQueueEnrolmentFieldsFragment) =>
+        formatLocalizedDate(new Date(row.enrolmentTime)),
       id: 'enrolmentTime',
     },
     {
-      Header: t('occurrenceDetails.enrolmentTable.columnPersonName'),
-      accessor: (row) => row.person?.name,
+      header: t('occurrenceDetails.enrolmentTable.columnPersonName'),
+      accessorFn: (row: EventQueueEnrolmentFieldsFragment) => row.person?.name,
       id: 'personName',
     },
     {
-      Header: t('occurrenceDetails.enrolmentTable.columnStudyGroupName'),
-      accessor: (row) => row.studyGroup.unitName,
+      header: t('occurrenceDetails.enrolmentTable.columnStudyGroupName'),
+      accessorFn: (row: EventQueueEnrolmentFieldsFragment) =>
+        row.studyGroup.unitName,
       id: 'studyGroupName',
     },
     {
-      Header: t('occurrenceDetails.enrolmentTable.columnStudyGroupGroupName'),
-      accessor: (row) => row.studyGroup.groupName,
+      header: t('occurrenceDetails.enrolmentTable.columnStudyGroupGroupName'),
+      accessorFn: (row: EventQueueEnrolmentFieldsFragment) =>
+        row.studyGroup.groupName,
       id: 'studyGroupGroupName',
     },
     {
-      Header: t('occurrenceDetails.enrolmentTable.columnGroupSize'),
-      accessor: (row) => (
-        <>
-          {row.studyGroup.groupSize} / {row.studyGroup.amountOfAdult}
-        </>
+      header: t('occurrenceDetails.enrolmentTable.columnGroupSize'),
+      cell: ({ row }) => (
+        <EnrolmentGroupSizeCell studyGroup={row.original.studyGroup} />
       ),
       id: 'groupSize',
     },
     {
-      Header: t('occurrenceDetails.enrolmentTable.columnStatus'),
-      accessor: (row) =>
-        row.status ? <EnrolmentStatusBadge status={row.status} /> : null,
+      header: t('occurrenceDetails.enrolmentTable.columnStatus'),
+      cell: ({ row }) => <EnrolmentStatusCell status={row.original.status} />,
       id: 'status',
     },
     {
-      Header: t('occurrenceDetails.enrolmentTable.columnActions'),
-      accessor: (row) => (
+      header: t('occurrenceDetails.enrolmentTable.columnActions'),
+      cell: ({ row }) => (
         <QueueActionsDropdown
-          row={row}
+          row={row.original}
           eventId={eventId}
           occurrenceId={occurrenceId}
           onEnrolmentsModified={onEnrolmentsModified}
         />
       ),
       id: 'actions',
-      // rowClickDisabled: true,
     },
     {
-      Header: t('occurrenceDetails.enrolmentTable.columnAdditionalInfo'),
-      accessor: (row) => row,
-      // FIXME: type with UseExpandedColumnCell
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      Cell: ({ row }: any) => {
-        return (
-          <button
-            aria-label={t(
-              'occurrenceDetails.enrolmentTable.showEnrolmentDetails'
-            )}
-            {...row.getToggleRowExpandedProps()}
-            // row.isExpanded is undefined when is not expanded for some reason
-            aria-expanded={row.isExpanded ? true : false}
-          >
-            <IconAngleDown
-              className={classNames(styles.iconAngle, {
-                [styles.iconAngleUp]: row.isExpanded,
-              })}
-            />
-          </button>
-        );
-      },
-      // TODO: Styling after deps update
-      // styles: {
-      //   textAlign: 'center',
-      //   width: '1%',
-      // },
+      header: t('occurrenceDetails.enrolmentTable.columnAdditionalInfo'),
+      accessorFn: (row: EventQueueEnrolmentFieldsFragment) => row,
+      cell: ({ row }) => (
+        <EnrolmentExpandToggleCell
+          ariaLabel={t('occurrenceDetails.enrolmentTable.showEnrolmentDetails')}
+          isExpanded={row.getIsExpanded()}
+          onToggle={() => row.toggleExpanded()}
+        />
+      ),
       id: 'additionalInfo',
     },
   ];
@@ -128,7 +109,6 @@ const EnrolmentQueueTable: React.FC<Props> = ({
           columns={columns}
           data={enrolments}
           renderExpandedArea={renderEnrolmentInfo}
-          onRowClick={() => {}}
           expandedAreaOffset={1}
         />
       )}
diff --git a/src/domain/occurrence/enrolmentTable/EnrolmentStatusCell.tsx b/src/domain/occurrence/enrolmentTable/EnrolmentStatusCell.tsx
new file mode 100644
index 000000000..45b2a4566
--- /dev/null
+++ b/src/domain/occurrence/enrolmentTable/EnrolmentStatusCell.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+import EnrolmentStatusBadge from '../../enrolment/enrolmentStatusBadge/EnrolmentStatusBadge';
+
+type Props = {
+  status?: React.ComponentProps<typeof EnrolmentStatusBadge>['status'] | null;
+};
+
+const EnrolmentStatusCell: React.FC<Props> = ({ status }) => {
+  return status ? <EnrolmentStatusBadge status={status} /> : null;
+};
+
+export default EnrolmentStatusCell;
diff --git a/src/domain/occurrence/enrolmentTable/EnrolmentTable.tsx b/src/domain/occurrence/enrolmentTable/EnrolmentTable.tsx
index 97ebfcbf9..a50cac22a 100644
--- a/src/domain/occurrence/enrolmentTable/EnrolmentTable.tsx
+++ b/src/domain/occurrence/enrolmentTable/EnrolmentTable.tsx
@@ -1,12 +1,13 @@
-import classNames from 'classnames';
-import { IconAngleDown } from 'hds-react';
+import { ColumnDef, Row } from '@tanstack/react-table';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router';
-import { Column, Row } from 'react-table';
 
 import ActionsDropdown from './actionsDropdown/ActionsDropdown';
 import AdditionalInfo from './additionalInfo/AdditionalInfo';
+import EnrolmentExpandToggleCell from './EnrolmentExpandToggleCell';
+import EnrolmentGroupSizeCell from './EnrolmentGroupSizeCell';
+import EnrolmentStatusCell from './EnrolmentStatusCell';
 import styles from './enrolmentTable.module.scss';
 import Table from '../../../common/components/table/Table';
 import {
@@ -16,7 +17,6 @@ import {
 import useNavigate from '../../../hooks/useNavigate';
 import { formatLocalizedDate } from '../../../utils/time/format';
 import { ROUTES } from '../../app/routes/constants';
-import EnrolmentStatusBadge from '../../enrolment/enrolmentStatusBadge/EnrolmentStatusBadge';
 import { getNumberOfParticipants } from '../../enrolment/utils';
 
 interface Props {
@@ -65,47 +65,44 @@ const EnrolmentTable: React.FC<Props> = ({
     EnrolmentStatus.Pending
   );
 
-  const columns: Array<Column<EnrolmentFieldsFragment>> = [
+  const columns: ColumnDef<EnrolmentFieldsFragment>[] = [
     {
-      Header: t('occurrenceDetails.enrolmentTable.columnEnrolmentTime'),
-      accessor: (row) => formatLocalizedDate(new Date(row.enrolmentTime)),
+      header: t('occurrenceDetails.enrolmentTable.columnEnrolmentTime'),
+      accessorFn: (row) => formatLocalizedDate(new Date(row.enrolmentTime)),
       id: 'enrolmentTime',
     },
     {
-      Header: t('occurrenceDetails.enrolmentTable.columnPersonName'),
-      accessor: (row) => row.person?.name,
+      header: t('occurrenceDetails.enrolmentTable.columnPersonName'),
+      accessorFn: (row) => row.person?.name,
       id: 'personName',
     },
     {
-      Header: t('occurrenceDetails.enrolmentTable.columnStudyGroupName'),
-      accessor: (row) => row.studyGroup.unitName,
+      header: t('occurrenceDetails.enrolmentTable.columnStudyGroupName'),
+      accessorFn: (row) => row.studyGroup.unitName,
       id: 'studyGroupName',
     },
     {
-      Header: t('occurrenceDetails.enrolmentTable.columnStudyGroupGroupName'),
-      accessor: (row) => row.studyGroup.groupName,
+      header: t('occurrenceDetails.enrolmentTable.columnStudyGroupGroupName'),
+      accessorFn: (row) => row.studyGroup.groupName,
       id: 'studyGroupGroupName',
     },
     {
-      Header: t('occurrenceDetails.enrolmentTable.columnGroupSize'),
-      accessor: (row) => (
-        <>
-          {row.studyGroup.groupSize} / {row.studyGroup.amountOfAdult}
-        </>
+      header: t('occurrenceDetails.enrolmentTable.columnGroupSize'),
+      cell: ({ row }) => (
+        <EnrolmentGroupSizeCell studyGroup={row.original.studyGroup} />
       ),
       id: 'groupSize',
     },
     {
-      Header: t('occurrenceDetails.enrolmentTable.columnStatus'),
-      accessor: (row) =>
-        row.status ? <EnrolmentStatusBadge status={row.status} /> : null,
+      header: t('occurrenceDetails.enrolmentTable.columnStatus'),
+      cell: ({ row }) => <EnrolmentStatusCell status={row.original.status} />,
       id: 'status',
     },
     {
-      Header: t('occurrenceDetails.enrolmentTable.columnActions'),
-      accessor: (row) => (
+      header: t('occurrenceDetails.enrolmentTable.columnActions'),
+      cell: ({ row }) => (
         <ActionsDropdown
-          row={row}
+          row={row.original}
           eventId={eventId}
           onEnrolmentsModified={onEnrolmentsModified}
         />
@@ -113,33 +110,15 @@ const EnrolmentTable: React.FC<Props> = ({
       id: 'actions',
     },
     {
-      Header: t('occurrenceDetails.enrolmentTable.columnAdditionalInfo'),
-      accessor: (row) => row,
-      // FIXME: type with UseExpandedColumnCell
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      Cell: ({ row }: any) => {
-        return (
-          <button
-            aria-label={t(
-              'occurrenceDetails.enrolmentTable.showEnrolmentDetails'
-            )}
-            {...row.getToggleRowExpandedProps()}
-            // row.isExpanded is undefined when is not expanded for some reason
-            aria-expanded={!!row.isExpanded}
-          >
-            <IconAngleDown
-              className={classNames(styles.iconAngle, {
-                [styles.iconAngleUp]: row.isExpanded,
-              })}
-            />
-          </button>
-        );
-      },
-      // TODO: Styling after deps update
-      // style: {
-      //   textAlign: 'center',
-      //   width: '1%',
-      // },
+      header: t('occurrenceDetails.enrolmentTable.columnAdditionalInfo'),
+      accessorFn: (row: EnrolmentFieldsFragment) => row,
+      cell: ({ row }) => (
+        <EnrolmentExpandToggleCell
+          ariaLabel={t('occurrenceDetails.enrolmentTable.showEnrolmentDetails')}
+          isExpanded={row.getIsExpanded()}
+          onToggle={() => row.toggleExpanded()}
+        />
+      ),
       id: 'additionalInfo',
     },
   ];
diff --git a/src/domain/occurrence/enrolmentTable/actionsDropdown/ActionsDropdown.tsx b/src/domain/occurrence/enrolmentTable/actionsDropdown/ActionsDropdown.tsx
index 8335cc46e..40bde4b06 100644
--- a/src/domain/occurrence/enrolmentTable/actionsDropdown/ActionsDropdown.tsx
+++ b/src/domain/occurrence/enrolmentTable/actionsDropdown/ActionsDropdown.tsx
@@ -2,9 +2,10 @@ import { IconCheck, IconCross, IconCrossCircle, IconPen } from 'hds-react';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router';
-import { toast } from 'react-toastify';
 
 import styles from './actionsDropdown.module.scss';
+// eslint-disable-next-line max-len
+import { useNotificationsContext } from '../../../../common/components/notificationsContext/hooks/useNotificationsContext';
 import TableDropdown, {
   MenuItemProps,
 } from '../../../../common/components/tableDropdown/TableDropdown';
@@ -35,6 +36,7 @@ const ActionsDropdown: React.FC<Props> = ({
   onEnrolmentsModified,
 }) => {
   const { t } = useTranslation();
+  const { addNotification } = useNotificationsContext();
   const { occurrenceId } = useParams<{ occurrenceId: string }>();
   const { pushWithReturnPath } = useNavigate();
   const [approveModalOpen, setApproveModalOpen] = React.useState(false);
@@ -48,7 +50,10 @@ const ActionsDropdown: React.FC<Props> = ({
       // TODO: Better error message
       // eslint-disable-next-line no-console
       console.log(error.message);
-      toast.error(t('enrolment.approveEnrolmentError'));
+      addNotification({
+        label: t('enrolment.approveEnrolmentError'),
+        type: 'error',
+      });
     },
     onCompleted: () => {
       setApproveModalOpen(false);
@@ -61,7 +66,10 @@ const ActionsDropdown: React.FC<Props> = ({
       // TODO: Better error message
       // eslint-disable-next-line no-console
       console.log(error.message);
-      toast.error(t('enrolment.declineEnrolmentError'));
+      addNotification({
+        label: t('enrolment.declineEnrolmentError'),
+        type: 'error',
+      });
     },
     onCompleted: () => {
       setDeclineModalOpen(false);
@@ -74,7 +82,10 @@ const ActionsDropdown: React.FC<Props> = ({
       // TODO: Better error message
       // eslint-disable-next-line no-console
       console.log(error.message);
-      toast.error(t('enrolment.deleteEnrolmentError'));
+      addNotification({
+        label: t('enrolment.deleteEnrolmentError'),
+        type: 'error',
+      });
     },
     // TODO: might need a check if component is mounted
     onCompleted: () => {
diff --git a/src/domain/occurrence/enrolmentTable/actionsDropdown/QueueActionsDropdown.tsx b/src/domain/occurrence/enrolmentTable/actionsDropdown/QueueActionsDropdown.tsx
index 3ea8882b4..eef1396c6 100644
--- a/src/domain/occurrence/enrolmentTable/actionsDropdown/QueueActionsDropdown.tsx
+++ b/src/domain/occurrence/enrolmentTable/actionsDropdown/QueueActionsDropdown.tsx
@@ -1,9 +1,10 @@
 import { IconCheck, IconCrossCircle } from 'hds-react';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { toast } from 'react-toastify';
 
 import styles from './actionsDropdown.module.scss';
+// eslint-disable-next-line max-len
+import { useNotificationsContext } from '../../../../common/components/notificationsContext/hooks/useNotificationsContext';
 import TableDropdown, {
   MenuItemProps,
 } from '../../../../common/components/tableDropdown/TableDropdown';
@@ -33,6 +34,7 @@ const QueueActionsDropdown: React.FC<Props> = ({
   const [pickEnrolmentModalOpen, setPickEnrolmentModalOpen] =
     React.useState(false);
   const [deleteModalOpen, setDeleteModalOpen] = React.useState(false);
+  const { addNotification } = useNotificationsContext();
 
   const [pickEnrolment] = usePickEnrolmentFromQueueMutation({
     onError: (error) => {
@@ -43,9 +45,15 @@ const QueueActionsDropdown: React.FC<Props> = ({
           (e) => e?.extensions?.code === 'ALREADY_JOINED_EVENT_ERROR'
         )
       ) {
-        toast.error(t('enrolment.pickQueueEnrolmentDuplicateEntryError'));
+        addNotification({
+          type: 'error',
+          label: t('enrolment.pickQueueEnrolmentDuplicateEntryError'),
+        });
       } else {
-        toast.error(t('enrolment.pickQueueEnrolmentError'));
+        addNotification({
+          type: 'error',
+          label: t('enrolment.pickQueueEnrolmentError'),
+        });
       }
     },
     onCompleted: () => {
@@ -58,7 +66,10 @@ const QueueActionsDropdown: React.FC<Props> = ({
     onError: (error) => {
       // eslint-disable-next-line no-console
       console.error(error.message);
-      toast.error(t('enrolment.deleteEnrolmentError'));
+      addNotification({
+        type: 'error',
+        label: t('enrolment.deleteEnrolmentError'),
+      });
     },
     onCompleted: () => {
       setDeleteModalOpen(false);
diff --git a/src/domain/occurrence/enrolmentTable/actionsDropdown/__tests__/ActionsDropdown.test.tsx b/src/domain/occurrence/enrolmentTable/actionsDropdown/__tests__/ActionsDropdown.test.tsx
index 4b4e378bf..22350b44b 100644
--- a/src/domain/occurrence/enrolmentTable/actionsDropdown/__tests__/ActionsDropdown.test.tsx
+++ b/src/domain/occurrence/enrolmentTable/actionsDropdown/__tests__/ActionsDropdown.test.tsx
@@ -1,7 +1,6 @@
 import { screen, waitFor } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import * as React from 'react';
-import Modal from 'react-modal';
 
 import { tableDropdownTestId } from '../../../../../common/components/tableDropdown/TableDropdown';
 import { DeclineEnrolmentDocument } from '../../../../../generated/graphql';
@@ -60,9 +59,7 @@ it('open menu correctly', async () => {
 });
 
 it('canceling enrolment works from dropdown', async () => {
-  const { container } = renderComponent();
-
-  Modal.setAppElement(container);
+  renderComponent();
 
   await userEvent.click(screen.getByRole('button', { name: 'Valitse' }));
 
diff --git a/src/domain/occurrence/enrolmentTable/actionsDropdown/__tests__/QueueActionsDropdown.test.tsx b/src/domain/occurrence/enrolmentTable/actionsDropdown/__tests__/QueueActionsDropdown.test.tsx
index df84c3527..b57b5238c 100644
--- a/src/domain/occurrence/enrolmentTable/actionsDropdown/__tests__/QueueActionsDropdown.test.tsx
+++ b/src/domain/occurrence/enrolmentTable/actionsDropdown/__tests__/QueueActionsDropdown.test.tsx
@@ -1,7 +1,6 @@
 import { screen, waitFor } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import * as React from 'react';
-import Modal from 'react-modal';
 
 import { tableDropdownTestId } from '../../../../../common/components/tableDropdown/TableDropdown';
 import {
@@ -135,9 +134,7 @@ it('open menu correctly', async () => {
 });
 
 it('add to the enrolments list works from dropdown', async () => {
-  const { container } = renderComponent();
-
-  Modal.setAppElement(container);
+  renderComponent();
 
   await userEvent.click(screen.getByRole('button', { name: 'Valitse' }));
 
@@ -160,9 +157,7 @@ it('add to the enrolments list works from dropdown', async () => {
 });
 
 it('removing queued enrolment works from dropdown', async () => {
-  const { container } = renderComponent();
-
-  Modal.setAppElement(container);
+  renderComponent();
 
   await userEvent.click(screen.getByRole('button', { name: 'Valitse' }));
 
diff --git a/src/domain/occurrence/enrolmentTable/enrolmentModals/ApproveEnrolmentModal.tsx b/src/domain/occurrence/enrolmentTable/enrolmentModals/ApproveEnrolmentModal.tsx
index b37370d21..b106dc310 100644
--- a/src/domain/occurrence/enrolmentTable/enrolmentModals/ApproveEnrolmentModal.tsx
+++ b/src/domain/occurrence/enrolmentTable/enrolmentModals/ApproveEnrolmentModal.tsx
@@ -7,8 +7,6 @@ interface ApproveModalProps {
   onClose: () => void;
   approveEnrolment: (message: string) => void;
   enrollees?: EnrolleeProps[];
-  // appElement for testing purposes
-  appElement?: HTMLElement;
   loading?: boolean;
 }
 
@@ -16,7 +14,6 @@ const ApproveEnrolmentModal: React.FC<ApproveModalProps> = ({
   onClose,
   approveEnrolment,
   enrollees,
-  appElement,
   loading = false,
 }) => {
   const { t } = useTranslation();
@@ -26,7 +23,6 @@ const ApproveEnrolmentModal: React.FC<ApproveModalProps> = ({
     <EnrolmentModal
       onClose={onClose}
       title={t('enrolment.enrolmentModal.approveEnrolment')}
-      appElement={appElement}
       enrollees={enrollees}
       noteType="success"
       submitting={loading}
diff --git a/src/domain/occurrence/enrolmentTable/enrolmentModals/DeclineEnrolmentModal.tsx b/src/domain/occurrence/enrolmentTable/enrolmentModals/DeclineEnrolmentModal.tsx
index e06ca9948..d41e2e8b2 100644
--- a/src/domain/occurrence/enrolmentTable/enrolmentModals/DeclineEnrolmentModal.tsx
+++ b/src/domain/occurrence/enrolmentTable/enrolmentModals/DeclineEnrolmentModal.tsx
@@ -7,7 +7,6 @@ interface DeclineEnrolmentModalProps {
   onClose: () => void;
   declineEnrolment: (message?: string) => void;
   enrollees?: EnrolleeProps[];
-  appElement?: HTMLElement;
   loading?: boolean;
 }
 
@@ -15,7 +14,6 @@ const DeclineEnrolmentModal: React.FC<DeclineEnrolmentModalProps> = ({
   onClose,
   declineEnrolment,
   enrollees,
-  appElement,
   loading = false,
 }) => {
   const { t } = useTranslation();
@@ -25,9 +23,8 @@ const DeclineEnrolmentModal: React.FC<DeclineEnrolmentModalProps> = ({
     <EnrolmentModal
       onClose={onClose}
       title={t('enrolment.enrolmentModal.declineEnrolment')}
-      appElement={appElement}
       enrollees={enrollees}
-      noteType="decline"
+      noteType="error"
       noteSection
       noteText={t('enrolment.enrolmentModal.declineEnrolmentNote')}
       submitButtonText={t('enrolment.enrolmentModal.sendCancelMessage')}
diff --git a/src/domain/occurrence/enrolmentTable/enrolmentModals/DeleteEnrolmentModal.tsx b/src/domain/occurrence/enrolmentTable/enrolmentModals/DeleteEnrolmentModal.tsx
index 42866e658..78240c616 100644
--- a/src/domain/occurrence/enrolmentTable/enrolmentModals/DeleteEnrolmentModal.tsx
+++ b/src/domain/occurrence/enrolmentTable/enrolmentModals/DeleteEnrolmentModal.tsx
@@ -7,7 +7,6 @@ interface DeleteModalProps {
   onClose: () => void;
   deleteEnrolment: () => void;
   enrollees?: EnrolleeProps[];
-  appElement?: HTMLElement;
   loading?: boolean;
 }
 
@@ -15,7 +14,6 @@ const DeleteEnrolmentModal: React.FC<DeleteModalProps> = ({
   onClose,
   deleteEnrolment,
   enrollees,
-  appElement,
   loading = false,
 }) => {
   const { t } = useTranslation();
@@ -23,11 +21,11 @@ const DeleteEnrolmentModal: React.FC<DeleteModalProps> = ({
     <EnrolmentModal
       onClose={onClose}
       title={t('enrolment.enrolmentModal.deleteEnrolment')}
-      appElement={appElement}
       submitButtonText={t('enrolment.enrolmentModal.deleteEnrolment')}
       handleSubmit={deleteEnrolment}
       enrollees={enrollees}
       submitting={loading}
+      variant="danger"
     />
   );
 };
diff --git a/src/domain/occurrence/enrolmentTable/enrolmentModals/EnrolmentModal.tsx b/src/domain/occurrence/enrolmentTable/enrolmentModals/EnrolmentModal.tsx
index 7b9f29c93..cdd8a0973 100644
--- a/src/domain/occurrence/enrolmentTable/enrolmentModals/EnrolmentModal.tsx
+++ b/src/domain/occurrence/enrolmentTable/enrolmentModals/EnrolmentModal.tsx
@@ -1,18 +1,20 @@
-import classNames from 'classnames';
 import {
   Button,
+  ButtonPresetTheme,
   ButtonVariant,
   Checkbox,
-  IconCross,
+  DialogVariant,
+  IconAlertCircle,
+  IconInfoCircle,
   Notification,
   TextArea,
 } from 'hds-react';
 import React, { ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
-import ReactModal from 'react-modal';
 
 import EnrolleesList from './EnrolleesList';
 import styles from './enrolmentModals.module.scss';
+import BaseDialogModal from '../../../../common/components/modal/BaseDialogModal';
 
 export type EnrolleeProps = {
   personName?: string;
@@ -25,10 +27,9 @@ export type EnrolleeProps = {
 interface EnrolmentModalProps {
   onClose: () => void;
   title: string;
-  appElement?: HTMLElement;
   enrollees?: EnrolleeProps[];
   noteText?: string | ReactNode;
-  noteType?: 'success' | 'decline';
+  noteType?: 'error' | 'success';
   noteSection?: boolean;
   submitButtonText: string;
   handleSubmit: () => void;
@@ -37,12 +38,12 @@ interface EnrolmentModalProps {
   messageText?: string;
   submitting?: boolean;
   children?: React.ReactNode;
+  variant?: DialogVariant;
 }
 
 const EnrolmentModal: React.FC<EnrolmentModalProps> = ({
   children,
   title,
-  appElement,
   enrollees,
   noteText,
   noteType = 'success',
@@ -54,6 +55,7 @@ const EnrolmentModal: React.FC<EnrolmentModalProps> = ({
   handleSubmit,
   onMessageTextChange,
   onClose,
+  variant,
 }) => {
   const { t } = useTranslation();
   const [showMessageTextArea, setShowMessageTextArea] = React.useState(false);
@@ -62,16 +64,7 @@ const EnrolmentModal: React.FC<EnrolmentModalProps> = ({
   const renderModalContent = () => {
     return (
       <>
-        {noteText && (
-          <div
-            className={classNames({
-              [styles.infoNoteSuccess]: noteType === 'success',
-              [styles.infoNoteDecline]: noteType === 'decline',
-            })}
-          >
-            {noteText}
-          </div>
-        )}
+        {noteText && <Notification type={noteType}>{noteText}</Notification>}
         {hasEnrollees && <EnrolleesList enrollees={enrollees} />}
         {noteSection && (
           <div className={styles.addNoteSection}>
@@ -104,42 +97,48 @@ const EnrolmentModal: React.FC<EnrolmentModalProps> = ({
             )}
           </div>
         )}
-        <div className={styles.buttonsContainer}>
-          <Button variant={ButtonVariant.Secondary} onClick={onClose}>
-            {t('enrolment.enrolmentModal.cancelEnrolment')}
-          </Button>
-          <div className={styles.buttonsRight}>
-            <Button
-              variant={ButtonVariant.Primary}
-              onClick={handleSubmit}
-              disabled={submitting}
-            >
-              {submitButtonText}
-            </Button>
-          </div>
-        </div>
       </>
     );
   };
 
   return (
-    <ReactModal
+    <BaseDialogModal
+      id="alert-modal"
+      className={styles.modal}
       isOpen
-      bodyOpenClassName={styles.bodyOpen}
-      className={classNames(styles.modal)}
-      overlayClassName={styles.overlay}
-      appElement={appElement}
+      variant={variant}
+      title={title}
+      toggleModal={onClose}
+      style={{ width: 660 }}
+      iconStart={
+        variant === 'danger' ? <IconAlertCircle /> : <IconInfoCircle />
+      }
+      actions={
+        <>
+          <Button
+            theme={variant === 'danger' ? ButtonPresetTheme.Black : undefined}
+            variant={ButtonVariant.Secondary}
+            onClick={onClose}
+          >
+            {t('enrolment.enrolmentModal.cancelEnrolment')}
+          </Button>
+          <Button
+            variant={
+              variant === 'danger'
+                ? ButtonVariant.Danger
+                : ButtonVariant.Primary
+            }
+            onClick={handleSubmit}
+            disabled={submitting}
+          >
+            {submitButtonText}
+          </Button>
+        </>
+      }
     >
-      <div className={styles.titleRow}>
-        <p>{title}</p>
-        <button className={styles.closeButton} onClick={onClose}>
-          <IconCross />
-          {t('common.buttonClose')}
-        </button>
-      </div>
       {preview ? preview : renderModalContent()}
       {children}
-    </ReactModal>
+    </BaseDialogModal>
   );
 };
 
diff --git a/src/domain/occurrence/enrolmentTable/enrolmentModals/PickQueueEnrolmentModal.tsx b/src/domain/occurrence/enrolmentTable/enrolmentModals/PickQueueEnrolmentModal.tsx
index d53db01c1..ae4fd1b21 100644
--- a/src/domain/occurrence/enrolmentTable/enrolmentModals/PickQueueEnrolmentModal.tsx
+++ b/src/domain/occurrence/enrolmentTable/enrolmentModals/PickQueueEnrolmentModal.tsx
@@ -7,7 +7,6 @@ interface PickQueueEnrolmentModalProps {
   onClose: () => void;
   pickQueueEnrolment: () => void;
   enrollees?: EnrolleeProps[];
-  appElement?: HTMLElement;
   loading?: boolean;
 }
 
@@ -15,7 +14,6 @@ const PickQueueEnrolmentModal: React.FC<PickQueueEnrolmentModalProps> = ({
   onClose,
   pickQueueEnrolment,
   enrollees,
-  appElement,
   loading = false,
 }) => {
   const { t } = useTranslation();
@@ -23,7 +21,6 @@ const PickQueueEnrolmentModal: React.FC<PickQueueEnrolmentModalProps> = ({
     <EnrolmentModal
       onClose={onClose}
       title={t('enrolment.enrolmentModal.pickQueueEnrolmentTitle')}
-      appElement={appElement}
       submitButtonText={t('enrolment.enrolmentModal.pickQueueEnrolmentButton')}
       handleSubmit={pickQueueEnrolment}
       enrollees={enrollees}
diff --git a/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/ApproveEnrolmentModal.test.tsx b/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/ApproveEnrolmentModal.test.tsx
index 13a5e572e..9993bf730 100644
--- a/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/ApproveEnrolmentModal.test.tsx
+++ b/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/ApproveEnrolmentModal.test.tsx
@@ -1,4 +1,4 @@
-import { waitFor, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';
 
@@ -8,22 +8,11 @@ import ApproveEnrolmentModal from '../ApproveEnrolmentModal';
 import { EnrolleeProps } from '../EnrolmentModal';
 import persons from '../mocks/persons';
 
-it('matches snapshot', async () => {
+it('matches snapshot', () => {
   const { baseElement } = customRender(
-    <ApproveEnrolmentModal
-      onClose={vi.fn()}
-      approveEnrolment={vi.fn()}
-      appElement={document.body}
-    />
+    <ApproveEnrolmentModal onClose={vi.fn()} approveEnrolment={vi.fn()} />
   );
 
-  await waitFor(() => {
-    // A small "hack" to wait for modal to open fully
-    expect(
-      baseElement.querySelector('.ReactModal__Content--after-open')
-    ).toBeInTheDocument();
-  });
-
   expect(baseElement).toMatchSnapshot();
 });
 
@@ -34,7 +23,6 @@ it('renders correctly and calls approve enrolment handler', async () => {
     <ApproveEnrolmentModal
       onClose={onCloseHandler}
       approveEnrolment={approveEnrolmentHandler}
-      appElement={document.body}
     />
   );
 
@@ -78,11 +66,7 @@ it('renders correctly and calls approve enrolment handler', async () => {
 
 it('opens message section when checkbox is clicked and text can be written', async () => {
   customRender(
-    <ApproveEnrolmentModal
-      onClose={vi.fn()}
-      approveEnrolment={vi.fn()}
-      appElement={document.body}
-    />
+    <ApproveEnrolmentModal onClose={vi.fn()} approveEnrolment={vi.fn()} />
   );
 
   const addMessageCheckbox = screen.getByLabelText(/lisää viesti/i);
@@ -104,7 +88,6 @@ it('renders enrollees list correctly', async () => {
     <ApproveEnrolmentModal
       onClose={vi.fn()}
       approveEnrolment={vi.fn()}
-      appElement={document.body}
       enrollees={persons as EnrolleeProps[]}
     />
   );
diff --git a/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/DeclineEnrolmentModal.test.tsx b/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/DeclineEnrolmentModal.test.tsx
index 04b38ebb7..e95f68d83 100644
--- a/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/DeclineEnrolmentModal.test.tsx
+++ b/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/DeclineEnrolmentModal.test.tsx
@@ -12,29 +12,9 @@ configure({ defaultHidden: true });
 
 it('matches snapshot', async () => {
   const { baseElement } = customRender(
-    <DeclineEnrolmentModal
-      onClose={vi.fn()}
-      declineEnrolment={vi.fn()}
-      appElement={document.body}
-    />
+    <DeclineEnrolmentModal onClose={vi.fn()} declineEnrolment={vi.fn()} />
   );
 
-  // Wait until the modal has opened so the snapshot is consistent
-  await waitFor(() => {
-    expect(
-      baseElement.querySelector(
-        '.ReactModal__Overlay.ReactModal__Overlay--after-open'
-      )
-    ).toBeInTheDocument();
-  });
-  await waitFor(() => {
-    expect(
-      baseElement.querySelector(
-        '.ReactModal__Content.ReactModal__Content--after-open'
-      )
-    ).toBeInTheDocument();
-  });
-
   expect(baseElement).toMatchSnapshot();
 });
 
@@ -45,7 +25,6 @@ it('renders correctly and calls decline enrolment handler', async () => {
     <DeclineEnrolmentModal
       onClose={onCloseHandler}
       declineEnrolment={declineEnrolmentHandler}
-      appElement={document.body}
     />
   );
 
@@ -74,7 +53,6 @@ it('calls close handle when close button is clicked', async () => {
     <DeclineEnrolmentModal
       onClose={onCloseHandler}
       declineEnrolment={declineEnrolmentHandler}
-      appElement={document.body}
     />
   );
 
@@ -92,7 +70,6 @@ it('renders enrollees list correctly', async () => {
     <DeclineEnrolmentModal
       onClose={vi.fn()}
       declineEnrolment={vi.fn()}
-      appElement={document.body}
       enrollees={persons as EnrolleeProps[]}
     />
   );
diff --git a/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/DeleteEnrolmentModal.test.tsx b/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/DeleteEnrolmentModal.test.tsx
index d28364731..6d3d036de 100644
--- a/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/DeleteEnrolmentModal.test.tsx
+++ b/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/DeleteEnrolmentModal.test.tsx
@@ -10,11 +10,7 @@ configure({ defaultHidden: true });
 
 it('matches snapshot', () => {
   const { baseElement } = customRender(
-    <DeleteEnrolmentModal
-      onClose={vi.fn()}
-      deleteEnrolment={vi.fn()}
-      appElement={document.body}
-    />
+    <DeleteEnrolmentModal onClose={vi.fn()} deleteEnrolment={vi.fn()} />
   );
 
   expect(baseElement).toMatchSnapshot();
@@ -27,19 +23,17 @@ it('renders correctly and calls delete enrolment handler when button is clicked'
     <DeleteEnrolmentModal
       onClose={onCloseHandler}
       deleteEnrolment={deleteEnrolmentHandler}
-      appElement={document.body}
     />
   );
 
   expect(
-    screen.getByText(messages.enrolment.enrolmentModal.deleteEnrolment, {
-      selector: 'p',
+    screen.getByRole('heading', {
+      name: messages.enrolment.enrolmentModal.deleteEnrolment,
     })
   ).toBeInTheDocument();
 
   const deleteEnrolmentButton = screen.getByRole('button', {
     name: messages.enrolment.enrolmentModal.deleteEnrolment,
-    // for some reason react-modal sets aria-hidden attribute true in the tests.
   });
 
   await userEvent.click(deleteEnrolmentButton);
diff --git a/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/EnrolmentModal.test.tsx b/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/EnrolmentModal.test.tsx
index a190827db..6b2695229 100644
--- a/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/EnrolmentModal.test.tsx
+++ b/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/EnrolmentModal.test.tsx
@@ -10,7 +10,6 @@ it('matches snapshot', () => {
     <EnrolmentModal
       title="Title"
       onClose={vi.fn()}
-      appElement={document.body}
       submitButtonText={''}
       handleSubmit={function (): void {
         throw new Error('Function not implemented.');
@@ -27,7 +26,6 @@ it('renders correctly and calls onClose handler when close button is clicked', a
     <EnrolmentModal
       title="Title"
       onClose={onCloseHandler}
-      appElement={document.body}
       submitButtonText={''}
       handleSubmit={function (): void {
         throw new Error('Function not implemented.');
@@ -37,7 +35,9 @@ it('renders correctly and calls onClose handler when close button is clicked', a
 
   expect(screen.getByText(/Title/i)).toBeInTheDocument();
 
-  const closeButton = screen.getByText(/sulje/i);
+  const closeButton = screen.getByRole('button', {
+    name: /sulje/i,
+  });
   await userEvent.click(closeButton);
 
   expect(onCloseHandler).toHaveBeenCalledTimes(1);
diff --git a/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/PickQueueEnrolmentModal.test.tsx b/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/PickQueueEnrolmentModal.test.tsx
index f78aa0433..b6e422fbf 100644
--- a/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/PickQueueEnrolmentModal.test.tsx
+++ b/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/PickQueueEnrolmentModal.test.tsx
@@ -12,11 +12,7 @@ configure({ defaultHidden: true });
 
 it('matches snapshot', () => {
   const { baseElement } = customRender(
-    <PickQueueEnrolmentModal
-      onClose={vi.fn()}
-      pickQueueEnrolment={vi.fn()}
-      appElement={document.body}
-    />
+    <PickQueueEnrolmentModal onClose={vi.fn()} pickQueueEnrolment={vi.fn()} />
   );
 
   expect(baseElement).toMatchSnapshot();
@@ -29,22 +25,17 @@ it('renders correctly and calls delete enrolment handler when button is clicked'
     <PickQueueEnrolmentModal
       onClose={onCloseHandler}
       pickQueueEnrolment={pickQueueEnrolmentHandler}
-      appElement={document.body}
     />
   );
 
   expect(
-    screen.getByText(
-      messages.enrolment.enrolmentModal.pickQueueEnrolmentTitle,
-      {
-        selector: 'p',
-      }
-    )
+    screen.getByRole('heading', {
+      name: messages.enrolment.enrolmentModal.pickQueueEnrolmentTitle,
+    })
   ).toBeInTheDocument();
 
   const pickQueueEnrolmentButton = screen.getByRole('button', {
     name: messages.enrolment.enrolmentModal.pickQueueEnrolmentButton,
-    // for some reason react-modal sets aria-hidden attribute true in the tests.
   });
 
   await userEvent.click(pickQueueEnrolmentButton);
@@ -57,7 +48,6 @@ it('renders enrollees list correctly', async () => {
     <PickQueueEnrolmentModal
       onClose={vi.fn()}
       pickQueueEnrolment={vi.fn()}
-      appElement={document.body}
       enrollees={persons as EnrolleeProps[]}
     />
   );
diff --git a/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/__snapshots__/ApproveEnrolmentModal.test.tsx.snap b/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/__snapshots__/ApproveEnrolmentModal.test.tsx.snap
index 5e28f9a0f..2abb7327a 100644
--- a/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/__snapshots__/ApproveEnrolmentModal.test.tsx.snap
+++ b/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/__snapshots__/ApproveEnrolmentModal.test.tsx.snap
@@ -2,45 +2,49 @@
 
 exports[`matches snapshot 1`] = `
 <body
-  aria-hidden="true"
-  class="bodyOpen"
+  class="Dialog-module_dialogVisibleBodyWithHiddenScrollbars__eArF1"
 >
   <div
-    data-react-modal-body-trap=""
-    style="position: absolute; opacity: 0;"
+    class="hds-dialog-tab-barrier"
     tabindex="0"
   />
   <div />
   <div
-    data-react-modal-body-trap=""
-    style="position: absolute; opacity: 0;"
-    tabindex="0"
-  />
-  <div
-    class="ReactModalPortal"
+    class="Dialog-module_dialogContainer__IlskD"
   >
     <div
-      class="ReactModal__Overlay ReactModal__Overlay--after-open overlay"
+      aria-hidden="true"
+      tabindex="0"
+    />
+    <div
+      class="Dialog-module_dialogBackdrop__rrNEv"
+      tabindex="-1"
+    />
+    <div
+      aria-describedby="alert-modal-_r_0_-content"
+      aria-labelledby="alert-modal-_r_0_-title"
+      aria-modal="true"
+      class="Dialog-module_dialog__sgogf Dialog-module_dialogVisible__-FiV6 modal"
+      id="alert-modal-_r_0_"
+      role="dialog"
+      style="width: 660px;"
+      title="Hyväksy ilmoittautuminen"
     >
       <div
-        aria-modal="true"
-        class="ReactModal__Content ReactModal__Content--after-open modal"
-        role="dialog"
-        tabindex="-1"
+        class="DialogHeader-module_dialogHeader__OUucg"
       >
         <div
-          class="titleRow"
+          class="DialogHeader-module_dialogHeaderContent__MJb-P"
         >
-          <p>
-            Hyväksy ilmoittautuminen
-          </p>
           <button
-            class="closeButton"
+            aria-label="Sulje"
+            class="DialogHeader-module_dialogHeaderClose__rGj-d"
+            type="button"
           >
             <svg
               aria-hidden="true"
               aria-label="cross"
-              class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+              class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
               role="img"
               viewBox="0 0 24 24"
               xmlns="http://www.w3.org/2000/svg"
@@ -52,28 +56,67 @@ exports[`matches snapshot 1`] = `
                 fill-rule="evenodd"
               />
             </svg>
-            Sulje
           </button>
+          <h2
+            class="DialogHeader-module_dialogTitle__MIqNZ"
+            id="alert-modal-_r_0_-title"
+            tabindex="-1"
+          >
+            <span
+              aria-hidden="true"
+              class="DialogHeader-module_dialogTitleStartIcon__97JWN"
+            >
+              <svg
+                aria-hidden="true"
+                aria-label="info-circle"
+                class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
+                role="img"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 10V16.5H15V18H9V16.5H11V11.5H9V10H13ZM11.8125 6C12.5374 6 13.125 6.5876 13.125 7.3125C13.125 8.03735 12.5374 8.625 11.8125 8.625C11.0876 8.625 10.5 8.03735 10.5 7.3125C10.5 6.5876 11.0876 6 11.8125 6Z"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+            Hyväksy ilmoittautuminen
+          </h2>
         </div>
-        <div
-          class="infoNoteSuccess"
+      </div>
+      <div
+        class="DialogContent-module_dialogContent__H44XI"
+        id="alert-modal-_r_0_-content"
+      >
+        <section
+          aria-label="Notification"
+          class="Notification-module_notification__B-lEy notification_hds-notification__ATD7H Notification-module_success__YL8vG notification_hds-notification--success__TCkt-"
         >
-          Valittujien ilmoittautujien osallistuminen vahvistetaan ja heille lähetetään vahvistusviesti tapahtuman tiedoilla.
-        </div>
+          <div
+            class="Notification-module_content__vhU-q notification_hds-notification__content__ZA7zV"
+          >
+            <div
+              class="Notification-module_body__vly7X notification_hds-notification__body__2iFcY"
+            >
+              Valittujien ilmoittautujien osallistuminen vahvistetaan ja heille lähetetään vahvistusviesti tapahtuman tiedoilla.
+            </div>
+          </div>
+        </section>
         <div
           class="addNoteSection"
         >
           <div
-            class="Checkbox-module_checkbox__3r5uI noteCheckbox"
+            class="Checkbox-module_checkbox__CYHqn noteCheckbox"
           >
             <input
-              class="Checkbox-module_input__2bdJk"
+              class="Checkbox-module_input__8VEto"
               id="add-note"
               type="checkbox"
-              value=""
             />
             <label
-              class="Checkbox-module_label__148Ac"
+              class="Checkbox-module_label__E-Trx"
               for="add-note"
             >
               Lisää viesti
@@ -84,20 +127,20 @@ exports[`matches snapshot 1`] = `
           >
             <section
               aria-label="Notification"
-              class="Notification-module_notification__3eUBu notification_hds-notification__2DQPN"
+              class="Notification-module_notification__B-lEy notification_hds-notification__ATD7H"
             >
               <div
-                class="Notification-module_content__2E8Z_ notification_hds-notification__content__5ylSS"
+                class="Notification-module_content__vhU-q notification_hds-notification__content__ZA7zV"
               >
                 <div
                   aria-level="2"
-                  class="Notification-module_label__2OUcx notification_hds-notification__label__2t1lR"
+                  class="Notification-module_label__IlQde notification_hds-notification__label__dXfk6"
                   role="heading"
                 >
                   <svg
                     aria-hidden="true"
                     aria-label="info-circle-fill"
-                    class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik Notification-module_icon__3xieh notification_hds-icon__29HQM"
+                    class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo Notification-module_icon__9wV6Q notification_hds-icon__EGzQ6"
                     role="img"
                     viewBox="0 0 24 24"
                     xmlns="http://www.w3.org/2000/svg"
@@ -112,7 +155,7 @@ exports[`matches snapshot 1`] = `
                   Vahvistusviesti sisältää automaattisesti seuraavat tiedot
                 </div>
                 <div
-                  class="Notification-module_body__2lrYE notification_hds-notification__body__3cobH"
+                  class="Notification-module_body__vly7X notification_hds-notification__body__2iFcY"
                 >
                   Personoitu tervehdys, ilmoittautuminen vahvistettu, tapahtuman tiedot, aika, varattujen paikkojen lukumäärä, kieli, paikka, osoite, järjestäjän yhteystiedot.
                 </div>
@@ -120,32 +163,36 @@ exports[`matches snapshot 1`] = `
             </section>
           </div>
         </div>
-        <div
-          class="buttonsContainer"
+      </div>
+      <div
+        class="DialogActionButtons-module_dialogActionButtons__6u3kk"
+      >
+        <button
+          class="Button-module_button__P7hTI Button-module_secondary__ieoHb"
+          type="button"
         >
-          <button
-            class="Button-module_button__1msFE Button-module_secondary__1nABp"
-            type="button"
-          >
-            <span>
-              Peruuta
-            </span>
-          </button>
-          <div
-            class="buttonsRight"
-          >
-            <button
-              class="Button-module_button__1msFE Button-module_primary__2LfKB"
-              type="button"
-            >
-              <span>
-                Lähetä vahvistusviesti
-              </span>
-            </button>
-          </div>
-        </div>
+          <span>
+            Peruuta
+          </span>
+        </button>
+        <button
+          class="Button-module_button__P7hTI Button-module_primary__b-5q5"
+          type="button"
+        >
+          <span>
+            Lähetä vahvistusviesti
+          </span>
+        </button>
       </div>
     </div>
+    <div
+      aria-hidden="true"
+      tabindex="0"
+    />
   </div>
+  <div
+    class="hds-dialog-tab-barrier"
+    tabindex="0"
+  />
 </body>
 `;
diff --git a/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/__snapshots__/DeclineEnrolmentModal.test.tsx.snap b/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/__snapshots__/DeclineEnrolmentModal.test.tsx.snap
index d0e0b730b..d7646e074 100644
--- a/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/__snapshots__/DeclineEnrolmentModal.test.tsx.snap
+++ b/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/__snapshots__/DeclineEnrolmentModal.test.tsx.snap
@@ -2,45 +2,49 @@
 
 exports[`matches snapshot 1`] = `
 <body
-  aria-hidden="true"
-  class="bodyOpen"
+  class="Dialog-module_dialogVisibleBodyWithHiddenScrollbars__eArF1"
 >
   <div
-    data-react-modal-body-trap=""
-    style="position: absolute; opacity: 0;"
+    class="hds-dialog-tab-barrier"
     tabindex="0"
   />
   <div />
   <div
-    data-react-modal-body-trap=""
-    style="position: absolute; opacity: 0;"
-    tabindex="0"
-  />
-  <div
-    class="ReactModalPortal"
+    class="Dialog-module_dialogContainer__IlskD"
   >
     <div
-      class="ReactModal__Overlay ReactModal__Overlay--after-open overlay"
+      aria-hidden="true"
+      tabindex="0"
+    />
+    <div
+      class="Dialog-module_dialogBackdrop__rrNEv"
+      tabindex="-1"
+    />
+    <div
+      aria-describedby="alert-modal-_r_0_-content"
+      aria-labelledby="alert-modal-_r_0_-title"
+      aria-modal="true"
+      class="Dialog-module_dialog__sgogf Dialog-module_dialogVisible__-FiV6 modal"
+      id="alert-modal-_r_0_"
+      role="dialog"
+      style="width: 660px;"
+      title="Jätä ilman paikkaa"
     >
       <div
-        aria-modal="true"
-        class="ReactModal__Content ReactModal__Content--after-open modal"
-        role="dialog"
-        tabindex="-1"
+        class="DialogHeader-module_dialogHeader__OUucg"
       >
         <div
-          class="titleRow"
+          class="DialogHeader-module_dialogHeaderContent__MJb-P"
         >
-          <p>
-            Jätä ilman paikkaa
-          </p>
           <button
-            class="closeButton"
+            aria-label="Sulje"
+            class="DialogHeader-module_dialogHeaderClose__rGj-d"
+            type="button"
           >
             <svg
               aria-hidden="true"
               aria-label="cross"
-              class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+              class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
               role="img"
               viewBox="0 0 24 24"
               xmlns="http://www.w3.org/2000/svg"
@@ -52,60 +56,103 @@ exports[`matches snapshot 1`] = `
                 fill-rule="evenodd"
               />
             </svg>
-            Sulje
           </button>
+          <h2
+            class="DialogHeader-module_dialogTitle__MIqNZ"
+            id="alert-modal-_r_0_-title"
+            tabindex="-1"
+          >
+            <span
+              aria-hidden="true"
+              class="DialogHeader-module_dialogTitleStartIcon__97JWN"
+            >
+              <svg
+                aria-hidden="true"
+                aria-label="info-circle"
+                class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
+                role="img"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 10V16.5H15V18H9V16.5H11V11.5H9V10H13ZM11.8125 6C12.5374 6 13.125 6.5876 13.125 7.3125C13.125 8.03735 12.5374 8.625 11.8125 8.625C11.0876 8.625 10.5 8.03735 10.5 7.3125C10.5 6.5876 11.0876 6 11.8125 6Z"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+            Jätä ilman paikkaa
+          </h2>
         </div>
-        <div
-          class="infoNoteDecline"
+      </div>
+      <div
+        class="DialogContent-module_dialogContent__H44XI"
+        id="alert-modal-_r_0_-content"
+      >
+        <section
+          aria-label="Notification"
+          class="Notification-module_notification__B-lEy notification_hds-notification__ATD7H Notification-module_error__rdlmy notification_hds-notification--error__4siCc"
         >
-          Valittujien ilmoittautujien osallistumista ei vahvisteta. Heille lähetetään tieto jäämisestä ilman paikkaa.
-        </div>
+          <div
+            class="Notification-module_content__vhU-q notification_hds-notification__content__ZA7zV"
+          >
+            <div
+              class="Notification-module_body__vly7X notification_hds-notification__body__2iFcY"
+            >
+              Valittujien ilmoittautujien osallistumista ei vahvisteta. Heille lähetetään tieto jäämisestä ilman paikkaa.
+            </div>
+          </div>
+        </section>
         <div
           class="addNoteSection"
         >
           <div
-            class="Checkbox-module_checkbox__3r5uI noteCheckbox"
+            class="Checkbox-module_checkbox__CYHqn noteCheckbox"
           >
             <input
-              class="Checkbox-module_input__2bdJk"
+              class="Checkbox-module_input__8VEto"
               id="add-note"
               type="checkbox"
-              value=""
             />
             <label
-              class="Checkbox-module_label__148Ac"
+              class="Checkbox-module_label__E-Trx"
               for="add-note"
             >
               Lisää viesti
             </label>
           </div>
         </div>
-        <div
-          class="buttonsContainer"
+      </div>
+      <div
+        class="DialogActionButtons-module_dialogActionButtons__6u3kk"
+      >
+        <button
+          class="Button-module_button__P7hTI Button-module_secondary__ieoHb"
+          type="button"
         >
-          <button
-            class="Button-module_button__1msFE Button-module_secondary__1nABp"
-            type="button"
-          >
-            <span>
-              Peruuta
-            </span>
-          </button>
-          <div
-            class="buttonsRight"
-          >
-            <button
-              class="Button-module_button__1msFE Button-module_primary__2LfKB"
-              type="button"
-            >
-              <span>
-                Lähetä
-              </span>
-            </button>
-          </div>
-        </div>
+          <span>
+            Peruuta
+          </span>
+        </button>
+        <button
+          class="Button-module_button__P7hTI Button-module_primary__b-5q5"
+          type="button"
+        >
+          <span>
+            Lähetä
+          </span>
+        </button>
       </div>
     </div>
+    <div
+      aria-hidden="true"
+      tabindex="0"
+    />
   </div>
+  <div
+    class="hds-dialog-tab-barrier"
+    tabindex="0"
+  />
 </body>
 `;
diff --git a/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/__snapshots__/DeleteEnrolmentModal.test.tsx.snap b/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/__snapshots__/DeleteEnrolmentModal.test.tsx.snap
index 99dadfb0e..c728ab1e9 100644
--- a/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/__snapshots__/DeleteEnrolmentModal.test.tsx.snap
+++ b/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/__snapshots__/DeleteEnrolmentModal.test.tsx.snap
@@ -2,45 +2,49 @@
 
 exports[`matches snapshot 1`] = `
 <body
-  aria-hidden="true"
-  class="bodyOpen"
+  class="Dialog-module_dialogVisibleBodyWithHiddenScrollbars__eArF1"
 >
   <div
-    data-react-modal-body-trap=""
-    style="position: absolute; opacity: 0;"
+    class="hds-dialog-tab-barrier"
     tabindex="0"
   />
   <div />
   <div
-    data-react-modal-body-trap=""
-    style="position: absolute; opacity: 0;"
-    tabindex="0"
-  />
-  <div
-    class="ReactModalPortal"
+    class="Dialog-module_dialogContainer__IlskD"
   >
     <div
-      class="ReactModal__Overlay overlay"
+      aria-hidden="true"
+      tabindex="0"
+    />
+    <div
+      class="Dialog-module_dialogBackdrop__rrNEv"
+      tabindex="-1"
+    />
+    <div
+      aria-describedby="alert-modal-_r_0_-content"
+      aria-labelledby="alert-modal-_r_0_-title"
+      aria-modal="true"
+      class="Dialog-module_dialog__sgogf Dialog-module_dialogVisible__-FiV6 Dialog-module_danger__0DJ5G modal"
+      id="alert-modal-_r_0_"
+      role="dialog"
+      style="width: 660px;"
+      title="Poista ilmoittautuminen"
     >
       <div
-        aria-modal="true"
-        class="ReactModal__Content modal"
-        role="dialog"
-        tabindex="-1"
+        class="DialogHeader-module_dialogHeader__OUucg"
       >
         <div
-          class="titleRow"
+          class="DialogHeader-module_dialogHeaderContent__MJb-P"
         >
-          <p>
-            Poista ilmoittautuminen
-          </p>
           <button
-            class="closeButton"
+            aria-label="Sulje"
+            class="DialogHeader-module_dialogHeaderClose__rGj-d"
+            type="button"
           >
             <svg
               aria-hidden="true"
               aria-label="cross"
-              class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+              class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
               role="img"
               viewBox="0 0 24 24"
               xmlns="http://www.w3.org/2000/svg"
@@ -52,35 +56,69 @@ exports[`matches snapshot 1`] = `
                 fill-rule="evenodd"
               />
             </svg>
-            Sulje
-          </button>
-        </div>
-        <div
-          class="buttonsContainer"
-        >
-          <button
-            class="Button-module_button__1msFE Button-module_secondary__1nABp"
-            type="button"
-          >
-            <span>
-              Peruuta
-            </span>
           </button>
-          <div
-            class="buttonsRight"
+          <h2
+            class="DialogHeader-module_dialogTitle__MIqNZ"
+            id="alert-modal-_r_0_-title"
+            tabindex="-1"
           >
-            <button
-              class="Button-module_button__1msFE Button-module_primary__2LfKB"
-              type="button"
+            <span
+              aria-hidden="true"
+              class="DialogHeader-module_dialogTitleStartIcon__97JWN"
             >
-              <span>
-                Poista ilmoittautuminen
-              </span>
-            </button>
-          </div>
+              <svg
+                aria-hidden="true"
+                aria-label="alert-circle"
+                class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
+                role="img"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 16V18H11V16H13ZM13 6V14H11V6H13Z"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+            Poista ilmoittautuminen
+          </h2>
         </div>
       </div>
+      <div
+        class="DialogContent-module_dialogContent__H44XI"
+        id="alert-modal-_r_0_-content"
+      />
+      <div
+        class="DialogActionButtons-module_dialogActionButtons__6u3kk"
+      >
+        <button
+          class="Button-module_button__P7hTI Button-module_secondary__ieoHb Button-module_theme-black__fKE1n"
+          type="button"
+        >
+          <span>
+            Peruuta
+          </span>
+        </button>
+        <button
+          class="Button-module_button__P7hTI Button-module_danger__O1BGs"
+          type="button"
+        >
+          <span>
+            Poista ilmoittautuminen
+          </span>
+        </button>
+      </div>
     </div>
+    <div
+      aria-hidden="true"
+      tabindex="0"
+    />
   </div>
+  <div
+    class="hds-dialog-tab-barrier"
+    tabindex="0"
+  />
 </body>
 `;
diff --git a/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/__snapshots__/EnrolmentModal.test.tsx.snap b/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/__snapshots__/EnrolmentModal.test.tsx.snap
index cebd343bb..bf965d735 100644
--- a/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/__snapshots__/EnrolmentModal.test.tsx.snap
+++ b/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/__snapshots__/EnrolmentModal.test.tsx.snap
@@ -2,45 +2,49 @@
 
 exports[`matches snapshot 1`] = `
 <body
-  aria-hidden="true"
-  class="bodyOpen"
+  class="Dialog-module_dialogVisibleBodyWithHiddenScrollbars__eArF1"
 >
   <div
-    data-react-modal-body-trap=""
-    style="position: absolute; opacity: 0;"
+    class="hds-dialog-tab-barrier"
     tabindex="0"
   />
   <div />
   <div
-    data-react-modal-body-trap=""
-    style="position: absolute; opacity: 0;"
-    tabindex="0"
-  />
-  <div
-    class="ReactModalPortal"
+    class="Dialog-module_dialogContainer__IlskD"
   >
     <div
-      class="ReactModal__Overlay overlay"
+      aria-hidden="true"
+      tabindex="0"
+    />
+    <div
+      class="Dialog-module_dialogBackdrop__rrNEv"
+      tabindex="-1"
+    />
+    <div
+      aria-describedby="alert-modal-_r_0_-content"
+      aria-labelledby="alert-modal-_r_0_-title"
+      aria-modal="true"
+      class="Dialog-module_dialog__sgogf Dialog-module_dialogVisible__-FiV6 modal"
+      id="alert-modal-_r_0_"
+      role="dialog"
+      style="width: 660px;"
+      title="Title"
     >
       <div
-        aria-modal="true"
-        class="ReactModal__Content modal"
-        role="dialog"
-        tabindex="-1"
+        class="DialogHeader-module_dialogHeader__OUucg"
       >
         <div
-          class="titleRow"
+          class="DialogHeader-module_dialogHeaderContent__MJb-P"
         >
-          <p>
-            Title
-          </p>
           <button
-            class="closeButton"
+            aria-label="Sulje"
+            class="DialogHeader-module_dialogHeaderClose__rGj-d"
+            type="button"
           >
             <svg
               aria-hidden="true"
               aria-label="cross"
-              class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+              class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
               role="img"
               viewBox="0 0 24 24"
               xmlns="http://www.w3.org/2000/svg"
@@ -52,33 +56,67 @@ exports[`matches snapshot 1`] = `
                 fill-rule="evenodd"
               />
             </svg>
-            Sulje
-          </button>
-        </div>
-        <div
-          class="buttonsContainer"
-        >
-          <button
-            class="Button-module_button__1msFE Button-module_secondary__1nABp"
-            type="button"
-          >
-            <span>
-              Peruuta
-            </span>
           </button>
-          <div
-            class="buttonsRight"
+          <h2
+            class="DialogHeader-module_dialogTitle__MIqNZ"
+            id="alert-modal-_r_0_-title"
+            tabindex="-1"
           >
-            <button
-              class="Button-module_button__1msFE Button-module_primary__2LfKB"
-              type="button"
+            <span
+              aria-hidden="true"
+              class="DialogHeader-module_dialogTitleStartIcon__97JWN"
             >
-              <span />
-            </button>
-          </div>
+              <svg
+                aria-hidden="true"
+                aria-label="info-circle"
+                class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
+                role="img"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 10V16.5H15V18H9V16.5H11V11.5H9V10H13ZM11.8125 6C12.5374 6 13.125 6.5876 13.125 7.3125C13.125 8.03735 12.5374 8.625 11.8125 8.625C11.0876 8.625 10.5 8.03735 10.5 7.3125C10.5 6.5876 11.0876 6 11.8125 6Z"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+            Title
+          </h2>
         </div>
       </div>
+      <div
+        class="DialogContent-module_dialogContent__H44XI"
+        id="alert-modal-_r_0_-content"
+      />
+      <div
+        class="DialogActionButtons-module_dialogActionButtons__6u3kk"
+      >
+        <button
+          class="Button-module_button__P7hTI Button-module_secondary__ieoHb"
+          type="button"
+        >
+          <span>
+            Peruuta
+          </span>
+        </button>
+        <button
+          class="Button-module_button__P7hTI Button-module_primary__b-5q5"
+          type="button"
+        >
+          <span />
+        </button>
+      </div>
     </div>
+    <div
+      aria-hidden="true"
+      tabindex="0"
+    />
   </div>
+  <div
+    class="hds-dialog-tab-barrier"
+    tabindex="0"
+  />
 </body>
 `;
diff --git a/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/__snapshots__/PickQueueEnrolmentModal.test.tsx.snap b/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/__snapshots__/PickQueueEnrolmentModal.test.tsx.snap
index 17689f0a9..5e02c7178 100644
--- a/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/__snapshots__/PickQueueEnrolmentModal.test.tsx.snap
+++ b/src/domain/occurrence/enrolmentTable/enrolmentModals/__tests__/__snapshots__/PickQueueEnrolmentModal.test.tsx.snap
@@ -2,45 +2,49 @@
 
 exports[`matches snapshot 1`] = `
 <body
-  aria-hidden="true"
-  class="bodyOpen"
+  class="Dialog-module_dialogVisibleBodyWithHiddenScrollbars__eArF1"
 >
   <div
-    data-react-modal-body-trap=""
-    style="position: absolute; opacity: 0;"
+    class="hds-dialog-tab-barrier"
     tabindex="0"
   />
   <div />
   <div
-    data-react-modal-body-trap=""
-    style="position: absolute; opacity: 0;"
-    tabindex="0"
-  />
-  <div
-    class="ReactModalPortal"
+    class="Dialog-module_dialogContainer__IlskD"
   >
     <div
-      class="ReactModal__Overlay overlay"
+      aria-hidden="true"
+      tabindex="0"
+    />
+    <div
+      class="Dialog-module_dialogBackdrop__rrNEv"
+      tabindex="-1"
+    />
+    <div
+      aria-describedby="alert-modal-_r_0_-content"
+      aria-labelledby="alert-modal-_r_0_-title"
+      aria-modal="true"
+      class="Dialog-module_dialog__sgogf Dialog-module_dialogVisible__-FiV6 modal"
+      id="alert-modal-_r_0_"
+      role="dialog"
+      style="width: 660px;"
+      title="Lisää ilmoittautuminen"
     >
       <div
-        aria-modal="true"
-        class="ReactModal__Content modal"
-        role="dialog"
-        tabindex="-1"
+        class="DialogHeader-module_dialogHeader__OUucg"
       >
         <div
-          class="titleRow"
+          class="DialogHeader-module_dialogHeaderContent__MJb-P"
         >
-          <p>
-            Lisää ilmoittautuminen
-          </p>
           <button
-            class="closeButton"
+            aria-label="Sulje"
+            class="DialogHeader-module_dialogHeaderClose__rGj-d"
+            type="button"
           >
             <svg
               aria-hidden="true"
               aria-label="cross"
-              class="Icon-module_icon__1Jtzj icon_hds-icon__1YqNC Icon-module_small__gTGkU icon_hds-icon--size-s__2Lkik"
+              class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
               role="img"
               viewBox="0 0 24 24"
               xmlns="http://www.w3.org/2000/svg"
@@ -52,35 +56,69 @@ exports[`matches snapshot 1`] = `
                 fill-rule="evenodd"
               />
             </svg>
-            Sulje
-          </button>
-        </div>
-        <div
-          class="buttonsContainer"
-        >
-          <button
-            class="Button-module_button__1msFE Button-module_secondary__1nABp"
-            type="button"
-          >
-            <span>
-              Peruuta
-            </span>
           </button>
-          <div
-            class="buttonsRight"
+          <h2
+            class="DialogHeader-module_dialogTitle__MIqNZ"
+            id="alert-modal-_r_0_-title"
+            tabindex="-1"
           >
-            <button
-              class="Button-module_button__1msFE Button-module_primary__2LfKB"
-              type="button"
+            <span
+              aria-hidden="true"
+              class="DialogHeader-module_dialogTitleStartIcon__97JWN"
             >
-              <span>
-                Lisää ilmoittautumislistalle
-              </span>
-            </button>
-          </div>
+              <svg
+                aria-hidden="true"
+                aria-label="info-circle"
+                class="Icon-module_icon__JQmVx icon_hds-icon__O6EV0 Icon-module_small__nAApk icon_hds-icon--size-s__SloSo"
+                role="img"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2ZM12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM13 10V16.5H15V18H9V16.5H11V11.5H9V10H13ZM11.8125 6C12.5374 6 13.125 6.5876 13.125 7.3125C13.125 8.03735 12.5374 8.625 11.8125 8.625C11.0876 8.625 10.5 8.03735 10.5 7.3125C10.5 6.5876 11.0876 6 11.8125 6Z"
+                  fill="currentColor"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+            Lisää ilmoittautuminen
+          </h2>
         </div>
       </div>
+      <div
+        class="DialogContent-module_dialogContent__H44XI"
+        id="alert-modal-_r_0_-content"
+      />
+      <div
+        class="DialogActionButtons-module_dialogActionButtons__6u3kk"
+      >
+        <button
+          class="Button-module_button__P7hTI Button-module_secondary__ieoHb"
+          type="button"
+        >
+          <span>
+            Peruuta
+          </span>
+        </button>
+        <button
+          class="Button-module_button__P7hTI Button-module_primary__b-5q5"
+          type="button"
+        >
+          <span>
+            Lisää ilmoittautumislistalle
+          </span>
+        </button>
+      </div>
     </div>
+    <div
+      aria-hidden="true"
+      tabindex="0"
+    />
   </div>
+  <div
+    class="hds-dialog-tab-barrier"
+    tabindex="0"
+  />
 </body>
 `;
diff --git a/src/domain/occurrence/enrolmentTable/enrolmentModals/enrolmentModals.module.scss b/src/domain/occurrence/enrolmentTable/enrolmentModals/enrolmentModals.module.scss
index 28c0ce37d..191f0e5e5 100644
--- a/src/domain/occurrence/enrolmentTable/enrolmentModals/enrolmentModals.module.scss
+++ b/src/domain/occurrence/enrolmentTable/enrolmentModals/enrolmentModals.module.scss
@@ -1,103 +1,7 @@
-@use '~styles/layout';
-
-.bodyOpen {
-  overflow: hidden;
-}
-
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(#000, 0.75);
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  z-index: 99999;
-  overflow: auto;
-}
-
 .modal {
-  --background-color-modal: var(--color-white);
-
-  --lineheight-title: 2.5rem;
-
-  --spacing-modal: var(--spacing-l);
-  --width-modal: 660px;
-  --modal-top-padding: 100px;
   --section-spacing: var(--spacing-m);
 }
 
-.modal {
-  background-color: var(--background-color-modal);
-  border: 1px solid var(--border-color-modal);
-  position: relative;
-  padding: var(--spacing-modal);
-  outline: none;
-  top: var(--modal-top-padding);
-  margin-bottom: var(--modal-top-padding);
-
-  @include layout.respond-below(l-plus) {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-
-  @include layout.respond-above(l-plus) {
-    width: var(--width-modal);
-  }
-}
-
-.titleRow {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  margin-bottom: var(--spacing-m);
-
-  p {
-    margin: 0;
-    font-weight: bold;
-  }
-}
-
-.closeButton {
-  display: flex;
-  align-items: center;
-
-  svg {
-    margin-right: var(--spacing-xs);
-  }
-}
-
-.buttonsContainer {
-  display: flex;
-  justify-content: space-between;
-  margin-top: var(--spacing-xl);
-
-  .buttonsRight {
-    display: flex;
-    justify-content: space-between;
-
-    button:not(:last-child) {
-      margin-right: var(--spacing-s);
-    }
-  }
-}
-
-.infoNoteSuccess {
-  padding: var(--spacing-s);
-  background-color: var(--color-success);
-  color: var(--color-white);
-}
-
-.infoNoteDecline {
-  padding: var(--spacing-s);
-  background-color: var(--color-error);
-  color: var(--color-white);
-}
-
 .enrollees {
   margin: var(--spacing-m) 0;
 }
@@ -109,7 +13,10 @@
 
   li {
     list-style: none;
-    margin-bottom: var(--spacing-m);
+
+    &:not(:last-child) {
+      margin-bottom: var(--spacing-m);
+    }
   }
 }
 
diff --git a/src/domain/occurrence/occurrencesFormPart/OccurrencesFormPart.tsx b/src/domain/occurrence/occurrencesFormPart/OccurrencesFormPart.tsx
index bfe248c83..1989bf24a 100644
--- a/src/domain/occurrence/occurrencesFormPart/OccurrencesFormPart.tsx
+++ b/src/domain/occurrence/occurrencesFormPart/OccurrencesFormPart.tsx
@@ -4,7 +4,6 @@ import { Field, Formik, FormikHelpers, useFormikContext } from 'formik';
 import { Button, IconMinusCircleFill } from 'hds-react';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { toast } from 'react-toastify';
 
 import CheckboxField from '../../../common/components/form/fields/CheckboxField';
 import DateInputFieldHDS from '../../../common/components/form/fields/DateInputFieldHDS';
@@ -43,6 +42,7 @@ import {
   getOrderedLanguageOptions,
 } from './utils';
 import getValidationSchema from './ValidationSchema';
+import { useNotificationsContext } from '../../../common/components/notificationsContext/hooks/useNotificationsContext';
 
 export const occurrencesFormTestId = 'occurrences-form';
 export const occurrencesTableTestId = 'occurrences-table';
@@ -355,6 +355,7 @@ const OccurrencesForm: React.FC<{
   const [confirmAddOccurrence, setConfirmAddOccurrence] = React.useState<
     (() => void) | null
   >(null);
+  const { addNotification } = useNotificationsContext();
 
   const { occurrences, id: eventId } = React.useMemo(
     () => getEventFields(eventData?.event, locale),
@@ -439,12 +440,18 @@ const OccurrencesForm: React.FC<{
           });
         },
       });
-      toast.success(t('eventForm.occurrences.saveSuccesful'));
+      addNotification({
+        type: 'success',
+        label: t('eventForm.occurrences.saveSuccesful'),
+      });
     } catch (error) {
       // Put form values back if mutation happens to fail.
       action.setValues(values);
       // TODO: Improve error handling when API returns more informative errors
-      toast.error(t('createOccurrence.error'));
+      addNotification({
+        type: 'error',
+        label: t('createOccurrence.error'),
+      });
       // eslint-disable-next-line no-console
       console.error('Failed to create occurrence', { error });
     }
@@ -464,14 +471,20 @@ const OccurrencesForm: React.FC<{
             });
           },
         });
-        toast.success(t('occurrences.deleteSuccess'));
+        addNotification({
+          type: 'success',
+          label: t('occurrences.deleteSuccess'),
+        });
       } catch (error) {
-        toast.error(t('occurrences.deleteError'));
+        addNotification({
+          type: 'error',
+          label: t('occurrences.deleteError'),
+        });
         // eslint-disable-next-line no-console
         console.error('Failed to delete occurrence', { error });
       }
     },
-    [deleteOccurrence, eventVariables, t]
+    [addNotification, deleteOccurrence, eventVariables, t]
   );
 
   // TODO: what to do is this is called when going to publish page and confirmation modal is opened?
diff --git a/src/domain/occurrence/occurrencesFormPart/occurrencesFormPart.module.scss b/src/domain/occurrence/occurrencesFormPart/occurrencesFormPart.module.scss
index 295d6b145..fded90148 100644
--- a/src/domain/occurrence/occurrencesFormPart/occurrencesFormPart.module.scss
+++ b/src/domain/occurrence/occurrencesFormPart/occurrencesFormPart.module.scss
@@ -8,10 +8,6 @@
   }
 }
 
-.noOccurrencesCheckBox {
-  margin: var(--spacing-l) 0;
-}
-
 .occurrenceFormRow {
   --grid-gap: var(--spacing-s);
   --date-column-width: calc(170px + 100px + var(--grid-gap));
diff --git a/src/domain/occurrences/occurrencesTable/ActionsDropdown.tsx b/src/domain/occurrences/occurrencesTable/ActionsDropdown.tsx
index 62e4b8b3f..0d3ad42f7 100644
--- a/src/domain/occurrences/occurrencesTable/ActionsDropdown.tsx
+++ b/src/domain/occurrences/occurrencesTable/ActionsDropdown.tsx
@@ -9,11 +9,11 @@ import {
 import { createEvent, EventAttributes } from 'ics';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { toast } from 'react-toastify';
 
 import styles from './actionsDropdown.module.scss';
 import CancelOccurrenceModal from './CancelOccurrenceModal';
 import AlertModal from '../../../common/components/modal/AlertModal';
+import { useNotificationsContext } from '../../../common/components/notificationsContext/hooks/useNotificationsContext';
 import TableDropdown, {
   MenuItemProps,
 } from '../../../common/components/tableDropdown/TableDropdown';
@@ -61,6 +61,7 @@ const ActionsDropdown: React.FC<Props> = ({
   const { data, loading: loadingPlace } = usePlaceQuery({
     variables: { id: placeId },
   });
+  const { addNotification } = useNotificationsContext();
 
   const {
     streetAddress,
@@ -88,7 +89,10 @@ const ActionsDropdown: React.FC<Props> = ({
       };
       createEvent(icsEvent, (error: Error | undefined, value: string) => {
         if (error) {
-          toast.error(t('occurrences.downloadCalendarError'));
+          addNotification({
+            type: 'error',
+            label: t('occurrences.downloadCalendarError'),
+          });
         } else {
           const blob = new Blob([value], { type: 'text/calendar' });
           saveAs(blob, `event_${event.id?.replace(/:/g, '')}.ics`);
diff --git a/src/domain/occurrences/occurrencesTable/CancelOccurrenceModal.tsx b/src/domain/occurrences/occurrencesTable/CancelOccurrenceModal.tsx
index 66c03e568..9529e7bdb 100644
--- a/src/domain/occurrences/occurrencesTable/CancelOccurrenceModal.tsx
+++ b/src/domain/occurrences/occurrencesTable/CancelOccurrenceModal.tsx
@@ -7,7 +7,6 @@ import EnrolmentModal from '../../occurrence/enrolmentTable/enrolmentModals/Enro
 interface CancelOccurrenceModalProps {
   onClose: () => void;
   cancelOccurrence: (message?: string) => void;
-  appElement?: HTMLElement;
   loading?: boolean;
   occurrenceId: string;
 }
@@ -15,7 +14,6 @@ interface CancelOccurrenceModalProps {
 const CancelOccurrenceModal: React.FC<CancelOccurrenceModalProps> = ({
   onClose,
   cancelOccurrence,
-  appElement,
   loading = false,
   occurrenceId,
 }) => {
@@ -38,10 +36,9 @@ const CancelOccurrenceModal: React.FC<CancelOccurrenceModalProps> = ({
     <EnrolmentModal
       onClose={onClose}
       title={t('occurrences.cancelModal.title')}
-      appElement={appElement}
       noteSection
       enrollees={enrollees}
-      noteType="decline"
+      noteType="error"
       noteText={
         <>
           <span>{t('occurrences.cancelModal.note1')}</span>
diff --git a/src/domain/occurrences/occurrencesTable/OccurrencesTable.tsx b/src/domain/occurrences/occurrencesTable/OccurrencesTable.tsx
deleted file mode 100644
index 2b326a5e7..000000000
--- a/src/domain/occurrences/occurrencesTable/OccurrencesTable.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-import { Checkbox } from 'hds-react';
-import * as React from 'react';
-import { useTranslation } from 'react-i18next';
-import { Row } from 'react-table';
-
-import ActionsDropdown from './ActionsDropdown';
-import styles from './occurrencesTable.module.scss';
-import Table from '../../../common/components/table/Table';
-import {
-  EventQuery,
-  OccurrenceFieldsFragment,
-  OccurrencesOccurrenceSeatTypeChoices,
-} from '../../../generated/graphql';
-import useNavigate from '../../../hooks/useNavigate';
-import formatTimeRange from '../../../utils/formatTimeRange';
-import { formatLocalizedDate } from '../../../utils/time/format';
-import { ROUTES } from '../../app/routes/constants';
-import { PUBLICATION_STATUS } from '../../events/constants';
-import { EnrolmentType } from '../../occurrence/constants';
-import { getEnrolmentType } from '../../occurrence/utils';
-import PlaceText from '../../place/PlaceText';
-import EnrolmentsBadge from '../enrolmentsBadge/EnrolmentsBadge';
-
-interface Props {
-  eventData?: EventQuery;
-  id: string;
-  occurrences: OccurrenceFieldsFragment[];
-  onDelete: (occurrence: OccurrenceFieldsFragment) => void;
-  onCancel?: (occurrence: OccurrenceFieldsFragment, message?: string) => void;
-}
-
-const OccurrencesTable: React.FC<Props> = ({
-  eventData,
-  id,
-  occurrences,
-  onDelete,
-  onCancel,
-}) => {
-  const { t } = useTranslation();
-  const { pushWithLocale } = useNavigate();
-  const [selectedOccurrences, setSelectedOccurrences] = React.useState<
-    string[]
-  >([]);
-  const eventId = eventData?.event?.id || '';
-  const eventLocationId = eventData?.event?.location?.id || '';
-  const isEventDraft =
-    eventData?.event?.publicationStatus === PUBLICATION_STATUS.DRAFT;
-  const isAllSelected = React.useMemo(
-    () => occurrences.every((o) => selectedOccurrences.includes(o.id)),
-    [occurrences, selectedOccurrences]
-  );
-
-  const selectAll = () => {
-    setSelectedOccurrences(occurrences.map((item) => item.id));
-  };
-
-  const unselectAll = () => {
-    setSelectedOccurrences([]);
-  };
-
-  const handleCheckboxChange = (row: OccurrenceFieldsFragment) => {
-    setSelectedOccurrences(
-      selectedOccurrences.includes(row.id)
-        ? selectedOccurrences.filter((item) => item !== row.id)
-        : [...selectedOccurrences, row.id]
-    );
-  };
-
-  const goToOccurrenceDetailsPage = (row: Row<OccurrenceFieldsFragment>) => {
-    pushWithLocale(
-      ROUTES.OCCURRENCE_DETAILS.replace(':id', eventId).replace(
-        ':occurrenceId',
-        row.original.id
-      )
-    );
-  };
-
-  // EnrolmentType.Internal is the default enrolment type instead of undefined, because it makes the testing much easier
-  const enrolmentType = eventData?.event
-    ? getEnrolmentType(eventData.event)
-    : EnrolmentType.Internal;
-
-  const columns = [
-    {
-      Header: (
-        <Checkbox
-          id={`${id}_select-all_checkbox`}
-          checked={isAllSelected}
-          onChange={isAllSelected ? unselectAll : selectAll}
-          aria-label={t('occurrences.table.labelChooseAllOccurrences')}
-        />
-      ),
-      accessor: (row: OccurrenceFieldsFragment) => (
-        <Checkbox
-          id={`${id}_${row.id}_checkbox`}
-          checked={selectedOccurrences.includes(row.id)}
-          onChange={() => handleCheckboxChange(row)}
-          aria-label={t('occurrences.table.labelChooseOccurrence', {
-            info: `${formatLocalizedDate(
-              new Date(row.startTime)
-            )}  ${formatTimeRange(
-              new Date(row.startTime),
-              new Date(row.endTime)
-            )}`,
-          })}
-        />
-      ),
-      id: 'selectRow',
-    },
-    {
-      Header: t('occurrences.table.columnDate'),
-      accessor: (row: OccurrenceFieldsFragment) =>
-        formatLocalizedDate(new Date(row.startTime)),
-      id: 'date',
-    },
-    {
-      Header: t('occurrences.table.columnTime'),
-      accessor: (row: OccurrenceFieldsFragment) =>
-        formatTimeRange(new Date(row.startTime), new Date(row.endTime)),
-      id: 'time',
-    },
-    {
-      Header: t('occurrences.table.columnLocation'),
-      accessor: (row: OccurrenceFieldsFragment) => {
-        const placeId = row.placeId || eventLocationId;
-        return placeId ? <PlaceText id={placeId} /> : '-';
-      },
-      id: 'place',
-    },
-    {
-      Header: t('occurrences.table.columnAmountOfSeats'),
-      accessor: (row: OccurrenceFieldsFragment) => {
-        if (
-          row.seatType === OccurrencesOccurrenceSeatTypeChoices.EnrolmentCount
-        ) {
-          return t('occurrenceDetails.textAmountOfGroups', {
-            count: row.amountOfSeats,
-          });
-        }
-        return row.amountOfSeats;
-      },
-      id: 'amountOfSeats',
-    },
-    {
-      Header: t('occurrences.table.columnEnrolmentStarts'),
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- enrolmentStarts comes from event, not occurrence
-      accessor: (row: OccurrenceFieldsFragment) =>
-        eventData?.event?.pEvent?.enrolmentStart
-          ? formatLocalizedDate(
-              new Date(eventData?.event?.pEvent?.enrolmentStart)
-            )
-          : '',
-      id: 'enrolmentStarts',
-    },
-    {
-      Header: (
-        <>
-          <div>{t('occurrences.table.columnEnrolments')}</div>
-          <div className={styles.enrolmentsInfoText}>
-            {t('occurrences.table.columnEnrolmentsHelper')}
-          </div>
-        </>
-      ),
-      accessor: (row: OccurrenceFieldsFragment) => {
-        if (row.seatsTaken != null && row.seatsApproved != null) {
-          return (
-            <EnrolmentsBadge
-              approvedSeatsCount={row.seatsApproved}
-              pendingSeatsCount={row.seatsTaken - row.seatsApproved}
-              isOccurrenceFull={row.remainingSeats === 0}
-            />
-          );
-        }
-        return null;
-      },
-      id: 'enrolments',
-    },
-    {
-      Header: t('occurrences.table.columnActions'),
-      accessor: (row: OccurrenceFieldsFragment) => (
-        <ActionsDropdown
-          event={eventData?.event}
-          enrolmentType={enrolmentType}
-          eventId={eventId}
-          isEventDraft={isEventDraft}
-          onDelete={onDelete}
-          onCancel={onCancel}
-          row={row}
-        />
-      ),
-      id: 'actions',
-      rowClickDisabled: true,
-    },
-  ];
-
-  return (
-    <Table
-      columns={columns}
-      data={occurrences}
-      onRowClick={goToOccurrenceDetailsPage}
-      tableHeaderRowClassName={styles.tableHeaderRow}
-    />
-  );
-};
-
-export default OccurrencesTable;
diff --git a/src/domain/occurrences/occurrencesTable/__tests__/ActionsDropdown.test.tsx b/src/domain/occurrences/occurrencesTable/__tests__/ActionsDropdown.test.tsx
index 84ddd0268..60d0b5e8b 100644
--- a/src/domain/occurrences/occurrencesTable/__tests__/ActionsDropdown.test.tsx
+++ b/src/domain/occurrences/occurrencesTable/__tests__/ActionsDropdown.test.tsx
@@ -1,7 +1,6 @@
 import { screen } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import * as React from 'react';
-import Modal from 'react-modal';
 import * as Router from 'react-router';
 import { vi } from 'vitest';
 
@@ -136,9 +135,7 @@ it.each([EnrolmentType.External, EnrolmentType.Unenrollable])(
 
 it('renders cancel modal and cancel functionality works', async () => {
   const onCancelMock = vi.fn();
-  const { container } = renderComponent({ onCancel: onCancelMock });
-
-  Modal.setAppElement(container);
+  renderComponent({ onCancel: onCancelMock });
 
   await userEvent.click(screen.getByRole('button', { name: 'Valitse' }));
 
@@ -183,9 +180,7 @@ it('renders cancel modal and cancel functionality works', async () => {
 
 it('renders delete modal correctly and delete functionality works', async () => {
   const onDeleteMock = vi.fn();
-  const { container } = renderComponent({ onDelete: onDeleteMock });
-
-  Modal.setAppElement(container);
+  renderComponent({ onDelete: onDeleteMock });
 
   expect(screen.getByRole('menu')).not.toHaveClass('isOpen');
 
diff --git a/src/domain/occurrences/occurrencesTable/occurrencesTable.module.scss b/src/domain/occurrences/occurrencesTable/occurrencesTable.module.scss
deleted file mode 100644
index 06a38541a..000000000
--- a/src/domain/occurrences/occurrencesTable/occurrencesTable.module.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.tableHeaderRow {
-  vertical-align: top;
-  line-height: var(--lineheight-m);
-}
-
-.enrolmentsInfoText {
-  font-size: var(--fontsize-body-s);
-}
diff --git a/src/domain/occurrences/occurrencesTableReadOnly/OccurrencesTableSummary.tsx b/src/domain/occurrences/occurrencesTableReadOnly/OccurrencesTableSummary.tsx
index 237f26652..0281128bf 100644
--- a/src/domain/occurrences/occurrencesTableReadOnly/OccurrencesTableSummary.tsx
+++ b/src/domain/occurrences/occurrencesTableReadOnly/OccurrencesTableSummary.tsx
@@ -1,7 +1,7 @@
+import { ColumnDef, Row } from '@tanstack/react-table';
 import { LoadingSpinner } from 'hds-react';
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Row } from 'react-table';
 
 import styles from './occurrencesTableSummary.module.scss';
 import Table from '../../../common/components/table/Table';
@@ -33,6 +33,23 @@ export interface Props {
   loadingOccurrences: string[];
 }
 
+type EnrolmentsHeaderProps = {
+  title: string;
+  helper: string;
+};
+
+const EnrolmentsHeader: React.FC<EnrolmentsHeaderProps> = ({
+  title,
+  helper,
+}) => {
+  return (
+    <>
+      <div>{title}</div>
+      <div className={styles.enrolmentsInfoText}>{helper}</div>
+    </>
+  );
+};
+
 const OccurrencesTableSummary: React.FC<Props> = ({
   eventData,
   occurrences,
@@ -62,10 +79,10 @@ const OccurrencesTableSummary: React.FC<Props> = ({
     : EnrolmentType.Internal;
   const isInternalEnrolment = EnrolmentType.Internal === enrolmentType;
 
-  const enrolmentColumns = [
+  const enrolmentColumns: ColumnDef<OccurrenceFieldsFragment>[] = [
     {
-      Header: t('occurrences.table.columnAmountOfSeats'),
-      accessor: (row: OccurrenceFieldsFragment) => {
+      header: t('occurrences.table.columnAmountOfSeats'),
+      accessorFn: (row) => {
         if (
           row.seatType === OccurrencesOccurrenceSeatTypeChoices.EnrolmentCount
         ) {
@@ -78,9 +95,9 @@ const OccurrencesTableSummary: React.FC<Props> = ({
       id: 'amountOfSeats',
     },
     {
-      Header: t('occurrences.table.columnEnrolmentStarts'),
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- enrolmentStarts comes from event, not occurrence
-      accessor: (row: OccurrenceFieldsFragment) =>
+      header: t('occurrences.table.columnEnrolmentStarts'),
+
+      accessorFn: () =>
         eventData?.event?.pEvent?.enrolmentStart
           ? formatLocalizedDate(
               new Date(eventData?.event?.pEvent?.enrolmentStart)
@@ -89,31 +106,34 @@ const OccurrencesTableSummary: React.FC<Props> = ({
       id: 'enrolmentStarts',
     },
     {
-      Header: (
-        <>
-          <div>{t('occurrences.table.columnEnrolments')}</div>
-          <div className={styles.enrolmentsInfoText}>
-            {t('occurrences.table.columnEnrolmentsHelper')}
-          </div>
-        </>
+      header: () => (
+        <EnrolmentsHeader
+          title={t('occurrences.table.columnEnrolments')}
+          helper={t('occurrences.table.columnEnrolmentsHelper')}
+        />
       ),
-      accessor: (row: OccurrenceFieldsFragment) => {
-        if (loadingOccurrences.includes(row.id)) {
+      cell: ({ row }) => {
+        if (loadingOccurrences.includes(row.original.id)) {
           return <LoadingSpinner small />;
         }
-        if (row.cancelled) {
+        if (row.original.cancelled) {
           return (
             <span className={styles.cancelledText}>
               {t('occurrences.status.cancelled')}
             </span>
           );
         }
-        if (row.seatsTaken != null && row.seatsApproved != null) {
+        if (
+          row.original.seatsTaken != null &&
+          row.original.seatsApproved != null
+        ) {
           return (
             <EnrolmentsBadge
-              approvedSeatsCount={row.seatsApproved}
-              pendingSeatsCount={row.seatsTaken - row.seatsApproved}
-              isOccurrenceFull={row.remainingSeats === 0}
+              approvedSeatsCount={row.original.seatsApproved}
+              pendingSeatsCount={
+                row.original.seatsTaken - row.original.seatsApproved
+              }
+              isOccurrenceFull={row.original.remainingSeats === 0}
             />
           );
         }
@@ -123,10 +143,10 @@ const OccurrencesTableSummary: React.FC<Props> = ({
     },
   ];
 
-  const columns = [
+  const columns: Array<ColumnDef<OccurrenceFieldsFragment>> = [
     {
-      Header: t('occurrences.table.columnDate'),
-      accessor: (row: OccurrenceFieldsFragment) => {
+      header: t('occurrences.table.columnDate'),
+      accessorFn: (row) => {
         return isMultidayOccurrence(row)
           ? formatDateRange(new Date(row.startTime), new Date(row.endTime))
           : formatLocalizedDate(new Date(row.startTime), DATE_FORMAT, locale);
@@ -134,35 +154,34 @@ const OccurrencesTableSummary: React.FC<Props> = ({
       id: 'date',
     },
     {
-      accessor: (row: OccurrenceFieldsFragment) =>
+      accessorFn: (row) =>
         isMultidayOccurrence(row)
           ? null
           : formatTimeRange(new Date(row.startTime), new Date(row.endTime)),
       id: 'time',
     },
     {
-      Header: t('occurrences.table.columnLocation'),
-      accessor: (row: OccurrenceFieldsFragment) => {
-        const placeId = row.placeId || eventLocationId;
+      header: t('occurrences.table.columnLocation'),
+      cell: ({ row }) => {
+        const placeId = row.original.placeId || eventLocationId;
         return placeId ? <PlaceText id={placeId} /> : '-';
       },
       id: 'place',
     },
     ...(isInternalEnrolment ? enrolmentColumns : []),
     {
-      Header: t('occurrences.table.columnActions'),
-      accessor: (row: OccurrenceFieldsFragment) => (
+      header: t('occurrences.table.columnActions'),
+      cell: ({ row }) => (
         <ActionsDropdown
           event={event}
           eventId={eventId}
           onCancel={onCancel}
           onDelete={onDelete}
-          row={row}
+          row={row.original}
           enrolmentType={enrolmentType}
         />
       ),
       id: 'actions',
-      rowClickDisabled: true,
     },
   ];
 
diff --git a/src/domain/venue/types.ts b/src/domain/venue/types.ts
index 8454814e8..8c4d88186 100644
--- a/src/domain/venue/types.ts
+++ b/src/domain/venue/types.ts
@@ -1,16 +1,5 @@
 import { LocalisedObjectInput } from '../../generated/graphql';
 
-export type OldVenueDataFields = {
-  locationDescription: LocalisedObjectInput;
-  hasClothingStorage: boolean;
-  hasSnackEatingPlace: boolean;
-  outdoorActivity: boolean;
-  hasToiletNearby: boolean;
-  hasAreaForGroupWork: boolean;
-  hasIndoorPlayingArea: boolean;
-  hasOutdoorPlayingArea: boolean;
-};
-
 export type VenueDataFields = {
   locationDescription: LocalisedObjectInput;
   hasClothingStorage: boolean;
diff --git a/src/headless-cms/__tests__/services.test.ts b/src/headless-cms/__tests__/services.test.ts
index 6b39e79cc..55d722115 100644
--- a/src/headless-cms/__tests__/services.test.ts
+++ b/src/headless-cms/__tests__/services.test.ts
@@ -1,4 +1,4 @@
-import { dequal } from 'dequal';
+import isEqual from 'lodash/isEqual';
 import { graphql, HttpResponse } from 'msw';
 
 import {
@@ -19,7 +19,7 @@ describe('queryPageWithUri', () => {
     const page = fakePage();
     server.use(
       graphql.query<PageQuery, PageQueryVariables>('Page', ({ variables }) => {
-        if (dequal(variables, { id: 'test-page/nested-page', idType })) {
+        if (isEqual(variables, { id: 'test-page/nested-page', idType })) {
           return HttpResponse.json({
             data: {
               page,
diff --git a/src/headless-cms/apollo/apolloClient.ts b/src/headless-cms/apollo/apolloClient.ts
index f02b96fa7..534ed019f 100644
--- a/src/headless-cms/apollo/apolloClient.ts
+++ b/src/headless-cms/apollo/apolloClient.ts
@@ -214,7 +214,7 @@ export function useCMSApolloClient(
       }
     | undefined = { initialCMSApolloState: null }
 ): ApolloClient<NormalizedCacheObject> {
-  const storeRef = useRef<ApolloClient<NormalizedCacheObject>>();
+  const storeRef = useRef<ApolloClient<NormalizedCacheObject> | null>(null);
   if (!storeRef.current) {
     storeRef.current = initializeCMSApolloClient(initialCMSApolloState);
   }
diff --git a/src/headless-cms/components/CmsPageContent.tsx b/src/headless-cms/components/CmsPageContent.tsx
index 9c1a7953d..a2e1b0f9b 100644
--- a/src/headless-cms/components/CmsPageContent.tsx
+++ b/src/headless-cms/components/CmsPageContent.tsx
@@ -1,5 +1,5 @@
+import { HtmlToReact } from '@city-of-helsinki/react-helsinki-headless-cms';
 import React from 'react';
-import { HtmlToReact } from 'react-helsinki-headless-cms';
 
 import styles from './cmsPage.module.scss';
 import CmsSidebarContent from './cmsSidebarContent/CmsSidebarContent';
diff --git a/src/headless-cms/components/__tests__/CmsPage.test.tsx b/src/headless-cms/components/__tests__/CmsPage.test.tsx
index b8d731792..d7069511c 100644
--- a/src/headless-cms/components/__tests__/CmsPage.test.tsx
+++ b/src/headless-cms/components/__tests__/CmsPage.test.tsx
@@ -1,8 +1,8 @@
 import { MockedResponse } from '@apollo/client/testing';
 import { act, screen, waitFor, within } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
-import { dequal } from 'dequal';
 import * as HdsReact from 'hds-react';
+import isEqual from 'lodash/isEqual';
 import { graphql, HttpResponse } from 'msw';
 import React from 'react';
 import { Route, Routes } from 'react-router';
@@ -327,7 +327,7 @@ beforeEach(() => {
   server.use(
     graphql.query<PageQuery, PageQueryVariables>('Page', ({ variables }) => {
       const mock = mocks.Page.find(({ variables: mockVariables }) => {
-        return dequal(mockVariables, variables);
+        return isEqual(mockVariables, variables);
       });
 
       if (mock) {
@@ -345,7 +345,7 @@ beforeEach(() => {
       ({ variables }) => {
         const mock = mocks.SubPagesSearch.find(
           ({ variables: mockVariables }) => {
-            return dequal(mockVariables, variables);
+            return isEqual(mockVariables, variables);
           }
         );
 
diff --git a/src/headless-cms/components/cmsSidebarContent/CmsSidebarContentLayoutLinkList.tsx b/src/headless-cms/components/cmsSidebarContent/CmsSidebarContentLayoutLinkList.tsx
index 402726a45..ef1631845 100644
--- a/src/headless-cms/components/cmsSidebarContent/CmsSidebarContentLayoutLinkList.tsx
+++ b/src/headless-cms/components/cmsSidebarContent/CmsSidebarContentLayoutLinkList.tsx
@@ -1,6 +1,6 @@
+import { HtmlToReact } from '@city-of-helsinki/react-helsinki-headless-cms';
 import { IconArrowRight } from 'hds-react';
 import React from 'react';
-import { HtmlToReact } from 'react-helsinki-headless-cms';
 
 import styles from './cmsSidebarContentLayoutLinkList.module.scss';
 import ExternalLink from '../../../common/components/externalLink/ExternalLink';
diff --git a/src/hooks/useRHHCConfig.tsx b/src/hooks/useRHHCConfig.tsx
index cc99f3290..6b26b2f2e 100644
--- a/src/hooks/useRHHCConfig.tsx
+++ b/src/hooks/useRHHCConfig.tsx
@@ -1,5 +1,5 @@
-import type { Config } from 'react-helsinki-headless-cms';
-import { defaultConfig as rhhcDefaultConfig } from 'react-helsinki-headless-cms';
+import type { Config } from '@city-of-helsinki/react-helsinki-headless-cms';
+import { defaultConfig as rhhcDefaultConfig } from '@city-of-helsinki/react-helsinki-headless-cms';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router';
 
diff --git a/src/index.tsx b/src/index.tsx
index f40cfff45..24650d024 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -5,7 +5,6 @@ import './domain/app/i18n/i18nInit';
 import * as Sentry from '@sentry/browser';
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
-import Modal from 'react-modal';
 
 import App from './domain/app/App';
 import * as serviceWorker from './serviceWorker';
@@ -35,8 +34,6 @@ if (getEnvValue('VITE_APP_SENTRY_DSN')) {
   });
 }
 
-Modal.setAppElement('#root');
-
 const container = document.getElementById('root') as Element;
 const root = createRoot(container);
 // HDS Login Component is too aggressive with the login time issues and the StrictMode gives unwanted issues.
diff --git a/src/test/apollo-mocks/footerMenuMock.ts b/src/test/apollo-mocks/footerMenuMock.ts
index 68fc4994e..bc2d68a3b 100644
--- a/src/test/apollo-mocks/footerMenuMock.ts
+++ b/src/test/apollo-mocks/footerMenuMock.ts
@@ -1,5 +1,5 @@
 import { MockedResponse } from '@apollo/client/testing';
-import { MenuDocument } from 'react-helsinki-headless-cms/apollo';
+import { MenuDocument } from '@city-of-helsinki/react-helsinki-headless-cms/apollo';
 
 import type { MenuQueryResponse } from './types';
 import { FOOTER_MENU_NAME } from '../../headless-cms/constants';
diff --git a/src/test/apollo-mocks/headerMenuMock.ts b/src/test/apollo-mocks/headerMenuMock.ts
index afd7598b0..aa32d8c10 100644
--- a/src/test/apollo-mocks/headerMenuMock.ts
+++ b/src/test/apollo-mocks/headerMenuMock.ts
@@ -1,6 +1,6 @@
 /* eslint-disable max-len */
 import { MockedResponse } from '@apollo/client/testing';
-import { MenuDocument } from 'react-helsinki-headless-cms/apollo';
+import { MenuDocument } from '@city-of-helsinki/react-helsinki-headless-cms/apollo';
 
 import type { MenuQueryResponse } from './types';
 import { HEADER_MENU_NAME } from '../../headless-cms/constants';
diff --git a/src/test/apollo-mocks/languagesMock.ts b/src/test/apollo-mocks/languagesMock.ts
index a27e547b1..2182eacdb 100644
--- a/src/test/apollo-mocks/languagesMock.ts
+++ b/src/test/apollo-mocks/languagesMock.ts
@@ -1,6 +1,6 @@
 import { MockedResponse } from '@apollo/client/testing';
-import { LanguageCodeEnum } from 'react-helsinki-headless-cms';
-import { LanguagesDocument } from 'react-helsinki-headless-cms/apollo';
+import { LanguageCodeEnum } from '@city-of-helsinki/react-helsinki-headless-cms';
+import { LanguagesDocument } from '@city-of-helsinki/react-helsinki-headless-cms/apollo';
 
 import type { LanguagesQueryResponse } from './types';
 
diff --git a/src/test/apollo-mocks/types.ts b/src/test/apollo-mocks/types.ts
index 6840af23b..98758135c 100644
--- a/src/test/apollo-mocks/types.ts
+++ b/src/test/apollo-mocks/types.ts
@@ -1,4 +1,7 @@
-import type { Menu, Language } from 'react-helsinki-headless-cms';
+import type {
+  Menu,
+  Language,
+} from '@city-of-helsinki/react-helsinki-headless-cms';
 
 export type MenuQueryResponse = {
   data: {
diff --git a/src/utils/__tests__/getLanguageCode.test.ts b/src/utils/__tests__/getLanguageCode.test.ts
index 00dfdc6fa..eef877f41 100644
--- a/src/utils/__tests__/getLanguageCode.test.ts
+++ b/src/utils/__tests__/getLanguageCode.test.ts
@@ -1,4 +1,4 @@
-import { LanguageCodeEnum } from 'react-helsinki-headless-cms';
+import { LanguageCodeEnum } from '@city-of-helsinki/react-helsinki-headless-cms';
 
 import getLanguageCode from '../getLanguageCode';
 
diff --git a/src/utils/getLanguageCode.ts b/src/utils/getLanguageCode.ts
index c430cf1f9..b3dd759d8 100644
--- a/src/utils/getLanguageCode.ts
+++ b/src/utils/getLanguageCode.ts
@@ -1,4 +1,4 @@
-import { LanguageCodeEnum } from 'react-helsinki-headless-cms';
+import { LanguageCodeEnum } from '@city-of-helsinki/react-helsinki-headless-cms';
 
 import type { Language } from '../types';
 
diff --git a/src/utils/testUtils.tsx b/src/utils/testUtils.tsx
index 5bfba11f9..c57605de0 100644
--- a/src/utils/testUtils.tsx
+++ b/src/utils/testUtils.tsx
@@ -1,6 +1,7 @@
 import type { ApolloClient, NormalizedCacheObject } from '@apollo/client';
 import { useApolloClient } from '@apollo/client';
 import { MockedProvider, MockedResponse } from '@apollo/client/testing';
+import { ConfigProvider as RHHCConfigProvider } from '@city-of-helsinki/react-helsinki-headless-cms';
 import {
   act,
   createEvent,
@@ -10,11 +11,10 @@ import {
 } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import * as React from 'react';
-import { ConfigProvider as RHHCConfigProvider } from 'react-helsinki-headless-cms';
-import Modal from 'react-modal';
 import { BrowserRouter, Route, Routes } from 'react-router';
 import wait from 'waait';
 
+import { NotificationsProvider } from '../common/components/notificationsContext/NotificationsContext';
 import { createApolloCache } from '../domain/app/apollo/cache';
 import IdleTimer from '../domain/auth/IdleTimerProvider';
 import KultusAdminHDSLoginProvider from '../domain/auth/KultusAdminHDSLoginProvider';
@@ -71,19 +71,21 @@ export const customRender: CustomRender = (
   });
   const user = userEvent.setup();
   const Wrapper: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
-    <KultusAdminHDSLoginProvider>
-      <IdleTimer>
-        <MockedProvider mocks={mocks} cache={createApolloCache()}>
-          <BrowserRouter>
-            <OrganisationProvider>
-              <RHHCConfigProviderWithProvidedApolloClient>
-                {children}
-              </RHHCConfigProviderWithProvidedApolloClient>
-            </OrganisationProvider>
-          </BrowserRouter>
-        </MockedProvider>
-      </IdleTimer>
-    </KultusAdminHDSLoginProvider>
+    <NotificationsProvider>
+      <KultusAdminHDSLoginProvider>
+        <IdleTimer>
+          <MockedProvider mocks={mocks} cache={createApolloCache()}>
+            <BrowserRouter>
+              <OrganisationProvider>
+                <RHHCConfigProviderWithProvidedApolloClient>
+                  {children}
+                </RHHCConfigProviderWithProvidedApolloClient>
+              </OrganisationProvider>
+            </BrowserRouter>
+          </MockedProvider>
+        </IdleTimer>
+      </KultusAdminHDSLoginProvider>
+    </NotificationsProvider>
   );
 
   const renderResult = render(ui, { wrapper: Wrapper });
@@ -99,26 +101,27 @@ export const renderWithRoute: CustomRender = (
   });
   const user = userEvent.setup();
   const Wrapper: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
-    <KultusAdminHDSLoginProvider>
-      <IdleTimer>
-        <MockedProvider mocks={mocks} cache={createApolloCache()}>
-          <BrowserRouter>
-            <OrganisationProvider>
-              <RHHCConfigProviderWithProvidedApolloClient>
-                <Routes>
-                  <Route path={'/'} element={<>{children}</>} />
-                  <Route path={path} element={<>{children}</>} />
-                </Routes>
-              </RHHCConfigProviderWithProvidedApolloClient>
-            </OrganisationProvider>
-          </BrowserRouter>
-        </MockedProvider>
-      </IdleTimer>
-    </KultusAdminHDSLoginProvider>
+    <NotificationsProvider>
+      <KultusAdminHDSLoginProvider>
+        <IdleTimer>
+          <MockedProvider mocks={mocks} cache={createApolloCache()}>
+            <BrowserRouter>
+              <OrganisationProvider>
+                <RHHCConfigProviderWithProvidedApolloClient>
+                  <Routes>
+                    <Route path={'/'} element={<>{children}</>} />
+                    <Route path={path} element={<>{children}</>} />
+                  </Routes>
+                </RHHCConfigProviderWithProvidedApolloClient>
+              </OrganisationProvider>
+            </BrowserRouter>
+          </MockedProvider>
+        </IdleTimer>
+      </KultusAdminHDSLoginProvider>
+    </NotificationsProvider>
   );
 
   const renderResult = render(ui, { wrapper: Wrapper });
-  Modal.setAppElement(renderResult.container);
   return { ...renderResult, user };
 };
 
diff --git a/tsconfig.json b/tsconfig.json
index 6390f5e63..26534729e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,7 +10,7 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,