diff --git a/.github/workflows/test.build.lib.yml b/.github/workflows/test.build.lib.yml
index 2c7c26b6..99b3cd50 100644
--- a/.github/workflows/test.build.lib.yml
+++ b/.github/workflows/test.build.lib.yml
@@ -37,7 +37,7 @@ jobs:
   build-examples:
     if: needs.files-changed.outputs.build == 'true'
     name: Test Example Apps
-    needs: build
+    needs: [files-changed, build]
     runs-on: ubuntu-latest
     strategy:
       matrix:
diff --git a/.github/workflows/test.lint.frontend.yml b/.github/workflows/test.lint.frontend.yml
index 93364ca7..ab7229f4 100644
--- a/.github/workflows/test.lint.frontend.yml
+++ b/.github/workflows/test.lint.frontend.yml
@@ -1,10 +1,10 @@
-name: test:lint:frontend
+name: test:lint:app
 
 on: push
 
 jobs:
   files-changed:
-    name: Detect File Changes - lint - frontend
+    name: Detect File Changes - lint - app
     runs-on: ubuntu-latest
     outputs:
       lint: ${{ steps.filter.outputs.lint }}
@@ -16,11 +16,11 @@ jobs:
           filters: |
             lint:
               - '.github/workflows/**/*'
-              - 'frontend/**/*'
+              - 'app/**/*'
 
   lint:
     if: needs.files-changed.outputs.lint == 'true'
-    name: Lint - frontend
+    name: Lint - app
     needs: files-changed
     runs-on: ubuntu-latest
     steps:
@@ -30,4 +30,4 @@ jobs:
           node-version-file: '.tool-versions'
       - name: Lint
         run: npm install && npm run test:lint:eslint
-        working-directory: frontend/
+        working-directory: app/
diff --git a/.github/workflows/test.lint.pr.yml b/.github/workflows/test.lint.pr.yml
index 43f8438d..8e24a2c7 100644
--- a/.github/workflows/test.lint.pr.yml
+++ b/.github/workflows/test.lint.pr.yml
@@ -30,7 +30,7 @@ jobs:
           # Append a scope for each service here
           scopes: |
             backend
-            frontend
+            app
             lib
             docu
             docker
diff --git a/frontend/.env b/app/.env
similarity index 100%
rename from frontend/.env
rename to app/.env
diff --git a/frontend/.eslintignore b/app/.eslintignore
similarity index 100%
rename from frontend/.eslintignore
rename to app/.eslintignore
diff --git a/frontend/.eslintrc.cjs b/app/.eslintrc.cjs
similarity index 100%
rename from frontend/.eslintrc.cjs
rename to app/.eslintrc.cjs
diff --git a/frontend/.gitignore b/app/.gitignore
similarity index 100%
rename from frontend/.gitignore
rename to app/.gitignore
diff --git a/frontend/.prettierrc.json b/app/.prettierrc.json
similarity index 100%
rename from frontend/.prettierrc.json
rename to app/.prettierrc.json
diff --git a/frontend/docker-compose.yml b/app/docker-compose.yml
similarity index 98%
rename from frontend/docker-compose.yml
rename to app/docker-compose.yml
index 829739ed..ff7d9f5e 100644
--- a/frontend/docker-compose.yml
+++ b/app/docker-compose.yml
@@ -38,7 +38,7 @@ services:
   backend:
     container_name: backend
     build:
-      context: ./backend
+      context: ../backend
     depends_on:
       database:
         condition: service_healthy
diff --git a/frontend/index.html b/app/index.html
similarity index 100%
rename from frontend/index.html
rename to app/index.html
diff --git a/frontend/localhost-cert.pem b/app/localhost-cert.pem
similarity index 100%
rename from frontend/localhost-cert.pem
rename to app/localhost-cert.pem
diff --git a/frontend/localhost-key.pem b/app/localhost-key.pem
similarity index 100%
rename from frontend/localhost-key.pem
rename to app/localhost-key.pem
diff --git a/frontend/package-lock.json b/app/package-lock.json
similarity index 99%
rename from frontend/package-lock.json
rename to app/package-lock.json
index 62239295..7bc582bd 100644
--- a/frontend/package-lock.json
+++ b/app/package-lock.json
@@ -18,7 +18,7 @@
         "react-dom": "^18.2.0",
         "react-rnd": "^10.4.1",
         "react-router-dom": "^6.23.0",
-        "utopia-ui": "^3.0.105",
+        "utopia-ui": "^3.0.111",
         "vite-tsconfig-paths": "^5.1.4"
       },
       "devDependencies": {
@@ -2798,9 +2798,9 @@
       }
     },
     "node_modules/@tailwindcss/node": {
-      "version": "4.1.7",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.7.tgz",
-      "integrity": "sha512-9rsOpdY9idRI2NH6CL4wORFY0+Q6fnx9XP9Ju+iq/0wJwGD5IByIgFmwVbyy4ymuyprj8Qh4ErxMKTUL4uNh3g==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.11.tgz",
+      "integrity": "sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q==",
       "license": "MIT",
       "dependencies": {
         "@ampproject/remapping": "^2.3.0",
@@ -2809,13 +2809,13 @@
         "lightningcss": "1.30.1",
         "magic-string": "^0.30.17",
         "source-map-js": "^1.2.1",
-        "tailwindcss": "4.1.7"
+        "tailwindcss": "4.1.11"
       }
     },
     "node_modules/@tailwindcss/oxide": {
-      "version": "4.1.7",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.7.tgz",
-      "integrity": "sha512-5SF95Ctm9DFiUyjUPnDGkoKItPX/k+xifcQhcqX5RA85m50jw1pT/KzjdvlqxRja45Y52nR4MR9fD1JYd7f8NQ==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.11.tgz",
+      "integrity": "sha512-Q69XzrtAhuyfHo+5/HMgr1lAiPP/G40OMFAnws7xcFEYqcypZmdW8eGXaOUIeOl1dzPJBPENXgbjsOyhg2nkrg==",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -2826,24 +2826,24 @@
         "node": ">= 10"
       },
       "optionalDependencies": {
-        "@tailwindcss/oxide-android-arm64": "4.1.7",
-        "@tailwindcss/oxide-darwin-arm64": "4.1.7",
-        "@tailwindcss/oxide-darwin-x64": "4.1.7",
-        "@tailwindcss/oxide-freebsd-x64": "4.1.7",
-        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.7",
-        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.7",
-        "@tailwindcss/oxide-linux-arm64-musl": "4.1.7",
-        "@tailwindcss/oxide-linux-x64-gnu": "4.1.7",
-        "@tailwindcss/oxide-linux-x64-musl": "4.1.7",
-        "@tailwindcss/oxide-wasm32-wasi": "4.1.7",
-        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.7",
-        "@tailwindcss/oxide-win32-x64-msvc": "4.1.7"
+        "@tailwindcss/oxide-android-arm64": "4.1.11",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.11",
+        "@tailwindcss/oxide-darwin-x64": "4.1.11",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.11",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.11",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.11",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.11",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.11",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.11",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.11",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.11",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.11"
       }
     },
     "node_modules/@tailwindcss/oxide-android-arm64": {
-      "version": "4.1.7",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.7.tgz",
-      "integrity": "sha512-IWA410JZ8fF7kACus6BrUwY2Z1t1hm0+ZWNEzykKmMNM09wQooOcN/VXr0p/WJdtHZ90PvJf2AIBS/Ceqx1emg==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.11.tgz",
+      "integrity": "sha512-3IfFuATVRUMZZprEIx9OGDjG3Ou3jG4xQzNTvjDoKmU9JdmoCohQJ83MYd0GPnQIu89YoJqvMM0G3uqLRFtetg==",
       "cpu": [
         "arm64"
       ],
@@ -2857,9 +2857,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-arm64": {
-      "version": "4.1.7",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.7.tgz",
-      "integrity": "sha512-81jUw9To7fimGGkuJ2W5h3/oGonTOZKZ8C2ghm/TTxbwvfSiFSDPd6/A/KE2N7Jp4mv3Ps9OFqg2fEKgZFfsvg==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.11.tgz",
+      "integrity": "sha512-ESgStEOEsyg8J5YcMb1xl8WFOXfeBmrhAwGsFxxB2CxY9evy63+AtpbDLAyRkJnxLy2WsD1qF13E97uQyP1lfQ==",
       "cpu": [
         "arm64"
       ],
@@ -2873,9 +2873,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-darwin-x64": {
-      "version": "4.1.7",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.7.tgz",
-      "integrity": "sha512-q77rWjEyGHV4PdDBtrzO0tgBBPlQWKY7wZK0cUok/HaGgbNKecegNxCGikuPJn5wFAlIywC3v+WMBt0PEBtwGw==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.11.tgz",
+      "integrity": "sha512-EgnK8kRchgmgzG6jE10UQNaH9Mwi2n+yw1jWmof9Vyg2lpKNX2ioe7CJdf9M5f8V9uaQxInenZkOxnTVL3fhAw==",
       "cpu": [
         "x64"
       ],
@@ -2889,9 +2889,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-freebsd-x64": {
-      "version": "4.1.7",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.7.tgz",
-      "integrity": "sha512-RfmdbbK6G6ptgF4qqbzoxmH+PKfP4KSVs7SRlTwcbRgBwezJkAO3Qta/7gDy10Q2DcUVkKxFLXUQO6J3CRvBGw==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.11.tgz",
+      "integrity": "sha512-xdqKtbpHs7pQhIKmqVpxStnY1skuNh4CtbcyOHeX1YBE0hArj2romsFGb6yUmzkq/6M24nkxDqU8GYrKrz+UcA==",
       "cpu": [
         "x64"
       ],
@@ -2905,9 +2905,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
-      "version": "4.1.7",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.7.tgz",
-      "integrity": "sha512-OZqsGvpwOa13lVd1z6JVwQXadEobmesxQ4AxhrwRiPuE04quvZHWn/LnihMg7/XkN+dTioXp/VMu/p6A5eZP3g==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.11.tgz",
+      "integrity": "sha512-ryHQK2eyDYYMwB5wZL46uoxz2zzDZsFBwfjssgB7pzytAeCCa6glsiJGjhTEddq/4OsIjsLNMAiMlHNYnkEEeg==",
       "cpu": [
         "arm"
       ],
@@ -2921,9 +2921,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
-      "version": "4.1.7",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.7.tgz",
-      "integrity": "sha512-voMvBTnJSfKecJxGkoeAyW/2XRToLZ227LxswLAwKY7YslG/Xkw9/tJNH+3IVh5bdYzYE7DfiaPbRkSHFxY1xA==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.11.tgz",
+      "integrity": "sha512-mYwqheq4BXF83j/w75ewkPJmPZIqqP1nhoghS9D57CLjsh3Nfq0m4ftTotRYtGnZd3eCztgbSPJ9QhfC91gDZQ==",
       "cpu": [
         "arm64"
       ],
@@ -2937,9 +2937,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
-      "version": "4.1.7",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.7.tgz",
-      "integrity": "sha512-PjGuNNmJeKHnP58M7XyjJyla8LPo+RmwHQpBI+W/OxqrwojyuCQ+GUtygu7jUqTEexejZHr/z3nBc/gTiXBj4A==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.11.tgz",
+      "integrity": "sha512-m/NVRFNGlEHJrNVk3O6I9ggVuNjXHIPoD6bqay/pubtYC9QIdAMpS+cswZQPBLvVvEF6GtSNONbDkZrjWZXYNQ==",
       "cpu": [
         "arm64"
       ],
@@ -2953,9 +2953,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
-      "version": "4.1.7",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.7.tgz",
-      "integrity": "sha512-HMs+Va+ZR3gC3mLZE00gXxtBo3JoSQxtu9lobbZd+DmfkIxR54NO7Z+UQNPsa0P/ITn1TevtFxXTpsRU7qEvWg==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.11.tgz",
+      "integrity": "sha512-YW6sblI7xukSD2TdbbaeQVDysIm/UPJtObHJHKxDEcW2exAtY47j52f8jZXkqE1krdnkhCMGqP3dbniu1Te2Fg==",
       "cpu": [
         "x64"
       ],
@@ -2969,9 +2969,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-linux-x64-musl": {
-      "version": "4.1.7",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.7.tgz",
-      "integrity": "sha512-MHZ6jyNlutdHH8rd+YTdr3QbXrHXqwIhHw9e7yXEBcQdluGwhpQY2Eku8UZK6ReLaWtQ4gijIv5QoM5eE+qlsA==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.11.tgz",
+      "integrity": "sha512-e3C/RRhGunWYNC3aSF7exsQkdXzQ/M+aYuZHKnw4U7KQwTJotnWsGOIVih0s2qQzmEzOFIJ3+xt7iq67K/p56Q==",
       "cpu": [
         "x64"
       ],
@@ -2985,9 +2985,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-wasm32-wasi": {
-      "version": "4.1.7",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.7.tgz",
-      "integrity": "sha512-ANaSKt74ZRzE2TvJmUcbFQ8zS201cIPxUDm5qez5rLEwWkie2SkGtA4P+GPTj+u8N6JbPrC8MtY8RmJA35Oo+A==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.11.tgz",
+      "integrity": "sha512-Xo1+/GU0JEN/C/dvcammKHzeM6NqKovG+6921MR6oadee5XPBaKOumrJCXvopJ/Qb5TH7LX/UAywbqrP4lax0g==",
       "bundleDependencies": [
         "@napi-rs/wasm-runtime",
         "@emnapi/core",
@@ -3005,7 +3005,7 @@
         "@emnapi/core": "^1.4.3",
         "@emnapi/runtime": "^1.4.3",
         "@emnapi/wasi-threads": "^1.0.2",
-        "@napi-rs/wasm-runtime": "^0.2.9",
+        "@napi-rs/wasm-runtime": "^0.2.11",
         "@tybys/wasm-util": "^0.9.0",
         "tslib": "^2.8.0"
       },
@@ -3014,9 +3014,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
-      "version": "4.1.7",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.7.tgz",
-      "integrity": "sha512-HUiSiXQ9gLJBAPCMVRk2RT1ZrBjto7WvqsPBwUrNK2BcdSxMnk19h4pjZjI7zgPhDxlAbJSumTC4ljeA9y0tEw==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.11.tgz",
+      "integrity": "sha512-UgKYx5PwEKrac3GPNPf6HVMNhUIGuUh4wlDFR2jYYdkX6pL/rn73zTq/4pzUm8fOjAn5L8zDeHp9iXmUGOXZ+w==",
       "cpu": [
         "arm64"
       ],
@@ -3030,9 +3030,9 @@
       }
     },
     "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
-      "version": "4.1.7",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.7.tgz",
-      "integrity": "sha512-rYHGmvoHiLJ8hWucSfSOEmdCBIGZIq7SpkPRSqLsH2Ab2YUNgKeAPT1Fi2cx3+hnYOrAb0jp9cRyode3bBW4mQ==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.11.tgz",
+      "integrity": "sha512-YfHoggn1j0LK7wR82TOucWc5LDCguHnoS879idHekmmiR7g9HUtMw9MI0NHatS28u/Xlkfi9w5RJWgz2Dl+5Qg==",
       "cpu": [
         "x64"
       ],
@@ -3046,17 +3046,17 @@
       }
     },
     "node_modules/@tailwindcss/vite": {
-      "version": "4.1.7",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.7.tgz",
-      "integrity": "sha512-tYa2fO3zDe41I7WqijyVbRd8oWT0aEID1Eokz5hMT6wShLIHj3yvwj9XbfuloHP9glZ6H+aG2AN/+ZrxJ1Y5RQ==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.11.tgz",
+      "integrity": "sha512-RHYhrR3hku0MJFRV+fN2gNbDNEh3dwKvY8XJvTxCSXeMOsCRSr+uKvDWQcbizrHgjML6ZmTE5OwMrl5wKcujCw==",
       "license": "MIT",
       "dependencies": {
-        "@tailwindcss/node": "4.1.7",
-        "@tailwindcss/oxide": "4.1.7",
-        "tailwindcss": "4.1.7"
+        "@tailwindcss/node": "4.1.11",
+        "@tailwindcss/oxide": "4.1.11",
+        "tailwindcss": "4.1.11"
       },
       "peerDependencies": {
-        "vite": "^5.2.0 || ^6"
+        "vite": "^5.2.0 || ^6 || ^7"
       }
     },
     "node_modules/@tanstack/query-core": {
@@ -5248,9 +5248,9 @@
       "license": "ISC"
     },
     "node_modules/enhanced-resolve": {
-      "version": "5.18.1",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
-      "integrity": "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==",
+      "version": "5.18.2",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.2.tgz",
+      "integrity": "sha512-6Jw4sE1maoRJo3q8MsSIn2onJFbLTOjY9hlx4DZXmOKvLRd1Ok2kXmAGXaafL2+ijsJZ1ClYbl/pmqr9+k4iUQ==",
       "license": "MIT",
       "dependencies": {
         "graceful-fs": "^4.2.4",
@@ -9230,9 +9230,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.5.3",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
-      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
       "funding": [
         {
           "type": "opencollective",
@@ -9249,7 +9249,7 @@
       ],
       "license": "MIT",
       "dependencies": {
-        "nanoid": "^3.3.8",
+        "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
         "source-map-js": "^1.2.1"
       },
@@ -10762,9 +10762,9 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "4.1.7",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.7.tgz",
-      "integrity": "sha512-kr1o/ErIdNhTz8uzAYL7TpaUuzKIE6QPQ4qmSdxnoX/lo+5wmUHQA6h3L5yIqEImSRnAAURDirLu/BgiXGPAhg==",
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.11.tgz",
+      "integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==",
       "license": "MIT"
     },
     "node_modules/tapable": {
@@ -11465,9 +11465,9 @@
       }
     },
     "node_modules/utopia-ui": {
-      "version": "3.0.105",
-      "resolved": "https://registry.npmjs.org/utopia-ui/-/utopia-ui-3.0.105.tgz",
-      "integrity": "sha512-QihvnHeR0R9GXIZ/Mx1EBlsYBthhykM/jPdfN/5bHyyBAXGX0jm+6msEySo0jFWASxPr2G4rhImJJzeRxPyUhw==",
+      "version": "3.0.111",
+      "resolved": "https://registry.npmjs.org/utopia-ui/-/utopia-ui-3.0.111.tgz",
+      "integrity": "sha512-bUqgPCWyS3IcyegweXbRLt2SVYM9cWWLvLst9gcEaezfF4Egz4yXOq7mYmjBl+PpCt0d8EY6Tj8VhdfLxg63qg==",
       "license": "GPL-3.0-only",
       "dependencies": {
         "@heroicons/react": "^2.0.17",
@@ -11498,7 +11498,7 @@
         "react-leaflet-cluster": "^2.1.0",
         "react-markdown": "^9.0.1",
         "react-photo-album": "^3.0.2",
-        "react-router-dom": "^6.16.0",
+        "react-router-dom": "^6.23.0",
         "react-toastify": "^9.1.3",
         "remark-breaks": "^4.0.0",
         "tiptap-markdown": "^0.8.10",
diff --git a/frontend/package.json b/app/package.json
similarity index 96%
rename from frontend/package.json
rename to app/package.json
index 078359af..1c6e9e38 100644
--- a/frontend/package.json
+++ b/app/package.json
@@ -20,8 +20,8 @@
     "react-dom": "^18.2.0",
     "react-rnd": "^10.4.1",
     "react-router-dom": "^6.23.0",
-    "utopia-ui": "^3.0.105",
-    "vite-tsconfig-paths": "^5.1.4"
+    "vite-tsconfig-paths": "^5.1.4",
+    "utopia-ui": "^3.0.111"
   },
   "devDependencies": {
     "@eslint-community/eslint-plugin-eslint-comments": "^4.4.1",
diff --git a/frontend/public/3markers-globe.svg b/app/public/3markers-globe.svg
similarity index 100%
rename from frontend/public/3markers-globe.svg
rename to app/public/3markers-globe.svg
diff --git a/frontend/public/bg1.webp b/app/public/bg1.webp
similarity index 100%
rename from frontend/public/bg1.webp
rename to app/public/bg1.webp
diff --git a/frontend/public/github.svg b/app/public/github.svg
similarity index 100%
rename from frontend/public/github.svg
rename to app/public/github.svg
diff --git a/frontend/public/opencollective.svg b/app/public/opencollective.svg
similarity index 100%
rename from frontend/public/opencollective.svg
rename to app/public/opencollective.svg
diff --git a/frontend/public/style.css b/app/public/style.css
similarity index 100%
rename from frontend/public/style.css
rename to app/public/style.css
diff --git a/frontend/src/App.css b/app/src/App.css
similarity index 100%
rename from frontend/src/App.css
rename to app/src/App.css
diff --git a/frontend/src/App.tsx b/app/src/App.tsx
similarity index 95%
rename from frontend/src/App.tsx
rename to app/src/App.tsx
index f3f44612..e6631809 100644
--- a/frontend/src/App.tsx
+++ b/app/src/App.tsx
@@ -129,7 +129,7 @@ function App() {
           icon: (
             <SVG
               src={'https://api.utopia-lab.org/assets/' + l.indexIcon}
-              className='w-6 h-6'
+              className='tw:w-6 tw:h-6'
               preProcessor={(code: string) =>
                 code.replace(/stroke=".*?"/g, 'stroke="currentColor"')
               }
@@ -160,7 +160,7 @@ function App() {
 
   if (map && layers)
     return (
-      <div className='App overflow-x-hidden'>
+      <div className='App tw:overflow-x-hidden'>
         <AuthProvider userApi={userApi} inviteApi={inviteApi}>
           <AppShell
             assetsApi={new assetsApi('https://api.utopia-lab.org/assets/')}
@@ -253,18 +253,18 @@ function App() {
     )
   else if (map == 'null' && !loading)
     return (
-      <div className='flex items-center justify-center h-screen'>
+      <div className='tw:flex tw:items-center tw:justify-center tw:h-screen'>
         <div>
-          <p className='text-xl font-semibold'>This map does not exist</p>
+          <p className='tw:text-xl tw:font-semibold'>This map does not exist</p>
         </div>
       </div>
     )
   else
     return (
       <div className='outer'>
-        <img className='pulse-loader opacity h-[96px]' src='/3markers-globe.svg' />
+        <img className='pulse-loader tw-h-[96px]' src='/3markers-globe.svg' />
         <br />
-        <span className='loader'></span>
+        <span className='tw:loader'></span>
       </div>
     )
 }
diff --git a/frontend/src/ModalContent.tsx b/app/src/ModalContent.tsx
similarity index 77%
rename from frontend/src/ModalContent.tsx
rename to app/src/ModalContent.tsx
index 590fdd59..61ba2a6e 100644
--- a/frontend/src/ModalContent.tsx
+++ b/app/src/ModalContent.tsx
@@ -2,13 +2,12 @@
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
+
 import { useEffect, useState } from 'react'
 import { TextView } from 'utopia-ui'
 
 interface ChapterProps {
-  clickAction1?: () => void
-  clickAction2?: () => void
+  clickAction1: () => void
   map?: any
 }
 
@@ -21,20 +20,23 @@ export function Welcome1({ clickAction1, map }: ChapterProps) {
         </>
       ) : (
         <>
-          <h3 className='font-bold text-lg'>Welcome to {map?.name || 'Utopia Map'}</h3>
+          <h3 className='tw:font-bold tw:text-lg'>Welcome to {map?.name || 'Utopia Map'}</h3>
           <img
-            className='float-right w-32 m-2'
+            className='tw:float-right tw:w-32 tw:m-2'
             src={'https://api.utopia-lab.org/assets/' + map.logo}
           ></img>
-          <p className='py-3'>
+          <p className='tw:py-3'>
             It is a tool for collaborative mapping to connect local initiatives, people and events.
           </p>
-          <p className='py-1'>
+          <p className='tw:py-1'>
             Join us and grow the network by adding projects and events to the map.
           </p>
-          <p className='py-1'>Create your personal profile and place it on the map.</p>
-          <div className='grid'>
-            <label className='btn btn-primary place-self-end mt-4' onClick={() => clickAction1!()}>
+          <p className='tw:py-1'>Create your personal profile and place it on the map.</p>
+          <div className='tw:grid'>
+            <label
+              className='tw:btn tw:btn-primary tw:place-self-end tw:mt-4'
+              onClick={() => clickAction1()}
+            >
               Close
             </label>
           </div>
diff --git a/frontend/src/api/assetsApi.ts b/app/src/api/assetsApi.ts
similarity index 100%
rename from frontend/src/api/assetsApi.ts
rename to app/src/api/assetsApi.ts
diff --git a/frontend/src/api/directus.ts b/app/src/api/directus.ts
similarity index 100%
rename from frontend/src/api/directus.ts
rename to app/src/api/directus.ts
diff --git a/frontend/src/api/inviteApi.ts b/app/src/api/inviteApi.ts
similarity index 100%
rename from frontend/src/api/inviteApi.ts
rename to app/src/api/inviteApi.ts
diff --git a/frontend/src/api/itemsApi.ts b/app/src/api/itemsApi.ts
similarity index 100%
rename from frontend/src/api/itemsApi.ts
rename to app/src/api/itemsApi.ts
diff --git a/frontend/src/api/layersApi.ts b/app/src/api/layersApi.ts
similarity index 100%
rename from frontend/src/api/layersApi.ts
rename to app/src/api/layersApi.ts
diff --git a/frontend/src/api/mapApi.ts b/app/src/api/mapApi.ts
similarity index 100%
rename from frontend/src/api/mapApi.ts
rename to app/src/api/mapApi.ts
diff --git a/frontend/src/api/permissionsApi.ts b/app/src/api/permissionsApi.ts
similarity index 100%
rename from frontend/src/api/permissionsApi.ts
rename to app/src/api/permissionsApi.ts
diff --git a/frontend/src/api/readUserApi.ts b/app/src/api/readUserApi.ts
similarity index 100%
rename from frontend/src/api/readUserApi.ts
rename to app/src/api/readUserApi.ts
diff --git a/frontend/src/api/refiBcnApi.ts b/app/src/api/refiBcnApi.ts
similarity index 100%
rename from frontend/src/api/refiBcnApi.ts
rename to app/src/api/refiBcnApi.ts
diff --git a/frontend/src/api/userApi.ts b/app/src/api/userApi.ts
similarity index 100%
rename from frontend/src/api/userApi.ts
rename to app/src/api/userApi.ts
diff --git a/frontend/src/config/index.ts b/app/src/config/index.ts
similarity index 100%
rename from frontend/src/config/index.ts
rename to app/src/config/index.ts
diff --git a/frontend/src/index.css b/app/src/index.css
similarity index 76%
rename from frontend/src/index.css
rename to app/src/index.css
index 727a81fb..a6859cba 100644
--- a/frontend/src/index.css
+++ b/app/src/index.css
@@ -5,4 +5,7 @@
 
 @theme {
   --animate-fade: fadeOut 1s ease-in-out;
-}
\ No newline at end of file
+}
+
+@import 'tailwindcss'  prefix(tw);
+@source '../../lib/src/';
\ No newline at end of file
diff --git a/frontend/src/main.tsx b/app/src/main.tsx
similarity index 91%
rename from frontend/src/main.tsx
rename to app/src/main.tsx
index 530a7f4e..86140f18 100644
--- a/frontend/src/main.tsx
+++ b/app/src/main.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable import/default */
 /* eslint-disable import/extensions */
 /* eslint-disable import/no-named-as-default-member */
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
diff --git a/frontend/src/pages/Concept.tsx b/app/src/pages/Concept.tsx
similarity index 100%
rename from frontend/src/pages/Concept.tsx
rename to app/src/pages/Concept.tsx
diff --git a/frontend/src/pages/ConceptDE.tsx b/app/src/pages/ConceptDE.tsx
similarity index 100%
rename from frontend/src/pages/ConceptDE.tsx
rename to app/src/pages/ConceptDE.tsx
diff --git a/frontend/src/pages/Landingpage.tsx b/app/src/pages/Landingpage.tsx
similarity index 100%
rename from frontend/src/pages/Landingpage.tsx
rename to app/src/pages/Landingpage.tsx
diff --git a/frontend/src/pages/MapContainer.tsx b/app/src/pages/MapContainer.tsx
similarity index 95%
rename from frontend/src/pages/MapContainer.tsx
rename to app/src/pages/MapContainer.tsx
index 6e39a682..fe3140a1 100644
--- a/frontend/src/pages/MapContainer.tsx
+++ b/app/src/pages/MapContainer.tsx
@@ -84,6 +84,8 @@ function MapContainer({ layers, map }: { layers: LayerProps[]; map: any }) {
         defaultTheme={map.default_theme}
         showZoomControl={map.show_zoom_control}
         expandLayerControl={map.expand_layer_control}
+        tileServerUrl={map.tile_server_url}
+        tileServerAttribution={map.tile_server_attribution}
       >
         {layers &&
           apis &&
@@ -124,11 +126,11 @@ function MapContainer({ layers, map }: { layers: LayerProps[]; map: any }) {
                   <PopupStartEndInput showLabels={false}></PopupStartEndInput>
                 )}
                 {layer.itemType.show_text_input && (
-                  <div className='mt-4'>
+                  <div className='tw:mt-4'>
                     <PopupTextAreaInput
                       dataField='text'
                       placeholder={'Text ...'}
-                      style='tw-h-40'
+                      style='tw:h-40'
                     ></PopupTextAreaInput>
                   </div>
                 )}
@@ -136,7 +138,7 @@ function MapContainer({ layers, map }: { layers: LayerProps[]; map: any }) {
                   // layer.public_edit_items && <PopupCheckboxInput dataField={'public_edit'} label={'public edit'}/>
                 }
                 {layer.itemType.custom_text && (
-                  <div className='flex justify-center'>
+                  <div className='tw:flex tw:justify-center'>
                     <p>{layer.itemType.custom_text}</p>
                   </div>
                 )}
diff --git a/frontend/src/pages/data.ts b/app/src/pages/data.ts
similarity index 100%
rename from frontend/src/pages/data.ts
rename to app/src/pages/data.ts
diff --git a/frontend/src/routes/sidebar.tsx b/app/src/routes/sidebar.tsx
similarity index 87%
rename from frontend/src/routes/sidebar.tsx
rename to app/src/routes/sidebar.tsx
index 672c100a..66203665 100644
--- a/frontend/src/routes/sidebar.tsx
+++ b/app/src/routes/sidebar.tsx
@@ -1,6 +1,8 @@
 import { MapIcon } from '@heroicons/react/24/outline'
 import { SVG } from 'utopia-ui'
 
+import type { Route } from '#components/AppShell/SideBar'
+
 export const routes = [
   {
     path: '/',
@@ -43,7 +45,7 @@ export const getBottomRoutes = (currentUrl: string) => {
   const url = new URL(currentUrl)
   const isEmbedded = url.searchParams.get('embedded') === 'true'
 
-  const bottomRoutes = [
+  const bottomRoutes: Route[] = [
     // Other routes can be added here
   ]
 
@@ -51,13 +53,13 @@ export const getBottomRoutes = (currentUrl: string) => {
     bottomRoutes.push(
       {
         path: 'https://github.com/utopia-os/utopia-ui', // url
-        icon: <SVG src='/github.svg' className='w-6 h-6' />,
+        icon: <SVG src='/github.svg' className='tw:w-6 tw:h-6' />,
         name: 'GitHub', // name that appear in Sidebar
         blank: true,
       },
       {
         path: 'https://opencollective.com/utopia-project', // url
-        icon: <SVG src='/opencollective.svg' className='w-6 h-6' />,
+        icon: <SVG src='/opencollective.svg' className='tw:w-6 tw:h-6' />,
         name: 'Open Collective', // name that appear in Sidebar
         blank: true,
       },
diff --git a/frontend/src/vite-env.d.ts b/app/src/vite-env.d.ts
similarity index 100%
rename from frontend/src/vite-env.d.ts
rename to app/src/vite-env.d.ts
diff --git a/frontend/tailwind.config.js b/app/tailwind.config.js
similarity index 100%
rename from frontend/tailwind.config.js
rename to app/tailwind.config.js
diff --git a/app/tsconfig.json b/app/tsconfig.json
new file mode 100644
index 00000000..d6222cbb
--- /dev/null
+++ b/app/tsconfig.json
@@ -0,0 +1,49 @@
+{
+  "extends": "../tsconfig.base.json",
+  "compilerOptions": {
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ],
+      "utopia-ui": [
+        "../lib/src"
+      ],
+      "#components/*": [
+        "../lib/src/Components/*"
+      ],
+      "#utils/*": [
+        "../lib/src/Utils/*"
+      ],
+      "#types/*": [
+        "../lib/src/types/*"
+      ],
+      "#assets/*": [
+        "../lib/src/assets/*"
+      ],
+      "#src/*": [
+        "../lib/src/*"
+      ],
+      "#root/*": [
+        "../lib/*"
+      ],
+    }
+  },
+  "include": [
+    "src"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}
diff --git a/frontend/tsconfig.node.json b/app/tsconfig.node.json
similarity index 100%
rename from frontend/tsconfig.node.json
rename to app/tsconfig.node.json
diff --git a/frontend/video_preview.png b/app/video_preview.png
similarity index 100%
rename from frontend/video_preview.png
rename to app/video_preview.png
diff --git a/app/vite.config.ts b/app/vite.config.ts
new file mode 100644
index 00000000..5dfae1eb
--- /dev/null
+++ b/app/vite.config.ts
@@ -0,0 +1,61 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+import fs from 'fs'
+import path from 'path'
+import tsConfigPaths from 'vite-tsconfig-paths'
+
+// __dirname-Ersatz für ESModules
+const __dirname = path.dirname(new URL(import.meta.url).pathname)
+
+export default defineConfig({
+  server: {
+    host: true,
+    port: 5174,
+    /**
+     * https: {
+     *   key: fs.readFileSync(path.resolve(__dirname, 'localhost-key.pem')),
+     *   cert: fs.readFileSync(path.resolve(__dirname, 'localhost-cert.pem')),
+     * },
+     */
+  },
+  plugins: [react(), tailwindcss(), tsConfigPaths()],
+  resolve: {
+    dedupe: ['react', 'react-dom', 'react-router-dom'],
+    alias: {
+      'utopia-ui': path.resolve(__dirname, '../lib/src'),
+      '#components': path.resolve(__dirname, '../lib/src/Components'),
+      '#utils': path.resolve(__dirname, '../lib/src/Utils'),
+      '#types': path.resolve(__dirname, '../lib/src/types'),
+      '#assets': path.resolve(__dirname, '../lib/src/assets'),
+      '#src': path.resolve(__dirname, '../lib/src'),
+      '#root': path.resolve(__dirname, '../lib'),
+    },
+  },
+  build: {
+    sourcemap: true,
+    rollupOptions: {
+      output: {
+        manualChunks: (id) => {
+          if (id.includes('lib/src')) {
+            return 'utopia-ui'
+          }
+          if (id.includes('node_modules')) {
+            if (id.includes('react')) {
+              return 'react'
+            }
+            if (id.includes('tiptap')) {
+              return 'tiptap'
+            }
+            if (id.includes('leaflet')) {
+              return 'leaflet'
+            }
+            if (id.includes('lib/node_modules')) {
+              return 'utopia-ui-vendor'
+            } else return 'vendor'
+          }
+        },
+      },
+    },
+  },
+})
diff --git a/backend/README.md b/backend/README.md
index f796ee30..7d280167 100644
--- a/backend/README.md
+++ b/backend/README.md
@@ -1,4 +1,4 @@
-In order to pull data from your locally running backend (see [docker-compose](../docker-compose.yml)) to your local harddrive, you can run the following command
+In order to pull data from your locally running backend (see [docker-compose](../app/docker-compose.yml)) to your local harddrive, you can run the following command
 
 ```
 npx directus-sync pull \
diff --git a/frontend/src/pages/Calendar.tsx b/frontend/src/pages/Calendar.tsx
deleted file mode 100644
index 9d7a30b2..00000000
--- a/frontend/src/pages/Calendar.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-/* eslint-disable import/default */
-/* eslint-disable @typescript-eslint/restrict-template-expressions */
-import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline'
-import {
-  add,
-  eachDayOfInterval,
-  endOfMonth,
-  endOfWeek,
-  format,
-  getDay,
-  isSameMonth,
-  isToday,
-  parse,
-  startOfToday,
-  startOfWeek,
-} from 'date-fns'
-import React, { useState } from 'react'
-import { MapOverlayPage } from 'utopia-ui'
-
-export const Calendar = () => {
-  const today = startOfToday()
-  const days = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']
-  const colStartClasses = [
-    '',
-    'col-start-2',
-    'col-start-3',
-    'col-start-4',
-    'col-start-5',
-    'col-start-6',
-    'col-start-7',
-  ]
-
-  const [currMonth, setCurrMonth] = useState(() => format(today, 'MMM-yyyy'))
-  const firstDayOfMonth = parse(currMonth, 'MMM-yyyy', new Date())
-
-  const daysInMonth = eachDayOfInterval({
-    start: startOfWeek(firstDayOfMonth),
-    end: endOfWeek(endOfMonth(firstDayOfMonth)),
-  })
-
-  const getPrevMonth = (event: React.MouseEvent<SVGSVGElement>) => {
-    event.preventDefault()
-    const firstDayOfPrevMonth = add(firstDayOfMonth, { months: -1 })
-    setCurrMonth(format(firstDayOfPrevMonth, 'MMM-yyyy'))
-  }
-
-  const getNextMonth = (event: React.MouseEvent<SVGSVGElement>) => {
-    event.preventDefault()
-    const firstDayOfNextMonth = add(firstDayOfMonth, { months: 1 })
-    setCurrMonth(format(firstDayOfNextMonth, 'MMM-yyyy'))
-  }
-
-  return (
-    <MapOverlayPage
-      backdrop
-      className='tw-max-h-[calc(100dvh-96px)] tw-h-fit md:tw-w-[calc(50%-32px)] tw-w-[calc(100%-32px)] max-w-lg'
-    >
-      <div className='flex items-center justify-between'>
-        <p className='font-semibold text-xl'>{format(firstDayOfMonth, 'MMMM yyyy')}</p>
-        <div className='flex items-center justify-evenly gap-6 sm:gap-12'>
-          <ChevronLeftIcon className='w-6 h-6 cursor-pointer' onClick={getPrevMonth} />
-          <ChevronRightIcon className='w-6 h-6 cursor-pointer' onClick={getNextMonth} />
-        </div>
-      </div>
-      <hr className='my-6' />
-      <div className='grid grid-cols-7 gap-6 sm:gap-12 place-items-center'>
-        {days.map((day, idx) => {
-          return (
-            <div key={idx} className='font-semibold'>
-              {capitalizeFirstLetter(day)}
-            </div>
-          )
-        })}
-      </div>
-      <div className='grid grid-cols-7 gap-4 sm:gap-12 mt-8 place-items-center'>
-        {daysInMonth.map((day, idx) => {
-          return (
-            <div key={idx} className={colStartClasses[getDay(day)]}>
-              <p
-                className={`cursor-pointer flex items-center justify-center font-semibold h-8 w-8 rounded-full  hover:text-white ${
-                  isSameMonth(day, today) ? 'text-current' : 'text-gray-500'
-                } ${!isToday(day) && 'hover:bg-primary-content'} ${
-                  isToday(day) && 'bg-primary text-white!'
-                }`}
-              >
-                {format(day, 'd')}
-              </p>
-            </div>
-          )
-        })}
-      </div>
-    </MapOverlayPage>
-  )
-}
-
-const capitalizeFirstLetter = (string: string) => {
-  return string
-}
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
deleted file mode 100644
index f7d59d5e..00000000
--- a/frontend/tsconfig.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ESNext",
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-
-    /* Paths */
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"],
-    }
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
deleted file mode 100644
index 650bd751..00000000
--- a/frontend/vite.config.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
-import tailwindcss from '@tailwindcss/vite'
-import tsConfigPaths from 'vite-tsconfig-paths'
-import fs from 'fs'
-import path from 'path'
-
-// __dirname-Ersatz für ESModules
-const __dirname = path.dirname(new URL(import.meta.url).pathname)
-
-export default defineConfig({
-  server: {
-    host: true,
-    port: 5174,
-    /**
-     * https: {
-     *   key: fs.readFileSync(path.resolve(__dirname, 'localhost-key.pem')),
-     *   cert: fs.readFileSync(path.resolve(__dirname, 'localhost-cert.pem')),
-     * },
-     */
-  },
-  plugins: [react(), tailwindcss(), tsConfigPaths()],
-  build: {
-    rollupOptions: {
-      output: {
-        manualChunks(id) {
-          if (id.includes('node_modules/utopia-ui/dist/Profile') && /\.(esm|cjs)\.js$/.test(id)) {
-            return 'profile-form'
-          }
-
-          if (id.includes('node_modules/utopia-ui/')) {
-            return 'utopia-ui-vendor'
-          }
-
-          if (id.includes('node_modules/')) {
-            return 'vendor'
-          }
-        },
-      },
-    },
-  },
-})
diff --git a/lib/package-lock.json b/lib/package-lock.json
index 233274c8..4dbba735 100644
--- a/lib/package-lock.json
+++ b/lib/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "utopia-ui",
-  "version": "3.0.106",
+  "version": "3.0.111",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "utopia-ui",
-      "version": "3.0.106",
+      "version": "3.0.111",
       "license": "GPL-3.0-only",
       "dependencies": {
         "@heroicons/react": "^2.0.17",
@@ -38,7 +38,7 @@
         "react-markdown": "^9.0.1",
         "react-photo-album": "^3.0.2",
         "react-qr-code": "^2.0.16",
-        "react-router-dom": "^6.16.0",
+        "react-router-dom": "^6.23.0",
         "react-toastify": "^9.1.3",
         "remark-breaks": "^4.0.0",
         "tiptap-markdown": "^0.8.10",
diff --git a/lib/package.json b/lib/package.json
index 95c0c90c..0a1fe6bc 100644
--- a/lib/package.json
+++ b/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "utopia-ui",
-  "version": "3.0.106",
+  "version": "3.0.111",
   "description": "Reuseable React Components to build mapping apps for real life communities and networks",
   "repository": "https://github.com/utopia-os/utopia-ui",
   "homepage": "https://utopia-os.org/",
@@ -126,7 +126,7 @@
     "react-markdown": "^9.0.1",
     "react-photo-album": "^3.0.2",
     "react-qr-code": "^2.0.16",
-    "react-router-dom": "^6.16.0",
+    "react-router-dom": "^6.23.0",
     "react-toastify": "^9.1.3",
     "remark-breaks": "^4.0.0",
     "tiptap-markdown": "^0.8.10",
diff --git a/lib/src/Components/Auth/index.tsx b/lib/src/Components/Auth/index.tsx
index c8fe3b90..d1029e26 100644
--- a/lib/src/Components/Auth/index.tsx
+++ b/lib/src/Components/Auth/index.tsx
@@ -1,5 +1,7 @@
-export { AuthProvider, UserApi, UserItem } from './useAuth'
+export { AuthProvider } from './useAuth'
 export { LoginPage } from './LoginPage'
 export { SignupPage } from './SignupPage'
 export { RequestPasswordPage } from './RequestPasswordPage'
 export { SetNewPasswordPage } from './SetNewPasswordPage'
+export type { UserItem } from '#types/UserItem'
+export type { UserApi } from '#types/UserApi'
diff --git a/lib/src/Components/Auth/useAuth.tsx b/lib/src/Components/Auth/useAuth.tsx
index dadd2458..413e88f5 100644
--- a/lib/src/Components/Auth/useAuth.tsx
+++ b/lib/src/Components/Auth/useAuth.tsx
@@ -4,9 +4,6 @@ import type { InviteApi } from '#types/InviteApi'
 import type { UserApi } from '#types/UserApi'
 import type { UserItem } from '#types/UserItem'
 
-export type { UserApi } from '#types/UserApi'
-export type { UserItem } from '#types/UserItem'
-
 interface AuthProviderProps {
   userApi: UserApi
   inviteApi: InviteApi
diff --git a/lib/src/Components/Input/Autocomplete.tsx b/lib/src/Components/Input/Autocomplete.tsx
index f98dca30..2bb97d2c 100644
--- a/lib/src/Components/Input/Autocomplete.tsx
+++ b/lib/src/Components/Input/Autocomplete.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 /* eslint-disable @typescript-eslint/no-unsafe-call */
@@ -35,8 +34,6 @@ export const Autocomplete = ({
 
   const inputRef = useRef<HTMLInputElement>()
 
-  const getSuggestionValue = (suggestion) => suggestion.name
-
   const getSuggestions = (value) => {
     const inputValue = value.trim().toLowerCase()
     const inputLength = inputValue.length
diff --git a/lib/src/Components/Input/InputLabel.tsx b/lib/src/Components/Input/InputLabel.tsx
new file mode 100644
index 00000000..a8283b6b
--- /dev/null
+++ b/lib/src/Components/Input/InputLabel.tsx
@@ -0,0 +1,9 @@
+export const InputLabel = ({ label }: { label: string }) => {
+  return (
+    <label className='tw:label tw:pb-1'>
+      <span className='tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1'>
+        {label}:
+      </span>
+    </label>
+  )
+}
diff --git a/lib/src/Components/Input/RichTextEditor.tsx b/lib/src/Components/Input/RichTextEditor.tsx
index 268cbe04..539ad28b 100644
--- a/lib/src/Components/Input/RichTextEditor.tsx
+++ b/lib/src/Components/Input/RichTextEditor.tsx
@@ -10,6 +10,7 @@ import { StarterKit } from '@tiptap/starter-kit'
 import { useEffect } from 'react'
 import { Markdown } from 'tiptap-markdown'
 
+import { InputLabel } from './InputLabel'
 import { TextEditorMenu } from './TextEditorMenu'
 
 interface RichTextEditorProps {
@@ -27,7 +28,6 @@ interface RichTextEditorProps {
  */
 export function RichTextEditor({
   labelTitle,
-  labelStyle,
   containerStyle,
   defaultValue,
   placeholder,
@@ -88,13 +88,7 @@ export function RichTextEditor({
     <div
       className={`tw:form-control tw:w-full tw:flex tw:flex-col tw:min-h-0 ${containerStyle ?? ''}`}
     >
-      {labelTitle ? (
-        <label className='tw:label tw:pb-1'>
-          <span className={`tw:label-text tw:text-base-content ${labelStyle ?? ''}`}>
-            {labelTitle}
-          </span>
-        </label>
-      ) : null}
+      {labelTitle ? <InputLabel label={labelTitle} /> : null}
       <div
         className={`editor-wrapper tw:border-base-content/20 tw:rounded-box tw:border tw:flex tw:flex-col tw:flex-1 tw:min-h-0`}
       >
diff --git a/lib/src/Components/Input/TextAreaInput.tsx b/lib/src/Components/Input/TextAreaInput.tsx
index 2ab53264..6a880b84 100644
--- a/lib/src/Components/Input/TextAreaInput.tsx
+++ b/lib/src/Components/Input/TextAreaInput.tsx
@@ -1,8 +1,9 @@
 import { useEffect, useRef, useState } from 'react'
 
+import { InputLabel } from './InputLabel'
+
 interface TextAreaProps {
   labelTitle?: string
-  labelStyle?: string
   containerStyle?: string
   dataField?: string
   inputStyle?: string
@@ -18,7 +19,6 @@ interface TextAreaProps {
 export function TextAreaInput({
   labelTitle,
   dataField,
-  labelStyle,
   containerStyle,
   inputStyle,
   defaultValue,
@@ -43,13 +43,7 @@ export function TextAreaInput({
 
   return (
     <div className={`tw:form-control tw:w-full ${containerStyle ?? ''}`}>
-      {labelTitle ? (
-        <label className='tw:label'>
-          <span className={`tw:label-text tw:text-base-content ${labelStyle ?? ''}`}>
-            {labelTitle}
-          </span>
-        </label>
-      ) : null}
+      {labelTitle ? <InputLabel label={labelTitle} /> : null}
       <textarea
         required={required}
         ref={ref}
diff --git a/lib/src/Components/Input/TextInput.tsx b/lib/src/Components/Input/TextInput.tsx
index 0feab982..b28e5dc3 100644
--- a/lib/src/Components/Input/TextInput.tsx
+++ b/lib/src/Components/Input/TextInput.tsx
@@ -1,8 +1,9 @@
 import { useEffect, useState } from 'react'
 
+import { InputLabel } from './InputLabel'
+
 interface InputTextProps {
   labelTitle?: string
-  labelStyle?: string
   type?: string
   dataField?: string
   containerStyle?: string
@@ -20,7 +21,6 @@ interface InputTextProps {
  */
 export function TextInput({
   labelTitle,
-  labelStyle,
   type,
   dataField,
   containerStyle,
@@ -48,13 +48,7 @@ export function TextInput({
 
   return (
     <div className={`tw:form-control ${containerStyle ?? ''}`}>
-      {labelTitle ? (
-        <label className='tw:label'>
-          <span className={`tw:label-text tw:text-base-content ${labelStyle ?? ''}`}>
-            {labelTitle}
-          </span>
-        </label>
-      ) : null}
+      {labelTitle ? <InputLabel label={labelTitle} /> : null}
       <input
         required={required}
         pattern={pattern}
diff --git a/lib/src/Components/Input/__snapshots__/TextAreaInput.spec.tsx.snap b/lib/src/Components/Input/__snapshots__/TextAreaInput.spec.tsx.snap
index 75a82c0f..32f944a3 100644
--- a/lib/src/Components/Input/__snapshots__/TextAreaInput.spec.tsx.snap
+++ b/lib/src/Components/Input/__snapshots__/TextAreaInput.spec.tsx.snap
@@ -5,12 +5,13 @@ exports[`<TextAreaInput /> > labelTitle > sets label 1`] = `
   class="tw:form-control tw:w-full "
 >
   <label
-    class="tw:label"
+    class="tw:label tw:pb-1"
   >
     <span
-      class="tw:label-text tw:text-base-content "
+      class="tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1"
     >
       My Title
+      :
     </span>
   </label>
   <textarea
diff --git a/lib/src/Components/Input/__snapshots__/TextInput.spec.tsx.snap b/lib/src/Components/Input/__snapshots__/TextInput.spec.tsx.snap
index 2c914699..4a239a49 100644
--- a/lib/src/Components/Input/__snapshots__/TextInput.spec.tsx.snap
+++ b/lib/src/Components/Input/__snapshots__/TextInput.spec.tsx.snap
@@ -5,12 +5,13 @@ exports[`<TextInput /> > labelTitle > sets label 1`] = `
   class="tw:form-control "
 >
   <label
-    class="tw:label"
+    class="tw:label tw:pb-1"
   >
     <span
-      class="tw:label-text tw:text-base-content "
+      class="tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1"
     >
       My Title
+      :
     </span>
   </label>
   <input
diff --git a/lib/src/Components/Input/index.tsx b/lib/src/Components/Input/index.tsx
index 2c0c2064..cc50996c 100644
--- a/lib/src/Components/Input/index.tsx
+++ b/lib/src/Components/Input/index.tsx
@@ -1,2 +1,4 @@
 export { TextAreaInput } from './TextAreaInput'
 export { TextInput } from './TextInput'
+export { InputLabel } from './InputLabel'
+export { RichTextEditor } from './RichTextEditor'
diff --git a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
index dca14fc4..64b8d07b 100644
--- a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
+++ b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
@@ -74,7 +74,7 @@ export function HeaderView({
     <>
       <div className='tw:flex tw:flex-row'>
         <div className={'tw:grow tw:max-w-[calc(100%-60px)] }'}>
-          <div className='flex items-center'>
+          <div className='tw:flex tw:items-center'>
             {avatar && (
               <div className='tw:avatar'>
                 <div
diff --git a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx
index 41097025..672855a8 100644
--- a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx
+++ b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx
@@ -6,7 +6,6 @@ import type { Item } from '#types/Item'
 export interface StartEndInputProps {
   item?: Item
   showLabels?: boolean
-  labelStyle?: string
   updateStartValue?: (value: string) => void
   updateEndValue?: (value: string) => void
   containerStyle?: string
@@ -18,7 +17,6 @@ export interface StartEndInputProps {
 export const PopupStartEndInput = ({
   item,
   showLabels = true,
-  labelStyle,
   updateStartValue,
   updateEndValue,
   containerStyle,
@@ -31,7 +29,6 @@ export const PopupStartEndInput = ({
         dataField='start'
         inputStyle='tw:text-sm tw:px-2'
         labelTitle={showLabels ? 'Start' : ''}
-        labelStyle={labelStyle}
         defaultValue={item && item.start ? item.start.substring(0, 10) : ''}
         autocomplete='one-time-code'
         updateFormValue={updateStartValue}
@@ -42,7 +39,6 @@ export const PopupStartEndInput = ({
         dataField='end'
         inputStyle='tw:text-sm tw:px-2'
         labelTitle={showLabels ? 'End' : ''}
-        labelStyle={labelStyle}
         defaultValue={item && item.end ? item.end.substring(0, 10) : ''}
         autocomplete='one-time-code'
         updateFormValue={updateEndValue}
diff --git a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
index 8936a19a..93fce564 100644
--- a/lib/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
+++ b/lib/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
@@ -129,15 +129,17 @@ export const TextView = ({
   }
 
   return (
-    <Markdown
-      className={'markdown tw:text-map tw:leading-map tw:text-sm'}
-      remarkPlugins={[remarkBreaks]}
-      components={{
-        a: Link,
-      }}
-    >
-      {replacedText}
-    </Markdown>
+    <div translate='no'>
+      <Markdown
+        className={'markdown tw:text-map tw:leading-map tw:text-sm'}
+        remarkPlugins={[remarkBreaks]}
+        components={{
+          a: Link,
+        }}
+      >
+        {replacedText}
+      </Markdown>
+    </div>
   )
 }
 
diff --git a/lib/src/Components/Map/Subcomponents/ItemViewPopup.tsx b/lib/src/Components/Map/Subcomponents/ItemViewPopup.tsx
index 87001bda..aa7065ea 100644
--- a/lib/src/Components/Map/Subcomponents/ItemViewPopup.tsx
+++ b/lib/src/Components/Map/Subcomponents/ItemViewPopup.tsx
@@ -100,7 +100,7 @@ export const ItemViewPopup = forwardRef((props: ItemViewPopupProps, ref: any) =>
           }}
           loading={loading}
         />
-        <div className='tw:overflow-y-auto tw:overflow-x-hidden tw:max-h-64 fade'>
+        <div className='tw:overflow-hidden tw:max-h-64 fade'>
           {props.children ?? <TextView text={props.item.text} itemId={props.item.id} />}
         </div>
         <div className='tw:flex tw:-mb-1 tw:flex-row tw:mr-2 tw:mt-1'>
diff --git a/lib/src/Components/Map/Subcomponents/SelectPosition.tsx b/lib/src/Components/Map/Subcomponents/SelectPosition.tsx
index 6f4eccbe..ceae1c72 100644
--- a/lib/src/Components/Map/Subcomponents/SelectPosition.tsx
+++ b/lib/src/Components/Map/Subcomponents/SelectPosition.tsx
@@ -20,7 +20,7 @@ export const SelectPosition = ({
       </label>
       <div className='tw:alert tw:bg-base-100 tw:text-base-content'>
         <div>
-          {selectNewItemPosition && 'text' in selectNewItemPosition && (
+          {selectNewItemPosition && 'layer' in selectNewItemPosition && (
             <span className='tw:text-lg'>
               Select new position of <b>{selectNewItemPosition.name}</b> on the map!
             </span>
diff --git a/lib/src/Components/Map/UtopiaMap.tsx b/lib/src/Components/Map/UtopiaMap.tsx
index da909e3b..3ca2a6e3 100644
--- a/lib/src/Components/Map/UtopiaMap.tsx
+++ b/lib/src/Components/Map/UtopiaMap.tsx
@@ -56,6 +56,8 @@ function UtopiaMap({
   defaultTheme,
   donationWidget,
   expandLayerControl,
+  tileServerUrl,
+  tileServerAttribution,
 }: {
   /** height of the map (default '500px') */
   height?: string
@@ -85,6 +87,10 @@ function UtopiaMap({
   donationWidget?: boolean
   /** open layer control on map initialisation */
   expandLayerControl?: boolean
+  /** configure a custom tile server */
+  tileServerUrl?: string
+  /** configure a custom tile server attribution */
+  tileServerAttribution?: string
 }) {
   return (
     <ContextWrapper>
@@ -104,6 +110,8 @@ function UtopiaMap({
           showThemeControl={showThemeControl}
           defaultTheme={defaultTheme}
           expandLayerControl={expandLayerControl}
+          tileServerUrl={tileServerUrl}
+          tileServerAttribution={tileServerAttribution}
         >
           {children}
         </UtopiaMapInner>
diff --git a/lib/src/Components/Map/UtopiaMapInner.tsx b/lib/src/Components/Map/UtopiaMapInner.tsx
index ba7f02cc..d197f92a 100644
--- a/lib/src/Components/Map/UtopiaMapInner.tsx
+++ b/lib/src/Components/Map/UtopiaMapInner.tsx
@@ -55,6 +55,8 @@ export function UtopiaMapInner({
   defaultTheme = '',
   donationWidget,
   expandLayerControl,
+  tileServerUrl,
+  tileServerAttribution,
 }: {
   children?: React.ReactNode
   geo?: GeoJsonObject
@@ -65,6 +67,8 @@ export function UtopiaMapInner({
   showThemeControl?: boolean
   defaultTheme?: string
   expandLayerControl?: boolean
+  tileServerUrl?: string
+  tileServerAttribution?: string
 }) {
   const selectNewItemPosition = useSelectPosition()
   const setSelectNewItemPosition = useSetSelectPosition()
@@ -278,8 +282,11 @@ export function UtopiaMapInner({
       </Control>
       <TileLayer
         maxZoom={19}
-        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-        url='https://tile.osmand.net/hd/{z}/{x}/{y}.png'
+        attribution={
+          tileServerAttribution ??
+          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+        }
+        url={tileServerUrl ?? 'https://tile.osmand.net/hd/{z}/{x}/{y}.png'}
       />
       <MarkerClusterGroup
         ref={(r) => setClusterRef(r as any)}
diff --git a/lib/src/Components/Map/hooks/useSelectPosition.tsx b/lib/src/Components/Map/hooks/useSelectPosition.tsx
index 0b7a56ab..6868fb09 100644
--- a/lib/src/Components/Map/hooks/useSelectPosition.tsx
+++ b/lib/src/Components/Map/hooks/useSelectPosition.tsx
@@ -69,7 +69,7 @@ function useSelectPositionManager(): {
           })
         setSelectPosition(null)
       }
-      if ('text' in selectPosition) {
+      if ('layer' in selectPosition) {
         // if selectPosition is an Item
         const position =
           mapClicked?.position.lng &&
@@ -101,9 +101,9 @@ function useSelectPositionManager(): {
         success = true
       } catch (error: unknown) {
         if (error instanceof Error) {
-          toast.update(toastId, { render: error.message, type: 'error' })
+          toast.update(toastId, { render: error.message, type: 'error', autoClose: 5000 })
         } else if (typeof error === 'string') {
-          toast.update(toastId, { render: error, type: 'error' })
+          toast.update(toastId, { render: error, type: 'error', autoClose: 5000 })
         } else {
           throw error
         }
@@ -115,6 +115,7 @@ function useSelectPositionManager(): {
           render: 'Item position updated',
           type: 'success',
           isLoading: false,
+          autoClose: 5000,
         })
         setSelectPosition(null)
         setMarkerClicked(null)
@@ -125,6 +126,8 @@ function useSelectPositionManager(): {
         render: "you don't have permission to add items to " + markerClicked?.name,
         type: 'error',
         isLoading: false,
+        autoClose: 5000,
+        closeButton: true,
       })
     }
   }
@@ -140,16 +143,34 @@ function useSelectPositionManager(): {
       success = true
     } catch (error: unknown) {
       if (error instanceof Error) {
-        toast.update(toastId, { render: error.message, type: 'error', isLoading: false })
+        toast.update(toastId, {
+          render: error.message,
+          type: 'error',
+          isLoading: false,
+          autoClose: 5000,
+          closeButton: true,
+        })
       } else if (typeof error === 'string') {
-        toast.update(toastId, { render: error, type: 'error', isLoading: false })
+        toast.update(toastId, {
+          render: error,
+          type: 'error',
+          isLoading: false,
+          autoClose: 5000,
+          closeButton: true,
+        })
       } else {
         throw error
       }
     }
     if (success) {
       updateItem(updatedItem)
-      toast.update(toastId, { render: 'Item position updated', type: 'success', isLoading: false })
+      toast.update(toastId, {
+        render: 'Item position updated',
+        type: 'success',
+        isLoading: false,
+        autoClose: 5000,
+        closeButton: true,
+      })
     }
   }
 
@@ -168,16 +189,34 @@ function useSelectPositionManager(): {
           success = true
         } catch (error: unknown) {
           if (error instanceof Error) {
-            toast.update(toastId, { render: error.message, type: 'error', isLoading: false })
+            toast.update(toastId, {
+              render: error.message,
+              type: 'error',
+              isLoading: false,
+              autoClose: 5000,
+              closeButton: true,
+            })
           } else if (typeof error === 'string') {
-            toast.update(toastId, { render: error, type: 'error', isLoading: false })
+            toast.update(toastId, {
+              render: error,
+              type: 'error',
+              isLoading: false,
+              autoClose: 5000,
+              closeButton: true,
+            })
           } else {
             throw error
           }
         }
         if (success) {
           updateItem({ ...markerClicked, relations: newRelations })
-          toast.update(toastId, { render: 'Item linked', type: 'success', isLoading: false })
+          toast.update(toastId, {
+            render: 'Item linked',
+            type: 'success',
+            isLoading: false,
+            autoClose: 5000,
+            closeButton: true,
+          })
         }
       }
     }
diff --git a/lib/src/Components/Profile/Subcomponents/ContactInfoForm.tsx b/lib/src/Components/Profile/Subcomponents/ContactInfoForm.tsx
index 693cbd79..62fde8fd 100644
--- a/lib/src/Components/Profile/Subcomponents/ContactInfoForm.tsx
+++ b/lib/src/Components/Profile/Subcomponents/ContactInfoForm.tsx
@@ -1,4 +1,4 @@
-import { TextInput } from '#components/Input'
+import { InputLabel, TextInput } from '#components/Input'
 
 import type { FormState } from '#types/FormState'
 
@@ -12,12 +12,7 @@ export const ContactInfoForm = ({
   return (
     <div className='tw:mt-2 tw:space-y-2'>
       <div>
-        <label
-          htmlFor='email'
-          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
-        >
-          Email-Adresse (Kontakt):
-        </label>
+        <InputLabel label='Email-Adresse (Kontakt)' />
         <TextInput
           placeholder='Email'
           type='email'
@@ -33,12 +28,7 @@ export const ContactInfoForm = ({
       </div>
 
       <div>
-        <label
-          htmlFor='telephone'
-          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
-        >
-          Telefonnummer (Kontakt):
-        </label>
+        <InputLabel label='Telefonnummer (Kontakt)' />
         <TextInput
           placeholder='Telefonnummer'
           type='tel'
diff --git a/lib/src/Components/Profile/Subcomponents/CrowdfundingForm.tsx b/lib/src/Components/Profile/Subcomponents/CrowdfundingForm.tsx
index 2fca373c..ac3ee144 100644
--- a/lib/src/Components/Profile/Subcomponents/CrowdfundingForm.tsx
+++ b/lib/src/Components/Profile/Subcomponents/CrowdfundingForm.tsx
@@ -1,4 +1,4 @@
-import { TextInput } from '#components/Input'
+import { TextInput, InputLabel } from '#components/Input'
 
 import type { FormState } from '#types/FormState'
 
@@ -12,12 +12,7 @@ export const CrowdfundingForm = ({
   return (
     <div className='tw:mt-4 tw:space-y-4'>
       <div>
-        <label
-          htmlFor='OpenCollectiveSlug'
-          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
-        >
-          Open Collective Slug:
-        </label>
+        <InputLabel label='Open Collective Slug' />
         <TextInput
           placeholder='Open Collective Slug'
           type='text'
diff --git a/lib/src/Components/Profile/Subcomponents/GalleryForm.tsx b/lib/src/Components/Profile/Subcomponents/GalleryForm.tsx
index e252d790..a199bae3 100644
--- a/lib/src/Components/Profile/Subcomponents/GalleryForm.tsx
+++ b/lib/src/Components/Profile/Subcomponents/GalleryForm.tsx
@@ -5,6 +5,7 @@ import { useDropzone } from 'react-dropzone'
 import { BiSolidImage } from 'react-icons/bi'
 
 import { useAppState } from '#components/AppShell/hooks/useAppState'
+import { InputLabel } from '#components/Input/InputLabel'
 import DialogModal from '#components/Templates/DialogModal'
 import { getImageDimensions } from '#utils/getImageDimensions'
 
@@ -13,6 +14,7 @@ import type { FormState } from '#types/FormState'
 interface Props {
   state: FormState
   setState: React.Dispatch<React.SetStateAction<FormState>>
+  hideInputLabel?: boolean
 }
 
 const compressionOptions = {
@@ -21,7 +23,7 @@ const compressionOptions = {
   useWebWorker: true,
 }
 
-export const GalleryForm = ({ state, setState }: Props) => {
+export const GalleryForm = ({ state, setState, hideInputLabel = false }: Props) => {
   const appState = useAppState()
 
   const [imageSelectedToDelete, setImageSelectedToDelete] = useState<number | null>(null)
@@ -76,7 +78,9 @@ export const GalleryForm = ({ state, setState }: Props) => {
 
   const images = state.gallery
     .map((image) => ({
-      src: appState.assetsApi.url + `${image.directus_files_id.id}.jpg`,
+      src:
+        typeof image.directus_files_id !== 'string' &&
+        appState.assetsApi.url + `${image.directus_files_id.id}.jpg`,
       state: 'uploaded',
     }))
     .concat(
@@ -94,12 +98,13 @@ export const GalleryForm = ({ state, setState }: Props) => {
   }
 
   return (
-    <>
-      <div className='tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4 tw:my-4'>
+    <div className='tw:mt-3'>
+      {!hideInputLabel && <InputLabel label='Media' />}
+      <div className='tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4'>
         {images.map((image, index) => (
           <div key={index} className='tw:relative'>
             <img
-              src={image.src}
+              src={image.src || undefined}
               alt={`Gallery image ${index + 1}`}
               className={`tw:w-full tw:h-full tw:object-cover tw:rounded-lg ${
                 image.state === 'uploading' ? 'tw:opacity-50' : ''
@@ -159,6 +164,6 @@ export const GalleryForm = ({ state, setState }: Props) => {
           </div>
         </div>
       </DialogModal>
-    </>
+    </div>
   )
 }
diff --git a/lib/src/Components/Profile/Subcomponents/GalleryView.tsx b/lib/src/Components/Profile/Subcomponents/GalleryView.tsx
index 13549cb0..18c0d4a3 100644
--- a/lib/src/Components/Profile/Subcomponents/GalleryView.tsx
+++ b/lib/src/Components/Profile/Subcomponents/GalleryView.tsx
@@ -23,12 +23,19 @@ export const GalleryView = ({ item }: { item: Item }) => {
   const [index, setIndex] = useState(-1)
   const appState = useAppState()
   const images =
-    item.gallery?.map(({ directus_files_id: { id, type, width, height } }, index) => ({
-      src: `${appState.assetsApi.url}${id}${getExtension(type)}`,
-      width,
-      height,
-      index,
-    })) ?? []
+    item.gallery?.flatMap((g, index) => {
+      const file = g.directus_files_id
+      if (typeof file === 'string') return []
+      const { id, type, width, height } = file
+      return [
+        {
+          src: `${appState.assetsApi.url}${id}${getExtension(type)}`,
+          width,
+          height,
+          index,
+        },
+      ]
+    }) ?? []
 
   if (images.length > 0)
     return (
diff --git a/lib/src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx b/lib/src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx
index fa37db9a..4493035c 100644
--- a/lib/src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx
+++ b/lib/src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
 import { useEffect } from 'react'
 
+import { InputLabel } from '#components/Input'
 import ComboBoxInput from '#components/Input/ComboBoxInput'
 
 import type { FormState } from '#types/FormState'
@@ -51,12 +52,7 @@ export const GroupSubheaderForm = ({
   return (
     <div className='tw:grid tw:grid-cols-1 tw:@sm:grid-cols-2 tw:gap-2'>
       <div>
-        <label
-          htmlFor='status'
-          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
-        >
-          Gruppenstatus:
-        </label>
+        <InputLabel label='Gruppenstatus' />
         <ComboBoxInput
           id='status'
           options={groupStates || []}
@@ -70,12 +66,7 @@ export const GroupSubheaderForm = ({
         />
       </div>
       <div>
-        <label
-          htmlFor='groupType'
-          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
-        >
-          Gruppenart:
-        </label>
+        <InputLabel label='Gruppenart' />
         <ComboBoxInput
           id='groupType'
           options={groupTypes?.map((gt) => gt.groupTypes_id.name) || []}
diff --git a/lib/src/Components/Profile/Subcomponents/ProfileTextForm.tsx b/lib/src/Components/Profile/Subcomponents/ProfileTextForm.tsx
index f98b5c39..4dddfdce 100644
--- a/lib/src/Components/Profile/Subcomponents/ProfileTextForm.tsx
+++ b/lib/src/Components/Profile/Subcomponents/ProfileTextForm.tsx
@@ -4,7 +4,7 @@
 
 import { useEffect, useState } from 'react'
 
-import { RichTextEditor } from '#components/Input/RichTextEditor'
+import { InputLabel, RichTextEditor } from '#components/Input'
 
 import { MarkdownHint } from './MarkdownHint'
 
@@ -13,11 +13,9 @@ import type { FormState } from '#types/FormState'
 export const ProfileTextForm = ({
   state,
   setState,
-  // Is this really used?
   dataField,
   heading,
   size,
-  hideInputLabel,
 }: {
   state: FormState
   setState: React.Dispatch<React.SetStateAction<FormState>>
@@ -36,15 +34,10 @@ export const ProfileTextForm = ({
 
   return (
     <div
-      className={`tw:max-h-124 tw:md:max-h-full tw:flex tw:flex-col tw:mt-2 ${size === 'full' ? 'tw:flex-1 tw:min-h-42' : 'tw:h-28 tw:flex-none'}`}
+      className={`tw:max-h-124 tw:md:max-h-full tw:flex tw:flex-col tw:mt-3 ${size === 'full' ? 'tw:flex-1 tw:min-h-42' : 'tw:h-30 tw:flex-none'}`}
     >
       <div className='tw:flex tw:justify-between tw:items-center'>
-        <label
-          htmlFor='nextAppointment'
-          className='tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1'
-        >
-          {heading || 'Text'}:
-        </label>
+        <InputLabel label={heading || 'Text'} />
         <MarkdownHint />
       </div>
       <RichTextEditor
@@ -58,7 +51,6 @@ export const ProfileTextForm = ({
           }))
         }
         showMenu={size === 'full'}
-        labelStyle={hideInputLabel ? 'tw:hidden' : ''}
         containerStyle={size === 'full' ? 'tw:flex-1' : 'tw:h-24 tw:flex-none'}
       />
     </div>
diff --git a/lib/src/Components/Profile/Subcomponents/__snapshots__/GalleryForm.spec.tsx.snap b/lib/src/Components/Profile/Subcomponents/__snapshots__/GalleryForm.spec.tsx.snap
index 0eb344e5..3dfc5585 100644
--- a/lib/src/Components/Profile/Subcomponents/__snapshots__/GalleryForm.spec.tsx.snap
+++ b/lib/src/Components/Profile/Subcomponents/__snapshots__/GalleryForm.spec.tsx.snap
@@ -3,99 +3,113 @@
 exports[`GalleryForm > with previous images > renders 1`] = `
 <div>
   <div
-    class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4 tw:my-4"
+    class="tw:mt-3"
   >
-    <div
-      class="tw:relative"
+    <label
+      class="tw:label tw:pb-1"
     >
-      <img
-        alt="Gallery image 1"
-        class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg "
-        src="undefined1.jpg"
-      />
-      <button
-        class="tw:m-2 tw:bg-red-500 tw:text-white tw:p-2 tw:rounded-full tw:absolute tw:top-0 tw:right-0 tw:hover:bg-red-600 tw:cursor-pointer"
-        type="button"
+      <span
+        class="tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1"
       >
-        <svg
-          aria-hidden="true"
-          class="tw:h-5 tw:w-5"
-          data-slot="icon"
-          data-testid="trash"
-          fill="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            clip-rule="evenodd"
-            d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </button>
-    </div>
+        Media
+        :
+      </span>
+    </label>
     <div
-      class="tw:relative"
+      class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4"
     >
-      <img
-        alt="Gallery image 2"
-        class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg "
-        src="undefined2.jpg"
-      />
-      <button
-        class="tw:m-2 tw:bg-red-500 tw:text-white tw:p-2 tw:rounded-full tw:absolute tw:top-0 tw:right-0 tw:hover:bg-red-600 tw:cursor-pointer"
-        type="button"
+      <div
+        class="tw:relative"
       >
-        <svg
-          aria-hidden="true"
-          class="tw:h-5 tw:w-5"
-          data-slot="icon"
-          data-testid="trash"
-          fill="currentColor"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
+        <img
+          alt="Gallery image 1"
+          class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg "
+          src="undefined1.jpg"
+        />
+        <button
+          class="tw:m-2 tw:bg-red-500 tw:text-white tw:p-2 tw:rounded-full tw:absolute tw:top-0 tw:right-0 tw:hover:bg-red-600 tw:cursor-pointer"
+          type="button"
         >
-          <path
-            clip-rule="evenodd"
-            d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
-            fill-rule="evenodd"
-          />
-        </svg>
-      </button>
-    </div>
-    <div
-      class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
-      role="presentation"
-      tabindex="0"
-    >
-      <input
-        accept="image/jpeg,image/png"
-        data-testid="gallery-upload-input"
-        multiple=""
-        style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
-        tabindex="-1"
-        type="file"
-      />
-      <div>
-        <svg
-          class="tw:h-16 tw:w-16 tw:m-auto tw:mb-2"
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          stroke-width="0"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
+          <svg
+            aria-hidden="true"
+            class="tw:h-5 tw:w-5"
+            data-slot="icon"
+            data-testid="trash"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="tw:relative"
+      >
+        <img
+          alt="Gallery image 2"
+          class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg "
+          src="undefined2.jpg"
+        />
+        <button
+          class="tw:m-2 tw:bg-red-500 tw:text-white tw:p-2 tw:rounded-full tw:absolute tw:top-0 tw:right-0 tw:hover:bg-red-600 tw:cursor-pointer"
+          type="button"
         >
-          <path
-            d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-13.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5.5 10h-7l4-5 1.5 2 3-4 5.5 7h-7z"
-          />
-        </svg>
-        <span
-          class="tw:text-center"
-        >
-          Upload Image
-        </span>
+          <svg
+            aria-hidden="true"
+            class="tw:h-5 tw:w-5"
+            data-slot="icon"
+            data-testid="trash"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              clip-rule="evenodd"
+              d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
+              fill-rule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
+        role="presentation"
+        tabindex="0"
+      >
+        <input
+          accept="image/jpeg,image/png"
+          data-testid="gallery-upload-input"
+          multiple=""
+          style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+          tabindex="-1"
+          type="file"
+        />
+        <div>
+          <svg
+            class="tw:h-16 tw:w-16 tw:m-auto tw:mb-2"
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-13.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5.5 10h-7l4-5 1.5 2 3-4 5.5 7h-7z"
+            />
+          </svg>
+          <span
+            class="tw:text-center"
+          >
+            Upload Image
+          </span>
+        </div>
       </div>
     </div>
   </div>
@@ -105,77 +119,91 @@ exports[`GalleryForm > with previous images > renders 1`] = `
 exports[`GalleryForm > with uploading images > renders 1`] = `
 <div>
   <div
-    class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4 tw:my-4"
+    class="tw:mt-3"
   >
-    <div
-      class="tw:relative"
+    <label
+      class="tw:label tw:pb-1"
     >
-      <img
-        alt="Gallery image 1"
-        class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg tw:opacity-50"
-        src="blob-url-placeholder"
-      />
       <span
-        class="tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto"
-      />
-    </div>
+        class="tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1"
+      >
+        Media
+        :
+      </span>
+    </label>
     <div
-      class="tw:relative"
+      class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4"
     >
-      <img
-        alt="Gallery image 2"
-        class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg tw:opacity-50"
-        src="blob-url-placeholder"
-      />
-      <span
-        class="tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto"
-      />
-    </div>
-    <div
-      class="tw:relative"
-    >
-      <img
-        alt="Gallery image 3"
-        class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg tw:opacity-50"
-        src="blob-url-placeholder"
-      />
-      <span
-        class="tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto"
-      />
-    </div>
-    <div
-      class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
-      role="presentation"
-      tabindex="0"
-    >
-      <input
-        accept="image/jpeg,image/png"
-        data-testid="gallery-upload-input"
-        multiple=""
-        style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
-        tabindex="-1"
-        type="file"
-      />
-      <div>
-        <svg
-          class="tw:h-16 tw:w-16 tw:m-auto tw:mb-2"
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          stroke-width="0"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-13.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5.5 10h-7l4-5 1.5 2 3-4 5.5 7h-7z"
-          />
-        </svg>
+      <div
+        class="tw:relative"
+      >
+        <img
+          alt="Gallery image 1"
+          class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg tw:opacity-50"
+          src="blob-url-placeholder"
+        />
         <span
-          class="tw:text-center"
-        >
-          Upload Image
-        </span>
+          class="tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto"
+        />
+      </div>
+      <div
+        class="tw:relative"
+      >
+        <img
+          alt="Gallery image 2"
+          class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg tw:opacity-50"
+          src="blob-url-placeholder"
+        />
+        <span
+          class="tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto"
+        />
+      </div>
+      <div
+        class="tw:relative"
+      >
+        <img
+          alt="Gallery image 3"
+          class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg tw:opacity-50"
+          src="blob-url-placeholder"
+        />
+        <span
+          class="tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto"
+        />
+      </div>
+      <div
+        class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
+        role="presentation"
+        tabindex="0"
+      >
+        <input
+          accept="image/jpeg,image/png"
+          data-testid="gallery-upload-input"
+          multiple=""
+          style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+          tabindex="-1"
+          type="file"
+        />
+        <div>
+          <svg
+            class="tw:h-16 tw:w-16 tw:m-auto tw:mb-2"
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-13.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5.5 10h-7l4-5 1.5 2 3-4 5.5 7h-7z"
+            />
+          </svg>
+          <span
+            class="tw:text-center"
+          >
+            Upload Image
+          </span>
+        </div>
       </div>
     </div>
   </div>
@@ -185,41 +213,55 @@ exports[`GalleryForm > with uploading images > renders 1`] = `
 exports[`GalleryForm > without previous images > renders 1`] = `
 <div>
   <div
-    class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4 tw:my-4"
+    class="tw:mt-3"
   >
-    <div
-      class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
-      role="presentation"
-      tabindex="0"
+    <label
+      class="tw:label tw:pb-1"
     >
-      <input
-        accept="image/jpeg,image/png"
-        data-testid="gallery-upload-input"
-        multiple=""
-        style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
-        tabindex="-1"
-        type="file"
-      />
-      <div>
-        <svg
-          class="tw:h-16 tw:w-16 tw:m-auto tw:mb-2"
-          fill="currentColor"
-          height="1em"
-          stroke="currentColor"
-          stroke-width="0"
-          viewBox="0 0 24 24"
-          width="1em"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-13.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5.5 10h-7l4-5 1.5 2 3-4 5.5 7h-7z"
-          />
-        </svg>
-        <span
-          class="tw:text-center"
-        >
-          Upload Image
-        </span>
+      <span
+        class="tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1"
+      >
+        Media
+        :
+      </span>
+    </label>
+    <div
+      class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4"
+    >
+      <div
+        class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
+        role="presentation"
+        tabindex="0"
+      >
+        <input
+          accept="image/jpeg,image/png"
+          data-testid="gallery-upload-input"
+          multiple=""
+          style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+          tabindex="-1"
+          type="file"
+        />
+        <div>
+          <svg
+            class="tw:h-16 tw:w-16 tw:m-auto tw:mb-2"
+            fill="currentColor"
+            height="1em"
+            stroke="currentColor"
+            stroke-width="0"
+            viewBox="0 0 24 24"
+            width="1em"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-13.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5.5 10h-7l4-5 1.5 2 3-4 5.5 7h-7z"
+            />
+          </svg>
+          <span
+            class="tw:text-center"
+          >
+            Upload Image
+          </span>
+        </div>
       </div>
     </div>
   </div>
diff --git a/lib/src/Components/Profile/Templates/TabsForm.tsx b/lib/src/Components/Profile/Templates/TabsForm.tsx
index 272db754..be28d2bc 100644
--- a/lib/src/Components/Profile/Templates/TabsForm.tsx
+++ b/lib/src/Components/Profile/Templates/TabsForm.tsx
@@ -44,7 +44,6 @@ export const TabsForm = ({
                   <PopupStartEndInput
                     item={item}
                     showLabels={true}
-                    labelStyle={'tw:text-base-content/50'}
                     updateEndValue={(e) =>
                       setState((prevState) => ({
                         ...prevState,
@@ -62,7 +61,6 @@ export const TabsForm = ({
 
                 <RichTextEditor
                   labelTitle='About'
-                  labelStyle={'tw:text-base-content/50'}
                   placeholder='about ...'
                   defaultValue={item?.text ? item.text : ''}
                   updateFormValue={(v) =>
diff --git a/lib/src/Components/Profile/index.tsx b/lib/src/Components/Profile/index.tsx
index 595a9c7f..33bef075 100644
--- a/lib/src/Components/Profile/index.tsx
+++ b/lib/src/Components/Profile/index.tsx
@@ -1,4 +1,3 @@
 export { UserSettings } from './UserSettings'
-// export { PlusButton } from './Subcomponents/PlusButton'
 export { ProfileView } from './ProfileView'
 export { ProfileForm } from './ProfileForm'
diff --git a/lib/src/Components/Profile/itemFunctions.ts b/lib/src/Components/Profile/itemFunctions.ts
index 7f3d2dd3..51045c04 100644
--- a/lib/src/Components/Profile/itemFunctions.ts
+++ b/lib/src/Components/Profile/itemFunctions.ts
@@ -200,7 +200,7 @@ export const onUpdateItem = async (
     ...(state.needs.length > 0 && { needs: needsUpdates }),
     ...(state.openCollectiveSlug && { openCollectiveSlug: state.openCollectiveSlug }),
     gallery: state.gallery.map((i) => ({
-      directus_files_id: i.directus_files_id.id,
+      directus_files_id: typeof i.directus_files_id !== 'string' && i.directus_files_id.id,
     })),
   }
 
diff --git a/lib/src/Components/Templates/OverlayItemsIndexPage.tsx b/lib/src/Components/Templates/OverlayItemsIndexPage.tsx
index 19d2c70b..094ec95f 100644
--- a/lib/src/Components/Templates/OverlayItemsIndexPage.tsx
+++ b/lib/src/Components/Templates/OverlayItemsIndexPage.tsx
@@ -32,7 +32,6 @@ import type { Item } from '#types/Item'
 export const OverlayItemsIndexPage = ({
   url,
   layerName,
-  parameterField,
 }: {
   layerName: string
   url: string
@@ -40,8 +39,6 @@ export const OverlayItemsIndexPage = ({
 }) => {
   const [loading, setLoading] = useState<boolean>(false)
   const [addItemPopupOpen, setAddItemPopupOpen] = useState<boolean>(false)
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const parameterFieldDummy = parameterField
 
   const tabRef = useRef<HTMLFormElement>(null)
 
diff --git a/lib/src/assets/css/leaflet.css b/lib/src/assets/css/leaflet.css
index d8fab67f..af2364c1 100644
--- a/lib/src/assets/css/leaflet.css
+++ b/lib/src/assets/css/leaflet.css
@@ -1,6 +1,29 @@
- .leaflet-control-attribution {
-     display: none;
+ .leaflet-control-attribution{
+    color: #000 !important;
+    background-color: white/50 !important;
+    border-radius: 4px;
+    padding: 0 4px;
+    z-index: 400 !important;
+    font-size: 10px;
+    opacity: 0.5;
+}
+
+ .leaflet-control-attribution a{
+    color: #000 !important;
  }
+ 
+ .leaflet-attribution-flag {
+display: none !important;
+ }
+
+ .leaflet-control-attribution a:not([href*="openstreetmap"]) {
+    display: none !important;
+  }
+  
+  /* 2) Entfernt den Trenner “|” (liegt im span[aria-hidden]) */
+  .leaflet-control-attribution span[aria-hidden="true"] {
+    display: none !important;
+  }
 
  .leaflet-control-locate {
      display: none;
diff --git a/lib/src/index.tsx b/lib/src/index.tsx
index 19f8846f..f3239c11 100644
--- a/lib/src/index.tsx
+++ b/lib/src/index.tsx
@@ -9,6 +9,7 @@ export * from './Components/Templates'
 export * from './Components/Input'
 export * from './Components/Item'
 export * from './Components/Onboarding'
+export * from './Components/Profile'
 
 declare global {
   interface Window {
diff --git a/lib/src/types/Item.d.ts b/lib/src/types/Item.d.ts
index bcf5026e..12d4b8e2 100644
--- a/lib/src/types/Item.d.ts
+++ b/lib/src/types/Item.d.ts
@@ -8,12 +8,14 @@ import type { Point } from 'geojson'
 type TagIds = { tags_id: string }[]
 
 interface GalleryItem {
-  directus_files_id: {
-    id: string
-    width: number
-    height: number
-    type: string
-  }
+  directus_files_id:
+    | {
+        id: string
+        width: number
+        height: number
+        type: string
+      }
+    | string
 }
 
 interface ItemSecret {
diff --git a/lib/src/types/UtopiaMapProps.d.ts b/lib/src/types/UtopiaMapProps.d.ts
index 3d85374e..b5aec550 100644
--- a/lib/src/types/UtopiaMapProps.d.ts
+++ b/lib/src/types/UtopiaMapProps.d.ts
@@ -18,4 +18,6 @@ export interface UtopiaMapProps {
   donationWidget?: boolean
   defaultTheme?: string
   expandLayerControl?: boolean
+  tileServerUrl?: string
+  tileServerAttribution?: string
 }
diff --git a/lib/tsconfig.json b/lib/tsconfig.json
index 50c23024..1d591088 100644
--- a/lib/tsconfig.json
+++ b/lib/tsconfig.json
@@ -1,24 +1,19 @@
 {
+    "extends": "../tsconfig.base.json",
     "compilerOptions": {
       "outDir": "dist",
       "declaration": true,
       "declarationDir": "dist/types", // 🔹 Muss innerhalb von dist/ liegen
       "emitDeclarationOnly": true, // Nur `.d.ts` generieren, kein JavaScript
-      "module": "esnext",
-      "target": "ESNext",
-      "lib": ["es6", "dom","es2015", "es2016", "es2017", "es2020"],
       "sourceMap": false,
       "allowJs": false,
-      "jsx": "react-jsx",
-      "moduleResolution": "node",
       "forceConsistentCasingInFileNames": true,
       "noImplicitReturns": true,
       "noImplicitThis": true,
       "strictNullChecks": true,
-      "noUnusedLocals": false,
+      "noUnusedLocals": true,
       "noUnusedParameters": true,
       "allowSyntheticDefaultImports": true,
-      "skipLibCheck": true,
       "paths": {
         "#assets/*": ["./src/assets/*"],
         "#components/*": ["./src/Components/*"],
@@ -29,7 +24,7 @@
       }
     },
   "include": ["src", "vite.config.ts", "setupTest.ts", "cypress.config.ts", "cypress/support/commands.ts", "cypress/support/component.ts"],
-  "exclude": ["node_modules", "dist", "example", "rollup.config.mjss"],
+  "exclude": ["node_modules", "dist", "example"],
   "typeRoots": [
     "./src/types",
     "./node_modules/@types/"
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..b386c5b8
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,10 @@
+{
+  "name": "utopia-map",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "utopia-map"
+    }
+  }
+}
diff --git a/tsconfig.base.json b/tsconfig.base.json
new file mode 100644
index 00000000..a2acbf22
--- /dev/null
+++ b/tsconfig.base.json
@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+      "target": "ESNext",
+      "module": "ESNext",
+      "lib": ["DOM", "DOM.Iterable", "ESNext"],
+      "moduleResolution": "Node",
+      "jsx": "react-jsx",
+      "esModuleInterop": true,
+      "skipLibCheck": true,
+      "strictNullChecks": true,
+    }
+  }
\ No newline at end of file