diff --git a/modules/webapp/package-lock.json b/modules/webapp/package-lock.json
index 76a7506609..e4620baf26 100644
--- a/modules/webapp/package-lock.json
+++ b/modules/webapp/package-lock.json
@@ -202,16 +202,16 @@
       "dev": true
     },
     "autoprefixer": {
-      "version": "10.3.7",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.3.7.tgz",
-      "integrity": "sha512-EmGpu0nnQVmMhX8ROoJ7Mx8mKYPlcUHuxkwrRYEYMz85lu7H09v8w6R1P0JPdn/hKU32GjpLBFEOuIlDWCRWvg==",
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.0.tgz",
+      "integrity": "sha512-7FdJ1ONtwzV1G43GDD0kpVMn/qbiNqyOPMFTX5nRffI+7vgWoFEc6DcXOxHJxrWNDXrZh18eDsZjvZGUljSRGA==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.17.3",
-        "caniuse-lite": "^1.0.30001264",
+        "browserslist": "^4.17.5",
+        "caniuse-lite": "^1.0.30001272",
         "fraction.js": "^4.1.1",
         "normalize-range": "^0.1.2",
-        "picocolors": "^0.2.1",
+        "picocolors": "^1.0.0",
         "postcss-value-parser": "^4.1.0"
       }
     },
@@ -253,24 +253,16 @@
       }
     },
     "browserslist": {
-      "version": "4.17.5",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.17.5.tgz",
-      "integrity": "sha512-I3ekeB92mmpctWBoLXe0d5wPS2cBuRvvW0JyyJHMrk9/HmP2ZjrTboNAZ8iuGqaEIlKguljbQY32OkOJIRrgoA==",
+      "version": "4.19.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.19.1.tgz",
+      "integrity": "sha512-u2tbbG5PdKRTUoctO3NBD8FQ5HdPh1ZXPHzp1rwaa5jTc+RV9/+RlWiAIKmjRPQF+xbGM9Kklj5bZQFa2s/38A==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001271",
-        "electron-to-chromium": "^1.3.878",
+        "caniuse-lite": "^1.0.30001286",
+        "electron-to-chromium": "^1.4.17",
         "escalade": "^3.1.1",
         "node-releases": "^2.0.1",
         "picocolors": "^1.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-          "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-          "dev": true
-        }
       }
     },
     "callsites": {
@@ -298,9 +290,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001271",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001271.tgz",
-      "integrity": "sha512-BBruZFWmt3HFdVPS8kceTBIguKxu4f99n5JNp06OlPD/luoAMIaIK5ieV5YjnBLH3Nysai9sxj9rpJj4ZisXOA==",
+      "version": "1.0.30001291",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001291.tgz",
+      "integrity": "sha512-roMV5V0HNGgJ88s42eE70sstqGW/gwFndosYrikHthw98N5tLnOTxFqMLQjZVRxTWFlJ4rn+MsgXrR7MDPY4jA==",
       "dev": true
     },
     "chalk": {
@@ -356,9 +348,9 @@
       "dev": true
     },
     "colord": {
-      "version": "2.9.1",
-      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.1.tgz",
-      "integrity": "sha512-4LBMSt09vR0uLnPVkOUBnmxgoaeN4ewRbx801wY/bXcltXfpR/G46OdWn96XpYmCWuYvO46aBZP4NgX8HpNAcw==",
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz",
+      "integrity": "sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ==",
       "dev": true
     },
     "commander": {
@@ -386,12 +378,6 @@
         "yaml": "^1.10.0"
       }
     },
-    "css-color-names": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-1.0.1.tgz",
-      "integrity": "sha512-/loXYOch1qU1biStIFsHH8SxTmOseh1IJqFvy8IujXOm1h+QjUdDhkzOrR5HG8K8mlxREj0yfi8ewCHx0eMxzA==",
-      "dev": true
-    },
     "css-declaration-sorter": {
       "version": "6.1.3",
       "resolved": "https://registry.npmjs.org/css-declaration-sorter/-/css-declaration-sorter-6.1.3.tgz",
@@ -402,16 +388,16 @@
       }
     },
     "css-select": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.1.3.tgz",
-      "integrity": "sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/css-select/-/css-select-4.2.0.tgz",
+      "integrity": "sha512-6YVG6hsH9yIb/si3Th/is8Pex7qnVHO6t7q7U6TIUnkQASGbS8tnUDBftnPynLNnuUl/r2+PTd0ekiiq7R0zJw==",
       "dev": true,
       "requires": {
         "boolbase": "^1.0.0",
-        "css-what": "^5.0.0",
-        "domhandler": "^4.2.0",
-        "domutils": "^2.6.0",
-        "nth-check": "^2.0.0"
+        "css-what": "^5.1.0",
+        "domhandler": "^4.3.0",
+        "domutils": "^2.8.0",
+        "nth-check": "^2.0.1"
       }
     },
     "css-tree": {
@@ -437,37 +423,36 @@
       "dev": true
     },
     "cssnano": {
-      "version": "5.0.8",
-      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.0.8.tgz",
-      "integrity": "sha512-Lda7geZU0Yu+RZi2SGpjYuQz4HI4/1Y+BhdD0jL7NXAQ5larCzVn+PUGuZbDMYz904AXXCOgO5L1teSvgu7aFg==",
+      "version": "5.0.14",
+      "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-5.0.14.tgz",
+      "integrity": "sha512-qzhRkFvBhv08tbyKCIfWbxBXmkIpLl1uNblt8SpTHkgLfON5OCPX/CCnkdNmEosvo8bANQYmTTMEgcVBlisHaw==",
       "dev": true,
       "requires": {
-        "cssnano-preset-default": "^5.1.4",
-        "is-resolvable": "^1.1.0",
+        "cssnano-preset-default": "^5.1.9",
         "lilconfig": "^2.0.3",
         "yaml": "^1.10.2"
       }
     },
     "cssnano-preset-default": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.1.4.tgz",
-      "integrity": "sha512-sPpQNDQBI3R/QsYxQvfB4mXeEcWuw0wGtKtmS5eg8wudyStYMgKOQT39G07EbW1LB56AOYrinRS9f0ig4Y3MhQ==",
+      "version": "5.1.9",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-5.1.9.tgz",
+      "integrity": "sha512-RhkEucqlQ+OxEi14K1p8gdXcMQy1mSpo7P1oC44oRls7BYIj8p+cht4IFBFV3W4iOjTP8EUB33XV1fX9KhDzyA==",
       "dev": true,
       "requires": {
         "css-declaration-sorter": "^6.0.3",
         "cssnano-utils": "^2.0.1",
         "postcss-calc": "^8.0.0",
-        "postcss-colormin": "^5.2.0",
-        "postcss-convert-values": "^5.0.1",
+        "postcss-colormin": "^5.2.2",
+        "postcss-convert-values": "^5.0.2",
         "postcss-discard-comments": "^5.0.1",
         "postcss-discard-duplicates": "^5.0.1",
         "postcss-discard-empty": "^5.0.1",
         "postcss-discard-overridden": "^5.0.1",
-        "postcss-merge-longhand": "^5.0.2",
-        "postcss-merge-rules": "^5.0.2",
+        "postcss-merge-longhand": "^5.0.4",
+        "postcss-merge-rules": "^5.0.3",
         "postcss-minify-font-values": "^5.0.1",
-        "postcss-minify-gradients": "^5.0.2",
-        "postcss-minify-params": "^5.0.1",
+        "postcss-minify-gradients": "^5.0.3",
+        "postcss-minify-params": "^5.0.2",
         "postcss-minify-selectors": "^5.1.0",
         "postcss-normalize-charset": "^5.0.1",
         "postcss-normalize-display-values": "^5.0.1",
@@ -476,13 +461,13 @@
         "postcss-normalize-string": "^5.0.1",
         "postcss-normalize-timing-functions": "^5.0.1",
         "postcss-normalize-unicode": "^5.0.1",
-        "postcss-normalize-url": "^5.0.2",
+        "postcss-normalize-url": "^5.0.4",
         "postcss-normalize-whitespace": "^5.0.1",
         "postcss-ordered-values": "^5.0.2",
-        "postcss-reduce-initial": "^5.0.1",
+        "postcss-reduce-initial": "^5.0.2",
         "postcss-reduce-transforms": "^5.0.1",
-        "postcss-svgo": "^5.0.2",
-        "postcss-unique-selectors": "^5.0.1"
+        "postcss-svgo": "^5.0.3",
+        "postcss-unique-selectors": "^5.0.2"
       }
     },
     "cssnano-utils": {
@@ -562,9 +547,9 @@
       "dev": true
     },
     "domhandler": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.2.2.tgz",
-      "integrity": "sha512-PzE9aBMsdZO8TK4BnuJwH0QT41wgMbRzuZrHUcpYncEjmQazq8QEaBWgLG7ZyC/DAZKEgglpIA6j4Qn/HmxS3w==",
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.3.0.tgz",
+      "integrity": "sha512-fC0aXNQXqKSFTr2wDNZDhsEYjCiYsDWl3D01kwt25hm1YIPyDGHvvi3rw+PLqHAl/m71MaiF7d5zvBr0p5UB2g==",
       "dev": true,
       "requires": {
         "domelementtype": "^2.2.0"
@@ -582,9 +567,9 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.3.878",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.878.tgz",
-      "integrity": "sha512-O6yxWCN9ph2AdspAIszBnd9v8s11hQx8ub9w4UGApzmNRnoKhbulOWqbO8THEQec/aEHtvy+donHZMlh6l1rbA==",
+      "version": "1.4.24",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.24.tgz",
+      "integrity": "sha512-erwx5r69B/WFfFuF2jcNN0817BfDBdC4765kQ6WltOMuwsimlQo3JTEq0Cle+wpHralwdeX3OfAtw/mHxPK0Wg==",
       "dev": true
     },
     "emoji-regex": {
@@ -658,9 +643,9 @@
       "dev": true
     },
     "fraction.js": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.1.tgz",
-      "integrity": "sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.1.2.tgz",
+      "integrity": "sha512-o2RiJQ6DZaR/5+Si0qJUIy637QMRudSi9kU/FFzx9EZazrIdnBgpU+3sEWCxAVhH2RtxW2Oz+T4p2o8uOPVcgA==",
       "dev": true
     },
     "fs-extra": {
@@ -764,9 +749,9 @@
       "dev": true
     },
     "ignore": {
-      "version": "5.1.8",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
-      "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
+      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
       "dev": true
     },
     "import-cwd": {
@@ -821,12 +806,6 @@
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
       "dev": true
     },
-    "is-absolute-url": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
-      "integrity": "sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==",
-      "dev": true
-    },
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -878,12 +857,6 @@
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true
     },
-    "is-resolvable": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
-      "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==",
-      "dev": true
-    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -907,9 +880,9 @@
       }
     },
     "lilconfig": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.3.tgz",
-      "integrity": "sha512-EHKqr/+ZvdKCifpNrJCKxBTgk5XupZA3y/aCPY9mxfgBzmgh93Mt/WqjjQ38oMxXuvDokaKiM3lAgvSH2sjtHg==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.4.tgz",
+      "integrity": "sha512-bfTIN7lEsiooCocSISTWXkiWJkRqtL9wYtYy+8EK3Y41qh3mpwPU0ycTOgjdY9ErwXCc8QyrQp82bdL0Xkm9yA==",
       "dev": true
     },
     "lines-and-columns": {
@@ -1003,12 +976,6 @@
       "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
       "dev": true
     },
-    "nanocolors": {
-      "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.1.12.tgz",
-      "integrity": "sha512-2nMHqg1x5PU+unxX7PGY7AuYxl2qDx7PSrTRjizr8sxdd3l/3hBuWWaki62qmtYm2U5i4Z5E7GbjlyDFhs9/EQ==",
-      "dev": true
-    },
     "nanoid": {
       "version": "3.1.30",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
@@ -1103,9 +1070,9 @@
       "dev": true
     },
     "picocolors": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz",
-      "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
       "dev": true
     },
     "picomatch": {
@@ -1121,22 +1088,14 @@
       "dev": true
     },
     "postcss": {
-      "version": "8.3.11",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.3.11.tgz",
-      "integrity": "sha512-hCmlUAIlUiav8Xdqw3Io4LcpA1DOt7h3LSTAC4G6JGHFFaWzI6qvFt9oilvl8BmkbBRX1IhM90ZAmpk68zccQA==",
+      "version": "8.4.5",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz",
+      "integrity": "sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==",
       "dev": true,
       "requires": {
         "nanoid": "^3.1.30",
         "picocolors": "^1.0.0",
-        "source-map-js": "^0.6.2"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-          "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-          "dev": true
-        }
+        "source-map-js": "^1.0.1"
       }
     },
     "postcss-calc": {
@@ -1150,9 +1109,9 @@
       }
     },
     "postcss-cli": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-9.0.1.tgz",
-      "integrity": "sha512-zO160OBaAZBFUWO+QZIzEKMjnPIc5c61dMg1d7xafblh9cxbNb6s16ahJuP91PcVsu//gqr7BKllJxRiRDsSYw==",
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-cli/-/postcss-cli-9.1.0.tgz",
+      "integrity": "sha512-zvDN2ADbWfza42sAnj+O2uUWyL0eRL1V+6giM2vi4SqTR3gTYy8XzcpfwccayF2szcUif0HMmXiEaDv9iEhcpw==",
       "dev": true,
       "requires": {
         "chokidar": "^3.3.0",
@@ -1160,39 +1119,39 @@
         "fs-extra": "^10.0.0",
         "get-stdin": "^9.0.0",
         "globby": "^12.0.0",
-        "nanocolors": "^0.2.11",
+        "picocolors": "^1.0.0",
         "postcss-load-config": "^3.0.0",
         "postcss-reporter": "^7.0.0",
         "pretty-hrtime": "^1.0.3",
         "read-cache": "^1.0.0",
         "slash": "^4.0.0",
         "yargs": "^17.0.0"
-      },
-      "dependencies": {
-        "nanocolors": {
-          "version": "0.2.13",
-          "resolved": "https://registry.npmjs.org/nanocolors/-/nanocolors-0.2.13.tgz",
-          "integrity": "sha512-0n3mSAQLPpGLV9ORXT5+C/D4mwew7Ebws69Hx4E2sgz2ZA5+32Q80B9tL8PbL7XHnRDiAxH/pnrUJ9a4fkTNTA==",
-          "dev": true
-        }
       }
     },
     "postcss-colormin": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.2.0.tgz",
-      "integrity": "sha512-+HC6GfWU3upe5/mqmxuqYZ9B2Wl4lcoUUNkoaX59nEWV4EtADCMiBqui111Bu8R8IvaZTmqmxrqOAqjbHIwXPw==",
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/postcss-colormin/-/postcss-colormin-5.2.2.tgz",
+      "integrity": "sha512-tSEe3NpqWARUTidDlF0LntPkdlhXqfDFuA1yslqpvvGAfpZ7oBaw+/QXd935NKm2U9p4PED0HDZlzmMk7fVC6g==",
       "dev": true,
       "requires": {
         "browserslist": "^4.16.6",
         "caniuse-api": "^3.0.0",
-        "colord": "^2.0.1",
-        "postcss-value-parser": "^4.1.0"
+        "colord": "^2.9.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+          "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+          "dev": true
+        }
       }
     },
     "postcss-convert-values": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.0.1.tgz",
-      "integrity": "sha512-C3zR1Do2BkKkCgC0g3sF8TS0koF2G+mN8xxayZx3f10cIRmTaAnpgpRQZjNekTZxM2ciSPoh2IWJm0VZx8NoQg==",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-convert-values/-/postcss-convert-values-5.0.2.tgz",
+      "integrity": "sha512-KQ04E2yadmfa1LqXm7UIDwW1ftxU/QWZmz6NKnHnUvJ3LEYbbcX6i329f/ig+WnEByHegulocXrECaZGLpL8Zg==",
       "dev": true,
       "requires": {
         "postcss-value-parser": "^4.1.0"
@@ -1255,27 +1214,25 @@
       }
     },
     "postcss-merge-longhand": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.0.2.tgz",
-      "integrity": "sha512-BMlg9AXSI5G9TBT0Lo/H3PfUy63P84rVz3BjCFE9e9Y9RXQZD3+h3YO1kgTNsNJy7bBc1YQp8DmSnwLIW5VPcw==",
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-5.0.4.tgz",
+      "integrity": "sha512-2lZrOVD+d81aoYkZDpWu6+3dTAAGkCKbV5DoRhnIR7KOULVrI/R7bcMjhrH9KTRy6iiHKqmtG+n/MMj1WmqHFw==",
       "dev": true,
       "requires": {
-        "css-color-names": "^1.0.1",
         "postcss-value-parser": "^4.1.0",
         "stylehacks": "^5.0.1"
       }
     },
     "postcss-merge-rules": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.0.2.tgz",
-      "integrity": "sha512-5K+Md7S3GwBewfB4rjDeol6V/RZ8S+v4B66Zk2gChRqLTCC8yjnHQ601omj9TKftS19OPGqZ/XzoqpzNQQLwbg==",
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-merge-rules/-/postcss-merge-rules-5.0.3.tgz",
+      "integrity": "sha512-cEKTMEbWazVa5NXd8deLdCnXl+6cYG7m2am+1HzqH0EnTdy8fRysatkaXb2dEnR+fdaDxTvuZ5zoBdv6efF6hg==",
       "dev": true,
       "requires": {
         "browserslist": "^4.16.6",
         "caniuse-api": "^3.0.0",
         "cssnano-utils": "^2.0.1",
-        "postcss-selector-parser": "^6.0.5",
-        "vendors": "^1.0.3"
+        "postcss-selector-parser": "^6.0.5"
       }
     },
     "postcss-minify-font-values": {
@@ -1288,27 +1245,26 @@
       }
     },
     "postcss-minify-gradients": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.0.2.tgz",
-      "integrity": "sha512-7Do9JP+wqSD6Prittitt2zDLrfzP9pqKs2EcLX7HJYxsxCOwrrcLt4x/ctQTsiOw+/8HYotAoqNkrzItL19SdQ==",
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-minify-gradients/-/postcss-minify-gradients-5.0.3.tgz",
+      "integrity": "sha512-Z91Ol22nB6XJW+5oe31+YxRsYooxOdFKcbOqY/V8Fxse1Y3vqlNRpi1cxCqoACZTQEhl+xvt4hsbWiV5R+XI9Q==",
       "dev": true,
       "requires": {
-        "colord": "^2.6",
+        "colord": "^2.9.1",
         "cssnano-utils": "^2.0.1",
         "postcss-value-parser": "^4.1.0"
       }
     },
     "postcss-minify-params": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.0.1.tgz",
-      "integrity": "sha512-4RUC4k2A/Q9mGco1Z8ODc7h+A0z7L7X2ypO1B6V8057eVK6mZ6xwz6QN64nHuHLbqbclkX1wyzRnIrdZehTEHw==",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-minify-params/-/postcss-minify-params-5.0.2.tgz",
+      "integrity": "sha512-qJAPuBzxO1yhLad7h2Dzk/F7n1vPyfHfCCh5grjGfjhi1ttCnq4ZXGIW77GSrEbh9Hus9Lc/e/+tB4vh3/GpDg==",
       "dev": true,
       "requires": {
         "alphanum-sort": "^1.0.2",
-        "browserslist": "^4.16.0",
+        "browserslist": "^4.16.6",
         "cssnano-utils": "^2.0.1",
-        "postcss-value-parser": "^4.1.0",
-        "uniqs": "^2.0.0"
+        "postcss-value-parser": "^4.1.0"
       }
     },
     "postcss-minify-selectors": {
@@ -1395,14 +1351,21 @@
       }
     },
     "postcss-normalize-url": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.0.2.tgz",
-      "integrity": "sha512-k4jLTPUxREQ5bpajFQZpx8bCF2UrlqOTzP9kEqcEnOfwsRshWs2+oAFIHfDQB8GO2PaUaSE0NlTAYtbluZTlHQ==",
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/postcss-normalize-url/-/postcss-normalize-url-5.0.4.tgz",
+      "integrity": "sha512-cNj3RzK2pgQQyNp7dzq0dqpUpQ/wYtdDZM3DepPmFjCmYIfceuD9VIAcOdvrNetjIU65g1B4uwdP/Krf6AFdXg==",
       "dev": true,
       "requires": {
-        "is-absolute-url": "^3.0.3",
         "normalize-url": "^6.0.1",
-        "postcss-value-parser": "^4.1.0"
+        "postcss-value-parser": "^4.2.0"
+      },
+      "dependencies": {
+        "postcss-value-parser": {
+          "version": "4.2.0",
+          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+          "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+          "dev": true
+        }
       }
     },
     "postcss-normalize-whitespace": {
@@ -1540,12 +1503,12 @@
       }
     },
     "postcss-reduce-initial": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.0.1.tgz",
-      "integrity": "sha512-zlCZPKLLTMAqA3ZWH57HlbCjkD55LX9dsRyxlls+wfuRfqCi5mSlZVan0heX5cHr154Dq9AfbH70LyhrSAezJw==",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-5.0.2.tgz",
+      "integrity": "sha512-v/kbAAQ+S1V5v9TJvbGkV98V2ERPdU6XvMcKMjqAlYiJ2NtsHGlKYLPjWWcXlaTKNxooId7BGxeraK8qXvzKtw==",
       "dev": true,
       "requires": {
-        "browserslist": "^4.16.0",
+        "browserslist": "^4.16.6",
         "caniuse-api": "^3.0.0"
       }
     },
@@ -1571,14 +1534,6 @@
         "lodash.groupby": "^4.6.0",
         "lodash.sortby": "^4.7.0",
         "picocolors": "^1.0.0"
-      },
-      "dependencies": {
-        "picocolors": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
-          "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
-          "dev": true
-        }
       }
     },
     "postcss-selector-parser": {
@@ -1592,24 +1547,23 @@
       }
     },
     "postcss-svgo": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.0.2.tgz",
-      "integrity": "sha512-YzQuFLZu3U3aheizD+B1joQ94vzPfE6BNUcSYuceNxlVnKKsOtdo6hL9/zyC168Q8EwfLSgaDSalsUGa9f2C0A==",
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-svgo/-/postcss-svgo-5.0.3.tgz",
+      "integrity": "sha512-41XZUA1wNDAZrQ3XgWREL/M2zSw8LJPvb5ZWivljBsUQAGoEKMYm6okHsTjJxKYI4M75RQEH4KYlEM52VwdXVA==",
       "dev": true,
       "requires": {
         "postcss-value-parser": "^4.1.0",
-        "svgo": "^2.3.0"
+        "svgo": "^2.7.0"
       }
     },
     "postcss-unique-selectors": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.0.1.tgz",
-      "integrity": "sha512-gwi1NhHV4FMmPn+qwBNuot1sG1t2OmacLQ/AX29lzyggnjd+MnVD5uqQmpXO3J17KGL2WAxQruj1qTd3H0gG/w==",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/postcss-unique-selectors/-/postcss-unique-selectors-5.0.2.tgz",
+      "integrity": "sha512-w3zBVlrtZm7loQWRPVC0yjUwwpty7OM6DnEHkxcSQXO1bMS3RJ+JUS5LFMSDZHJcvGsRwhZinCWVqn8Kej4EDA==",
       "dev": true,
       "requires": {
         "alphanum-sort": "^1.0.2",
-        "postcss-selector-parser": "^6.0.5",
-        "uniqs": "^2.0.0"
+        "postcss-selector-parser": "^6.0.5"
       }
     },
     "postcss-value-parser": {
@@ -1713,9 +1667,9 @@
       "dev": true
     },
     "source-map-js": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-0.6.2.tgz",
-      "integrity": "sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.1.tgz",
+      "integrity": "sha512-4+TN2b3tqOCd/kaGRJ/sTYA0tR0mdXx26ipdolxcwtJVqEnqNYvlCAt1q3ypy4QMlYus+Zh34RNtYLoq2oQ4IA==",
       "dev": true
     },
     "stable": {
@@ -1764,9 +1718,9 @@
       }
     },
     "svgo": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.7.0.tgz",
-      "integrity": "sha512-aDLsGkre4fTDCWvolyW+fs8ZJFABpzLXbtdK1y71CKnHzAnpDxKXPj2mNKj+pyOXUCzFHzuxRJ94XOFygOWV3w==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz",
+      "integrity": "sha512-+N/Q9kV1+F+UeWYoSiULYo4xYSDQlTgb+ayMobAXPwMnLvop7oxKMo9OzIrX5x3eS4L4f2UHhc9axXwY8DpChg==",
       "dev": true,
       "requires": {
         "@trysound/sax": "0.2.0",
@@ -1774,14 +1728,14 @@
         "css-select": "^4.1.3",
         "css-tree": "^1.1.3",
         "csso": "^4.2.0",
-        "nanocolors": "^0.1.12",
+        "picocolors": "^1.0.0",
         "stable": "^0.1.8"
       }
     },
     "tailwindcss": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.0.tgz",
-      "integrity": "sha512-UPAp2PS5vojAvGClJFIkdh2hfFyaSWo09Ma9j2vZYW+ANhTvpUHFjY85JgtrvvXXREtDvOXy2BxW1yHOz8apCg==",
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.7.tgz",
+      "integrity": "sha512-rZdKNHtC64jcQncLoWOuCzj4lQDTAgLtgK3WmQS88tTdpHh9OwLqULTQxI3tw9AMJsqSpCKlmcjW/8CSnni6zQ==",
       "dev": true,
       "requires": {
         "arg": "^5.0.1",
@@ -1800,7 +1754,7 @@
         "postcss-js": "^3.0.3",
         "postcss-load-config": "^3.1.0",
         "postcss-nested": "5.0.6",
-        "postcss-selector-parser": "^6.0.6",
+        "postcss-selector-parser": "^6.0.7",
         "postcss-value-parser": "^4.2.0",
         "quick-lru": "^5.1.1",
         "resolve": "^1.20.0",
@@ -1816,6 +1770,16 @@
             "is-glob": "^4.0.3"
           }
         },
+        "postcss-selector-parser": {
+          "version": "6.0.7",
+          "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.7.tgz",
+          "integrity": "sha512-U+b/Deoi4I/UmE6KOVPpnhS7I7AYdKbhGcat+qTQ27gycvaACvNEw11ba6RrkwVmDVRW7sigWgLj4/KbbJjeDA==",
+          "dev": true,
+          "requires": {
+            "cssesc": "^3.0.0",
+            "util-deprecate": "^1.0.2"
+          }
+        },
         "postcss-value-parser": {
           "version": "4.2.0",
           "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -1848,12 +1812,6 @@
         "is-number": "^7.0.0"
       }
     },
-    "uniqs": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/uniqs/-/uniqs-2.0.0.tgz",
-      "integrity": "sha1-/+3ks2slKQaW5uFl1KWe25mOawI=",
-      "dev": true
-    },
     "universalify": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
@@ -1866,12 +1824,6 @@
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
       "dev": true
     },
-    "vendors": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/vendors/-/vendors-1.0.4.tgz",
-      "integrity": "sha512-/juG65kTL4Cy2su4P8HjtkTxk6VmJDiOPBufWniqQ6wknac6jNiXS9vU+hO3wgusiyqWlzTbVHi0dyJqRONg3w==",
-      "dev": true
-    },
     "wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -1908,24 +1860,24 @@
       "dev": true
     },
     "yargs": {
-      "version": "17.2.1",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.2.1.tgz",
-      "integrity": "sha512-XfR8du6ua4K6uLGm5S6fA+FIJom/MdJcFNVY8geLlp2v8GYbOXD4EB1tPNZsRn4vBzKGMgb5DRZMeWuFc2GO8Q==",
+      "version": "17.3.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.3.0.tgz",
+      "integrity": "sha512-GQl1pWyDoGptFPJx9b9L6kmR33TGusZvXIZUT+BOz9f7X2L94oeAskFYLEg/FkhV06zZPBYLvLZRWeYId29lew==",
       "dev": true,
       "requires": {
         "cliui": "^7.0.2",
         "escalade": "^3.1.1",
         "get-caller-file": "^2.0.5",
         "require-directory": "^2.1.1",
-        "string-width": "^4.2.0",
+        "string-width": "^4.2.3",
         "y18n": "^5.0.5",
-        "yargs-parser": "^20.2.2"
+        "yargs-parser": "^21.0.0"
       }
     },
     "yargs-parser": {
-      "version": "20.2.9",
-      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
-      "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+      "version": "21.0.0",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.0.0.tgz",
+      "integrity": "sha512-z9kApYUOCwoeZ78rfRYYWdiU/iNL6mwwYlkkZfJoyMR1xps+NEBX5X7XmRpxkZHhXJ6+Ey00IwKxBBSW9FIjyA==",
       "dev": true
     }
   }
diff --git a/modules/webapp/package.json b/modules/webapp/package.json
index 942a175a96..c9a2291fbb 100644
--- a/modules/webapp/package.json
+++ b/modules/webapp/package.json
@@ -6,13 +6,13 @@
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",
     "@tailwindcss/forms": "^0.4.0",
+    "autoprefixer": "^10.4.0",
+    "cssnano": "^5.0.14",
     "flag-icon-css": "^3.5.0",
-    "postcss-cli": "^9.0.1",
+    "postcss": "^8.4.5",
+    "postcss-cli": "^9.1.0",
     "postcss-import": "^14.0.2",
-    "autoprefixer": "^10.3.7",
-    "cssnano": "^5.0.8",
-    "postcss": "^8.3.11",
     "postcss-purgecss": "^2.0.3",
-    "tailwindcss": "^3.0.0"
+    "tailwindcss": "^3.0.7"
   }
 }
diff --git a/modules/webapp/postcss.config.js b/modules/webapp/postcss.config.js
index 6976de4b84..0cc191dae6 100644
--- a/modules/webapp/postcss.config.js
+++ b/modules/webapp/postcss.config.js
@@ -1,31 +1,21 @@
 //postcss.config.js
-const tailwindcss = require("tailwindcss");
 
-const devPlugins =
+const basePlugins =
       [
           require('postcss-import'),
-          tailwindcss("./tailwind.config.js"),
-          require("autoprefixer")
+          require('tailwindcss'),
+          require('autoprefixer'),
       ];
 
 const prodPlugins =
       [
           require('postcss-import'),
-          tailwindcss("./tailwind.config.js"),
-          require("autoprefixer"),
-          require("postcss-purgecss")({
-              content: [
-                  "./src/main/elm/**/*.elm",
-                  "./src/main/styles/keep.txt",
-                  "../restserver/src/main/templates/*.html"
-              ],
-              defaultExtractor: content => content.match(/[A-Za-z0-9-_:/\.]+/g) || []
-          }),
-          require('cssnano')({
-              preset: 'default'
-          })
-      ]
+          require('tailwindcss'),
+          require('autoprefixer'),
+          require('cssnano'),
+      ];
+
 
 module.exports = (ctx) => ({
-    plugins: ctx.env === 'production' ? prodPlugins : devPlugins
-});
+    plugins: ctx.env === 'production' ? prodPlugins : basePlugins
+})
diff --git a/modules/webapp/src/main/elm/App/View2.elm b/modules/webapp/src/main/elm/App/View2.elm
index 5f82427040..41d556f3c3 100644
--- a/modules/webapp/src/main/elm/App/View2.elm
+++ b/modules/webapp/src/main/elm/App/View2.elm
@@ -68,7 +68,7 @@ topNavUser auth model =
             , disabled = not (Page.hasSidebar model.page)
             , attrs = [ href "#" ]
             , baseStyle = "font-bold inline-flex items-center px-4 py-2"
-            , activeStyle = "hover:bg-blue-200 dark:hover:bg-bluegray-800 w-12"
+            , activeStyle = "hover:bg-blue-200 dark:hover:bg-slate-800 w-12"
             }
         , headerNavItem True model
         , div [ class "flex flex-grow justify-center" ]
@@ -103,7 +103,7 @@ topNavAnon model =
             , disabled = not (Page.hasSidebar model.page)
             , attrs = [ href "#" ]
             , baseStyle = "font-bold inline-flex items-center px-4 py-2"
-            , activeStyle = "hover:bg-blue-200 dark:hover:bg-bluegray-800 w-12"
+            , activeStyle = "hover:bg-blue-200 dark:hover:bg-slate-800 w-12"
             }
         , headerNavItem False model
         , div [ class "flex flex-grow justify-end" ]
@@ -131,7 +131,7 @@ headerNavItem authenticated model =
     in
     tag
         [ class "inline-flex font-bold items-center px-4"
-        , classList [ ( "hover:bg-blue-200 dark:hover:bg-bluegray-800", authenticated ) ]
+        , classList [ ( "hover:bg-blue-200 dark:hover:bg-slate-800", authenticated ) ]
         , if authenticated then
             Page.href HomePage
 
@@ -204,12 +204,12 @@ mainContent model =
 
 styleTopNav : String
 styleTopNav =
-    "top-0 fixed z-50 w-full flex flex-row justify-start shadow-sm h-12 bg-blue-100 dark:bg-bluegray-900 text-gray-800 dark:text-bluegray-200 antialiased"
+    "top-0 fixed z-50 w-full flex flex-row justify-start shadow-sm h-12 bg-blue-100 dark:bg-slate-900 text-gray-800 dark:text-slate-200 antialiased"
 
 
 styleMain : String
 styleMain =
-    "mt-12 flex md:flex-row flex-col w-full h-screen-12 overflow-y-hidden bg-white dark:bg-bluegray-800 text-gray-800 dark:text-bluegray-300 antialiased"
+    "mt-12 flex md:flex-row flex-col w-full h-screen-12 overflow-y-hidden bg-white dark:bg-slate-800 text-gray-800 dark:text-slate-300 antialiased"
 
 
 langMenu : Model -> Html Msg
@@ -226,7 +226,7 @@ langMenu model =
             a
                 [ classList
                     [ ( dropdownItem, True )
-                    , ( "bg-gray-200 dark:bg-bluegray-700", lang == texts.lang )
+                    , ( "bg-gray-200 dark:bg-slate-700", lang == texts.lang )
                     ]
                 , onClick (SetLanguage lang)
                 , href "#"
@@ -266,7 +266,7 @@ dataMenu texts _ model =
             [ i [ class "fa fa-cogs" ] []
             , div
                 [ class "h-5 w-5 rounded-full text-xs px-1 py-1 absolute top-1 left-1 font-bold"
-                , class "dark:bg-lightblue-500 dark:text-gray-200"
+                , class "dark:bg-sky-500 dark:text-gray-200"
                 , class "bg-blue-500 text-gray-50"
                 , classList [ ( "hidden", model.jobsWaiting <= 0 ) ]
                 ]
@@ -317,7 +317,7 @@ dataMenu texts _ model =
                         class "fa fa-tachometer-alt w-6"
 
                       else
-                        class "fa fa-tachometer-alt w-6 animate-pulse dark:text-lightblue-500 text-blue-500"
+                        class "fa fa-tachometer-alt w-6 animate-pulse dark:text-sky-500 text-blue-500"
                     ]
                     []
                 , span [ class "ml-1" ]
@@ -424,7 +424,7 @@ userPageLink model page children =
     a
         [ classList
             [ ( dropdownItem, True )
-            , ( "bg-gray-200 dark:bg-bluegray-700", model.page == page )
+            , ( "bg-gray-200 dark:bg-slate-700", model.page == page )
             ]
         , onClick ToggleUserMenu
         , Page.href page
@@ -437,7 +437,7 @@ dataPageLink model page classes children =
     a
         [ classList
             ([ ( dropdownItem, True )
-             , ( "bg-gray-200 dark:bg-bluegray-700", model.page == page )
+             , ( "bg-gray-200 dark:bg-slate-700", model.page == page )
              ]
                 ++ classes
             )
@@ -449,12 +449,12 @@ dataPageLink model page classes children =
 
 dropdownLink : String
 dropdownLink =
-    "px-4 py-2 w-12 font-bold inline-flex h-full items-center hover:bg-blue-200 dark:hover:bg-bluegray-800"
+    "px-4 py-2 w-12 font-bold inline-flex h-full items-center hover:bg-blue-200 dark:hover:bg-slate-800"
 
 
 dropdownItem : String
 dropdownItem =
-    "transition-colors duration-200 items-center block px-4 py-2 text-normal hover:bg-gray-200 dark:hover:bg-bluegray-700 dark:hover:text-bluegray-50"
+    "transition-colors duration-200 items-center block px-4 py-2 text-normal hover:bg-gray-200 dark:hover:bg-slate-700 dark:hover:text-slate-50"
 
 
 dropdownHeadItem : String
@@ -464,7 +464,7 @@ dropdownHeadItem =
 
 dropdownMenu : String
 dropdownMenu =
-    " absolute right-0 bg-white dark:bg-bluegray-800 border dark:border-bluegray-700 dark:text-bluegray-300 shadow-lg opacity-1 transition duration-200 min-w-max "
+    " absolute right-0 bg-white dark:bg-slate-800 border dark:border-slate-700 dark:text-slate-300 shadow-lg opacity-1 transition duration-200 min-w-max "
 
 
 viewShare : Messages -> String -> Model -> List (Html Msg)
diff --git a/modules/webapp/src/main/elm/Comp/AttachmentMeta.elm b/modules/webapp/src/main/elm/Comp/AttachmentMeta.elm
index d70b21426d..6682829337 100644
--- a/modules/webapp/src/main/elm/Comp/AttachmentMeta.elm
+++ b/modules/webapp/src/main/elm/Comp/AttachmentMeta.elm
@@ -99,7 +99,7 @@ viewData2 texts meta =
         [ div [ class "text-lg font-bold" ]
             [ text texts.content
             ]
-        , div [ class "px-2 py-2 text-sm bg-yellow-50 dark:bg-warmgray-800 break-words whitespace-pre max-h-80 overflow-auto" ]
+        , div [ class "px-2 py-2 text-sm bg-yellow-50 dark:bg-stone-800 break-words whitespace-pre max-h-80 overflow-auto" ]
             [ text meta.content
             ]
         , div [ class "text-lg font-bold mt-2" ]
diff --git a/modules/webapp/src/main/elm/Comp/Basic.elm b/modules/webapp/src/main/elm/Comp/Basic.elm
index e3d3ac6711..a7f6874ca3 100644
--- a/modules/webapp/src/main/elm/Comp/Basic.elm
+++ b/modules/webapp/src/main/elm/Comp/Basic.elm
@@ -178,12 +178,12 @@ linkLabel model =
             [ class S.basicLabel
             , class "inline-block md:text-sm my-auto whitespace-nowrap"
             , class "border-blue-500 text-blue-500 "
-            , class "dark:border-lightblue-300 dark:text-lightblue-300"
+            , class "dark:border-sky-300 dark:text-sky-300"
             ]
 
         hover =
             [ class "hover:bg-blue-500 hover:text-gray-200"
-            , class "dark:hover:bg-lightblue-300 dark:hover:text-bluegray-900"
+            , class "dark:hover:bg-sky-300 dark:hover:text-slate-900"
             ]
 
         attrs =
diff --git a/modules/webapp/src/main/elm/Comp/CalEventInput.elm b/modules/webapp/src/main/elm/Comp/CalEventInput.elm
index 8f1ed9b739..6cd881ef73 100644
--- a/modules/webapp/src/main/elm/Comp/CalEventInput.elm
+++ b/modules/webapp/src/main/elm/Comp/CalEventInput.elm
@@ -317,7 +317,7 @@ view2 texts extraClasses mev model =
                     text ""
             ]
         , div
-            [ class "px-2 pt-4 pb-2 border-0 border-l border-b border-r bg-gray-50 dark:bg-bluegray-700"
+            [ class "px-2 pt-4 pb-2 border-0 border-l border-b border-r bg-gray-50 dark:bg-slate-700"
             , class S.border
             ]
             [ div []
diff --git a/modules/webapp/src/main/elm/Comp/ColorTagger.elm b/modules/webapp/src/main/elm/Comp/ColorTagger.elm
index 127b9b5bdd..589df6ee05 100644
--- a/modules/webapp/src/main/elm/Comp/ColorTagger.elm
+++ b/modules/webapp/src/main/elm/Comp/ColorTagger.elm
@@ -175,7 +175,7 @@ renderFormData2 opts data =
     in
     div
         [ class "flex flex-col space-y-4 md:space-y-2 mt-2"
-        , class "px-2 border-0 border-l dark:border-bluegray-600"
+        , class "px-2 border-0 border-l dark:border-slate-600"
         ]
         (List.map valueItem values)
 
diff --git a/modules/webapp/src/main/elm/Comp/ContactField.elm b/modules/webapp/src/main/elm/Comp/ContactField.elm
index b919a675bb..9017a2dd04 100644
--- a/modules/webapp/src/main/elm/Comp/ContactField.elm
+++ b/modules/webapp/src/main/elm/Comp/ContactField.elm
@@ -178,7 +178,7 @@ view2 cfg _ model =
             [ classList
                 [ ( "hidden", List.isEmpty model.items )
                 ]
-            , class "flex flex-col space-y-2 mt-2 px-2 border-0 border-l dark:border-bluegray-600 "
+            , class "flex flex-col space-y-2 mt-2 px-2 border-0 border-l dark:border-slate-600 "
             ]
             (List.map (renderItem2 cfg) model.items)
         ]
diff --git a/modules/webapp/src/main/elm/Comp/Dropzone.elm b/modules/webapp/src/main/elm/Comp/Dropzone.elm
index aaa7dbd8a8..3d0e827038 100644
--- a/modules/webapp/src/main/elm/Comp/Dropzone.elm
+++ b/modules/webapp/src/main/elm/Comp/Dropzone.elm
@@ -3,8 +3,6 @@
 
    SPDX-License-Identifier: AGPL-3.0-or-later
 -}
-
-
 -- inspired from here: https://ellie-app.com/3T5mNms7SwKa1
 
 
@@ -136,11 +134,11 @@ view2 : Texts -> Model -> Html Msg
 view2 texts model =
     div
         [ classList
-            [ ( "bg-opacity-100 bg-blue-100 dark:bg-lightblue-800", model.state.hover )
-            , ( "bg-blue-100 dark:bg-lightblue-900 bg-opacity-50", not model.state.hover )
+            [ ( "bg-opacity-100 bg-blue-100 dark:bg-sky-800", model.state.hover )
+            , ( "bg-blue-100 dark:bg-sky-900 bg-opacity-50", not model.state.hover )
             , ( "disabled", not model.state.active )
             ]
-        , class "flex flex-col justify-center items-center py-2 md:py-12 border-0 border-t-2 border-blue-500 dark:border-lightblue-500 dropzone"
+        , class "flex flex-col justify-center items-center py-2 md:py-12 border-0 border-t-2 border-blue-500 dark:border-sky-500 dropzone"
         , onDragEnter DragEnter
         , onDragOver DragEnter
         , onDragLeave DragLeave
@@ -159,7 +157,7 @@ view2 texts model =
             { label = texts.or
             , topCss = "w-2/3 mb-4 hidden md:inline-flex"
             , labelCss = "px-4 bg-gray-200 bg-opacity-50"
-            , lineColor = "bg-gray-300 dark:bg-bluegray-600"
+            , lineColor = "bg-gray-300 dark:bg-slate-600"
             }
         , B.primaryBasicButton
             { label = texts.basics.selectPlaceholder
diff --git a/modules/webapp/src/main/elm/Comp/EmailInput.elm b/modules/webapp/src/main/elm/Comp/EmailInput.elm
index bac01172a9..7094981785 100644
--- a/modules/webapp/src/main/elm/Comp/EmailInput.elm
+++ b/modules/webapp/src/main/elm/Comp/EmailInput.elm
@@ -187,7 +187,7 @@ view2 cfg values model =
                 , onInput SetInput
                 , onBlur (KeyPress 13)
                 , class "inline-flex w-24 border-0 px-0 focus:ring-0 h-6 text-sm"
-                , class "placeholder-gray-400 dark:text-bluegray-200 dark:bg-bluegray-800 dark:border-bluegray-500"
+                , class "placeholder-gray-400 dark:text-slate-200 dark:bg-slate-800 dark:border-slate-500"
                 ]
                 []
             ]
@@ -217,7 +217,7 @@ renderMenu2 style model =
             a
                 [ class style.item
                 , classList
-                    [ ( "bg-gray-200 dark:bg-bluegray-700 dark:text-bluegray-50", model.active == Just v )
+                    [ ( "bg-gray-200 dark:bg-slate-700 dark:text-slate-50", model.active == Just v )
                     ]
                 , href "#"
                 , onClick (AddEmail v)
diff --git a/modules/webapp/src/main/elm/Comp/EventSample.elm b/modules/webapp/src/main/elm/Comp/EventSample.elm
index f6a67b7800..0516e1b025 100644
--- a/modules/webapp/src/main/elm/Comp/EventSample.elm
+++ b/modules/webapp/src/main/elm/Comp/EventSample.elm
@@ -88,7 +88,7 @@ update flags msg model =
 
 styleBase : String
 styleBase =
-    "bg-gray-100 dark:bg-bluegray-900 text-gray-900 dark:text-gray-100 text-sm leading-5"
+    "bg-gray-100 dark:bg-slate-900 text-gray-900 dark:text-gray-100 text-sm leading-5"
 
 
 stylePayload : String
diff --git a/modules/webapp/src/main/elm/Comp/FolderDetail.elm b/modules/webapp/src/main/elm/Comp/FolderDetail.elm
index c003e7a5b2..2253d747f3 100644
--- a/modules/webapp/src/main/elm/Comp/FolderDetail.elm
+++ b/modules/webapp/src/main/elm/Comp/FolderDetail.elm
@@ -509,7 +509,7 @@ viewMembers2 texts model =
             ]
         , div
             [ class "flex flex-col space-y-4 md:space-y-2 mt-2"
-            , class "px-2 border-0 border-l dark:border-bluegray-600"
+            , class "px-2 border-0 border-l dark:border-slate-600"
             ]
             (List.map (viewMember2 texts) model.members)
         ]
diff --git a/modules/webapp/src/main/elm/Comp/FolderSelect.elm b/modules/webapp/src/main/elm/Comp/FolderSelect.elm
index ac6b5204dc..8311a8510a 100644
--- a/modules/webapp/src/main/elm/Comp/FolderSelect.elm
+++ b/modules/webapp/src/main/elm/Comp/FolderSelect.elm
@@ -215,10 +215,10 @@ viewItem2 dropModel model item =
     in
     a
         ([ classList
-            [ ( "bg-blue-100 dark:bg-bluegray-600", highlightDrop )
+            [ ( "bg-blue-100 dark:bg-slate-600", highlightDrop )
             ]
          , class "flex flex-row items-center"
-         , class "rounded px-1 py-1 hover:bg-blue-100 dark:hover:bg-bluegray-600"
+         , class "rounded px-1 py-1 hover:bg-blue-100 dark:hover:bg-slate-600"
          , href "#"
          , onClick (Toggle item)
          ]
@@ -237,7 +237,7 @@ numberLabel : Int -> Html msg
 numberLabel num =
     div
         [ class "bg-gray-200 border rounded-full h-6 w-6 flex items-center justify-center text-xs"
-        , class "dark:bg-bluegray-800 dark:text-bluegray-200 dark:border-bluegray-800 dark:bg-opacity-50"
+        , class "dark:bg-slate-800 dark:text-slate-200 dark:border-slate-800 dark:bg-opacity-50"
         ]
         [ text (String.fromInt num)
         ]
diff --git a/modules/webapp/src/main/elm/Comp/ItemCard.elm b/modules/webapp/src/main/elm/Comp/ItemCard.elm
index 0a54f95861..e240913105 100644
--- a/modules/webapp/src/main/elm/Comp/ItemCard.elm
+++ b/modules/webapp/src/main/elm/Comp/ItemCard.elm
@@ -180,7 +180,7 @@ viewRow texts cfg settings flags model item =
 
         cardColor =
             if isCreated then
-                "text-blue-500 dark:text-lightblue-500"
+                "text-blue-500 dark:text-sky-500"
 
             else if isDeleted then
                 "text-red-600 dark:text-orange-600"
@@ -211,7 +211,7 @@ viewRow texts cfg settings flags model item =
             a
                 [ classList
                     [ ( "my-auto flex text-lg w-4 text-left w-1", not rowOpen )
-                    , ( "flex w-full block text-xl bg-gray-50 dark:bg-bluegray-700 mb-2 rounded ", rowOpen )
+                    , ( "flex w-full block text-xl bg-gray-50 dark:bg-slate-700 mb-2 rounded ", rowOpen )
                     , ( "invisible", isSelected cfg item.id )
                     ]
                 , href "#"
@@ -266,7 +266,7 @@ viewRow texts cfg settings flags model item =
                     ]
                 , class S.dimmerRow
                 ]
-                [ div [ class "text-2xl font-bold text-blue-100 hover:text-blue-200 dark:text-lightblue-300 dark:hover:text-lightblue-200" ]
+                [ div [ class "text-2xl font-bold text-blue-100 hover:text-blue-200 dark:text-sky-300 dark:hover:text-sky-200" ]
                     [ a
                         (mkCardAction texts cfg settings item)
                         [ i [ class "fa fa-check-circle" ] []
@@ -278,8 +278,8 @@ viewRow texts cfg settings flags model item =
             mkCardAction texts cfg settings item
     in
     div
-        ([ classList [ ( "border border-gray-800 border-dashed dark:border-lightblue-500", isMultiSelectMode cfg ) ]
-         , class "flex flex-col dark:border-bluegray-600 ds-item-row relative "
+        ([ classList [ ( "border border-gray-800 border-dashed dark:border-sky-500", isMultiSelectMode cfg ) ]
+         , class "flex flex-col dark:border-slate-600 ds-item-row relative "
          , class cfg.extraClasses
          , id item.id
          ]
@@ -473,7 +473,7 @@ viewCard texts cfg settings flags model item =
 
         cardColor =
             if isCreated then
-                "text-blue-500 dark:text-lightblue-500"
+                "text-blue-500 dark:text-sky-500"
 
             else if isDeleted then
                 "text-red-600 dark:text-orange-600"
@@ -495,7 +495,7 @@ viewCard texts cfg settings flags model item =
                 , class S.dimmerCard
                 , class "rounded-lg"
                 ]
-                [ div [ class "text-9xl text-blue-400 hover:text-blue-500 dark:text-lightblue-300 dark:hover:text-lightblue-200" ]
+                [ div [ class "text-9xl text-blue-400 hover:text-blue-500 dark:text-sky-300 dark:hover:text-sky-200" ]
                     [ a
                         cardAction
                         [ i [ class "fa fa-check-circle font-thin" ] []
@@ -507,8 +507,8 @@ viewCard texts cfg settings flags model item =
         ([ class cfg.extraClasses
          , class "ds-item-card relative hover:shadow-lg rounded-lg flex flex-col break-all"
          , classList
-            [ ( "border border-gray-400 dark:border-bluegray-600 dark:hover:border-bluegray-500", not (isMultiSelectMode cfg) )
-            , ( "border-2 border-gray-800 border-dashed dark:border-lightblue-500", isMultiSelectMode cfg )
+            [ ( "border border-gray-400 dark:border-slate-600 dark:hover:border-slate-500", not (isMultiSelectMode cfg) )
+            , ( "border-2 border-gray-800 border-dashed dark:border-sky-500", isMultiSelectMode cfg )
             ]
          , id item.id
          ]
@@ -621,7 +621,7 @@ notesContent2 settings item =
                     || Util.String.isNothingOrBlank item.notes
               )
             ]
-        , class "px-2 py-2 border-t  dark:border-bluegray-600 opacity-50 text-sm"
+        , class "px-2 py-2 border-t  dark:border-slate-600 opacity-50 text-sm"
         ]
         [ Maybe.withDefault "" item.notes
             |> Util.String.ellipsis settings.itemSearchNoteLength
@@ -804,7 +804,7 @@ previewImage2 texts cfg settings model item =
             not isCardView
     in
     a
-        ([ class "overflow-hidden block bg-gray-50 dark:bg-bluegray-700 dark:bg-opacity-40  border-gray-400 dark:hover:border-bluegray-500 w-full"
+        ([ class "overflow-hidden block bg-gray-50 dark:bg-slate-700 dark:bg-opacity-40  border-gray-400 dark:hover:border-slate-500 w-full"
          , classList
             [ ( "rounded-t-lg", isCardView )
             , ( Data.UiSettings.cardPreviewSize2 settings, isCardView && not isRowOpen )
@@ -818,7 +818,7 @@ previewImage2 texts cfg settings model item =
                 [ ( "rounded-t-lg w-full -mt-1", settings.cardPreviewFullWidth && isCardView )
                 , ( Data.UiSettings.cardPreviewSize2 settings, not settings.cardPreviewFullWidth && isCardView )
                 , ( "h-12", isListView && not isRowOpen )
-                , ( "border-t border-r border-l dark:border-bluegray-600", isListView && isRowOpen )
+                , ( "border-t border-r border-l dark:border-slate-600", isListView && isRowOpen )
                 ]
             , src previewUrl
             ]
@@ -858,7 +858,7 @@ previewMenu2 texts settings flags cfg model item mainAttach =
                             || fieldHidden Data.Fields.DueDate
                       )
                     ]
-                , class "label font-semibold text-sm border-gray-300 dark:border-bluegray-600"
+                , class "label font-semibold text-sm border-gray-300 dark:border-slate-600"
                 , title (texts.dueOn ++ " " ++ dueDate)
                 ]
                 [ Icons.dueDateIcon2 "mr-2"
@@ -880,10 +880,10 @@ previewMenu2 texts settings flags cfg model item mainAttach =
             not isCardView
     in
     div
-        [ class "px-2 py-1 flex flex-row flex-wrap bg-gray-50 dark:bg-bluegray-700 dark:bg-opacity-40 rounded-b-lg md:text-sm"
+        [ class "px-2 py-1 flex flex-row flex-wrap bg-gray-50 dark:bg-slate-700 dark:bg-opacity-40 rounded-b-lg md:text-sm"
         , classList
             [ ( "border-0", isCardView || not isRowOpen )
-            , ( "border-b border-l border-r dark:border-bluegray-600", isListView && isRowOpen )
+            , ( "border-b border-l border-r dark:border-slate-600", isListView && isRowOpen )
             ]
         ]
         [ a
@@ -907,7 +907,7 @@ previewMenu2 texts settings flags cfg model item mainAttach =
             [ classList [ ( "hidden", attachCount > 1 && not (fieldHidden Data.Fields.PreviewImage) ) ]
             , class "ml-2"
             ]
-            [ div [ class "px-2 rounded border border-gray-300 dark:border-bluegray-600 py-1" ]
+            [ div [ class "px-2 rounded border border-gray-300 dark:border-slate-600 py-1" ]
                 [ text (String.fromInt pageCount)
                 , text "p."
                 ]
@@ -925,7 +925,7 @@ previewMenu2 texts settings flags cfg model item mainAttach =
                 ]
                 [ i [ class "fa fa-arrow-right" ] []
                 ]
-            , div [ class "px-2 rounded-r border-t border-r border-b border-gray-500 dark:border-bluegray-500 py-1" ]
+            , div [ class "px-2 rounded-r border-t border-r border-b border-gray-500 dark:border-slate-500 py-1" ]
                 [ currentPosition model item
                     |> String.fromInt
                     |> text
diff --git a/modules/webapp/src/main/elm/Comp/ItemCardList.elm b/modules/webapp/src/main/elm/Comp/ItemCardList.elm
index 0d66509b15..7899ac7c07 100644
--- a/modules/webapp/src/main/elm/Comp/ItemCardList.elm
+++ b/modules/webapp/src/main/elm/Comp/ItemCardList.elm
@@ -245,7 +245,7 @@ viewGroup texts model cfg settings flags group =
     div [ class "ds-item-group" ]
         [ div
             [ class "flex py-1 mt-2 mb-2 flex flex-row items-center"
-            , class "bg-white dark:bg-bluegray-800 text-xl font-bold z-35"
+            , class "bg-white dark:bg-slate-800 text-xl font-bold z-35"
             , class "relative sticky top-10"
             ]
             [ hr
diff --git a/modules/webapp/src/main/elm/Comp/ItemDetail/ItemInfoHeader.elm b/modules/webapp/src/main/elm/Comp/ItemDetail/ItemInfoHeader.elm
index 775a960202..9aa20ecfbb 100644
--- a/modules/webapp/src/main/elm/Comp/ItemDetail/ItemInfoHeader.elm
+++ b/modules/webapp/src/main/elm/Comp/ItemDetail/ItemInfoHeader.elm
@@ -155,7 +155,7 @@ view texts settings model =
                         [ classList
                             [ ( "hidden", not isCreated )
                             ]
-                        , class "ml-3 text-base label bg-blue-500 dark:bg-lightblue-500 text-white rounded-lg"
+                        , class "ml-3 text-base label bg-blue-500 dark:bg-sky-500 text-white rounded-lg"
                         ]
                         [ text texts.new
                         , i [ class "fa fa-exclamation ml-2" ] []
diff --git a/modules/webapp/src/main/elm/Comp/ItemDetail/Notes.elm b/modules/webapp/src/main/elm/Comp/ItemDetail/Notes.elm
index e0baba76b6..7e5291afd6 100644
--- a/modules/webapp/src/main/elm/Comp/ItemDetail/Notes.elm
+++ b/modules/webapp/src/main/elm/Comp/ItemDetail/Notes.elm
@@ -30,7 +30,7 @@ view texts model =
     case model.notesField of
         ViewNotes ->
             div [ class "flex flex-col ds-item-detail-notes" ]
-                [ div [ class "flex flex-row items-center border-b dark:border-bluegray-600" ]
+                [ div [ class "flex flex-row items-center border-b dark:border-slate-600" ]
                     [ div [ class "flex-grow font-bold text-lg" ]
                         [ text texts.notes
                         ]
diff --git a/modules/webapp/src/main/elm/Comp/ItemDetail/SingleAttachment.elm b/modules/webapp/src/main/elm/Comp/ItemDetail/SingleAttachment.elm
index 2239765d4e..7c8bd0fb02 100644
--- a/modules/webapp/src/main/elm/Comp/ItemDetail/SingleAttachment.elm
+++ b/modules/webapp/src/main/elm/Comp/ItemDetail/SingleAttachment.elm
@@ -65,7 +65,7 @@ view texts flags settings model pos attach =
                     Html.map (AttachMetaMsg attach.id)
                         (Comp.AttachmentMeta.view2
                             texts.attachmentMeta
-                            [ class "border-r border-l border-b dark:border-bluegray-600 px-2" ]
+                            [ class "border-r border-l border-b dark:border-slate-600 px-2" ]
                             am
                         )
 
@@ -74,13 +74,13 @@ view texts flags settings model pos attach =
 
           else if isShowQrAttach model.showQrModel then
             Comp.ItemDetail.ShowQrCode.view1 flags
-                "border-r border-l border-b dark:border-bluegray-600 h-full"
+                "border-r border-l border-b dark:border-slate-600 h-full"
                 (Comp.ItemDetail.ShowQrCode.Attach attach.id)
 
           else
             div
                 [ class "flex flex-col relative px-2 pt-2 h-full"
-                , class "border-r border-l border-b dark:border-bluegray-600"
+                , class "border-r border-l border-b dark:border-slate-600"
                 , id "ds-pdf-view-parent"
                 , style "max-height" "calc(100vh - 140px)"
                 , style "min-height" "500px"
@@ -155,7 +155,7 @@ attachHeader texts settings model _ attach =
                 , class S.secondaryBasicButton
                 , class "mr-2"
                 , classList
-                    [ ( "bg-gray-200 dark:bg-bluegray-600 ", model.attachMenuOpen )
+                    [ ( "bg-gray-200 dark:bg-slate-600 ", model.attachMenuOpen )
                     , ( "hidden", not multiAttach )
                     , ( "sm:hidden", multiAttach && mobile )
                     , ( "hidden sm:block", multiAttach && not mobile )
@@ -191,7 +191,7 @@ attachHeader texts settings model _ attach =
             , a
                 [ classList
                     [ ( S.secondaryBasicButton ++ " text-sm", True )
-                    , ( "bg-gray-200 dark:bg-bluegray-600", selectView )
+                    , ( "bg-gray-200 dark:bg-slate-600", selectView )
                     , ( "hidden", not selectPossible )
                     , ( "ml-2", True )
                     ]
@@ -319,7 +319,7 @@ editAttachmentName model attach =
     in
     case am of
         Just m ->
-            div [ class "flex flex-row border-l border-r px-2 py-2 dark:border-bluegray-600" ]
+            div [ class "flex flex-row border-l border-r px-2 py-2 dark:border-slate-600" ]
                 [ input
                     [ type_ "text"
                     , value m.newName
@@ -349,7 +349,7 @@ editAttachmentName model attach =
 attachmentSelect : Texts -> Model -> Int -> Attachment -> Html Msg
 attachmentSelect texts model _ _ =
     div
-        [ class "flex flex-row border-l border-r px-2 py-2 dark:border-bluegray-600 "
+        [ class "flex flex-row border-l border-r px-2 py-2 dark:border-slate-600 "
         , class "overflow-x-auto overflow-y-none"
         , classList
             [ ( "hidden", not model.attachMenuOpen )
@@ -372,7 +372,7 @@ menuItem texts model pos attach =
                 enable =
                     Just attach.id == dropId && dropId /= dragId
             in
-            [ ( "bg-gray-300 dark:bg-bluegray-700 current-drop-target", enable )
+            [ ( "bg-gray-300 dark:bg-slate-700 current-drop-target", enable )
             ]
 
         iconClass =
@@ -405,12 +405,12 @@ menuItem texts model pos attach =
     in
     a
         ([ classList <|
-            [ ( "border-blue-500 dark:border-lightblue-500", pos == 0 )
-            , ( "dark:border-bluegray-600", pos /= 0 )
+            [ ( "border-blue-500 dark:border-sky-500", pos == 0 )
+            , ( "dark:border-slate-600", pos /= 0 )
             ]
                 ++ highlight
          , class "flex flex-col relative border rounded px-1 py-1 mr-2"
-         , class " hover:shadow dark:hover:border-bluegray-500"
+         , class " hover:shadow dark:hover:border-slate-500"
          , href "#"
          , onClick msg
          ]
@@ -421,7 +421,7 @@ menuItem texts model pos attach =
             [ classList
                 [ ( "hidden", not visible )
                 ]
-            , class "absolute right-1 top-1 text-blue-400 dark:text-lightblue-400 text-xl"
+            , class "absolute right-1 top-1 text-blue-400 dark:text-sky-400 text-xl"
             ]
             [ i [ class iconClass ] []
             ]
diff --git a/modules/webapp/src/main/elm/Comp/ItemDetail/View2.elm b/modules/webapp/src/main/elm/Comp/ItemDetail/View2.elm
index 22c816d683..781da2e81e 100644
--- a/modules/webapp/src/main/elm/Comp/ItemDetail/View2.elm
+++ b/modules/webapp/src/main/elm/Comp/ItemDetail/View2.elm
@@ -134,7 +134,7 @@ menuBar texts inav settings model =
             , MB.CustomElement <|
                 a
                     [ classList
-                        [ ( "bg-gray-200 dark:bg-bluegray-600", model.mailOpen )
+                        [ ( "bg-gray-200 dark:bg-slate-600", model.mailOpen )
                         ]
                     , title texts.sendMail
                     , onClick ToggleMail
@@ -146,7 +146,7 @@ menuBar texts inav settings model =
             , MB.CustomElement <|
                 a
                     [ classList
-                        [ ( "bg-gray-200 dark:bg-bluegray-600", model.addFilesOpen )
+                        [ ( "bg-gray-200 dark:bg-slate-600", model.addFilesOpen )
                         ]
                     , if model.addFilesOpen then
                         title texts.close
@@ -162,7 +162,7 @@ menuBar texts inav settings model =
             , MB.CustomElement <|
                 a
                     [ classList
-                        [ ( "bg-gray-200 dark:bg-bluegray-600", isShowQrItem model.showQrModel )
+                        [ ( "bg-gray-200 dark:bg-slate-600", isShowQrItem model.showQrModel )
                         ]
                     , if isShowQrItem model.showQrModel then
                         title texts.close
@@ -258,7 +258,7 @@ leftArea texts flags settings model =
                 ]
             , class "mt-4 "
             ]
-            [ h3 [ class "flex flex-row items-center border-b dark:border-bluegray-600 font-bold text-lg" ]
+            [ h3 [ class "flex flex-row items-center border-b dark:border-slate-600 font-bold text-lg" ]
                 [ text texts.sentEmails
                 ]
             , Html.map SentMailsMsg (Comp.SentMails.view2 texts.sentMails model.sentMails)
@@ -323,7 +323,7 @@ sendMailForm texts settings model =
 
 itemIdInfo : Texts -> Model -> Html msg
 itemIdInfo texts model =
-    div [ class "flex flex-col opacity-50 text-xs pb-1 mt-3 border-t dark:border-bluegray-600" ]
+    div [ class "flex flex-col opacity-50 text-xs pb-1 mt-3 border-t dark:border-slate-600" ]
         [ div
             [ class "inline-flex items-center"
             , title texts.itemId
diff --git a/modules/webapp/src/main/elm/Comp/ItemMerge.elm b/modules/webapp/src/main/elm/Comp/ItemMerge.elm
index d42709123e..03b52e8edd 100644
--- a/modules/webapp/src/main/elm/Comp/ItemMerge.elm
+++ b/modules/webapp/src/main/elm/Comp/ItemMerge.elm
@@ -324,8 +324,8 @@ itemCard texts settings model index item =
              , class "cursor-pointer items-center"
              , classList
                 [ ( "border-2 border-blue-500 dark:border-blue-500", index == 0 && not dropActive )
-                , ( "bg-blue-100 dark:bg-lightblue-900", index == 0 && not dropActive )
-                , ( "border border-gray-400 dark:border-bluegray-600 dark:hover:border-bluegray-500 bg-white dark:bg-bluegray-700 mt-2", index /= 0 )
+                , ( "bg-blue-100 dark:bg-sky-900", index == 0 && not dropActive )
+                , ( "border border-gray-400 dark:border-slate-600 dark:hover:border-slate-500 bg-white dark:bg-slate-700 mt-2", index /= 0 )
                 , ( "bg-yellow-50 dark:bg-lime-900 mt-4", dropActive )
                 ]
              , id ("merge-" ++ item.id)
diff --git a/modules/webapp/src/main/elm/Comp/MenuBar.elm b/modules/webapp/src/main/elm/Comp/MenuBar.elm
index b29918bb5d..df7cceea49 100644
--- a/modules/webapp/src/main/elm/Comp/MenuBar.elm
+++ b/modules/webapp/src/main/elm/Comp/MenuBar.elm
@@ -102,12 +102,12 @@ type alias DropdownMenu msg =
 
 view : MenuBar msg -> Html msg
 view =
-    view1 "bg-white dark:bg-bluegray-800"
+    view1 "bg-white dark:bg-slate-800"
 
 
 viewSide : MenuBar msg -> Html msg
 viewSide =
-    view1 "bg-blue-50 dark:bg-bluegray-700"
+    view1 "bg-blue-50 dark:bg-slate-700"
 
 
 view1 : String -> MenuBar msg -> Html msg
@@ -169,10 +169,10 @@ makeDropdown : DropdownData msg -> Html msg
 makeDropdown model =
     let
         menuStyle =
-            "absolute right-0 bg-white dark:bg-bluegray-800 border dark:border-bluegray-700 z-50 dark:text-bluegray-300 shadow-lg transition duration-200 min-w-max  "
+            "absolute right-0 bg-white dark:bg-slate-800 border dark:border-slate-700 z-50 dark:text-slate-300 shadow-lg transition duration-200 min-w-max  "
 
         itemStyle =
-            "transition-colors duration-200 items-center block px-4 py-2 text-normal hover:bg-gray-200 dark:hover:bg-bluegray-700 dark:hover:text-bluegray-50"
+            "transition-colors duration-200 items-center block px-4 py-2 text-normal hover:bg-gray-200 dark:hover:bg-slate-700 dark:hover:text-slate-50"
 
         menuItem m =
             a
diff --git a/modules/webapp/src/main/elm/Comp/NotificationTest.elm b/modules/webapp/src/main/elm/Comp/NotificationTest.elm
index f7aaab4d0d..8100372148 100644
--- a/modules/webapp/src/main/elm/Comp/NotificationTest.elm
+++ b/modules/webapp/src/main/elm/Comp/NotificationTest.elm
@@ -79,7 +79,7 @@ type alias ViewConfig =
 
 styleBase : String
 styleBase =
-    "bg-gray-100 dark:bg-bluegray-900 text-gray-900 dark:text-gray-100 text-sm leading-5"
+    "bg-gray-100 dark:bg-slate-900 text-gray-900 dark:text-gray-100 text-sm leading-5"
 
 
 stylePayload : String
diff --git a/modules/webapp/src/main/elm/Comp/Progress.elm b/modules/webapp/src/main/elm/Comp/Progress.elm
index edf85e521d..b13d207170 100644
--- a/modules/webapp/src/main/elm/Comp/Progress.elm
+++ b/modules/webapp/src/main/elm/Comp/Progress.elm
@@ -17,7 +17,7 @@ import Html.Attributes exposing (attribute, class, style)
 
 progress2 : Int -> Html msg
 progress2 percent =
-    div [ class "shadow w-full h-full bg-gray-200 dark:bg-bluegray-600 rounded relative" ]
+    div [ class "shadow w-full h-full bg-gray-200 dark:bg-slate-600 rounded relative" ]
         [ div
             [ class "transition-duration-300 h-full bg-blue-500 dark:bg-light-blue-500 block text-xs text-center"
             , style "width" (String.fromInt percent ++ "%")
diff --git a/modules/webapp/src/main/elm/Comp/SearchStatsView.elm b/modules/webapp/src/main/elm/Comp/SearchStatsView.elm
index 31fc63c09d..d091465e7a 100644
--- a/modules/webapp/src/main/elm/Comp/SearchStatsView.elm
+++ b/modules/webapp/src/main/elm/Comp/SearchStatsView.elm
@@ -43,7 +43,7 @@ view2 texts classes stats =
             f.sum > 0
 
         statValues f =
-            tr [ class "border-0 border-t  dark:border-bluegray-600" ]
+            tr [ class "border-0 border-t  dark:border-slate-600" ]
                 [ td [ class "text-left text-sm" ]
                     [ div
                         [ class S.basicLabel
diff --git a/modules/webapp/src/main/elm/Comp/SentMails.elm b/modules/webapp/src/main/elm/Comp/SentMails.elm
index a1e53bbe23..c8bc732c8c 100644
--- a/modules/webapp/src/main/elm/Comp/SentMails.elm
+++ b/modules/webapp/src/main/elm/Comp/SentMails.elm
@@ -112,7 +112,7 @@ view2 texts model =
                 , div [ class "py-1 whitespace-pre-wrap" ]
                     [ text mail.body
                     ]
-                , div [ class "flex flex-row items-center border-t dark:border-bluegray-600 justify-end text-sm " ]
+                , div [ class "flex flex-row items-center border-t dark:border-slate-600 justify-end text-sm " ]
                     [ a
                         [ class S.secondaryBasicButton
                         , onClick Hide
diff --git a/modules/webapp/src/main/elm/Comp/ShareManage.elm b/modules/webapp/src/main/elm/Comp/ShareManage.elm
index 80f242be38..f0b8bca345 100644
--- a/modules/webapp/src/main/elm/Comp/ShareManage.elm
+++ b/modules/webapp/src/main/elm/Comp/ShareManage.elm
@@ -478,7 +478,7 @@ shareInfo texts flags share =
         ]
         [ h2
             [ class S.header2
-            , class "border-b-2 dark:border-bluegray-600"
+            , class "border-b-2 dark:border-slate-600"
             ]
             [ text texts.shareInformation
             ]
@@ -498,7 +498,7 @@ shareSendMail texts flags settings model =
         ]
         [ a
             [ class S.header2
-            , class "border-b-2 dark:border-bluegray-600 w-full inline-block"
+            , class "border-b-2 dark:border-slate-600 w-full inline-block"
             , href "#"
             , onClick ToggleSendMailVisible
             ]
@@ -510,7 +510,7 @@ shareSendMail texts flags settings model =
             , text texts.sendViaMail
             ]
         , div
-            [ class "px-2 py-2 dark:border-bluegray-600"
+            [ class "px-2 py-2 dark:border-slate-600"
             , classList [ ( "hidden", not model.sendMailVisible ) ]
             ]
             [ Html.map MailMsg
diff --git a/modules/webapp/src/main/elm/Comp/ShareView.elm b/modules/webapp/src/main/elm/Comp/ShareView.elm
index dbb337527a..539b37670a 100644
--- a/modules/webapp/src/main/elm/Comp/ShareView.elm
+++ b/modules/webapp/src/main/elm/Comp/ShareView.elm
@@ -62,7 +62,7 @@ viewActive cfg texts flags share =
             flags.config.baseUrl ++ "/app/share/" ++ share.id
 
         styleUrl =
-            "truncate px-2 py-2 border-0 border-t border-b border-r font-mono text-sm my-auto rounded-r border-gray-400 dark:border-bluegray-500"
+            "truncate px-2 py-2 border-0 border-t border-b border-r font-mono text-sm my-auto rounded-r border-gray-400 dark:border-slate-500"
 
         infoLine hidden icon label value =
             div
diff --git a/modules/webapp/src/main/elm/Comp/SourceManage.elm b/modules/webapp/src/main/elm/Comp/SourceManage.elm
index 629ac18e73..b8581da828 100644
--- a/modules/webapp/src/main/elm/Comp/SourceManage.elm
+++ b/modules/webapp/src/main/elm/Comp/SourceManage.elm
@@ -279,7 +279,7 @@ viewLinks2 texts flags _ source =
             flags.config.baseUrl ++ "/api/v1/open/upload/item/" ++ source.source.id
 
         styleUrl =
-            "truncate px-2 py-2 border-0 border-t border-b border-r font-mono text-sm my-auto rounded-r border-gray-400 dark:border-bluegray-500"
+            "truncate px-2 py-2 border-0 border-t border-b border-r font-mono text-sm my-auto rounded-r border-gray-400 dark:border-slate-500"
     in
     div
         []
diff --git a/modules/webapp/src/main/elm/Comp/StringListInput.elm b/modules/webapp/src/main/elm/Comp/StringListInput.elm
index 572d6f6a47..38ee3f0173 100644
--- a/modules/webapp/src/main/elm/Comp/StringListInput.elm
+++ b/modules/webapp/src/main/elm/Comp/StringListInput.elm
@@ -108,7 +108,7 @@ view2 values model =
             ]
         , div
             [ class "flex flex-col space-y-4 md:space-y-2 mt-2"
-            , class "px-2 border-0 border-l dark:border-bluegray-600"
+            , class "px-2 border-0 border-l dark:border-slate-600"
             ]
             (List.map valueItem values)
         ]
diff --git a/modules/webapp/src/main/elm/Comp/Tabs.elm b/modules/webapp/src/main/elm/Comp/Tabs.elm
index 0a1c862f09..5efdbf57d6 100644
--- a/modules/webapp/src/main/elm/Comp/Tabs.elm
+++ b/modules/webapp/src/main/elm/Comp/Tabs.elm
@@ -58,9 +58,9 @@ type alias State =
 
 defaultStyle : Style
 defaultStyle =
-    { rootClasses = "border-0 border-t  dark:border-bluegray-600"
-    , tabClasses = "border-0 border-b  dark:border-bluegray-600"
-    , titleClasses = "py-4 md:py-2 px-2 bg-gray-50 hover:bg-gray-100 dark:bg-bluegray-700 dark:bg-opacity-50 dark:hover:bg-opacity-100"
+    { rootClasses = "border-0 border-t  dark:border-slate-600"
+    , tabClasses = "border-0 border-b  dark:border-slate-600"
+    , titleClasses = "py-4 md:py-2 px-2 bg-gray-50 hover:bg-gray-100 dark:bg-slate-700 dark:bg-opacity-50 dark:hover:bg-opacity-100"
     , bodyClasses = "mt-2 py-2"
     }
 
@@ -69,7 +69,7 @@ searchMenuStyle : Style
 searchMenuStyle =
     { rootClasses = "border-0 "
     , tabClasses = "border-0 "
-    , titleClasses = "py-4 md:py-2 pl-2 bg-blue-50 hover:bg-blue-100 dark:bg-bluegray-700 dark:hover:bg-opacity-100 dark:hover:bg-bluegray-600 rounded"
+    , titleClasses = "py-4 md:py-2 pl-2 bg-blue-50 hover:bg-blue-100 dark:bg-slate-700 dark:hover:bg-opacity-100 dark:hover:bg-slate-600 rounded"
     , bodyClasses = "mt-1 py-1 pl-2"
     }
 
diff --git a/modules/webapp/src/main/elm/Comp/TagSelect.elm b/modules/webapp/src/main/elm/Comp/TagSelect.elm
index 07d76380e9..fae8f89e56 100644
--- a/modules/webapp/src/main/elm/Comp/TagSelect.elm
+++ b/modules/webapp/src/main/elm/Comp/TagSelect.elm
@@ -481,7 +481,7 @@ viewTagsDrop2 texts ddm wm settings model =
                     , onInput Search
                     , class "bg-blue-50 w-30 h-6 px-0 py-0 text-xs"
                     , class "border-0 border-b border-gray-200 focus:ring-0 focus:border-black"
-                    , class "dark:bg-bluegray-700 dark:text-bluegray-200 dark:border-bluegray-400 dark:focus:border-white"
+                    , class "dark:bg-slate-700 dark:text-slate-200 dark:border-slate-400 dark:focus:border-white"
                     ]
                     []
                 , i [ class "fa fa-search absolute top-1/3 right-0 opacity-50" ] []
@@ -553,10 +553,10 @@ viewTagItem2 ddm settings model tag =
     in
     a
         ([ classList
-            [ ( "bg-blue-100 dark:bg-bluegray-600", dropActive )
+            [ ( "bg-blue-100 dark:bg-slate-600", dropActive )
             ]
          , class "flex flex-row items-center"
-         , class "rounded px-1 py-1 hover:bg-blue-100 dark:hover:bg-bluegray-600"
+         , class "rounded px-1 py-1 hover:bg-blue-100 dark:hover:bg-slate-600"
          , href "#"
          , onClick (ToggleTag tag.tag.id)
          ]
@@ -591,7 +591,7 @@ viewCategoryItem2 settings model cat =
     in
     a
         [ class "flex flex-row items-center"
-        , class "rounded px-1 py-1 hover:bg-blue-100 dark:hover:bg-bluegray-600"
+        , class "rounded px-1 py-1 hover:bg-blue-100 dark:hover:bg-slate-600"
         , href "#"
         , onClick (ToggleCat cat.name)
         ]
@@ -662,7 +662,7 @@ numberLabel : Int -> Html msg
 numberLabel num =
     div
         [ class "bg-gray-200 border rounded-full h-6 w-6 flex items-center justify-center text-xs"
-        , class "dark:bg-bluegray-800 dark:text-bluegray-200 dark:border-bluegray-800 dark:bg-opacity-50"
+        , class "dark:bg-slate-800 dark:text-slate-200 dark:border-slate-800 dark:bg-opacity-50"
         ]
         [ text (String.fromInt num)
         ]
diff --git a/modules/webapp/src/main/elm/Data/DropdownStyle.elm b/modules/webapp/src/main/elm/Data/DropdownStyle.elm
index 1d55978ac1..020ba99c99 100644
--- a/modules/webapp/src/main/elm/Data/DropdownStyle.elm
+++ b/modules/webapp/src/main/elm/Data/DropdownStyle.elm
@@ -31,7 +31,7 @@ mainStyle =
     , link = dropdownLinkStyle ++ mainLink
     , menu = dropdownMenuStyle ++ mainMenu
     , item = dropdownItemStyle ++ mainItem
-    , itemActive = "bg-gray-200 dark:bg-bluegray-700"
+    , itemActive = "bg-gray-200 dark:bg-slate-700"
     , input = mainInputStyle
     }
 
@@ -51,7 +51,7 @@ sidebarStyle =
     , link = dropdownLinkStyle ++ sidebarLink
     , menu = dropdownMenuStyle ++ sidebarMenu
     , item = dropdownItemStyle ++ sidebarItem
-    , itemActive = "bg-gray-300 dark:bg-bluegray-600"
+    , itemActive = "bg-gray-300 dark:bg-slate-600"
     , input = sidebarInputStyle
     }
 
@@ -64,12 +64,12 @@ dropdownLinkStyle =
 
 mainLink : String
 mainLink =
-    " bg-white border-gray-500 hover:border-gray-500 dark:bg-bluegray-800 dark:border-bluegray-500 dark:hover:border-bluegray-500"
+    " bg-white border-gray-500 hover:border-gray-500 dark:bg-slate-800 dark:border-slate-500 dark:hover:border-slate-500"
 
 
 sidebarLink : String
 sidebarLink =
-    " bg-blue-50 border-gray-500 hover:border-gray-500 dark:bg-bluegray-700 dark:border-bluegray-400 dark:hover:border-bluegray-400"
+    " bg-blue-50 border-gray-500 hover:border-gray-500 dark:bg-slate-700 dark:border-slate-400 dark:hover:border-slate-400"
 
 
 dropdownMenuStyle : String
@@ -79,12 +79,12 @@ dropdownMenuStyle =
 
 mainMenu : String
 mainMenu =
-    "bg-white dark:bg-bluegray-800 dark:border-bluegray-700 dark:text-bluegray-300"
+    "bg-white dark:bg-slate-800 dark:border-slate-700 dark:text-slate-300"
 
 
 sidebarMenu : String
 sidebarMenu =
-    "bg-blue-50 dark:bg-bluegray-700 dark:border-bluegray-600 dark:text-bluegray-200"
+    "bg-blue-50 dark:bg-slate-700 dark:border-slate-600 dark:text-slate-200"
 
 
 dropdownItemStyle : String
@@ -94,19 +94,19 @@ dropdownItemStyle =
 
 mainItem : String
 mainItem =
-    " hover:bg-gray-200 dark:hover:bg-bluegray-700 dark:hover:text-bluegray-100"
+    " hover:bg-gray-200 dark:hover:bg-slate-700 dark:hover:text-slate-100"
 
 
 sidebarItem : String
 sidebarItem =
-    " hover:bg-gray-300 dark:hover:bg-bluegray-600 dark:hover:text-bluegray-50"
+    " hover:bg-gray-300 dark:hover:bg-slate-600 dark:hover:text-slate-50"
 
 
 mainInputStyle : String
 mainInputStyle =
-    "dark:text-bluegray-200 dark:bg-bluegray-800 dark:border-bluegray-500"
+    "dark:text-slate-200 dark:bg-slate-800 dark:border-slate-500"
 
 
 sidebarInputStyle : String
 sidebarInputStyle =
-    "bg-blue-50 dark:text-bluegray-200 dark:bg-bluegray-700 dark:border-bluegray-400"
+    "bg-blue-50 dark:text-slate-200 dark:bg-slate-700 dark:border-slate-400"
diff --git a/modules/webapp/src/main/elm/Data/UiSettings.elm b/modules/webapp/src/main/elm/Data/UiSettings.elm
index cf1bd34a73..50e1a540cb 100644
--- a/modules/webapp/src/main/elm/Data/UiSettings.elm
+++ b/modules/webapp/src/main/elm/Data/UiSettings.elm
@@ -392,7 +392,7 @@ tagColorString2 : Tag -> UiSettings -> String
 tagColorString2 tag settings =
     tagColor tag settings
         |> Maybe.map Data.Color.toString2
-        |> Maybe.withDefault "border-black dark:border-bluegray-200"
+        |> Maybe.withDefault "border-black dark:border-slate-200"
 
 
 tagColorFg2 : Tag -> UiSettings -> String
diff --git a/modules/webapp/src/main/elm/Page/Home/SideMenu.elm b/modules/webapp/src/main/elm/Page/Home/SideMenu.elm
index 5ad19c4757..9402f1d869 100644
--- a/modules/webapp/src/main/elm/Page/Home/SideMenu.elm
+++ b/modules/webapp/src/main/elm/Page/Home/SideMenu.elm
@@ -36,7 +36,7 @@ view texts flags settings model =
                     , title = texts.editMode
                     , inputClass =
                         [ ( S.secondaryBasicButton, True )
-                        , ( "bg-gray-200 dark:bg-bluegray-600", selectActive model )
+                        , ( "bg-gray-200 dark:bg-slate-600", selectActive model )
                         ]
                     }
                 , MB.CustomButton
diff --git a/modules/webapp/src/main/elm/Page/Home/View2.elm b/modules/webapp/src/main/elm/Page/Home/View2.elm
index 5a5111b413..3f4bf2b139 100644
--- a/modules/webapp/src/main/elm/Page/Home/View2.elm
+++ b/modules/webapp/src/main/elm/Page/Home/View2.elm
@@ -296,7 +296,7 @@ defaultMenuBar texts flags settings model =
                 , title = texts.selectModeTitle
                 , inputClass =
                     [ ( btnStyle, True )
-                    , ( "bg-gray-200 dark:bg-bluegray-600", selectActive model )
+                    , ( "bg-gray-200 dark:bg-slate-600", selectActive model )
                     ]
                 }
             , MB.Dropdown
@@ -375,11 +375,11 @@ defaultMenuBar texts flags settings model =
                 , inputClass =
                     [ ( btnStyle, True )
                     , ( "hidden sm:inline-block", False )
-                    , ( "bg-gray-200 dark:bg-bluegray-600", settings.cardPreviewFullWidth )
+                    , ( "bg-gray-200 dark:bg-slate-600", settings.cardPreviewFullWidth )
                     ]
                 }
             ]
-        , rootClasses = "mb-2 pt-1 dark:bg-bluegray-700 items-center text-sm"
+        , rootClasses = "mb-2 pt-1 dark:bg-slate-700 items-center text-sm"
         }
 
 
@@ -401,7 +401,7 @@ editMenuBar texts model svm =
                 , title = texts.editSelectedItems selectCount
                 , inputClass =
                     [ ( btnStyle, True )
-                    , ( "bg-gray-200 dark:bg-bluegray-600", svm.action == EditSelected )
+                    , ( "bg-gray-200 dark:bg-slate-600", svm.action == EditSelected )
                     , ( "hidden", model.searchMenuModel.searchMode == Data.SearchMode.Trashed )
                     ]
                 }
@@ -412,7 +412,7 @@ editMenuBar texts model svm =
                 , title = texts.reprocessSelectedItems selectCount
                 , inputClass =
                     [ ( btnStyle, True )
-                    , ( "bg-gray-200 dark:bg-bluegray-600", svm.action == ReprocessSelected )
+                    , ( "bg-gray-200 dark:bg-slate-600", svm.action == ReprocessSelected )
                     , ( "hidden", model.searchMenuModel.searchMode == Data.SearchMode.Trashed )
                     ]
                 }
@@ -423,7 +423,7 @@ editMenuBar texts model svm =
                 , title = texts.deleteSelectedItems selectCount
                 , inputClass =
                     [ ( btnStyle, True )
-                    , ( "bg-gray-200 dark:bg-bluegray-600", svm.action == DeleteSelected )
+                    , ( "bg-gray-200 dark:bg-slate-600", svm.action == DeleteSelected )
                     , ( "hidden", model.searchMenuModel.searchMode == Data.SearchMode.Trashed )
                     ]
                 }
@@ -434,7 +434,7 @@ editMenuBar texts model svm =
                 , title = texts.undeleteSelectedItems selectCount
                 , inputClass =
                     [ ( btnStyle, True )
-                    , ( "bg-gray-200 dark:bg-bluegray-600", svm.action == RestoreSelected )
+                    , ( "bg-gray-200 dark:bg-slate-600", svm.action == RestoreSelected )
                     , ( "hidden", model.searchMenuModel.searchMode == Data.SearchMode.Normal )
                     ]
                 }
@@ -445,7 +445,7 @@ editMenuBar texts model svm =
                 , title = texts.mergeItemsTitle selectCount
                 , inputClass =
                     [ ( btnStyle, True )
-                    , ( "bg-gray-200 dark:bg-bluegray-600", svm.action == MergeSelected )
+                    , ( "bg-gray-200 dark:bg-slate-600", svm.action == MergeSelected )
                     , ( "hidden", model.searchMenuModel.searchMode == Data.SearchMode.Trashed )
                     ]
                 }
@@ -456,7 +456,7 @@ editMenuBar texts model svm =
                 , title = texts.publishItemsTitle selectCount
                 , inputClass =
                     [ ( btnStyle, True )
-                    , ( "bg-gray-200 dark:bg-bluegray-600", svm.action == PublishSelected )
+                    , ( "bg-gray-200 dark:bg-slate-600", svm.action == PublishSelected )
                     , ( "hidden", model.searchMenuModel.searchMode == Data.SearchMode.Trashed )
                     ]
                 }
@@ -483,7 +483,7 @@ editMenuBar texts model svm =
             , MB.TextLabel
                 { icon = ""
                 , label = String.fromInt selectCount
-                , class = "px-4 py-2 w-10 rounded-full font-bold bg-blue-100 dark:bg-lightblue-600 "
+                , class = "px-4 py-2 w-10 rounded-full font-bold bg-blue-100 dark:bg-sky-600 "
                 }
             , MB.CustomButton
                 { tagger = ResetSearch
@@ -502,7 +502,7 @@ editMenuBar texts model svm =
                 , title = texts.exitSelectMode
                 , inputClass =
                     [ ( btnStyle, True )
-                    , ( "bg-gray-200 dark:bg-bluegray-600", selectActive model )
+                    , ( "bg-gray-200 dark:bg-slate-600", selectActive model )
                     ]
                 }
             ]
diff --git a/modules/webapp/src/main/elm/Page/Login/View2.elm b/modules/webapp/src/main/elm/Page/Login/View2.elm
index 91d7580921..51f1143f13 100644
--- a/modules/webapp/src/main/elm/Page/Login/View2.elm
+++ b/modules/webapp/src/main/elm/Page/Login/View2.elm
@@ -97,7 +97,7 @@ openIdLinks texts flags =
                     { label = texts.or
                     , topCss = "w-2/3 mb-4 hidden md:inline-flex w-full"
                     , labelCss = "px-4 bg-gray-200 bg-opacity-50"
-                    , lineColor = "bg-gray-300 dark:bg-bluegray-600"
+                    , lineColor = "bg-gray-300 dark:bg-slate-600"
                     }
                 , div [ class "flex flex-row space-x-4 items-center justify-center" ]
                     (List.map renderLink provs)
diff --git a/modules/webapp/src/main/elm/Page/NewInvite/View2.elm b/modules/webapp/src/main/elm/Page/NewInvite/View2.elm
index 08dab7c4f7..025c485545 100644
--- a/modules/webapp/src/main/elm/Page/NewInvite/View2.elm
+++ b/modules/webapp/src/main/elm/Page/NewInvite/View2.elm
@@ -53,7 +53,7 @@ viewContent texts flags _ model =
                         [ div
                             [ class "inline-flex items-center justify-center"
                             , class "absolute left-0 top-0 h-full w-10"
-                            , class "text-gray-400 dark:text-bluegray-400"
+                            , class "text-gray-400 dark:text-slate-400"
                             ]
                             [ i [ class "fa fa-key" ] []
                             ]
diff --git a/modules/webapp/src/main/elm/Page/Queue/View2.elm b/modules/webapp/src/main/elm/Page/Queue/View2.elm
index a30c759c12..e772bd22c3 100644
--- a/modules/webapp/src/main/elm/Page/Queue/View2.elm
+++ b/modules/webapp/src/main/elm/Page/Queue/View2.elm
@@ -55,7 +55,7 @@ viewSidebar texts visible _ _ model =
                 [ href "#"
                 , class S.sidebarLink
                 , class cls
-                , classList [ ( "bg-blue-100 dark:bg-bluegray-600", model.queueView == v ) ]
+                , classList [ ( "bg-blue-100 dark:bg-slate-600", model.queueView == v ) ]
                 , onClick (SetQueueView v)
                 ]
                 [ i [ class icon ]
@@ -63,7 +63,7 @@ viewSidebar texts visible _ _ model =
                 , div
                     [ class "ml-3" ]
                     [ text label ]
-                , div [ class "ml-auto bg-gray-200 border rounded-full h-6 w-6 flex items-center justify-center text-xs dark:bg-bluegray-800 dark:text-bluegray-200 dark:border-bluegray-800 dark:bg-opacity-50" ]
+                , div [ class "ml-auto bg-gray-200 border rounded-full h-6 w-6 flex items-center justify-center text-xs dark:bg-slate-800 dark:text-slate-200 dark:border-slate-800 dark:bg-opacity-50" ]
                     [ count v |> String.fromInt |> text
                     ]
                 ]
@@ -191,7 +191,7 @@ renderJobLog : JobDetail -> Html Msg
 renderJobLog job =
     div
         [ class " absolute top-12 left-0 w-full h-full-12 z-40 flex flex-col items-center px-4 py-2 "
-        , class "bg-white bg-opacity-80 dark:bg-black dark:bg-bluegray-900 dark:bg-opacity-90"
+        , class "bg-white bg-opacity-80 dark:bg-black dark:bg-slate-900 dark:bg-opacity-90"
         ]
         [ div [ class (S.box ++ "py-2 px-2 flex flex-col w-full") ]
             [ div [ class "flex flex-row mb-4 px-2" ]
diff --git a/modules/webapp/src/main/elm/Page/Share/Menubar.elm b/modules/webapp/src/main/elm/Page/Share/Menubar.elm
index e9bd4d4eff..c2ae67c26a 100644
--- a/modules/webapp/src/main/elm/Page/Share/Menubar.elm
+++ b/modules/webapp/src/main/elm/Page/Share/Menubar.elm
@@ -91,7 +91,7 @@ view texts flags model =
                     , attrs =
                         [ href "#"
                         , title texts.extendedSearch
-                        , classList [ ( "bg-gray-200 dark:bg-bluegray-600", model.searchMode == SearchBarNormal ) ]
+                        , classList [ ( "bg-gray-200 dark:bg-slate-600", model.searchMode == SearchBarNormal ) ]
                         ]
                     }
             ]
@@ -147,5 +147,5 @@ view texts flags model =
                     ]
                 }
             ]
-        , rootClasses = "mb-2 pt-1 dark:bg-bluegray-700 items-center text-sm"
+        , rootClasses = "mb-2 pt-1 dark:bg-slate-700 items-center text-sm"
         }
diff --git a/modules/webapp/src/main/elm/Page/ShareDetail/View.elm b/modules/webapp/src/main/elm/Page/ShareDetail/View.elm
index be394d93c8..73442e26cd 100644
--- a/modules/webapp/src/main/elm/Page/ShareDetail/View.elm
+++ b/modules/webapp/src/main/elm/Page/ShareDetail/View.elm
@@ -97,7 +97,7 @@ itemData texts flags model shareId itemId =
             "mb-4 sm:mb-6"
 
         headerStyle =
-            "py-2 bg-blue-50 hover:bg-blue-100 dark:bg-bluegray-700 dark:hover:bg-opacity-100 dark:hover:bg-bluegray-600 text-lg font-medium rounded-lg"
+            "py-2 bg-blue-50 hover:bg-blue-100 dark:bg-slate-700 dark:hover:bg-opacity-100 dark:hover:bg-slate-600 text-lg font-medium rounded-lg"
 
         showTag tag =
             div
@@ -200,9 +200,9 @@ itemPreview texts flags settings model =
             Maybe.withDefault (texts.noName ++ ".pdf") attach.name
     in
     div
-        [ class "flex flex-grow flex-col h-full border-t dark:border-bluegray-600"
+        [ class "flex flex-grow flex-col h-full border-t dark:border-slate-600"
         ]
-        [ div [ class "flex flex-col sm:flex-row items-center py-1 px-1 border-l border-r dark:border-bluegray-600" ]
+        [ div [ class "flex flex-col sm:flex-row items-center py-1 px-1 border-l border-r dark:border-slate-600" ]
             [ div [ class "text-base font-bold flex-grow w-full text-center sm:text-left break-all" ]
                 [ text attachName
                 , text " ("
@@ -242,7 +242,7 @@ itemPreview texts flags settings model =
             ]
         , attachmentSelect texts model
         , div
-            [ class "flex w-full h-full mb-4 border-b border-l border-r dark:border-bluegray-600"
+            [ class "flex w-full h-full mb-4 border-b border-l border-r dark:border-slate-600"
             , style "min-height" "500px"
             ]
             [ embed
@@ -299,7 +299,7 @@ passwordContent texts flags versionInfo model =
 attachmentSelect : Texts -> Model -> Html Msg
 attachmentSelect texts model =
     div
-        [ class "flex flex-row border-l border-t border-r px-2 py-2 dark:border-bluegray-600 "
+        [ class "flex flex-row border-l border-t border-r px-2 py-2 dark:border-slate-600 "
         , class "overflow-x-auto overflow-y-none"
         , classList
             [ ( "hidden", not model.attachMenuOpen )
@@ -319,11 +319,11 @@ menuItem texts model pos attach =
     in
     a
         [ classList <|
-            [ ( "border-blue-500 dark:border-lightblue-500", pos == 0 )
-            , ( "dark:border-bluegray-600", pos /= 0 )
+            [ ( "border-blue-500 dark:border-sky-500", pos == 0 )
+            , ( "dark:border-slate-600", pos /= 0 )
             ]
         , class "flex flex-col relative border rounded px-1 py-1 mr-2"
-        , class " hover:shadow dark:hover:border-bluegray-500"
+        , class " hover:shadow dark:hover:border-slate-500"
         , href "#"
         , onClick (SelectActiveAttachment pos)
         ]
@@ -331,7 +331,7 @@ menuItem texts model pos attach =
             [ classList
                 [ ( "hidden", not visible )
                 ]
-            , class "absolute right-1 top-1 text-blue-400 dark:text-lightblue-400 text-xl"
+            , class "absolute right-1 top-1 text-blue-400 dark:text-sky-400 text-xl"
             ]
             [ i [ class iconClass ] []
             ]
diff --git a/modules/webapp/src/main/elm/Styles.elm b/modules/webapp/src/main/elm/Styles.elm
index 3c8e0a9ffe..abea7a25be 100644
--- a/modules/webapp/src/main/elm/Styles.elm
+++ b/modules/webapp/src/main/elm/Styles.elm
@@ -17,12 +17,12 @@ sidebar =
 
 sidebarBg : String
 sidebarBg =
-    " bg-blue-50 dark:bg-bluegray-700 "
+    " bg-blue-50 dark:bg-slate-700 "
 
 
 sidebarMenuItemActive : String
 sidebarMenuItemActive =
-    "bg-blue-100 dark:bg-bluegray-600"
+    "bg-blue-100 dark:bg-slate-600"
 
 
 content : String
@@ -32,7 +32,7 @@ content =
 
 sidebarLink : String
 sidebarLink =
-    " mb-2 px-4 py-3 flex flex-row hover:bg-blue-100 dark:hover:bg-bluegray-600 hover:font-bold rounded rounded-lg items-center "
+    " mb-2 px-4 py-3 flex flex-row hover:bg-blue-100 dark:hover:bg-slate-600 hover:font-bold rounded rounded-lg items-center "
 
 
 successMessage : String
@@ -67,7 +67,7 @@ warnMessageColors =
 
 infoMessageBase : String
 infoMessageBase =
-    " border border-blue-800 bg-blue-100 text-blue-800 dark:border-lightblue-200 dark:bg-lightblue-800 dark:text-lightblue-200 dark:bg-opacity-25 "
+    " border border-blue-800 bg-blue-100 text-blue-800 dark:border-sky-200 dark:bg-sky-800 dark:text-sky-200 dark:bg-opacity-25 "
 
 
 infoMessage : String
@@ -78,7 +78,7 @@ infoMessage =
 message : String
 message =
     " border border-gray-600 bg-gray-50 text-gray-600 "
-        ++ "dark:border-bluegray-400 dark:bg-bluegray-600 dark:bg-opacity-80 dark:text-bluegray-400 "
+        ++ "dark:border-slate-400 dark:bg-slate-600 dark:bg-opacity-80 dark:text-slate-400 "
         ++ "px-4 py-2 rounded "
 
 
@@ -104,12 +104,12 @@ redBasicLabel =
 
 basicLabel : String
 basicLabel =
-    " label border-gray-600 text-gray-600 dark:border-bluegray-300 dark:text-bluegray-300 "
+    " label border-gray-600 text-gray-600 dark:border-slate-300 dark:text-slate-300 "
 
 
 blueBasicLabel : String
 blueBasicLabel =
-    " label border-blue-500 text-blue-500 dark:border-lightblue-200 dark:text-lightblue-200 "
+    " label border-blue-500 text-blue-500 dark:border-sky-200 dark:text-sky-200 "
 
 
 
@@ -128,12 +128,12 @@ primaryButtonPlain =
 
 primaryButtonMain : String
 primaryButtonMain =
-    " my-auto whitespace-nowrap bg-blue-500 dark:bg-lightblue-800 text-white text-center px-4 py-2 shadow-md focus:outline-none focus:ring focus:ring-opacity-75 "
+    " my-auto whitespace-nowrap bg-blue-500 dark:bg-sky-800 text-white text-center px-4 py-2 shadow-md focus:outline-none focus:ring focus:ring-opacity-75 "
 
 
 primaryButtonHover : String
 primaryButtonHover =
-    " hover:bg-blue-600 dark:hover:bg-lightblue-700 "
+    " hover:bg-blue-600 dark:hover:bg-sky-700 "
 
 
 primaryButtonRounded : String
@@ -152,12 +152,12 @@ primaryBasicButton =
 
 primaryBasicButtonMain : String
 primaryBasicButtonMain =
-    " rounded my-auto whitespace-nowrap border border-blue-500 dark:border-lightblue-500 text-blue-500 dark:text-lightblue-500 text-center px-4 py-2 shadow-md focus:outline-none focus:ring focus:ring-opacity-75 "
+    " rounded my-auto whitespace-nowrap border border-blue-500 dark:border-sky-500 text-blue-500 dark:text-sky-500 text-center px-4 py-2 shadow-md focus:outline-none focus:ring focus:ring-opacity-75 "
 
 
 primaryBasicButtonHover : String
 primaryBasicButtonHover =
-    " hover:bg-blue-600 hover:text-white dark:hover:text-white dark:hover:bg-lightblue-500 "
+    " hover:bg-blue-600 hover:text-white dark:hover:text-white dark:hover:bg-sky-500 "
 
 
 
@@ -171,12 +171,12 @@ secondaryButton =
 
 secondaryButtonMain : String
 secondaryButtonMain =
-    " rounded my-auto whitespace-nowrap bg-gray-300 dark:bg-bluegray-400 text-center px-4 py-2 shadow-md focus:outline-none focus:ring focus:ring-opacity-75 dark:text-gray-800 text-gray-800"
+    " rounded my-auto whitespace-nowrap bg-gray-300 dark:bg-slate-400 text-center px-4 py-2 shadow-md focus:outline-none focus:ring focus:ring-opacity-75 dark:text-gray-800 text-gray-800"
 
 
 secondaryButtonHover : String
 secondaryButtonHover =
-    " hover:bg-gray-400 dark:hover:bg-bluegray-300 "
+    " hover:bg-gray-400 dark:hover:bg-slate-300 "
 
 
 secondaryBasicButton : String
@@ -200,12 +200,12 @@ secondaryBasicButtonRounded =
 
 secondaryBasicButtonMain : String
 secondaryBasicButtonMain =
-    " my-auto whitespace-nowrap border-gray-500 dark:border-bluegray-500 text-gray-500 dark:text-bluegray-400 text-center shadow-none focus:outline-none focus:ring focus:ring-opacity-75 "
+    " my-auto whitespace-nowrap border-gray-500 dark:border-slate-500 text-gray-500 dark:text-slate-400 text-center shadow-none focus:outline-none focus:ring focus:ring-opacity-75 "
 
 
 secondaryBasicButtonHover : String
 secondaryBasicButtonHover =
-    " hover:bg-gray-600 hover:text-white dark:hover:text-white dark:hover:bg-bluegray-500 dark:hover:text-bluegray-100 "
+    " hover:bg-gray-600 hover:text-white dark:hover:text-white dark:hover:bg-slate-500 dark:hover:text-slate-100 "
 
 
 
@@ -224,17 +224,17 @@ deleteButtonMain =
 
 deleteButtonHover : String
 deleteButtonHover =
-    " hover:bg-red-600 hover:text-white dark:hover:bg-orange-500 dark:hover:text-bluegray-900 "
+    " hover:bg-red-600 hover:text-white dark:hover:bg-orange-500 dark:hover:text-slate-900 "
 
 
 undeleteButton : String
 undeleteButton =
-    " rounded my-auto whitespace-nowrap border border-green-500 dark:border-lightgreen-500 text-green-500 dark:text-lightgreen-500 text-center px-4 py-2 shadow-none focus:outline-none focus:ring focus:ring-opacity-75 hover:bg-green-600 hover:text-white dark:hover:text-white dark:hover:bg-lightgreen-500 dark:hover:text-bluegray-900 "
+    " rounded my-auto whitespace-nowrap border border-green-500 dark:border-lightgreen-500 text-green-500 dark:text-lightgreen-500 text-center px-4 py-2 shadow-none focus:outline-none focus:ring focus:ring-opacity-75 hover:bg-green-600 hover:text-white dark:hover:text-white dark:hover:bg-lightgreen-500 dark:hover:text-slate-900 "
 
 
 deleteLabel : String
 deleteLabel =
-    "label my-auto whitespace-nowrap border border-red-500 dark:border-lightred-500 text-red-500 dark:text-orange-500 text-center focus:outline-none focus:ring focus:ring-opacity-75 hover:bg-red-600 hover:text-white dark:hover:text-white dark:hover:bg-orange-500 dark:hover:text-bluegray-900"
+    "label my-auto whitespace-nowrap border border-red-500 dark:border-lightred-500 text-red-500 dark:text-orange-500 text-center focus:outline-none focus:ring focus:ring-opacity-75 hover:bg-red-600 hover:text-white dark:hover:text-white dark:hover:bg-orange-500 dark:hover:text-slate-900"
 
 
 
@@ -243,7 +243,7 @@ deleteLabel =
 
 link : String
 link =
-    " text-blue-400 hover:text-blue-500 dark:text-lightblue-200 dark:hover:text-lightblue-100 cursor-pointer "
+    " text-blue-400 hover:text-blue-500 dark:text-sky-200 dark:hover:text-sky-100 cursor-pointer "
 
 
 inputErrorBorder : String
@@ -258,12 +258,12 @@ inputLabel =
 
 textInput : String
 textInput =
-    " placeholder-gray-400 w-full dark:text-bluegray-200 dark:bg-bluegray-800 dark:border-bluegray-500 border-gray-400 rounded " ++ formFocusRing
+    " placeholder-gray-400 w-full dark:text-slate-200 dark:bg-slate-800 dark:border-slate-500 border-gray-400 rounded " ++ formFocusRing
 
 
 textInputSidebar : String
 textInputSidebar =
-    " w-full placeholder-gray-400 border-gray-400 bg-blue-50 dark:text-bluegray-200 dark:bg-bluegray-700 dark:border-bluegray-500 rounded " ++ formFocusRing
+    " w-full placeholder-gray-400 border-gray-400 bg-blue-50 dark:text-slate-200 dark:bg-slate-700 dark:border-slate-500 rounded " ++ formFocusRing
 
 
 textAreaInput : String
@@ -273,46 +273,46 @@ textAreaInput =
 
 inputIcon : String
 inputIcon =
-    "absolute left-3 top-2 w-10 text-gray-400 dark:text-bluegray-400  "
+    "absolute left-3 top-2 w-10 text-gray-400 dark:text-slate-400  "
 
 
 dateInputIcon : String
 dateInputIcon =
-    "absolute left-3 top-3 w-10 text-gray-400 dark:text-bluegray-400  "
+    "absolute left-3 top-3 w-10 text-gray-400 dark:text-slate-400  "
 
 
 inputLeftIconLink : String
 inputLeftIconLink =
     "inline-flex items-center justify-center absolute right-0 top-0 h-full w-10 rounded-r cursor-pointer "
-        ++ "text-gray-400 dark:text-bluegray-400 "
-        ++ "bg-gray-300 dark:bg-bluegray-700 "
-        ++ "dark:border-bluegray-500 border-0 border-r border-t border-b border-gray-500 "
-        ++ "hover:bg-gray-400 hover:text-gray-700 dark:hover:bg-bluegray-600"
+        ++ "text-gray-400 dark:text-slate-400 "
+        ++ "bg-gray-300 dark:bg-slate-700 "
+        ++ "dark:border-slate-500 border-0 border-r border-t border-b border-gray-500 "
+        ++ "hover:bg-gray-400 hover:text-gray-700 dark:hover:bg-slate-600"
 
 
 inputLeftIconLinkSidebar : String
 inputLeftIconLinkSidebar =
     "inline-flex items-center justify-center absolute right-0 top-0 h-full w-10 rounded-r cursor-pointer "
-        ++ "text-gray-400 dark:text-bluegray-400 "
-        ++ "bg-gray-300 dark:bg-bluegray-600 "
-        ++ "dark:border-bluegray-500 border-0 border-r border-t border-b border-gray-500 "
-        ++ "hover:bg-gray-400 hover:text-gray-700 dark:hover:bg-bluegray-500"
+        ++ "text-gray-400 dark:text-slate-400 "
+        ++ "bg-gray-300 dark:bg-slate-600 "
+        ++ "dark:border-slate-500 border-0 border-r border-t border-b border-gray-500 "
+        ++ "hover:bg-gray-400 hover:text-gray-700 dark:hover:bg-slate-500"
 
 
 inputLeftIconOnly : String
 inputLeftIconOnly =
     "inline-flex items-center justify-center absolute right-0 top-0 h-full w-10 rounded-r "
-        ++ "dark:border-bluegray-500 border-0 border-r border-t border-b border-gray-500 "
+        ++ "dark:border-slate-500 border-0 border-r border-t border-b border-gray-500 "
 
 
 checkboxInput : String
 checkboxInput =
-    " checkbox w-5 h-5 md:w-4 md:h-4 text-black  dark:text-bluegray-600 dark:bg-bluegray-600 dark:border-bluegray-700" ++ formFocusRing
+    " checkbox w-5 h-5 md:w-4 md:h-4 text-black  dark:text-slate-600 dark:bg-slate-600 dark:border-slate-700" ++ formFocusRing
 
 
 formFocusRing : String
 formFocusRing =
-    " focus:ring focus:ring-black focus:ring-opacity-50 focus:ring-offset-0 dark:focus:ring-bluegray-400 "
+    " focus:ring focus:ring-black focus:ring-opacity-50 focus:ring-offset-0 dark:focus:ring-slate-400 "
 
 
 radioInput : String
@@ -322,17 +322,17 @@ radioInput =
 
 box : String
 box =
-    " border dark:border-bluegray-500 bg-white dark:bg-bluegray-800 shadow-md "
+    " border dark:border-slate-500 bg-white dark:bg-slate-800 shadow-md "
 
 
 border : String
 border =
-    " border dark:border-bluegray-600 "
+    " border dark:border-slate-600 "
 
 
 border2 : String
 border2 =
-    " border-2 dark:border-bluegray-600 "
+    " border-2 dark:border-slate-600 "
 
 
 header1 : String
@@ -352,7 +352,7 @@ header3 =
 
 formHeader : String
 formHeader =
-    header3 ++ " text-xl mb-4 font-medium tracking-wide border-b dark:border-bluegray-300 border-gray-800"
+    header3 ++ " text-xl mb-4 font-medium tracking-wide border-b dark:border-slate-300 border-gray-800"
 
 
 editLinkTableCellStyle : String
@@ -362,22 +362,22 @@ editLinkTableCellStyle =
 
 dimmer : String
 dimmer =
-    " absolute top-0 left-0 w-full h-full bg-black bg-opacity-90 dark:bg-bluegray-900 dark:bg-opacity-90 z-50 flex flex-col items-center justify-center px-4 md:px-8 py-2 "
+    " absolute top-0 left-0 w-full h-full bg-black bg-opacity-90 dark:bg-slate-900 dark:bg-opacity-90 z-50 flex flex-col items-center justify-center px-4 md:px-8 py-2 "
 
 
 dimmerLight : String
 dimmerLight =
-    " absolute top-0 left-0 w-full h-full bg-black bg-opacity-60 dark:bg-bluegray-900 dark:bg-opacity-60 z-30 flex flex-col items-center justify-center px-4 py-2 "
+    " absolute top-0 left-0 w-full h-full bg-black bg-opacity-60 dark:bg-slate-900 dark:bg-opacity-60 z-30 flex flex-col items-center justify-center px-4 py-2 "
 
 
 dimmerCard : String
 dimmerCard =
-    " absolute top-0 left-0 w-full h-full bg-black bg-opacity-60 dark:bg-lightblue-900 dark:bg-opacity-60 z-30 flex flex-col items-center justify-center px-4 py-2 "
+    " absolute top-0 left-0 w-full h-full bg-black bg-opacity-60 dark:bg-sky-900 dark:bg-opacity-60 z-30 flex flex-col items-center justify-center px-4 py-2 "
 
 
 dimmerRow : String
 dimmerRow =
-    " absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 dark:bg-lightblue-900 dark:bg-opacity-50 z-30 flex flex-row items-center px-1 py-2 "
+    " absolute top-0 left-0 w-full h-full bg-black bg-opacity-50 dark:bg-sky-900 dark:bg-opacity-50 z-30 flex flex-row items-center px-1 py-2 "
 
 
 tableMain : String
@@ -387,9 +387,9 @@ tableMain =
 
 tableRow : String
 tableRow =
-    "border-t dark:border-bluegray-600"
+    "border-t dark:border-slate-600"
 
 
 qrCode : String
 qrCode =
-    "max-w-min dark:bg-bluegray-400 bg-gray-50 mx-auto md:mx-0"
+    "max-w-min dark:bg-slate-400 bg-gray-50 mx-auto md:mx-0"
diff --git a/modules/webapp/src/main/styles/custom-components.css b/modules/webapp/src/main/styles/custom-components.css
new file mode 100644
index 0000000000..5daaf40bb6
--- /dev/null
+++ b/modules/webapp/src/main/styles/custom-components.css
@@ -0,0 +1,99 @@
+@layer components {
+  .label {
+      @apply flex flex-row items-center px-2 py-0.5 rounded border ;
+  }
+
+  .ds-item-card.current {
+      @apply shadow-lg dark:border-sky-600;
+  }
+  .ds-item-row.current {
+      @apply bg-gray-200 bg-opacity-50 dark:bg-sky-600 dark:bg-opacity-10;
+  }
+
+  .elm-datepicker--input {
+      @apply pl-10 rounded w-full placeholder-gray-400 dark:text-slate-200 dark:border-slate-500;
+  }
+  #sidebar .elm-datepicker--input {
+      @apply dark:bg-slate-700 border-gray-500 bg-blue-50;
+  }
+
+  #content .elm-datepicker--input {
+      @apply dark:bg-slate-800 border-gray-400;
+  }
+  #item-card-list .elm-datepicker--input {
+      @apply dark:bg-slate-800 border-gray-400;
+  }
+
+  .elm-datepicker--container {
+      @apply w-full;
+  }
+  .elm-datepicker--picker {
+      @apply absolute top-11 z-50 bg-white dark:bg-slate-800 w-full flex flex-col border border-gray-300 dark:border-slate-500 shadow-lg;
+  }
+  .elm-datepicker--picker-header {
+      @apply flex flex-row items-center py-2 bg-blue-50 dark:bg-slate-700;
+  }
+  .elm-datepicker--prev-container {
+      @apply flex-none px-2;
+  }
+  .elm-datepicker--prev {
+      @apply fa fa-chevron-left inline-flex block px-2 py-2 focus:outline-none hover:opacity-75;
+  }
+  .elm-datepicker--month-container {
+      @apply flex-grow px-2 flex flex-col space-y-1 items-center;
+  }
+  .elm-datepicker--next-container {
+      @apply px-2;
+  }
+  .elm-datepicker--next {
+      @apply fa fa-chevron-right inline-flex block px-2 py-2 focus:outline-none hover:opacity-75;
+  }
+  .elm-datepicker--year-menu {
+      @apply dark:text-slate-200 dark:bg-slate-600 dark:border-slate-400 rounded text-sm py-1 focus:ring focus:ring-black focus:ring-opacity-50 focus:ring-offset-0 dark:focus:ring-slate-400;
+  }
+
+  .elm-datepicker--table {
+      @apply border-collapse w-full text-lg;
+  }
+  .elm-datepicker--weekdays {
+      @apply font-semibold text-sm  border-0 border-b dark:border-slate-500;
+  }
+  .elm-datepicker--year {
+      @apply h-8;
+  }
+  .elm-datepicker--dow  {
+      @apply px-1 py-1 text-center;
+  }
+  .elm-datepicker--day {
+      @apply cursor-pointer text-center hover:underline;
+  }
+  .elm-datepicker--day.elm-datepicker--other-month {
+      @apply opacity-50;
+  }
+  .elm-datepicker--day.elm-datepicker--today {
+      @apply border-2 rounded-full border-blue-500 dark:border-sky-500 h-5/6 w-5/6 flex items-center justify-center ;
+  }
+
+
+  .markdown-preview h3,h4,h5,h6 {
+      @apply text-lg font-semibold mb-2;
+  }
+  .markdown-preview h2 {
+      @apply text-xl font-semibold mb-2;
+  }
+  .markdown-preview h1 {
+      @apply text-2xl font-semibold mb-2;
+  }
+  .markdown-preview ul {
+      @apply list-disc py-2 ml-4;
+  }
+  .markdown-preview ol {
+      @apply list-decimal py-2 ml-4;
+  }
+  .markdown-preview p {
+      @apply py-2;
+  }
+  .markdown-preview a {
+      @apply text-blue-400 hover:text-blue-500 dark:text-sky-200 dark:hover:text-sky-100 cursor-pointer;
+  }
+}
diff --git a/modules/webapp/src/main/styles/custom-utilities.css b/modules/webapp/src/main/styles/custom-utilities.css
new file mode 100644
index 0000000000..0da52b6147
--- /dev/null
+++ b/modules/webapp/src/main/styles/custom-utilities.css
@@ -0,0 +1,86 @@
+@layer utilities {
+    .disabled {
+        @apply opacity-50 cursor-not-allowed;
+    }
+    .h-screen-10 {
+        height: calc(100vh - 2.5rem);
+    }
+    .h-screen-11 {
+        height: calc(100vh - 2.75rem);
+    }
+    .h-screen-12 {
+        height: calc(100vh - 3rem);
+    }
+    .h-full-10 {
+        height: calc(100% - 2.5rem);
+    }
+    .h-full-11 {
+        height: calc(100% - 2.75rem);
+    }
+    .h-full-12 {
+        height: calc(100% - 3rem);
+    }
+    .z-35 {
+        z-index: 35;
+    }
+
+    @variants responsive {
+        .min-h-7 {
+            min-height: 1.75rem;
+        }
+
+    }
+
+    .scrollbar-none {
+        -ms-overflow-style: none;  /* IE and Edge */
+        scrollbar-width: none;  /* Firefox */
+    }
+    /* Chrome, Safari and Opera */
+    .scrollbar-none::-webkit-scrollbar {
+        display: none;
+    }
+
+    .scrollbar-thin {
+        scrollbar-width: thin;
+    }
+    .scrollbar-thin::-webkit-scrollbar {
+        width: 8px;
+    }
+
+    @variants dark {
+        .scrollbar-dark-sidebar {
+            scrollbar-color: rgba(15,23,42,0.9) rgba(15,23,42,0.3);
+        }
+        .scrollbar-light-sidebar {
+            scrollbar-color: rgba(219, 234, 254, 1.0) rgba(219, 234, 254,0.3);
+        }
+        .scrollbar-main {
+            scrollbar-color: rgba(156, 163, 175,0.9) rgba(156, 163, 175,0.3);
+        }
+
+        .scrollbar-dark-sidebar::-webkit-scrollbar {
+            background-color: rgba(15,23,42,0.3);
+        }
+        .scrollbar-dark-sidebar::-webkit-scrollbar-thumb {
+            background: rgba(15,23,42,0.9);
+        }
+
+        .scrollbar-light-sidebar::-webkit-scrollbar {
+            background-color: rgba(219, 234, 254, 0.3);
+        }
+        .scrollbar-light-sidebar::-webkit-scrollbar-thumb {
+            background: rgba(219, 234, 254, 1.0);
+        }
+
+        .scrollbar-main::-webkit-scrollbar {
+            background-color: rgba(156, 163, 175, 0.3);
+        }
+        .scrollbar-main::-webkit-scrollbar-thumb {
+            background:  rgba(156, 163, 175, 0.9);
+        }
+    }
+
+    .ds-card-search-hl strong {
+        @apply bg-lime-200 dark:bg-sky-700 italic font-bold px-1 bg-opacity-60 dark:bg-opacity-60;
+    }
+}
diff --git a/modules/webapp/src/main/styles/index.css b/modules/webapp/src/main/styles/index.css
index 2b8d217d2d..d6be45b1d1 100644
--- a/modules/webapp/src/main/styles/index.css
+++ b/modules/webapp/src/main/styles/index.css
@@ -1,196 +1,9 @@
 @import "@fortawesome/fontawesome-free/css/all";
 @import "flag-icon-css/css/flag-icon.min";
 
-/* all @import must be above this line */
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-
-@layer components {
-  .label {
-      @apply flex flex-row items-center px-2 py-0.5 rounded border ;
-  }
-
-  .ds-item-card.current {
-      @apply shadow-lg dark:border-lightblue-600;
-  }
-  .ds-item-row.current {
-      @apply bg-gray-200 bg-opacity-50 dark:bg-lightblue-600 dark:bg-opacity-10;
-  }
-
-  .elm-datepicker--input {
-      @apply pl-10 rounded w-full placeholder-gray-400 dark:text-bluegray-200 dark:border-bluegray-500;
-  }
-  #sidebar .elm-datepicker--input {
-      @apply dark:bg-bluegray-700 border-gray-500 bg-blue-50;
-  }
-
-  #content .elm-datepicker--input {
-      @apply dark:bg-bluegray-800 border-gray-400;
-  }
-  #item-card-list .elm-datepicker--input {
-      @apply dark:bg-bluegray-800 border-gray-400;
-  }
-
-  .elm-datepicker--container {
-      @apply w-full;
-  }
-  .elm-datepicker--picker {
-      @apply absolute top-11 z-50 bg-white dark:bg-bluegray-800 w-full flex flex-col border border-gray-300 dark:border-bluegray-500 shadow-lg;
-  }
-  .elm-datepicker--picker-header {
-      @apply flex flex-row items-center py-2 bg-blue-50 dark:bg-bluegray-700;
-  }
-  .elm-datepicker--prev-container {
-      @apply flex-none px-2;
-  }
-  .elm-datepicker--prev {
-      @apply fa fa-chevron-left inline-flex block px-2 py-2 focus:outline-none hover:opacity-75;
-  }
-  .elm-datepicker--month-container {
-      @apply flex-grow px-2 flex flex-col space-y-1 items-center;
-  }
-  .elm-datepicker--next-container {
-      @apply px-2;
-  }
-  .elm-datepicker--next {
-      @apply fa fa-chevron-right inline-flex block px-2 py-2 focus:outline-none hover:opacity-75;
-  }
-  .elm-datepicker--year-menu {
-      @apply dark:text-bluegray-200 dark:bg-bluegray-600 dark:border-bluegray-400 rounded text-sm py-1 focus:ring focus:ring-black focus:ring-opacity-50 focus:ring-offset-0 dark:focus:ring-bluegray-400;
-  }
-
-  .elm-datepicker--table {
-      @apply border-collapse w-full text-lg;
-  }
-  .elm-datepicker--weekdays {
-      @apply font-semibold text-sm  border-0 border-b dark:border-bluegray-500;
-  }
-  .elm-datepicker--year {
-      @apply h-8;
-  }
-  .elm-datepicker--dow  {
-      @apply px-1 py-1 text-center;
-  }
-  .elm-datepicker--day {
-      @apply cursor-pointer text-center hover:underline;
-  }
-  .elm-datepicker--day.elm-datepicker--other-month {
-      @apply opacity-50;
-  }
-  .elm-datepicker--day.elm-datepicker--today {
-      @apply border-2 rounded-full border-blue-500 dark:border-lightblue-500 h-5/6 w-5/6 flex items-center justify-center ;
-  }
-
-
-  .markdown-preview h3,h4,h5,h6 {
-      @apply text-lg font-semibold mb-2;
-  }
-  .markdown-preview h2 {
-      @apply text-xl font-semibold mb-2;
-  }
-  .markdown-preview h1 {
-      @apply text-2xl font-semibold mb-2;
-  }
-  .markdown-preview ul {
-      @apply list-disc py-2 ml-4;
-  }
-  .markdown-preview ol {
-      @apply list-decimal py-2 ml-4;
-  }
-  .markdown-preview p {
-      @apply py-2;
-  }
-  .markdown-preview a {
-      @apply text-blue-400 hover:text-blue-500 dark:text-lightblue-200 dark:hover:text-lightblue-100 cursor-pointer;
-  }
-}
-
-@layer utilities {
-    .disabled {
-        @apply opacity-50 cursor-not-allowed;
-    }
-    .h-screen-10 {
-        height: calc(100vh - 2.5rem);
-    }
-    .h-screen-11 {
-        height: calc(100vh - 2.75rem);
-    }
-    .h-screen-12 {
-        height: calc(100vh - 3rem);
-    }
-    .h-full-10 {
-        height: calc(100% - 2.5rem);
-    }
-    .h-full-11 {
-        height: calc(100% - 2.75rem);
-    }
-    .h-full-12 {
-        height: calc(100% - 3rem);
-    }
-    .z-35 {
-        z-index: 35;
-    }
-
-    @variants responsive {
-        .min-h-7 {
-            min-height: 1.75rem;
-        }
-
-    }
-
-    .scrollbar-none {
-        -ms-overflow-style: none;  /* IE and Edge */
-        scrollbar-width: none;  /* Firefox */
-    }
-    /* Chrome, Safari and Opera */
-    .scrollbar-none::-webkit-scrollbar {
-        display: none;
-    }
-
-    .scrollbar-thin {
-        scrollbar-width: thin;
-    }
-    .scrollbar-thin::-webkit-scrollbar {
-        width: 8px;
-    }
-
-    @variants dark {
-        .scrollbar-dark-sidebar {
-            scrollbar-color: rgba(15,23,42,0.9) rgba(15,23,42,0.3);
-        }
-        .scrollbar-light-sidebar {
-            scrollbar-color: rgba(219, 234, 254, 1.0) rgba(219, 234, 254,0.3);
-        }
-        .scrollbar-main {
-            scrollbar-color: rgba(156, 163, 175,0.9) rgba(156, 163, 175,0.3);
-        }
-
-        .scrollbar-dark-sidebar::-webkit-scrollbar {
-            background-color: rgba(15,23,42,0.3);
-        }
-        .scrollbar-dark-sidebar::-webkit-scrollbar-thumb {
-            background: rgba(15,23,42,0.9);
-        }
-
-        .scrollbar-light-sidebar::-webkit-scrollbar {
-            background-color: rgba(219, 234, 254, 0.3);
-        }
-        .scrollbar-light-sidebar::-webkit-scrollbar-thumb {
-            background: rgba(219, 234, 254, 1.0);
-        }
-
-        .scrollbar-main::-webkit-scrollbar {
-            background-color: rgba(156, 163, 175, 0.3);
-        }
-        .scrollbar-main::-webkit-scrollbar-thumb {
-            background:  rgba(156, 163, 175, 0.9);
-        }
-    }
-
-    .ds-card-search-hl strong {
-        @apply bg-lime-200 dark:bg-lightblue-700 italic font-bold px-1 bg-opacity-60 dark:bg-opacity-60;
-    }
-}
+@import "./custom-components.css";
+@import "./custom-utilities.css";
diff --git a/modules/webapp/src/main/webjar/docspell.js b/modules/webapp/src/main/webjar/docspell.js
index c25bbbe0eb..4b32212e76 100644
--- a/modules/webapp/src/main/webjar/docspell.js
+++ b/modules/webapp/src/main/webjar/docspell.js
@@ -31,10 +31,10 @@ elmApp.ports.internalSetUiTheme.subscribe(function(themeName) {
         var bodyClasses = body[0].classList;
         // seems that body attributes cannot be set from inside Elm.
         if (themeName && themeName.toLowerCase() === 'dark') {
-            bodyClasses.add("bg-bluegray-800");
+            bodyClasses.add("bg-slate-800");
             bodyClasses.add("dark");
         } else {
-            bodyClasses.remove("bg-bluegray-800");
+            bodyClasses.remove("bg-slate-800");
             bodyClasses.remove("dark");
         }
     }
diff --git a/modules/webapp/tailwind.config.js b/modules/webapp/tailwind.config.js
index 3578b787e0..5b8acf2606 100644
--- a/modules/webapp/tailwind.config.js
+++ b/modules/webapp/tailwind.config.js
@@ -3,26 +3,17 @@
 const colors = require('tailwindcss/colors')
 
 module.exports = {
+    darkMode: 'class', // or 'media' or 'class'
+    content: [ "./src/main/elm/**/*.elm",
+               "./src/main/styles/keep.txt",
+               "../restserver/src/main/templates/*.html"
+             ],
     variants: {
         extend: {
             backgroundOpacity: ['dark']
         }
     },
     purge: false,
-    darkMode: 'class', // or 'media' or 'class'
-    theme: {
-        extend: {
-            colors: {
-                bluegray: colors.blueGray,
-                warmgray: colors.warmGray,
-                amber: colors.amber,
-                orange: colors.orange,
-                teal: colors.teal,
-                lime: colors.lime,
-                lightblue: colors.sky
-            }
-        }
-    },
     plugins: [
         require('@tailwindcss/forms')
     ]
diff --git a/project/StylesPlugin.scala b/project/StylesPlugin.scala
index d83ff2e28c..f47b27fb57 100644
--- a/project/StylesPlugin.scala
+++ b/project/StylesPlugin.scala
@@ -96,7 +96,7 @@ object StylesPlugin extends AutoPlugin {
       Seq(
         npx,
         "postcss",
-        s"$inDir/*.css",
+        s"$inDir/index.css",
         "-o",
         target.absolutePath,
         "--env",
diff --git a/project/dev-ui-build.sh b/project/dev-ui-build.sh
index 8e1534670c..0002525f9a 100755
--- a/project/dev-ui-build.sh
+++ b/project/dev-ui-build.sh
@@ -39,6 +39,7 @@ watch_both() {
         while read pathfile; do
             if [[ "$pathfile" == *".elm" ]]; then
                 compile_js
+                compile_css
                 echo "Done."
             elif [[ "$pathfile" == *".css" ]]; then
                 compile_css
@@ -49,7 +50,8 @@ watch_both() {
 }
 
 cd "$wdir/modules/webapp"
-case "$1" in
+arg=${1:-_}
+case "$arg" in
     all)
         compile_js
         compile_css