diff --git a/package-lock.json b/package-lock.json
index 58adfdeb..201f414d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,6 +33,7 @@
         "@rollup/plugin-alias": "^5.1.1",
         "@rollup/plugin-node-resolve": "^16.0.0",
         "@rollup/plugin-typescript": "^12.1.2",
+        "@tailwindcss/postcss": "^4.0.14",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.2.0",
         "@types/geojson": "^7946.0.14",
@@ -44,9 +45,8 @@
         "@typescript-eslint/parser": "^5.62.0",
         "@vitejs/plugin-react": "^4.3.4",
         "@vitest/coverage-v8": "^3.0.5",
-        "autoprefixer": "^10.4.14",
         "cypress": "^14.0.3",
-        "daisyui": "^4.6.1",
+        "daisyui": "^5.0.6",
         "eslint": "^8.24.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-config-standard": "^17.1.0",
@@ -71,7 +71,7 @@
         "rollup-plugin-dts": "^6.1.1",
         "rollup-plugin-postcss": "^4.0.2",
         "rollup-plugin-svg": "^2.0.0",
-        "tailwindcss": "^3.3.1",
+        "tailwindcss": "^4.0.14",
         "typedoc": "^0.27.6",
         "typedoc-plugin-coverage": "^3.4.1",
         "typedoc-plugin-missing-exports": "^3.1.0",
@@ -302,27 +302,27 @@
       }
     },
     "node_modules/@babel/helpers": {
-      "version": "7.26.9",
-      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.26.9.tgz",
-      "integrity": "sha512-Mz/4+y8udxBKdmzt/UjPACs4G3j5SshJJEFFKxlCGPydG4JAHXxjWjAwjd09tf6oINvl1VfMJo+nB7H2YKQ0dA==",
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.27.0.tgz",
+      "integrity": "sha512-U5eyP/CTFPuNE3qk+WZMxFkp/4zUzdceQlfzf7DdGdhp+Fezd7HD+i8Y24ZuTMKX3wQBld449jijbGq6OdGNQg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/template": "^7.26.9",
-        "@babel/types": "^7.26.9"
+        "@babel/template": "^7.27.0",
+        "@babel/types": "^7.27.0"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.26.9",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.9.tgz",
-      "integrity": "sha512-81NWa1njQblgZbQHxWHpxxCzNsa3ZwvFqpUg7P+NNUU6f3UU2jBEg4OlF/J6rl8+PQGh1q6/zWScd001YwcA5A==",
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.27.0.tgz",
+      "integrity": "sha512-iaepho73/2Pz7w2eMS0Q5f83+0RKI7i4xmiYeBmDzfRVbQtTOG7Ts0S4HzJVsTMGI9keU8rNfuZr8DKfSt7Yyg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.26.9"
+        "@babel/types": "^7.27.0"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -364,9 +364,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.26.9",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.9.tgz",
-      "integrity": "sha512-aA63XwOkcl4xxQa3HjPMqOP6LiK0ZDv3mUPYEFXkpHbaFjtGggE1A61FjFzJnB+p7/oy2gA8E+rcBNl/zC1tMg==",
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.0.tgz",
+      "integrity": "sha512-VtPOkrdPHZsKc/clNqyi9WUA8TINkZ4cGk63UUE3u4pmB2k+ZMQRDuIOagv8UVd6j7k0T3+RRIb7beKTebNbcw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -377,15 +377,15 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.26.9",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.26.9.tgz",
-      "integrity": "sha512-qyRplbeIpNZhmzOysF/wFMuP9sctmh2cFzRAZOn1YapxBsE1i9bJIY586R/WBLfLcmcBlM8ROBiQURnnNy+zfA==",
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.0.tgz",
+      "integrity": "sha512-2ncevenBqXI6qRMukPlXwHKHchC7RyMuu4xv5JBXRfOGVcTy1mXCD12qrp7Jsoxll1EV3+9sE4GugBVRjT2jFA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.26.2",
-        "@babel/parser": "^7.26.9",
-        "@babel/types": "^7.26.9"
+        "@babel/parser": "^7.27.0",
+        "@babel/types": "^7.27.0"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -421,9 +421,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.26.9",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.9.tgz",
-      "integrity": "sha512-Y3IR1cRnOxOCDvMmNiym7XpXQ93iGDDPHx+Zj+NM+rg0fBaShfQLkg+hKPaZCEvg5N/LeCo4+Rj/i3FuJsIQaw==",
+      "version": "7.27.0",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.27.0.tgz",
+      "integrity": "sha512-H45s8fVLYjbhFH62dIJ3WtmJ6RSPt/3DRO0ZcT2SUiYiQyz3BLVb9ADEnLl91m74aQPS3AzzeajZHYOalWe3bg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1400,9 +1400,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.34.8.tgz",
-      "integrity": "sha512-q217OSE8DTp8AFHuNHXo0Y86e1wtlfVrXiAlwkIvGRQv9zbc6mE3sjIVfwI8sYUyNxwOg0j/Vm1RKM04JcWLJw==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.40.0.tgz",
+      "integrity": "sha512-+Fbls/diZ0RDerhE8kyC6hjADCXA1K4yVNlH0EYfd2XjyH0UGgzaQ8MlT0pCXAThfxv3QUAczHaL+qSv1E4/Cg==",
       "cpu": [
         "arm"
       ],
@@ -1414,9 +1414,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.34.8.tgz",
-      "integrity": "sha512-Gigjz7mNWaOL9wCggvoK3jEIUUbGul656opstjaUSGC3eT0BM7PofdAJaBfPFWWkXNVAXbaQtC99OCg4sJv70Q==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.40.0.tgz",
+      "integrity": "sha512-PPA6aEEsTPRz+/4xxAmaoWDqh67N7wFbgFUJGMnanCFs0TV99M0M8QhhaSCks+n6EbQoFvLQgYOGXxlMGQe/6w==",
       "cpu": [
         "arm64"
       ],
@@ -1428,9 +1428,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.34.8.tgz",
-      "integrity": "sha512-02rVdZ5tgdUNRxIUrFdcMBZQoaPMrxtwSb+/hOfBdqkatYHR3lZ2A2EGyHq2sGOd0Owk80oV3snlDASC24He3Q==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.40.0.tgz",
+      "integrity": "sha512-GwYOcOakYHdfnjjKwqpTGgn5a6cUX7+Ra2HeNj/GdXvO2VJOOXCiYYlRFU4CubFM67EhbmzLOmACKEfvp3J1kQ==",
       "cpu": [
         "arm64"
       ],
@@ -1442,9 +1442,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.34.8.tgz",
-      "integrity": "sha512-qIP/elwR/tq/dYRx3lgwK31jkZvMiD6qUtOycLhTzCvrjbZ3LjQnEM9rNhSGpbLXVJYQ3rq39A6Re0h9tU2ynw==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.40.0.tgz",
+      "integrity": "sha512-CoLEGJ+2eheqD9KBSxmma6ld01czS52Iw0e2qMZNpPDlf7Z9mj8xmMemxEucinev4LgHalDPczMyxzbq+Q+EtA==",
       "cpu": [
         "x64"
       ],
@@ -1456,9 +1456,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.34.8.tgz",
-      "integrity": "sha512-IQNVXL9iY6NniYbTaOKdrlVP3XIqazBgJOVkddzJlqnCpRi/yAeSOa8PLcECFSQochzqApIOE1GHNu3pCz+BDA==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.40.0.tgz",
+      "integrity": "sha512-r7yGiS4HN/kibvESzmrOB/PxKMhPTlz+FcGvoUIKYoTyGd5toHp48g1uZy1o1xQvybwwpqpe010JrcGG2s5nkg==",
       "cpu": [
         "arm64"
       ],
@@ -1470,9 +1470,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.34.8.tgz",
-      "integrity": "sha512-TYXcHghgnCqYFiE3FT5QwXtOZqDj5GmaFNTNt3jNC+vh22dc/ukG2cG+pi75QO4kACohZzidsq7yKTKwq/Jq7Q==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.40.0.tgz",
+      "integrity": "sha512-mVDxzlf0oLzV3oZOr0SMJ0lSDd3xC4CmnWJ8Val8isp9jRGl5Dq//LLDSPFrasS7pSm6m5xAcKaw3sHXhBjoRw==",
       "cpu": [
         "x64"
       ],
@@ -1484,9 +1484,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.34.8.tgz",
-      "integrity": "sha512-A4iphFGNkWRd+5m3VIGuqHnG3MVnqKe7Al57u9mwgbyZ2/xF9Jio72MaY7xxh+Y87VAHmGQr73qoKL9HPbXj1g==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.40.0.tgz",
+      "integrity": "sha512-y/qUMOpJxBMy8xCXD++jeu8t7kzjlOCkoxxajL58G62PJGBZVl/Gwpm7JK9+YvlB701rcQTzjUZ1JgUoPTnoQA==",
       "cpu": [
         "arm"
       ],
@@ -1498,9 +1498,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.34.8.tgz",
-      "integrity": "sha512-S0lqKLfTm5u+QTxlFiAnb2J/2dgQqRy/XvziPtDd1rKZFXHTyYLoVL58M/XFwDI01AQCDIevGLbQrMAtdyanpA==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.40.0.tgz",
+      "integrity": "sha512-GoCsPibtVdJFPv/BOIvBKO/XmwZLwaNWdyD8TKlXuqp0veo2sHE+A/vpMQ5iSArRUz/uaoj4h5S6Pn0+PdhRjg==",
       "cpu": [
         "arm"
       ],
@@ -1512,9 +1512,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.34.8.tgz",
-      "integrity": "sha512-jpz9YOuPiSkL4G4pqKrus0pn9aYwpImGkosRKwNi+sJSkz+WU3anZe6hi73StLOQdfXYXC7hUfsQlTnjMd3s1A==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.40.0.tgz",
+      "integrity": "sha512-L5ZLphTjjAD9leJzSLI7rr8fNqJMlGDKlazW2tX4IUF9P7R5TMQPElpH82Q7eNIDQnQlAyiNVfRPfP2vM5Avvg==",
       "cpu": [
         "arm64"
       ],
@@ -1526,9 +1526,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.34.8.tgz",
-      "integrity": "sha512-KdSfaROOUJXgTVxJNAZ3KwkRc5nggDk+06P6lgi1HLv1hskgvxHUKZ4xtwHkVYJ1Rep4GNo+uEfycCRRxht7+Q==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.40.0.tgz",
+      "integrity": "sha512-ATZvCRGCDtv1Y4gpDIXsS+wfFeFuLwVxyUBSLawjgXK2tRE6fnsQEkE4csQQYWlBlsFztRzCnBvWVfcae/1qxQ==",
       "cpu": [
         "arm64"
       ],
@@ -1540,9 +1540,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.34.8.tgz",
-      "integrity": "sha512-NyF4gcxwkMFRjgXBM6g2lkT58OWztZvw5KkV2K0qqSnUEqCVcqdh2jN4gQrTn/YUpAcNKyFHfoOZEer9nwo6uQ==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.40.0.tgz",
+      "integrity": "sha512-wG9e2XtIhd++QugU5MD9i7OnpaVb08ji3P1y/hNbxrQ3sYEelKJOq1UJ5dXczeo6Hj2rfDEL5GdtkMSVLa/AOg==",
       "cpu": [
         "loong64"
       ],
@@ -1554,9 +1554,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.34.8.tgz",
-      "integrity": "sha512-LMJc999GkhGvktHU85zNTDImZVUCJ1z/MbAJTnviiWmmjyckP5aQsHtcujMjpNdMZPT2rQEDBlJfubhs3jsMfw==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.40.0.tgz",
+      "integrity": "sha512-vgXfWmj0f3jAUvC7TZSU/m/cOE558ILWDzS7jBhiCAFpY2WEBn5jqgbqvmzlMjtp8KlLcBlXVD2mkTSEQE6Ixw==",
       "cpu": [
         "ppc64"
       ],
@@ -1568,9 +1568,23 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.34.8.tgz",
-      "integrity": "sha512-xAQCAHPj8nJq1PI3z8CIZzXuXCstquz7cIOL73HHdXiRcKk8Ywwqtx2wrIy23EcTn4aZ2fLJNBB8d0tQENPCmw==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.40.0.tgz",
+      "integrity": "sha512-uJkYTugqtPZBS3Z136arevt/FsKTF/J9dEMTX/cwR7lsAW4bShzI2R0pJVw+hcBTWF4dxVckYh72Hk3/hWNKvA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.40.0.tgz",
+      "integrity": "sha512-rKmSj6EXQRnhSkE22+WvrqOqRtk733x3p5sWpZilhmjnkHkpeCgWsFFo0dGnUGeA+OZjRl3+VYq+HyCOEuwcxQ==",
       "cpu": [
         "riscv64"
       ],
@@ -1582,9 +1596,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.34.8.tgz",
-      "integrity": "sha512-DdePVk1NDEuc3fOe3dPPTb+rjMtuFw89gw6gVWxQFAuEqqSdDKnrwzZHrUYdac7A7dXl9Q2Vflxpme15gUWQFA==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.40.0.tgz",
+      "integrity": "sha512-SpnYlAfKPOoVsQqmTFJ0usx0z84bzGOS9anAC0AZ3rdSo3snecihbhFTlJZ8XMwzqAcodjFU4+/SM311dqE5Sw==",
       "cpu": [
         "s390x"
       ],
@@ -1596,9 +1610,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.34.8.tgz",
-      "integrity": "sha512-8y7ED8gjxITUltTUEJLQdgpbPh1sUQ0kMTmufRF/Ns5tI9TNMNlhWtmPKKHCU0SilX+3MJkZ0zERYYGIVBYHIA==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.40.0.tgz",
+      "integrity": "sha512-RcDGMtqF9EFN8i2RYN2W+64CdHruJ5rPqrlYw+cgM3uOVPSsnAQps7cpjXe9be/yDp8UC7VLoCoKC8J3Kn2FkQ==",
       "cpu": [
         "x64"
       ],
@@ -1610,9 +1624,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.34.8.tgz",
-      "integrity": "sha512-SCXcP0ZpGFIe7Ge+McxY5zKxiEI5ra+GT3QRxL0pMMtxPfpyLAKleZODi1zdRHkz5/BhueUrYtYVgubqe9JBNQ==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.40.0.tgz",
+      "integrity": "sha512-HZvjpiUmSNx5zFgwtQAV1GaGazT2RWvqeDi0hV+AtC8unqqDSsaFjPxfsO6qPtKRRg25SisACWnJ37Yio8ttaw==",
       "cpu": [
         "x64"
       ],
@@ -1624,9 +1638,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.34.8.tgz",
-      "integrity": "sha512-YHYsgzZgFJzTRbth4h7Or0m5O74Yda+hLin0irAIobkLQFRQd1qWmnoVfwmKm9TXIZVAD0nZ+GEb2ICicLyCnQ==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.40.0.tgz",
+      "integrity": "sha512-UtZQQI5k/b8d7d3i9AZmA/t+Q4tk3hOC0tMOMSq2GlMYOfxbesxG4mJSeDp0EHs30N9bsfwUvs3zF4v/RzOeTQ==",
       "cpu": [
         "arm64"
       ],
@@ -1638,9 +1652,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.34.8.tgz",
-      "integrity": "sha512-r3NRQrXkHr4uWy5TOjTpTYojR9XmF0j/RYgKCef+Ag46FWUTltm5ziticv8LdNsDMehjJ543x/+TJAek/xBA2w==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.40.0.tgz",
+      "integrity": "sha512-+m03kvI2f5syIqHXCZLPVYplP8pQch9JHyXKZ3AGMKlg8dCyr2PKHjwRLiW53LTrN/Nc3EqHOKxUxzoSPdKddA==",
       "cpu": [
         "ia32"
       ],
@@ -1652,9 +1666,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.34.8.tgz",
-      "integrity": "sha512-U0FaE5O1BCpZSeE6gBl3c5ObhePQSfk9vDRToMmTkbhCOgW4jqvtS5LGyQ76L1fH8sM0keRp4uDTsbjiUyjk0g==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.40.0.tgz",
+      "integrity": "sha512-lpPE1cLfP5oPzVjKMx10pgBmKELQnFJXHgvtHCtuJWOv8MxqdEIMNtgHgBFf7Ea2/7EuVwa9fodWUfXAlXZLZQ==",
       "cpu": [
         "x64"
       ],
@@ -1939,6 +1953,253 @@
         "@svgr/core": "*"
       }
     },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.0.14.tgz",
+      "integrity": "sha512-Ux9NbFkKWYE4rfUFz6M5JFLs/GEYP6ysxT8uSyPn6aTbh2K3xDE1zz++eVK4Vwx799fzMF8CID9sdHn4j/Ab8w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "enhanced-resolve": "^5.18.1",
+        "jiti": "^2.4.2",
+        "tailwindcss": "4.0.14"
+      }
+    },
+    "node_modules/@tailwindcss/node/node_modules/jiti": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
+      "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.0.14.tgz",
+      "integrity": "sha512-M8VCNyO/NBi5vJ2cRcI9u8w7Si+i76a7o1vveoGtbbjpEYJZYiyc7f2VGps/DqawO56l3tImIbq2OT/533jcrA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.0.14",
+        "@tailwindcss/oxide-darwin-arm64": "4.0.14",
+        "@tailwindcss/oxide-darwin-x64": "4.0.14",
+        "@tailwindcss/oxide-freebsd-x64": "4.0.14",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.0.14",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.0.14",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.0.14",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.0.14",
+        "@tailwindcss/oxide-linux-x64-musl": "4.0.14",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.0.14",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.0.14"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.0.14.tgz",
+      "integrity": "sha512-VBFKC2rFyfJ5J8lRwjy6ub3rgpY186kAcYgiUr8ArR8BAZzMruyeKJ6mlsD22Zp5ZLcPW/FXMasJiJBx0WsdQg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.0.14.tgz",
+      "integrity": "sha512-U3XOwLrefGr2YQZ9DXasDSNWGPZBCh8F62+AExBEDMLDfvLLgI/HDzY8Oq8p/JtqkAY38sWPOaNnRwEGKU5Zmg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.0.14.tgz",
+      "integrity": "sha512-V5AjFuc3ndWGnOi1d379UsODb0TzAS2DYIP/lwEbfvafUaD2aNZIcbwJtYu2DQqO2+s/XBvDVA+w4yUyaewRwg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.0.14.tgz",
+      "integrity": "sha512-tXvtxbaZfcPfqBwW3f53lTcyH6EDT+1eT7yabwcfcxTs+8yTPqxsDUhrqe9MrnEzpNkd+R/QAjJapfd4tjWdLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.0.14.tgz",
+      "integrity": "sha512-cSeLNWWqIWeSTmBntQvyY2/2gcLX8rkPFfDDTQVF8qbRcRMVPLxBvFVJyfSAYRNch6ZyVH2GI6dtgALOBDpdNA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.0.14.tgz",
+      "integrity": "sha512-bwDWLBalXFMDItcSXzFk6y7QKvj6oFlaY9vM+agTlwFL1n1OhDHYLZkSjaYsh6KCeG0VB0r7H8PUJVOM1LRZyg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.0.14.tgz",
+      "integrity": "sha512-gVkJdnR/L6iIcGYXx64HGJRmlme2FGr/aZH0W6u4A3RgPMAb+6ELRLi+UBiH83RXBm9vwCfkIC/q8T51h8vUJQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.0.14.tgz",
+      "integrity": "sha512-EE+EQ+c6tTpzsg+LGO1uuusjXxYx0Q00JE5ubcIGfsogSKth8n8i2BcS2wYTQe4jXGs+BQs35l78BIPzgwLddw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.0.14.tgz",
+      "integrity": "sha512-KCCOzo+L6XPT0oUp2Jwh233ETRQ/F6cwUnMnR0FvMUCbkDAzHbcyOgpfuAtRa5HD0WbTbH4pVD+S0pn1EhNfbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.0.14.tgz",
+      "integrity": "sha512-AHObFiFL9lNYcm3tZSPqa/cHGpM5wOrNmM2uOMoKppp+0Hom5uuyRh0QkOp7jftsHZdrZUpmoz0Mp6vhh2XtUg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.0.14.tgz",
+      "integrity": "sha512-rNXXMDJfCJLw/ZaFTOLOHoGULxyXfh2iXTGiChFiYTSgKBKQHIGEpV0yn5N25WGzJJ+VBnRjHzlmDqRV+d//oQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.0.14.tgz",
+      "integrity": "sha512-+uIR6KtKhla1XeIanF27KtrfYy+PX+R679v5LxbkmEZlhQe3g8rk+wKj7Xgt++rWGRuFLGMXY80Ek8JNn+kN/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.0.14",
+        "@tailwindcss/oxide": "4.0.14",
+        "lightningcss": "1.29.2",
+        "postcss": "^8.4.41",
+        "tailwindcss": "4.0.14"
+      }
+    },
     "node_modules/@tanstack/query-core": {
       "version": "5.66.4",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.66.4.tgz",
@@ -2129,9 +2390,9 @@
       }
     },
     "node_modules/@types/estree": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
-      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.7.tgz",
+      "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==",
       "license": "MIT"
     },
     "node_modules/@types/estree-jsx": {
@@ -2774,40 +3035,6 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
-    "node_modules/any-promise": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true,
-      "license": "MIT"
-    },
-    "node_modules/anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/anymatch/node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/arch": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/arch/-/arch-2.2.0.tgz",
@@ -2829,13 +3056,6 @@
       ],
       "license": "MIT"
     },
-    "node_modules/arg": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/argparse": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -3093,44 +3313,6 @@
         "node": ">= 4.0.0"
       }
     },
-    "node_modules/autoprefixer": {
-      "version": "10.4.20",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
-      "integrity": "sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "browserslist": "^4.23.3",
-        "caniuse-lite": "^1.0.30001646",
-        "fraction.js": "^4.3.7",
-        "normalize-range": "^0.1.2",
-        "picocolors": "^1.0.1",
-        "postcss-value-parser": "^4.2.0"
-      },
-      "bin": {
-        "autoprefixer": "bin/autoprefixer"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      },
-      "peerDependencies": {
-        "postcss": "^8.1.0"
-      }
-    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -3165,9 +3347,9 @@
       "license": "MIT"
     },
     "node_modules/axios": {
-      "version": "1.7.9",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz",
-      "integrity": "sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==",
+      "version": "1.8.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.8.4.tgz",
+      "integrity": "sha512-eBSYY4Y68NNlHbHBMdeDmKNtDgXWhQsJcGqzO3iLUM0GraQFSS9cVgPX5I9b3lbdFKyYoAEGAZF1DwhTaljNAw==",
       "license": "MIT",
       "dependencies": {
         "follow-redirects": "^1.15.6",
@@ -3223,19 +3405,6 @@
         "tweetnacl": "^0.14.3"
       }
     },
-    "node_modules/binary-extensions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/blob-util": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/blob-util/-/blob-util-2.0.2.tgz",
@@ -3464,16 +3633,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -3619,44 +3778,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/ci-info": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-4.1.0.tgz",
@@ -3917,17 +4038,6 @@
         "url": "https://github.com/sponsors/fb55"
       }
     },
-    "node_modules/css-selector-tokenizer": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz",
-      "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "fastparse": "^1.1.2"
-      }
-    },
     "node_modules/css-tree": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.1.3.tgz",
@@ -4083,16 +4193,6 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
-    "node_modules/culori": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz",
-      "integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
-      }
-    },
     "node_modules/cypress": {
       "version": "14.0.3",
       "resolved": "https://registry.npmjs.org/cypress/-/cypress-14.0.3.tgz",
@@ -4176,23 +4276,12 @@
       }
     },
     "node_modules/daisyui": {
-      "version": "4.12.23",
-      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.23.tgz",
-      "integrity": "sha512-EM38duvxutJ5PD65lO/AFMpcw+9qEy6XAZrTpzp7WyaPeO/l+F/Qiq0ECHHmFNcFXh5aVoALY4MGrrxtCiaQCQ==",
+      "version": "5.0.6",
+      "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-5.0.6.tgz",
+      "integrity": "sha512-/e/9Gw/2y9oawBJlWkJMSEhRXdmfOLvcPl+6q/x2rPEdIVOtebs1t3ex2vwySl9vCRs1GGNBKCiL+P60Ps/wUw==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "css-selector-tokenizer": "^0.8",
-        "culori": "^3",
-        "picocolors": "^1",
-        "postcss-js": "^4"
-      },
-      "engines": {
-        "node": ">=16.9.0"
-      },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/daisyui"
+        "url": "https://github.com/saadeghi/daisyui?sponsor=1"
       }
     },
     "node_modules/dashdash": {
@@ -4390,6 +4479,16 @@
         "node": ">=6"
       }
     },
+    "node_modules/detect-libc": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz",
+      "integrity": "sha512-bwy0MGW55bG41VqxxypOsdSdGqLwXPI/focwgTYCFMbdUiBAxLg9CFzG08sz2aqzknwiX7Hkl0bQENjg8iLByw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/devlop": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
@@ -4403,13 +4502,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/didyoumean": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
     "node_modules/dir-glob": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz",
@@ -4423,13 +4515,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -5698,13 +5783,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/fastparse": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz",
-      "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==",
-      "dev": true,
-      "license": "MIT"
-    },
     "node_modules/fastq": {
       "version": "1.19.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.0.tgz",
@@ -5922,20 +6000,6 @@
         "node": ">= 6"
       }
     },
-    "node_modules/fraction.js": {
-      "version": "4.3.7",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
-      "integrity": "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": "*"
-      },
-      "funding": {
-        "type": "patreon",
-        "url": "https://github.com/sponsors/rawify"
-      }
-    },
     "node_modules/fs-extra": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
@@ -6728,19 +6792,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-boolean-object": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
@@ -7315,6 +7366,8 @@
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "dev": true,
       "license": "MIT",
+      "optional": true,
+      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -7520,6 +7573,245 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lightningcss": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.2.tgz",
+      "integrity": "sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-darwin-arm64": "1.29.2",
+        "lightningcss-darwin-x64": "1.29.2",
+        "lightningcss-freebsd-x64": "1.29.2",
+        "lightningcss-linux-arm-gnueabihf": "1.29.2",
+        "lightningcss-linux-arm64-gnu": "1.29.2",
+        "lightningcss-linux-arm64-musl": "1.29.2",
+        "lightningcss-linux-x64-gnu": "1.29.2",
+        "lightningcss-linux-x64-musl": "1.29.2",
+        "lightningcss-win32-arm64-msvc": "1.29.2",
+        "lightningcss-win32-x64-msvc": "1.29.2"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.29.2.tgz",
+      "integrity": "sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.29.2.tgz",
+      "integrity": "sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.29.2.tgz",
+      "integrity": "sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.29.2.tgz",
+      "integrity": "sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.29.2.tgz",
+      "integrity": "sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.29.2.tgz",
+      "integrity": "sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.29.2.tgz",
+      "integrity": "sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.29.2.tgz",
+      "integrity": "sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.29.2.tgz",
+      "integrity": "sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.29.2.tgz",
+      "integrity": "sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -8632,18 +8924,6 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
-    "node_modules/mz": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "any-promise": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "thenify-all": "^1.0.0"
-      }
-    },
     "node_modules/nanoid": {
       "version": "3.3.8",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
@@ -8695,26 +8975,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/normalize-range": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/normalize-url": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
@@ -8764,16 +9024,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/object-hash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
-      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/object-inspect": {
       "version": "1.13.4",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
@@ -9239,16 +9489,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/pirates": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
-      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -9389,44 +9629,6 @@
         "postcss": "^8.2.15"
       }
     },
-    "node_modules/postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
-    },
-    "node_modules/postcss-js": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
-      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "camelcase-css": "^2.0.1"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >= 16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.21"
-      }
-    },
     "node_modules/postcss-load-config": {
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
@@ -9682,32 +9884,6 @@
         "postcss": "^8.1.0"
       }
     },
-    "node_modules/postcss-nested": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
-      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "postcss-selector-parser": "^6.1.1"
-      },
-      "engines": {
-        "node": ">=12.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
     "node_modules/postcss-normalize-charset": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.1.0.tgz",
@@ -10368,42 +10544,6 @@
         "react-dom": ">=16"
       }
     },
-    "node_modules/read-cache": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
-      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "pify": "^2.3.0"
-      }
-    },
-    "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
-    "node_modules/readdirp/node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -10628,13 +10768,13 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.34.8",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.34.8.tgz",
-      "integrity": "sha512-489gTVMzAYdiZHFVA/ig/iYFllCcWFHMvUHI1rpFmkoUtRlQxqh6/yiNqnYibjMZ2b/+FUQwldG+aLsEt6bglQ==",
+      "version": "4.40.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.40.0.tgz",
+      "integrity": "sha512-Noe455xmA96nnqH5piFtLobsGbCij7Tu+tb3c1vYjNbTkfzGqXqQXG3wJaYXkRZuQ0vEYN4bhwg7QnIrqB5B+w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@types/estree": "1.0.6"
+        "@types/estree": "1.0.7"
       },
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -10644,25 +10784,26 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.34.8",
-        "@rollup/rollup-android-arm64": "4.34.8",
-        "@rollup/rollup-darwin-arm64": "4.34.8",
-        "@rollup/rollup-darwin-x64": "4.34.8",
-        "@rollup/rollup-freebsd-arm64": "4.34.8",
-        "@rollup/rollup-freebsd-x64": "4.34.8",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.34.8",
-        "@rollup/rollup-linux-arm-musleabihf": "4.34.8",
-        "@rollup/rollup-linux-arm64-gnu": "4.34.8",
-        "@rollup/rollup-linux-arm64-musl": "4.34.8",
-        "@rollup/rollup-linux-loongarch64-gnu": "4.34.8",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.34.8",
-        "@rollup/rollup-linux-riscv64-gnu": "4.34.8",
-        "@rollup/rollup-linux-s390x-gnu": "4.34.8",
-        "@rollup/rollup-linux-x64-gnu": "4.34.8",
-        "@rollup/rollup-linux-x64-musl": "4.34.8",
-        "@rollup/rollup-win32-arm64-msvc": "4.34.8",
-        "@rollup/rollup-win32-ia32-msvc": "4.34.8",
-        "@rollup/rollup-win32-x64-msvc": "4.34.8",
+        "@rollup/rollup-android-arm-eabi": "4.40.0",
+        "@rollup/rollup-android-arm64": "4.40.0",
+        "@rollup/rollup-darwin-arm64": "4.40.0",
+        "@rollup/rollup-darwin-x64": "4.40.0",
+        "@rollup/rollup-freebsd-arm64": "4.40.0",
+        "@rollup/rollup-freebsd-x64": "4.40.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.40.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.40.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.40.0",
+        "@rollup/rollup-linux-arm64-musl": "4.40.0",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.40.0",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.40.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.40.0",
+        "@rollup/rollup-linux-riscv64-musl": "4.40.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.40.0",
+        "@rollup/rollup-linux-x64-gnu": "4.40.0",
+        "@rollup/rollup-linux-x64-musl": "4.40.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.40.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.40.0",
+        "@rollup/rollup-win32-x64-msvc": "4.40.0",
         "fsevents": "~2.3.2"
       }
     },
@@ -11470,86 +11611,6 @@
         "postcss": "^8.2.15"
       }
     },
-    "node_modules/sucrase": {
-      "version": "3.35.0",
-      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
-      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "commander": "^4.0.0",
-        "glob": "^10.3.10",
-        "lines-and-columns": "^1.1.6",
-        "mz": "^2.7.0",
-        "pirates": "^4.0.1",
-        "ts-interface-checker": "^0.1.9"
-      },
-      "bin": {
-        "sucrase": "bin/sucrase",
-        "sucrase-node": "bin/sucrase-node"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/sucrase/node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/sucrase/node_modules/commander": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/sucrase/node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/sucrase/node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dev": true,
-      "license": "ISC",
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -11633,91 +11694,11 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.4.17",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz",
-      "integrity": "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==",
+      "version": "4.0.14",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.14.tgz",
+      "integrity": "sha512-92YT2dpt671tFiHH/e1ok9D987N9fHD5VWoly1CdPD/Cd1HMglvZwP3nx2yTj2lbXDAHt8QssZkxTLCCTNL+xw==",
       "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.6.0",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.2",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.21.6",
-        "lilconfig": "^3.1.3",
-        "micromatch": "^4.0.8",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.1.1",
-        "postcss": "^8.4.47",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.2",
-        "postcss-nested": "^6.2.0",
-        "postcss-selector-parser": "^6.1.2",
-        "resolve": "^1.22.8",
-        "sucrase": "^3.35.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/tailwindcss/node_modules/lilconfig": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
-      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antonk52"
-      }
-    },
-    "node_modules/tailwindcss/node_modules/postcss-load-config": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
-      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "lilconfig": "^3.0.0",
-        "yaml": "^2.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      },
-      "peerDependencies": {
-        "postcss": ">=8.0.9",
-        "ts-node": ">=9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "postcss": {
-          "optional": true
-        },
-        "ts-node": {
-          "optional": true
-        }
-      }
+      "license": "MIT"
     },
     "node_modules/tapable": {
       "version": "2.2.1",
@@ -11798,29 +11779,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/thenify": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "any-promise": "^1.0.0"
-      }
-    },
-    "node_modules/thenify-all": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
-      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "thenify": ">= 3.1.0 < 4"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
     "node_modules/throttleit": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-1.0.1.tgz",
@@ -11853,17 +11811,20 @@
       "license": "MIT"
     },
     "node_modules/tinyglobby": {
-      "version": "0.2.10",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.10.tgz",
-      "integrity": "sha512-Zc+8eJlFMvgatPZTl6A9L/yht8QqdmUNtURHaKZLmKBE12hNPSrqNkUp2cs3M/UKmNVVAMFQYSjYIVHDjW5zew==",
+      "version": "0.2.12",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.12.tgz",
+      "integrity": "sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "fdir": "^6.4.2",
+        "fdir": "^6.4.3",
         "picomatch": "^4.0.2"
       },
       "engines": {
         "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
     "node_modules/tinypool": {
@@ -11982,13 +11943,6 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
-    "node_modules/ts-interface-checker": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true,
-      "license": "Apache-2.0"
-    },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
       "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
@@ -12498,14 +12452,18 @@
       }
     },
     "node_modules/vite": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.0.tgz",
-      "integrity": "sha512-7dPxoo+WsT/64rDcwoOjk76XHj+TqNTIvHKcuMQ1k4/SeHDaQt5GFAeLYzrimZrMpn/O6DtdI03WUjdxuPM0oQ==",
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.0.tgz",
+      "integrity": "sha512-9aC0n4pr6hIbvi1YOpFjwQ+QOTGssvbJKoeYkuHHGWwlXfdxQlI8L2qNMo9awEEcCPSiS+5mJZk5jH1PAqoDeQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "esbuild": "^0.25.0",
+        "fdir": "^6.4.3",
+        "picomatch": "^4.0.2",
         "postcss": "^8.5.3",
-        "rollup": "^4.30.1"
+        "rollup": "^4.34.9",
+        "tinyglobby": "^0.2.12"
       },
       "bin": {
         "vite": "bin/vite.js"
diff --git a/package.json b/package.json
index eca1866c..6b8101f3 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-node-resolve": "^16.0.0",
     "@rollup/plugin-typescript": "^12.1.2",
+    "@tailwindcss/postcss": "^4.0.14",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@types/geojson": "^7946.0.14",
@@ -50,9 +51,8 @@
     "@typescript-eslint/parser": "^5.62.0",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "^3.0.5",
-    "autoprefixer": "^10.4.14",
     "cypress": "^14.0.3",
-    "daisyui": "^4.6.1",
+    "daisyui": "^5.0.6",
     "eslint": "^8.24.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-standard": "^17.1.0",
@@ -77,7 +77,7 @@
     "rollup-plugin-dts": "^6.1.1",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-svg": "^2.0.0",
-    "tailwindcss": "^3.3.1",
+    "tailwindcss": "^4.0.14",
     "typedoc": "^0.27.6",
     "typedoc-plugin-coverage": "^3.4.1",
     "typedoc-plugin-missing-exports": "^3.1.0",
diff --git a/postcss.config.cjs b/postcss.config.cjs
index 90005359..6bb9c83c 100644
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -1,7 +1,6 @@
 // eslint-disable-next-line import/no-commonjs
 module.exports = {
   plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
+    '@tailwindcss/postcss': {},
   },
 }
diff --git a/rollup.config.js b/rollup.config.js
index dac65839..ed8799f3 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -55,11 +55,9 @@ export default [
       'react-toastify',
       'react-string-replace',
       'react-toastify/dist/ReactToastify.css',
-      'tw-elements',
       'react-router-dom',
       'react-leaflet-cluster',
       '@tanstack/react-query',
-      'tributejs',
       'prop-types',
       'leaflet/dist/leaflet.css',
       '@heroicons/react/20/solid',
diff --git a/src/Components/AppShell/AppShell.tsx b/src/Components/AppShell/AppShell.tsx
index ebe297a3..71146b26 100644
--- a/src/Components/AppShell/AppShell.tsx
+++ b/src/Components/AppShell/AppShell.tsx
@@ -24,14 +24,14 @@ export function AppShell({
 }) {
   return (
     <ContextWrapper>
-      <div className='tw-flex tw-flex-col tw-h-full'>
+      <div className='tw:flex tw:flex-col tw:h-full'>
         <SetAppState
           assetsApi={assetsApi}
           embedded={embedded}
           openCollectiveApiKey={openCollectiveApiKey}
         />
         <NavBar appName={appName}></NavBar>
-        <div id='app-content' className='tw-flex'>
+        <div id='app-content' className='tw:flex'>
           {children}
         </div>
       </div>
diff --git a/src/Components/AppShell/Content.tsx b/src/Components/AppShell/Content.tsx
index f6d49fd9..4a468a95 100644
--- a/src/Components/AppShell/Content.tsx
+++ b/src/Components/AppShell/Content.tsx
@@ -12,7 +12,7 @@ export function Content({ children }: ContentProps) {
 
   return (
     <div
-      className={`${appState.sideBarOpen && !appState.sideBarSlim ? 'tw-ml-48' : appState.sideBarOpen && appState.sideBarSlim ? 'tw-ml-14' : ''} tw-w-full tw-h-full tw-bg-base-100 tw-relative tw-transition-all tw-duration-300`}
+      className={`${appState.sideBarOpen && !appState.sideBarSlim ? 'tw:ml-48' : appState.sideBarOpen && appState.sideBarSlim ? 'tw:ml-14' : ''} tw:w-full tw:h-full tw:bg-base-200 tw:relative tw:transition-all tw:duration-300`}
     >
       {children}
     </div>
diff --git a/src/Components/AppShell/ContextWrapper.tsx b/src/Components/AppShell/ContextWrapper.tsx
index 3eba67ee..50777b63 100644
--- a/src/Components/AppShell/ContextWrapper.tsx
+++ b/src/Components/AppShell/ContextWrapper.tsx
@@ -22,7 +22,7 @@ const ContextCheckContext = createContext(false)
 
 const CloseButton = ({ closeToast }: CloseButtonProps) => (
   <button
-    className='tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw-absolute tw-right-2 tw-top-2 focus:tw-outline-none'
+    className='tw:btn tw:btn-sm tw:btn-circle tw:btn-ghost tw:absolute tw:right-2 tw:top-2 tw:focus:outline-hidden'
     onClick={closeToast}
   >
     ✕
diff --git a/src/Components/AppShell/NavBar.tsx b/src/Components/AppShell/NavBar.tsx
index c8d30de6..d8631fa2 100644
--- a/src/Components/AppShell/NavBar.tsx
+++ b/src/Components/AppShell/NavBar.tsx
@@ -1,23 +1,14 @@
 import Bars3Icon from '@heroicons/react/16/solid/Bars3Icon'
-import EllipsisVerticalIcon from '@heroicons/react/16/solid/EllipsisVerticalIcon'
 import QuestionMarkIcon from '@heroicons/react/24/outline/QuestionMarkCircleIcon'
 import { useEffect, useRef, useState } from 'react'
 import { Link } from 'react-router-dom'
-import { toast } from 'react-toastify'
 
-import { useAuth } from '#components/Auth/useAuth'
-import { useItems } from '#components/Map/hooks/useItems'
+import { ThemeControl } from '#components/Templates/ThemeControl'
 
 import { useAppState, useSetAppState } from './hooks/useAppState'
-
-import type { Item } from '#types/Item'
+import { UserControl } from './UserControl'
 
 export default function NavBar({ appName }: { appName: string }) {
-  const { isAuthenticated, user, logout } = useAuth()
-
-  const [userProfile, setUserProfile] = useState<Item>({} as Item)
-  const items = useItems()
-
   const appState = useAppState()
   const setAppState = useSetAppState()
 
@@ -25,14 +16,6 @@ export default function NavBar({ appName }: { appName: string }) {
     setAppState({ sideBarOpen: !appState.sideBarOpen })
   }
 
-  useEffect(() => {
-    const profile =
-      user && items.find((i) => i.user_created?.id === user.id && i.layer?.userProfileLayer)
-    profile
-      ? setUserProfile(profile)
-      : setUserProfile({ id: crypto.randomUUID(), name: user?.first_name ?? '', text: '' })
-  }, [user, items])
-
   const nameRef = useRef<HTMLHeadingElement>(null)
   const [nameWidth, setNameWidth] = useState<number>(0)
 
@@ -40,128 +23,42 @@ export default function NavBar({ appName }: { appName: string }) {
     !appState.embedded && nameRef.current && setNameWidth(nameRef.current.scrollWidth)
   }, [nameRef, appName, appState.embedded])
 
-  const onLogout = async () => {
-    await toast.promise(logout(), {
-      success: {
-        render() {
-          return 'Bye bye'
-        },
-        // other options
-        icon: '👋',
-      },
-      error: {
-        render({ data }) {
-          return JSON.stringify(data)
-        },
-      },
-      pending: 'logging out ..',
-    })
-  }
-
   if (!appState.embedded) {
     return (
       <>
-        <div className='tw-navbar tw-bg-base-100 tw-z-[9998] tw-shadow-xl tw-relative'>
+        <div className='tw:navbar tw:bg-base-100 tw:z-9998 tw:shadow-xl tw:relative tw:p-0'>
           <button
-            className='tw-btn tw-btn-square tw-btn-ghost'
+            className='tw:btn tw:btn-square tw:btn-ghost tw:ml-3'
             aria-controls='#sidenav'
             aria-haspopup='true'
             onClick={() => toggleSidebar()}
           >
-            <Bars3Icon className='tw-inline-block tw-w-5 tw-h-5' />
+            <Bars3Icon className='tw:inline-block tw:w-5 tw:h-5' />
           </button>
-          <div className='tw-flex-1 tw-mr-2'>
+          <div className='tw:flex-1 tw:mr-2'>
             <div
-              className={'tw-flex-1 tw-truncate tw-grid tw-grid-flow-col'}
+              className={'tw:flex-1 tw:truncate tw:grid tw:grid-flow-col'}
               style={{ maxWidth: nameWidth + 60 }}
             >
               <Link
-                className='tw-btn tw-btn-ghost tw-px-2 tw-normal-case tw-text-xl tw-flex-1 tw-truncate'
+                className='tw:btn tw:btn-ghost tw:px-2 tw:normal-case tw:text-xl tw:flex-1 tw:truncate'
                 to={'/'}
               >
-                <h1 ref={nameRef} className='tw-truncate'>
+                <h1 ref={nameRef} className='tw:truncate'>
                   {appName}
                 </h1>
               </Link>
               <button
-                className='tw-btn tw-px-2  tw-btn-ghost'
+                className='tw:btn tw:px-2  tw:btn-ghost'
                 onClick={() => window.my_modal_3.showModal()}
               >
-                <QuestionMarkIcon className='tw-h-5 tw-w-5' />
+                <QuestionMarkIcon className='tw:h-5 tw:w-5' />
               </button>
             </div>
           </div>
 
-          {isAuthenticated ? (
-            <div className='tw-flex-none'>
-              <Link
-                to={`${userProfile.id && '/item/' + userProfile.id}`}
-                className='tw-flex tw-items-center'
-              >
-                {userProfile.image && (
-                  <div className='tw-avatar'>
-                    <div className='tw-w-10 tw-rounded-full'>
-                      <img src={appState.assetsApi.url + userProfile.image} />
-                    </div>
-                  </div>
-                )}
-                <div className='tw-ml-2 tw-mr-2'>{userProfile.name || user?.first_name}</div>
-              </Link>
-              <div className='tw-dropdown tw-dropdown-end'>
-                <label tabIndex={0} className='tw-btn tw-btn-ghost tw-btn-square'>
-                  <EllipsisVerticalIcon className='tw-h-5 tw-w-5' />
-                </label>
-                <ul
-                  tabIndex={0}
-                  className='tw-menu tw-menu-compact tw-dropdown-content tw-mt-3 tw-p-2 tw-shadow tw-bg-base-100 tw-rounded-box tw-w-52 !tw-z-[10000]'
-                >
-                  <li>
-                    <Link to={`${userProfile.id && '/edit-item/' + userProfile.id}`}>Profile</Link>
-                  </li>
-                  <li>
-                    <Link to={'/user-settings'}>Settings</Link>
-                  </li>
-                  <li>
-                    <a
-                      onClick={() => {
-                        void onLogout()
-                      }}
-                    >
-                      Logout
-                    </a>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          ) : (
-            <div>
-              <div className='tw-hidden md:tw-flex'>
-                <Link to={'/login'}>
-                  <div className='tw-btn tw-btn-ghost tw-mr-2'>Login</div>
-                </Link>
-
-                <Link to={'/signup'}>
-                  <div className='tw-btn tw-btn-ghost tw-mr-2'>Sign Up</div>
-                </Link>
-              </div>
-              <div className='tw-dropdown tw-dropdown-end'>
-                <label tabIndex={1} className='tw-btn tw-btn-ghost md:tw-hidden'>
-                  <EllipsisVerticalIcon className='tw-h-5 tw-w-5' />
-                </label>
-                <ul
-                  tabIndex={1}
-                  className='tw-menu tw-dropdown-content tw-mt-3 tw-p-2 tw-shadow tw-bg-base-100 tw-rounded-box tw-w-52 !tw-z-[10000]'
-                >
-                  <li>
-                    <Link to={'/login'}>Login</Link>
-                  </li>
-                  <li>
-                    <Link to={'/signup'}>Sign Up</Link>
-                  </li>
-                </ul>
-              </div>
-            </div>
-          )}
+          {appState.showThemeControl && <ThemeControl />}
+          <UserControl />
         </div>
       </>
     )
diff --git a/src/Components/AppShell/SideBar.tsx b/src/Components/AppShell/SideBar.tsx
index 409aea71..645d9344 100644
--- a/src/Components/AppShell/SideBar.tsx
+++ b/src/Components/AppShell/SideBar.tsx
@@ -34,19 +34,16 @@ export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoute
   return (
     <nav
       id='sidenav'
-      className={`${appState.sideBarOpen ? 'tw-translate-x-0' : '-tw-translate-x-full'}
-          ${appState.sideBarSlim ? 'tw-w-14' : 'tw-w-48'}
-          ${appState.embedded ? 'tw-mt-0 tw-h-[100dvh]' : 'tw-mt-16 tw-h-[calc(100dvh-64px)]'}
-          tw-fixed tw-left-0 tw-transition-all tw-duration-300 tw-top-0 tw-z-[10035] 
-          tw-overflow-hidden tw-shadow-xl dark:tw-bg-zinc-800`}
+      className={`${appState.sideBarOpen ? 'tw:translate-x-0' : 'tw:-translate-x-full'}
+          ${appState.sideBarSlim ? 'tw:w-14' : 'tw:w-48'}
+          ${appState.embedded ? 'tw:mt-5.5 tw:h-[calc(100dvh-22px)]' : 'tw:mt-16 tw:h-[calc(100dvh-64px)]'}
+          tw:fixed tw:left-0 tw:transition-all tw:duration-300 tw:top-0 tw:z-10035 
+          tw:overflow-hidden tw:shadow-xl tw:dark:bg-zinc-800`}
     >
       <div
-        className={`tw-flex tw-flex-col  ${appState.embedded ? 'tw-h-full' : 'tw-h-[calc(100dvh-64px)]'}`}
+        className={`tw:flex tw:flex-col  ${appState.embedded ? 'tw:h-full' : 'tw:h-[calc(100dvh-64px)]'}`}
       >
-        <ul
-          className='tw-menu tw-w-full tw-bg-base-100 tw-text-base-content tw-p-0'
-          data-te-sidenav-menu-ref
-        >
+        <ul className='tw:menu tw:w-full tw:bg-base-100 tw:text-base-content tw:p-0'>
           {routes.map((route, k) => {
             return (
               <li className='' key={k}>
@@ -59,7 +56,7 @@ export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoute
                     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                     to={`${route.path}${params && '?' + params.toString()}`}
                     className={({ isActive }) =>
-                      `${isActive ? 'tw-font-semibold  tw-bg-base-200 !tw-rounded-none' : 'tw-font-normal !tw-rounded-none'}`
+                      `${isActive ? 'tw:font-semibold  tw:bg-base-200 tw:rounded-none!' : 'tw:font-normal tw:rounded-none!'}`
                     }
                     onClick={() => {
                       if (screen.width < 640 && !appState.sideBarSlim) toggleSidebarOpen()
@@ -67,7 +64,7 @@ export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoute
                   >
                     {route.icon}
                     <span
-                      className={`${appState.sideBarSlim ? 'tw-hidden' : ''}`}
+                      className={`${appState.sideBarSlim ? 'tw:hidden' : ''}`}
                       data-te-sidenav-slim='false'
                     >
                       {route.name}
@@ -75,7 +72,7 @@ export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoute
                     {(location.pathname.includes(route.path) && route.path.length > 1) ||
                     location.pathname === route.path ? (
                       <span
-                        className='tw-absolute tw-inset-y-0 tw-left-0 tw-w-1 tw-rounded-tr-md tw-rounded-br-md tw-bg-primary '
+                        className='tw:absolute tw:inset-y-0 tw:left-0 tw:w-1 tw:rounded-tr-md tw:rounded-br-md tw:bg-primary '
                         aria-hidden='true'
                       ></span>
                     ) : null}
@@ -88,12 +85,12 @@ export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoute
 
         <div
           id='slim-toggler'
-          className='tw-w-full tw-bg-base-100  tw-flex-1 tw-grid tw-place-items-end'
+          className='tw:w-full tw:bg-base-100  tw:flex-1 tw:grid tw:place-items-end'
           aria-haspopup='true'
         >
-          <div className='tw-w-full'>
+          <div className='tw:w-full'>
             <ul
-              className='tw-menu tw-w-full tw-bg-base-100 tw-text-base-content tw-p-0 tw-mb-0'
+              className='tw:menu tw:w-full tw:bg-base-100 tw:text-base-content tw:p-0 tw:mb-0'
               data-te-sidenav-menu-ref
             >
               {bottomRoutes?.map((route, k) => {
@@ -107,7 +104,7 @@ export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoute
                         target={route.blank ? '_blank' : '_self'}
                         to={route.path}
                         className={({ isActive }) =>
-                          `${isActive ? 'tw-font-semibold  tw-bg-base-200 !tw-rounded-none' : 'tw-font-normal !tw-rounded-none'}`
+                          `${isActive ? 'tw:font-semibold  tw:bg-base-200 tw:rounded-none!' : 'tw:font-normal tw:rounded-none!'}`
                         }
                         onClick={() => {
                           if (screen.width < 640 && !appState.sideBarSlim) toggleSidebarOpen()
@@ -115,7 +112,7 @@ export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoute
                       >
                         {route.icon}
                         <span
-                          className={`${appState.sideBarSlim ? 'tw-hidden' : ''}`}
+                          className={`${appState.sideBarSlim ? 'tw:hidden' : ''}`}
                           data-te-sidenav-slim='false'
                         >
                           {route.name}
@@ -123,7 +120,7 @@ export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoute
                         {(location.pathname.includes(route.path) && route.path.length > 1) ||
                         location.pathname === route.path ? (
                           <span
-                            className='tw-absolute tw-inset-y-0 tw-left-0 tw-w-1 tw-rounded-tr-md tw-rounded-br-md tw-bg-primary '
+                            className='tw:absolute tw:inset-y-0 tw:left-0 tw:w-1 tw:rounded-tr-md tw:rounded-br-md tw:bg-primary '
                             aria-hidden='true'
                           ></span>
                         ) : null}
@@ -136,8 +133,8 @@ export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoute
 
             <ChevronRightIcon
               className={
-                'tw-w-5 tw-h-5 tw-mb-4 tw-mr-4  tw-cursor-pointer tw-float-right tw-delay-400 tw-duration-500 tw-transition-all ' +
-                (!appState.sideBarSlim ? 'tw-rotate-180' : '')
+                'tw:w-5 tw:h-5 tw:mb-4 tw:mr-5 tw:mt-2  tw:cursor-pointer tw:float-right tw:delay-400 tw:duration-500 tw:transition-all ' +
+                (!appState.sideBarSlim ? 'tw:rotate-180' : '')
               }
               onClick={() => toggleSidebarSlim()}
             />
diff --git a/src/Components/AppShell/UserControl.tsx b/src/Components/AppShell/UserControl.tsx
new file mode 100644
index 00000000..03c1669b
--- /dev/null
+++ b/src/Components/AppShell/UserControl.tsx
@@ -0,0 +1,119 @@
+import EllipsisVerticalIcon from '@heroicons/react/16/solid/EllipsisVerticalIcon'
+import { useState, useEffect } from 'react'
+import { Link } from 'react-router-dom'
+import { toast } from 'react-toastify'
+
+import { useAuth } from '#components/Auth/useAuth'
+import { useItems } from '#components/Map/hooks/useItems'
+
+import { useAppState } from './hooks/useAppState'
+
+import type { Item } from '#types/Item'
+
+export const UserControl = () => {
+  const { isAuthenticated, user, logout } = useAuth()
+  const appState = useAppState()
+
+  const [userProfile, setUserProfile] = useState<Item>({} as Item)
+  const items = useItems()
+
+  useEffect(() => {
+    const profile =
+      user && items.find((i) => i.user_created?.id === user.id && i.layer?.userProfileLayer)
+    profile
+      ? setUserProfile(profile)
+      : setUserProfile({ id: crypto.randomUUID(), name: user?.first_name ?? '', text: '' })
+  }, [user, items])
+
+  const onLogout = async () => {
+    await toast.promise(logout(), {
+      success: {
+        render() {
+          return 'Bye bye'
+        },
+        // other options
+        icon: '👋',
+      },
+      error: {
+        render({ data }) {
+          return JSON.stringify(data)
+        },
+      },
+      pending: 'logging out ..',
+    })
+  }
+  return (
+    <>
+      {isAuthenticated ? (
+        <div className='tw:flex tw:mr-2'>
+          <Link
+            to={`${userProfile.id && '/item/' + userProfile.id}`}
+            className='tw:flex tw:items-center'
+          >
+            {userProfile.image && (
+              <div className='tw:avatar'>
+                <div className='tw:w-10 tw:rounded-full'>
+                  <img src={appState.assetsApi.url + userProfile.image} />
+                </div>
+              </div>
+            )}
+            <div className='tw:ml-2 tw:mr-2'>{userProfile.name || user?.first_name}</div>
+          </Link>
+          <div className='tw:dropdown tw:dropdown-end'>
+            <label tabIndex={0} className='tw:btn tw:btn-ghost tw:btn-square'>
+              <EllipsisVerticalIcon className='tw:h-5 tw:w-5' />
+            </label>
+            <ul
+              tabIndex={0}
+              className='tw:menu tw:menu-compact tw:dropdown-content tw:mt-4 tw:p-2 tw:shadow tw:bg-base-100 tw:rounded-box tw:w-52 tw:z-10000!'
+            >
+              <li>
+                <Link to={`${userProfile.id && '/edit-item/' + userProfile.id}`}>Profile</Link>
+              </li>
+              <li>
+                <Link to={'/user-settings'}>Settings</Link>
+              </li>
+              <li>
+                <a
+                  onClick={() => {
+                    void onLogout()
+                  }}
+                >
+                  Logout
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      ) : (
+        <div className='tw:mr-2 tw:flex tw:items-center'>
+          <div className='tw:hidden tw:md:flex'>
+            <Link to={'/login'}>
+              <div className='tw:self-center tw:btn tw:btn-ghost tw:mr-2'>Login</div>
+            </Link>
+
+            <Link to={'/signup'}>
+              <div className='tw:btn tw:btn-ghost tw:mr-2'>Sign Up</div>
+            </Link>
+          </div>
+          <div className='tw:dropdown tw:dropdown-end'>
+            <label tabIndex={1} className='tw:btn tw:btn-ghost tw:md:hidden'>
+              <EllipsisVerticalIcon className='tw:h-5 tw:w-5' />
+            </label>
+            <ul
+              tabIndex={1}
+              className='tw:menu tw:dropdown-content tw:mt-4 tw:p-2 tw:shadow tw:bg-base-100 tw:rounded-box tw:w-52 tw:z-10000!'
+            >
+              <li>
+                <Link to={'/login'}>Login</Link>
+              </li>
+              <li>
+                <Link to={'/signup'}>Sign Up</Link>
+              </li>
+            </ul>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}
diff --git a/src/Components/AppShell/hooks/useAppState.tsx b/src/Components/AppShell/hooks/useAppState.tsx
index 029da5df..8d4a52d2 100644
--- a/src/Components/AppShell/hooks/useAppState.tsx
+++ b/src/Components/AppShell/hooks/useAppState.tsx
@@ -8,6 +8,7 @@ interface AppState {
   assetsApi: AssetsApi
   sideBarOpen: boolean
   sideBarSlim: boolean
+  showThemeControl: boolean
   embedded: boolean
   openCollectiveApiKey: string
 }
@@ -18,6 +19,7 @@ const initialAppState: AppState = {
   assetsApi: {} as AssetsApi,
   sideBarOpen: false,
   sideBarSlim: false,
+  showThemeControl: false,
   embedded: false,
   openCollectiveApiKey: '',
 }
diff --git a/src/Components/AppShell/hooks/useTheme.tsx b/src/Components/AppShell/hooks/useTheme.tsx
new file mode 100644
index 00000000..367d8fd3
--- /dev/null
+++ b/src/Components/AppShell/hooks/useTheme.tsx
@@ -0,0 +1,12 @@
+import { useEffect } from 'react'
+
+export const useTheme = (defaultTheme = 'default') => {
+  useEffect(() => {
+    const savedTheme = localStorage.getItem('theme')
+    const initialTheme = savedTheme ? (JSON.parse(savedTheme) as string) : defaultTheme
+    if (initialTheme !== 'default') {
+      document.documentElement.setAttribute('data-theme', defaultTheme)
+      localStorage.setItem('theme', JSON.stringify(initialTheme))
+    }
+  }, [defaultTheme])
+}
diff --git a/src/Components/Auth/LoginPage.tsx b/src/Components/Auth/LoginPage.tsx
index d146bb73..b3a835a1 100644
--- a/src/Components/Auth/LoginPage.tsx
+++ b/src/Components/Auth/LoginPage.tsx
@@ -53,39 +53,39 @@ export function LoginPage() {
   }, [onLogin])
 
   return (
-    <MapOverlayPage backdrop className='tw-max-w-xs tw-h-fit'>
-      <h2 className='tw-text-2xl tw-font-semibold tw-mb-2 tw-text-center'>Login</h2>
+    <MapOverlayPage backdrop className='tw:max-w-xs tw:h-fit'>
+      <h2 className='tw:text-2xl tw:font-semibold tw:mb-2 tw:text-center'>Login</h2>
       <input
         type='email'
         placeholder='E-Mail'
         value={email}
         onChange={(e) => setEmail(e.target.value)}
-        className='tw-input tw-input-bordered tw-w-full tw-max-w-xs'
+        className='tw:input tw:input-bordered tw:w-full tw:max-w-xs'
       />
       <input
         type='password'
         placeholder='Password'
         onChange={(e) => setPassword(e.target.value)}
-        className='tw-input tw-input-bordered tw-w-full tw-max-w-xs'
+        className='tw:input tw:input-bordered tw:w-full tw:max-w-xs'
       />
-      <div className='tw-text-right tw-text-primary'>
+      <div className='tw:text-right tw:text-primary'>
         <Link to='/reset-password'>
-          <span className='tw-text-sm  tw-inline-block  hover:tw-text-primary hover:tw-underline hover:tw-cursor-pointer tw-transition tw-duration-200'>
+          <span className='tw:text-sm  tw:inline-block  tw:hover:text-primary tw:hover:underline tw:hover:cursor-pointer tw:transition tw:duration-200'>
             Forgot Password?
           </span>
         </Link>
       </div>
-      <div className='tw-card-actions'>
+      <div className='tw:card-actions'>
         <button
           className={
             loading
-              ? 'tw-btn tw-btn-disabled tw-btn-block tw-btn-primary'
-              : 'tw-btn tw-btn-primary tw-btn-block'
+              ? 'tw:btn tw:btn-disabled tw:btn-block tw:btn-primary'
+              : 'tw:btn tw:btn-primary tw:btn-block'
           }
           // eslint-disable-next-line @typescript-eslint/no-misused-promises
           onClick={() => onLogin()}
         >
-          {loading ? <span className='tw-loading tw-loading-spinner'></span> : 'Login'}
+          {loading ? <span className='tw:loading tw:loading-spinner'></span> : 'Login'}
         </button>
       </div>
     </MapOverlayPage>
diff --git a/src/Components/Auth/RequestPasswordPage.tsx b/src/Components/Auth/RequestPasswordPage.tsx
index 4ebbce2c..0f15acd5 100644
--- a/src/Components/Auth/RequestPasswordPage.tsx
+++ b/src/Components/Auth/RequestPasswordPage.tsx
@@ -36,26 +36,26 @@ export function RequestPasswordPage({ resetUrl }: { resetUrl: string }) {
   }
 
   return (
-    <MapOverlayPage backdrop className='tw-max-w-xs  tw-h-fit'>
-      <h2 className='tw-text-2xl tw-font-semibold tw-mb-2 tw-text-center'>Reset Password</h2>
+    <MapOverlayPage backdrop className='tw:max-w-xs  tw:h-fit'>
+      <h2 className='tw:text-2xl tw:font-semibold tw:mb-2 tw:text-center'>Reset Password</h2>
       <input
         type='email'
         placeholder='E-Mail'
         value={email}
         onChange={(e) => setEmail(e.target.value)}
-        className='tw-input tw-input-bordered tw-w-full tw-max-w-xs'
+        className='tw:input tw:input-bordered tw:w-full tw:max-w-xs'
       />
-      <div className='tw-card-actions tw-mt-4'>
+      <div className='tw:card-actions tw:mt-4'>
         <button
           className={
             loading
-              ? 'tw-btn tw-btn-disabled tw-btn-block tw-btn-primary'
-              : 'tw-btn tw-btn-primary tw-btn-block'
+              ? 'tw:btn tw:btn-disabled tw:btn-block tw:btn-primary'
+              : 'tw:btn tw:btn-primary tw:btn-block'
           }
           // eslint-disable-next-line @typescript-eslint/no-misused-promises
           onClick={() => onReset()}
         >
-          {loading ? <span className='tw-loading tw-loading-spinner'></span> : 'Send'}
+          {loading ? <span className='tw:loading tw:loading-spinner'></span> : 'Send'}
         </button>
       </div>
     </MapOverlayPage>
diff --git a/src/Components/Auth/SetNewPasswordPage.tsx b/src/Components/Auth/SetNewPasswordPage.tsx
index e38b10b9..c8f59591 100644
--- a/src/Components/Auth/SetNewPasswordPage.tsx
+++ b/src/Components/Auth/SetNewPasswordPage.tsx
@@ -36,25 +36,25 @@ export function SetNewPasswordPage() {
   }
 
   return (
-    <MapOverlayPage backdrop className='tw-max-w-xs  tw-h-fit'>
-      <h2 className='tw-text-2xl tw-font-semibold tw-mb-2 tw-text-center'>Set new Password</h2>
+    <MapOverlayPage backdrop className='tw:max-w-xs  tw:h-fit'>
+      <h2 className='tw:text-2xl tw:font-semibold tw:mb-2 tw:text-center'>Set new Password</h2>
       <input
         type='password'
         placeholder='Password'
         onChange={(e) => setPassword(e.target.value)}
-        className='tw-input tw-input-bordered tw-w-full tw-max-w-xs'
+        className='tw:input tw:input-bordered tw:w-full tw:max-w-xs'
       />
-      <div className='tw-card-actions tw-mt-4'>
+      <div className='tw:card-actions tw:mt-4'>
         <button
           className={
             loading
-              ? 'tw-btn tw-btn-disabled tw-btn-block tw-btn-primary'
-              : 'tw-btn tw-btn-primary tw-btn-block'
+              ? 'tw:btn tw:btn-disabled tw:btn-block tw:btn-primary'
+              : 'tw:btn tw:btn-primary tw:btn-block'
           }
           // eslint-disable-next-line @typescript-eslint/no-misused-promises
           onClick={() => onReset()}
         >
-          {loading ? <span className='tw-loading tw-loading-spinner'></span> : 'Set'}
+          {loading ? <span className='tw:loading tw:loading-spinner'></span> : 'Set'}
         </button>
       </div>
     </MapOverlayPage>
diff --git a/src/Components/Auth/SignupPage.tsx b/src/Components/Auth/SignupPage.tsx
index 2e15481c..1eb51ea9 100644
--- a/src/Components/Auth/SignupPage.tsx
+++ b/src/Components/Auth/SignupPage.tsx
@@ -55,39 +55,39 @@ export function SignupPage() {
   }, [onRegister])
 
   return (
-    <MapOverlayPage backdrop className='tw-max-w-xs  tw-h-fit'>
-      <h2 className='tw-text-2xl tw-font-semibold tw-mb-2 tw-text-center'>Sign Up</h2>
+    <MapOverlayPage backdrop className='tw:max-w-xs  tw:h-fit'>
+      <h2 className='tw:text-2xl tw:font-semibold tw:mb-2 tw:text-center'>Sign Up</h2>
       <input
         type='text'
         placeholder='Name'
         value={userName}
         onChange={(e) => setUserName(e.target.value)}
-        className='tw-input tw-input-bordered tw-w-full tw-max-w-xs'
+        className='tw:input tw:input-bordered tw:w-full tw:max-w-xs'
       />
       <input
         type='email'
         placeholder='E-Mail'
         value={email}
         onChange={(e) => setEmail(e.target.value)}
-        className='tw-input tw-input-bordered tw-w-full tw-max-w-xs'
+        className='tw:input tw:input-bordered tw:w-full tw:max-w-xs'
       />
       <input
         type='password'
         placeholder='Password'
         onChange={(e) => setPassword(e.target.value)}
-        className='tw-input tw-input-bordered tw-w-full tw-max-w-xs'
+        className='tw:input tw:input-bordered tw:w-full tw:max-w-xs'
       />
-      <div className='tw-card-actions tw-mt-4'>
+      <div className='tw:card-actions tw:mt-4'>
         <button
           className={
             loading
-              ? 'tw-btn tw-btn-disabled tw-btn-block tw-btn-primary'
-              : 'tw-btn tw-btn-primary tw-btn-block'
+              ? 'tw:btn tw:btn-disabled tw:btn-block tw:btn-primary'
+              : 'tw:btn tw:btn-primary tw:btn-block'
           }
           // eslint-disable-next-line @typescript-eslint/no-misused-promises
           onClick={() => onRegister()}
         >
-          {loading ? <span className='tw-loading tw-loading-spinner'></span> : 'Sign Up'}
+          {loading ? <span className='tw:loading tw:loading-spinner'></span> : 'Sign Up'}
         </button>
       </div>
     </MapOverlayPage>
diff --git a/src/Components/Gaming/Modal.tsx b/src/Components/Gaming/Modal.tsx
index e69b8f39..32f66058 100644
--- a/src/Components/Gaming/Modal.tsx
+++ b/src/Components/Gaming/Modal.tsx
@@ -20,14 +20,14 @@ export function Modal({
   return (
     <>
       {/* You can open the modal using ID.showModal() method */}
-      <dialog id='my_modal_3' className='tw-modal tw-transition-all tw-duration-300'>
-        <form method='dialog' className='tw-modal-box tw-transition-none'>
-          <button className='tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw-absolute tw-right-2 tw-top-2 focus:tw-outline-none'>
+      <dialog id='my_modal_3' className='tw:modal tw:transition-all tw:duration-300'>
+        <form method='dialog' className='tw:modal-box tw:transition-none'>
+          <button className='tw:btn tw:btn-sm tw:btn-circle tw:btn-ghost tw:absolute tw:right-2 tw:top-2 tw:focus:outline-hidden'>
             ✕
           </button>
           {children}
         </form>
-        <form method='dialog' className='tw-modal-backdrop'>
+        <form method='dialog' className='tw:modal-backdrop'>
           <button>close</button>
         </form>
       </dialog>
diff --git a/src/Components/Gaming/Quests.tsx b/src/Components/Gaming/Quests.tsx
index 5c7d8a9c..944a2633 100644
--- a/src/Components/Gaming/Quests.tsx
+++ b/src/Components/Gaming/Quests.tsx
@@ -39,56 +39,56 @@ export function Quests() {
   return (
     <>
       {questsOpen ? (
-        <div className='tw-card tw-w-48 tw-bg-base-100 tw-shadow-xl tw-absolute tw-bottom-4 tw-left-4 tw-z-[2000]'>
-          <div className='tw-card-body tw-p-4 tw-pt-0'>
-            <div className='tw-card-actions tw-justify-end'>
+        <div className='tw:card tw:w-48 tw:bg-base-100 tw:shadow-xl tw:absolute tw:bottom-4 tw:left-4 tw:z-2000'>
+          <div className='tw:card-body tw:p-4 tw:pt-0'>
+            <div className='tw:card-actions tw:justify-end'>
               <label
-                className='tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw-absolute tw-right-1 tw-top-1'
+                className='tw:btn tw:btn-sm tw:btn-circle tw:btn-ghost tw:absolute tw:right-1 tw:top-1'
                 onClick={() => setQuestsOpen(false)}
               >
                 ✕
               </label>
             </div>
-            <h2 className='tw-card-title tw-m-auto '>
+            <h2 className='tw:card-title tw:m-auto '>
               Level 1
               <QuestionMarkCircleIcon />
             </h2>
-            <ul className='tw-flex-row'>
+            <ul className='tw:flex-row'>
               <li>
-                <label className='tw-label tw-justify-normal tw-pt-1 tw-pb-0'>
+                <label className='tw:label tw:justify-normal tw:pt-1 tw:pb-0'>
                   <input
                     type='checkbox'
                     readOnly={true}
-                    className='tw-checkbox tw-checkbox-xs tw-checkbox-success'
+                    className='tw:checkbox tw:checkbox-xs tw:checkbox-success'
                     checked={isAuthenticated || false}
                   />
-                  <span className='tw-text-sm tw-label-text tw-mx-2'>Sign Up</span>
+                  <span className='tw:text-sm tw:label-text tw:mx-2'>Sign Up</span>
                 </label>
               </li>
               <li>
-                <label className='tw-label tw-justify-normal tw-pt-1 tw-pb-0'>
+                <label className='tw:label tw:justify-normal tw:pt-1 tw:pb-0'>
                   <input
                     type='checkbox'
                     readOnly={true}
-                    className='tw-checkbox tw-checkbox-xs tw-checkbox-success'
+                    className='tw:checkbox tw:checkbox-xs tw:checkbox-success'
                     checked={!!profile?.text}
                   />
-                  <span className='tw-text-sm tw-label-text tw-mx-2'>Fill Profile</span>
+                  <span className='tw:text-sm tw:label-text tw:mx-2'>Fill Profile</span>
                 </label>
               </li>
               <li>
-                <label className='tw-label tw-justify-normal tw-pt-1 tw-pb-0'>
+                <label className='tw:label tw:justify-normal tw:pt-1 tw:pb-0'>
                   <input
                     type='checkbox'
                     readOnly={true}
-                    className='tw-checkbox tw-checkbox-xs tw-checkbox-success'
+                    className='tw:checkbox tw:checkbox-xs tw:checkbox-success'
                     checked={!!profile?.image}
                   />
-                  <span className='tw-text-sm tw-label-text tw-mx-2'>Upload Avatar</span>
+                  <span className='tw:text-sm tw:label-text tw:mx-2'>Upload Avatar</span>
                 </label>
               </li>
             </ul>
-            {/**                 <button className='tw-btn tw-btn-xs tw-btn-neutral tw-w-fit tw-self-center tw-mt-1'>Next &gt;</button> */}{' '}
+            {/**                 <button className='tw:btn tw:btn-xs tw:btn-neutral tw:w-fit tw:self-center tw:mt-1'>Next &gt;</button> */}{' '}
           </div>
         </div>
       ) : (
diff --git a/src/Components/Input/Autocomplete.tsx b/src/Components/Input/Autocomplete.tsx
index b39bce94..f98dca30 100644
--- a/src/Components/Input/Autocomplete.tsx
+++ b/src/Components/Input/Autocomplete.tsx
@@ -91,9 +91,10 @@ export const Autocomplete = ({
         onChange={(e) => handleChange(e)}
         tabIndex='-1'
         onKeyDown={handleKeyDown}
+        className='tw:border-none tw:focus:outline-none tw:focus:ring-0 tw:mt-5'
       />
       <ul
-        className={`tw-absolute tw-z-[4000] ${filteredSuggestions.length > 0 && 'tw-bg-base-100 tw-rounded-xl tw-p-2'}`}
+        className={`tw:absolute tw:z-4000 ${filteredSuggestions.length > 0 && 'tw:bg-base-100 tw:rounded-xl tw:p-2'}`}
       >
         {filteredSuggestions.map((suggestion, index) => (
           <li key={index} onClick={() => handleSuggestionClick(suggestion)}>
diff --git a/src/Components/Input/ComboBoxInput.tsx b/src/Components/Input/ComboBoxInput.tsx
index 62711c4d..398e8005 100644
--- a/src/Components/Input/ComboBoxInput.tsx
+++ b/src/Components/Input/ComboBoxInput.tsx
@@ -14,7 +14,7 @@ const ComboBoxInput = ({ id, options, value, onValueChange }: ComboBoxProps) =>
   return (
     <select
       id={id}
-      className='tw-form-select tw-block tw-w-full tw-py-2 tw-px-4 tw-border tw-border-gray-300 rounded-md tw-shadow-sm tw-text-sm focus:tw-outline-none focus:tw-ring-indigo-500 focus:tw-border-indigo-500 sm:tw-text-sm'
+      className='tw:form-select tw:block tw:w-full tw:py-2 tw:px-4 tw:border tw:border-gray-300 rounded-md tw:shadow-sm tw:text-sm tw:focus:outline-hidden tw:focus:ring-indigo-500 tw:focus:border-indigo-500 tw:sm:text-sm'
       onChange={handleChange}
       defaultValue={value}
     >
diff --git a/src/Components/Input/TextAreaInput.tsx b/src/Components/Input/TextAreaInput.tsx
index 660b0990..2ab53264 100644
--- a/src/Components/Input/TextAreaInput.tsx
+++ b/src/Components/Input/TextAreaInput.tsx
@@ -42,10 +42,10 @@ export function TextAreaInput({
   }
 
   return (
-    <div className={`tw-form-control tw-w-full ${containerStyle ?? ''}`}>
+    <div className={`tw:form-control tw:w-full ${containerStyle ?? ''}`}>
       {labelTitle ? (
-        <label className='tw-label'>
-          <span className={`tw-label-text tw-text-base-content ${labelStyle ?? ''}`}>
+        <label className='tw:label'>
+          <span className={`tw:label-text tw:text-base-content ${labelStyle ?? ''}`}>
             {labelTitle}
           </span>
         </label>
@@ -55,7 +55,7 @@ export function TextAreaInput({
         ref={ref}
         value={inputValue}
         name={dataField}
-        className={`tw-textarea tw-textarea-bordered tw-w-full tw-leading-5 ${inputStyle ?? ''}`}
+        className={`tw:textarea tw:textarea-bordered tw:w-full tw:leading-5 ${inputStyle ?? ''}`}
         placeholder={placeholder ?? ''}
         onChange={handleChange}
       ></textarea>
diff --git a/src/Components/Input/TextInput.cy.tsx b/src/Components/Input/TextInput.cy.tsx
index 83b6263a..d0fc069a 100644
--- a/src/Components/Input/TextInput.cy.tsx
+++ b/src/Components/Input/TextInput.cy.tsx
@@ -9,9 +9,9 @@ describe('<TextInput />', () => {
     cy.get('input').should('have.attr', 'type', 'text')
     cy.get('input').should('have.attr', 'placeholder', '')
     cy.get('input').should('have.attr', 'required')
-    cy.get('input').should('have.class', 'tw-input')
-    cy.get('input').should('have.class', 'tw-input-bordered')
-    cy.get('input').should('have.class', 'tw-w-full')
+    cy.get('input').should('have.class', 'input')
+    cy.get('input').should('have.class', 'input-bordered')
+    cy.get('input').should('have.class', 'tw:w-full')
   })
 
   it('renders with given labelTitle', () => {
diff --git a/src/Components/Input/TextInput.tsx b/src/Components/Input/TextInput.tsx
index ef2e3ff2..0feab982 100644
--- a/src/Components/Input/TextInput.tsx
+++ b/src/Components/Input/TextInput.tsx
@@ -47,10 +47,10 @@ export function TextInput({
   }
 
   return (
-    <div className={`tw-form-control ${containerStyle ?? ''}`}>
+    <div className={`tw:form-control ${containerStyle ?? ''}`}>
       {labelTitle ? (
-        <label className='tw-label'>
-          <span className={`tw-label-text tw-text-base-content ${labelStyle ?? ''}`}>
+        <label className='tw:label'>
+          <span className={`tw:label-text tw:text-base-content ${labelStyle ?? ''}`}>
             {labelTitle}
           </span>
         </label>
@@ -64,7 +64,7 @@ export function TextInput({
         placeholder={placeholder ?? ''}
         autoComplete={autocomplete}
         onChange={handleChange}
-        className={`tw-input tw-input-bordered tw-w-full ${inputStyle ?? ''}`}
+        className={`tw:input tw:input-bordered tw:w-full ${inputStyle ?? ''}`}
       />
     </div>
   )
diff --git a/src/Components/Input/__snapshots__/ComboBoxInput.spec.tsx.snap b/src/Components/Input/__snapshots__/ComboBoxInput.spec.tsx.snap
index 18ef547d..cfcc9eb9 100644
--- a/src/Components/Input/__snapshots__/ComboBoxInput.spec.tsx.snap
+++ b/src/Components/Input/__snapshots__/ComboBoxInput.spec.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<ComboBoxInput /> > renders properly 1`] = `
 <select
-  class="tw-form-select tw-block tw-w-full tw-py-2 tw-px-4 tw-border tw-border-gray-300 rounded-md tw-shadow-sm tw-text-sm focus:tw-outline-none focus:tw-ring-indigo-500 focus:tw-border-indigo-500 sm:tw-text-sm"
+  class="tw:form-select tw:block tw:w-full tw:py-2 tw:px-4 tw:border tw:border-gray-300 rounded-md tw:shadow-sm tw:text-sm tw:focus:outline-hidden tw:focus:ring-indigo-500 tw:focus:border-indigo-500 tw:sm:text-sm"
 >
   <option
     value="Option 1"
diff --git a/src/Components/Input/__snapshots__/TextAreaInput.spec.tsx.snap b/src/Components/Input/__snapshots__/TextAreaInput.spec.tsx.snap
index 48991cae..75a82c0f 100644
--- a/src/Components/Input/__snapshots__/TextAreaInput.spec.tsx.snap
+++ b/src/Components/Input/__snapshots__/TextAreaInput.spec.tsx.snap
@@ -2,19 +2,19 @@
 
 exports[`<TextAreaInput /> > labelTitle > sets label 1`] = `
 <div
-  class="tw-form-control tw-w-full "
+  class="tw:form-control tw:w-full "
 >
   <label
-    class="tw-label"
+    class="tw:label"
   >
     <span
-      class="tw-label-text tw-text-base-content "
+      class="tw:label-text tw:text-base-content "
     >
       My Title
     </span>
   </label>
   <textarea
-    class="tw-textarea tw-textarea-bordered tw-w-full tw-leading-5 "
+    class="tw:textarea tw:textarea-bordered tw:w-full tw:leading-5 "
     placeholder=""
     required=""
   />
@@ -23,10 +23,10 @@ exports[`<TextAreaInput /> > labelTitle > sets label 1`] = `
 
 exports[`<TextAreaInput /> > renders properly 1`] = `
 <div
-  class="tw-form-control tw-w-full "
+  class="tw:form-control tw:w-full "
 >
   <textarea
-    class="tw-textarea tw-textarea-bordered tw-w-full tw-leading-5 "
+    class="tw:textarea tw:textarea-bordered tw:w-full tw:leading-5 "
     placeholder=""
     required=""
   />
diff --git a/src/Components/Input/__snapshots__/TextInput.spec.tsx.snap b/src/Components/Input/__snapshots__/TextInput.spec.tsx.snap
index 1ebdb5e4..2c914699 100644
--- a/src/Components/Input/__snapshots__/TextInput.spec.tsx.snap
+++ b/src/Components/Input/__snapshots__/TextInput.spec.tsx.snap
@@ -2,19 +2,19 @@
 
 exports[`<TextInput /> > labelTitle > sets label 1`] = `
 <div
-  class="tw-form-control "
+  class="tw:form-control "
 >
   <label
-    class="tw-label"
+    class="tw:label"
   >
     <span
-      class="tw-label-text tw-text-base-content "
+      class="tw:label-text tw:text-base-content "
     >
       My Title
     </span>
   </label>
   <input
-    class="tw-input tw-input-bordered tw-w-full "
+    class="tw:input tw:input-bordered tw:w-full "
     placeholder=""
     required=""
     type="text"
@@ -25,10 +25,10 @@ exports[`<TextInput /> > labelTitle > sets label 1`] = `
 
 exports[`<TextInput /> > renders properly 1`] = `
 <div
-  class="tw-form-control "
+  class="tw:form-control "
 >
   <input
-    class="tw-input tw-input-bordered tw-w-full "
+    class="tw:input tw:input-bordered tw:w-full "
     placeholder=""
     required=""
     type="text"
diff --git a/src/Components/Map/Subcomponents/AddButton.tsx b/src/Components/Map/Subcomponents/AddButton.tsx
index c1a46a54..5781a1ab 100644
--- a/src/Components/Map/Subcomponents/AddButton.tsx
+++ b/src/Components/Map/Subcomponents/AddButton.tsx
@@ -31,11 +31,14 @@ export default function AddButton({
   return (
     <>
       {canAddItems() ? (
-        <div className='tw-dropdown tw-dropdown-top tw-dropdown-end tw-dropdown-hover tw-z-500 tw-absolute tw-right-4 tw-bottom-4'>
-          <label tabIndex={0} className='tw-z-500 tw-btn tw-btn-circle tw-shadow tw-bg-base-100'>
-            <SVG src={PlusSVG} className='tw-h-5 tw-w-5' />
+        <div className='tw:dropdown tw:dropdown-top tw:dropdown-end tw:dropdown-hover tw:z-500 tw:absolute tw:right-4 tw:bottom-4'>
+          <label
+            tabIndex={0}
+            className='tw:z-500 tw:btn tw:btn-circle tw:btn-lg  tw:shadow tw:bg-base-100'
+          >
+            <SVG src={PlusSVG} className='tw:h-5 tw:w-5' />
           </label>
-          <ul tabIndex={0} className='tw-dropdown-content tw-pr-1 tw-list-none'>
+          <ul tabIndex={0} className='tw:dropdown-content tw:pr-1 tw:list-none'>
             {layers.map(
               (layer) =>
                 layer.api?.createItem &&
@@ -43,10 +46,10 @@ export default function AddButton({
                 layer.listed && (
                   <li key={layer.name}>
                     <a>
-                      <div className='tw-tooltip tw-tooltip-left' data-tip={layer.menuText}>
+                      <div className='tw:tooltip tw:tooltip-left' data-tip={layer.menuText}>
                         <button
                           tabIndex={0}
-                          className='tw-z-500  tw-border-0 tw-pl-2 tw-p-0 tw-mb-3 tw-w-10 tw-h-10 tw-cursor-pointer tw-rounded-full tw-mouse tw-drop-shadow-md tw-transition tw-ease-in tw-duration-200 focus:tw-outline-none'
+                          className='tw:z-500  tw:border-0 tw:pl-2 tw:p-0 tw:mb-3 tw:w-10 tw:h-10 tw:cursor-pointer tw:rounded-full tw:mouse tw:drop-shadow-md tw:transition tw:ease-in tw:duration-200 tw:focus:outline-hidden'
                           style={{ backgroundColor: layer.menuColor || '#777' }}
                           onClick={() => {
                             triggerAction(layer)
@@ -58,7 +61,7 @@ export default function AddButton({
                         >
                           <img
                             src={layer.menuIcon}
-                            className='tw-h-6 tw-w-6 tw-text-white'
+                            className='tw:h-6 tw:w-6 tw:text-white'
                             style={{ filter: 'invert(100%) brightness(200%)' }}
                           />
                         </button>
diff --git a/src/Components/Map/Subcomponents/Controls/Control.tsx b/src/Components/Map/Subcomponents/Controls/Control.tsx
index 3587a8be..b7671107 100644
--- a/src/Components/Map/Subcomponents/Controls/Control.tsx
+++ b/src/Components/Map/Subcomponents/Controls/Control.tsx
@@ -26,7 +26,7 @@ export const Control = ({
     <div
       ref={controlContainerRef}
       style={{ zIndex }}
-      className={`${absolute && 'tw-absolute'} tw-z-[999] tw-flex-col ${position === 'topLeft' && 'tw-top-4 tw-left-4'} ${position === 'bottomLeft' && 'tw-bottom-4 tw-left-4'} ${position === 'topRight' && 'tw-bottom-4 tw-right-4'} ${position === 'bottomRight' && 'tw-bottom-4 tw-right-4'}`}
+      className={`${absolute && 'tw:absolute'} tw:z-999 tw:flex-col ${position === 'topLeft' && 'tw:top-4 tw:left-4'} ${position === 'bottomLeft' && 'tw:bottom-4 tw:left-4'} ${position === 'topRight' && 'tw:bottom-4 tw:right-4'} ${position === 'bottomRight' && 'tw:bottom-4 tw:right-4'}`}
     >
       {children}
     </div>
diff --git a/src/Components/Map/Subcomponents/Controls/FilterControl.tsx b/src/Components/Map/Subcomponents/Controls/FilterControl.tsx
index e5c198af..e5c6c340 100644
--- a/src/Components/Map/Subcomponents/Controls/FilterControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/FilterControl.tsx
@@ -28,32 +28,32 @@ export function FilterControl() {
   const visibleGroupTypes = useVisibleGroupType()
 
   return (
-    <div className='tw-card tw-bg-base-100 tw-shadow-xl tw-mt-2 tw-w-fit'>
+    <div className='tw:card tw:bg-base-100 tw:shadow-xl tw:mt-2 tw:w-fit'>
       {open ? (
-        <div className='tw-card-body tw-pr-4 tw-min-w-[8rem] tw-p-2 tw-w-fit tw-transition-all tw-duration-300'>
+        <div className='tw:card-body tw:pr-4 tw:min-w-[8rem] tw:p-2 tw:w-fit tw:transition-all tw:duration-300'>
           <label
-            className='tw-btn tw-btn-sm tw-rounded-2xl tw-btn-circle tw-btn-ghost hover:tw-bg-transparent tw-absolute tw-right-0 tw-top-0 tw-text-gray-600'
+            className='tw:btn tw:btn-sm tw:rounded-2xl tw:btn-circle tw:btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600'
             onClick={() => {
               setOpen(false)
             }}
           >
-            <p className='tw-text-center '>✕</p>
+            <p className='tw:text-center '>✕</p>
           </label>
-          <ul className='tw-flex-row'>
+          <ul className='tw:flex-row'>
             {groupTypes.map((groupType) => (
               <li key={groupType.value}>
                 <label
                   htmlFor={groupType.value}
-                  className='tw-label tw-justify-normal tw-pt-1 tw-pb-1'
+                  className='tw:label tw:justify-normal tw:pt-1 tw:pb-1'
                 >
                   <input
                     id={groupType.value}
                     onChange={() => toggleVisibleGroupType(groupType.value)}
                     type='checkbox'
-                    className='tw-checkbox tw-checkbox-xs tw-checkbox-success'
+                    className='tw:checkbox tw:checkbox-xs tw:checkbox-success'
                     checked={isGroupTypeVisible(groupType.value)}
                   />
-                  <span className='tw-text-sm tw-label-text tw-mx-2 tw-cursor-pointer'>
+                  <span className='tw:text-sm tw:label-text tw:mx-2 tw:cursor-pointer'>
                     {groupType.text}
                   </span>
                 </label>
@@ -62,17 +62,17 @@ export function FilterControl() {
           </ul>
         </div>
       ) : (
-        <div className='tw-indicator'>
+        <div className='tw:indicator'>
           {visibleGroupTypes.length < groupTypes.length && (
-            <span className='tw-indicator-item tw-badge tw-badge-success tw-h-4 tw-p-2 tw-translate-x-1/3 -tw-translate-y-1/3 tw-border-0'></span>
+            <span className='tw:indicator-item tw:badge tw:badge-success tw:h-4 tw:p-2 tw:translate-x-1/3 tw:-translate-y-1/3 tw:border-0'></span>
           )}
           <div
-            className='tw-card-body hover:tw-bg-slate-300 tw-card tw-p-2 tw-h-10 tw-w-10 tw-transition-all tw-duration-300 hover:tw-cursor-pointer'
+            className='tw:card-body tw:hover:bg-slate-300 tw:card tw:p-2 tw:h-10 tw:w-10 tw:transition-all tw:duration-300 tw:hover:cursor-pointer'
             onClick={() => {
               setOpen(true)
             }}
           >
-            <FunnelIcon className='size-6 tw-stroke-[2.5]' />
+            <FunnelIcon className='size-6 tw:stroke-[2.5]' />
           </div>
         </div>
       )}
diff --git a/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx b/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx
index 83c9e72b..5e7c9d6e 100644
--- a/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx
@@ -9,15 +9,15 @@ export const GratitudeControl = () => {
 
   if (isAuthenticated) {
     return (
-      <div className='tw-card tw-bg-base-100 tw-shadow-xl tw-mt-2 tw-w-fit'>
+      <div className='tw:card tw:bg-base-100 tw:shadow-xl tw:mt-2 tw:w-fit'>
         {
           <div
-            className='tw-card-body hover:tw-bg-slate-300 tw-card tw-p-2 tw-h-10 tw-w-10 tw-transition-all tw-duration-300 hover:tw-cursor-pointer'
+            className='tw:card-body tw:hover:bg-slate-300 tw:card tw:p-2 tw:h-10 tw:w-10 tw:transition-all tw:duration-300 tw:hover:cursor-pointer'
             onClick={() => {
               navigate('/select-user')
             }}
           >
-            <HeartIcon className='tw-stroke-[2.5]' />
+            <HeartIcon className='tw:stroke-[2.5]' />
           </div>
         }
       </div>
diff --git a/src/Components/Map/Subcomponents/Controls/LayerControl.tsx b/src/Components/Map/Subcomponents/Controls/LayerControl.tsx
index 69abc40a..64d60b95 100644
--- a/src/Components/Map/Subcomponents/Controls/LayerControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/LayerControl.tsx
@@ -14,34 +14,34 @@ export function LayerControl() {
   const toggleVisibleLayer = useToggleVisibleLayer()
 
   return (
-    <div className='tw-card tw-bg-base-100 tw-shadow-xl tw-mt-2 tw-w-fit'>
+    <div className='tw:card tw:bg-base-100 tw:shadow-xl tw:mt-2 tw:w-fit'>
       {open ? (
-        <div className='tw-card-body tw-pr-4 tw-min-w-[8rem] tw-p-2 tw-transition-all tw-w-fit tw-duration-300'>
+        <div className='tw:card-body tw:pr-4 tw:min-w-[8rem] tw:p-2 tw:transition-all tw:w-fit tw:duration-300'>
           <label
-            className='tw-btn tw-btn-sm tw-rounded-2xl tw-btn-circle tw-btn-ghost hover:tw-bg-transparent tw-absolute tw-right-0 tw-top-0 tw-text-gray-600'
+            className='tw:btn tw:btn-sm tw:rounded-2xl tw:btn-circle tw:btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600'
             onClick={() => {
               setOpen(false)
             }}
           >
-            <p className='tw-text-center '>✕</p>
+            <p className='tw:text-center '>✕</p>
           </label>
-          <ul className='tw-flex-row'>
+          <ul className='tw:flex-row'>
             {layers.map(
               (layer) =>
                 layer.listed && (
                   <li key={layer.name}>
                     <label
                       htmlFor={layer.name}
-                      className='tw-label tw-justify-normal tw-pt-1 tw-pb-1'
+                      className='tw:label tw:justify-normal tw:pt-1 tw:pb-1 tw:text-base-content'
                     >
                       <input
                         id={layer.name}
                         onChange={() => toggleVisibleLayer(layer)}
                         type='checkbox'
-                        className='tw-checkbox tw-checkbox-xs tw-checkbox-success'
+                        className='tw:checkbox tw:checkbox-xs tw:checkbox-success'
                         checked={isLayerVisible(layer)}
                       />
-                      <span className='tw-text-sm tw-label-text tw-mx-2 tw-cursor-pointer'>
+                      <span className='tw:text-sm tw:label-text tw:mx-2 tw:cursor-pointer'>
                         {layer.name}
                       </span>
                     </label>
@@ -52,7 +52,7 @@ export function LayerControl() {
         </div>
       ) : (
         <div
-          className='tw-card-body hover:tw-bg-slate-300 tw-card tw-p-2 tw-h-10 tw-w-10 tw-transition-all tw-duration-300 hover:tw-cursor-pointer'
+          className='tw:card-body tw:hover:bg-slate-300 tw:card tw:p-2 tw:h-10 tw:w-10 tw:transition-all tw:duration-300 tw:hover:cursor-pointer'
           onClick={() => {
             setOpen(true)
           }}
diff --git a/src/Components/Map/Subcomponents/Controls/LocateControl.tsx b/src/Components/Map/Subcomponents/Controls/LocateControl.tsx
index ace5b9e0..ecc3a061 100644
--- a/src/Components/Map/Subcomponents/Controls/LocateControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/LocateControl.tsx
@@ -43,9 +43,9 @@ export const LocateControl = () => {
 
   return (
     <>
-      <div className='tw-card tw-h-12 tw-w-12 tw-bg-base-100 tw-shadow-xl tw-items-center tw-justify-center  hover:tw-bg-slate-300 hover:tw-cursor-pointer tw-transition-all tw-duration-300 tw-ml-2'>
+      <div className='tw:card tw:flex-none tw:h-12 tw:w-12 tw:bg-base-100 tw:shadow-xl tw:items-center tw:justify-center  tw:hover:bg-slate-300 tw:hover:cursor-pointer tw:transition-all tw:duration-300 tw:ml-2'>
         <div
-          className='tw-card-body tw-card tw-p-2 tw-h-10 tw-w-10  '
+          className='tw:card-body tw:card tw:p-2 tw:h-10 tw:w-10  '
           onClick={() => {
             if (active) {
               lc.stop()
@@ -57,11 +57,11 @@ export const LocateControl = () => {
           }}
         >
           {loading ? (
-            <span className='tw-loading tw-loading-spinner tw-loading-md tw-mt-1'></span>
+            <span className='tw:loading tw:loading-spinner tw:loading-md tw:mt-1'></span>
           ) : (
             <SVG
               src={TargetSVG}
-              className='tw-mt-1 tw-p-[1px]'
+              className='tw:mt-1 tw:p-[1px]'
               style={{ fill: `${active ? '#fc8702' : 'currentColor'}` }}
             />
           )}
diff --git a/src/Components/Map/Subcomponents/Controls/QuestControl.tsx b/src/Components/Map/Subcomponents/Controls/QuestControl.tsx
index cbc2e859..bb2b9f94 100644
--- a/src/Components/Map/Subcomponents/Controls/QuestControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/QuestControl.tsx
@@ -11,14 +11,14 @@ export function QuestControl() {
         ''
       ) : (
         <div
-          className='tw-card tw-bg-base-100 tw-shadow-xl tw-my-2 tw-w-10'
+          className='tw:card tw:bg-base-100 tw:shadow-xl tw:my-2 tw:w-10'
           onClick={(e) => e.stopPropagation()}
         >
           <div
-            className='tw-card-body hover:tw-bg-slate-300 tw-rounded-2xl tw-p-2 tw-h-10 tw-w-10 tw-transition-all tw-duration-300 hover:tw-cursor-pointer'
+            className='tw:card-body tw:hover:bg-slate-300 tw:rounded-2xl tw:p-2 tw:h-10 tw:w-10 tw:transition-all tw:duration-300 tw:hover:cursor-pointer'
             onClick={() => setQuestsOpen(true)}
           >
-            <img src={FistSVG} alt='Quests' className='tw-h-[2em]' />
+            <img src={FistSVG} alt='Quests' className='tw:h-[2em]' />
           </div>
         </div>
       )}
diff --git a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
index 42ea7c56..f95bb82a 100644
--- a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx
@@ -103,16 +103,16 @@ export const SearchControl = () => {
   return (
     <>
       {!(windowDimensions.height < 500 && popupOpen && hideSuggestions) && (
-        <div className='tw-w-[calc(100vw-2rem)] tw-max-w-[22rem] '>
-          <div className='tw-flex tw-flex-row'>
+        <div className='tw:w-[calc(100vw-2rem)] tw:max-w-[22rem] '>
+          <div className='tw:flex tw:flex-row'>
             {appState.embedded && <SidebarControl />}
-            <div className='tw-relative'>
+            <div className='tw:relative tw:shrink tw:max-w-69 tw:w-full'>
               <input
                 type='text'
                 placeholder='search ...'
                 autoComplete='off'
                 value={value}
-                className='tw-input tw-input-bordered tw-grow tw-shadow-xl tw-rounded-lg tw-pr-12'
+                className='tw:input tw:input-bordered tw:h-12 tw:grow tw:shadow-xl tw:rounded-box tw:pr-12 tw:w-full'
                 ref={searchInput}
                 onChange={(e) => setValue(e.target.value)}
                 onFocus={() => {
@@ -123,7 +123,7 @@ export const SearchControl = () => {
               />
               {value.length > 0 && (
                 <button
-                  className='tw-btn tw-btn-sm tw-btn-circle tw-absolute tw-right-2 tw-top-2'
+                  className='tw:btn tw:btn-sm tw:btn-circle tw:absolute tw:right-2 tw:top-2'
                   onClick={() => setValue('')}
                 >
                   ✕
@@ -140,13 +140,13 @@ export const SearchControl = () => {
           value.length === 0 ? (
             ''
           ) : (
-            <div className='tw-card tw-card-body tw-bg-base-100 tw-p-4 tw-mt-2 tw-shadow-xl tw-overflow-y-auto tw-max-h-[calc(100dvh-152px)] tw-absolute tw-z-3000'>
+            <div className='tw:card tw:card-body tw:bg-base-100 tw:p-4 tw:mt-2 tw:shadow-xl tw:overflow-y-auto tw:max-h-[calc(100dvh-152px)] tw:absolute tw:z-3000 tw:w-83'>
               {tagsResults.length > 0 && (
-                <div className='tw-flex tw-flex-wrap'>
+                <div className='tw:flex tw:flex-wrap'>
                   {tagsResults.slice(0, 3).map((tag) => (
                     <div
                       key={tag.name}
-                      className='tw-rounded-2xl tw-text-white tw-p-1 tw-px-4 tw-shadow-md tw-card tw-mr-2 tw-mb-2 tw-cursor-pointer'
+                      className='tw:rounded-2xl tw:text-white tw:p-1 tw:px-4 tw:shadow-md tw:card tw:mr-2 tw:mb-2 tw:cursor-pointer'
                       style={{ backgroundColor: tag.color }}
                       onClick={() => {
                         addFilterTag(tag)
@@ -159,12 +159,12 @@ export const SearchControl = () => {
               )}
 
               {itemsResults.length > 0 && tagsResults.length > 0 && (
-                <hr className='tw-opacity-50'></hr>
+                <hr className='tw:opacity-50'></hr>
               )}
               {itemsResults.slice(0, 5).map((item) => (
                 <div
                   key={item.id}
-                  className='tw-cursor-pointer hover:tw-font-bold tw-flex tw-flex-row'
+                  className='tw:cursor-pointer tw:hover:font-bold tw:flex tw:flex-row'
                   onClick={() => {
                     const marker = Object.entries(leafletRefs).find((r) => r[1].item === item)?.[1]
                       .marker
@@ -180,7 +180,7 @@ export const SearchControl = () => {
                   {item.layer?.menuIcon ? (
                     <SVG
                       src={item.layer.menuIcon}
-                      className='tw-text-current tw-mr-2 tw-mt-0 tw-w-5'
+                      className='tw:text-current tw:mr-2 tw:mt-0 tw:w-5'
                       preProcessor={(code: string): string => {
                         code = code.replace(/fill=".*?"/g, 'fill="currentColor"')
                         code = code.replace(/stroke=".*?"/g, 'stroke="currentColor"')
@@ -188,13 +188,13 @@ export const SearchControl = () => {
                       }}
                     />
                   ) : (
-                    <div className='tw-w-5' />
+                    <div className='tw:w-5' />
                   )}
                   <div>
-                    <div className='tw-text-sm tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-max-w-[17rem]'>
+                    <div className='tw:text-sm tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'>
                       {item.name}
                     </div>
-                    <div className='tw-text-xs tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-max-w-[17rem]'>
+                    <div className='tw:text-xs tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'>
                       {item.text}
                     </div>
                   </div>
@@ -202,11 +202,11 @@ export const SearchControl = () => {
               ))}
               {Array.from(geoResults).length > 0 &&
                 (itemsResults.length > 0 || tagsResults.length > 0) && (
-                  <hr className='tw-opacity-50'></hr>
+                  <hr className='tw:opacity-50'></hr>
                 )}
               {Array.from(geoResults).map((geo) => (
                 <div
-                  className='tw-flex tw-flex-row hover:tw-font-bold tw-cursor-pointer'
+                  className='tw:flex tw:flex-row tw:hover:font-bold tw:cursor-pointer'
                   key={Math.random()}
                   onClick={() => {
                     searchInput.current?.blur()
@@ -215,7 +215,7 @@ export const SearchControl = () => {
                     })
                       .addTo(map)
                       .bindPopup(
-                        `<h3 class="tw-text-base tw-font-bold">${geo?.properties.name ? geo?.properties.name : value}<h3>${capitalizeFirstLetter(geo?.properties?.osm_value)}`,
+                        `<h3 class="tw:text-base tw:font-bold">${geo?.properties.name ? geo?.properties.name : value}<h3>${capitalizeFirstLetter(geo?.properties?.osm_value)}`,
                       )
                       .openPopup()
                       .addEventListener('popupclose', (e) => {
@@ -238,12 +238,12 @@ export const SearchControl = () => {
                     hide()
                   }}
                 >
-                  <MagnifyingGlassIcon className='tw-text-current tw-mr-2 tw-mt-0 tw-w-5' />
+                  <MagnifyingGlassIcon className='tw:text-current tw:mr-2 tw:mt-0 tw:w-5' />
                   <div>
-                    <div className='tw-text-sm tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-max-w-[17rem]'>
+                    <div className='tw:text-sm tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'>
                       {geo?.properties.name ? geo?.properties.name : value}
                     </div>
-                    <div className='tw-text-xs tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-max-w-[17rem]'>
+                    <div className='tw:text-xs tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'>
                       {geo?.properties?.city && `${capitalizeFirstLetter(geo?.properties?.city)}, `}{' '}
                       {geo?.properties?.osm_value &&
                         geo?.properties?.osm_value !== 'yes' &&
@@ -261,7 +261,7 @@ export const SearchControl = () => {
               ))}
               {isGeoCoordinate(value) && (
                 <div
-                  className='tw-flex tw-flex-row hover:tw-font-bold tw-cursor-pointer'
+                  className='tw:flex tw:flex-row tw:hover:font-bold tw:cursor-pointer'
                   onClick={() => {
                     marker(
                       new LatLng(extractCoordinates(value)![0], extractCoordinates(value)![1]),
@@ -271,7 +271,7 @@ export const SearchControl = () => {
                     )
                       .addTo(map)
                       .bindPopup(
-                        `<h3 class="tw-text-base tw-font-bold">${extractCoordinates(value)![0]}, ${extractCoordinates(value)![1]}</h3>`,
+                        `<h3 class="tw:text-base tw:font-bold">${extractCoordinates(value)![0]}, ${extractCoordinates(value)![1]}</h3>`,
                       )
                       .openPopup()
                       .addEventListener('popupclose', (e) => {
@@ -285,12 +285,12 @@ export const SearchControl = () => {
                     )
                   }}
                 >
-                  <FlagIcon className='tw-text-current tw-mr-2 tw-mt-0 tw-w-4' />
+                  <FlagIcon className='tw:text-current tw:mr-2 tw:mt-0 tw:w-4' />
                   <div>
-                    <div className='tw-text-sm tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-max-w-[17rem]'>
+                    <div className='tw:text-sm tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'>
                       {value}
                     </div>
-                    <div className='tw-text-xs tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap tw-max-w-[17rem]'>
+                    <div className='tw:text-xs tw:overflow-hidden tw:text-ellipsis tw:whitespace-nowrap tw:max-w-[17rem]'>
                       {'Coordiante'}
                     </div>
                   </div>
diff --git a/src/Components/Map/Subcomponents/Controls/SidebarControl.tsx b/src/Components/Map/Subcomponents/Controls/SidebarControl.tsx
index 6172a78c..464e4364 100644
--- a/src/Components/Map/Subcomponents/Controls/SidebarControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/SidebarControl.tsx
@@ -1,21 +1,21 @@
 import Bars3Icon from '@heroicons/react/16/solid/Bars3Icon'
 
+import { useAppState, useSetAppState } from '#components/AppShell/hooks/useAppState'
+
 // Converts leaflet.locatecontrol to a React Component
 export const SidebarControl = () => {
+  const appState = useAppState()
+  const setAppState = useSetAppState()
+  const toggleSidebar = () => {
+    setAppState({ sideBarOpen: !appState.sideBarOpen })
+  }
   return (
     <>
-      <div className='tw-card tw-bg-base-100 tw-shadow-xl tw-items-center tw-justify-center  hover:tw-bg-slate-300 hover:tw-cursor-pointer tw-transition-all tw-duration-300 tw-mr-2 tw-h-12 tw-w-12 '>
-        <div className='tw-card-body tw-card tw-p-0'>
-          <button
-            className='tw-btn tw-btn-square tw-btn-ghost tw-rounded-2xl'
-            data-te-sidenav-toggle-ref
-            data-te-target='#sidenav'
-            aria-controls='#sidenav'
-            aria-haspopup='true'
-          >
-            <Bars3Icon className='tw-inline-block tw-w-5 tw-h-5' />
-          </button>
-        </div>
+      <div
+        className='tw:card tw:justify-center tw:items-center tw:bg-base-100 tw:flex-none tw:shadow-xl tw:px-0 tw:hover:bg-slate-300 tw:hover:cursor-pointer tw:transition-all tw:duration-300 tw:mr-2 tw:h-12 tw:w-12 '
+        onClick={() => toggleSidebar()}
+      >
+        <Bars3Icon className='tw:inline-block tw:w-5 tw:h-5' />
       </div>
     </>
   )
diff --git a/src/Components/Map/Subcomponents/Controls/TagsControl.tsx b/src/Components/Map/Subcomponents/Controls/TagsControl.tsx
index a4bfa859..d793cccf 100644
--- a/src/Components/Map/Subcomponents/Controls/TagsControl.tsx
+++ b/src/Components/Map/Subcomponents/Controls/TagsControl.tsx
@@ -6,16 +6,16 @@ export const TagsControl = () => {
   const removeFilterTag = useRemoveFilterTag()
 
   return (
-    <div className='tw-flex tw-flex-wrap tw-mt-4 tw-w-[calc(100vw-2rem)] tw-max-w-xs'>
+    <div className='tw:flex tw:flex-wrap tw:mt-4 tw:w-[calc(100vw-2rem)] tw:max-w-xs'>
       {filterTags.map((tag) => (
         <div
           key={tag.id}
-          className='tw-rounded-2xl tw-text-white tw-p-2 tw-px-4 tw-shadow-xl tw-card tw-mr-2 tw-mb-2'
+          className='tw:rounded-2xl tw:text-white tw:p-2 tw:px-4 tw:shadow-xl tw:card tw:mr-2 tw:mb-2'
           style={{ backgroundColor: tag.color }}
         >
-          <div className='tw-card-actions tw-justify-end'>
+          <div className='tw:card-actions tw:justify-end'>
             <label
-              className='tw-btn tw-btn-xs tw-btn-circle tw-absolute tw--right-2 tw--top-2 tw-bg-white tw-text-gray-600'
+              className='tw:btn tw:btn-xs tw:btn-circle tw:absolute tw:-right-2 tw:-top-2 tw:bg-white tw:text-gray-600'
               onClick={() => removeFilterTag(tag.name)}
             >
               ✕
diff --git a/src/Components/Map/Subcomponents/ItemFormPopup.tsx b/src/Components/Map/Subcomponents/ItemFormPopup.tsx
index 534fe2fd..0f346b25 100644
--- a/src/Components/Map/Subcomponents/ItemFormPopup.tsx
+++ b/src/Components/Map/Subcomponents/ItemFormPopup.tsx
@@ -155,10 +155,10 @@ export function ItemFormPopup(props: ItemFormPopupProps) {
     >
       <form ref={formRef} onReset={resetPopup} autoComplete='off' onSubmit={(e) => handleSubmit(e)}>
         {props.item ? (
-          <div className='tw-h-3'></div>
+          <div className='tw:h-3'></div>
         ) : (
-          <div className='tw-flex tw-justify-center'>
-            <b className='tw-text-xl tw-text-center tw-font-bold'>{props.layer.menuText}</b>
+          <div className='tw:flex tw:justify-center'>
+            <b className='tw:text-xl tw:text-center tw:font-bold'>{props.layer.menuText}</b>
           </div>
         )}
 
@@ -190,21 +190,21 @@ export function ItemFormPopup(props: ItemFormPopupProps) {
               placeholder='Text'
               dataField='text'
               defaultValue={props.item?.text ?? ''}
-              inputStyle='tw-h-40 tw-mt-5'
+              inputStyle='tw:h-40 tw:mt-5'
             />
           </>
         )}
 
-        <div className='tw-flex tw-justify-center'>
+        <div className='tw:flex tw:justify-center'>
           <button
             className={
               spinner
-                ? 'tw-btn tw-btn-disabled tw-mt-5 tw-place-self-center'
-                : 'tw-btn tw-mt-5 tw-place-self-center'
+                ? 'tw:btn tw:btn-disabled tw:mt-5 tw:place-self-center'
+                : 'tw:btn tw:mt-5 tw:place-self-center'
             }
             type='submit'
           >
-            {spinner ? <span className='tw-loading tw-loading-spinner'></span> : 'Save'}
+            {spinner ? <span className='tw:loading tw:loading-spinner'></span> : 'Save'}
           </button>
         </div>
       </form>
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
index 58690d84..95847b40 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
@@ -57,9 +57,7 @@ export function HeaderView({
 
   const [imageLoaded, setImageLoaded] = useState(false)
 
-  const avatar =
-    item.image &&
-    appState.assetsApi.url + item.image + `${big ? '?width=160&heigth=160' : '?width=80&heigth=80'}`
+  const avatar = item.image && appState.assetsApi.url + item.image + '?width=160&heigth=160'
   const title = item.name
   const subtitle = item.subname
 
@@ -74,18 +72,18 @@ export function HeaderView({
 
   return (
     <>
-      <div className='tw-flex tw-flex-row'>
-        <div className={'tw-grow tw-max-w-[calc(100%-60px)] }'}>
+      <div className='tw:flex tw:flex-row'>
+        <div className={'tw:grow tw:max-w-[calc(100%-60px)] }'}>
           <div className='flex items-center'>
             {avatar && (
-              <div className='tw-avatar'>
+              <div className='tw:avatar'>
                 <div
                   className={`${
-                    big ? 'tw-w-20' : 'tw-w-10'
-                  } tw-inline tw-items-center tw-justify-center overflow-hidden`}
+                    big ? 'tw:w-20' : 'tw:w-10'
+                  } tw:inline tw:items-center tw:justify-center overflow-hidden`}
                 >
                   <img
-                    className={'tw-w-full tw-h-full tw-object-cover tw-rounded-full'}
+                    className={'tw:w-full tw:h-full tw:object-cover tw:rounded-full'}
                     src={avatar}
                     alt={item.name + ' logo'}
                     onLoad={() => setImageLoaded(true)}
@@ -93,53 +91,53 @@ export function HeaderView({
                     style={{ display: imageLoaded ? 'block' : 'none' }}
                   />
                   {!imageLoaded && (
-                    <div className='tw-w-full tw-h-full tw-bg-gray-200 tw-rounded-full' />
+                    <div className='tw:w-full tw:h-full tw:bg-gray-200 tw:rounded-full' />
                   )}
                 </div>
               </div>
             )}
-            <div className={`${avatar ? 'tw-ml-2' : ''} tw-overflow-hidden`}>
+            <div className={`${avatar ? 'tw:ml-2' : ''} tw:overflow-hidden`}>
               <div
-                className={`${big ? 'xl:tw-text-3xl tw-text-2xl' : 'tw-text-xl'} tw-font-semibold tw-truncate`}
+                className={`${big ? 'tw:xl:text-3xl tw:text-2xl' : 'tw:text-xl'} tw:font-semibold tw:truncate`}
                 title={title}
               >
                 {title}
               </div>
               {showAddress && address && !hideSubname && (
-                <div className={`tw-text-xs  tw-text-gray-500 ${truncateSubname && 'tw-truncate'}`}>
+                <div className={`tw:text-xs  tw:text-gray-500 ${truncateSubname && 'tw:truncate'}`}>
                   {address}
                 </div>
               )}
               {subtitle && !hideSubname && (
-                <div className={`tw-text-xs  tw-text-gray-500 ${truncateSubname && 'tw-truncate'}`}>
+                <div className={`tw:text-xs  tw:opacity-50 ${truncateSubname && 'tw:truncate'}`}>
                   {subtitle}
                 </div>
               )}
             </div>
           </div>
         </div>
-        <div onClick={(e) => e.stopPropagation()} className={`${big ? 'tw-mt-5' : 'tw-mt-1'}`}>
+        <div onClick={(e) => e.stopPropagation()} className={`${big ? 'tw:mt-5' : 'tw:mt-1'}`}>
           {(api?.deleteItem || item.layer?.api?.updateItem) &&
             (hasUserPermission(api?.collectionName!, 'delete', item) ||
               hasUserPermission(api?.collectionName!, 'update', item)) &&
             !hideMenu && (
-              <div className='tw-dropdown tw-dropdown-bottom'>
+              <div className='tw:dropdown tw:dropdown-bottom'>
                 <label
                   tabIndex={0}
-                  className='tw-bg-base-100 tw-btn tw-m-1 tw-leading-3 tw-border-none tw-min-h-0 tw-h-6'
+                  className='tw:bg-base-100 tw:btn tw:m-1 tw:leading-3 tw:border-none tw:min-h-0 tw:h-6'
                 >
-                  <EllipsisVerticalIcon className='tw-h-5 tw-w-5' />
+                  <EllipsisVerticalIcon className='tw:h-5 tw:w-5' />
                 </label>
                 <ul
                   tabIndex={0}
-                  className='tw-dropdown-content tw-menu tw-p-2 tw-shadow tw-bg-base-100 tw-rounded-box tw-z-1000'
+                  className='tw:dropdown-content tw:menu tw:p-2 tw:shadow tw:bg-base-100 tw:rounded-box tw:z-1000'
                 >
                   {api?.updateItem &&
                     hasUserPermission(api.collectionName!, 'update', item) &&
                     editCallback && (
                       <li>
                         <a
-                          className='!tw-text-base-content tw-cursor-pointer'
+                          className='tw:text-base-content! tw:cursor-pointer'
                           onClick={(e) =>
                             item.layer?.customEditLink
                               ? navigate(
@@ -148,7 +146,7 @@ export function HeaderView({
                               : editCallback(e)
                           }
                         >
-                          <PencilIcon className='tw-h-5 tw-w-5' />
+                          <PencilIcon className='tw:h-5 tw:w-5' />
                         </a>
                       </li>
                     )}
@@ -157,10 +155,10 @@ export function HeaderView({
                     setPositionCallback && (
                       <li>
                         <a
-                          className='!tw-text-base-content tw-cursor-pointer'
+                          className='tw:text-base-content! tw:cursor-pointer'
                           onClick={setPositionCallback}
                         >
-                          <SVG src={TargetDotSVG} className='tw-w-5 tw-h-5' />
+                          <SVG src={TargetDotSVG} className='tw:w-5 tw:h-5' />
                         </a>
                       </li>
                     )}
@@ -168,11 +166,11 @@ export function HeaderView({
                     hasUserPermission(api.collectionName!, 'delete', item) &&
                     deleteCallback && (
                       <li>
-                        <a className='tw-cursor-pointer !tw-text-error' onClick={openDeleteModal}>
+                        <a className='tw:cursor-pointer tw:text-error!' onClick={openDeleteModal}>
                           {loading ? (
-                            <span className='tw-loading tw-loading-spinner tw-loading-sm'></span>
+                            <span className='tw:loading tw:loading-spinner tw:loading-sm'></span>
                           ) : (
-                            <TrashIcon className='tw-h-5 tw-w-5' />
+                            <TrashIcon className='tw:h-5 tw:w-5' />
                           )}
                         </a>
                       </li>
@@ -192,10 +190,10 @@ export function HeaderView({
           <span>
             Do you want to delete <b>{item.name}</b>?
           </span>
-          <div className='tw-grid'>
-            <div className='tw-flex tw-justify-between'>
+          <div className='tw:grid'>
+            <div className='tw:flex tw:justify-between'>
               <label
-                className='tw-btn tw-mt-4 tw-btn-error'
+                className='tw:btn tw:mt-4 tw:btn-error'
                 onClick={(e) => {
                   deleteCallback(e)
                   setModalOpen(false)
@@ -203,7 +201,7 @@ export function HeaderView({
               >
                 Yes
               </label>
-              <label className='tw-btn tw-mt-4' onClick={() => setModalOpen(false)}>
+              <label className='tw:btn tw:mt-4' onClick={() => setModalOpen(false)}>
                 No
               </label>
             </div>
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx
index 6f5fac4c..119262b5 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupButton.tsx
@@ -29,7 +29,7 @@ export const PopupButton = ({
         style={{
           backgroundColor: `${item?.color ?? (item && (getItemTags(item) && getItemTags(item)[0] && getItemTags(item)[0].color ? getItemTags(item)[0].color : (item?.layer?.markerDefaultColor ?? '#000')))}`,
         }}
-        className='tw-btn tw-text-white tw-btn-sm tw-float-right tw-mt-1'
+        className='tw:btn tw:text-white tw:btn-sm tw:float-right tw:mt-1'
       >
         {text}
       </button>
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupCheckboxInput.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupCheckboxInput.tsx
index fe2e9cb5..49d96eb8 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupCheckboxInput.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupCheckboxInput.tsx
@@ -13,15 +13,15 @@ export const PopupCheckboxInput = ({
   item?: Item
 }) => {
   return (
-    <label htmlFor={item?.id} className='tw-label tw-justify-normal tw-pt-1 tw-pb-1'>
+    <label htmlFor={item?.id} className='tw:label tw:justify-normal tw:pt-1 tw:pb-1'>
       <input
         id={item?.id}
         type='checkbox'
         name={dataField}
-        className='tw-checkbox tw-checkbox-xs tw-checkbox-success'
+        className='tw:checkbox tw:checkbox-xs tw:checkbox-success'
         checked={item?.public_edit}
       />
-      <span className='tw-text-sm tw-label-text tw-mx-2 tw-cursor-pointer'>{label}</span>
+      <span className='tw:text-sm tw:label-text tw:mx-2 tw:cursor-pointer'>{label}</span>
     </label>
   )
 }
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx
index e57323b2..5b1aea92 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx
@@ -20,12 +20,12 @@ export const PopupStartEndInput = ({
   updateEndValue,
 }: StartEndInputProps) => {
   return (
-    <div className='tw-grid tw-grid-cols-2 tw-gap-2'>
+    <div className='tw:grid tw:grid-cols-2 tw:gap-2'>
       <TextInput
         type='date'
         placeholder='start'
         dataField='start'
-        inputStyle='tw-text-sm tw-px-2'
+        inputStyle='tw:text-sm tw:px-2'
         labelTitle={showLabels ? 'start' : ''}
         defaultValue={item && item.start ? item.start.substring(0, 10) : ''}
         autocomplete='one-time-code'
@@ -35,7 +35,7 @@ export const PopupStartEndInput = ({
         type='date'
         placeholder='end'
         dataField='end'
-        inputStyle='tw-text-sm tw-px-2'
+        inputStyle='tw:text-sm tw:px-2'
         labelTitle={showLabels ? 'end' : ''}
         defaultValue={item && item.end ? item.end.substring(0, 10) : ''}
         autocomplete='one-time-code'
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx
index 439bf340..e2472fab 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/PopupTextInput.tsx
@@ -23,7 +23,7 @@ export const PopupTextInput = ({
       placeholder={placeholder}
       inputStyle={style}
       type='text'
-      containerStyle={'tw-mt-4'}
+      containerStyle={'tw:mt-4'}
     ></TextInput>
   )
 }
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx
index 23c3c385..0855d2c2 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx
@@ -8,23 +8,23 @@ import type { Item } from '#types/Item'
  */
 export const StartEndView = ({ item }: { item?: Item }) => {
   return (
-    <div className='tw-flex tw-flex-row tw-mb-4 tw-mt-1'>
-      <div className='tw-basis-2/5 tw-flex tw-flex-row'>
-        <CalendarIcon className='tw-h-4 tw-w-4 tw-mr-2' />
+    <div className='tw:flex tw:flex-row tw:mb-4 tw:mt-1'>
+      <div className='tw:basis-2/5 tw:flex tw:flex-row'>
+        <CalendarIcon className='tw:h-4 tw:w-4 tw:mr-2' />
         <time
-          className='tw-align-middle'
+          className='tw:align-middle'
           dateTime={item && item.start ? item.start.substring(0, 10) : ''}
         >
           {item && item.start ? new Date(item.start).toLocaleDateString() : ''}
         </time>
       </div>
-      <div className='tw-basis-1/5 tw-place-content-center'>
+      <div className='tw:basis-1/5 tw:place-content-center'>
         <span>-</span>
       </div>
-      <div className='tw-basis-2/5 tw-flex tw-flex-row'>
-        <CalendarIcon className='tw-h-4 tw-w-4 tw-mr-2' />
+      <div className='tw:basis-2/5 tw:flex tw:flex-row'>
+        <CalendarIcon className='tw:h-4 tw:w-4 tw:mr-2' />
         <time
-          className='tw-align-middle'
+          className='tw:align-middle'
           dateTime={item && item.end ? item.end.substring(0, 10) : ''}
         >
           {item && item.end ? new Date(item.end).toLocaleDateString() : ''}
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
index e33684d3..720b76c1 100644
--- a/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
+++ b/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
@@ -87,36 +87,36 @@ export const TextView = ({
     })
   }
 
-  const CustomH1 = ({ children }) => <h1 className='tw-text-xl tw-font-bold'>{children}</h1>
+  const CustomH1 = ({ children }) => <h1 className='tw:text-xl tw:font-bold'>{children}</h1>
 
-  const CustomH2 = ({ children }) => <h2 className='tw-text-lg tw-font-bold'>{children}</h2>
+  const CustomH2 = ({ children }) => <h2 className='tw:text-lg tw:font-bold'>{children}</h2>
 
-  const CustomH3 = ({ children }) => <h3 className='tw-text-base tw-font-bold'>{children}</h3>
+  const CustomH3 = ({ children }) => <h3 className='tw:text-base tw:font-bold'>{children}</h3>
 
-  const CustomH4 = ({ children }) => <h4 className='tw-text-base tw-font-bold'>{children}</h4>
+  const CustomH4 = ({ children }) => <h4 className='tw:text-base tw:font-bold'>{children}</h4>
 
-  const CustomH5 = ({ children }) => <h5 className='tw-text-sm tw-font-bold'>{children}</h5>
+  const CustomH5 = ({ children }) => <h5 className='tw:text-sm tw:font-bold'>{children}</h5>
 
-  const CustomH6 = ({ children }) => <h6 className='tw-text-sm tw-font-bold'>{children}</h6>
+  const CustomH6 = ({ children }) => <h6 className='tw:text-sm tw:font-bold'>{children}</h6>
 
-  const CustomParagraph = ({ children }) => <p className='!tw-my-2'>{children}</p>
+  const CustomParagraph = ({ children }) => <p className='tw:my-2!'>{children}</p>
 
   const CustomUnorderdList = ({ children }) => (
-    <ul className='tw-list-disc tw-list-inside'>{children}</ul>
+    <ul className='tw:list-disc tw:list-inside'>{children}</ul>
   )
 
   const CustomOrderdList = ({ children }) => (
-    <ol className='tw-list-decimal tw-list-inside'>{children}</ol>
+    <ol className='tw:list-decimal tw:list-inside'>{children}</ol>
   )
 
-  const CustomHorizontalRow = ({ children }) => <hr className='tw-border-current'>{children}</hr>
+  const CustomHorizontalRow = ({ children }) => <hr className='tw:border-current'>{children}</hr>
   // eslint-disable-next-line react/prop-types
   const CustomImage = ({ alt, src, title }) => (
-    <img className='tw-max-w-full tw-rounded tw-shadow' src={src} alt={alt} title={title} />
+    <img className='tw:max-w-full tw:rounded tw:shadow' src={src} alt={alt} title={title} />
   )
 
   const CustomExternalLink = ({ href, children }) => (
-    <a className='tw-font-bold tw-underline' href={href} target='_blank' rel='noreferrer'>
+    <a className='tw:font-bold tw:underline' href={href} target='_blank' rel='noreferrer'>
       {' '}
       {children}
     </a>
@@ -148,7 +148,7 @@ export const TextView = ({
   // eslint-disable-next-line react/display-name
   const MemoizedVideoEmbed = memo(({ url }: { url: string }) => (
     <iframe
-      className='tw-w-full'
+      className='tw:w-full'
       src={url}
       allow='fullscreen;  picture-in-picture'
       allowFullScreen
@@ -157,7 +157,7 @@ export const TextView = ({
 
   return (
     <Markdown
-      className={'tw-text-map tw-leading-map tw-text-sm'}
+      className={'tw:text-map tw:leading-map tw:text-sm'}
       remarkPlugins={[remarkBreaks]}
       components={{
         p: CustomParagraph,
diff --git a/src/Components/Map/Subcomponents/ItemViewPopup.tsx b/src/Components/Map/Subcomponents/ItemViewPopup.tsx
index 4f4583c8..402f09bc 100644
--- a/src/Components/Map/Subcomponents/ItemViewPopup.tsx
+++ b/src/Components/Map/Subcomponents/ItemViewPopup.tsx
@@ -84,7 +84,7 @@ export const ItemViewPopup = forwardRef((props: ItemViewPopupProps, ref: any) =>
 
   return (
     <LeafletPopup ref={ref} maxHeight={377} minWidth={275} maxWidth={275} autoPanPadding={[20, 80]}>
-      <div className='tw-bg-base-100 tw-text-base-content'>
+      <div className='tw:bg-base-100 tw:text-base-content'>
         <HeaderView
           api={props.item.layer?.api}
           item={props.item}
@@ -97,7 +97,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-y-auto tw:overflow-x-hidden tw:max-h-64 fade'>
           {props.children ? (
             Children.toArray(props.children).map((child) =>
               isValidElement<{ item: Item; test: string }>(child)
@@ -108,22 +108,22 @@ export const ItemViewPopup = forwardRef((props: ItemViewPopupProps, ref: any) =>
             <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'>
+        <div className='tw:flex tw:-mb-1 tw:flex-row tw:mr-2 tw:mt-1'>
           {infoExpanded ? (
             <p
-              className={'tw-italic tw-min-h-[21px] !tw-my-0 tw-text-gray-500'}
+              className={'tw:italic tw:min-h-[21px] tw:my-0! tw:opacity-50'}
             >{`${props.item.date_updated && props.item.date_updated !== props.item.date_created ? 'updated' : 'posted'} ${props.item && props.item.user_created && props.item.user_created.first_name ? `by ${props.item.user_created.first_name}` : ''} ${props.item.date_updated ? timeAgo(props.item.date_updated) : timeAgo(props.item.date_created!)}`}</p>
           ) : (
             <p
-              className='!tw-my-0 tw-min-h-[21px] tw-font-bold tw-cursor-pointer tw-text-gray-500'
+              className='tw:my-0! tw:min-h-[21px] tw:font-bold tw:cursor-pointer tw:text-gray-500'
               onClick={() => setInfoExpanded(true)}
             >
               ⓘ
             </p>
           )}
-          <div className='tw-grow'></div>
+          <div className='tw:grow'></div>
           {
-            //* *        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="tw-place-self-end tw-w-4 tw-h-4 tw-mb-1 tw-cursor-pointer"><path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" /></svg> */
+            //* *        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="tw:place-self-end tw:w-4 tw:h-4 tw:mb-1 tw:cursor-pointer"><path strokeLinecap="round" strokeLinejoin="round" d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" /></svg> */
           }
         </div>
       </div>
diff --git a/src/Components/Map/Subcomponents/SelectPosition.tsx b/src/Components/Map/Subcomponents/SelectPosition.tsx
index 962be771..05a5959b 100644
--- a/src/Components/Map/Subcomponents/SelectPosition.tsx
+++ b/src/Components/Map/Subcomponents/SelectPosition.tsx
@@ -1,18 +1,18 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 export const SelectPosition = ({ setSelectNewItemPosition }: { setSelectNewItemPosition }) => {
   return (
-    <div className='tw-animate-pulseGrow tw-button tw-z-1000 tw-absolute tw-right-5 tw-top-4 tw-drop-shadow-md'>
+    <div className='tw:animate-pulseGrow tw:button tw:z-1000 tw:absolute tw:right-5 tw:top-4 tw:drop-shadow-md'>
       <label
-        className='tw-btn tw-btn-sm tw-rounded-2xl tw-btn-circle tw-btn-ghost hover:tw-bg-transparent tw-absolute tw-right-0 tw-top-0 tw-text-gray-600'
+        className='tw:btn tw:btn-sm tw:rounded-2xl tw:btn-circle tw:btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600'
         onClick={() => {
           setSelectNewItemPosition(null)
         }}
       >
-        <p className='tw-text-center '>✕</p>
+        <p className='tw:text-center '>✕</p>
       </label>
-      <div className='tw-alert tw-bg-base-100 tw-text-base-content'>
+      <div className='tw:alert tw:bg-base-100 tw:text-base-content'>
         <div>
-          <span className='tw-text-lg'>Select position on the map!</span>
+          <span className='tw:text-lg'>Select position on the map!</span>
         </div>
       </div>
     </div>
diff --git a/src/Components/Map/UtopiaMap.tsx b/src/Components/Map/UtopiaMap.tsx
index 0832631d..d6832cff 100644
--- a/src/Components/Map/UtopiaMap.tsx
+++ b/src/Components/Map/UtopiaMap.tsx
@@ -51,6 +51,8 @@ function UtopiaMap({
   showFilterControl = false,
   showGratitudeControl = false,
   showLayerControl = true,
+  showThemeControl = false,
+  defaultTheme,
   donationWidget,
 }: {
   /** height of the map (default '500px') */
@@ -71,6 +73,10 @@ function UtopiaMap({
   showLayerControl?: boolean
   /** show the layer control widget (default true) */
   showGratitudeControl?: boolean
+  /** show a widget to switch the theme */
+  showThemeControl?: boolean
+  /** the defaut theme */
+  defaultTheme?: string
   /** ask to donate to the Utopia Project OpenCollective campaign (default false) */
   donationWidget?: boolean
 }) {
@@ -89,6 +95,8 @@ function UtopiaMap({
           showGratitudeControl={showGratitudeControl}
           showLayerControl={showLayerControl}
           donationWidget={donationWidget}
+          showThemeControl={showThemeControl}
+          defaultTheme={defaultTheme}
         >
           {children}
         </UtopiaMapInner>
diff --git a/src/Components/Map/UtopiaMapInner.tsx b/src/Components/Map/UtopiaMapInner.tsx
index 9cea4335..ca5056fa 100644
--- a/src/Components/Map/UtopiaMapInner.tsx
+++ b/src/Components/Map/UtopiaMapInner.tsx
@@ -12,6 +12,8 @@ import MarkerClusterGroup from 'react-leaflet-cluster'
 import { Outlet, useLocation } from 'react-router-dom'
 import { toast } from 'react-toastify'
 
+import { useSetAppState } from '#components/AppShell/hooks/useAppState'
+import { useTheme } from '#components/AppShell/hooks/useTheme'
 import { containsUUID } from '#utils/ContainsUUID'
 
 import { useClusterRef, useSetClusterRef } from './hooks/useClusterRef'
@@ -42,6 +44,8 @@ export function UtopiaMapInner({
   showFilterControl = false,
   showGratitudeControl = false,
   showLayerControl = true,
+  showThemeControl = false,
+  defaultTheme = '',
   donationWidget,
 }: {
   children?: React.ReactNode
@@ -50,6 +54,8 @@ export function UtopiaMapInner({
   showLayerControl?: boolean
   showGratitudeControl?: boolean
   donationWidget?: boolean
+  showThemeControl?: boolean
+  defaultTheme?: string
 }) {
   const selectNewItemPosition = useSelectPosition()
   const setSelectNewItemPosition = useSetSelectPosition()
@@ -58,6 +64,8 @@ export function UtopiaMapInner({
   const setMapClicked = useSetMapClicked()
   const [itemFormPopup, setItemFormPopup] = useState<ItemFormPopupProps | null>(null)
 
+  useTheme(defaultTheme)
+
   const layers = useLayers()
   const addVisibleLayer = useAddVisibleLayer()
   const leafletRefs = useLeafletRefs()
@@ -70,6 +78,12 @@ export function UtopiaMapInner({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [layers])
 
+  const setAppState = useSetAppState()
+
+  useEffect(() => {
+    setAppState({ showThemeControl })
+  }, [setAppState, showThemeControl])
+
   const init = useRef(false)
   useEffect(() => {
     if (!init.current) {
@@ -86,7 +100,7 @@ export function UtopiaMapInner({
                   }
                 />
                 <a href='https://opencollective.com/utopia-project'>
-                  <div className='tw-btn  tw-btn-sm tw-float-right tw-btn-primary'>Donate</div>
+                  <div className='tw:btn  tw:btn-sm tw:float-right tw:btn-primary'>Donate</div>
                 </a>
               </div>
             </>,
@@ -187,7 +201,7 @@ export function UtopiaMapInner({
   }
 
   return (
-    <div className={`tw-h-full ${selectNewItemPosition != null ? 'crosshair-cursor-enabled' : ''}`}>
+    <div className={`tw:h-full ${selectNewItemPosition != null ? 'crosshair-cursor-enabled' : ''}`}>
       <Outlet />
       <Control position='topLeft' zIndex='1000' absolute>
         <SearchControl />
diff --git a/src/Components/Profile/ProfileForm.tsx b/src/Components/Profile/ProfileForm.tsx
index 87252764..03eefc5b 100644
--- a/src/Components/Profile/ProfileForm.tsx
+++ b/src/Components/Profile/ProfileForm.tsx
@@ -157,10 +157,10 @@ export function ProfileForm() {
     <>
       <MapOverlayPage
         backdrop
-        className='tw-mx-4 tw-mt-4 tw-mb-4 tw-overflow-x-hidden tw-w-[calc(100%-32px)]  md:tw-w-[calc(50%-32px)] tw-max-w-3xl !tw-left-auto tw-top-0 tw-bottom-0'
+        className='tw:mx-4 tw:mt-4 tw:mb-4 tw:overflow-x-hidden tw:w-[calc(100%-32px)]  tw:md:w-[calc(50%-32px)] tw:max-w-3xl tw:left-auto! tw:top-0 tw:bottom-0'
       >
         <form
-          className='tw-h-full'
+          className='tw:h-full'
           onSubmit={(e) => {
             e.preventDefault()
             void onUpdateItem(
@@ -177,7 +177,7 @@ export function ProfileForm() {
             )
           }}
         >
-          <div className='tw-flex tw-flex-col tw-h-full'>
+          <div className='tw:flex tw:flex-col tw:h-full'>
             <FormHeader item={item} state={state} setState={setState} />
 
             {template === 'onepager' && (
@@ -203,9 +203,9 @@ export function ProfileForm() {
               ></TabsForm>
             )}
 
-            <div className='tw-mt-4'>
+            <div className='tw:mt-4 tw:flex-none'>
               <button
-                className={loading ? ' tw-loading tw-btn tw-float-right' : 'tw-btn tw-float-right'}
+                className={`${loading ? ' tw:loading tw:btn tw:float-right' : 'tw:btn tw:float-right'}`}
                 type='submit'
                 style={{
                   // We could refactor this, it is used several times at different locations
diff --git a/src/Components/Profile/ProfileView.tsx b/src/Components/Profile/ProfileView.tsx
index bc16e20d..6a1d1fe6 100644
--- a/src/Components/Profile/ProfileView.tsx
+++ b/src/Components/Profile/ProfileView.tsx
@@ -174,10 +174,10 @@ export function ProfileView({ attestationApi }: { attestationApi?: ItemsApi<any>
       {item && (
         <MapOverlayPage
           key={item.id}
-          className={`!tw-p-0 tw-mx-4 tw-mt-4 tw-mb-4 md:tw-w-[calc(50%-32px)] tw-w-[calc(100%-32px)] tw-min-w-80 tw-max-w-3xl !tw-left-0 sm:!tw-left-auto tw-top-0 tw-bottom-0 tw-transition-opacity tw-duration-500 ${!selectPosition ? 'tw-opacity-100 tw-pointer-events-auto' : 'tw-opacity-0 tw-pointer-events-none'}`}
+          className={`tw:p-0! tw:overflow-scroll tw:m-4! tw:md:w-[calc(50%-32px)] tw:w-[calc(100%-32px)] tw:min-w-80 tw:max-w-3xl tw:left-0! tw:sm:left-auto! tw:top-0 tw:bottom-0 tw:transition-opacity tw:duration-500 ${!selectPosition ? 'tw:opacity-100 tw:pointer-events-auto' : 'tw:opacity-0 tw:pointer-events-none'}`}
         >
           <>
-            <div className={'tw-px-6 tw-pt-6'}>
+            <div className={'tw:px-6 tw:pt-6'}>
               <HeaderView
                 api={item.layer?.api}
                 item={item}
diff --git a/src/Components/Profile/Subcomponents/ActionsButton.tsx b/src/Components/Profile/Subcomponents/ActionsButton.tsx
index fc18bf63..8fab517e 100644
--- a/src/Components/Profile/Subcomponents/ActionsButton.tsx
+++ b/src/Components/Profile/Subcomponents/ActionsButton.tsx
@@ -54,11 +54,11 @@ export function ActionButton({
     <>
       {hasUserPermission(collection, 'update', item) && (
         <>
-          <div className={`tw-absolute tw-right-4 tw-bottom-4 tw-flex tw-flex-col ${customStyle}`}>
+          <div className={`tw:absolute tw:right-6 tw:bottom-4 tw:flex tw:flex-col ${customStyle}`}>
             {triggerItemSelected && (
               <button
                 tabIndex={0}
-                className='tw-z-500 tw-btn tw-btn-circle tw-shadow'
+                className='tw:z-500 tw:btn tw:btn-circle tw:shadow'
                 onClick={() => {
                   setModalOpen(true)
                 }}
@@ -67,13 +67,13 @@ export function ActionButton({
                   color: '#fff',
                 }}
               >
-                <LinkIcon className='tw-h-5 tw-w-5 tw-stroke-[2.5]' />
+                <LinkIcon className='tw:h-5 tw:w-5 tw:stroke-[2.5]' />
               </button>
             )}
             {triggerAddButton && (
               <button
                 tabIndex={0}
-                className='tw-z-500 tw-btn tw-btn-circle tw-shadow tw-mt-2'
+                className='tw:z-500 tw:btn tw:btn-circle tw:shadow tw:mt-2'
                 onClick={() => {
                   triggerAddButton()
                 }}
@@ -82,7 +82,7 @@ export function ActionButton({
                   color: '#fff',
                 }}
               >
-                <PlusIcon className='tw-w-5 tw-h-5 tw-stroke-[2.5]' />
+                <PlusIcon className='tw:w-5 tw:h-5 tw:stroke-[2.5]' />
               </button>
             )}
           </div>
@@ -90,17 +90,17 @@ export function ActionButton({
             title={'Select'}
             isOpened={modalOpen}
             onClose={() => setModalOpen(false)}
-            className='tw-w-xl sm:tw-w-2xl tw-min-h-80 tw-bg-base-200'
+            className='tw:w-xl tw:sm:w-2xl tw:min-h-80 tw:bg-base-200'
           >
             <TextInput
               defaultValue=''
               placeholder='🔍 Search'
-              containerStyle='lg:col-span-2 tw-m-4 '
+              containerStyle='lg:col-span-2 tw:m-4 '
               updateFormValue={(val) => {
                 setSearch(val)
               }}
             ></TextInput>
-            <div className='tw-grid tw-grid-cols-1 sm:tw-grid-cols-2'>
+            <div className='tw:grid tw:grid-cols-1 tw:sm:grid-cols-2'>
               {filterdItems
                 .filter((item) => {
                   return search === ''
@@ -110,7 +110,7 @@ export function ActionButton({
                 .map((i) => (
                   <div
                     key={i.id}
-                    className='tw-cursor-pointer tw-card tw-border-[1px] tw-border-base-300 tw-card-body tw-shadow-xl tw-bg-base-100 tw-text-base-content tw-mx-4 tw-p-4 tw-mb-4 tw-h-fit'
+                    className='tw:cursor-pointer tw:card tw:border-[1px] tw:border-base-300 tw:card-body tw:shadow-xl tw:bg-base-100 tw:text-base-content tw:mx-4 tw:p-4 tw:mb-4 tw:h-fit'
                     onClick={() => {
                       triggerItemSelected(i.id)
                       setModalOpen(false)
diff --git a/src/Components/Profile/Subcomponents/AvatarWidget.tsx b/src/Components/Profile/Subcomponents/AvatarWidget.tsx
index b16f0def..9434c535 100644
--- a/src/Components/Profile/Subcomponents/AvatarWidget.tsx
+++ b/src/Components/Profile/Subcomponents/AvatarWidget.tsx
@@ -166,28 +166,28 @@ export const AvatarWidget: React.FC<AvatarWidgetProps> = ({ avatar, setAvatar })
           <input
             type='file'
             accept='image/*'
-            className='tw-file-input tw-w-full tw-max-w-xs'
+            className='tw:file-input tw:w-full tw:max-w-xs'
             onChange={onImageChange}
           />
-          <div className='button tw-btn tw-btn-lg tw-btn-circle tw-animate-none'>
-            <ArrowUpTrayIcon className='tw-w-6 tw-h-6' />
+          <div className='button tw:btn tw:btn-lg tw:btn-circle tw:animate-none'>
+            <ArrowUpTrayIcon className='tw:w-6 tw:h-6' />
           </div>
           {avatar ? (
-            <div className='tw-h-20 tw-w-20'>
+            <div className='tw:h-20 tw:w-20'>
               <img
                 src={appState.assetsApi.url + avatar}
-                className='tw-h-20 tw-w-20 tw-rounded-full'
+                className='tw:h-20 tw:w-20 tw:rounded-full'
               />
             </div>
           ) : (
-            <div className='tw-h-20 tw-w-20'>
-              <img src={UserSVG} className='tw-rounded-full'></img>
+            <div className='tw:h-20 tw:w-20'>
+              <img src={UserSVG} className='tw:rounded-full'></img>
             </div>
           )}
         </label>
       ) : (
-        <div className='tw-w-20 tw-flex tw-items-center tw-justify-center'>
-          <span className='tw-loading tw-loading-spinner'></span>
+        <div className='tw:w-20 tw:flex tw:items-center tw:justify-center'>
+          <span className='tw:loading tw:loading-spinner'></span>
         </div>
       )}
       <DialogModal
@@ -203,7 +203,7 @@ export const AvatarWidget: React.FC<AvatarWidgetProps> = ({ avatar, setAvatar })
           <img src={image} ref={imgRef} onLoad={onImageLoad} />
         </ReactCrop>
         <button
-          className={'tw-btn tw-btn-primary'}
+          className={'tw:btn tw:btn-primary'}
           onClick={() => {
             setCropping(true)
             setCropModalOpen(false)
diff --git a/src/Components/Profile/Subcomponents/ColorPicker.tsx b/src/Components/Profile/Subcomponents/ColorPicker.tsx
index b75ed28b..7e3c2501 100644
--- a/src/Components/Profile/Subcomponents/ColorPicker.tsx
+++ b/src/Components/Profile/Subcomponents/ColorPicker.tsx
@@ -38,7 +38,7 @@ export const ColorPicker = ({ color, onChange, className }) => {
       <div className='swatch' style={{ backgroundColor: color }} onClick={() => toggle(true)} />
 
       {isOpen && (
-        <div className='popover tw-z-[10000]' ref={popover}>
+        <div className='popover tw:z-10000' ref={popover}>
           <HexColorPicker color={color} onChange={onChange} onClick={() => toggle(false)} />
         </div>
       )}
diff --git a/src/Components/Profile/Subcomponents/ContactInfoForm.tsx b/src/Components/Profile/Subcomponents/ContactInfoForm.tsx
index 7f129d01..20571582 100644
--- a/src/Components/Profile/Subcomponents/ContactInfoForm.tsx
+++ b/src/Components/Profile/Subcomponents/ContactInfoForm.tsx
@@ -12,11 +12,11 @@ export const ContactInfoForm = ({
   setState: React.Dispatch<React.SetStateAction<any>>
 }) => {
   return (
-    <div className='tw-mt-4 tw-space-y-4'>
+    <div className='tw:mt-4 tw:space-y-4'>
       <div>
         <label
           htmlFor='email'
-          className='tw-block tw-text-sm tw-font-medium tw-text-gray-500 tw-mb-1'
+          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
         >
           Email-Adresse (Kontakt):
         </label>
@@ -37,7 +37,7 @@ export const ContactInfoForm = ({
       <div>
         <label
           htmlFor='telephone'
-          className='tw-block tw-text-sm tw-font-medium tw-text-gray-500 tw-mb-1'
+          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
         >
           Telefonnummer (Kontakt):
         </label>
diff --git a/src/Components/Profile/Subcomponents/ContactInfoView.tsx b/src/Components/Profile/Subcomponents/ContactInfoView.tsx
index dbf0af25..e0595f48 100644
--- a/src/Components/Profile/Subcomponents/ContactInfoView.tsx
+++ b/src/Components/Profile/Subcomponents/ContactInfoView.tsx
@@ -24,33 +24,33 @@ export const ContactInfoView = ({ item, heading }: { item: Item; heading: string
   }, [item, items])
 
   return (
-    <div className='tw-bg-base-200  tw-mb-6 tw-mt-6 tw-p-6'>
-      <h2 className='tw-text-lg tw-font-semibold'>{heading}</h2>
-      <div className='tw-mt-4 tw-flex tw-items-center'>
+    <div className='tw:bg-base-200  tw:mb-6 tw:mt-6 tw:p-6'>
+      <h2 className='tw:text-lg tw:font-semibold'>{heading}</h2>
+      <div className='tw:mt-4 tw:flex tw:items-center'>
         {profileOwner?.image && (
           <ConditionalLink url={'/item/' + profileOwner?.id}>
-            <div className='tw-mr-5 tw-flex tw-items-center tw-justify-center'>
-              <div className='tw-avatar'>
-                <div className='tw-w-20 tw-h-20 tw-bg-gray-200 rounded-full tw-flex tw-items-center tw-justify-center overflow-hidden'>
+            <div className='tw:mr-5 tw:flex tw:items-center tw:justify-center'>
+              <div className='tw:avatar'>
+                <div className='tw:w-20 tw:h-20 tw:bg-gray-200 rounded-full tw:flex tw:items-center tw:justify-center overflow-hidden'>
                   <img
                     src={appState.assetsApi.url + profileOwner?.image}
                     alt={profileOwner?.name}
-                    className='tw-w-full tw-h-full tw-object-cover'
+                    className='tw:w-full tw:h-full tw:object-cover'
                   />
                 </div>
               </div>
             </div>
           </ConditionalLink>
         )}
-        <div className='tw-text-sm tw-flex-grow'>
-          <p className='tw-font-semibold'>{profileOwner?.name}</p>
+        <div className='tw:text-sm tw:grow'>
+          <p className='tw:font-semibold'>{profileOwner?.name}</p>
           {item.contact && (
             <p>
               <a
                 href={`mailto:${item.contact}`}
-                className='tw-mt-2 tw-text-green-500 tw-inline-flex tw-items-center'
+                className='tw:mt-2 tw:text-green-500 tw:inline-flex tw:items-center'
               >
-                <EnvelopeIcon className='tw-w-4 tw-h-4 tw-mr-1' />
+                <EnvelopeIcon className='tw:w-4 tw:h-4 tw:mr-1' />
                 {item.contact}
               </a>
             </p>
@@ -59,9 +59,9 @@ export const ContactInfoView = ({ item, heading }: { item: Item; heading: string
             <p>
               <a
                 href={`tel:${item.telephone}`}
-                className='tw-mt-2 tw-text-green-500 tw-inline-flex tw-items-center tw-whitespace-nowrap'
+                className='tw:mt-2 tw:text-green-500 tw:inline-flex tw:items-center tw:whitespace-nowrap'
               >
-                <PhoneIcon className='tw-w-4 tw-h-4 tw-mr-1' />
+                <PhoneIcon className='tw:w-4 tw:h-4 tw:mr-1' />
                 {item.telephone}
               </a>
             </p>
diff --git a/src/Components/Profile/Subcomponents/CrowdfundingForm.tsx b/src/Components/Profile/Subcomponents/CrowdfundingForm.tsx
index 8ae40a15..71bce7f1 100644
--- a/src/Components/Profile/Subcomponents/CrowdfundingForm.tsx
+++ b/src/Components/Profile/Subcomponents/CrowdfundingForm.tsx
@@ -12,11 +12,11 @@ export const CrowdfundingForm = ({
   setState: React.Dispatch<React.SetStateAction<any>>
 }) => {
   return (
-    <div className='tw-mt-4 tw-space-y-4'>
+    <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'
+          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
         >
           Open Collective Slug:
         </label>
diff --git a/src/Components/Profile/Subcomponents/CrowdfundingView.tsx b/src/Components/Profile/Subcomponents/CrowdfundingView.tsx
index b6842a34..3ea27f62 100644
--- a/src/Components/Profile/Subcomponents/CrowdfundingView.tsx
+++ b/src/Components/Profile/Subcomponents/CrowdfundingView.tsx
@@ -121,18 +121,18 @@ export const CrowdfundingView = ({ item }: { item: Item }) => {
 
   if (loading)
     return (
-      <div className='tw-flex tw-justify-center'>
-        <span className='tw-loading tw-loading-spinner tw-loading-lg tw-text-neutral-content'></span>
+      <div className='tw:flex tw:justify-center'>
+        <span className='tw:loading tw:loading-spinner tw:loading-lg tw:text-neutral-content'></span>
       </div>
     )
 
   if (error) {
-    return <p className='tw-text-center tw-text-lg tw-text-red-500'>Error: {error}</p>
+    return <p className='tw:text-center tw:text-lg tw:text-red-500'>Error: {error}</p>
   }
 
   if (!data?.account) {
     return (
-      <p className='tw-text-center tw-text-lg tw-text-red-500'>
+      <p className='tw:text-center tw:text-lg tw:text-red-500'>
         No data available for this account.
       </p>
     )
@@ -144,46 +144,46 @@ export const CrowdfundingView = ({ item }: { item: Item }) => {
   const currentBalance = balanceValueInCents
 
   return (
-    <div className='tw-mx-6 tw-mb-6'>
-      <div className='tw-card tw-bg-base-200 tw-w-fit tw-max-w-full tw-shadow'>
-        <div className='tw-stats tw-bg-base-200 tw-stats-horizontal tw-rounded-b-none'>
-          <div className='tw-stat tw-p-3'>
-            <div className='tw-stat-title'>Current Balance</div>
-            <div className='tw-stat-value tw-text-xl lg:tw-text-3xl'>
+    <div className='tw:mx-6 tw:mb-6'>
+      <div className='tw:card tw:bg-base-200 tw:w-fit tw:max-w-full tw:shadow'>
+        <div className='tw:stats tw:bg-base-200 tw:stats-horizontal tw:rounded-b-none'>
+          <div className='tw:stat tw:p-3'>
+            <div className='tw:stat-title'>Current Balance</div>
+            <div className='tw:stat-value tw:text-xl lg:tw:text-3xl'>
               {formatCurrency(currentBalance, currency)}
             </div>
           </div>
-          <div className='tw-stat tw-p-3'>
-            <div className='tw-stat-title'>Received</div>
-            <div className='tw-stat-value tw-text-green-500 tw-text-xl lg:tw-text-3xl'>
+          <div className='tw:stat tw:p-3'>
+            <div className='tw:stat-title'>Received</div>
+            <div className='tw:stat-value tw:text-green-500 tw:text-xl lg:tw:text-3xl'>
               {formatCurrency(stats.totalAmountReceived.valueInCents, currency)}
             </div>
           </div>
-          <div className='tw-stat tw-p-3'>
-            <div className='tw-stat-title'>Spent</div>
-            <div className='tw-stat-value tw-text-red-500 tw-text-xl lg:tw-text-3xl'>
+          <div className='tw:stat tw:p-3'>
+            <div className='tw:stat-title'>Spent</div>
+            <div className='tw:stat-value tw:text-red-500 tw:text-xl lg:tw:text-3xl'>
               {formatCurrency(stats.totalAmountReceived.valueInCents - currentBalance, currency)}
             </div>
           </div>
         </div>
-        <hr></hr>
-        <div className='tw-m-4 tw-items-center'>
+        <hr className='tw:border-1 tw:border-current/10 tw:border-dashed'></hr>
+        <div className='tw:m-4 tw:items-center'>
           <a href={`https://opencollective.com/${slug}/donate`} target='_blank' rel='noreferrer'>
-            <button className='tw-btn tw-btn-sm tw-btn-primary tw-float-right tw-ml-4'>
+            <button className='tw:btn tw:btn-sm tw:btn-primary tw:float-right tw:ml-4'>
               Donate
             </button>
           </a>
-          <div className='tw-flex-1 tw-mr-4'>
+          <div className='tw:flex-1 tw:mr-4'>
             Support{' '}
             <a
-              className='tw-font-bold'
+              className='tw:font-bold'
               href={`https://opencollective.com/${slug}`}
               target='_blank'
               rel='noreferrer'
             >
               {data.account.name}
             </a>{' '}
-            on <span className='tw-font-bold'>Open&nbsp;Collective</span>
+            on <span className='tw:font-bold'>Open&nbsp;Collective</span>
           </div>
         </div>
       </div>
diff --git a/src/Components/Profile/Subcomponents/FormHeader.tsx b/src/Components/Profile/Subcomponents/FormHeader.tsx
index 357ad7a4..f72cef13 100644
--- a/src/Components/Profile/Subcomponents/FormHeader.tsx
+++ b/src/Components/Profile/Subcomponents/FormHeader.tsx
@@ -10,50 +10,54 @@ import { ColorPicker } from './ColorPicker'
 
 export const FormHeader = ({ item, state, setState }) => {
   return (
-    <div className='tw-flex'>
-      <AvatarWidget
-        avatar={state.image}
-        setAvatar={(i) =>
-          setState((prevState) => ({
-            ...prevState,
-            image: i,
-          }))
-        }
-      />
-      <ColorPicker
-        color={state.color}
-        onChange={(c) =>
-          setState((prevState) => ({
-            ...prevState,
-            color: c,
-          }))
-        }
-        className={'-tw-left-6 tw-top-14 -tw-mr-6'}
-      />
-      <div className='tw-grow tw-mr-4'>
-        <TextInput
-          placeholder='Name'
-          defaultValue={item?.name ? item.name : ''}
-          updateFormValue={(v) =>
+    <div className='tw:flex-none'>
+      <div className='tw:flex'>
+        <AvatarWidget
+          avatar={state.image}
+          setAvatar={(i) =>
             setState((prevState) => ({
               ...prevState,
-              name: v,
+              image: i,
             }))
           }
-          containerStyle='tw-grow tw-input-md'
         />
-        <TextInput
-          placeholder='Subtitle'
-          required={false}
-          defaultValue={item?.subname ? item.subname : ''}
-          updateFormValue={(v) =>
+        <ColorPicker
+          color={state.color}
+          onChange={(c) =>
             setState((prevState) => ({
               ...prevState,
-              subname: v,
+              color: c,
             }))
           }
-          containerStyle='tw-grow tw-input-sm tw-px-4 tw-mt-1'
+          className={'tw:-left-6 tw:top-14 tw:-mr-6'}
         />
+        <div className='tw:grow tw:mr-4 tw:pt-1'>
+          <TextInput
+            placeholder='Name'
+            defaultValue={item?.name ? item.name : ''}
+            updateFormValue={(v) =>
+              setState((prevState) => ({
+                ...prevState,
+                name: v,
+              }))
+            }
+            containerStyle='tw:grow tw:px-4'
+            inputStyle='tw:input-md'
+          />
+          <TextInput
+            placeholder='Subtitle'
+            required={false}
+            defaultValue={item?.subname ? item.subname : ''}
+            updateFormValue={(v) =>
+              setState((prevState) => ({
+                ...prevState,
+                subname: v,
+              }))
+            }
+            containerStyle='tw:grow tw:px-4 tw:mt-1'
+            inputStyle='tw:input-sm'
+          />
+        </div>
       </div>
     </div>
   )
diff --git a/src/Components/Profile/Subcomponents/GalleryView.tsx b/src/Components/Profile/Subcomponents/GalleryView.tsx
index 287131ad..be2e7830 100644
--- a/src/Components/Profile/Subcomponents/GalleryView.tsx
+++ b/src/Components/Profile/Subcomponents/GalleryView.tsx
@@ -21,7 +21,7 @@ export const GalleryView = ({ item }: { item: Item }) => {
   if (!images) throw new Error('GalleryView: images is undefined')
 
   return (
-    <div className='tw-mx-6 tw-mb-6'>
+    <div className='tw:mx-6 tw:mb-6'>
       <RowsPhotoAlbum
         photos={images}
         targetRowHeight={150}
diff --git a/src/Components/Profile/Subcomponents/GroupSubHeaderView.tsx b/src/Components/Profile/Subcomponents/GroupSubHeaderView.tsx
index 7718b075..497137ad 100644
--- a/src/Components/Profile/Subcomponents/GroupSubHeaderView.tsx
+++ b/src/Components/Profile/Subcomponents/GroupSubHeaderView.tsx
@@ -11,18 +11,18 @@ export const GroupSubHeaderView = ({
   shareBaseUrl: string
   platforms?: string[]
 }) => (
-  <div className='tw-px-6'>
-    <div className='tw-float-left tw-mt-2 tw-mb-4 tw-flex tw-items-center'>
+  <div className='tw:px-6'>
+    <div className='tw:float-left tw:mt-2 tw:mb-4 tw:flex tw:items-center'>
       {item.status && (
-        <div className='tw-mt-1.5'>
-          <span className='tw-text-sm tw-text-current tw-bg-base-300 tw-rounded tw-py-0.5 tw-px-2 tw-inline-flex tw-items-center tw-mr-2'>
+        <div className='tw:mt-1.5'>
+          <span className='tw:text-sm tw:text-current tw:bg-base-300 tw:rounded tw:py-0.5 tw:px-2 tw:inline-flex tw:items-center tw:mr-2'>
             {item.status}
           </span>
         </div>
       )}
       {item.group_type && (
-        <div className='tw-mt-1.5'>
-          <span className='tw-text-sm tw-text-current tw-bg-base-300 tw-rounded tw-py-1 tw-px-2'>
+        <div className='tw:mt-1.5'>
+          <span className='tw:text-sm tw:text-current tw:bg-base-300 tw:rounded tw:py-1 tw:px-2'>
             {item.group_type}
           </span>
         </div>
diff --git a/src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx b/src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx
index 55b8c58f..e5892d46 100644
--- a/src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx
+++ b/src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx
@@ -51,11 +51,11 @@ export const GroupSubheaderForm = ({
   }, [state.group_type, groupTypes])
 
   return (
-    <div className='tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6'>
+    <div className='tw:grid tw:grid-cols-1 tw:md:grid-cols-2 tw:gap-6'>
       <div>
         <label
           htmlFor='status'
-          className='tw-block tw-text-sm tw-font-medium tw-text-gray-500 tw-mb-1'
+          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
         >
           Gruppenstatus:
         </label>
@@ -74,7 +74,7 @@ export const GroupSubheaderForm = ({
       <div>
         <label
           htmlFor='groupType'
-          className='tw-block tw-text-sm tw-font-medium tw-text-gray-500 tw-mb-1'
+          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
         >
           Gruppenart:
         </label>
diff --git a/src/Components/Profile/Subcomponents/LinkedItemsHeaderView.tsx b/src/Components/Profile/Subcomponents/LinkedItemsHeaderView.tsx
index 27476806..29e4b9f3 100644
--- a/src/Components/Profile/Subcomponents/LinkedItemsHeaderView.tsx
+++ b/src/Components/Profile/Subcomponents/LinkedItemsHeaderView.tsx
@@ -33,47 +33,47 @@ export function LinkedItemsHeaderView({
 
   return (
     <>
-      <div className='tw-flex tw-flex-row'>
-        <div className={'tw-grow tw-max-w-[calc(100%-60px)] }'}>
+      <div className='tw:flex tw:flex-row'>
+        <div className={'tw:grow tw:max-w-[calc(100%-60px)] }'}>
           <div className='flex items-center'>
             {avatar && (
               <img
-                className={'tw-w-10 tw-inline tw-rounded-full'}
+                className={'tw:w-10 tw:inline tw:rounded-full'}
                 src={avatar}
                 alt={item.name + ' logo'}
               />
             )}
-            <div className={`${avatar ? 'tw-ml-2' : ''} tw-overflow-hidden`}>
-              <div className={'tw-text-xl tw-font-semibold tw-truncate'}>{title}</div>
+            <div className={`${avatar ? 'tw:ml-2' : ''} tw:overflow-hidden`}>
+              <div className={'tw:text-xl tw:font-semibold tw:truncate'}>{title}</div>
               {subtitle && (
-                <div className='tw-text-xs tw-truncate  tw-text-gray-500 '>{subtitle}</div>
+                <div className='tw:text-xs tw:truncate  tw:text-gray-500 '>{subtitle}</div>
               )}
             </div>
           </div>
         </div>
-        <div className='tw-col-span-1' onClick={(e) => e.stopPropagation()}>
+        <div className='tw:col-span-1' onClick={(e) => e.stopPropagation()}>
           {unlinkPermission && (
-            <div className='tw-dropdown tw-dropdown-bottom'>
+            <div className='tw:dropdown tw:dropdown-bottom'>
               <label
                 tabIndex={0}
-                className=' tw-btn tw-m-1 tw-leading-3 tw-border-none tw-min-h-0 tw-h-6'
+                className=' tw:btn tw:m-1 tw:leading-3 tw:border-none tw:min-h-0 tw:h-6'
               >
-                <EllipsisVerticalIcon className='tw-h-5 tw-w-5' />
+                <EllipsisVerticalIcon className='tw:h-5 tw:w-5' />
               </label>
               <ul
                 tabIndex={0}
-                className='tw-dropdown-content tw-menu tw-p-2 tw-shadow tw-bg-base-100 tw-rounded-box tw-z-1000'
+                className='tw:dropdown-content tw:menu tw:p-2 tw:shadow tw:bg-base-100 tw:rounded-box tw:z-1000'
               >
                 {true && (
                   <li>
                     <a
-                      className='tw-cursor-pointer !tw-text-error'
+                      className='tw:cursor-pointer tw:text-error!'
                       onClick={() => unlinkCallback(item.id)}
                     >
                       {loading ? (
-                        <span className='tw-loading tw-loading-spinner tw-loading-sm'></span>
+                        <span className='tw:loading tw:loading-spinner tw:loading-sm'></span>
                       ) : (
-                        <LinkSlashIcon className='tw-h-5 tw-w-5 tw-stroke-[3]' />
+                        <LinkSlashIcon className='tw:h-5 tw:w-5 tw:stroke-3' />
                       )}
                     </a>
                   </li>
diff --git a/src/Components/Profile/Subcomponents/MarkdownHint.tsx b/src/Components/Profile/Subcomponents/MarkdownHint.tsx
index bf8c8b37..6e263e33 100644
--- a/src/Components/Profile/Subcomponents/MarkdownHint.tsx
+++ b/src/Components/Profile/Subcomponents/MarkdownHint.tsx
@@ -8,16 +8,16 @@ export const MarkdownHint = () => {
     <div
       onClick={() => setExpended(true)}
       title='Markdown is supported'
-      className='flex tw-flex-row tw-text-gray-400 tw-cursor-pointer tw-items-center'
+      className='flex tw:flex-row tw:text-gray-400 tw:cursor-pointer tw:items-center'
     >
-      <img src={MarkdownSVG} alt='Markdown' className='octicon octicon-markdown tw-gray-400' />
+      <img src={MarkdownSVG} alt='Markdown' className='octicon octicon-markdown tw:gray-400' />
       {expended && (
         <a
           href='https://www.markdownguide.org/cheat-sheet/#basic-syntax'
           target='_blank'
           rel='noreferrer'
         >
-          <span className='Button-label tw-ml-1'>Markdown is support</span>{' '}
+          <span className='Button-label tw:ml-1'>Markdown is support</span>{' '}
         </a>
       )}
     </div>
diff --git a/src/Components/Profile/Subcomponents/PlusButton.tsx b/src/Components/Profile/Subcomponents/PlusButton.tsx
index efb59d02..e9f3c868 100644
--- a/src/Components/Profile/Subcomponents/PlusButton.tsx
+++ b/src/Components/Profile/Subcomponents/PlusButton.tsx
@@ -21,16 +21,16 @@ export function PlusButton({
   return (
     <>
       {hasUserPermission(collection, 'create', undefined, layer) && (
-        <div className='tw-dropdown tw-dropdown-top tw-dropdown-end tw-dropdown-hover tw-z-3000 tw-absolute tw-right-4 tw-bottom-4'>
+        <div className='tw:dropdown tw:dropdown-top tw:dropdown-end tw:dropdown-hover tw:z-3000 tw:absolute tw:right-4 tw:bottom-4'>
           <button
             tabIndex={0}
-            className='tw-z-500 tw-btn tw-btn-circle tw-shadow'
+            className='tw:z-500 tw:btn tw:btn-circle tw:shadow'
             onClick={() => {
               triggerAction()
             }}
             style={{ backgroundColor: color, color: '#fff' }}
           >
-            <PlusIcon className='tw-w-5 tw-h-5 tw-stroke-[2.5]' />
+            <PlusIcon className='tw:w-5 tw:h-5 tw:stroke-[2.5]' />
           </button>
         </div>
       )}
diff --git a/src/Components/Profile/Subcomponents/ProfileStartEndView.tsx b/src/Components/Profile/Subcomponents/ProfileStartEndView.tsx
index 8d64e55d..d490d725 100644
--- a/src/Components/Profile/Subcomponents/ProfileStartEndView.tsx
+++ b/src/Components/Profile/Subcomponents/ProfileStartEndView.tsx
@@ -4,7 +4,7 @@ import type { Item } from '#types/Item'
 
 export const ProfileStartEndView = ({ item }: { item: Item }) => {
   return (
-    <div className='tw-mt-2 tw-px-6 tw-max-w-xs'>
+    <div className='tw:mt-2 tw:px-6 tw:max-w-xs'>
       <StartEndView item={item}></StartEndView>
     </div>
   )
diff --git a/src/Components/Profile/Subcomponents/ProfileTextForm.tsx b/src/Components/Profile/Subcomponents/ProfileTextForm.tsx
index 2620aecd..f0ad7153 100644
--- a/src/Components/Profile/Subcomponents/ProfileTextForm.tsx
+++ b/src/Components/Profile/Subcomponents/ProfileTextForm.tsx
@@ -37,11 +37,11 @@ export const ProfileTextForm = ({
   }, [dataField])
 
   return (
-    <div className='tw-h-full tw-flex tw-flex-col tw-mt-4'>
-      <div className='tw-flex tw-justify-between tw-items-center'>
+    <div className='tw:h-full tw:flex tw:flex-col tw:mt-4'>
+      <div className='tw:flex tw:justify-between tw:items-center'>
         <label
           htmlFor='nextAppointment'
-          className='tw-block tw-text-sm tw-font-medium tw-text-gray-500 tw-mb-1'
+          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
         >
           {heading || 'Text'}:
         </label>
@@ -57,9 +57,9 @@ export const ProfileTextForm = ({
             [field]: v,
           }))
         }
-        labelStyle={hideInputLabel ? 'tw-hidden' : ''}
-        containerStyle={size === 'full' ? 'tw-grow tw-h-full' : ''}
-        inputStyle={size === 'full' ? 'tw-h-full' : 'tw-h-24'}
+        labelStyle={hideInputLabel ? 'tw:hidden' : ''}
+        containerStyle={size === 'full' ? 'tw:grow tw:h-full' : ''}
+        inputStyle={size === 'full' ? 'tw:h-full' : 'tw:h-24'}
         required={required}
       />
     </div>
diff --git a/src/Components/Profile/Subcomponents/ProfileTextView.tsx b/src/Components/Profile/Subcomponents/ProfileTextView.tsx
index f2f1d283..df1d5e77 100644
--- a/src/Components/Profile/Subcomponents/ProfileTextView.tsx
+++ b/src/Components/Profile/Subcomponents/ProfileTextView.tsx
@@ -20,11 +20,11 @@ export const ProfileTextView = ({
   const parsedText = typeof text !== 'string' ? '' : text
 
   return (
-    <div className='tw-my-10 tw-mt-2 tw-px-6'>
+    <div className='tw:my-10 tw:mt-2 tw:px-6'>
       {!(text === '' && hideWhenEmpty) && (
-        <h2 className='tw-text-lg tw-font-semibold'>{heading}</h2>
+        <h2 className='tw:text-lg tw:font-semibold'>{heading}</h2>
       )}
-      <div className='tw-mt-2 tw-text-sm'>
+      <div className='tw:mt-2 tw:text-sm'>
         <TextView itemId={item.id} rawText={parsedText} />
       </div>
     </div>
diff --git a/src/Components/Profile/Subcomponents/RelationCard.tsx b/src/Components/Profile/Subcomponents/RelationCard.tsx
index 30d84ea4..0f6d527a 100644
--- a/src/Components/Profile/Subcomponents/RelationCard.tsx
+++ b/src/Components/Profile/Subcomponents/RelationCard.tsx
@@ -1,15 +1,15 @@
 /* eslint-disable @typescript-eslint/no-unsafe-assignment */
 // eslint-disable-next-line react/prop-types
 const RelationCard = ({ title, description, imageSrc }) => (
-  <div className={`tw-mb-6 ${imageSrc ? 'md:tw-flex md:tw-space-x-4' : ''}`}>
+  <div className={`tw:mb-6 ${imageSrc ? 'tw:md:flex tw:md:space-x-4' : ''}`}>
     {imageSrc && (
-      <div className='md:tw-w-1/2 tw-mb-4 md:tw-mb-0'>
-        <img src={imageSrc} alt={title} className='tw-w-full tw-h-32 tw-object-cover' />
+      <div className='tw:md:w-1/2 tw:mb-4 tw:md:mb-0'>
+        <img src={imageSrc} alt={title} className='tw:w-full tw:h-32 tw:object-cover' />
       </div>
     )}
-    <div className={imageSrc ? 'md:tw-w-1/2' : 'tw-w-full'}>
-      <h3 className='tw-text-lg tw-font-semibold'>{title}</h3>
-      <p className='tw-mt-2 tw-text-sm tw-text-gray-600'>{description}</p>
+    <div className={imageSrc ? 'tw:md:w-1/2' : 'tw:w-full'}>
+      <h3 className='tw:text-lg tw:font-semibold'>{title}</h3>
+      <p className='tw:mt-2 tw:text-sm tw:text-gray-600'>{description}</p>
     </div>
   </div>
 )
diff --git a/src/Components/Profile/Subcomponents/SocialShareBar.tsx b/src/Components/Profile/Subcomponents/SocialShareBar.tsx
index 4c23fe88..b6bb0be4 100644
--- a/src/Components/Profile/Subcomponents/SocialShareBar.tsx
+++ b/src/Components/Profile/Subcomponents/SocialShareBar.tsx
@@ -27,7 +27,7 @@ const SocialShareBar = ({
       })
   }
   return (
-    <div className='tw-flex tw-place-content-end tw-justify-end tw-space-x-2 tw-grow tw-min-w-fit tw-pl-2'>
+    <div className='tw:flex tw:place-content-end tw:justify-end tw:space-x-2 tw:grow tw:min-w-fit tw:pl-2'>
       {platforms.map((platform) => (
         <SocialShareButton key={platform} platform={platform} url={url} title={title} />
       ))}
@@ -36,7 +36,7 @@ const SocialShareBar = ({
           href={`mailto:?subject=${title}&body=${url}`}
           target='_blank'
           rel='noopener noreferrer'
-          className='tw-w-8 tw-h-8 tw-mt-2 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-white hover:tw-cursor-pointer'
+          className='tw:w-8 tw:h-8 tw:mt-2 tw:rounded-full tw:flex tw:items-center tw:justify-center tw:text-white tw:hover:cursor-pointer'
           style={{
             color: 'white',
             backgroundColor: '#444',
@@ -44,13 +44,13 @@ const SocialShareBar = ({
           onClick={() => copyLink()}
           title='share link via email'
         >
-          <img src={ChevronSVG} alt='\/' className='tw-h-4 tw-w-4' />
+          <img src={ChevronSVG} alt='\/' className='tw:h-4 tw:w-4' />
         </a>
       )}
       {platforms.includes('clipboard') && (
         <div
           rel='noopener noreferrer'
-          className='tw-w-8 tw-h-8 tw-mt-2 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-white hover:tw-cursor-pointer'
+          className='tw:w-8 tw:h-8 tw:mt-2 tw:rounded-full tw:flex tw:items-center tw:justify-center tw:text-white tw:hover:cursor-pointer'
           style={{
             color: 'white',
             backgroundColor: '#888',
@@ -58,7 +58,7 @@ const SocialShareBar = ({
           onClick={() => copyLink()}
           title='copy Link'
         >
-          <img src={ClipboardSVG} className='tw-w-5' />
+          <img src={ClipboardSVG} className='tw:w-5' />
         </div>
       )}
     </div>
diff --git a/src/Components/Profile/Subcomponents/SocialShareButton.tsx b/src/Components/Profile/Subcomponents/SocialShareButton.tsx
index 93f5dbde..b5a9ef01 100644
--- a/src/Components/Profile/Subcomponents/SocialShareButton.tsx
+++ b/src/Components/Profile/Subcomponents/SocialShareButton.tsx
@@ -71,14 +71,14 @@ const SocialShareButton = ({
       href={finalShareUrl}
       target='_blank'
       rel='noopener noreferrer'
-      className='tw-w-8 tw-h-8 tw-mt-2 tw-rounded-full tw-flex tw-items-center tw-justify-center tw-text-white'
+      className='tw:w-8 tw:h-8 tw:mt-2 tw:rounded-full tw:flex tw:items-center tw:justify-center tw:text-white'
       style={{
         color: 'white',
         backgroundColor: bgColor,
       }}
       title={`share link on ${platform}`}
     >
-      {cloneElement(icon, { className: 'tw-w-4 tw-h-4 tw-fill-current' })}
+      {cloneElement(icon, { className: 'tw:w-4 tw:h-4 tw:fill-current' })}
     </a>
   )
 }
diff --git a/src/Components/Profile/Subcomponents/TagsWidget.tsx b/src/Components/Profile/Subcomponents/TagsWidget.tsx
index b1a03ad1..0faa26bc 100644
--- a/src/Components/Profile/Subcomponents/TagsWidget.tsx
+++ b/src/Components/Profile/Subcomponents/TagsWidget.tsx
@@ -95,7 +95,7 @@ export const TagsWidget = ({ placeholder, containerStyle, defaultTags, onUpdate
     onKeyDown,
     onKeyUp,
     onChange,
-    className: 'tw-bg-transparent tw-w-fit tw-mt-5 tw-h-fit',
+    className: 'tw:bg-transparent tw:w-fit tw:mt-5 tw:h-fit',
   }
 
   /* eslint-disable react/prop-types */
@@ -107,18 +107,18 @@ export const TagsWidget = ({ placeholder, containerStyle, defaultTags, onUpdate
           setFocusInput(false)
         }, 200)
       }}
-      className={`tw-input tw-input-bordered tw-cursor-text ${containerStyle}`}
+      className={`tw:textarea tw:cursor-text ${containerStyle}`}
     >
-      <div className='tw-flex tw-flex-wrap tw-h-fit'>
+      <div className='tw:flex tw:flex-wrap tw:h-fit'>
         {defaultTags.map((tag) => (
           <div
             key={tag.name}
-            className='tw-rounded-2xl tw-text-white tw-p-2 tw-px-4 tw-shadow-xl tw-card tw-mt-3 tw-mr-4'
+            className='tw:rounded-2xl tw:text-white tw:p-2 tw:px-4 tw:shadow-xl tw:card tw:mt-3 tw:mr-4'
             style={{ backgroundColor: tag.color ? tag.color : '#666' }}
           >
-            <div className='tw-card-actions tw-justify-end'>
+            <div className='tw:card-actions tw:justify-end'>
               <label
-                className='tw-btn tw-btn-xs tw-btn-circle tw-absolute tw--right-2 tw--top-2 tw-bg-white tw-text-gray-600'
+                className='tw:btn tw:btn-xs tw:btn-circle tw:absolute tw:-right-2 tw:-top-2 tw:bg-white tw:text-gray-600'
                 onClick={() => deleteTag(tag)}
               >
                 ✕
diff --git a/src/Components/Profile/Templates/FlexForm.tsx b/src/Components/Profile/Templates/FlexForm.tsx
index 5c5a8928..c85d3d41 100644
--- a/src/Components/Profile/Templates/FlexForm.tsx
+++ b/src/Components/Profile/Templates/FlexForm.tsx
@@ -29,7 +29,7 @@ export const FlexForm = ({
   item: Item
 }) => {
   return (
-    <div className='tw-mt-6 tw-flex tw-flex-col tw-h-full'>
+    <div className='tw:mt-6 tw:flex tw:flex-col tw:h-full'>
       {item.layer?.itemType.profileTemplate.map((templateItem) => {
         const TemplateComponent = componentMap[templateItem.collection]
         return TemplateComponent ? (
@@ -41,7 +41,9 @@ export const FlexForm = ({
             {...templateItem.item}
           />
         ) : (
-          <div key={templateItem.id}>Component not found</div>
+          <div className='tw:mt-2' key={templateItem.id}>
+            {templateItem.collection} form not found
+          </div>
         )
       })}
     </div>
diff --git a/src/Components/Profile/Templates/FlexView.tsx b/src/Components/Profile/Templates/FlexView.tsx
index 7958600e..845898c3 100644
--- a/src/Components/Profile/Templates/FlexView.tsx
+++ b/src/Components/Profile/Templates/FlexView.tsx
@@ -21,10 +21,8 @@ const componentMap = {
 }
 
 export const FlexView = ({ item }: { item: Item }) => {
-  // eslint-disable-next-line no-console
-  console.log(item)
   return (
-    <div className='tw-h-full tw-overflow-y-auto fade'>
+    <div className='tw:h-full tw:overflow-y-auto fade'>
       {item.layer?.itemType.profileTemplate.map(
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         (templateItem: { collection: string | number; id: Key | null | undefined; item: any }) => {
@@ -32,7 +30,9 @@ export const FlexView = ({ item }: { item: Item }) => {
           return TemplateComponent ? (
             <TemplateComponent key={templateItem.id} item={item} {...templateItem.item} />
           ) : (
-            <div key={templateItem.id}>Component not found</div>
+            <div className='tw:mx-6 tw:mb-6' key={templateItem.id}>
+              {templateItem.collection} view not found
+            </div>
           )
         },
       )}
diff --git a/src/Components/Profile/Templates/OnepagerForm.tsx b/src/Components/Profile/Templates/OnepagerForm.tsx
index 163cae4e..f7612160 100644
--- a/src/Components/Profile/Templates/OnepagerForm.tsx
+++ b/src/Components/Profile/Templates/OnepagerForm.tsx
@@ -17,14 +17,14 @@ export const OnepagerForm = ({
   item: Item
 }) => {
   return (
-    <div className='tw-space-y-6 tw-mt-6'>
+    <div className='tw:space-y-6 tw:mt-6'>
       <GroupSubheaderForm state={state} setState={setState} item={item}></GroupSubheaderForm>
       <ContactInfoForm state={state} setState={setState}></ContactInfoForm>
 
       <div>
         <label
           htmlFor='description'
-          className='tw-block tw-text-sm tw-font-medium tw-text-gray-500 tw-mb-1'
+          className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
         >
           Gruppenbeschreibung:
         </label>
@@ -37,7 +37,7 @@ export const OnepagerForm = ({
               text: v,
             }))
           }
-          inputStyle='tw-h-48'
+          inputStyle='tw:h-48'
         />
       </div>
     </div>
diff --git a/src/Components/Profile/Templates/OnepagerView.tsx b/src/Components/Profile/Templates/OnepagerView.tsx
index 1993fef5..088b92a6 100644
--- a/src/Components/Profile/Templates/OnepagerView.tsx
+++ b/src/Components/Profile/Templates/OnepagerView.tsx
@@ -7,29 +7,29 @@ import type { Item } from '#types/Item'
 
 export const OnepagerView = ({ item }: { item: Item }) => {
   return (
-    <div className='tw-h-full tw-overflow-y-auto fade'>
+    <div className='tw:h-full tw:overflow-y-auto fade'>
       <GroupSubHeaderView
         item={item}
         shareBaseUrl={`https://www.wuerdekompass.org/aktivitaeten/gruppensuche/#/gruppe/${item.slug}`}
       />
       {item.user_created?.first_name && <ContactInfoView heading='Du hast Fragen?' item={item} />}
       {/* Description Section */}
-      <div className='tw-my-10 tw-mt-2 tw-px-6 tw-text-sm '>
+      <div className='tw:my-10 tw:mt-2 tw:px-6 tw:text-sm '>
         <TextView itemId={item.id} rawText={item.text ?? 'Keine Beschreibung vorhanden'} />
       </div>
       {/* Next Appointment Section */}
       {item.next_appointment && (
-        <div className='tw-my-10 tw-px-6'>
-          <h2 className='tw-text-lg tw-font-semibold'>Nächste Termine</h2>
-          <div className='tw-mt-2 tw-text-sm'>
+        <div className='tw:my-10 tw:px-6'>
+          <h2 className='tw:text-lg tw:font-semibold'>Nächste Termine</h2>
+          <div className='tw:mt-2 tw:text-sm'>
             <TextView itemId={item.id} rawText={item.next_appointment} />
           </div>
         </div>
       )}
       ;{/* Relations Section */}
       {/* {d.relations && ( */}
-      {/*    <div className="tw-my-10 tw-px-6"> */}
-      {/*        <h2 className="tw-text-lg tw-font-semibold tw-mb-4">Projekte</h2> */}
+      {/*    <div className="tw:my-10 tw:px-6"> */}
+      {/*        <h2 className="tw:text-lg tw:font-semibold tw:mb-4">Projekte</h2> */}
       {/*        {d.relations.map((project, index) => ( */}
       {/*            <RelationCard */}
       {/*                key={index} */}
diff --git a/src/Components/Profile/Templates/SimpleForm.tsx b/src/Components/Profile/Templates/SimpleForm.tsx
index bbc1e48d..02a52b42 100644
--- a/src/Components/Profile/Templates/SimpleForm.tsx
+++ b/src/Components/Profile/Templates/SimpleForm.tsx
@@ -17,8 +17,8 @@ export const SimpleForm = ({ state, setState }) => {
           text: v,
         }))
       }
-      containerStyle='tw-mt-8 tw-h-full'
-      inputStyle='tw-h-full'
+      containerStyle='tw:mt-8 tw:h-full'
+      inputStyle='tw:h-full'
     />
   )
 }
diff --git a/src/Components/Profile/Templates/SimpleView.tsx b/src/Components/Profile/Templates/SimpleView.tsx
index b7d7776a..894c3459 100644
--- a/src/Components/Profile/Templates/SimpleView.tsx
+++ b/src/Components/Profile/Templates/SimpleView.tsx
@@ -4,7 +4,7 @@ import type { Item } from '#types/Item'
 
 export const SimpleView = ({ item }: { item: Item }) => {
   return (
-    <div className='tw-mt-8 tw-h-full tw-overflow-y-auto fade tw-px-6'>
+    <div className='tw:mt-8 tw:h-full tw:overflow-y-auto fade tw:px-6'>
       <TextView text={item.text} itemId={item.id} />
     </div>
   )
diff --git a/src/Components/Profile/Templates/TabsForm.tsx b/src/Components/Profile/Templates/TabsForm.tsx
index a2686366..0a735955 100644
--- a/src/Components/Profile/Templates/TabsForm.tsx
+++ b/src/Components/Profile/Templates/TabsForm.tsx
@@ -53,55 +53,55 @@ export const TabsForm = ({
   }, [location.search])
 
   return (
-    <div role='tablist' className='tw-tabs tw-tabs-lifted tw-mt-3'>
-      <input
-        type='radio'
-        name='my_tabs_2'
-        role='tab'
-        className={'tw-tab  [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'}
-        aria-label='Info'
-        checked={activeTab === 1 && true}
-        onChange={() => updateActiveTab(1)}
-      />
-      <div
-        role='tabpanel'
-        className='tw-tab-content tw-bg-base-100 tw-border-[var(--fallback-bc,oklch(var(--bc)/0.2))] tw-rounded-box tw-h-[calc(100dvh-332px)] tw-min-h-56 tw-border-none'
-      >
+    <div className='tw:grow'>
+      <div role='tablist' className='tw:tabs tw:h-full tw:tabs-lift tw:mt-3'>
+        <input
+          type='radio'
+          name='my_tabs_2'
+          role='tab'
+          className={'tw:tab  '}
+          aria-label='Info'
+          checked={activeTab === 1 && true}
+          onChange={() => updateActiveTab(1)}
+        />
         <div
-          className={`tw-flex tw-flex-col tw-h-full ${item.layer.itemType.show_start_end_input && 'tw-pt-4'}`}
+          role='tabpanel'
+          className='tw:tab-content tw:bg-base-100 tw:border-(--fallback-bc,oklch(var(--bc)/0.2)) tw:rounded-box tw:!h-[calc(100%-48px)] tw:min-h-56 tw:border-none'
         >
-          {item.layer.itemType.show_start_end_input && (
-            <PopupStartEndInput
-              item={item}
-              showLabels={false}
-              updateEndValue={(e) =>
-                setState((prevState) => ({
-                  ...prevState,
-                  end: e,
-                }))
-              }
-              updateStartValue={(s) =>
-                setState((prevState) => ({
-                  ...prevState,
-                  start: s,
-                }))
-              }
-            ></PopupStartEndInput>
-          )}
+          <div
+            className={`tw:flex tw:flex-col tw:h-full ${item.layer.itemType.show_start_end_input && 'tw:pt-4'}`}
+          >
+            {item.layer.itemType.show_start_end_input && (
+              <PopupStartEndInput
+                item={item}
+                showLabels={false}
+                updateEndValue={(e) =>
+                  setState((prevState) => ({
+                    ...prevState,
+                    end: e,
+                  }))
+                }
+                updateStartValue={(s) =>
+                  setState((prevState) => ({
+                    ...prevState,
+                    start: s,
+                  }))
+                }
+              ></PopupStartEndInput>
+            )}
 
-          <TextAreaInput
-            placeholder='about ...'
-            defaultValue={item?.text ? item.text : ''}
-            updateFormValue={(v) =>
-              setState((prevState) => ({
-                ...prevState,
-                text: v,
-              }))
-            }
-            containerStyle='tw-grow'
-            inputStyle={`tw-h-full  ${!item.layer.itemType.show_start_end_input && 'tw-border-t-0 tw-rounded-tl-none'}`}
-          />
-          <div>
+            <TextAreaInput
+              placeholder='about ...'
+              defaultValue={item?.text ? item.text : ''}
+              updateFormValue={(v) =>
+                setState((prevState) => ({
+                  ...prevState,
+                  text: v,
+                }))
+              }
+              containerStyle='tw:grow'
+              inputStyle={`tw:h-full  ${!item.layer.itemType.show_start_end_input && 'tw:border-t-0 tw:rounded-tl-none'}`}
+            />
             <TextAreaInput
               placeholder='contact info ...'
               defaultValue={state.contact || ''}
@@ -111,110 +111,108 @@ export const TabsForm = ({
                   contact: c,
                 }))
               }
-              inputStyle='tw-h-24'
-              containerStyle='tw-pt-4'
+              inputStyle=''
+              containerStyle='tw:pt-4 tw:h-24 tw:flex-none'
               required={false}
             />
           </div>
         </div>
-      </div>
-      {item.layer?.itemType.offers_and_needs && (
-        <>
-          <input
-            type='radio'
-            name='my_tabs_2'
-            role='tab'
-            className={
-              'tw-tab tw-min-w-[10em]  [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'
-            }
-            aria-label='Offers & Needs'
-            checked={activeTab === 3 && true}
-            onChange={() => updateActiveTab(3)}
-          />
-          <div
-            role='tabpanel'
-            className='tw-tab-content tw-bg-base-100 tw-border-[var(--fallback-bc,oklch(var(--bc)/0.2))] tw-rounded-box tw-h-[calc(100dvh-332px)] tw-min-h-56 tw-border-none'
-          >
-            <div className='tw-h-full'>
-              <div className='tw-w-full tw-h-[calc(50%-0.75em)] tw-mb-4'>
-                <TagsWidget
-                  defaultTags={state.offers}
-                  onUpdate={(v) =>
-                    setState((prevState) => ({
-                      ...prevState,
-                      offers: v,
-                    }))
-                  }
-                  placeholder='enter your offers'
-                  containerStyle='tw-bg-transparent tw-w-full tw-h-full tw-mt-3 tw-text-xs tw-h-[calc(100%-1rem)] tw-min-h-[5em] tw-pb-2 tw-overflow-auto'
-                />
-              </div>
-              <div className='tw-w-full tw-h-[calc(50%-1.5em)]'>
-                <TagsWidget
-                  defaultTags={state.needs}
-                  onUpdate={(v) =>
-                    setState((prevState) => ({
-                      ...prevState,
-                      needs: v,
-                    }))
-                  }
-                  placeholder='enter your needs'
-                  containerStyle='tw-bg-transparent tw-w-full tw-h-full tw-mt-3 tw-text-xs tw-h-[calc(100%-1rem)] tw-min-h-[5em] tw-pb-2 tw-overflow-auto'
-                />
+        {item.layer?.itemType.offers_and_needs && (
+          <>
+            <input
+              type='radio'
+              name='my_tabs_2'
+              role='tab'
+              className={'tw:tab tw:min-w-[10em]  '}
+              aria-label='Offers & Needs'
+              checked={activeTab === 3 && true}
+              onChange={() => updateActiveTab(3)}
+            />
+            <div
+              role='tabpanel'
+              className='tw:tab-content tw:bg-base-100 tw:border-(--fallback-bc,oklch(var(--bc)/0.2)) tw:rounded-box tw:!h-[calc(100%-48px)] tw:min-h-56 tw:border-none'
+            >
+              <div className='tw:h-full'>
+                <div className='tw:w-full tw:h-[calc(50%-0.75em)] tw:mb-4'>
+                  <TagsWidget
+                    defaultTags={state.offers}
+                    onUpdate={(v) =>
+                      setState((prevState) => ({
+                        ...prevState,
+                        offers: v,
+                      }))
+                    }
+                    placeholder='enter your offers'
+                    containerStyle='tw:bg-transparent tw:w-full tw:h-full tw:mt-3 tw:text-xs tw:h-[calc(100%-1rem)] tw:min-h-[5em] tw:pb-2 tw:overflow-auto'
+                  />
+                </div>
+                <div className='tw:w-full tw:h-[calc(50%-1.5em)]'>
+                  <TagsWidget
+                    defaultTags={state.needs}
+                    onUpdate={(v) =>
+                      setState((prevState) => ({
+                        ...prevState,
+                        needs: v,
+                      }))
+                    }
+                    placeholder='enter your needs'
+                    containerStyle='tw:bg-transparent tw:w-full tw:h-full tw:mt-3 tw:text-xs tw:h-[calc(100%-1rem)] tw:min-h-[5em] tw:pb-2 tw:overflow-auto'
+                  />
+                </div>
               </div>
             </div>
-          </div>
-        </>
-      )}
-      {item.layer?.itemType.relations && (
-        <>
-          <input
-            type='radio'
-            name='my_tabs_2'
-            role='tab'
-            className='tw-tab  [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'
-            aria-label='Links'
-            checked={activeTab === 7 && true}
-            onChange={() => updateActiveTab(7)}
-          />
-          <div
-            role='tabpanel'
-            className='tw-tab-content tw-bg-base-100  tw-rounded-box tw-h-[calc(100dvh-332px)] tw-overflow-y-auto tw-pt-4 tw-pb-1 -tw-mx-4 tw-overflow-x-hidden fade'
-          >
-            <div className='tw-h-full'>
-              <div className='tw-grid tw-grid-cols-1 sm:tw-grid-cols-2 md:tw-grid-cols-1 lg:tw-grid-cols-1 xl:tw-grid-cols-1 2xl:tw-grid-cols-2 tw-mb-4'>
-                {state.relations &&
-                  state.relations.map((i) => (
-                    <div
-                      key={i.id}
-                      className='tw-cursor-pointer tw-card tw-bg-base-200 tw-border-[1px] tw-border-base-300 tw-card-body tw-shadow-xl tw-text-base-content tw-mx-4 tw-p-6 tw-mb-4'
-                      onClick={() => navigate('/item/' + i.id)}
-                    >
-                      <LinkedItemsHeaderView
-                        unlinkPermission={updatePermission}
-                        item={i}
-                        unlinkCallback={(id) => unlinkItem(id, item, updateItem)}
-                        loading={loading}
-                      />
-                      <div className='tw-overflow-y-auto tw-overflow-x-hidden tw-max-h-64 fade'>
-                        <TextView truncate itemId={item.id} />
+          </>
+        )}
+        {item.layer?.itemType.relations && (
+          <>
+            <input
+              type='radio'
+              name='my_tabs_2'
+              role='tab'
+              className='tw:tab  '
+              aria-label='Links'
+              checked={activeTab === 7 && true}
+              onChange={() => updateActiveTab(7)}
+            />
+            <div
+              role='tabpanel'
+              className='tw:tab-content tw:rounded-box tw:!h-[calc(100%-48px)] tw:overflow-y-auto tw:pt-4 tw:overflow-x-hidden fade'
+            >
+              <div className='tw:h-full'>
+                <div className='tw:grid tw:grid-cols-1 tw:sm:grid-cols-2 tw:md:grid-cols-1 tw:lg:grid-cols-1 tw:xl:grid-cols-1 tw:2xl:grid-cols-2 tw:mb-4'>
+                  {state.relations &&
+                    state.relations.map((i) => (
+                      <div
+                        key={i.id}
+                        className='tw:cursor-pointer tw:card tw:bg-base-200 tw:border-[1px] tw:border-base-300 tw:card-body tw:shadow-xl tw:text-base-content tw:mx-4 tw:p-6 tw:mb-4'
+                        onClick={() => navigate('/item/' + i.id)}
+                      >
+                        <LinkedItemsHeaderView
+                          unlinkPermission={updatePermission}
+                          item={i}
+                          unlinkCallback={(id) => unlinkItem(id, item, updateItem)}
+                          loading={loading}
+                        />
+                        <div className='tw:overflow-y-auto tw:overflow-x-hidden tw:max-h-64 fade'>
+                          <TextView truncate itemId={item.id} />
+                        </div>
                       </div>
-                    </div>
-                  ))}
-                {updatePermission && (
-                  <ActionButton
-                    customStyle='!tw-bottom-24'
-                    collection='items'
-                    item={item}
-                    existingRelations={state.relations}
-                    triggerItemSelected={(id) => linkItem(id, item, updateItem)}
-                  ></ActionButton>
-                )}
+                    ))}
+                  {updatePermission && (
+                    <ActionButton
+                      customStyle='tw:bottom-24!'
+                      collection='items'
+                      item={item}
+                      existingRelations={state.relations}
+                      triggerItemSelected={(id) => linkItem(id, item, updateItem)}
+                    ></ActionButton>
+                  )}
+                </div>
               </div>
             </div>
-          </div>
-        </>
-      )}
+          </>
+        )}
+      </div>
     </div>
   )
 }
diff --git a/src/Components/Profile/Templates/TabsView.tsx b/src/Components/Profile/Templates/TabsView.tsx
index bec02e24..c14ca054 100644
--- a/src/Components/Profile/Templates/TabsView.tsx
+++ b/src/Components/Profile/Templates/TabsView.tsx
@@ -85,29 +85,27 @@ export const TabsView = ({
   }, [location.search])
 
   return (
-    <div role='tablist' className='tw-tabs tw-tabs-lifted tw-mt-2 tw-mb-2 tw-px-6'>
+    <div role='tablist' className='tw:tabs tw:tabs-lift tw:mt-2 tw:mb-2 tw:px-6'>
       <input
         type='radio'
         name='my_tabs_2'
         role='tab'
-        className={
-          'tw-tab tw-font-bold !tw-ps-2 !tw-pe-2 [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'
-        }
+        className={'tw:tab tw:font-bold tw:ps-2! tw:pe-2! '}
         aria-label={`${item.layer?.itemType.icon_as_labels && activeTab !== 1 ? '📝' : '📝\u00A0Info'}`}
         checked={activeTab === 1 && true}
         onChange={() => updateActiveTab(1)}
       />
       <div
         role='tabpanel'
-        className='tw-tab-content tw-bg-base-100 tw-rounded-box tw-h-[calc(100dvh-280px)] tw-overflow-y-auto fade tw-pt-2 tw-pb-4 tw-mb-4 tw-overflow-x-hidden'
+        className='tw:tab-content tw:bg-base-100 tw:rounded-box tw:!h-[calc(100dvh-280px)] tw:overflow-y-auto fade tw:pt-2 tw:pb-4 tw:mb-4 tw:overflow-x-hidden'
       >
         {item.layer?.itemType.show_start_end && (
-          <div className='tw-max-w-xs'>
+          <div className='tw:max-w-xs'>
             <StartEndView item={item}></StartEndView>
           </div>
         )}
         <TextView text={item.text} itemId={item.id} />
-        <div className='tw-h-4'></div>
+        <div className='tw:h-4'></div>
         <TextView text={item.contact} itemId={item.id} />
       </div>
       {item.layer?.itemType.questlog && (
@@ -116,18 +114,16 @@ export const TabsView = ({
             type='radio'
             name='my_tabs_2'
             role='tab'
-            className={
-              'tw-tab tw-font-bold !tw-ps-2 !tw-pe-2 [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'
-            }
+            className={'tw:tab tw:font-bold tw:ps-2! tw:pe-2!'}
             aria-label={`${item.layer.itemType.icon_as_labels && activeTab !== 2 ? '❤️' : '❤️\u00A0Trust'}`}
             checked={activeTab === 2 && true}
             onChange={() => updateActiveTab(2)}
           />
           <div
             role='tabpanel'
-            className='tw-tab-content tw-bg-base-100 tw-rounded-box tw-h-[calc(100dvh-280px)] tw-overflow-y-auto fade tw-pt-2 tw-pb-4 tw-mb-4 tw-overflow-x-hidden'
+            className='tw:tab-content tw:bg-base-100 tw:rounded-box tw:!h-[calc(100dvh-280px)] tw:overflow-y-auto fade tw:pt-2 tw:pb-4 tw:mb-4 tw:overflow-x-hidden'
           >
-            <table className='sm:tw-table-sm md:tw-table-md'>
+            <table className='sm:tw:table-sm md:tw:table-md tw:w-full'>
               <tbody>
                 {attestations
                   .filter((a) => a.to.some((t) => t.directus_users_id === item.user_created?.id))
@@ -139,13 +135,15 @@ export const TabsView = ({
                     <tr key={i}>
                       <td>
                         <div
-                          className={`tw-cursor-pointer tw-text-3xl tw-mask tw-mask-${a.shape} tw-p-3 tw-mr-2 tw-shadow-xl tw-bg-[${a.color}]`}
+                          className={`tw:cursor-pointer tw:text-3xl tw:mask ${a.shape === 'squircle' ? 'tw:mask-squircle' : a.shape === 'circle' ? 'tw:mask-circle' : 'tw:mask-hexagon-2'} tw:p-2 tw:my-2 tw:mr-2 tw:shadow-xl`}
+                          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                          style={{ backgroundColor: a.color }}
                         >
                           {a.emoji}
                         </div>
                       </td>
                       <td>
-                        <div className='tw-mr-2'>
+                        <div className='tw:mr-2'>
                           <i>{a.text}</i>
                         </div>
                       </td>
@@ -153,8 +151,8 @@ export const TabsView = ({
                         {getUserProfile(a.user_created.id) ? (
                           <Link to={'/item/' + getUserProfile(a.user_created.id)?.id}>
                             <div className='flex items-center gap-3'>
-                              <div className='tw-avatar'>
-                                <div className='tw-mask tw-rounded-full tw-h-8 tw-w-8 tw-mr-2'>
+                              <div className='tw:avatar'>
+                                <div className='tw:mask tw:rounded-full tw:h-8 tw:w-8 tw:mr-2'>
                                   {getUserProfile(a.user_created.id)?.image && (
                                     <img
                                       src={
@@ -171,7 +169,7 @@ export const TabsView = ({
                                   {getUserProfile(a.user_created.id)?.name ??
                                     a.user_created.first_name}{' '}
                                 </div>
-                                <div className='tw-text-xs opacity-50 tw-text-zinc-500'>
+                                <div className='tw:text-xs opacity-50 tw:text-zinc-500'>
                                   {timeAgo(a.date_created)}
                                 </div>
                               </div>
@@ -180,7 +178,7 @@ export const TabsView = ({
                         ) : (
                           <div>
                             <div className='font-bold'>{a.user_created.first_name} </div>
-                            <div className='tw-text-xs opacity-50 tw-text-zinc-500'>
+                            <div className='tw:text-xs opacity-50 tw:text-zinc-500'>
                               {timeAgo(a.date_created)}
                             </div>
                           </div>
@@ -199,21 +197,21 @@ export const TabsView = ({
             type='radio'
             name='my_tabs_2'
             role='tab'
-            className={`tw-tab tw-font-bold !tw-ps-2 !tw-pe-2 ${!(item.layer.itemType.icon_as_labels && activeTab !== 3) && 'tw-min-w-[10.4em]'} [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]`}
+            className={`tw:tab tw:font-bold tw:ps-2! tw:pe-2! ${!(item.layer.itemType.icon_as_labels && activeTab !== 3) && 'tw:min-w-[10.4em]'} `}
             aria-label={`${item.layer.itemType.icon_as_labels && activeTab !== 3 ? '♻️' : '♻️\u00A0Offers & Needs'}`}
             checked={activeTab === 3 && true}
             onChange={() => updateActiveTab(3)}
           />
           <div
             role='tabpanel'
-            className='tw-tab-content tw-bg-base-100  tw-rounded-box tw-h-[calc(100dvh-268px)] tw-overflow-y-auto fade tw-pt-4 tw-pb-1'
+            className='tw:tab-content tw:bg-base-100  tw:rounded-box tw:h-[calc(100dvh-268px)] tw:overflow-y-auto fade tw:pt-4 tw:pb-1'
           >
-            <div className='tw-h-full'>
-              <div className='tw-grid tw-grid-cols-1'>
+            <div className='tw:h-full'>
+              <div className='tw:grid tw:grid-cols-1'>
                 {offers.length > 0 ? (
-                  <div className='tw-col-span-1'>
-                    <h3 className='-tw-mb-2'>Offers</h3>
-                    <div className='tw-flex tw-flex-wrap tw-mb-4'>
+                  <div className='tw:col-span-1'>
+                    <h3 className='tw:-mb-2'>Offers</h3>
+                    <div className='tw:flex tw:flex-wrap tw:mb-4'>
                       {offers.map((o) => (
                         <TagView
                           key={o.id}
@@ -229,9 +227,9 @@ export const TabsView = ({
                   ''
                 )}
                 {needs.length > 0 ? (
-                  <div className='tw-col-span-1'>
-                    <h3 className='-tw-mb-2 tw-col-span-1'>Needs</h3>
-                    <div className='tw-flex tw-flex-wrap  tw-mb-4'>
+                  <div className='tw:col-span-1'>
+                    <h3 className='tw:-mb-2 tw:col-span-1'>Needs</h3>
+                    <div className='tw:flex tw:flex-wrap  tw:mb-4'>
                       {needs.map((n) => (
                         <TagView key={n.id} tag={n} onClick={() => addFilterTag(n)} />
                       ))}
@@ -252,22 +250,22 @@ export const TabsView = ({
             type='radio'
             name='my_tabs_2'
             role='tab'
-            className='tw-tab tw-font-bold !tw-ps-2 !tw-pe-2 [--tab-border-color:var(--fallback-bc,oklch(var(--bc)/0.2))]'
+            className='tw:tab tw:font-bold tw:ps-2! tw:pe-2! '
             aria-label={`${item.layer.itemType.icon_as_labels && activeTab !== 7 ? '🔗' : '🔗\u00A0Links'}`}
             checked={activeTab === 7 && true}
             onChange={() => updateActiveTab(7)}
           />
           <div
             role='tabpanel'
-            className='tw-tab-content tw-bg-base-100  tw-rounded-box tw-h-[calc(100dvh-280px)] tw-overflow-y-auto tw-pt-4 tw-pb-1 -tw-mr-4 -tw-mb-4 tw-overflow-x-hidden'
+            className='tw:tab-content tw:bg-base-100  tw:rounded-box tw:!h-[calc(100dvh-280px)] tw:overflow-y-auto tw:pt-4 tw:pb-1 tw:-mr-4 tw:-mb-4 tw:overflow-x-hidden'
           >
-            <div className='tw-h-full'>
-              <div className='tw-grid tw-grid-cols-1 sm:tw-grid-cols-2 md:tw-grid-cols-1 lg:tw-grid-cols-1 xl:tw-grid-cols-1 2xl:tw-grid-cols-2 tw-pb-4'>
+            <div className='tw:h-full'>
+              <div className='tw:grid tw:grid-cols-1 tw:sm:grid-cols-2 tw:md:grid-cols-1 tw:lg:grid-cols-1 tw:xl:grid-cols-1 tw:2xl:grid-cols-2 tw:pb-4'>
                 {relations &&
                   relations.map((i) => (
                     <div
                       key={i.id}
-                      className='tw-cursor-pointer tw-card tw-bg-base-200 tw-border-[1px] tw-border-base-300 tw-card-body tw-shadow-xl tw-text-base-content tw-p-6 tw-mr-4 tw-mb-4'
+                      className='tw:cursor-pointer tw:card tw:bg-base-200 tw:border-[1px] tw:border-base-300 tw:card-body tw:shadow-xl tw:text-base-content tw:p-6 tw:mr-4 tw:mb-4'
                       onClick={() => navigate('/item/' + i.id)}
                     >
                       <LinkedItemsHeaderView
@@ -276,7 +274,7 @@ export const TabsView = ({
                         unlinkCallback={unlinkItem}
                         loading={loading}
                       />
-                      <div className='tw-overflow-y-auto tw-overflow-x-hidden tw-max-h-64 fade'>
+                      <div className='tw:overflow-y-auto tw:overflow-x-hidden tw:max-h-64 fade'>
                         <TextView truncate text={i.text} itemId={item.id} />
                       </div>
                     </div>
diff --git a/src/Components/Profile/UserSettings.tsx b/src/Components/Profile/UserSettings.tsx
index 0e974cd6..02fccb6f 100644
--- a/src/Components/Profile/UserSettings.tsx
+++ b/src/Components/Profile/UserSettings.tsx
@@ -53,11 +53,11 @@ export function UserSettings() {
   return (
     <MapOverlayPage
       backdrop
-      className='tw-mx-4 tw-mt-4 tw-max-h-[calc(100dvh-96px)] tw-h-fit md:tw-w-[calc(50%-32px)] tw-w-[calc(100%-32px)] tw-max-w-xl !tw-left-auto tw-top-0 tw-bottom-0'
+      className='tw:mx-4 tw:mt-4 tw:max-h-[calc(100dvh-96px)] tw:h-fit tw:md:w-[calc(50%-32px)] tw:w-[calc(100%-32px)] tw:max-w-xl tw:left-auto! tw:top-0 tw:bottom-0'
     >
-      <div className={'tw-text-xl tw-font-semibold'}>Settings</div>
-      <div className='tw-divider tw-mt-2'></div>
-      <div className='tw-grid tw-grid-cols-1 tw-gap-6'>
+      <div className={'tw:text-xl tw:font-semibold'}>Settings</div>
+      <div className='tw:divider tw:mt-2'></div>
+      <div className='tw:grid tw:grid-cols-1 tw:gap-6'>
         <TextInput
           type='email'
           placeholder='new E-Mail'
@@ -76,12 +76,12 @@ export function UserSettings() {
         {/* <ToogleInput updateType="syncData" labelTitle="Sync Data" defaultValue={true} updateFormValue={updateFormValue}/> */}
       </div>
 
-      <div className='tw-mt-8'>
+      <div className='tw:mt-8'>
         <button
           className={
             loading
-              ? ' tw-loading tw-btn-disabled tw-btn tw-btn-primary tw-float-right'
-              : 'tw-btn tw-btn-primary tw-float-right'
+              ? ' tw:loading tw:btn-disabled tw:btn tw:btn-primary tw:float-right'
+              : 'tw:btn tw:btn-primary tw:float-right'
           }
           onClick={() => onUpdateUser()}
         >
diff --git a/src/Components/Templates/AttestationForm.tsx b/src/Components/Templates/AttestationForm.tsx
index edee6d4c..3ed1e6c7 100644
--- a/src/Components/Templates/AttestationForm.tsx
+++ b/src/Components/Templates/AttestationForm.tsx
@@ -88,16 +88,16 @@ export const AttestationForm = ({ api }: { api?: ItemsApi<unknown> }) => {
   const [selectedColor, setSelectedColor] = useState('#fff0d6')
 
   return (
-    <MapOverlayPage backdrop className='tw-h-fit tw-min-h-56 tw-w-96'>
-      <div className='tw-text-center tw-text-xl tw-font-bold'>Gratitude</div>
-      <div className='tw-text-center tw-text-base tw-text-gray-400'>to</div>
-      <div className='tw-flex tw-flex-row tw-justify-center tw-items-center tw-flex-wrap'>
+    <MapOverlayPage backdrop className='tw:h-fit tw:min-h-56 tw:w-96'>
+      <div className='tw:text-center tw:text-xl tw:font-bold'>Gratitude</div>
+      <div className='tw:text-center tw:text-base tw:text-gray-400'>to</div>
+      <div className='tw:flex tw:flex-row tw:justify-center tw:items-center tw:flex-wrap'>
         {users?.map(
           (u, k) => (
-            <div key={k} className='tw-flex tw-items-center tw-space-x-3 tw-mx-2 tw-my-1'>
+            <div key={k} className='tw:flex tw:items-center tw:space-x-3 tw:mx-2 tw:my-1'>
               {u.image ? (
-                <div className='tw-avatar'>
-                  <div className='tw-mask tw-mask-circle tw-w-8 tw-h-8'>
+                <div className='tw:avatar'>
+                  <div className='tw:mask tw:mask-circle tw:w-8 tw:h-8'>
                     <img
                       src={appState.assetsApi.url + u.image + '?width=40&heigth=40'}
                       alt='Avatar'
@@ -105,10 +105,10 @@ export const AttestationForm = ({ api }: { api?: ItemsApi<unknown> }) => {
                   </div>
                 </div>
               ) : (
-                <div className='tw-mask tw-mask-circle tw-text-xl md:tw-text-2xl tw-bg-slate-200 tw-rounded-full tw-w-8 tw-h-8'></div>
+                <div className='tw:mask tw:mask-circle tw:text-xl tw:md:text-2xl tw:bg-slate-200 tw:rounded-full tw:w-8 tw:h-8'></div>
               )}
               <div>
-                <div className='tw-font-bold'>{u.name}</div>
+                <div className='tw:font-bold'>{u.name}</div>
               </div>
             </div>
           ),
@@ -116,9 +116,9 @@ export const AttestationForm = ({ api }: { api?: ItemsApi<unknown> }) => {
         )}
       </div>
 
-      <div className='tw-w-full'>
-        <div className='tw-flex tw-justify-center tw-items-center'>
-          <div className=' tw-flex tw-justify-center tw-items-center tw-w-28 tw-h-28 tw-m-4'>
+      <div className='tw:w-full'>
+        <div className='tw:flex tw:justify-center tw:items-center'>
+          <div className=' tw:flex tw:justify-center tw:items-center tw:w-28 tw:h-28 tw:m-4'>
             <EmojiPicker
               selectedEmoji={selectedEmoji}
               selectedColor={selectedColor}
@@ -129,19 +129,19 @@ export const AttestationForm = ({ api }: { api?: ItemsApi<unknown> }) => {
             />
           </div>
         </div>
-        <div className='tw-flex tw-justify-center tw-items-center'>
+        <div className='tw:flex tw:justify-center tw:items-center'>
           <input
             ref={inputRef}
             value={inputValue}
             onChange={handleChange}
             type='text'
             placeholder='... and say some words'
-            className='tw-input tw-min-w-0 tw-w-fit tw-resize-none tw-overflow-hidden tw-text-center '
+            className='input tw:min-w-0 tw:w-fit tw:resize-none tw:overflow-hidden tw:text-center '
           />
         </div>
       </div>
-      <div className='tw-w-full tw-grid tw-mt-4'>
-        <button onClick={sendAttestation} className='tw-btn tw-place-self-center tw-px-8'>
+      <div className='tw:w-full tw:grid tw:mt-4'>
+        <button onClick={sendAttestation} className='tw:btn tw:place-self-center tw:px-8'>
           Next
         </button>
       </div>
diff --git a/src/Components/Templates/CardPage.tsx b/src/Components/Templates/CardPage.tsx
index e0a10d88..d16ecedc 100644
--- a/src/Components/Templates/CardPage.tsx
+++ b/src/Components/Templates/CardPage.tsx
@@ -17,9 +17,9 @@ export function CardPage({
   parents?: { name: string; path: string }[]
 }) {
   return (
-    <main className='tw-flex-1 tw-overflow-y-auto tw-overflow-x-hidden tw-pt-2 tw-px-6 tw-min-w-80 tw-flex tw-justify-center'>
-      <div className='tw-w-full xl:tw-max-w-6xl '>
-        <div className='tw-text-sm tw-breadcrumbs'>
+    <main className='tw:flex-1 tw:overflow-y-auto tw:overflow-x-hidden tw:pt-2 tw:px-6 tw:min-w-80 tw:flex tw:justify-center'>
+      <div className='tw:w-full tw:xl:max-w-6xl '>
+        <div className='tw:text-sm breadcrumbs'>
           <ul>
             <li>
               <Link to={'/'}>Home</Link>
@@ -32,7 +32,7 @@ export function CardPage({
             <li>{title}</li>
           </ul>
         </div>
-        <TitleCard hideTitle={hideTitle} title={title} topMargin='tw-my-2' className=' tw-mb-4'>
+        <TitleCard hideTitle={hideTitle} title={title} topMargin='tw:my-2' className=' tw:mb-4'>
           {children}
         </TitleCard>
       </div>
diff --git a/src/Components/Templates/DateUserInfo.tsx b/src/Components/Templates/DateUserInfo.tsx
index fcc4dacc..2bbdbbee 100644
--- a/src/Components/Templates/DateUserInfo.tsx
+++ b/src/Components/Templates/DateUserInfo.tsx
@@ -8,24 +8,24 @@ export const DateUserInfo = ({ item }: { item: Item }) => {
   const [infoExpanded, setInfoExpanded] = useState<boolean>(false)
   return (
     <div
-      className='tw-flex -tw-mb-1 tw-flex-row tw-mr-2 -tw-mt-2'
+      className='tw:flex tw:-mb-1 tw:flex-row tw:mr-2 tw:-mt-2'
       onClick={(e) => e.stopPropagation()}
     >
       {infoExpanded ? (
         <p
-          className={'tw-italic tw-min-h-[21px] !tw-my-0 tw-text-gray-500'}
+          className={'tw:italic tw:min-h-[21px] tw:my-0! tw:text-gray-500'}
           onClick={() => setInfoExpanded(false)}
           // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         >{`${item.date_updated && item.date_updated !== item.date_created ? 'updated' : 'posted'} ${item.user_created?.first_name ? `by ${item.user_created.first_name}` : ''} ${item.date_updated ? timeAgo(item.date_updated) : timeAgo(item.date_created!)}`}</p>
       ) : (
         <p
-          className='!tw-my-0 tw-min-h-[21px] tw-font-bold tw-cursor-pointer tw-text-gray-500'
+          className='tw:my-0! tw:min-h-[21px] tw:font-bold tw:cursor-pointer tw:text-gray-500'
           onClick={() => setInfoExpanded(true)}
         >
           ⓘ
         </p>
       )}
-      <div className='tw-grow '></div>
+      <div className='tw:grow '></div>
     </div>
   )
 }
diff --git a/src/Components/Templates/DialogModal.tsx b/src/Components/Templates/DialogModal.tsx
index f7d7c217..f2a72ec9 100644
--- a/src/Components/Templates/DialogModal.tsx
+++ b/src/Components/Templates/DialogModal.tsx
@@ -32,11 +32,11 @@ const DialogModal = ({
   useEffect(() => {
     if (isOpened) {
       ref.current?.showModal()
-      ref.current?.classList.remove('tw-hidden')
+      ref.current?.classList.remove('tw:hidden')
       document.body.classList.add('modal-open') // prevent bg scroll
     } else {
       ref.current?.close()
-      ref.current?.classList.add('tw-hidden')
+      ref.current?.classList.add('tw:hidden')
       document.body.classList.remove('modal-open')
     }
   }, [isOpened])
@@ -44,20 +44,20 @@ const DialogModal = ({
   if (isOpened) {
     return (
       <dialog
-        className={`${className ?? ''} tw-card tw-shadow-xl tw-absolute tw-right-0 tw-top-0 tw-bottom-0 tw-left-0 tw-m-auto tw-transition-opacity tw-duration-300 tw-p-4 tw-max-w-xl tw-bg-base-100`}
+        className={`${className ?? ''} card tw:shadow-xl tw:absolute tw:right-0 tw:top-0 tw:bottom-0 tw:left-0 tw:m-auto tw:transition-opacity tw:duration-300 tw:p-4 tw:max-w-xl tw:bg-base-100`}
         ref={ref}
         onCancel={onClose}
         onClick={(e) =>
           ref.current && !isClickInsideRectangle(e, ref.current) && closeOnClickOutside && onClose()
         }
       >
-        <div className='tw-card-body tw-p-2'>
-          <h2 className='tw-text-2xl tw-font-semibold tw-mb-2 tw-text-center'>{title}</h2>
+        <div className='card-body tw:p-2'>
+          <h2 className='tw:text-2xl tw:font-semibold tw:mb-2 tw:text-center'>{title}</h2>
 
           {children}
           {showCloseButton && (
             <button
-              className='tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw-absolute tw-right-2 tw-top-2'
+              className='btn btn-sm btn-circle btn-ghost tw:absolute tw:right-2 tw:top-2'
               onClick={onClose}
             >
               ✕
diff --git a/src/Components/Templates/EmojiPicker.tsx b/src/Components/Templates/EmojiPicker.tsx
index 9ef1872b..b012f034 100644
--- a/src/Components/Templates/EmojiPicker.tsx
+++ b/src/Components/Templates/EmojiPicker.tsx
@@ -97,45 +97,51 @@ export const EmojiPicker = ({
     <>
       <div
         onClick={toggleDropdown}
-        className={`tw-cursor-pointer ${selectedEmoji === 'select badge' ? 'tw-text-sm !tw-p-9 tw-text-center ' : 'tw-text-6xl'} tw-mask tw-mask-${selectedShape} tw-p-6 tw-bg-[${selectedColor}]`}
+        className={`tw:cursor-pointer ${selectedEmoji === 'select badge' ? 'tw:text-sm tw:p-9! tw:text-center ' : 'tw:text-6xl'} tw:mask tw:mask-${selectedShape} tw:p-6`}
+        style={{ backgroundColor: selectedColor }}
       >
         {selectedEmoji}
       </div>
 
       {isOpen && (
-        <div className='tw-absolute tw-z-3000 tw-top-0 tw-left-1/2 tw-transform tw--translate-x-1/2 tw-mt-12 tw-bg-base-100 tw-rounded-2xl tw-shadow-lg tw-p-2 tw-w-full'>
-          <div className='tw-grid tw-grid-cols-6 tw-gap-2 tw-pb-2'>
+        <div className='tw:absolute tw:z-3000 tw:top-0 tw:left-1/2 tw:transform tw:-translate-x-1/2 tw:mt-12 tw:bg-base-100 tw:rounded-2xl tw:shadow-lg tw:p-2 tw:w-full'>
+          <div className='tw:grid tw:grid-cols-6 tw:gap-2 tw:pb-2'>
             {emojis.map((emoji) => (
               <button
                 key={emoji}
                 onClick={() => selectEmoji(emoji)}
-                className={`tw-cursor-pointer  tw-text-2xl tw-p-2 hover:tw-bg-base-200 tw-rounded-md ${emoji === selectedEmoji ? 'tw-bg-base-300' : ''}`}
+                className={`tw:cursor-pointer  tw:text-2xl tw:p-2 tw:hover:bg-base-200 tw:rounded-md ${emoji === selectedEmoji ? 'tw:bg-base-300' : ''}`}
               >
                 {emoji}
               </button>
             ))}
           </div>
           <hr />
-          <div className='tw-grid tw-grid-cols-3 tw-gap-2 tw-py-2'>
+          <div className='tw:grid tw:grid-cols-3 tw:gap-2 tw:py-2'>
             {shapes.map((shape) => (
               <div
                 key={shape}
-                className={`tw-cursor-pointer hover:tw-bg-base-200 tw-rounded-md tw-p-2 ${shape === selectedShape ? 'tw-bg-base-300' : ''}`}
+                className={`tw:cursor-pointer tw:hover:bg-base-200 tw:rounded-md tw:p-2 ${shape === selectedShape ? 'tw:bg-base-300' : ''}`}
                 onClick={() => selectShape(shape)}
               >
-                <div className={`tw-h-12 tw-mask tw-mask-${shape} tw-bg-neutral-content`}></div>
+                <div
+                  className={`tw:h-12 tw:w-full tw:mask ${shape === 'squircle' ? 'tw:mask-squircle' : shape === 'circle' ? 'tw:mask-circle' : 'tw:mask-hexagon-2'}  tw:bg-neutral-content`}
+                ></div>
               </div>
             ))}
           </div>
           <hr />
-          <div className='tw-grid tw-grid-cols-6 tw-gap-2 tw-py-2 tw-px-6'>
+          <div className='tw:grid tw:grid-cols-6 tw:gap-2 tw:py-2 tw:px-6'>
             {colors.map((color) => (
               <div
                 key={color}
-                className={`tw-cursor-pointer hover:tw-bg-base-200 tw-rounded-md tw-p-2 tw-flex tw-justify-center tw-items-center  ${color === selectedColor ? 'tw-bg-base-300' : ''}`}
+                className={`tw:cursor-pointer tw:hover:bg-base-200 tw:rounded-md tw:p-2 tw:flex tw:justify-center tw:items-center  ${color === selectedColor ? 'tw:bg-base-300' : ''}`}
                 onClick={() => selectColor(color)}
               >
-                <div className={`tw-h-8 tw-w-8 tw-rounded-full tw-bg-[${color}]`}></div>
+                <div
+                  className={`tw:h-8 tw:w-8 tw:rounded-full`}
+                  style={{ backgroundColor: color }}
+                ></div>
               </div>
             ))}
           </div>
diff --git a/src/Components/Templates/ItemCard.tsx b/src/Components/Templates/ItemCard.tsx
index f173124f..02d86240 100644
--- a/src/Components/Templates/ItemCard.tsx
+++ b/src/Components/Templates/ItemCard.tsx
@@ -24,7 +24,7 @@ export const ItemCard = ({
 
   return (
     <div
-      className='tw-cursor-pointer tw-card tw-border-[1px] tw-border-base-300 tw-card-body tw-shadow-xl tw-bg-base-100 tw-text-base-content tw-p-4 tw-mb-4 tw-h-fit'
+      className='tw:cursor-pointer tw:card tw:border-[1px] tw:border-base-300 tw:card-body tw:shadow-xl tw:bg-base-100 tw:text-base-content tw:p-4 tw:mb-4 tw:h-fit'
       onClick={() => {
         // We could have an onClick callback instead
         const params = new URLSearchParams(window.location.search)
@@ -40,7 +40,7 @@ export const ItemCard = ({
         editCallback={() => navigate('/edit-item/' + i.id)}
         deleteCallback={() => deleteCallback(i)}
       ></HeaderView>
-      <div className='tw-overflow-y-auto tw-overflow-x-hidden tw-max-h-64 fade'>
+      <div className='tw:overflow-y-auto tw:overflow-x-hidden tw:max-h-64 fade'>
         {i.layer?.itemType.show_start_end && <StartEndView item={i}></StartEndView>}
         {i.layer?.itemType.show_text && <TextView truncate text={i.text} itemId={i.id} />}
       </div>
diff --git a/src/Components/Templates/MapOverlayPage.tsx b/src/Components/Templates/MapOverlayPage.tsx
index b0daf844..1d3bbc70 100644
--- a/src/Components/Templates/MapOverlayPage.tsx
+++ b/src/Components/Templates/MapOverlayPage.tsx
@@ -38,18 +38,18 @@ export function MapOverlayPage({
   }, [overlayRef, backdropRef])
 
   return (
-    <div className={`tw-absolute tw-h-full tw-w-full tw-m-auto ${backdrop ? 'tw-z-[2000]' : ''}`}>
+    <div className={`tw:absolute tw:h-full tw:w-full tw:m-auto ${backdrop ? 'tw:z-2000' : ''}`}>
       <div
         ref={backdropRef}
-        className={`${backdrop ? 'tw-backdrop-brightness-75' : ''} tw-h-full tw-w-full tw-grid tw-place-items-center tw-m-auto`}
+        className={`${backdrop ? 'tw:backdrop-brightness-75' : ''} tw:h-full tw:w-full tw:grid tw:place-items-center tw:m-auto`}
       >
         <div
           ref={overlayRef}
-          className={`${card ? 'tw-card tw-card-body' : ''} tw-shadow-xl tw-bg-base-100 tw-p-6 ${className ?? ''} ${backdrop ? '' : 'tw-z-[2000]'} tw-absolute tw-top-0 tw-bottom-0 tw-right-0 tw-left-0 tw-m-auto`}
+          className={`${card ? 'tw:card tw:card-body' : ''} tw:shadow-xl tw:bg-base-100 tw:p-6 ${className ?? ''} ${backdrop ? '' : 'tw:z-2000'} tw:absolute tw:top-0 tw:bottom-0 tw:right-0 tw:left-0 tw:m-auto`}
         >
           {children}
           <button
-            className='tw-btn tw-btn-sm tw-btn-circle tw-btn-ghost tw-absolute tw-right-2 tw-top-2'
+            className='tw:btn tw:btn-sm tw:btn-circle tw:btn-ghost tw:absolute tw:right-2 tw:top-2'
             onClick={() => closeScreen()}
           >
             ✕
diff --git a/src/Components/Templates/MarketView.tsx b/src/Components/Templates/MarketView.tsx
index f6326594..994c0245 100644
--- a/src/Components/Templates/MarketView.tsx
+++ b/src/Components/Templates/MarketView.tsx
@@ -61,11 +61,11 @@ export const MarketView = () => {
   }, [items])
 
   return (
-    <MapOverlayPage className='tw-rounded-none tw-overflow-y-auto tw-bg-base-200 !tw-p-4'>
-      <div className='tw-grid tw-grid-cols-1 md:tw-grid-cols-2'>
+    <MapOverlayPage className='tw:rounded-none tw:overflow-y-auto tw:bg-base-200 tw:p-4!'>
+      <div className='tw:grid tw:grid-cols-1 tw:md:grid-cols-2'>
         <div>
-          <p className='tw-text-lg tw-font-bold'>Offers</p>
-          <div className='tw-flex tw-flex-wrap'>
+          <p className='tw:text-lg tw:font-bold'>Offers</p>
+          <div className='tw:flex tw:flex-wrap'>
             {groupAndCount(offers).map((o) => (
               <TagView
                 onClick={() => navigate(`/?tags=${o.object.name}`)}
@@ -77,8 +77,8 @@ export const MarketView = () => {
           </div>
         </div>
         <div>
-          <p className='tw-text-lg tw-font-bold'>Needs</p>
-          <div className='tw-flex tw-flex-wrap'>
+          <p className='tw:text-lg tw:font-bold'>Needs</p>
+          <div className='tw:flex tw:flex-wrap'>
             {groupAndCount(needs).map((o) => (
               <TagView
                 onClick={() => navigate(`/?tags=${o.object.name}`)}
diff --git a/src/Components/Templates/OverlayItemsIndexPage.tsx b/src/Components/Templates/OverlayItemsIndexPage.tsx
index 26a9b506..482d639e 100644
--- a/src/Components/Templates/OverlayItemsIndexPage.tsx
+++ b/src/Components/Templates/OverlayItemsIndexPage.tsx
@@ -128,16 +128,16 @@ export const OverlayItemsIndexPage = ({
 
   return (
     <>
-      <MapOverlayPage className='tw-rounded-none tw-overflow-y-auto tw-bg-base-200 !tw-p-4'>
-        <div className='tw-flex tw-flex-col tw-h-full'>
-          <div className='tw-flex-none'>
+      <MapOverlayPage className='tw:rounded-none tw:overflow-y-auto tw:bg-base-200 tw:p-4!'>
+        <div className='tw:flex tw:flex-col tw:h-full'>
+          <div className='tw:flex-none'>
             <Control position='topLeft' zIndex='1000' absolute={false}>
               <SearchControl />
               <TagsControl />
             </Control>
           </div>
-          <div className='tw-overflow-scroll fade tw-flex-1'>
-            <div className='tw-columns-1 md:tw-columns-2 lg:tw-columns-3 2xl:tw-columns-4 tw-gap-6 tw-pt-4'>
+          <div className='tw:overflow-scroll fade tw:flex-1'>
+            <div className='tw:columns-1 tw:md:columns-2 tw:lg:columns-3 tw:2xl:columns-4 tw:gap-6 tw:pt-4'>
               {items
                 .filter((i) => i.layer?.name === layerName)
                 .filter((item) =>
@@ -165,7 +165,7 @@ export const OverlayItemsIndexPage = ({
                   return dateB - dateA // Subtracts milliseconds which are numbers
                 })
                 .map((i, k) => (
-                  <div key={k} className='tw-break-inside-avoid tw-mb-6'>
+                  <div key={k} className='tw:break-inside-avoid tw:mb-6'>
                     <ItemCard
                       i={i}
                       loading={loading}
@@ -176,12 +176,12 @@ export const OverlayItemsIndexPage = ({
                 ))}
               {addItemPopupType === 'place' && (
                 <form ref={tabRef} autoComplete='off' onSubmit={(e) => submitNewItem(e)}>
-                  <div className='tw-cursor-pointer tw-break-inside-avoid tw-card tw-border-[1px] tw-border-base-300 tw-card-body tw-shadow-xl tw-bg-base-100 tw-text-base-content tw-p-6 tw-mb-10'>
+                  <div className='tw:cursor-pointer tw:break-inside-avoid card tw:border-[1px] tw:border-base-300 card-body tw:shadow-xl tw:bg-base-100 tw:text-base-content tw:p-6 tw:mb-10'>
                     <label
-                      className='tw-btn tw-btn-sm tw-rounded-2xl tw-btn-circle tw-btn-ghost hover:tw-bg-transparent tw-absolute tw-right-0 tw-top-0 tw-text-gray-600'
+                      className='btn btn-sm tw:rounded-2xl btn-circle btn-ghost tw:hover:bg-transparent tw:absolute tw:right-0 tw:top-0 tw:text-gray-600'
                       onClick={() => setAddItemPopupType('')}
                     >
-                      <p className='tw-text-center'>✕</p>
+                      <p className='tw:text-center'>✕</p>
                     </label>
                     <TextInput
                       type='text'
@@ -195,18 +195,18 @@ export const OverlayItemsIndexPage = ({
                       placeholder='Text'
                       dataField='text'
                       defaultValue={''}
-                      inputStyle='tw-h-40 tw-mt-5'
+                      inputStyle='tw:h-40 tw:mt-5'
                     />
-                    <div className='tw-flex tw-justify-center'>
+                    <div className='tw:flex tw:justify-center'>
                       <button
                         className={
                           loading
-                            ? 'tw-btn tw-btn-disabled tw-mt-5 tw-place-self-center'
-                            : 'tw-btn tw-mt-5 tw-place-self-center'
+                            ? 'btn btn-disabled tw:mt-5 tw:place-self-center'
+                            : 'btn tw:mt-5 tw:place-self-center'
                         }
                         type='submit'
                       >
-                        {loading ? <span className='tw-loading tw-loading-spinner'></span> : 'Save'}
+                        {loading ? <span className='loading loading-spinner'></span> : 'Save'}
                       </button>
                     </div>
                   </div>
diff --git a/src/Components/Templates/SelectUser.tsx b/src/Components/Templates/SelectUser.tsx
index 770bd1ed..8f1083c2 100644
--- a/src/Components/Templates/SelectUser.tsx
+++ b/src/Components/Templates/SelectUser.tsx
@@ -18,12 +18,12 @@ export const SelectUser = () => {
   const [selectedUsers, setSelectedUsers] = useState<string[]>([])
 
   return (
-    <MapOverlayPage backdrop className='tw-h-3/4 tw-w-80'>
-      <div className='tw-text-center tw-text-xl tw-font-bold tw-mb-4'>Gratitude to ...</div>
+    <MapOverlayPage backdrop className='tw:h-3/4 tw:w-80'>
+      <div className='tw:text-center tw:text-xl tw:font-bold tw:mb-4'>Gratitude to ...</div>
 
       {/* Team Member list in table format loaded constant */}
-      <div className='tw-overflow-x-auto tw-w-full fade'>
-        <table className='tw-table tw-w-full'>
+      <div className='tw:overflow-x-auto tw:w-full fade'>
+        <table className='tw:table tw:w-full'>
           <tbody>
             {users.map((u, k) => {
               return (
@@ -32,14 +32,14 @@ export const SelectUser = () => {
                     <input
                       type='checkbox'
                       onChange={() => setSelectedUsers((prev) => [...prev, u.id])}
-                      className='tw-checkbox tw-checkbox-sm'
+                      className='checkbox checkbox-sm'
                     />
                   </td>
                   <td>
-                    <div className='tw-flex tw-items-center tw-space-x-3'>
+                    <div className='tw:flex tw:items-center tw:space-x-3'>
                       {u.image ? (
-                        <div className='tw-avatar'>
-                          <div className='tw-mask tw-mask-circle tw-w-8 tw-h-8'>
+                        <div className='tw:avatar'>
+                          <div className='tw:mask tw:mask-circle tw:w-8 tw:h-8'>
                             <img
                               src={appState.assetsApi.url + u.image + '?width=40&heigth=40'}
                               alt='Avatar'
@@ -47,10 +47,10 @@ export const SelectUser = () => {
                           </div>
                         </div>
                       ) : (
-                        <div className='tw-mask tw-mask-circle tw-text-xl md:tw-text-2xl tw-bg-slate-200 tw-rounded-full tw-w-8 tw-h-8'></div>
+                        <div className='tw:mask tw:mask-circle tw:text-xl tw:md:text-2xl tw:bg-slate-200 tw:rounded-full tw:w-8 tw:h-8'></div>
                       )}
                       <div>
-                        <div className='tw-font-bold'>{u.name}</div>
+                        <div className='tw:font-bold'>{u.name}</div>
                       </div>
                     </div>
                   </td>
@@ -60,12 +60,12 @@ export const SelectUser = () => {
           </tbody>
         </table>
       </div>
-      <div className='tw-w-full tw-grid tw-mt-4'>
+      <div className='tw:w-full tw:grid tw:mt-4'>
         <Link
-          className='tw-place-self-center '
+          className='tw:place-self-center '
           to={'/attestation-form' + '?to=' + selectedUsers.map((u) => u, ',')}
         >
-          <button className='tw-btn tw-px-8'>Next</button>
+          <button className='tw:btn tw:px-8'>Next</button>
         </Link>
       </div>
     </MapOverlayPage>
diff --git a/src/Components/Templates/TagView.tsx b/src/Components/Templates/TagView.tsx
index 1483e0b0..35493b1a 100644
--- a/src/Components/Templates/TagView.tsx
+++ b/src/Components/Templates/TagView.tsx
@@ -19,11 +19,11 @@ export const TagView = ({
     <div
       key={tag.name}
       onClick={onClick}
-      className={`tw-flex tw-items-center tw-flex-row tw-rounded-2xl tw-text-white tw-p-2 tw-px-4 tw-shadow-xl tw-card tw-mt-3 tw-mr-4 tw-cursor-pointer tw-w-fit ${heighlight ? 'tw-border-4 tw-border-base-200 tw-shadow-lg' : ''}`}
+      className={`tw:flex tw:items-center tw:flex-row tw:rounded-2xl tw:text-white tw:p-2 tw:px-4 tw:shadow-xl card tw:mt-3 tw:mr-4 tw:cursor-pointer tw:w-fit ${heighlight ? 'tw:border-4 tw:border-base-200 tw:shadow-lg' : ''}`}
       style={{ backgroundColor: tag.color ? tag.color : '#666' }}
     >
       <b>{decodeTag(tag.name)}</b>
-      {count && <span className='tw-ml-2'>({count})</span>}
+      {count && <span className='tw:ml-2'>({count})</span>}
     </div>
   )
 }
diff --git a/src/Components/Templates/ThemeControl.tsx b/src/Components/Templates/ThemeControl.tsx
new file mode 100644
index 00000000..6ed593fc
--- /dev/null
+++ b/src/Components/Templates/ThemeControl.tsx
@@ -0,0 +1,63 @@
+import { useState, useEffect } from 'react'
+
+const themes = [
+  'default',
+  'light',
+  'dark',
+  'valentine',
+  'retro',
+  'aqua',
+  'cyberpunk',
+  'caramellatte',
+  'abyss',
+  'silk',
+]
+
+export const ThemeControl = () => {
+  const [theme, setTheme] = useState<string>(() => {
+    const savedTheme = localStorage.getItem('theme')
+    return savedTheme ? (JSON.parse(savedTheme) as string) : 'default'
+  })
+
+  useEffect(() => {
+    if (theme !== 'default') {
+      localStorage.setItem('theme', JSON.stringify(theme))
+    } else localStorage.removeItem('theme')
+    document.documentElement.setAttribute('data-theme', theme)
+  }, [theme])
+
+  return (
+    <div className='tw:dropdown tw:mr-2'>
+      <div tabIndex={0} role='button' className='tw:btn tw:m-1'>
+        Theme
+        <svg
+          width='12px'
+          height='12px'
+          className='tw:inline-block tw:h-2 tw:w-2 tw:fill-current tw:opacity-60'
+          xmlns='http://www.w3.org/2000/svg'
+          viewBox='0 0 2048 2048'
+        >
+          <path d='M1799 349l242 241-1017 1017L7 590l242-241 775 775 775-775z'></path>
+        </svg>
+      </div>
+      <ul
+        tabIndex={0}
+        className='tw:dropdown-content tw:bg-base-200 tw:rounded-box tw:z-1 tw:w-36 tw:p-2 tw:shadow-2xl'
+      >
+        {themes.map((t) => (
+          <li key={t}>
+            <input
+              className={`tw:btn ${theme === t ? 'tw:bg-base-300' : ''} tw:btn-sm tw:btn-block tw:btn-ghost tw:justify-start`}
+              type='radio'
+              name='theme'
+              value={t}
+              checked={theme === t}
+              onChange={() => setTheme(t)}
+              aria-label={t.toLowerCase()}
+            />
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}
diff --git a/src/Components/Templates/TitleCard.tsx b/src/Components/Templates/TitleCard.tsx
index d90a93f7..fe644412 100644
--- a/src/Components/Templates/TitleCard.tsx
+++ b/src/Components/Templates/TitleCard.tsx
@@ -23,28 +23,28 @@ export function TitleCard({
   return (
     <div
       className={
-        'tw-card tw-w-full tw-p-6 tw-bg-base-100 tw-shadow-xl tw-h-fit tw-mb-4 ' +
+        'card tw:w-full tw:p-6 tw:bg-base-100 tw:shadow-xl tw:h-fit tw:mb-4 ' +
         (className ?? '') +
         ' ' +
-        (topMargin ?? 'tw-mt-6')
+        (topMargin ?? 'tw:mt-6')
       }
     >
       {!hideTitle && (
         <>
-          <Subtitle styleClass={TopSideButtons ? 'tw-inline-block' : ''}>
+          <Subtitle styleClass={TopSideButtons ? 'tw:inline-block' : ''}>
             {title}
 
             {/* Top side button, show only if present */}
             {TopSideButtons && (
-              <div className='tw-inline-block tw-float-right'>{TopSideButtons}</div>
+              <div className='tw:inline-block tw:float-right'>{TopSideButtons}</div>
             )}
           </Subtitle>
-          <div className='tw-divider tw-mt-2'></div>
+          <div className='divider tw:mt-2'></div>
         </>
       )}
 
       {/** Card Body */}
-      <div className='tw-h-full tw-bg-transparent tw-w-full tw-pb-6 tw-bg-base-100'>{children}</div>
+      <div className='tw:h-full tw:bg-transparent tw:w-full tw:pb-6 tw:bg-base-100'>{children}</div>
     </div>
   )
 }
diff --git a/src/Components/Typography/ErrorText.tsx b/src/Components/Typography/ErrorText.tsx
index b1af8717..ebd1da0e 100644
--- a/src/Components/Typography/ErrorText.tsx
+++ b/src/Components/Typography/ErrorText.tsx
@@ -1,5 +1,5 @@
 function ErrorText({ styleClass, children }: { styleClass: string; children: React.ReactNode }) {
-  return <p className={`tw-text-center  tw-text-error ${styleClass}`}>{children}</p>
+  return <p className={`tw:text-center  tw:text-error ${styleClass}`}>{children}</p>
 }
 
 export default ErrorText
diff --git a/src/Components/Typography/Subtitle.tsx b/src/Components/Typography/Subtitle.tsx
index 2aadab5e..4526cfc8 100644
--- a/src/Components/Typography/Subtitle.tsx
+++ b/src/Components/Typography/Subtitle.tsx
@@ -1,5 +1,5 @@
 function Subtitle({ styleClass, children }: { styleClass: string; children: React.ReactNode }) {
-  return <div className={`tw-text-xl tw-font-semibold ${styleClass}`}>{children}</div>
+  return <div className={`tw:text-xl tw:font-semibold ${styleClass}`}>{children}</div>
 }
 
 export default Subtitle
diff --git a/src/assets/chevron.svg b/src/assets/chevron.svg
index fb6f4454..c12f3bcd 100644
--- a/src/assets/chevron.svg
+++ b/src/assets/chevron.svg
@@ -2,7 +2,7 @@
             xmlns='http://www.w3.org/2000/svg'
             viewBox='0 0 24 24'
             fill='white'
-            className='tw-h-4 tw-w-4'
+            className='h-4 w-4'
           >
             <path d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z' />
           </svg>
\ No newline at end of file
diff --git a/src/assets/css/leaflet.css b/src/assets/css/leaflet.css
index 5c464e19..1092c697 100644
--- a/src/assets/css/leaflet.css
+++ b/src/assets/css/leaflet.css
@@ -20,26 +20,25 @@
 }
 
 .leaflet-popup-content-wrapper, .leaflet-popup-tip{
-    background-color: theme('colors.base-100');
-    color: theme('colors.base-content');
-
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+    border-radius: var(--radius-box);
 }
 
 .leaflet-tooltip {
-    background-color: theme('colors.base-100');
-    color: theme('colors.base-content');
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
     border-width: 0px;
 }
 
 .leaflet-tooltip {
-    border-radius: 1em;
+    border-radius: var(--radius-box);
     transition: opacity 500ms;
     transition-delay: 50ms;
-
 }
 
-.leaflet-tooltip-top::before {
-    border-top-color: theme('colors.base-100');
+.leaflet-tooltip::before {
+    border-top-color: var(--color-base-100);
 }
 
 .leaflet-container {
@@ -48,4 +47,9 @@
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: 50% 80%;
+}
+
+.leaflet-popup-close-button span {
+    color: var(--color-base-content);
+    opacity: 50%;
 }
\ No newline at end of file
diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
index 0c34187f..409668fc 100644
--- a/src/assets/css/tailwind.css
+++ b/src/assets/css/tailwind.css
@@ -1,24 +1,80 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss' prefix(tw);
+@plugin "daisyui" {
+  themes: light --default, dark --prefersdark, valentine, retro, aqua, cyberpunk, caramellatte, abyss, silk;
+}
 
-.tw-modal {
+@theme {
+  --animate-*: initial;
+  --animate-pulse-grow: pulseGrow 2s ease-in-out infinite;
+
+  --z-index-500: 500;
+  --z-index-1000: 1000;
+  --z-index-2000: 2000;
+  --z-index-3000: 3000;
+
+  --min-width-56: 224px;
+  --min-width-64: 240px;
+  --min-width-80: 320px;
+
+  --container-52: 208px;
+  --container-64: 240px;
+  --container-72: 288px;
+
+  --min-height-56: 224px;
+  --min-height-64: 240px;
+  --min-height-80: 320px;
+
+  --font-sans: Helvetica, sans-serif, Roboto;
+
+  --text-map: 13px;
+
+  --leading-map: 1.4em;
+
+  @keyframes pulseGrow {
+    0%,
+    100% {
+      transform: scale(1);
+    }
+    80% {
+      transform: scale(1);
+    }
+    90% {
+      transform: scale(0.95);
+    }
+  }
+}
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
+
+.modal {
     z-index: 1200 !important;
 }
 
-.tw-menu li a {
+.menu li a {
     border-radius: 10px;
 }
 
-.tw-modal {
+.modal {
     z-index: 1200 !important;
     max-height: 100dvh;
 }
 
-.tw-modal-box {
+.modal-box {
     max-height: calc(100dvh - 2em);
-}
-
-.tw-tab-content .container {
-    height: 100%;
 }
\ No newline at end of file
diff --git a/src/assets/css/toastify.css b/src/assets/css/toastify.css
index aa235288..422510e9 100644
--- a/src/assets/css/toastify.css
+++ b/src/assets/css/toastify.css
@@ -1,20 +1,20 @@
 :root {
-    --toastify-color-info: theme('colors.info');
-    --toastify-color-success: theme('colors.success');
-    --toastify-color-warning: theme('colors.warning');
-    --toastify-color-error: theme('colors.error');
+    --toastify-color-info: var(--color-info);
+    --toastify-color-success: var(--color-success);
+    --toastify-color-warning: var(--color-warning);
+    --toastify-color-error: var(--color-error);
 }
 
 .Toastify__toast {
-    border-radius: 1rem;
-    --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-    --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
-    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+    border-radius: var(--radius-box);
+    --shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --shadow-colored: 0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color);
+    box-shadow: var(--ring-offset-shadow, 0 0 #0000), var(--ring-shadow, 0 0 #0000), var(--shadow);
     margin-left: 1rem;
     margin-right: 1rem;
     margin-bottom: 1rem;
-    background-color: theme('colors.base-100');
-    color: theme('colors.base-content');
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
 }
 
 .Toastify__toast-container {
diff --git a/src/assets/plus.svg b/src/assets/plus.svg
index ae77e510..ebc620a3 100644
--- a/src/assets/plus.svg
+++ b/src/assets/plus.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="tw-w-5 tw-h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path></svg>
\ No newline at end of file
diff --git a/src/assets/targetDot.svg b/src/assets/targetDot.svg
index 9ded1a69..a600b43b 100644
--- a/src/assets/targetDot.svg
+++ b/src/assets/targetDot.svg
@@ -3,7 +3,7 @@
                             fill='currentColor'
                             strokeWidth='0'
                             viewBox='0 0 512 512'
-                            className='tw-w-5 tw-h-5'
+                            className='w-5 h-5'
                             xmlns='http://www.w3.org/2000/svg'
                           >
                             <path d='M256 0c17.7 0 32 14.3 32 32V42.4c93.7 13.9 167.7 88 181.6 181.6H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H469.6c-13.9 93.7-88 167.7-181.6 181.6V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V469.6C130.3 455.7 56.3 381.7 42.4 288H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H42.4C56.3 130.3 130.3 56.3 224 42.4V32c0-17.7 14.3-32 32-32zM107.4 288c12.5 58.3 58.4 104.1 116.6 116.6V384c0-17.7 14.3-32 32-32s32 14.3 32 32v20.6c58.3-12.5 104.1-58.4 116.6-116.6H384c-17.7 0-32-14.3-32-32s14.3-32 32-32h20.6C392.1 165.7 346.3 119.9 288 107.4V128c0 17.7-14.3 32-32 32s-32-14.3-32-32V107.4C165.7 119.9 119.9 165.7 107.4 224H128c17.7 0 32 14.3 32 32s-14.3 32-32 32H107.4zM256 224a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'></path>
diff --git a/src/assets/user.svg b/src/assets/user.svg
index 4a0573ec..97b4d23e 100644
--- a/src/assets/user.svg
+++ b/src/assets/user.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 150 150" class="tw-w-20 tw-h-20 tw-rounded-full" style="background-color: rgb(238, 238, 238);"><path fill="#ccc" d="M 104.68731,56.689353 C 102.19435,80.640493 93.104981,97.26875 74.372196,97.26875 55.639402,97.26875 46.988823,82.308034 44.057005,57.289941 41.623314,34.938838 55.639402,15.800152 74.372196,15.800152 c 18.732785,0 32.451944,18.493971 30.315114,40.889201 z"></path><path fill="#ccc" d="M 92.5675 89.6048 C 90.79484 93.47893 89.39893 102.4504 94.86478 106.9039 C 103.9375 114.2963 106.7064 116.4723 118.3117 118.9462 C 144.0432 124.4314 141.6492 138.1543 146.5244 149.2206 L 4.268444 149.1023 C 8.472223 138.6518 6.505799 124.7812 32.40051 118.387 C 41.80992 116.0635 45.66513 113.8823 53.58659 107.0158 C 58.52744 102.7329 57.52583 93.99267 56.43084 89.26926 C 52.49275 88.83011 94.1739 88.14054 92.5675 89.6048 z"></path></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 150 150" class="w-20 h-20 rounded-full" style="background-color: rgb(238, 238, 238);"><path fill="#ccc" d="M 104.68731,56.689353 C 102.19435,80.640493 93.104981,97.26875 74.372196,97.26875 55.639402,97.26875 46.988823,82.308034 44.057005,57.289941 41.623314,34.938838 55.639402,15.800152 74.372196,15.800152 c 18.732785,0 32.451944,18.493971 30.315114,40.889201 z"></path><path fill="#ccc" d="M 92.5675 89.6048 C 90.79484 93.47893 89.39893 102.4504 94.86478 106.9039 C 103.9375 114.2963 106.7064 116.4723 118.3117 118.9462 C 144.0432 124.4314 141.6492 138.1543 146.5244 149.2206 L 4.268444 149.1023 C 8.472223 138.6518 6.505799 124.7812 32.40051 118.387 C 41.80992 116.0635 45.66513 113.8823 53.58659 107.0158 C 58.52744 102.7329 57.52583 93.99267 56.43084 89.26926 C 52.49275 88.83011 94.1739 88.14054 92.5675 89.6048 z"></path></svg>
\ No newline at end of file
diff --git a/src/types/UtopiaMapProps.d.ts b/src/types/UtopiaMapProps.d.ts
new file mode 100644
index 00000000..eaa455a2
--- /dev/null
+++ b/src/types/UtopiaMapProps.d.ts
@@ -0,0 +1,19 @@
+import type { Tag } from './Tag'
+import type { GeoJsonObject } from 'geojson'
+
+export interface UtopiaMapProps {
+  height?: string
+  width?: string
+  center?: [number, number]
+  zoom?: number
+  tags?: Tag[]
+  children?: React.ReactNode
+  geo?: GeoJsonObject
+  showFilterControl?: boolean
+  showLayerControl?: boolean
+  showGratitudeControl?: boolean
+  showThemeControl?: boolean
+  infoText?: string
+  donationWidget?: boolean
+  defaultTheme?: string
+}
diff --git a/tailwind.config.js b/tailwind.config.js
deleted file mode 100644
index c7c62895..00000000
--- a/tailwind.config.js
+++ /dev/null
@@ -1,91 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-// eslint-disable-next-line import/no-commonjs
-module.exports = {
-  content: ['./src/**/*.{js,jsx,ts,tsx}', './node_modules/tw-elements/dist/js/**/*.js'],
-  safelist: [
-    'tw-mask-squircle',
-    'tw-mask-circle',
-    'tw-mask-hexagon-2',
-    'tw-mask-decagon',
-    'tw-bg-[#FF99C8]',
-    'tw-bg-[#fff0d6]',
-    'tw-bg-[#FCF6BD]',
-    'tw-bg-[#D0F4DE]',
-    'tw-bg-[#A9DEF9]',
-    'tw-bg-[#E4C1F9]',
-    'tw-bg-[#de324c]',
-    'tw-bg-[#f4895f]',
-    'tw-bg-[#f8e16f]',
-    'tw-bg-[#95cf92]',
-    'tw-bg-[#369acc]',
-    'tw-bg-[#9656a2]',
-  ],
-  theme: {
-    extend: {
-      zIndex: {
-        3000: '3000',
-        2000: '2000',
-        1000: '1000',
-        500: '500',
-      },
-      minWidth: {
-        80: '320px',
-        64: '240px',
-        56: '224px',
-      },
-      maxWidth: {
-        52: '208px',
-        64: '240px',
-        72: '288px',
-      },
-      minHeight: {
-        80: '320px',
-        64: '240px',
-        56: '224px',
-      },
-      fontFamily: {
-        sans: ['Helvetica', 'sans-serif', 'Roboto'],
-      },
-      fontSize: {
-        map: '13px',
-      },
-      lineHeight: {
-        map: '1.4em',
-      },
-    },
-    keyframes: {
-      pulseGrow: {
-        '0%, 100%': { transform: 'scale(1.00)' },
-        '80%': { transform: 'scale(1.00)' },
-        '90%': { transform: 'scale(0.95)' },
-      },
-    },
-    animation: {
-      pulseGrow: 'pulseGrow 2s ease-in-out infinite',
-    },
-  },
-  // eslint-disable-next-line import/no-commonjs
-  plugins: [require('daisyui')],
-  daisyui: {
-    themes: [
-      'light',
-      'dark',
-      'cupcake',
-      'retro',
-      'cyberpunk',
-      'aqua',
-      {
-        docutopia: {
-          primary: '#8e00ff',
-          secondary: '#00bb7a',
-          accent: '#006aff',
-          neutral: '#231502',
-          'base-content': '#ffad6b',
-          'base-100': '#440844',
-        },
-      },
-    ],
-  },
-  prefix: 'tw-',
-  // content: ['./src/**/*.{js,jsx,ts,tsx}'],
-}