diff --git a/.env b/.env
index 4c1695ef..cbbea689 100644
--- a/.env
+++ b/.env
@@ -6,7 +6,7 @@ APP_ENV=dev
 APP_BUILD=dev
 
 # The container settings for this application
-CONTAINER_REGISTRY_BASE=ghcr.io/klantinteractie-servicesysteem
+CONTAINER_REGISTRY_BASE=ghcr.io/openwebconcept
 CONTAINER_PROJECT_NAME=kiss-frontend
 
 # specific settings for the front end / vite
@@ -17,4 +17,4 @@ VITE_API_BASE_URI=http://localhost/api/nieuws
 # RabbitMQ
 ##################################################
 RABBITMQ_USERNAME=common-gateway
-RABBITMQ_PASSWORD=changeme!
\ No newline at end of file
+RABBITMQ_PASSWORD=changeme!
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 55c1b239..a2ca796a 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -4,7 +4,7 @@
         "editor.defaultFormatter": "dbaeumer.vscode-eslint"
     },
     "[typescript]": {
-        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+        "editor.defaultFormatter": "vscode.typescript-language-features"
     },
     "[javascript]": {
         "editor.defaultFormatter": "dbaeumer.vscode-eslint"
diff --git a/README.md b/README.md
index 3fd18d1f..9d7dc3e0 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# kiss-frontend
+# kiss-frontend for OpenWebConcept
 
 This template should help get you started developing with Vue 3 in Vite.
 
diff --git a/package-lock.json b/package-lock.json
index 2c4a6868..79f1e485 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,11 @@
         "@types/luxon": "^2.3.1",
         "@vueuse/core": "^8.6.0",
         "dompurify": "^2.3.8",
+        "js-cookie": "^3.0.5",
+        "jwt-decode": "^3.1.2",
+        "lodash": "^4.17.21",
         "luxon": "^2.5.2",
+        "moment": "^2.30.1",
         "nanoid": "^4.0.0",
         "pinia": "^2.0.14",
         "swrv": "^1.0.0-beta.8",
@@ -22,7 +26,9 @@
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.1.0",
         "@types/dompurify": "^2.3.3",
+        "@types/js-cookie": "^3.0.3",
         "@types/jsdom": "^16.2.14",
+        "@types/lodash": "^4.14.202",
         "@types/node": "^16.11.27",
         "@utrecht/component-library-css": "1.0.0-alpha.361",
         "@utrecht/component-library-vue": "1.0.0-alpha.138",
@@ -47,6 +53,15 @@
         "vue-tsc": "^0.34.7"
       }
     },
+    "node_modules/@aashutoshrathi/word-wrap": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
+      "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/@babel/code-frame": {
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
@@ -164,6 +179,22 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@csstools/selector-specificity": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz",
+      "integrity": "sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==",
+      "dev": true,
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss-selector-parser": "^6.0.10"
+      }
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz",
@@ -278,6 +309,12 @@
         "@types/trusted-types": "*"
       }
     },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.3.tgz",
+      "integrity": "sha512-Xe7IImK09HP1sv2M/aI+48a20VX+TdRJucfq4vfRVy6nWN8PYPOEnlMRSgxJAgYQIXJVL8dZ4/ilAM7dWNaOww==",
+      "dev": true
+    },
     "node_modules/@types/jsdom": {
       "version": "16.2.14",
       "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-16.2.14.tgz",
@@ -295,6 +332,12 @@
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "dev": true
     },
+    "node_modules/@types/lodash": {
+      "version": "4.14.202",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz",
+      "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==",
+      "dev": true
+    },
     "node_modules/@types/luxon": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-2.4.0.tgz",
@@ -1250,18 +1293,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/clone-regexp": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/clone-regexp/-/clone-regexp-2.2.0.tgz",
-      "integrity": "sha512-beMpP7BOtTipFuW8hrJvREQ2DrRu3BE7by0ZpibtfBA+qfHYvMGTc2Yb1JMYPKg/JUw0CHYvpg796aNTSW9z7Q==",
-      "dev": true,
-      "dependencies": {
-        "is-regexp": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1281,9 +1312,9 @@
       "dev": true
     },
     "node_modules/colord": {
-      "version": "2.9.2",
-      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz",
-      "integrity": "sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ==",
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
       "dev": true
     },
     "node_modules/combined-stream": {
@@ -1305,9 +1336,9 @@
       "dev": true
     },
     "node_modules/cosmiconfig": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",
-      "integrity": "sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
       "dev": true,
       "dependencies": {
         "@types/parse-json": "^4.0.0",
@@ -1335,9 +1366,9 @@
       }
     },
     "node_modules/css-functions-list": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.0.1.tgz",
-      "integrity": "sha512-PriDuifDt4u4rkDgnqRCLnjfMatufLmWNfQnGCq34xZwpY3oabwhB9SqRBmuvWUgndbemCFlKqg+nO7C2q0SBw==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.0.tgz",
+      "integrity": "sha512-d/jBMPyYybkkLVypgtGv12R+pIFw4/f/IHtCTxWpZc8ofTYOPigIgmA6vu5rMHartZC+WuXhBUHfnyNUIQSYrg==",
       "dev": true,
       "engines": {
         "node": ">=12.22"
@@ -2362,18 +2393,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/execall": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/execall/-/execall-2.0.0.tgz",
-      "integrity": "sha512-0FU2hZ5Hh6iQnarpRtQurM/aAvp3RIbfvgLHrcqJYzhXyV2KFruhuChf9NC6waAhiUR7FFtlugkI4p7f2Fqlow==",
-      "dev": true,
-      "dependencies": {
-        "clone-regexp": "^2.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -2387,9 +2406,9 @@
       "dev": true
     },
     "node_modules/fast-glob": {
-      "version": "3.2.11",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
-      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.0.tgz",
+      "integrity": "sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==",
       "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -2427,10 +2446,13 @@
       "dev": true
     },
     "node_modules/fastest-levenshtein": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
-      "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==",
-      "dev": true
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
+      "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4.9.1"
+      }
     },
     "node_modules/fastq": {
       "version": "1.13.0",
@@ -2557,26 +2579,14 @@
       "dev": true
     },
     "node_modules/get-func-name": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz",
-      "integrity": "sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz",
+      "integrity": "sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==",
       "dev": true,
       "engines": {
         "node": "*"
       }
     },
-    "node_modules/get-stdin": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-8.0.0.tgz",
-      "integrity": "sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -2814,9 +2824,9 @@
       }
     },
     "node_modules/ignore": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
+      "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
       "dev": true,
       "engines": {
         "node": ">= 4"
@@ -2986,21 +2996,20 @@
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
       "dev": true
     },
-    "node_modules/is-regexp": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-2.1.0.tgz",
-      "integrity": "sha512-OZ4IlER3zmRIoB9AqNhEggVxqIH4ofDns5nRrPS6yQxXE1TPCUpFznBfRQmQa8uC+pXqjMnukiJBxCisIxiLGA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -3083,6 +3092,11 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "node_modules/jwt-decode": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -3093,9 +3107,9 @@
       }
     },
     "node_modules/known-css-properties": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.25.0.tgz",
-      "integrity": "sha512-b0/9J1O9Jcyik1GC6KC42hJ41jKwdO/Mq8Mdo5sYN+IuRTXs2YFHZC3kZSx6ueusqa95x3wLYe/ytKjbAfGixA==",
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.26.0.tgz",
+      "integrity": "sha512-5FZRzrZzNTBruuurWpvZnvP9pum+fe0HcK8z/ooo+U+Hmp4vtbyp1/QDsqmufirXy4egGzbaH/y2uCZf+6W5Kg==",
       "dev": true
     },
     "node_modules/levn": {
@@ -3144,8 +3158,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
@@ -3334,6 +3347,14 @@
         "node": ">= 6"
       }
     },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -3424,17 +3445,17 @@
       }
     },
     "node_modules/optionator": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
-      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
+      "integrity": "sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==",
       "dev": true,
       "dependencies": {
+        "@aashutoshrathi/word-wrap": "^1.2.3",
         "deep-is": "^0.1.3",
         "fast-levenshtein": "^2.0.6",
         "levn": "^0.4.1",
         "prelude-ls": "^1.2.1",
-        "type-check": "^0.4.0",
-        "word-wrap": "^1.2.3"
+        "type-check": "^0.4.0"
       },
       "engines": {
         "node": ">= 0.8.0"
@@ -3631,9 +3652,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "version": "8.4.33",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
+      "integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
       "funding": [
         {
           "type": "opencollective",
@@ -3642,10 +3663,14 @@
         {
           "type": "tidelift",
           "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
         }
       ],
       "dependencies": {
-        "nanoid": "^3.3.4",
+        "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
@@ -3713,9 +3738,9 @@
       }
     },
     "node_modules/postcss-selector-parser": {
-      "version": "6.0.10",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
-      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "version": "6.0.13",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
+      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
       "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
@@ -3732,9 +3757,15 @@
       "dev": true
     },
     "node_modules/postcss/node_modules/nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "version": "3.3.7",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -3793,6 +3824,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
+      "dev": true
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -3882,9 +3919,9 @@
       }
     },
     "node_modules/read-pkg/node_modules/semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
       "dev": true,
       "bin": {
         "semver": "bin/semver"
@@ -3945,6 +3982,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "dev": true
+    },
     "node_modules/resolve": {
       "version": "1.22.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
@@ -4070,9 +4113,9 @@
       }
     },
     "node_modules/semver": {
-      "version": "7.3.7",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
-      "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -4190,15 +4233,6 @@
       "integrity": "sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g==",
       "dev": true
     },
-    "node_modules/specificity": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/specificity/-/specificity-0.4.1.tgz",
-      "integrity": "sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg==",
-      "dev": true,
-      "bin": {
-        "specificity": "bin/specificity"
-      }
-    },
     "node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -4256,51 +4290,49 @@
       "dev": true
     },
     "node_modules/stylelint": {
-      "version": "14.8.5",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.8.5.tgz",
-      "integrity": "sha512-e3t4H/hlWlspkcNUrkhf44RU3OpPTA7uBOoREGBzSwdEF+2g/+gbZq7WEpMP7BpopcSe/uLaTvDuL+URL7cdnQ==",
+      "version": "14.16.1",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.16.1.tgz",
+      "integrity": "sha512-ErlzR/T3hhbV+a925/gbfc3f3Fep9/bnspMiJPorfGEmcBbXdS+oo6LrVtoUZ/w9fqD6o6k7PtUlCOsCRdjX/A==",
       "dev": true,
       "dependencies": {
+        "@csstools/selector-specificity": "^2.0.2",
         "balanced-match": "^2.0.0",
-        "colord": "^2.9.2",
-        "cosmiconfig": "^7.0.1",
-        "css-functions-list": "^3.0.1",
+        "colord": "^2.9.3",
+        "cosmiconfig": "^7.1.0",
+        "css-functions-list": "^3.1.0",
         "debug": "^4.3.4",
-        "execall": "^2.0.0",
-        "fast-glob": "^3.2.11",
-        "fastest-levenshtein": "^1.0.12",
+        "fast-glob": "^3.2.12",
+        "fastest-levenshtein": "^1.0.16",
         "file-entry-cache": "^6.0.1",
-        "get-stdin": "^8.0.0",
         "global-modules": "^2.0.0",
         "globby": "^11.1.0",
         "globjoin": "^0.1.4",
         "html-tags": "^3.2.0",
-        "ignore": "^5.2.0",
+        "ignore": "^5.2.1",
         "import-lazy": "^4.0.0",
         "imurmurhash": "^0.1.4",
         "is-plain-object": "^5.0.0",
-        "known-css-properties": "^0.25.0",
+        "known-css-properties": "^0.26.0",
         "mathml-tag-names": "^2.1.3",
         "meow": "^9.0.0",
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.14",
+        "postcss": "^8.4.19",
         "postcss-media-query-parser": "^0.2.3",
         "postcss-resolve-nested-selector": "^0.1.1",
         "postcss-safe-parser": "^6.0.0",
-        "postcss-selector-parser": "^6.0.10",
+        "postcss-selector-parser": "^6.0.11",
         "postcss-value-parser": "^4.2.0",
         "resolve-from": "^5.0.0",
-        "specificity": "^0.4.1",
         "string-width": "^4.2.3",
         "strip-ansi": "^6.0.1",
         "style-search": "^0.1.0",
-        "supports-hyperlinks": "^2.2.0",
+        "supports-hyperlinks": "^2.3.0",
         "svg-tags": "^1.0.0",
-        "table": "^6.8.0",
+        "table": "^6.8.1",
         "v8-compile-cache": "^2.3.0",
-        "write-file-atomic": "^4.0.1"
+        "write-file-atomic": "^4.0.2"
       },
       "bin": {
         "stylelint": "bin/stylelint.js"
@@ -4342,15 +4374,6 @@
         "stylelint": ">=11.0.0"
       }
     },
-    "node_modules/stylelint-config-recommended": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-7.0.0.tgz",
-      "integrity": "sha512-yGn84Bf/q41J4luis1AZ95gj0EQwRX8lWmGmBwkwBNSkpGSpl66XcPTulxGa/Z91aPoNGuIGBmFkcM1MejMo9Q==",
-      "dev": true,
-      "peerDependencies": {
-        "stylelint": "^14.4.0"
-      }
-    },
     "node_modules/stylelint-config-recommended-scss": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-5.0.2.tgz",
@@ -4395,6 +4418,18 @@
         "stylelint": ">=14.0.0"
       }
     },
+    "node_modules/stylelint-config-recommended-vue/node_modules/stylelint-config-recommended": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-13.0.0.tgz",
+      "integrity": "sha512-EH+yRj6h3GAe/fRiyaoO2F9l9Tgg50AOFhaszyfov9v6ayXJ1IkSHwTxd7lB48FmOeSGDPLjatjO11fJpmarkQ==",
+      "dev": true,
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^15.10.0"
+      }
+    },
     "node_modules/stylelint-config-standard": {
       "version": "24.0.0",
       "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-24.0.0.tgz",
@@ -4430,19 +4465,18 @@
       }
     },
     "node_modules/stylelint-scss": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.2.0.tgz",
-      "integrity": "sha512-HHHMVKJJ5RM9pPIbgJ/XA67h9H0407G68Rm69H4fzFbFkyDMcTV1Byep3qdze5+fJ3c0U7mJrbj6S0Fg072uZA==",
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.7.0.tgz",
+      "integrity": "sha512-TSUgIeS0H3jqDZnby1UO1Qv3poi1N8wUYIJY6D1tuUq2MN3lwp/rITVo0wD+1SWTmRm0tNmGO0b7nKInnqF6Hg==",
       "dev": true,
       "dependencies": {
-        "lodash": "^4.17.21",
         "postcss-media-query-parser": "^0.2.3",
         "postcss-resolve-nested-selector": "^0.1.1",
-        "postcss-selector-parser": "^6.0.6",
-        "postcss-value-parser": "^4.1.0"
+        "postcss-selector-parser": "^6.0.11",
+        "postcss-value-parser": "^4.2.0"
       },
       "peerDependencies": {
-        "stylelint": "^14.5.1"
+        "stylelint": "^14.5.1 || ^15.0.0"
       }
     },
     "node_modules/stylelint/node_modules/balanced-match": {
@@ -4473,9 +4507,9 @@
       }
     },
     "node_modules/supports-hyperlinks": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.2.0.tgz",
-      "integrity": "sha512-6sXEzV5+I5j8Bmq9/vUphGRM/RJNT9SCURJLjwfOg51heRtguGWDzcaBlgAzKhQa0EVNpPEKzQuBwZ8S8WaCeQ==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz",
+      "integrity": "sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==",
       "dev": true,
       "dependencies": {
         "has-flag": "^4.0.0",
@@ -4518,9 +4552,9 @@
       "dev": true
     },
     "node_modules/table": {
-      "version": "6.8.0",
-      "resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz",
-      "integrity": "sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA==",
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/table/-/table-6.8.1.tgz",
+      "integrity": "sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==",
       "dev": true,
       "dependencies": {
         "ajv": "^8.0.1",
@@ -4534,9 +4568,9 @@
       }
     },
     "node_modules/table/node_modules/ajv": {
-      "version": "8.11.0",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+      "version": "8.12.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+      "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
       "dev": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
@@ -4592,14 +4626,15 @@
       }
     },
     "node_modules/tough-cookie": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.0.0.tgz",
-      "integrity": "sha512-tHdtEpQCMrc1YLrMaqXXcj6AxhYi/xgit6mZu1+EDWUn+qhUf8wMQoFIy9NXuq23zAwtcB0t/MjACGR18pcRbg==",
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
+      "integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==",
       "dev": true,
       "dependencies": {
         "psl": "^1.1.33",
         "punycode": "^2.1.1",
-        "universalify": "^0.1.2"
+        "universalify": "^0.2.0",
+        "url-parse": "^1.5.3"
       },
       "engines": {
         "node": ">=6"
@@ -4694,9 +4729,9 @@
       }
     },
     "node_modules/universalify": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
+      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
       "dev": true,
       "engines": {
         "node": ">= 4.0.0"
@@ -4711,6 +4746,16 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "dev": true,
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -4734,9 +4779,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "2.9.15",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.15.tgz",
-      "integrity": "sha512-fzMt2jK4vQ3yK56te3Kqpkaeq9DkcZfBbzHwYpobasvgYmP2SoAr6Aic05CsB4CzCZbsDv4sujX3pkEGhLabVQ==",
+      "version": "2.9.16",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.16.tgz",
+      "integrity": "sha512-X+6q8KPyeuBvTQV8AVSnKDvXoBMnTx8zxh54sOwmmuOdxkjMmEJXH2UEchA+vTMps1xw9vL64uwJOWryULg7nA==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.14.27",
@@ -4992,9 +5037,9 @@
       }
     },
     "node_modules/word-wrap": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
-      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
       "dev": true,
       "engines": {
         "node": ">=0.10.0"
@@ -5007,16 +5052,16 @@
       "dev": true
     },
     "node_modules/write-file-atomic": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.1.tgz",
-      "integrity": "sha512-nSKUxgAbyioruk6hU87QzVbY279oYT6uiwgDoujth2ju4mJ+TZau7SQBhtbTmUyuNYTuXnSyRn66FV0+eCgcrQ==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.2.tgz",
+      "integrity": "sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==",
       "dev": true,
       "dependencies": {
         "imurmurhash": "^0.1.4",
         "signal-exit": "^3.0.7"
       },
       "engines": {
-        "node": "^12.13.0 || ^14.15.0 || >=16"
+        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
       }
     },
     "node_modules/ws": {
@@ -5081,6 +5126,12 @@
     }
   },
   "dependencies": {
+    "@aashutoshrathi/word-wrap": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
+      "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
+      "dev": true
+    },
     "@babel/code-frame": {
       "version": "7.16.7",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
@@ -5170,6 +5221,13 @@
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.18.4.tgz",
       "integrity": "sha512-FDge0dFazETFcxGw/EXzOkN8uJp0PC7Qbm+Pe9T+av2zlBpOgunFHkQPPn+eRuClU73JF+98D531UgayY89tow=="
     },
+    "@csstools/selector-specificity": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.2.0.tgz",
+      "integrity": "sha512-+OJ9konv95ClSTOJCmMZqpd5+YGsB2S+x6w3E1oaM8UuR5j8nTNHYSz8c9BEPGDOCMQYIEEGlVPj/VY64iTbGw==",
+      "dev": true,
+      "requires": {}
+    },
     "@eslint/eslintrc": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz",
@@ -5266,6 +5324,12 @@
         "@types/trusted-types": "*"
       }
     },
+    "@types/js-cookie": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.3.tgz",
+      "integrity": "sha512-Xe7IImK09HP1sv2M/aI+48a20VX+TdRJucfq4vfRVy6nWN8PYPOEnlMRSgxJAgYQIXJVL8dZ4/ilAM7dWNaOww==",
+      "dev": true
+    },
     "@types/jsdom": {
       "version": "16.2.14",
       "resolved": "https://registry.npmjs.org/@types/jsdom/-/jsdom-16.2.14.tgz",
@@ -5283,6 +5347,12 @@
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
       "dev": true
     },
+    "@types/lodash": {
+      "version": "4.14.202",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz",
+      "integrity": "sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==",
+      "dev": true
+    },
     "@types/luxon": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/@types/luxon/-/luxon-2.4.0.tgz",
@@ -5937,15 +6007,6 @@
         }
       }
     },
-    "clone-regexp": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/clone-regexp/-/clone-regexp-2.2.0.tgz",
-      "integrity": "sha512-beMpP7BOtTipFuW8hrJvREQ2DrRu3BE7by0ZpibtfBA+qfHYvMGTc2Yb1JMYPKg/JUw0CHYvpg796aNTSW9z7Q==",
-      "dev": true,
-      "requires": {
-        "is-regexp": "^2.0.0"
-      }
-    },
     "color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -5962,9 +6023,9 @@
       "dev": true
     },
     "colord": {
-      "version": "2.9.2",
-      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz",
-      "integrity": "sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ==",
+      "version": "2.9.3",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz",
+      "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==",
       "dev": true
     },
     "combined-stream": {
@@ -5983,9 +6044,9 @@
       "dev": true
     },
     "cosmiconfig": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",
-      "integrity": "sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
       "dev": true,
       "requires": {
         "@types/parse-json": "^4.0.0",
@@ -6007,9 +6068,9 @@
       }
     },
     "css-functions-list": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.0.1.tgz",
-      "integrity": "sha512-PriDuifDt4u4rkDgnqRCLnjfMatufLmWNfQnGCq34xZwpY3oabwhB9SqRBmuvWUgndbemCFlKqg+nO7C2q0SBw==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.2.0.tgz",
+      "integrity": "sha512-d/jBMPyYybkkLVypgtGv12R+pIFw4/f/IHtCTxWpZc8ofTYOPigIgmA6vu5rMHartZC+WuXhBUHfnyNUIQSYrg==",
       "dev": true
     },
     "cssesc": {
@@ -6671,15 +6732,6 @@
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
       "dev": true
     },
-    "execall": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/execall/-/execall-2.0.0.tgz",
-      "integrity": "sha512-0FU2hZ5Hh6iQnarpRtQurM/aAvp3RIbfvgLHrcqJYzhXyV2KFruhuChf9NC6waAhiUR7FFtlugkI4p7f2Fqlow==",
-      "dev": true,
-      "requires": {
-        "clone-regexp": "^2.1.0"
-      }
-    },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -6693,9 +6745,9 @@
       "dev": true
     },
     "fast-glob": {
-      "version": "3.2.11",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
-      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.0.tgz",
+      "integrity": "sha512-ChDuvbOypPuNjO8yIDf36x7BlZX1smcUMTTcyoIjycexOxd6DFsKsg21qVBzEmr3G7fUKIRy2/psii+CIUt7FA==",
       "dev": true,
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
@@ -6729,9 +6781,9 @@
       "dev": true
     },
     "fastest-levenshtein": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.12.tgz",
-      "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==",
+      "version": "1.0.16",
+      "resolved": "https://registry.npmjs.org/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
+      "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
       "dev": true
     },
     "fastq": {
@@ -6830,15 +6882,9 @@
       "dev": true
     },
     "get-func-name": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.0.tgz",
-      "integrity": "sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==",
-      "dev": true
-    },
-    "get-stdin": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-8.0.0.tgz",
-      "integrity": "sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/get-func-name/-/get-func-name-2.0.2.tgz",
+      "integrity": "sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==",
       "dev": true
     },
     "glob": {
@@ -7013,9 +7059,9 @@
       }
     },
     "ignore": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
-      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
+      "integrity": "sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==",
       "dev": true
     },
     "immutable": {
@@ -7143,18 +7189,17 @@
       "integrity": "sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==",
       "dev": true
     },
-    "is-regexp": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-2.1.0.tgz",
-      "integrity": "sha512-OZ4IlER3zmRIoB9AqNhEggVxqIH4ofDns5nRrPS6yQxXE1TPCUpFznBfRQmQa8uC+pXqjMnukiJBxCisIxiLGA==",
-      "dev": true
-    },
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw=="
+    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -7223,6 +7268,11 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "jwt-decode": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+    },
     "kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -7230,9 +7280,9 @@
       "dev": true
     },
     "known-css-properties": {
-      "version": "0.25.0",
-      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.25.0.tgz",
-      "integrity": "sha512-b0/9J1O9Jcyik1GC6KC42hJ41jKwdO/Mq8Mdo5sYN+IuRTXs2YFHZC3kZSx6ueusqa95x3wLYe/ytKjbAfGixA==",
+      "version": "0.26.0",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.26.0.tgz",
+      "integrity": "sha512-5FZRzrZzNTBruuurWpvZnvP9pum+fe0HcK8z/ooo+U+Hmp4vtbyp1/QDsqmufirXy4egGzbaH/y2uCZf+6W5Kg==",
       "dev": true
     },
     "levn": {
@@ -7269,8 +7319,7 @@
     "lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "lodash.merge": {
       "version": "4.6.2",
@@ -7412,6 +7461,11 @@
         "kind-of": "^6.0.3"
       }
     },
+    "moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how=="
+    },
     "ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -7484,17 +7538,17 @@
       }
     },
     "optionator": {
-      "version": "0.9.1",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
-      "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+      "version": "0.9.3",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz",
+      "integrity": "sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==",
       "dev": true,
       "requires": {
+        "@aashutoshrathi/word-wrap": "^1.2.3",
         "deep-is": "^0.1.3",
         "fast-levenshtein": "^2.0.6",
         "levn": "^0.4.1",
         "prelude-ls": "^1.2.1",
-        "type-check": "^0.4.0",
-        "word-wrap": "^1.2.3"
+        "type-check": "^0.4.0"
       }
     },
     "p-limit": {
@@ -7613,19 +7667,19 @@
       }
     },
     "postcss": {
-      "version": "8.4.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
-      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "version": "8.4.33",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
+      "integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
       "requires": {
-        "nanoid": "^3.3.4",
+        "nanoid": "^3.3.7",
         "picocolors": "^1.0.0",
         "source-map-js": "^1.0.2"
       },
       "dependencies": {
         "nanoid": {
-          "version": "3.3.4",
-          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-          "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+          "version": "3.3.7",
+          "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+          "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g=="
         }
       }
     },
@@ -7668,9 +7722,9 @@
       "requires": {}
     },
     "postcss-selector-parser": {
-      "version": "6.0.10",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
-      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "version": "6.0.13",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.13.tgz",
+      "integrity": "sha512-EaV1Gl4mUEV4ddhDnv/xtj7sxwrwxdetHdWUGnT4VJQf+4d05v6lHYZr8N573k5Z0BViss7BDhfWtKS3+sfAqQ==",
       "dev": true,
       "requires": {
         "cssesc": "^3.0.0",
@@ -7716,6 +7770,12 @@
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
       "dev": true
     },
+    "querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
+      "dev": true
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -7759,9 +7819,9 @@
           }
         },
         "semver": {
-          "version": "5.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "version": "5.7.2",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+          "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
           "dev": true
         },
         "type-fest": {
@@ -7822,6 +7882,12 @@
       "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
       "dev": true
     },
+    "requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "dev": true
+    },
     "resolve": {
       "version": "1.22.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.0.tgz",
@@ -7899,9 +7965,9 @@
       }
     },
     "semver": {
-      "version": "7.3.7",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
-      "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+      "version": "7.5.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz",
+      "integrity": "sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==",
       "dev": true,
       "requires": {
         "lru-cache": "^6.0.0"
@@ -7992,12 +8058,6 @@
       "integrity": "sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g==",
       "dev": true
     },
-    "specificity": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/specificity/-/specificity-0.4.1.tgz",
-      "integrity": "sha512-1klA3Gi5PD1Wv9Q0wUoOQN1IWAuPu0D1U03ThXTr0cJ20+/iq2tHSDnK7Kk/0LXJ1ztUB2/1Os0wKmfyNgUQfg==",
-      "dev": true
-    },
     "string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -8040,51 +8100,49 @@
       "dev": true
     },
     "stylelint": {
-      "version": "14.8.5",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.8.5.tgz",
-      "integrity": "sha512-e3t4H/hlWlspkcNUrkhf44RU3OpPTA7uBOoREGBzSwdEF+2g/+gbZq7WEpMP7BpopcSe/uLaTvDuL+URL7cdnQ==",
+      "version": "14.16.1",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.16.1.tgz",
+      "integrity": "sha512-ErlzR/T3hhbV+a925/gbfc3f3Fep9/bnspMiJPorfGEmcBbXdS+oo6LrVtoUZ/w9fqD6o6k7PtUlCOsCRdjX/A==",
       "dev": true,
       "requires": {
+        "@csstools/selector-specificity": "^2.0.2",
         "balanced-match": "^2.0.0",
-        "colord": "^2.9.2",
-        "cosmiconfig": "^7.0.1",
-        "css-functions-list": "^3.0.1",
+        "colord": "^2.9.3",
+        "cosmiconfig": "^7.1.0",
+        "css-functions-list": "^3.1.0",
         "debug": "^4.3.4",
-        "execall": "^2.0.0",
-        "fast-glob": "^3.2.11",
-        "fastest-levenshtein": "^1.0.12",
+        "fast-glob": "^3.2.12",
+        "fastest-levenshtein": "^1.0.16",
         "file-entry-cache": "^6.0.1",
-        "get-stdin": "^8.0.0",
         "global-modules": "^2.0.0",
         "globby": "^11.1.0",
         "globjoin": "^0.1.4",
         "html-tags": "^3.2.0",
-        "ignore": "^5.2.0",
+        "ignore": "^5.2.1",
         "import-lazy": "^4.0.0",
         "imurmurhash": "^0.1.4",
         "is-plain-object": "^5.0.0",
-        "known-css-properties": "^0.25.0",
+        "known-css-properties": "^0.26.0",
         "mathml-tag-names": "^2.1.3",
         "meow": "^9.0.0",
         "micromatch": "^4.0.5",
         "normalize-path": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.14",
+        "postcss": "^8.4.19",
         "postcss-media-query-parser": "^0.2.3",
         "postcss-resolve-nested-selector": "^0.1.1",
         "postcss-safe-parser": "^6.0.0",
-        "postcss-selector-parser": "^6.0.10",
+        "postcss-selector-parser": "^6.0.11",
         "postcss-value-parser": "^4.2.0",
         "resolve-from": "^5.0.0",
-        "specificity": "^0.4.1",
         "string-width": "^4.2.3",
         "strip-ansi": "^6.0.1",
         "style-search": "^0.1.0",
-        "supports-hyperlinks": "^2.2.0",
+        "supports-hyperlinks": "^2.3.0",
         "svg-tags": "^1.0.0",
-        "table": "^6.8.0",
+        "table": "^6.8.1",
         "v8-compile-cache": "^2.3.0",
-        "write-file-atomic": "^4.0.1"
+        "write-file-atomic": "^4.0.2"
       },
       "dependencies": {
         "balanced-match": {
@@ -8115,13 +8173,6 @@
       "dev": true,
       "requires": {}
     },
-    "stylelint-config-recommended": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-7.0.0.tgz",
-      "integrity": "sha512-yGn84Bf/q41J4luis1AZ95gj0EQwRX8lWmGmBwkwBNSkpGSpl66XcPTulxGa/Z91aPoNGuIGBmFkcM1MejMo9Q==",
-      "dev": true,
-      "requires": {}
-    },
     "stylelint-config-recommended-scss": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-5.0.2.tgz",
@@ -8151,6 +8202,15 @@
         "semver": "^7.3.5",
         "stylelint-config-html": ">=1.0.0",
         "stylelint-config-recommended": ">=6.0.0"
+      },
+      "dependencies": {
+        "stylelint-config-recommended": {
+          "version": "13.0.0",
+          "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-13.0.0.tgz",
+          "integrity": "sha512-EH+yRj6h3GAe/fRiyaoO2F9l9Tgg50AOFhaszyfov9v6ayXJ1IkSHwTxd7lB48FmOeSGDPLjatjO11fJpmarkQ==",
+          "dev": true,
+          "requires": {}
+        }
       }
     },
     "stylelint-config-standard": {
@@ -8182,16 +8242,15 @@
       }
     },
     "stylelint-scss": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.2.0.tgz",
-      "integrity": "sha512-HHHMVKJJ5RM9pPIbgJ/XA67h9H0407G68Rm69H4fzFbFkyDMcTV1Byep3qdze5+fJ3c0U7mJrbj6S0Fg072uZA==",
+      "version": "4.7.0",
+      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.7.0.tgz",
+      "integrity": "sha512-TSUgIeS0H3jqDZnby1UO1Qv3poi1N8wUYIJY6D1tuUq2MN3lwp/rITVo0wD+1SWTmRm0tNmGO0b7nKInnqF6Hg==",
       "dev": true,
       "requires": {
-        "lodash": "^4.17.21",
         "postcss-media-query-parser": "^0.2.3",
         "postcss-resolve-nested-selector": "^0.1.1",
-        "postcss-selector-parser": "^6.0.6",
-        "postcss-value-parser": "^4.1.0"
+        "postcss-selector-parser": "^6.0.11",
+        "postcss-value-parser": "^4.2.0"
       }
     },
     "supports-color": {
@@ -8204,9 +8263,9 @@
       }
     },
     "supports-hyperlinks": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.2.0.tgz",
-      "integrity": "sha512-6sXEzV5+I5j8Bmq9/vUphGRM/RJNT9SCURJLjwfOg51heRtguGWDzcaBlgAzKhQa0EVNpPEKzQuBwZ8S8WaCeQ==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/supports-hyperlinks/-/supports-hyperlinks-2.3.0.tgz",
+      "integrity": "sha512-RpsAZlpWcDwOPQA22aCH4J0t7L8JmAvsCxfOSEwm7cQs3LshN36QaTkwd70DnBOXDWGssw2eUoc8CaRWT0XunA==",
       "dev": true,
       "requires": {
         "has-flag": "^4.0.0",
@@ -8238,9 +8297,9 @@
       "dev": true
     },
     "table": {
-      "version": "6.8.0",
-      "resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz",
-      "integrity": "sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA==",
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/table/-/table-6.8.1.tgz",
+      "integrity": "sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==",
       "dev": true,
       "requires": {
         "ajv": "^8.0.1",
@@ -8251,9 +8310,9 @@
       },
       "dependencies": {
         "ajv": {
-          "version": "8.11.0",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
-          "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+          "version": "8.12.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.12.0.tgz",
+          "integrity": "sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==",
           "dev": true,
           "requires": {
             "fast-deep-equal": "^3.1.1",
@@ -8298,14 +8357,15 @@
       }
     },
     "tough-cookie": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.0.0.tgz",
-      "integrity": "sha512-tHdtEpQCMrc1YLrMaqXXcj6AxhYi/xgit6mZu1+EDWUn+qhUf8wMQoFIy9NXuq23zAwtcB0t/MjACGR18pcRbg==",
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-4.1.3.tgz",
+      "integrity": "sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==",
       "dev": true,
       "requires": {
         "psl": "^1.1.33",
         "punycode": "^2.1.1",
-        "universalify": "^0.1.2"
+        "universalify": "^0.2.0",
+        "url-parse": "^1.5.3"
       }
     },
     "tr46": {
@@ -8366,9 +8426,9 @@
       "devOptional": true
     },
     "universalify": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.2.0.tgz",
+      "integrity": "sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==",
       "dev": true
     },
     "uri-js": {
@@ -8380,6 +8440,16 @@
         "punycode": "^2.1.0"
       }
     },
+    "url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "dev": true,
+      "requires": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -8403,9 +8473,9 @@
       }
     },
     "vite": {
-      "version": "2.9.15",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.15.tgz",
-      "integrity": "sha512-fzMt2jK4vQ3yK56te3Kqpkaeq9DkcZfBbzHwYpobasvgYmP2SoAr6Aic05CsB4CzCZbsDv4sujX3pkEGhLabVQ==",
+      "version": "2.9.16",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.16.tgz",
+      "integrity": "sha512-X+6q8KPyeuBvTQV8AVSnKDvXoBMnTx8zxh54sOwmmuOdxkjMmEJXH2UEchA+vTMps1xw9vL64uwJOWryULg7nA==",
       "dev": true,
       "requires": {
         "esbuild": "^0.14.27",
@@ -8557,9 +8627,9 @@
       }
     },
     "word-wrap": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
-      "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
       "dev": true
     },
     "wrappy": {
@@ -8569,9 +8639,9 @@
       "dev": true
     },
     "write-file-atomic": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.1.tgz",
-      "integrity": "sha512-nSKUxgAbyioruk6hU87QzVbY279oYT6uiwgDoujth2ju4mJ+TZau7SQBhtbTmUyuNYTuXnSyRn66FV0+eCgcrQ==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.2.tgz",
+      "integrity": "sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==",
       "dev": true,
       "requires": {
         "imurmurhash": "^0.1.4",
diff --git a/package.json b/package.json
index 3415721a..8ca3eab9 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,11 @@
     "@types/luxon": "^2.3.1",
     "@vueuse/core": "^8.6.0",
     "dompurify": "^2.3.8",
+    "js-cookie": "^3.0.5",
+    "jwt-decode": "^3.1.2",
+    "lodash": "^4.17.21",
     "luxon": "^2.5.2",
+    "moment": "^2.30.1",
     "nanoid": "^4.0.0",
     "pinia": "^2.0.14",
     "swrv": "^1.0.0-beta.8",
@@ -24,7 +28,9 @@
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.1.0",
     "@types/dompurify": "^2.3.3",
+    "@types/js-cookie": "^3.0.3",
     "@types/jsdom": "^16.2.14",
+    "@types/lodash": "^4.14.202",
     "@types/node": "^16.11.27",
     "@utrecht/component-library-css": "1.0.0-alpha.361",
     "@utrecht/component-library-vue": "1.0.0-alpha.138",
@@ -48,4 +54,4 @@
     "vitest": "^0.9.3",
     "vue-tsc": "^0.34.7"
   }
-}
\ No newline at end of file
+}
diff --git a/public/env.js b/public/env.js
index 41d0eecb..9468f855 100644
--- a/public/env.js
+++ b/public/env.js
@@ -1,3 +1,3 @@
 window.organisatieIds = ["999990639"];
 window.pubBeheerUrl = "https://openweb.kiss.commonground.nu/wp-login.php";
-window.gatewayBaseUri = "https://kissdevelopment.commonground.nu";
\ No newline at end of file
+window.gatewayBaseUri = "https://api.buren.commonground.nu";
diff --git a/src/assets/design-tokens.scss b/src/assets/design-tokens.scss
index be3a88ac..6bfabeda 100644
--- a/src/assets/design-tokens.scss
+++ b/src/assets/design-tokens.scss
@@ -12,6 +12,7 @@
     --color-error-hover: #f47171;
     --color-error-hover-text: var(--color-headings);
     --color-warning: orange;
+    --color-info: lightblue;
     --color-category-default: hsl(184, 54%, 70%);
     --color-category-website: hsl(285, 56%, 83%);
     --color-white: #fff;
@@ -69,6 +70,11 @@
     --utrecht-border-width-sm: 1px;
     --utrecht-color-grey-90: var(--color-tertiary);
 
+    --utrecht-separator-margin-block-start: 5px;
+    --utrecht-separator-margin-block-end: 5px;
+    --utrecht-separator-block-size: 1px;
+    --utrecht-separator-color: var(--color-tertiary);
+
     /* h1 */
     --utrecht-heading-1-line-height: 4.25rem;
     --utrecht-heading-1-font-size: 2.5rem;
diff --git a/src/components/ApplicationMessage.vue b/src/components/ApplicationMessage.vue
index f4e6bca8..980dcae7 100644
--- a/src/components/ApplicationMessage.vue
+++ b/src/components/ApplicationMessage.vue
@@ -10,9 +10,9 @@ import { defineProps, toRefs, onMounted, ref, type PropType } from "vue";
 const fade = ref(false);
 const props = defineProps({
   messageType: {
-    type: String as PropType<"error" | "confirm" | "warning">,
+    type: String as PropType<"error" | "confirm" | "warning" | "info">,
     validator: (value) => {
-      return value == "error" || value == "confirm" || value == "warning";
+      return value == "error" || value == "confirm" || value == "warning" || value == "info";
     },
     default: "confirm",
   },
@@ -48,6 +48,11 @@ article {
   background-color: var(--color-warning);
 }
 
+.info {
+  background-color: var(--color-info);
+  color: black
+}
+
 .fade {
   visibility: hidden;
   opacity: 0;
diff --git a/src/features/contactmoment/ContactmomentenOverzicht.vue b/src/features/contactmoment/ContactmomentenOverzicht.vue
index 2485ee9a..15db676a 100644
--- a/src/features/contactmoment/ContactmomentenOverzicht.vue
+++ b/src/features/contactmoment/ContactmomentenOverzicht.vue
@@ -17,7 +17,7 @@
                 formatDateOnly(contactmoment.registratiedatum)
               }}</span>
               <span aria-describedby="medewerker-header">{{
-                contactmoment["_self"].owner
+                contactmoment["_self"].owner.name
               }}</span>
               <span aria-describedby="kanaal-header">{{
                 contactmoment.kanaal
@@ -46,10 +46,26 @@
                 <dt>Zaaktype</dt>
                 <dd>{{ zaak.zaaktype }}</dd>
                 <dt>Status</dt>
-                <dd>{{ zaak.status }}</dd>
+                <dd>
+                  <span v-if="zaak.status">{{ zaak.status }}</span>
+                  <span v-else>Geen status</span>
+                </dd>
               </template>
               <dt>Notitie</dt>
-              <dd class="tekst">{{ contactmoment.tekst }}</dd>
+              <dd class="tekst">
+                <span v-if="contactmoment.tekst">{{
+                  contactmoment.tekst
+                }}</span>
+                <span v-else>Geen notitie</span>
+              </dd>
+
+              <dt>Afdeling</dt>
+              <dd>
+                <span v-if="contactmoment.afdeling">{{
+                  contactmoment.afdeling
+                }}</span>
+                <span v-else>Geen afdeling</span>
+              </dd>
             </dl>
             <p
               v-for="(
diff --git a/src/features/contactmoment/ContactverzoekenOverzicht.vue b/src/features/contactmoment/ContactverzoekenOverzicht.vue
index 291d2447..a6ee30f4 100644
--- a/src/features/contactmoment/ContactverzoekenOverzicht.vue
+++ b/src/features/contactmoment/ContactverzoekenOverzicht.vue
@@ -63,6 +63,16 @@
             {{ contactverzoek.notitie }}
           </dd>
         </dl>
+
+        <dl>
+          <dt>Afdeling</dt>
+          <dd>
+            <span v-if="contactverzoek.afdeling">{{
+              contactverzoek.afdeling
+            }}</span>
+            <span v-else>Geen afdeling</span>
+          </dd>
+        </dl>
       </div>
     </div>
   </section>
diff --git a/src/features/contactmoment/service.ts b/src/features/contactmoment/service.ts
index 92b016a8..a1acc861 100644
--- a/src/features/contactmoment/service.ts
+++ b/src/features/contactmoment/service.ts
@@ -18,7 +18,7 @@ import type {
 export const saveContactmoment = (
   data: Contactmoment
 ): Promise<{ id: string; url: string; gespreksId: string }> =>
-  fetchLoggedIn(window.gatewayBaseUri + "/api/contactmomenten", {
+  fetchLoggedIn(window.gatewayBaseUri + "/api/kic/v1/contactmomenten", {
     method: "POST",
     headers: {
       Accept: "application/json",
@@ -66,20 +66,26 @@ export const koppelObject = (data: ContactmomentObject) =>
     body: JSON.stringify(data),
   }).then(throwIfNotOk);
 
-export function koppelKlant({
+export async function koppelKlant({
   klantId,
   contactmomentId,
 }: {
   klantId: string;
   contactmomentId: string;
 }) {
-  return fetchLoggedIn(window.gatewayBaseUri + "/api/klantcontactmomenten", {
+  let _klantId = klantId;
+
+  if (!_klantId) {
+    _klantId = await getAnonymousUserId(); // we're setting the "klant" to an anonymous one which is readily available in the data set
+  }
+
+  return fetchLoggedIn(window.gatewayBaseUri + "/api/kic/v1/klantcontactmomenten", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
     },
     body: JSON.stringify({
-      klant: klantId,
+      klant: _klantId,
       contactmoment: contactmomentId,
       rol: "gesprekspartner",
     }),
@@ -91,7 +97,7 @@ export function useContactverzoekenByKlantId(
   page: Ref<number>
 ) {
   function getUrl() {
-    const url = new URL(window.gatewayBaseUri + "/api/klantcontactmomenten");
+    const url = new URL(window.gatewayBaseUri + "/api/kic/v1/klantcontactmomenten");
     url.searchParams.set(
       "_order[embedded.contactmoment.registratiedatum]",
       "desc"
@@ -99,10 +105,43 @@ export function useContactverzoekenByKlantId(
     url.searchParams.append("extend[]", "medewerker");
     url.searchParams.append("extend[]", "embedded._self.owner");
     url.searchParams.append("extend[]", "embedded.contactmoment.todo");
+    url.searchParams.append("extend[]", "embedded.contactmoment.afdeling");
     url.searchParams.set("_limit", "10");
     url.searchParams.set("_page", page.value.toString());
     url.searchParams.set("embedded.klant._self.id", id.value);
     url.searchParams.set("embedded.contactmoment.todo", "IS NOT NULL");
+    url.searchParams.set("klant", "IS NOT NULL");
+    url.searchParams.set("contactmoment", "IS NOT NULL");
+    return url.toString();
+  }
+
+  return ServiceResult.fromFetcher(getUrl, fetchContactverzoeken, {
+    getUniqueId() {
+      return getUrl() + "contactverzoek";
+    },
+  });
+}
+
+export function useContactverzoekenByUserId(
+  id: Ref<string>,
+  page: Ref<number>
+) {
+  function getUrl() {
+    const url = new URL(window.gatewayBaseUri + "/api/kic/v1/klantcontactmomenten");
+    url.searchParams.set(
+      "_order[embedded.contactmoment.registratiedatum]",
+      "desc"
+    );
+    url.searchParams.append("extend[]", "medewerker");
+    url.searchParams.append("extend[]", "embedded._self.owner");
+    url.searchParams.append("extend[]", "embedded.contactmoment.todo");
+    url.searchParams.append("extend[]", "embedded.contactmoment.afdeling");
+    url.searchParams.set("_limit", "10");
+    url.searchParams.set("_page", page.value.toString());
+    url.searchParams.set("_self.owner.id", id.value);
+    url.searchParams.set("embedded.contactmoment.todo", "IS NOT NULL");
+    url.searchParams.set("klant", "IS NOT NULL");
+    url.searchParams.set("contactmoment", "IS NOT NULL");
     return url.toString();
   }
 
@@ -138,9 +177,21 @@ const mapContactverzoekDetail = (
     behandelaar: todo.attendees?.[0] ?? "-",
     afgerond: todo.completed ? formatDateOnly(new Date(todo.completed)) : "-",
     starttijd: formatTimeOnly(new Date(contactmoment.registratiedatum)),
-    aanmaker: contactmoment["_self"].owner,
+    aanmaker: contactmoment["_self"].owner.name,
     notitie: todo.description,
     primaireVraagWeergave: contactmoment.primaireVraagWeergave,
     afwijkendOnderwerp: contactmoment.afwijkendOnderwerp,
+    afdeling: contactmoment.embedded?.afdeling?.name,
   };
 };
+
+export const getAnonymousUserId = async (): Promise<string> => {
+  return fetchLoggedIn(
+    `${window.gatewayBaseUri}/api/kic/v1/klanten?functie=ANONYMOUS_USER` // if this filter does not work, the gateway should be enriched
+  )
+    .then(throwIfNotOk)
+    .then((r) => r.json())
+    .then(({ results }) => {
+      return results[0]?._id;
+    });
+};
diff --git a/src/features/contactmoment/types.ts b/src/features/contactmoment/types.ts
index d9ae2e69..794f8dbe 100644
--- a/src/features/contactmoment/types.ts
+++ b/src/features/contactmoment/types.ts
@@ -24,6 +24,7 @@ export interface Contactmoment {
   primaireVraag?: string;
   primaireVraagWeergave?: string;
   afwijkendOnderwerp?: string;
+  afdeling?: string;
 }
 
 export interface Gespreksresultaat {
@@ -48,4 +49,5 @@ export interface ContactverzoekDetail {
   notitie: string;
   primaireVraagWeergave?: string;
   afwijkendOnderwerp?: string;
+  afdeling?: string;
 }
diff --git a/src/features/contactverzoek/ContactverzoekFormulier.vue b/src/features/contactverzoek/ContactverzoekFormulier.vue
index b0a0c251..a7cef6dc 100644
--- a/src/features/contactverzoek/ContactverzoekFormulier.vue
+++ b/src/features/contactverzoek/ContactverzoekFormulier.vue
@@ -15,7 +15,7 @@
         <option
           v-for="afdeling in afdelingen.data"
           :key="afdeling.id"
-          :value="afdeling.name"
+          :value="afdeling.id"
         >
           {{ afdeling.name }}
         </option>
diff --git a/src/features/contactverzoek/service.ts b/src/features/contactverzoek/service.ts
index c96a9564..6301c3ff 100644
--- a/src/features/contactverzoek/service.ts
+++ b/src/features/contactverzoek/service.ts
@@ -19,10 +19,11 @@ export interface Contactverzoek {
   };
   primaireVraagWeergave?: string;
   afwijkendOnderwerp?: string;
+  afdeling?: string;
 }
 
 export function saveContactverzoek(data: Contactverzoek) {
-  const url = window.gatewayBaseUri + "/api/contactmomenten";
+  const url = window.gatewayBaseUri + "/api/kic/v1/contactmomenten";
   const registratiedatum = getFormattedUtcDate();
 
   return fetchLoggedIn(url, {
@@ -41,7 +42,7 @@ export function saveContactverzoek(data: Contactverzoek) {
 }
 
 export function createKlant(klant: NieuweKlant) {
-  const url = `${window.gatewayBaseUri}/api/klanten`;
+  const url = `${window.gatewayBaseUri}/api/kic/v1/klanten`;
   return fetchLoggedIn(url, {
     method: "POST",
     headers: {
diff --git a/src/features/klant/_dev_fix_klanten.ts b/src/features/klant/_dev_fix_klanten.ts
index 4c240a83..d8005db8 100644
--- a/src/features/klant/_dev_fix_klanten.ts
+++ b/src/features/klant/_dev_fix_klanten.ts
@@ -7,7 +7,7 @@ import {
 } from "@/services";
 import { KlantType } from "./types";
 
-const klantRootUrl = `${window.gatewayBaseUri}/api/klanten`;
+const klantRootUrl = `${window.gatewayBaseUri}/api/kic/v1/klanten`;
 
 const urlForKLantenWithoutSubjectType = (function getAllKlantenUrl() {
   const url = new URL(klantRootUrl);
diff --git a/src/features/klant/bedrijf/BedrijfZoeker.vue b/src/features/klant/bedrijf/BedrijfZoeker.vue
index 844a5937..fa63387e 100644
--- a/src/features/klant/bedrijf/BedrijfZoeker.vue
+++ b/src/features/klant/bedrijf/BedrijfZoeker.vue
@@ -3,8 +3,8 @@
     <fieldset class="radio-group">
       <legend>Waar wil je op zoeken?</legend>
       <label v-for="(label, field) in labels" :key="field">
-        <input type="radio" :value="field" v-model="state.field" required />
-        {{ label }}
+        <input type="radio" :value="field" v-model="state.field" required :disabled="label === 'E-mailadres' || label === 'Telefoonnummer' || label === 'Postcode + Huisnummer' "  />
+        <span :class="{disabled: label === 'E-mailadres' || label === 'Telefoonnummer' || label === 'Postcode + Huisnummer'}">{{ label }}</span>
       </label>
     </fieldset>
     <fieldset class="search-bar">
@@ -39,7 +39,12 @@
       />
     </template>
     <application-message
-      v-if="bedrijven.error"
+      v-if="bedrijven.error && bedrijven.error.message === 'Empty Results' || bedrijven.error.message === '404'"
+      messageType="info"
+      message="Geen resultaten gevonden"
+    />
+    <application-message
+      v-if="bedrijven.error && bedrijven.error.message !== 'Empty Results' && bedrijven.error.message !== '404'"
       messageType="error"
       message="Er is een fout opgetreden"
     />
@@ -144,6 +149,10 @@ input[type="search"] {
   width: min(100%, 20rem);
 }
 
+.disabled {
+  opacity: 0.5;
+}
+
 .pagination {
   margin-inline: auto;
 }
diff --git a/src/features/klant/bedrijf/HandelsregisterGegevens.vue b/src/features/klant/bedrijf/HandelsregisterGegevens.vue
index 1c325728..f9d12487 100644
--- a/src/features/klant/bedrijf/HandelsregisterGegevens.vue
+++ b/src/features/klant/bedrijf/HandelsregisterGegevens.vue
@@ -1,37 +1,41 @@
 <template>
   <article class="details-block">
     <utrecht-heading :level="2"> Gegevens Handelsregister</utrecht-heading>
-    <dl>
-      <dt>Bedrijfsnaam</dt>
-      <dd>{{ bedrijf.bedrijfsnaam }}</dd>
-      <dt>KvK-nummer</dt>
-      <dd>{{ bedrijf.kvkNummer }}</dd>
-      <dt>Vestigingsnummer</dt>
-      <dd>
-        {{ bedrijf.vestigingsnummer }}
-      </dd>
-      <dt>E-mailadres</dt>
-      <dd>{{ bedrijf.email }}</dd>
-      <dt>Telefoonnummer</dt>
-      <dd>{{ bedrijf.telefoonnummer }}</dd>
-      <dt>Adres</dt>
-      <dd>
-        {{
-          [
-            bedrijf.straatnaam,
-            bedrijf.huisnummer,
-            bedrijf.huisletter,
-            bedrijf.huisnummertoevoeging,
-          ]
-            .filter(Boolean)
-            .join(" ")
-        }}
-      </dd>
-      <dt>Postcode</dt>
-      <dd>{{ bedrijf.postcode }}</dd>
-      <dt>Plaats</dt>
-      <dd>{{ bedrijf.woonplaats }}</dd>
-    </dl>
+    
+    <div v-for="(bedrijf, index) in bedrijven.page">
+      <dl  >
+        <dt>Bedrijfsnaam</dt>
+        <dd>{{ bedrijf.bedrijfsnaam }}</dd>
+        <dt>KvK-nummer</dt>
+        <dd>{{ bedrijf.kvkNummer }}</dd>
+        <dt>Vestigingsnummer</dt>
+        <dd>
+          {{ bedrijf.vestigingsnummer }}
+        </dd>
+        <dt>E-mailadres</dt>
+        <dd>{{ bedrijf.email }}</dd>
+        <dt>Telefoonnummer</dt>
+        <dd>{{ bedrijf.telefoonnummer }}</dd>
+        <dt>Adres</dt>
+        <dd>
+          {{
+            [
+              bedrijf.straatnaam,
+              bedrijf.huisnummer,
+              bedrijf.huisletter,
+              bedrijf.huisnummertoevoeging,
+            ]
+              .filter(Boolean)
+              .join(" ")
+          }}
+        </dd>
+        <dt>Postcode</dt>
+        <dd>{{ bedrijf.postcode }}</dd>
+        <dt>Plaats</dt>
+        <dd>{{ bedrijf.woonplaats }}</dd>
+      </dl>
+      <hr v-if="index + 1 !== bedrijven?.page?.length" class="utrecht-separator separator"/>
+    </div>
   </article>
 </template>
 
@@ -39,5 +43,14 @@
 import type { Bedrijf } from "./types";
 import { Heading as UtrechtHeading } from "@utrecht/component-library-vue";
 
-defineProps<{ bedrijf: Bedrijf }>();
+defineProps<{ bedrijven: Bedrijf }>();
 </script>
+
+<style scoped lang="scss">
+
+.separator {
+  margin-block-start: 15px;
+  margin-block-end: 15px;
+}
+   
+</style>
diff --git a/src/features/klant/bedrijf/service.ts b/src/features/klant/bedrijf/service.ts
index 46af5ddc..b5eeb55a 100644
--- a/src/features/klant/bedrijf/service.ts
+++ b/src/features/klant/bedrijf/service.ts
@@ -1,5 +1,4 @@
 import {
-  enforceOneOrZero,
   fetchLoggedIn,
   parseJson,
   parsePagination,
@@ -126,7 +125,7 @@ export const useBedrijfByVestigingsnummer = (
   };
 
   const fetcher = (url: string) =>
-    searchBedrijvenInHandelsRegister(url).then(enforceOneOrZero);
+    searchBedrijvenInHandelsRegister(url);
 
   return ServiceResult.fromFetcher(getUrl, fetcher, {
     getUniqueId,
diff --git a/src/features/klant/persoon/PersoonZoeker.vue b/src/features/klant/persoon/PersoonZoeker.vue
index 7cb5228c..c0ffc7f6 100644
--- a/src/features/klant/persoon/PersoonZoeker.vue
+++ b/src/features/klant/persoon/PersoonZoeker.vue
@@ -56,7 +56,12 @@
         />
       </template>
       <application-message
-        v-if="klanten.error"
+        v-if="klanten.error && klanten.error.message === `Empty Results` || klanten.error.message === `404`"
+        messageType="info"
+        message="Geen resultaten gevonden"
+      />
+      <application-message
+        v-if="klanten.error && klanten.error.message !== `Empty Results` && klanten.error.message !== '404'"
         messageType="error"
         message="Er is een fout opgetreden"
       />
@@ -77,7 +82,12 @@
         />
       </template>
       <application-message
-        v-if="personen.error"
+        v-if="personen.error && personen.error.message === `Empty Results` || personen.error.message === `404`"
+        messageType="info"
+        message="Geen resultaten gevonden"
+      />
+      <application-message
+        v-if="personen.error && personen.error.message !== `Empty Results` && personen.error.message !== `404`"
         messageType="error"
         message="Er is een fout opgetreden"
       />
@@ -103,7 +113,7 @@ import { useRouter } from "vue-router";
 import SearchResultsCaption from "@/components/SearchResultsCaption.vue";
 import {
   parseBsn,
-  parseDutchDate,
+  parseGeboortedatumAchternaam,
   parsePostcodeHuisnummer,
 } from "@/helpers/validation";
 import {
@@ -118,7 +128,7 @@ type SearchFields = KlantSearchField | PersoonSearchField;
 const labels: {
   readonly [K in SearchFields]: string;
 } = {
-  geboortedatum: "Geboortedatum",
+  geboortedatumAchternaam: "Geboortedatum + achternaam",
   postcodeHuisnummer: "Postcode + huisnummer",
   email: "E-mailadres",
   telefoonnummer: "Telefoonnummer",
@@ -157,8 +167,8 @@ const currentKlantQuery = computed(() => {
 const currentPersoonQuery = computed(() => {
   const { currentSearch, field } = store.value;
 
-  if (field === "geboortedatum") {
-    const parsed = parseDutchDate(currentSearch);
+  if (field === "geboortedatumAchternaam") {
+    const parsed = parseGeboortedatumAchternaam(currentSearch);
     return parsed instanceof Error
       ? parsed
       : persoonQuery({
diff --git a/src/features/klant/persoon/service.ts b/src/features/klant/persoon/service.ts
index 1d5a9c4d..dd24f2ce 100644
--- a/src/features/klant/persoon/service.ts
+++ b/src/features/klant/persoon/service.ts
@@ -1,10 +1,13 @@
 import { formatIsoDate } from "@/helpers/date";
-import type { PostcodeHuisnummer } from "@/helpers/validation";
+import type {
+  GeboortedatumAchternaam,
+  PostcodeHuisnummer,
+} from "@/helpers/validation";
 import {
   fetchLoggedIn,
   throwIfNotOk,
   parseJson,
-  parsePagination,
+  parseWithoutPagination,
   ServiceResult,
   type ServiceData,
   enforceOneOrZero,
@@ -13,13 +16,13 @@ import { mutate } from "swrv";
 import type { Ref } from "vue";
 import type { Persoon } from "./types";
 
-const personenRootUrl = window.gatewayBaseUri + "/api/ingeschrevenpersonen";
+const personenRootUrl = window.gatewayBaseUri + "/api/brp_proxy/ingeschrevenpersonen";
 
 type QueryParam = [string, string][];
 
 type SearchPersoonFieldParams = {
   bsn: string;
-  geboortedatum: Date;
+  geboortedatumAchternaam: GeboortedatumAchternaam;
   postcodeHuisnummer: PostcodeHuisnummer;
 };
 
@@ -44,16 +47,20 @@ export function persoonQuery<K extends PersoonSearchField>(
 
 const queryDictionary: PersoonQueryParams = {
   bsn: (search) => [["burgerservicenummer", search]],
-  geboortedatum: (search) => [
-    ["embedded.geboorte.embedded.datumOnvolledig.datum", formatIsoDate(search)],
+  geboortedatumAchternaam: (search) => [
+    [
+      "geboorte__datum",
+      formatIsoDate(search.geboortedatum),
+    ],
+    ["naam__geslachtsnaam", search.achternaam],
   ],
   postcodeHuisnummer: ({ postcode, huisnummer }) => [
     [
-      "embedded.verblijfplaats.postcode",
+      "verblijfplaats__postcode",
       `${postcode.numbers}${postcode.digits}`,
     ],
 
-    ["embedded.verblijfplaats.huisnummer[int_compare]", huisnummer],
+    ["verblijfplaats__huisnummer", huisnummer],
   ],
 };
 
@@ -64,8 +71,8 @@ function getQueryParams<K extends PersoonSearchField>(params: PersoonQuery<K>) {
 }
 
 function mapPersoon(json: any): Persoon {
-  const { verblijfplaats, naam, geboorte } = json?.embedded ?? {};
-  const { plaats, land } = geboorte?.embedded ?? {};
+  const { verblijfplaats, naam, geboorte } = json ?? {};
+  const { plaats, land } = geboorte ?? {};
 
   const {
     postcode,
@@ -76,7 +83,7 @@ function mapPersoon(json: any): Persoon {
     huisnummertoevoeging,
   } = verblijfplaats ?? {};
 
-  const datum = geboorte?.embedded?.datumOnvolledig ?? {};
+  const datum = geboorte?.datum ?? {};
 
   const geboortedatum =
     datum && new Date(datum.jaar, datum.maand - 1, datum.dag);
@@ -90,9 +97,9 @@ function mapPersoon(json: any): Persoon {
     voornaam: naam?.voornamen,
     voorvoegselAchternaam: naam?.voorvoegsel,
     achternaam: naam?.geslachtsnaam,
-    geboorteplaats: plaats,
-    geboorteland: land,
-    woonplaats,
+    geboorteplaats: plaats ?? "-",
+    geboorteland: land ?? "-",
+    woonplaats: woonplaats ?? "-",
     straat,
     huisletter,
     huisnummertoevoeging,
@@ -104,11 +111,13 @@ function getPersoonSearchUrl<K extends PersoonSearchField>(
   page: number | undefined
 ) {
   if (!search) return "";
+
   const url = new URL(personenRootUrl);
+
   getQueryParams<K>(search).forEach((tuple) => {
     url.searchParams.set(...tuple);
   });
-  url.searchParams.set("extend[]", "all");
+
   if (page !== undefined && page !== 1) {
     url.searchParams.set("_page", page.toString());
   }
@@ -120,7 +129,6 @@ function getPersoonUrlByBsn(bsn: string) {
   if (!bsn) return "";
   const url = new URL(personenRootUrl);
   url.searchParams.set("burgerservicenummer", bsn);
-  url.searchParams.set("extend[]", "all");
   return url.toString();
 }
 
@@ -137,7 +145,7 @@ export const searchPersonen = (url: string) => {
   return fetchLoggedIn(url)
     .then(throwIfNotOk)
     .then(parseJson)
-    .then((p) => parsePagination(p, mapPersoon))
+    .then((p) => parseWithoutPagination(p, mapPersoon))
     .then((p) => {
       p.page.forEach((persoon) => {
         const key = getPersoonUniqueBsnId(persoon.bsn);
diff --git a/src/features/klant/service.ts b/src/features/klant/service.ts
index 3f701c33..6468291a 100644
--- a/src/features/klant/service.ts
+++ b/src/features/klant/service.ts
@@ -2,11 +2,11 @@ import {
   ServiceResult,
   fetchLoggedIn,
   type Paginated,
-  parsePagination,
   throwIfNotOk,
   parseJson,
   type ServiceData,
   enforceOneOrZero,
+  parsePaginationKlantenPersonen,
 } from "@/services";
 import { mutate } from "swrv";
 import type { Ref } from "vue";
@@ -59,7 +59,7 @@ type KlantSearchParameters<K extends KlantSearchField = KlantSearchField> = {
   page: Ref<number | undefined>;
 };
 
-const klantRootUrl = `${window.gatewayBaseUri}/api/klanten`;
+const klantRootUrl = `${window.gatewayBaseUri}/api/kic/v1/klanten`;
 
 function setExtend(url: URL) {
   url.searchParams.set("extend[]", "all");
@@ -107,7 +107,7 @@ function searchKlanten(url: string): Promise<Paginated<Klant>> {
   return fetchLoggedIn(url)
     .then(throwIfNotOk)
     .then(parseJson)
-    .then((j) => parsePagination(j, mapKlant))
+    .then((j) => parsePaginationKlantenPersonen(j, mapKlant))
     .then((p) => {
       p.page.forEach((klant) => {
         const idUrl = getKlantIdUrl(klant.id);
@@ -136,6 +136,7 @@ function getKlantBsnUrl(bsn?: string) {
   const url = new URL(klantRootUrl);
   setExtend(url);
   url.searchParams.set("embedded.subjectIdentificatie.inpBsn", bsn);
+  url.searchParams.set("subjectType", "natuurlijk_persoon");
   return url.toString();
 }
 
@@ -165,6 +166,15 @@ function updateContactgegevens({
   emails,
 }: UpdateContactgegevensParams): Promise<UpdateContactgegevensParams> {
   const url = klantRootUrl + "/" + id;
+
+  const mapKlantPayload = (klant: any) => {
+    const _klant = klant;
+
+    delete _klant.embedded;
+
+    return JSON.stringify({ ...klant, telefoonnummers, emails });
+  };
+
   return fetchLoggedIn(url + "?fields[]=klantnummer&fields[]=bronorganisatie")
     .then(throwIfNotOk)
     .then(parseJson)
@@ -174,13 +184,7 @@ function updateContactgegevens({
         headers: {
           "Content-Type": "application/json",
         },
-        body: JSON.stringify({
-          ...klant,
-          embedded: {
-            telefoonnummers,
-            emails,
-          },
-        }),
+        body: mapKlantPayload(klant),
       })
     )
     .then(throwIfNotOk)
@@ -245,7 +249,7 @@ export async function ensureKlantForBsn({
       bronorganisatie: window.organisatieIds[0],
       // TODO: WAT MOET HIER IN KOMEN?
       klantnummer: "123",
-      subjectIdentificatie: { inpBsn: bsn },
+      subjectIdentificatie: { inpBsn: bsn.toString() },
       subjectType: KlantType.Persoon,
       voornaam,
       voorvoegselAchternaam,
diff --git a/src/features/login/LoginOverlay.vue b/src/features/login/LoginOverlay.vue
index be91e679..0bf35d96 100644
--- a/src/features/login/LoginOverlay.vue
+++ b/src/features/login/LoginOverlay.vue
@@ -24,6 +24,9 @@ import { handleLogin } from "@/services";
 import { loginUrl, redirectUrl, sessionStorageKey } from "./config";
 import { useUserStore, type User } from "@/stores/user";
 import { toast } from "@/stores/toast";
+import { useRouter } from "vue-router";
+
+const router = useRouter();
 
 let newTab: Window | null = null;
 
@@ -138,7 +141,9 @@ function onLinkClick(e: Event) {
 }
 
 function redirectToLogin() {
-  window.location.href = loginUrl;
+  if (router.currentRoute.value.path !== "/login") {
+    window.location.href = loginUrl;
+  }
 }
 
 // in case of a session expiry, you have a minute to log in again.
diff --git a/src/features/login/config.ts b/src/features/login/config.ts
index 622962f8..4c683602 100644
--- a/src/features/login/config.ts
+++ b/src/features/login/config.ts
@@ -2,7 +2,7 @@ import type { RouteRecordRaw } from "vue-router";
 import RedirectPage from "./RedirectPage.vue";
 
 export const meUrl = window.gatewayBaseUri + "/me";
-export const loginUrl = window.gatewayBaseUri + "/login/oidc/dex";
+export const loginUrl = "/login";
 export const logoutUrl = window.gatewayBaseUri + "/api/users/logout";
 export const redirectUrl = "/redirect-to-login";
 export const sessionStorageKey = "kiss_close";
diff --git a/src/features/login/service.ts b/src/features/login/service.ts
index 4c32062c..eeaa7c1e 100644
--- a/src/features/login/service.ts
+++ b/src/features/login/service.ts
@@ -1,3 +1,4 @@
+import Cookies from "js-cookie";
 import { ServiceResult } from "@/services";
 import type { User } from "@/stores/user";
 import { logoutUrl, meUrl } from "./config";
@@ -8,7 +9,9 @@ const anonymousUser = Object.freeze({
 
 async function fetchUser(url: string): Promise<User> {
   const response = await fetch(url, {
-    credentials: "include",
+    headers: {
+      Authorization: `Bearer ${Cookies.get("jwt")}`,
+    },
   });
 
   if (response.status === 401) return anonymousUser;
@@ -37,5 +40,10 @@ export const useCurrentUser = () => ServiceResult.fromFetcher(meUrl, fetchUser);
 
 export const logOut = () =>
   fetch(logoutUrl, { credentials: "include" }).then((r) => {
-    if (!r.ok) throw new Error("Logout failed");
+    if (!r.ok) {
+      throw new Error("Logout failed");
+    } else {
+      Cookies.remove("jwt");
+      Cookies.remove("userId");
+    }
   });
diff --git a/src/features/search/GlobalSearch.vue b/src/features/search/GlobalSearch.vue
index 9b5f7f1f..0ca9e16e 100644
--- a/src/features/search/GlobalSearch.vue
+++ b/src/features/search/GlobalSearch.vue
@@ -5,19 +5,18 @@
     @submit.prevent="applySearch"
     ref="searchBarRef"
   >
-    <fieldset class="bronnen" v-if="sources.success">
-      <label v-for="bron in sources.data" :key="bron.name + bron.type">
+    <fieldset class="bronnen">
+      <label v-for="bron in sources" :key="bron.name + bron.type">
         <input type="checkbox" v-model="state.selectedSources" :value="bron" />
         {{ bron.name.replace(/(^\w+:|^)\/\//, "").replace("www.", "") }}
       </label>
     </fieldset>
     <div class="search-bar">
       <label for="global-search-input"> Zoekterm</label>
-      <search-combobox
-        :list-items="listItems"
+      <input
+        type="text"
         v-model="state.searchInput"
         placeholder="Zoeken"
-        @search.prevent="applySearch"
         id="global-search-input"
       />
       <button><span>Zoeken</span></button>
@@ -110,6 +109,7 @@
                   :title="title"
                   :heading-level="2"
                 />
+
                 <kennisartikel-detail
                   v-else-if="source === 'Kennisartikel'"
                   :kennisartikel-raw="jsonObject"
@@ -170,7 +170,7 @@ export default {
 <script lang="ts" setup>
 import { Heading as UtrechtHeading } from "@utrecht/component-library-vue";
 import { computed, nextTick, ref, watch } from "vue";
-import { useGlobalSearch, useSources, useSuggestions } from "./service";
+import { useGlobalSearch } from "./service";
 
 import Pagination from "@/nl-design-system/components/Pagination.vue";
 import SimpleSpinner from "@/components/SimpleSpinner.vue";
@@ -184,9 +184,6 @@ import type {
 } from "@/features/search/types";
 import { useContactmomentStore } from "@/stores/contactmoment";
 import { ensureState } from "@/stores/create-store";
-import SearchCombobox from "../../components/SearchCombobox.vue";
-import { mapServiceData } from "@/services";
-import { debouncedRef } from "@vueuse/core";
 
 const emit = defineEmits<{
   (
@@ -225,7 +222,11 @@ const searchParameters = computed(() => ({
 }));
 
 const searchResults = useGlobalSearch(searchParameters);
-const sources = useSources();
+
+const sources = [
+  { name: "Smoelenboek", type: "object_bron" },
+  { name: "Kennisartikel", type: "object_bron" },
+];
 
 const automaticSearchTimeout = ref<number | null>(null);
 
@@ -315,17 +316,6 @@ const handleWebsiteSelected = (website: Website): void => {
   contactmomentStore.addWebsite(website);
   window.open(website.url);
 };
-
-const debounceInput = debouncedRef(
-  computed(() => state.value.searchInput),
-  300
-);
-
-const suggestions = useSuggestions(debounceInput);
-
-const listItems = mapServiceData(suggestions, (items) =>
-  items.map((value) => ({ value }))
-);
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/features/search/KennisartikelDetail.vue b/src/features/search/KennisartikelDetail.vue
index f1c85247..ced389f5 100644
--- a/src/features/search/KennisartikelDetail.vue
+++ b/src/features/search/KennisartikelDetail.vue
@@ -90,7 +90,8 @@ const currentFeedbackSection = computed(() => {
 });
 
 const kennisartikel = computed<Record<string, string>>(() => {
-  const { vertalingen } = props.kennisartikelRaw || {};
+  const vertalingen = props.kennisartikelRaw.embedded?.vertalingen || {};
+
   if (!Array.isArray(vertalingen)) return {};
   return vertalingen.find(({ taal }) => taal === "nl") || {};
 });
diff --git a/src/features/search/MedewerkerDetail.vue b/src/features/search/MedewerkerDetail.vue
index 02ec4b85..c610c15c 100644
--- a/src/features/search/MedewerkerDetail.vue
+++ b/src/features/search/MedewerkerDetail.vue
@@ -3,88 +3,26 @@
     <utrecht-heading :level="headingLevel">
       {{ title }}
     </utrecht-heading>
-    <div>
-      <section>
-        <utrecht-heading :level="headingLevel + 1"
-          >Algemene contactgegevens</utrecht-heading
-        >
-        <dl>
-          <dt>E-mailadres:</dt>
-          <dd>{{ emails }}</dd>
-          <dt>Telefoonnummer:</dt>
-          <dd>{{ telefoonnummers }}</dd>
-        </dl>
-      </section>
-      <section v-if="availabilities">
-        <utrecht-heading :level="headingLevel + 1">Agenda</utrecht-heading>
-        <table class="availability">
-          <thead>
-            <tr>
-              <th></th>
-              <th v-for="(_, day) in availabilities" :key="day">
-                {{ day }}
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <th scope="row">ochtend</th>
-              <td
-                v-for="(value, day) in availabilities"
-                :key="day"
-                :class="[value.ochtend ? 'groen' : 'rood']"
-              >
-                {{ value.ochtend ? "beschikbaar" : "niet beschikbaar" }}
-              </td>
-            </tr>
-            <tr>
-              <th scope="row">middag</th>
-              <td
-                v-for="(value, day) in availabilities"
-                :key="day"
-                :class="[value.middag ? 'groen' : 'rood']"
-              >
-                {{ value.middag ? "beschikbaar" : "niet beschikbaar" }}
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-    </div>
+
     <section>
-      <utrecht-heading :level="headingLevel + 1"
-        >Detailgegevens</utrecht-heading
-      >
-      <img
-        v-if="medewerkerRaw.optionalProfilePicture"
-        :src="medewerkerRaw.optionalProfilePicture"
-        width="128"
-      />
       <dl>
         <dt>Functie:</dt>
         <dd>{{ medewerkerRaw?.function }}</dd>
         <dt>Afdeling:</dt>
         <dd>{{ medewerkerRaw?.department }}</dd>
-        <dt>Wat kun je en wat doe je:</dt>
-        <dd>{{ medewerkerRaw?.skills }}</dd>
-        <template v-if="replacement">
-          <dt>Vervanger:</dt>
-          <dd>{{ replacement }}</dd>
-        </template>
       </dl>
     </section>
   </article>
 
   <content-feedback
     :name="title"
-    :url="medewerkerRaw.url"
+    :url="medewerkerRaw?.url"
     :current-section="currentFeedbackSection"
   />
 </template>
 
 <script lang="ts" setup>
 import { Heading as UtrechtHeading } from "@utrecht/component-library-vue";
-import { computed } from "@vue/reactivity";
 import { ContentFeedback } from "../feedback/index";
 import type { CurrentFeedbackSection } from "../feedback/types";
 
@@ -98,88 +36,27 @@ const currentFeedbackSection: CurrentFeedbackSection = {
   label: props.title,
   id: props.medewerkerRaw?.user,
 };
-
-const availabilities = computed(() => {
-  if (!props.medewerkerRaw?.availabilities) return null;
-
-  const days = ["maandag", "dinsdag", "woensdag", "donderdag", "vrijdag"];
-
-  let availabilities = {};
-
-  days.forEach((day) => {
-    availabilities = {
-      ...availabilities,
-      [day]: props.medewerkerRaw.availabilities[day],
-    };
-  });
-
-  return availabilities as any;
-});
-
-const telefoonnummers = computed(() =>
-  props.medewerkerRaw?.contact?.telefoonnummers
-    ?.map(({ telefoonnummer }: any) => telefoonnummer)
-    ?.filter(Boolean)
-    ?.join(", ")
-);
-
-const emails = computed(
-  () =>
-    props.medewerkerRaw?.contact?.emails
-      ?.map(({ email }: any) => email)
-      ?.filter(Boolean)
-      ?.join(", ") || props.medewerkerRaw?.user
-);
-
-const replacement = computed(() => {
-  if (typeof props.medewerkerRaw?.replacement === "string")
-    return props.medewerkerRaw.replacement;
-  if (typeof props.medewerkerRaw?.replacement?.name === "string")
-    return props.medewerkerRaw.replacement.name;
-  return "";
-});
 </script>
 
 <style lang="scss" scoped>
 article {
   display: grid;
-  gap: var(--spacing-default);
   grid-template-columns: 1fr 1fr;
   column-gap: var(--spacing-large);
 
-  > div {
-    display: flex;
-    flex-direction: column;
-    gap: var(--spacing-default);
+  h2 {
+    margin-block-end: var(--spacing-large);
   }
 
   > :first-child {
     grid-column: span 2;
   }
 
-  img {
-    margin-bottom: var(--spacing-default);
-  }
-
   section > :first-child {
-    margin-block-end: var(--spacing-default);
+    margin-block-end: var(--spacing-large);
   }
 }
 
-table {
-  border-collapse: separate;
-  border-spacing: var(--spacing-small);
-}
-table td {
-  font-size: 0;
-}
-.groen {
-  background-color: green;
-}
-.rood {
-  background-color: red;
-}
-
 dl {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -194,8 +71,4 @@ dd,
 dt {
   line-height: normal;
 }
-
-h2 {
-  margin-bottom: 1em;
-}
 </style>
diff --git a/src/features/search/MedewerkerSearch.vue b/src/features/search/MedewerkerSearch.vue
index 46455c40..b7837c8a 100644
--- a/src/features/search/MedewerkerSearch.vue
+++ b/src/features/search/MedewerkerSearch.vue
@@ -21,7 +21,7 @@ export default {
 <script lang="ts" setup>
 import { debouncedRef } from "@vueuse/core";
 import { computed } from "vue";
-import { useGlobalSearch, useSources } from "./service";
+import { useGlobalSearch } from "./service";
 import type { SearchResult } from "./types";
 import SearchCombobox from "@/components/SearchCombobox.vue";
 import { mapServiceData } from "@/services";
@@ -70,17 +70,18 @@ const searchText = computed({
 });
 const debouncedSearchText = debouncedRef(searchText, 300);
 
-const sources = useSources();
+const sources = [
+  { name: "Smoelenboek", type: "object_bron" },
+  { name: "Kennisartikel", type: "object_bron" },
+];
 
 const searchParams = computed(() => {
-  if (sources.success) {
-    const smoelen = sources.data.find((x) => x.name === "Smoelenboek");
-    if (smoelen) {
-      return {
-        filters: [smoelen],
-        search: debouncedSearchText.value,
-      };
-    }
+  const smoelen = sources.find((x) => x.name === "Smoelenboek");
+  if (smoelen) {
+    return {
+      filters: [smoelen],
+      search: debouncedSearchText.value,
+    };
   }
   return {
     filters: [],
diff --git a/src/features/search/service.ts b/src/features/search/service.ts
index bc2b5e7f..0046f326 100644
--- a/src/features/search/service.ts
+++ b/src/features/search/service.ts
@@ -1,22 +1,18 @@
-import {
-  parseJson,
-  parseValidUrl,
-  ServiceResult,
-  throwIfNotOk,
-  type Paginated,
-} from "@/services";
+import { parseValidUrl, ServiceResult, type Paginated } from "@/services";
 import { fetchLoggedIn } from "@/services";
 import type { Ref } from "vue";
 import type { SearchResult, Source } from "./types";
 
-function mapResult(obj: any): SearchResult {
-  const source = obj?.object_bron?.raw ?? "Website";
-  const id = obj?.id?.raw;
-  const title = obj?.headings?.raw?.[0] ?? obj?.title?.raw;
-  const content = obj?.body_content?.raw;
-  const url = parseValidUrl(obj?.url?.raw);
-  const jsonObject = JSON.parse(obj?.object?.raw ?? null);
-  const self = obj?.self?.raw;
+const searchURL = `${window.gatewayBaseUri}/api/dit_search`;
+
+function mapResult(object: any): SearchResult {
+  const source = getSourceName(object?._self?.schema?.name);
+  const jsonObject = object;
+  const id = object?._id;
+  const title = object?._self?.name;
+  const content = object?.body_content?.raw;
+  const url = parseValidUrl(object?.url?.raw);
+  const self = object?.self?.raw;
   return {
     source,
     id,
@@ -28,13 +24,6 @@ function mapResult(obj: any): SearchResult {
   };
 }
 
-const globalSearchBaseUri =
-  window.gatewayBaseUri + "/api/elastic/api/as/v1/engines/kiss-engine";
-
-const searchUrl = globalSearchBaseUri + "/search";
-
-const suggestionUrl = globalSearchBaseUri + "/query_suggestion";
-
 export function useGlobalSearch(
   parameters: Ref<{
     search?: string;
@@ -42,46 +31,27 @@ export function useGlobalSearch(
     filters: Source[];
   }>
 ) {
-  function groupBy<K, V>(array: V[], grouper: (item: V) => K) {
-    return array.reduce((store, item) => {
-      const key = grouper(item);
-      if (!store.has(key)) {
-        store.set(key, [item]);
-      } else {
-        store.get(key)?.push(item);
-      }
-      return store;
-    }, new Map<K, V[]>());
-  }
-
   async function fetcher(): Promise<Paginated<SearchResult>> {
-    const payLoad = {
-      query: parameters.value.search,
-      page: {
-        current: parameters.value.page || 1,
-      },
-      filters: { any: [] as Record<string, string[]>[] },
-    };
-    if (
-      parameters?.value?.filters !== undefined &&
-      parameters?.value?.filters?.length > 0
-    ) {
-      const groupedFilters = groupBy(parameters.value.filters, (x) => x.type);
-      groupedFilters.forEach((value, key) => {
-        const sourceNames = value.map((source) => source.name);
-        const filter = {
-          [key]: sourceNames,
-        };
-        payLoad.filters.any.push(filter);
+    const _searchURL = new URL(searchURL);
+
+    if (parameters.value.search) {
+      _searchURL.searchParams.append(
+        "_search[skills,function,department,user,description,embedded.contact.klantnummer,embedded.contact.voornaam,embedded.contact.achternaam,upnLabel,embedded.vertalingen.productTitelDecentraal,embedded.vertalingen.specifiekeTekst,embedded.vertalingen.synonyms.synonym,embedded.bevoegdeOrganisatie.naam,embedded.verantwoordelijkeOrganisatie.naam]",
+        parameters.value.search
+      );
+    }
+
+    if (parameters.value.filters) {
+      parameters.value.filters.forEach((filter) => {
+        _searchURL.searchParams.append(
+          "_self.schema.ref[]",
+          getSchemaName(filter.name)
+        );
       });
     }
 
-    const r = await fetchLoggedIn(searchUrl, {
-      method: "POST",
-      headers: {
-        "content-type": "application/json",
-      },
-      body: JSON.stringify(payLoad),
+    const r = await fetchLoggedIn(_searchURL, {
+      method: "GET",
     });
     if (!r.ok) throw new Error();
     const json = await r.json();
@@ -108,87 +78,29 @@ export function useGlobalSearch(
     )}`;
   }
 
-  return ServiceResult.fromFetcher(searchUrl, fetcher, {
+  return ServiceResult.fromFetcher(searchURL, fetcher, {
     getUniqueId,
   });
 }
 
-export function useSources() {
-  async function fetcher(): Promise<Source[]> {
-    const r = await fetchLoggedIn(searchUrl, {
-      method: "POST",
-      headers: {
-        "content-type": "application/json",
-      },
-      body: JSON.stringify({
-        query: "",
-        facets: {
-          object_bron: {
-            type: "value",
-          },
-          domains: {
-            type: "value",
-          },
-        },
-      }),
-    });
-    if (!r.ok) throw new Error();
-    const json = await r.json();
-    const { facets } = json ?? {};
-
-    if (typeof facets !== "object" || !facets) {
-      throw new Error();
-    }
-
-    const entries = Object.entries(facets) as [
-      string,
-      { data: { value: string }[] }[]
-    ][];
-
-    return entries.flatMap(([k, v]) =>
-      v.flatMap((x) =>
-        x.data.map((x) => ({
-          name: x.value,
-          type: k,
-        }))
-      )
-    );
+const getSourceName = (schemaName: string) => {
+  switch (schemaName) {
+    case "SDGProduct":
+      return "Kennisartikel";
+    case "MedewerkerKiss":
+      return "Smoelenboek";
+    default:
+      return "Onbekend";
   }
+};
 
-  return ServiceResult.fromFetcher(globalSearchBaseUri, fetcher, {
-    getUniqueId: () => "sources",
-  });
-}
-
-export function useSuggestions(input: Ref<string>) {
-  function mapSuggestions(json: any): string[] {
-    if (!Array.isArray(json?.results?.documents)) return [];
-    return json.results.documents.map(({ suggestion }: any) => suggestion);
+const getSchemaName = (sourceName: string) => {
+  switch (sourceName) {
+    case "Kennisartikel":
+      return "https://kissdevelopment.commonground.nu/kiss.sdgProduct.schema.json";
+    case "Smoelenboek":
+      return "https://kissdevelopment.commonground.nu/kiss.medewerker.schema.json";
+    default:
+      return "Onbekend";
   }
-  function fetchSuggestions() {
-    return fetchLoggedIn(suggestionUrl, {
-      method: "POST",
-      headers: {
-        "content-type": "application/json",
-      },
-      body: JSON.stringify({
-        query: input.value,
-        size: 10,
-        types: {
-          documents: {
-            fields: ["title", "body_content"],
-          },
-        },
-      }),
-    })
-      .then(throwIfNotOk)
-      .then(parseJson)
-      .then(mapSuggestions);
-  }
-  function getUniqueId() {
-    return input.value && "suggestions_" + input.value;
-  }
-  return ServiceResult.fromFetcher(suggestionUrl, fetchSuggestions, {
-    getUniqueId,
-  });
-}
+};
diff --git a/src/features/shared/get-contactmomenten-service.ts b/src/features/shared/get-contactmomenten-service.ts
index 46f46875..23ae84f3 100644
--- a/src/features/shared/get-contactmomenten-service.ts
+++ b/src/features/shared/get-contactmomenten-service.ts
@@ -51,6 +51,7 @@ const mapContactmoment = async (
 
   contactmoment.startdatum = new Date(contactmoment.startdatum);
   contactmoment.registratiedatum = new Date(contactmoment.registratiedatum);
+  contactmoment.afdeling = r.embedded.contactmoment?.embedded?.afdeling?.name;
 
   const objectcontactmomenten: any[] =
     r.embedded?.contactmoment?.embedded?.objectcontactmomenten ?? [];
@@ -109,7 +110,7 @@ export function useContactmomentenByKlantId(
   page: Ref<number>
 ) {
   function getUrl() {
-    const url = new URL(window.gatewayBaseUri + "/api/klantcontactmomenten");
+    const url = new URL(window.gatewayBaseUri + "/api/kic/v1/klantcontactmomenten");
     url.searchParams.set(
       "_order[embedded.contactmoment.registratiedatum]",
       "desc"
@@ -121,6 +122,35 @@ export function useContactmomentenByKlantId(
     url.searchParams.set("_page", page.value.toString());
     url.searchParams.set("embedded.klant._self.id", id.value);
     url.searchParams.set("embedded.contactmoment.todo", "IS NULL");
+    url.searchParams.set("klant", "IS NOT NULL");
+    url.searchParams.set("contactmoment", "IS NOT NULL");
+    return url.toString();
+  }
+  return ServiceResult.fromFetcher(getUrl, fetchContactmomenten, {
+    getUniqueId() {
+      return getUrl() + "contactmoment";
+    },
+  });
+}
+
+export function useContactmomentenByUserId(id: Ref<string>, page: Ref<number>) {
+  function getUrl() {
+    const url = new URL(window.gatewayBaseUri + "/api/kic/v1/klantcontactmomenten");
+
+    url.searchParams.set(
+      "_order[embedded.contactmoment.registratiedatum]",
+      "desc"
+    );
+    url.searchParams.append("extend[]", "medewerker");
+    url.searchParams.append("extend[]", "embedded._self.owner");
+    url.searchParams.append("extend[]", "embedded.contactmoment.todo");
+    url.searchParams.set("_limit", "10");
+    url.searchParams.set("_page", page.value.toString());
+    url.searchParams.set("_self.owner.id", id.value);
+    url.searchParams.set("embedded.contactmoment.todo", "IS NULL");
+    url.searchParams.set("klant", "IS NOT NULL");
+    url.searchParams.set("contactmoment", "IS NOT NULL");
+
     return url.toString();
   }
   return ServiceResult.fromFetcher(getUrl, fetchContactmomenten, {
diff --git a/src/features/shared/types.ts b/src/features/shared/types.ts
index c448b880..d89992c2 100644
--- a/src/features/shared/types.ts
+++ b/src/features/shared/types.ts
@@ -10,11 +10,12 @@ export interface ContactmomentViewModel {
   zaken: ContactmomentZaak[];
   contactverzoeken: ContactmomentContactverzoek[];
   _self: {
-    owner: string;
+    owner: { name: string };
   };
   primaireVraag?: string;
   primaireVraagWeergave?: string;
   afwijkendOnderwerp?: string;
+  afdeling?: string;
 }
 
 export interface ContactmomentZaak {
diff --git a/src/features/werkbericht/WerkBerichten.vue b/src/features/werkbericht/WerkBerichten.vue
index 0cf73936..07f99e2b 100644
--- a/src/features/werkbericht/WerkBerichten.vue
+++ b/src/features/werkbericht/WerkBerichten.vue
@@ -3,8 +3,8 @@
     <utrecht-heading :level="level">{{ header }}</utrecht-heading>
 
     <paragraph v-if="berichten.state === 'error'">{{
-      getErrorMessage(berichten.error)
-    }}</paragraph>
+      berichten.error.message === 'Empty Results' || berichten.error.message === '404' ? getEmptyErrorMessage(berichten.error) : getErrorMessage(berichten.error)}}
+    </paragraph>
 
     <template v-else-if="berichten.state === 'success'">
       <paragraph v-if="search"
@@ -69,6 +69,10 @@ const props = defineProps({
     type: Function as PropType<(e: Error) => string>,
     default: () => "Er ging iets mis. Probeer het later nog eens.",
   },
+  getEmptyErrorMessage: {
+    type: Function as PropType<(e: Error) => string>,
+    default: () => "Geen resultaten gevonden.",
+  },
   pageParamName: {
     type: String,
     default: "page",
diff --git a/src/features/werkbericht/service.ts b/src/features/werkbericht/service.ts
index ab6d7f00..09c31af5 100644
--- a/src/features/werkbericht/service.ts
+++ b/src/features/werkbericht/service.ts
@@ -9,9 +9,12 @@ import {
 } from "@/services";
 import type { Ref } from "vue";
 import { fetchLoggedIn } from "@/services";
+import _ from "lodash";
 
 const WP_MAX_ALLOWED_PAGE_SIZE = "100";
-const BERICHTEN_BASE_URI = `${window.gatewayBaseUri}/api/kiss_openpub_pub`;
+const BERICHTEN_COLLECTION_BASE_URI = `${window.gatewayBaseUri}/api/kiss_openpub_proxy/active`;
+const BERICHTEN_DETAIL_BASE_URI = `${window.gatewayBaseUri}/api/kiss_openpub_pub`;
+const LIMIT_PER_PAGE = 10;
 
 export type UseWerkberichtenParams = {
   typeId?: number;
@@ -41,8 +44,6 @@ function maxDate(dates: Date[]) {
  */
 function parseWerkbericht(
   jsonObject: any,
-  getBerichtTypeNameById: (id: number) => string | undefined,
-  getSkillNameById: (id: number) => string | undefined
 ): Werkbericht {
   if (
     typeof jsonObject?.embedded?.title?.rendered !== "string" ||
@@ -56,17 +57,17 @@ function parseWerkbericht(
   }
 
   const berichtTypeId = jsonObject?.embedded?.acf?.publicationType;
-  const berichtTypeName = getBerichtTypeNameById(berichtTypeId) ?? "onbekend";
+  const berichtTypeName = berichtTypeId.name ?? "onbekend";
 
   const skillIds = jsonObject?.embedded?.acf?.publicationSkill;
   const skillNames = Array.isArray(skillIds)
     ? skillIds.map(
-        (x) => (typeof x === "number" && getSkillNameById(x)) || "onbekend"
-      )
+      (skill) => skill.name || "onbekend"
+    )
     : ["onbekend"];
 
   const dateCreated = parseDateStrWithTimezone(jsonObject.date);
-  const dateModified = parseDateStrWithTimezone(jsonObject.modified);
+  const dateModified = parseDateStrWithTimezone(jsonObject["date_modified"]);
 
   const dateLatest = maxDate([dateCreated, dateModified]);
 
@@ -98,10 +99,12 @@ function parseWerkbericht(
  * Fetches a lookuplist from the api
  * @param url
  */
-function fetchLookupList(urlStr: string): Promise<LookupList<number, string>> {
+function fetchLookupList(
+  urlStr: string,
+  filterSlugs?: string[]
+): Promise<LookupList<number, string>> {
   const url = new URL(urlStr);
 
-  // having pagination here is a nuisance.
   if (!url.searchParams.has("page")) {
     url.searchParams.set("per_page", WP_MAX_ALLOWED_PAGE_SIZE);
   }
@@ -109,13 +112,25 @@ function fetchLookupList(urlStr: string): Promise<LookupList<number, string>> {
   return fetchLoggedIn(url)
     .then((r) => r.json())
     .then((json) => {
-      if (!Array.isArray(json))
+      if (!Array.isArray(json)) {
         throw new Error(
-          "Invalide json, verwacht een lijst: " + JSON.stringify(json)
+          "Invalid json, expected an array: " + JSON.stringify(json)
         );
-      return json
-        .filter((x) => typeof x?.id === "number" && typeof x?.slug === "string")
-        .map((x) => [x.id, x.slug] as [number, string]);
+      }
+
+      const filteredJson = json.filter(
+        (x) => typeof x?.id === "number" && typeof x?.slug === "string"
+      );
+
+      let filteredResult = filteredJson;
+
+      if (filterSlugs && filterSlugs.length > 0) {
+        filteredResult = filteredJson.filter((x) =>
+          filterSlugs.includes(x.slug)
+        );
+      }
+
+      return filteredResult.map((x) => [x.id, x.slug] as [number, string]);
     })
     .then(createLookupList);
 }
@@ -125,7 +140,9 @@ function fetchLookupList(urlStr: string): Promise<LookupList<number, string>> {
  */
 export function useBerichtTypes(): ServiceData<LookupList<number, string>> {
   const url = window.gatewayBaseUri + "/api/openpub/openpub_type";
-  return ServiceResult.fromFetcher(url, fetchLookupList);
+  return ServiceResult.fromFetcher(url, () =>
+    fetchLookupList(url, ["werkinstructie", "nieuws"])
+  );
 }
 
 /**
@@ -154,22 +171,26 @@ export function useWerkberichten(
     if (typesResult.state !== "success" || skillsResult.state !== "success")
       return "";
 
-    if (!parameters?.value) return BERICHTEN_BASE_URI;
+    if (!parameters?.value) return BERICHTEN_COLLECTION_BASE_URI;
 
     const { typeId, search, page, skillIds } = parameters.value;
 
     const params: [string, string][] = [["extend[]", "_self.dateRead"]];
 
-    params.push(["_limit", "10"]);
+    params.push(["_limit", LIMIT_PER_PAGE.toString()]);
     params.push(["_order[modified]", "desc"]);
     params.push(["extend[]", "_self.self"]);
     params.push(["extend[]", "acf"]);
-    params.push(["embedded.acf.publicationEndDate[after]", "now"]);
 
     if (typeId) {
+      const typeData = typesResult.data.entries.find((entry) => entry[0] === typeId)
+      if (!typeData) return ""
+
+      const typeName = typeData[1] === "nieuws" ? "nieuwsbericht" : typeData[1]
+
       params.push([
-        "embedded.acf.publicationType[int_compare]",
-        typeId.toString(),
+        "openpub-type",
+        _.upperFirst(typeName),
       ]);
     }
 
@@ -186,13 +207,17 @@ export function useWerkberichten(
 
     if (skillIds?.length) {
       skillIds.forEach((skillId) => {
+
+        const skillName = skillsResult.data.entries.find((entry) => entry[0] === skillId)
+        if (!skillName) return ""
+
         params.push([
-          "embedded.acf.publicationSkill[int_compare][]",
-          skillId.toString(),
+          "openpub-audience[]",
+          _.upperFirst(skillName[1].toString()),
         ]);
       });
     }
-    return `${BERICHTEN_BASE_URI}?${new URLSearchParams(params)}`;
+    return `${BERICHTEN_COLLECTION_BASE_URI}?${new URLSearchParams(params)}`;
   }
 
   async function fetchBerichten(url: string): Promise<Paginated<Werkbericht>> {
@@ -224,12 +249,17 @@ export function useWerkberichten(
     const sortedBerichten = [...featuredBerichten, ...regularBerichten];
 
     return parsePagination(
-      { ...json, results: sortedBerichten },
+      {
+        ...json,
+        limit: LIMIT_PER_PAGE,
+        total: json.total,
+        pages: json.pages,
+        page: parameters?.value.page,
+        results: sortedBerichten,
+      },
       (bericht: any) =>
         parseWerkbericht(
           bericht,
-          typesResult.data.fromKeyToValue,
-          skillsResult.data.fromKeyToValue
         )
     );
   }
@@ -253,13 +283,12 @@ export function useFeaturedWerkberichtenCount() {
 
   function getUrl() {
     const params: [string, string][] = [
-      ["embedded.acf.publicationFeatured[bool_compare]", "true"],
+      ["highlighted", "true"],
       ["fields[]", "_self.dateRead"],
       ["extend[]", "_self.dateRead"],
-      ["embedded.acf.publicationEndDate[after]", "now"],
     ];
 
-    return `${BERICHTEN_BASE_URI}?${new URLSearchParams(params)}`;
+    return `${BERICHTEN_COLLECTION_BASE_URI}?${new URLSearchParams(params)}`;
   }
 
   return ServiceResult.fromFetcher(getUrl(), fetchFeaturedWerkberichten, {
@@ -268,7 +297,9 @@ export function useFeaturedWerkberichtenCount() {
 }
 
 export async function readBericht(id: string): Promise<boolean> {
-  const res = await fetchLoggedIn(`${BERICHTEN_BASE_URI}/${id}?fields[]`);
+  const res = await fetchLoggedIn(
+    `${BERICHTEN_DETAIL_BASE_URI}/${id}?fields[]&extend[]=_self.dateRead`
+  );
 
   if (!res.ok)
     throw new Error(`Expected to read bericht: ${res.status.toString()}`);
@@ -277,14 +308,17 @@ export async function readBericht(id: string): Promise<boolean> {
 }
 
 export async function unreadBericht(id: string): Promise<boolean> {
-  const res = await fetchLoggedIn(`${BERICHTEN_BASE_URI}/${id}`, {
-    method: "PATCH",
-    headers: {
-      Accept: "application/json",
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({ "@dateRead": false }),
-  });
+  const res = await fetchLoggedIn(
+    `${BERICHTEN_DETAIL_BASE_URI}/${id}?extend[]=_self.dateRead`,
+    {
+      method: "PATCH",
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ "@dateRead": false }),
+    }
+  );
 
   if (!res.ok)
     throw new Error(`Expected to unread bericht: ${res.status.toString()}`);
diff --git a/src/features/zaaksysteem/ZaakZoeker.vue b/src/features/zaaksysteem/ZaakZoeker.vue
index fc5502d4..c3811da7 100644
--- a/src/features/zaaksysteem/ZaakZoeker.vue
+++ b/src/features/zaaksysteem/ZaakZoeker.vue
@@ -16,10 +16,15 @@
 
     <template v-if="store.currentSearch">
       <application-message
-        v-if="zaken.error"
+        v-if="zaken.error && zaken.error.message === `Empty Results` || zaken.error.message === `404`"
+        messageType="info"
+        message="Geen resultaten gevonden"
+      />
+      <application-message
+        v-if="zaken.error && zaken.error.message !== `Empty Results` && zaken.error.message !== `404`"
         messageType="error"
         message="Er is een probleem opgetreden."
-      ></application-message>
+      />
       <simple-spinner v-else-if="zaken.loading"></simple-spinner>
       <section class="resultaten-container" v-if="zaken.success">
         <zaken-overzicht
diff --git a/src/features/zaaksysteem/service.ts b/src/features/zaaksysteem/service.ts
index 07e423a7..918653c6 100644
--- a/src/features/zaaksysteem/service.ts
+++ b/src/features/zaaksysteem/service.ts
@@ -9,7 +9,7 @@ import {
 import type { ZaakDetails } from "./types";
 import type { Ref } from "vue";
 import { mutate } from "swrv";
-import { formatIsoDate } from "@/helpers/date";
+import moment from "moment";
 
 type Roltype = "behandelaar" | "initiator";
 const ONBEKEND = "Onbekend";
@@ -34,6 +34,18 @@ const getNamePerRoltype = (zaak: any, roletype: Roltype) => {
   return name || ONBEKEND;
 };
 
+
+const IsoAndIntConverter = (date: any) => {
+  if (Number.isNaN(parseInt(date, 10))) {
+    return moment.duration(date).asDays()
+  }
+  if (!Number.isNaN(parseInt(date, 10))) {
+    return parseInt(date, 10)
+  }
+  return 0
+}
+
+
 const mapZaakDetails = (zaak: any) => {
   const startdatum = zaak.startdatum ? new Date(zaak.startdatum) : undefined;
 
@@ -41,7 +53,7 @@ const mapZaakDetails = (zaak: any) => {
     startdatum &&
     DateTime.fromJSDate(startdatum)
       .plus({
-        days: parseInt(zaak.embedded.zaaktype.doorlooptijd, 10),
+        days: IsoAndIntConverter(zaak.embedded?.zaaktype?.doorlooptijd),
       })
       .toJSDate();
 
@@ -49,16 +61,16 @@ const mapZaakDetails = (zaak: any) => {
     startdatum &&
     DateTime.fromJSDate(startdatum)
       .plus({
-        days: parseInt(zaak.embedded.zaaktype.servicenorm, 10),
+        days: IsoAndIntConverter(zaak.embedded?.zaaktype?.zervicenorm),
       })
       .toJSDate();
 
   return {
     ...zaak,
-    zaaktype: zaak.embedded.zaaktype.id,
-    zaaktypeLabel: zaak.embedded.zaaktype.onderwerp,
-    zaaktypeOmschrijving: zaak.embedded.zaaktype.omschrijving,
-    status: zaak.embedded.status.statustoelichting,
+    zaaktype: zaak.embedded?.zaaktype?.id ?? "onbekend",
+    zaaktypeLabel: zaak.embedded?.zaaktype?.onderwerp,
+    zaaktypeOmschrijving: zaak.embedded?.zaaktype?.omschrijving ?? "Onbekend",
+    status: zaak.embedded?.status?.statustoelichting ?? "Onbekend",
     behandelaar: getNamePerRoltype(zaak, "behandelaar"),
     aanvrager: getNamePerRoltype(zaak, "initiator"),
     startdatum,
@@ -66,7 +78,7 @@ const mapZaakDetails = (zaak: any) => {
     streefDatum: streefDatum,
     indienDatum: zaak.publicatiedatum && new Date(zaak.publicatiedatum),
     registratieDatum: zaak.registratiedatum && new Date(zaak.registratiedatum),
-    self: zaak["_self"].self,
+    self: zaak["_self"]?.self,
     documenten: mapDocumenten(zaak?.embedded?.zaakinformatieobjecten),
     omschrijving: zaak.omschrijving,
   } as ZaakDetails;
@@ -96,8 +108,13 @@ export const useZakenByBsn = (bsn: Ref<string>) => {
     if (!bsn.value) return "";
     const url = new URL(zaaksysteemBaseUri);
     addExtends(url);
+    // url.searchParams.set(
+    //   "embedded.rollen.embedded.betrokkeneIdentificatie.inpBsn",
+    //   bsn.value
+    // );
+    // Quick zaken fix
     url.searchParams.set(
-      "embedded.rollen.embedded.betrokkeneIdentificatie.inpBsn",
+      "embedded.rollen.betrokkeneIdentificatie.inpBsn",
       bsn.value
     );
     return url.toString();
@@ -111,7 +128,9 @@ export const useZakenByZaaknummer = (zaaknummer: Ref<string>) => {
     if (!zaaknummer.value) return "";
     const url = new URL(zaaksysteemBaseUri);
     addExtends(url);
-    url.searchParams.set("identificatie", zaaknummer.value);
+
+    url.searchParams.set("identificatie[like]", zaaknummer.value);
+
     return url.toString();
   };
 
@@ -182,8 +201,12 @@ export const useZakenByVestigingsnummer = (vestigingsnummer: Ref<string>) => {
     if (!vestigingsnummer.value) return "";
     const url = new URL(zaaksysteemBaseUri);
     addExtends(url);
+    // url.searchParams.set(
+    //   "embedded.rollen.embedded.betrokkeneIdentificatie.vestigingsNummer",
+    //   vestigingsnummer.value
+    // );
     url.searchParams.set(
-      "embedded.rollen.embedded.betrokkeneIdentificatie.vestigingsNummer",
+      "embedded.rollen.betrokkeneIdentificatie.vestigingsNummer",
       vestigingsnummer.value
     );
     return url.toString();
diff --git a/src/helpers/validation.ts b/src/helpers/validation.ts
index 254630e9..0db78434 100644
--- a/src/helpers/validation.ts
+++ b/src/helpers/validation.ts
@@ -42,22 +42,31 @@ export function parsePostcodeHuisnummer(
   };
 }
 
-export function parseDutchDate(input: string): Date | Error {
-  const dateRegex =
-    /^(([0-9]{2})([0-9]{2})([0-9]{4}))|(([0-9]{1,2})[/|-]([0-9]{1,2})[/|-]([0-9]{4}))$/;
-  const matches = input?.trim().match(dateRegex);
+export interface GeboortedatumAchternaam {
+  geboortedatum: Date;
+  achternaam: string;
+}
+
+export function parseGeboortedatumAchternaam(
+  input: string
+): GeboortedatumAchternaam | Error {
+  const geboortedatumAchternaamRegex = /^\d{2}-\d{2}-\d{4}\s[\p{L}a-zA-Z\S]/;
 
-  if (matches?.length !== 9) {
+  if (!geboortedatumAchternaamRegex.test(input)) {
     return new Error(
-      "Voer een valide datum in, bijvoorbeeld 17-09-2022 of 17092022."
+      "Voer een valide geboortedatum en achternaam in, bijvoorbeeld 17-09-1995 Leeuwen. Voer GEEN tussenvoegsel(s) in."
     );
   }
 
-  const year = +(matches[4] || matches[8]);
-  const month = +(matches[3] || matches[7]) - 1;
-  const day = +(matches[2] || matches[6]);
+  const day: number = parseInt(input.substring(0, 2));
+  const month: number = parseInt(input.substring(3, 5));
+  const year: number = parseInt(input.substring(6, 12));
+  const lastName: string = input.slice(11);
 
-  return new Date(year, month, day);
+  return {
+    geboortedatum: new Date(year, month - 1, day),
+    achternaam: lastName,
+  };
 }
 
 const multipliers = [9, 8, 7, 6, 5, 4, 3, 2, -1] as const;
diff --git a/src/layout/TheHeader.vue b/src/layout/TheHeader.vue
index 098c0929..94004f0b 100644
--- a/src/layout/TheHeader.vue
+++ b/src/layout/TheHeader.vue
@@ -18,7 +18,8 @@
               <router-link :to="{ name: 'home' }">
                 <span>Nieuws en werkinstructies</span>
 
-                <span
+                <!-- Temporarily disabled due to Featured logic not working in Buren KISS -->
+                <!-- <span
                   v-if="
                     featuredWerkberichtenCount.success &&
                     featuredWerkberichtenCount.data > 0
@@ -29,7 +30,7 @@
                       ? featuredWerkberichtenCount.data
                       : "9+"
                   }}</span
-                >
+                > -->
               </router-link>
             </li>
 
@@ -50,11 +51,18 @@
                 ><span>Zaken</span></router-link
               >
             </li>
+
             <li>
               <router-link :to="{ name: 'links' }"
                 ><span>Links</span></router-link
               >
             </li>
+
+            <li>
+              <router-link :to="{ name: 'contactmomenten-historie' }"
+                ><span>Contactmomenten historie</span></router-link
+              >
+            </li>
           </ul>
         </nav>
       </header>
diff --git a/src/router/index.ts b/src/router/index.ts
index 0f7ce491..1163727b 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -14,6 +14,8 @@ import { redirectRoute } from "@/features/login";
 import BedrijvenView from "@/views/BedrijvenView.vue";
 import BedrijfDetailView from "@/views/BedrijfDetailView.vue";
 import LinksView from "@/views/LinksView.vue";
+import ContactmomentenHistorieView from "@/views/ContactmomentenHistorieView.vue";
+import LoginView from "@/views/LoginView.vue";
 
 const guardContactMoment: NavigationGuard = (to, from, next) => {
   const contactmoment = useContactmomentStore();
@@ -96,6 +98,18 @@ const router = createRouter({
       component: LinksView,
       meta: { showNav: true, showNotitie: true, showSearch: true },
     },
+    {
+      path: "/login",
+      name: "login",
+      component: LoginView,
+      meta: { showNav: false, showNotice: false, showSearch: false },
+    },
+    {
+      path: "/contactmomenten-historie",
+      name: "contactmomenten-historie",
+      component: ContactmomentenHistorieView,
+      meta: { showNav: true, showNotitie: true, showSearch: true },
+    },
     redirectRoute,
   ],
 });
diff --git a/src/services/fetch-logged-in.ts b/src/services/fetch-logged-in.ts
index 0111aa3f..81e702d6 100644
--- a/src/services/fetch-logged-in.ts
+++ b/src/services/fetch-logged-in.ts
@@ -1,3 +1,7 @@
+import Cookies from "js-cookie";
+import jwtDecode from "jwt-decode";
+import type { JwtPayload } from "jwt-decode";
+
 type FetchArgs = Parameters<typeof fetch>;
 type FetchReturn = ReturnType<typeof fetch>;
 
@@ -26,6 +30,11 @@ export function handleLogin() {
 }
 
 export function fetchLoggedIn(...args: FetchArgs): FetchReturn {
+  if (!validateSession()) {
+    Cookies.remove("jwt");
+    Cookies.remove("userId");
+  }
+
   const init = args[1] || {};
 
   if (!init.credentials) {
@@ -33,14 +42,35 @@ export function fetchLoggedIn(...args: FetchArgs): FetchReturn {
     args[1] = init;
   }
 
+  const options = args[1];
+
+  args[1] = {
+    ...options,
+    headers: {
+      ...options?.headers,
+      Authorization: `Bearer ${Cookies.get("jwt")}`,
+    },
+  };
+
   return fetch(...args).then((r) => {
     if (r.status === 401) {
       console.warn("session expired. waiting for user to log in...");
       return waitForLogin.promise.then(() => {
-        console.log("user is logged in again, resuming...");
         return fetchLoggedIn(...args);
       });
     }
     return r;
   });
 }
+
+const validateSession = () => {
+  const token = Cookies.get("jwt");
+
+  if (!token) return false;
+
+  const decoded = jwtDecode<JwtPayload>(token);
+
+  const expired = decoded?.exp && Date.now() >= decoded.exp * 1000;
+
+  return !expired;
+};
diff --git a/src/services/gateway.ts b/src/services/gateway.ts
index 9b1672ba..e945a17a 100644
--- a/src/services/gateway.ts
+++ b/src/services/gateway.ts
@@ -1,4 +1,5 @@
 import type { Paginated } from "./pagination";
+import _ from "lodash"
 
 export async function parsePagination<T>(
   json: unknown,
@@ -7,6 +8,14 @@ export async function parsePagination<T>(
   const { results, limit, total, page, pages } = json as {
     [key: string]: unknown;
   };
+  
+  if (
+    results === "" || _.isEmpty(results)
+  )
+    throw new Error(
+      "Empty Results"
+    );
+
   if (
     !Array.isArray(results) ||
     typeof limit !== "number" ||
@@ -30,6 +39,72 @@ export async function parsePagination<T>(
   };
 }
 
+export async function parsePaginationKlantenPersonen<T>(
+  json: unknown,
+  map: (jObj: unknown) => T
+): Promise<Paginated<Awaited<T>>> {
+  const { results, limit, total, page, pages } = json as {
+    [key: string]: unknown;
+  };
+
+  if (
+    !Array.isArray(results) ||
+    typeof limit !== "number" ||
+    typeof total !== "number" ||
+    typeof page !== "number" ||
+    typeof pages !== "number"
+  )
+    throw new Error(
+      "unexpected in gateway json. expected pagination: " + JSON.stringify(json)
+    );
+
+  // just in case the mapper is async, we wrap the result in a Promise
+  const promises = results.map((x) => Promise.resolve(map(x)));
+
+  return {
+    page: await Promise.all(promises),
+    pageNumber: page,
+    pageSize: limit,
+    totalPages: pages,
+    totalRecords: total,
+  };
+}
+
+export async function parseWithoutPagination<T>(
+  json: unknown,
+  map: (jObj: unknown) => T
+): Promise<Paginated<Awaited<T>>> {
+  const { _embedded } = json as {
+    [key: string]: any;
+  };
+
+  if (
+    _embedded === "" || _.isEmpty(_embedded)
+  )
+    throw new Error(
+      "Empty Results"
+    );
+
+  if (
+    !Array.isArray(_embedded?.ingeschrevenpersonen)
+
+  )
+    throw new Error(
+      "unexpected in gateway json. expected pagination: " + JSON.stringify(json)
+    );
+
+  // just in case the mapper is async, we wrap the result in a Promise
+  const promises = _embedded?.ingeschrevenpersonen.map((x: any) => Promise.resolve(map(x)));
+
+  return {
+    page: await Promise.all(promises),
+    pageNumber: 1,
+    pageSize: promises.length,
+    totalPages: 1,
+    totalRecords: promises.length,
+  };
+}
+
 //date format helper: 2005-12-30UTC01:02:03
 export const getFormattedUtcDate = () => {
   const formatDateTimeElement = (x: number) => ("0" + x).slice(-2);
diff --git a/src/services/index.ts b/src/services/index.ts
index 443396f6..a24b5999 100644
--- a/src/services/index.ts
+++ b/src/services/index.ts
@@ -44,7 +44,7 @@ export function createLookupList<K, V>(entries: [K, V][]): LookupList<K, V> {
 }
 
 export function throwIfNotOk(response: Response) {
-  if (!response.ok) throw new Error(response.statusText);
+  if (!response.ok) throw new Error(response.status === 404 ? "404" : response.statusText);
   return response as Response & { ok: true };
 }
 
diff --git a/src/stores/contactmoment/index.ts b/src/stores/contactmoment/index.ts
index 6a2e1608..d798a0ce 100644
--- a/src/stores/contactmoment/index.ts
+++ b/src/stores/contactmoment/index.ts
@@ -47,6 +47,7 @@ export interface Vraag {
   werkinstructies: { werkinstructie: Werkinstructie; shouldStore: boolean }[];
   primaireVraag: { url: string; title: string } | undefined;
   afwijkendOnderwerp: string;
+  afdeling?: string;
 }
 
 function initVraag(): Vraag {
diff --git a/src/views/AfhandelingView.vue b/src/views/AfhandelingView.vue
index 3a301c72..8740a9da 100644
--- a/src/views/AfhandelingView.vue
+++ b/src/views/AfhandelingView.vue
@@ -301,27 +301,6 @@
               <label />
 
               <div class="contactverzoek-container">
-                <div v-if="afdelingen.success && afdelingen.data.length">
-                  <label
-                    class="utrecht-form-label"
-                    :for="'verzoek-afdeling' + idx"
-                    >Afdeling</label
-                  >
-                  <select
-                    v-model="vraag.contactverzoek.afdeling"
-                    class="utrecht-select utrecht-select--html-select"
-                    :id="'verzoek-afdeling' + idx"
-                  >
-                    <option
-                      v-for="afdeling in afdelingen.data"
-                      :key="idx + afdeling.id"
-                      :value="afdeling.name"
-                    >
-                      {{ afdeling.name }}
-                    </option>
-                  </select>
-                </div>
-
                 <div>
                   <label
                     class="utrecht-form-label required"
@@ -403,6 +382,26 @@
               v-model="vraag.afwijkendOnderwerp"
             />
 
+            <label class="utrecht-form-label" :for="'verzoek-afdeling' + idx"
+              >Afdeling</label
+            >
+
+            <div v-if="afdelingen.success && afdelingen.data.length">
+              <select
+                v-model="vraag.contactverzoek.afdeling"
+                class="utrecht-select utrecht-select--html-select"
+                :id="'verzoek-afdeling' + idx"
+              >
+                <option
+                  v-for="afdeling in afdelingen.data"
+                  :key="idx + afdeling.id"
+                  :value="afdeling.id"
+                >
+                  {{ afdeling.name }}
+                </option>
+              </select>
+            </div>
+
             <label class="utrecht-form-label" :for="'notitie' + idx"
               >Notitie</label
             >
@@ -498,10 +497,13 @@ const zakenToevoegenAanContactmoment = async (
 };
 
 const koppelKlanten = async (vraag: Vraag, contactmomentId: string) => {
-  for (const { shouldStore, klant } of vraag.klanten) {
-    if (shouldStore) {
-      await koppelKlant({ contactmomentId, klantId: klant.id });
-    }
+  if (!vraag.klanten.length) {
+    await koppelKlant({ contactmomentId, klantId: "" });
+
+    return;
+  }
+  for (const { klant } of vraag.klanten) {
+    await koppelKlant({ contactmomentId, klantId: klant.id });
   }
 };
 
@@ -538,6 +540,7 @@ const saveVraag = async (vraag: Vraag, gespreksId?: string) => {
     primaireVraag: vraag.primaireVraag?.url,
     primaireVraagWeergave: vraag.primaireVraag?.title,
     afwijkendOnderwerp: vraag.afwijkendOnderwerp || undefined,
+    afdeling: vraag.contactverzoek.afdeling,
   };
 
   addKennisartikelenToContactmoment(contactmoment, vraag);
@@ -554,13 +557,11 @@ const saveVraag = async (vraag: Vraag, gespreksId?: string) => {
       todo: {
         name: "contactverzoek",
         description: vraag.contactverzoek.notitie,
-        attendees: [
-          vraag.contactverzoek.medewerker,
-          vraag.contactverzoek.afdeling,
-        ].filter(Boolean),
+        attendees: [vraag.contactverzoek.medewerker].filter(Boolean),
       },
       primaireVraagWeergave: vraag.primaireVraag?.title,
       afwijkendOnderwerp: vraag.afwijkendOnderwerp || undefined,
+      afdeling: vraag.afdeling,
     });
 
     await koppelKlanten(vraag, contactverzoek.id);
diff --git a/src/views/BedrijfDetailView.vue b/src/views/BedrijfDetailView.vue
index 15d2eca7..bb0f93a0 100644
--- a/src/views/BedrijfDetailView.vue
+++ b/src/views/BedrijfDetailView.vue
@@ -13,26 +13,44 @@
     <simple-spinner v-if="klant.loading" />
     <bedrijf-details v-else-if="klant.success" :klant="klant.data" />
     <application-message
-      v-if="klant.error"
-      message="Er ging iets mis bij het ophalen van de klant. Probeer het later
-      nog eens."
+      v-if="klant.error && klant.error.message === 'Empty Results' || klant.error.message === '404'"
+      message="Geen klant gevonden."
+      messageType="info"
+    />
+
+    <application-message
+      v-if="klant.error && klant.error.message !== `Empty Results` && klant.error.message !== `404`"
+      message="Er ging iets mis bij het ophalen van de klant. Probeer het later nog eens."
       messageType="error"
     />
 
     <simple-spinner v-if="bedrijf.loading" />
     <handelsregister-gegevens
       v-if="bedrijf.success && bedrijf.data"
-      :bedrijf="bedrijf.data"
+      :bedrijven="bedrijf.data"
     />
     <application-message
-      v-if="bedrijf.error"
+      v-if="bedrijf.error && bedrijf.error.message === 'Empty Results' || bedrijf.error.message === '404'"
+      message="Geen bedrijf gevonden."
+      messageType="info"
+    />
+
+    <application-message
+      v-if="bedrijf.error && bedrijf.error.message !== `Empty Results` && bedrijf.error.message !== `404`"
       message="Er ging iets mis bij het ophalen van de Handelsregister gegevens. Probeer het later nog eens."
       messageType="error"
     />
 
+
     <simple-spinner v-if="contactverzoeken.loading" />
     <application-message
-      v-if="contactverzoeken.error"
+      v-if="contactverzoeken.error && contactverzoeken.error.message === 'Empty Results' || contactverzoeken.error.message === '404'"
+      message="Geen contactverzoeken gevonden."
+      messageType="info"
+    />
+
+    <application-message
+      v-if="contactverzoeken.error && contactverzoeken.error.message !== `Empty Results` && contactverzoeken.error.message !== `404`"
       message="Er ging iets mis bij het ophalen van de contactverzoeken. Probeer het later nog eens."
       messageType="error"
     />
@@ -51,10 +69,17 @@
     <simple-spinner v-if="zaken.loading" />
 
     <application-message
-      v-if="zaken.error"
+      v-if="zaken.error && zaken.error.message === 'Empty Results' || zaken.error.message === '404'"
+      message="Geen zaken gevonden."
+      messageType="info"
+    />
+
+    <application-message
+      v-if="zaken.error && zaken.error.message !== `Empty Results` && zaken.error.message !== `404`"
       message="Er ging iets mis bij het ophalen van de zaken. Probeer het later nog eens."
       messageType="error"
     />
+    
 
     <template v-if="zaken.success && zaken.data.page.length">
       <utrecht-heading :level="2"> Zaken </utrecht-heading>
@@ -70,10 +95,16 @@
     <simple-spinner v-if="contactmomenten.loading" />
 
     <application-message
-      v-if="contactmomenten.error"
+      v-if="contactmomenten.error && contactmomenten.error.message === 'Empty Results' || contactmomenten.error.message === '404'"
+      message="Geen contactmomenten gevonden."
+      messageType="info"
+    />
+
+    <application-message
+      v-if="contactmomenten.error && contactmomenten.error.message !== `Empty Results` && contactmomenten.error.message !== `404`"
       message="Er ging iets mis bij het ophalen van de contactmomenten. Probeer het later nog eens."
       messageType="error"
-    />
+    />   
 
     <template
       v-if="contactmomenten.success && contactmomenten.data.page.length"
diff --git a/src/views/ContactmomentenHistorieView.vue b/src/views/ContactmomentenHistorieView.vue
new file mode 100644
index 00000000..a0d53bdb
--- /dev/null
+++ b/src/views/ContactmomentenHistorieView.vue
@@ -0,0 +1,122 @@
+<template>
+  <section class="container">
+    <utrecht-heading :level="1">Contactmomenten historie</utrecht-heading>
+
+    <section>
+      <simple-spinner v-if="contactmomenten.loading" />
+
+      <application-message
+        v-if="contactmomenten.error && contactmomenten.error.message === 'Empty Results' || contactmomenten.error.message === '404'"
+        message="Geen contactmomenten gevonden."
+        messageType="info"
+      />
+
+      <application-message
+        v-if="contactmomenten.error && contactmomenten.error.message !== `Empty Results` && contactmomenten.error.message !== `404`"
+        message="Er ging iets mis bij het ophalen van de contactmomenten. Probeer het later nog eens."
+        messageType="error"
+      /> 
+
+      <utrecht-heading
+        v-if="contactmomenten.success && !contactmomenten.data.page.length"
+        :level="3"
+        >Geen contactmomenten gevonden</utrecht-heading
+      >
+
+      <template
+        v-if="contactmomenten.success && contactmomenten.data.page.length"
+      >
+        <utrecht-heading :level="2"> Contactmomenten </utrecht-heading>
+
+        <contactmomenten-overzicht
+          :contactmomenten="contactmomenten.data.page"
+        />
+
+        <pagination
+          class="pagination"
+          :pagination="contactmomenten.data"
+          @navigate="onContactmomentenNavigate"
+        />
+      </template>
+    </section>
+
+    <section>
+      <simple-spinner v-if="contactverzoeken.loading" />
+
+      <application-message
+        v-if="contactverzoeken.error && contactverzoeken.error.message === 'Empty Results' || contactverzoeken.error.message === '404'"
+        message="Geen contactverzoeken gevonden."
+        messageType="info"
+      />
+
+      <application-message
+        v-if="contactverzoeken.error && contactverzoeken.error.message !== `Empty Results` && contactverzoeken.error.message !== `404`"
+        message="Er ging iets mis bij het ophalen van de contactverzoeken. Probeer het later nog eens."
+        messageType="error"
+      /> 
+
+      <utrecht-heading
+        v-if="contactverzoeken.success && !contactverzoeken.data.page.length"
+        :level="3"
+        >Geen contactverzoeken gevonden</utrecht-heading
+      >
+
+      <template
+        v-if="contactverzoeken.success && contactverzoeken.data.page.length"
+      >
+        <utrecht-heading :level="2">Contactverzoeken </utrecht-heading>
+
+        <contactverzoeken-overzicht
+          :contactverzoeken="contactverzoeken.data.page"
+        />
+
+        <pagination
+          class="pagination"
+          :pagination="contactverzoeken.data"
+          @navigate="onContactverzoekenNavigate"
+        />
+      </template>
+    </section>
+  </section>
+</template>
+
+<script lang="ts" setup>
+import SimpleSpinner from "@/components/SimpleSpinner.vue";
+import ApplicationMessage from "@/components/ApplicationMessage.vue";
+import Pagination from "@/nl-design-system/components/Pagination.vue";
+import {
+  ContactmomentenOverzicht,
+  getAnonymousUserId,
+} from "@/features/contactmoment";
+import { Heading as UtrechtHeading } from "@utrecht/component-library-vue";
+import Cookies from "js-cookie";
+import { ref } from "vue";
+import { useContactmomentenByUserId } from "@/features/shared/get-contactmomenten-service";
+import ContactverzoekenOverzicht from "@/features/contactmoment/ContactverzoekenOverzicht.vue";
+import { useContactverzoekenByUserId } from "@/features/contactmoment";
+
+getAnonymousUserId();
+
+const userId = ref(Cookies.get("userId") as string);
+
+const contactmomentenPage = ref(1);
+const contactmomenten = useContactmomentenByUserId(userId, contactmomentenPage);
+const onContactmomentenNavigate = (page: number) => {
+  contactmomentenPage.value = page;
+};
+
+const contactverzoekenPage = ref(1);
+const contactverzoeken = useContactverzoekenByUserId(
+  userId,
+  contactverzoekenPage
+);
+const onContactverzoekenNavigate = (page: number) => {
+  contactverzoekenPage.value = page;
+};
+</script>
+
+<style lang="scss" scoped>
+.container > *:not(:last-child) {
+  margin-block-end: var(--spacing-large);
+}
+</style>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 048a1610..3990402d 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -110,7 +110,7 @@
         :current-page="state.nieuwsPage"
         @navigate="state.nieuwsPage = $event"
       />
-      <werk-berichten
+      <!-- <werk-berichten
         :level="2"
         v-if="werkInstructieId"
         header="Werkinstructies"
@@ -119,14 +119,14 @@
         :skill-ids="userStore.preferences.skills"
         :current-page="state.werkinstructiesPage"
         @navigate="state.werkinstructiesPage = $event"
-      />
+      /> -->
     </template>
   </div>
 </template>
 
 <script setup lang="ts">
 import { Heading as UtrechtHeading } from "@utrecht/component-library-vue";
-import { computed, ref } from "vue";
+import { computed } from "vue";
 import {
   useBerichtTypes,
   useSkills,
@@ -136,6 +136,9 @@ import { parseValidInt } from "@/services";
 import MultiSelect from "@/components/MultiSelect.vue";
 import { useUserStore } from "@/stores/user";
 import { ensureState } from "@/stores/create-store";
+import { useCurrentUser } from "@/features/login/service";
+
+useCurrentUser(); // init current user after login
 
 const { pubBeheerUrl } = window;
 
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
new file mode 100644
index 00000000..e524b598
--- /dev/null
+++ b/src/views/LoginView.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="template">
+    <utrecht-heading :level="1">Login</utrecht-heading>
+
+    <form @submit.prevent="handleSubmit" class="form">
+      <input
+        type="text"
+        v-model="username"
+        class="utrecht-textbox utrecht-textbox--html-input"
+      />
+
+      <input
+        type="password"
+        v-model="password"
+        class="utrecht-textbox utrecht-textbox--html-input"
+      />
+
+      <span class="error" v-if="errorMessage"
+        >Oops something went wrong: {{ errorMessage }}</span
+      >
+
+      <utrecht-button
+        type="submit"
+        appearance="primary-action-button"
+        :disabled="isLoading"
+        >Login</utrecht-button
+      >
+    </form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Cookies from "js-cookie";
+import { ref } from "vue";
+import {
+  Heading as UtrechtHeading,
+  Button as UtrechtButton,
+} from "@utrecht/component-library-vue";
+import router from "@/router";
+
+const username = ref("");
+const password = ref("");
+const isLoading = ref(false);
+const errorMessage = ref("");
+
+async function handleSubmit() {
+  isLoading.value = true;
+  errorMessage.value = "";
+
+  const url = `${window.gatewayBaseUri}/api/users/login`;
+  const payload = { username: username.value, password: password.value };
+  const options = {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(payload),
+  };
+
+  const response = await fetch(url, options);
+
+  isLoading.value = false;
+
+  if (!response.ok) {
+    const data = await response.json();
+    errorMessage.value = data.message;
+  }
+
+  if (response.ok) {
+    const data = await response.json();
+
+    Cookies.set("userId", data.id);
+    Cookies.set("jwt", data.jwtToken);
+
+    router.push("/");
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.template {
+  max-width: 100vw;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+
+  button {
+    width: fit-content;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+
+  .error {
+    color: var(--color-error);
+  }
+}
+
+* {
+  margin-block-end: var(--spacing-default);
+}
+</style>
diff --git a/src/views/PersoonDetailView.vue b/src/views/PersoonDetailView.vue
index 6d3fc393..804c04bc 100644
--- a/src/views/PersoonDetailView.vue
+++ b/src/views/PersoonDetailView.vue
@@ -24,18 +24,34 @@
       v-if="persoon.success && persoon.data"
       :persoon="persoon.data"
     />
+  <application-message
+      v-if="persoon.error && persoon.error.message === 'Empty Results' || persoon.error.message === '404'"
+      message="Geen persoon gevonden."
+      messageType="info"
+    />
+
     <application-message
-      v-if="persoon.error"
+      v-if="persoon.error && persoon.error.message !== `Empty Results` && persoon.error.message !== `404`"
       message="Er ging iets mis bij het ophalen van de BRP gegevens. Probeer het later nog eens."
       messageType="error"
     />
 
+    
+
     <simple-spinner v-if="contactverzoeken.loading" />
     <application-message
-      v-if="contactverzoeken.error"
+      v-if="contactverzoeken.error && contactverzoeken.error.message === 'Empty Results' || contactverzoeken.error.message === '404'"
+      message="Geen contactverzoeken gevonden."
+      messageType="info"
+    />
+
+    <application-message
+      v-if="contactverzoeken.error && contactverzoeken.error.message !== `Empty Results` && contactverzoeken.error.message !== `404`"
       message="Er ging iets mis bij het ophalen van de contactverzoeken. Probeer het later nog eens."
       messageType="error"
     />
+
+
     <template
       v-if="contactverzoeken.success && contactverzoeken.data.page.length"
     >
@@ -48,10 +64,15 @@
 
     <!-- Zaken -->
 
-    <simple-spinner v-if="zaken.loading" />
+    <simple-spinner v-if="zaken.loading" /> 
+    <application-message
+      v-if="zaken.error && zaken.error.message === 'Empty Results' || zaken.error.message === '404'"
+      message="Geen zaken gevonden."
+      messageType="info"
+    />
 
     <application-message
-      v-if="zaken.error"
+      v-if="zaken.error && zaken.error.message !== `Empty Results` && zaken.error.message !== `404`"
       message="Er ging iets mis bij het ophalen van de zaken. Probeer het later nog eens."
       messageType="error"
     />
@@ -68,9 +89,14 @@
     <!-- Contactmomenten -->
 
     <simple-spinner v-if="contactmomenten.loading" />
+    <application-message
+      v-if="contactmomenten.error && contactmomenten.error.message === 'Empty Results' || contactmomenten.error.message === '404'"
+      message="Geen contactmomenten gevonden."
+      messageType="info"
+    />
 
     <application-message
-      v-if="contactmomenten.error"
+      v-if="contactmomenten.error && contactmomenten.error.message !== `Empty Results` && contactmomenten.error.message !== `404`"
       message="Er ging iets mis bij het ophalen van de contactmomenten. Probeer het later nog eens."
       messageType="error"
     />