diff --git a/CHANGELOG.md b/CHANGELOG.md
index a22f824..ae0e53c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # CHANGELOG.md
 
+## [1.1.0] - 2021-12-13
+
+- Update Tailwind 3
+- Several improvements
+
 ## [1.0.3] - 2021-12-10
 
 - Alignment issue
diff --git a/package-lock.json b/package-lock.json
index 647b777..1efbed1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,12 +5,12 @@
   "requires": true,
   "dependencies": {
     "@babel/code-frame": {
-      "version": "7.15.8",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.15.8.tgz",
-      "integrity": "sha512-2IAnmn8zbvC/jKYhq5Ki9I+DwjlrtMPUCH/CpHvqI4dNnlwHwsxoIhlc8WcYY5LSYknXQtAlFYuHfqAFCvQ4Wg==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.0.tgz",
+      "integrity": "sha512-IF4EOMEV+bfYwOmNxGzSnjR2EmQod7f1UXOpZM3l4i4o4QNwzjtJAu/HxdjHq0aYBvdqMuQEY1eg0nqW9ZPORA==",
       "dev": true,
       "requires": {
-        "@babel/highlight": "^7.14.5"
+        "@babel/highlight": "^7.16.0"
       }
     },
     "@babel/helper-validator-identifier": {
@@ -20,12 +20,12 @@
       "dev": true
     },
     "@babel/highlight": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.14.5.tgz",
-      "integrity": "sha512-qf9u2WFWVV0MppaL877j2dBtQIDgmidgjGk5VIMw3OadXvYaXn66U1BFlH2t4+t3i+8PhedppRv+i40ABzd+gg==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.16.0.tgz",
+      "integrity": "sha512-t8MH41kUQylBtu2+4IQA3atqevA2lRgqA2wyVB/YiWmsDSuylZZuXOUy9ric30hfzauEFfdsuk/eXTRrGrfd0g==",
       "dev": true,
       "requires": {
-        "@babel/helper-validator-identifier": "^7.14.5",
+        "@babel/helper-validator-identifier": "^7.15.7",
         "chalk": "^2.0.0",
         "js-tokens": "^4.0.0"
       },
@@ -114,9 +114,9 @@
       }
     },
     "@tailwindcss/forms": {
-      "version": "0.3.4",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.3.4.tgz",
-      "integrity": "sha512-vlAoBifNJUkagB+PAdW4aHMe4pKmSLroH398UPgIogBFc91D2VlHUxe4pjxQhiJl0Nfw53sHSJSQBSTQBZP3vA==",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.4.0.tgz",
+      "integrity": "sha512-DeaQBx6EgEeuZPQACvC+mKneJsD8am1uiJugjgQK1+/Vt+Ai0GpFBC2T2fqnUad71WgOxyrZPE6BG1VaI6YqfQ==",
       "requires": {
         "mini-svg-data-uri": "^1.2.3"
       }
@@ -343,12 +343,6 @@
         "picocolors": "^1.0.0"
       }
     },
-    "bytes": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
-      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
-      "dev": true
-    },
     "callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
@@ -403,16 +397,6 @@
         "readdirp": "~3.6.0"
       }
     },
-    "color": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/color/-/color-4.0.1.tgz",
-      "integrity": "sha512-rpZjOKN5O7naJxkH2Rx1sZzzBgaiWECc6BYXjeCE6kF0kcASJYbUq02u7JqIHwCb/j3NhV+QhRL2683aICeGZA==",
-      "dev": true,
-      "requires": {
-        "color-convert": "^2.0.1",
-        "color-string": "^1.6.0"
-      }
-    },
     "color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -428,22 +412,6 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
-    "color-string": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.6.0.tgz",
-      "integrity": "sha512-c/hGS+kRWJutUBEngKKmk4iH3sD59MBkoxVapS/0wgpCz2u7XsNloxknyvBhzwEs1IbV36D9PwqLPJ2DTu3vMA==",
-      "dev": true,
-      "requires": {
-        "color-name": "^1.0.0",
-        "simple-swizzle": "^0.2.2"
-      }
-    },
-    "commander": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
-      "integrity": "sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==",
-      "dev": true
-    },
     "concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -463,23 +431,6 @@
         "yaml": "^1.10.0"
       }
     },
-    "cruip-js-toolkit": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/cruip-js-toolkit/-/cruip-js-toolkit-1.1.3.tgz",
-      "integrity": "sha512-5dCXct+ChrZCefV2BafPdLrk5vzE5AXSJn2dXvdQpKq7HmJgUZ4EBoQdXOgyiNPPlZCwSetnFK8ecaD7RorGsg=="
-    },
-    "css-color-names": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
-      "integrity": "sha1-gIrcLnnPhHOAabZGyyDsJ762KeA=",
-      "dev": true
-    },
-    "css-unit-converter": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz",
-      "integrity": "sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA==",
-      "dev": true
-    },
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -533,14 +484,6 @@
       "dev": true,
       "requires": {
         "is-arrayish": "^0.2.1"
-      },
-      "dependencies": {
-        "is-arrayish": {
-          "version": "0.2.1",
-          "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-          "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
-          "dev": true
-        }
       }
     },
     "esbuild": {
@@ -608,17 +551,6 @@
       "integrity": "sha512-MHOhvvxHTfRFpF1geTK9czMIZ6xclsEor2wkIGYYq+PxcQqT7vStJqjhe6S1TenZrMZzo+wlqOufBDVepUEgPg==",
       "dev": true
     },
-    "fs-extra": {
-      "version": "10.0.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-10.0.0.tgz",
-      "integrity": "sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ==",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.2.0",
-        "jsonfile": "^6.0.1",
-        "universalify": "^2.0.0"
-      }
-    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -661,12 +593,6 @@
         "is-glob": "^4.0.1"
       }
     },
-    "graceful-fs": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.8.tgz",
-      "integrity": "sha512-qkIilPUYcNhJpd33n0GBXTB1MMPp14TxEsEs0pTrsSVucApsYzW5V+Q8Qxhik6KU3evy+qkAAowTByymK0avdg==",
-      "dev": true
-    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -682,30 +608,6 @@
       "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
       "dev": true
     },
-    "hex-color-regex": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
-      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
-      "dev": true
-    },
-    "hsl-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/hsl-regex/-/hsl-regex-1.0.0.tgz",
-      "integrity": "sha1-1JMwx4ntgZ4nakwNJy3/owsY/m4=",
-      "dev": true
-    },
-    "hsla-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/hsla-regex/-/hsla-regex-1.0.0.tgz",
-      "integrity": "sha1-wc56MWjIxmFAM6S194d/OyJfnDg=",
-      "dev": true
-    },
-    "html-tags": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz",
-      "integrity": "sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==",
-      "dev": true
-    },
     "import-cwd": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-3.0.0.tgz",
@@ -759,9 +661,9 @@
       "dev": true
     },
     "is-arrayish": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
-      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==",
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
       "dev": true
     },
     "is-binary-path": {
@@ -773,20 +675,6 @@
         "binary-extensions": "^2.0.0"
       }
     },
-    "is-color-stop": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-color-stop/-/is-color-stop-1.1.0.tgz",
-      "integrity": "sha1-z/9HGu5N1cnhWFmPvhKWe1za00U=",
-      "dev": true,
-      "requires": {
-        "css-color-names": "^0.0.4",
-        "hex-color-regex": "^1.1.0",
-        "hsl-regex": "^1.0.0",
-        "hsla-regex": "^1.0.0",
-        "rgb-regex": "^1.0.1",
-        "rgba-regex": "^1.0.0"
-      }
-    },
     "is-core-module": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.8.0.tgz",
@@ -829,38 +717,16 @@
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
       "dev": true
     },
-    "jsonfile": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
-      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.1.6",
-        "universalify": "^2.0.0"
-      }
-    },
     "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": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
-      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
-      "dev": true
-    },
-    "lodash": {
-      "version": "4.17.21",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
-    },
-    "lodash.topath": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/lodash.topath/-/lodash.topath-4.5.2.tgz",
-      "integrity": "sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=",
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
     "magic-string": {
@@ -907,12 +773,6 @@
       "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
       "dev": true
     },
-    "modern-normalize": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/modern-normalize/-/modern-normalize-1.1.0.tgz",
-      "integrity": "sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA==",
-      "dev": true
-    },
     "moment": {
       "version": "2.29.1",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
@@ -923,15 +783,6 @@
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.30.tgz",
       "integrity": "sha512-zJpuPDwOv8D2zq2WRoMe1HsfZthVewpel9CAvTfc/2mBD1uUT/agc5f7GHGWXlYkFvi1mVxe4IjvP2HNrop7nQ=="
     },
-    "node-emoji": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.11.0.tgz",
-      "integrity": "sha512-wo2DpQkQp7Sjm2A0cq+sN7EHKO6Sl0ctXeBdFZrL9T9+UywORbufTcTZxom8YqpLQt/FqNMUkOpkZrJVYSKD3A==",
-      "dev": true,
-      "requires": {
-        "lodash": "^4.17.21"
-      }
-    },
     "node-releases": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz",
@@ -1056,9 +907,9 @@
       }
     },
     "postcss-selector-parser": {
-      "version": "6.0.6",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz",
-      "integrity": "sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg==",
+      "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",
@@ -1071,24 +922,6 @@
       "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==",
       "dev": true
     },
-    "pretty-hrtime": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
-      "integrity": "sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=",
-      "dev": true
-    },
-    "purgecss": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/purgecss/-/purgecss-4.0.3.tgz",
-      "integrity": "sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw==",
-      "dev": true,
-      "requires": {
-        "commander": "^6.0.0",
-        "glob": "^7.0.0",
-        "postcss": "^8.2.1",
-        "postcss-selector-parser": "^6.0.2"
-      }
-    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -1110,24 +943,6 @@
         "picomatch": "^2.2.1"
       }
     },
-    "reduce-css-calc": {
-      "version": "2.1.8",
-      "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz",
-      "integrity": "sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg==",
-      "dev": true,
-      "requires": {
-        "css-unit-converter": "^1.1.1",
-        "postcss-value-parser": "^3.3.0"
-      },
-      "dependencies": {
-        "postcss-value-parser": {
-          "version": "3.3.1",
-          "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz",
-          "integrity": "sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==",
-          "dev": true
-        }
-      }
-    },
     "resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
@@ -1150,18 +965,6 @@
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
       "dev": true
     },
-    "rgb-regex": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/rgb-regex/-/rgb-regex-1.0.1.tgz",
-      "integrity": "sha1-wODWiC3w4jviVKR16O3UGRX+rrE=",
-      "dev": true
-    },
-    "rgba-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/rgba-regex/-/rgba-regex-1.0.0.tgz",
-      "integrity": "sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=",
-      "dev": true
-    },
     "rimraf": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
@@ -1198,15 +1001,6 @@
         "chokidar": ">=3.0.0 <4.0.0"
       }
     },
-    "simple-swizzle": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
-      "integrity": "sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=",
-      "dev": true,
-      "requires": {
-        "is-arrayish": "^0.3.1"
-      }
-    },
     "source-map": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@@ -1232,41 +1026,30 @@
       }
     },
     "tailwindcss": {
-      "version": "2.2.19",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-2.2.19.tgz",
-      "integrity": "sha512-6Ui7JSVtXadtTUo2NtkBBacobzWiQYVjYW0ZnKaP9S1ZCKQ0w7KVNz+YSDI/j7O7KCMHbOkz94ZMQhbT9pOqjw==",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.2.tgz",
+      "integrity": "sha512-i1KpjYnGYftjzdAth6jA5iMPjhxpUkk5L6DafhfnQs+KiiWaThYxmk47Weh4oFH1mZqP6MuiQNHxtoRVPOraLg==",
       "dev": true,
       "requires": {
         "arg": "^5.0.1",
-        "bytes": "^3.0.0",
         "chalk": "^4.1.2",
         "chokidar": "^3.5.2",
-        "color": "^4.0.1",
+        "color-name": "^1.1.4",
         "cosmiconfig": "^7.0.1",
         "detective": "^5.2.0",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
         "fast-glob": "^3.2.7",
-        "fs-extra": "^10.0.0",
-        "glob-parent": "^6.0.1",
-        "html-tags": "^3.1.0",
-        "is-color-stop": "^1.1.0",
-        "is-glob": "^4.0.1",
-        "lodash": "^4.17.21",
-        "lodash.topath": "^4.5.2",
-        "modern-normalize": "^1.1.0",
-        "node-emoji": "^1.11.0",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
         "normalize-path": "^3.0.0",
         "object-hash": "^2.2.0",
         "postcss-js": "^3.0.3",
         "postcss-load-config": "^3.1.0",
         "postcss-nested": "5.0.6",
         "postcss-selector-parser": "^6.0.6",
-        "postcss-value-parser": "^4.1.0",
-        "pretty-hrtime": "^1.0.3",
-        "purgecss": "^4.0.3",
+        "postcss-value-parser": "^4.2.0",
         "quick-lru": "^5.1.1",
-        "reduce-css-calc": "^2.1.8",
         "resolve": "^1.20.0",
         "tmp": "^0.2.1"
       },
@@ -1279,6 +1062,12 @@
           "requires": {
             "is-glob": "^4.0.3"
           }
+        },
+        "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
         }
       }
     },
@@ -1300,12 +1089,6 @@
         "is-number": "^7.0.0"
       }
     },
-    "universalify": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
-      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
-      "dev": true
-    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index 4688e6a..38d4083 100644
--- a/package.json
+++ b/package.json
@@ -7,10 +7,9 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@tailwindcss/forms": "^0.3.4",
+    "@tailwindcss/forms": "^0.4.0",
     "chart.js": "^3.5.1",
     "chartjs-adapter-moment": "^1.0.0",
-    "cruip-js-toolkit": "^1.1.3",
     "flatpickr": "^4.6.9",
     "moment": "^2.29.1",
     "vue": "^3.2.20",
@@ -23,7 +22,7 @@
     "autoprefixer": "^10.3.7",
     "postcss": "^8.3.9",
     "sass": "^1.43.2",
-    "tailwindcss": "^2.2.17",
+    "tailwindcss": "^3.0.2",
     "vite": "2.5.7"
   }
 }
diff --git a/src/App.vue b/src/App.vue
index 6d81924..481b47b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,19 +3,6 @@
 </template>
 
 <script>
-import { focusHandling } from 'cruip-js-toolkit'
 import './charts/ChartjsConfig';
-
-export default {
-  mounted() {
-    if (this.$router) {
-      this.$watch('$route', () => {
-        this.$nextTick(() => {
-          focusHandling('outline')
-        })
-      });
-    }    
-  }
-}
 </script>
 
diff --git a/src/charts/BarChart01.vue b/src/charts/BarChart01.vue
index 0e6234a..6ba2885 100644
--- a/src/charts/BarChart01.vue
+++ b/src/charts/BarChart01.vue
@@ -2,14 +2,14 @@
   <div class="px-5 py-3">
     <ul ref="legend" class="flex flex-wrap"></ul>
   </div>
-  <div class="flex-grow">
+  <div class="grow">
     <canvas ref="canvas" :data="data" :width="width" :height="height"></canvas>
   </div>
 </template>
 
 <script>
 import { ref, onMounted, onUnmounted } from 'vue'
-import { focusHandling } from 'cruip-js-toolkit'
+
 import {
   Chart, BarController, BarElement, LinearScale, TimeScale, Tooltip, Legend,
 } from 'chart.js'
@@ -111,7 +111,6 @@ export default {
               button.onclick = () => {
                 c.setDatasetVisibility(item.datasetIndex, !c.isDatasetVisible(item.datasetIndex))
                 c.update()
-                focusHandling('outline')
               }
               // Color box
               const box = document.createElement('span')
diff --git a/src/charts/BarChart03.vue b/src/charts/BarChart03.vue
index 097a764..fa8d337 100644
--- a/src/charts/BarChart03.vue
+++ b/src/charts/BarChart03.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-grow flex flex-col justify-center">
+  <div class="grow flex flex-col justify-center">
     <div>
       <canvas ref="canvas" :data="data" :width="width" :height="height"></canvas>
     </div>
diff --git a/src/charts/DoughnutChart.vue b/src/charts/DoughnutChart.vue
index 11e734f..3fde7bc 100644
--- a/src/charts/DoughnutChart.vue
+++ b/src/charts/DoughnutChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex-grow flex flex-col justify-center">
+  <div class="grow flex flex-col justify-center">
     <div>
       <canvas ref="canvas" :data="data" :width="width" :height="height"></canvas>
     </div>
@@ -11,7 +11,6 @@
 
 <script>
 import { ref, onMounted, onUnmounted } from 'vue'
-import { focusHandling } from 'cruip-js-toolkit'
 import {
   Chart, DoughnutController, ArcElement, TimeScale, Tooltip,
 } from 'chart.js'
@@ -82,7 +81,6 @@ export default {
               button.onclick = () => {
                 c.toggleDataVisibility(item.index, !item.index)
                 c.update()
-                focusHandling('outline')
               }
               // Color box
               const box = document.createElement('span')
diff --git a/src/charts/LineChart02.vue b/src/charts/LineChart02.vue
index 381d454..62b66d8 100644
--- a/src/charts/LineChart02.vue
+++ b/src/charts/LineChart02.vue
@@ -5,20 +5,19 @@
         <div class="text-3xl font-bold text-gray-800 mr-2">$1,482</div>
         <div class="text-sm font-semibold text-white px-1.5 bg-yellow-500 rounded-full">-22%</div>
       </div>
-      <div class="flex-grow ml-2 mb-1">
+      <div class="grow ml-2 mb-1">
         <ul ref="legend" class="flex flex-wrap justify-end"></ul>
       </div>
     </div>
   </div>
   <!-- Chart built with Chart.js 3 -->
-  <div class="flex-grow">
+  <div class="grow">
     <canvas ref="canvas" :data="data" :width="width" :height="height"></canvas>
   </div>  
 </template>
 
 <script>
 import { ref, onMounted, onUnmounted } from 'vue'
-import { focusHandling } from 'cruip-js-toolkit'
 import {
   Chart, LineController, LineElement, Filler, PointElement, LinearScale, TimeScale, Tooltip,
 } from 'chart.js'
@@ -117,7 +116,6 @@ export default {
               button.onclick = () => {
                 c.setDatasetVisibility(item.datasetIndex, !c.isDatasetVisible(item.datasetIndex))
                 c.update()
-                focusHandling('outline')
               }
               // Color box
               const box = document.createElement('span')
diff --git a/src/charts/RealtimeChart.vue b/src/charts/RealtimeChart.vue
index 72b0999..d0f897a 100644
--- a/src/charts/RealtimeChart.vue
+++ b/src/charts/RealtimeChart.vue
@@ -5,7 +5,7 @@
       <div ref="chartDeviation" class="text-sm font-semibold text-white px-1.5 rounded-full"></div>
     </div>
   </div>
-  <div class="flex-grow">
+  <div class="grow">
     <canvas ref="canvas" :data="data" :width="width" :height="height"></canvas>
   </div>
 </template>
diff --git a/src/components/DropdownHelp.vue b/src/components/DropdownHelp.vue
index cb5489e..5ad374c 100644
--- a/src/components/DropdownHelp.vue
+++ b/src/components/DropdownHelp.vue
@@ -30,7 +30,7 @@
         >
           <li>
             <router-link class="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3" to="#0" @click="dropdownOpen = false">
-              <svg class="w-3 h-3 fill-current text-indigo-300 flex-shrink-0 mr-2" viewBox="0 0 12 12">
+              <svg class="w-3 h-3 fill-current text-indigo-300 shrink-0 mr-2" viewBox="0 0 12 12">
                 <rect y="3" width="12" height="9" rx="1" />
                 <path d="M2 0h8v2H2z" />
               </svg>
@@ -39,7 +39,7 @@
           </li>
           <li>
             <router-link class="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3" to="#0" @click="dropdownOpen = false">
-              <svg class="w-3 h-3 fill-current text-indigo-300 flex-shrink-0 mr-2" viewBox="0 0 12 12">
+              <svg class="w-3 h-3 fill-current text-indigo-300 shrink-0 mr-2" viewBox="0 0 12 12">
                 <path d="M10.5 0h-9A1.5 1.5 0 000 1.5v9A1.5 1.5 0 001.5 12h9a1.5 1.5 0 001.5-1.5v-9A1.5 1.5 0 0010.5 0zM10 7L8.207 5.207l-3 3-1.414-1.414 3-3L5 2h5v5z" />
               </svg>
               <span>Support Site</span>
@@ -47,7 +47,7 @@
           </li>
           <li>
             <router-link class="font-medium text-sm text-indigo-500 hover:text-indigo-600 flex items-center py-1 px-3" to="#0" @click="dropdownOpen = false">
-              <svg class="w-3 h-3 fill-current text-indigo-300 flex-shrink-0 mr-2" viewBox="0 0 12 12">
+              <svg class="w-3 h-3 fill-current text-indigo-300 shrink-0 mr-2" viewBox="0 0 12 12">
                 <path d="M11.854.146a.5.5 0 00-.525-.116l-11 4a.5.5 0 00-.015.934l4.8 1.921 1.921 4.8A.5.5 0 007.5 12h.008a.5.5 0 00.462-.329l4-11a.5.5 0 00-.116-.525z" />
               </svg>
               <span>Contact us</span>
diff --git a/src/components/DropdownProfile.vue b/src/components/DropdownProfile.vue
index 25bf379..9974fa1 100644
--- a/src/components/DropdownProfile.vue
+++ b/src/components/DropdownProfile.vue
@@ -10,7 +10,7 @@
       <img class="w-8 h-8 rounded-full" :src="UserAvatar" width="32" height="32" alt="User" />
       <div class="flex items-center truncate">
         <span class="truncate ml-2 text-sm font-medium group-hover:text-gray-800">Acme Inc.</span>
-        <svg class="w-3 h-3 flex-shrink-0 ml-1 fill-current text-gray-400" viewBox="0 0 12 12">
+        <svg class="w-3 h-3 shrink-0 ml-1 fill-current text-gray-400" viewBox="0 0 12 12">
           <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
         </svg>
       </div>
diff --git a/src/components/ModalSearch.vue b/src/components/ModalSearch.vue
index 1264171..7dba691 100644
--- a/src/components/ModalSearch.vue
+++ b/src/components/ModalSearch.vue
@@ -27,7 +27,7 @@
             <label :for="searchId" class="sr-only">Search</label>
             <input :id="searchId" class="w-full border-0 focus:ring-transparent placeholder-gray-400 appearance-none py-3 pl-10 pr-4" type="search" placeholder="Search Anything…" ref="searchInput" />
             <button class="absolute inset-0 right-auto group" type="submit" aria-label="Search">
-              <svg class="w-4 h-4 flex-shrink-0 fill-current text-gray-400 group-hover:text-gray-500 ml-4 mr-2" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+              <svg class="w-4 h-4 shrink-0 fill-current text-gray-400 group-hover:text-gray-500 ml-4 mr-2" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
                 <path d="M7 14c-3.86 0-7-3.14-7-7s3.14-7 7-7 7 3.14 7 7-3.14 7-7 7zM7 2C4.243 2 2 4.243 2 7s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5z" />
                 <path d="M15.707 14.293L13.314 11.9a8.019 8.019 0 01-1.414 1.414l2.393 2.393a.997.997 0 001.414 0 .999.999 0 000-1.414z" />
               </svg>
@@ -41,7 +41,7 @@
             <ul class="text-sm">
               <li>
                 <router-link class="flex items-center p-2 text-gray-800 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')">
-                  <svg class="w-4 h-4 fill-current text-gray-400 group-hover:text-white group-hover:text-opacity-50 flex-shrink-0 mr-3" viewBox="0 0 16 16">
+                  <svg class="w-4 h-4 fill-current text-gray-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
                     <path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
                   </svg>
                   <span>Form Builder - 23 hours on-demand video</span>
@@ -49,7 +49,7 @@
               </li>
               <li>
                 <router-link class="flex items-center p-2 text-gray-800 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')">
-                  <svg class="w-4 h-4 fill-current text-gray-400 group-hover:text-white group-hover:text-opacity-50 flex-shrink-0 mr-3" viewBox="0 0 16 16">
+                  <svg class="w-4 h-4 fill-current text-gray-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
                     <path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
                   </svg>
                   <span>Access Mosaic on mobile and TV</span>
@@ -57,7 +57,7 @@
               </li>
               <li>
                 <router-link class="flex items-center p-2 text-gray-800 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')">
-                  <svg class="w-4 h-4 fill-current text-gray-400 group-hover:text-white group-hover:text-opacity-50 flex-shrink-0 mr-3" viewBox="0 0 16 16">
+                  <svg class="w-4 h-4 fill-current text-gray-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
                     <path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
                   </svg>
                   <span>Product Update - Q4 2021</span>
@@ -65,7 +65,7 @@
               </li>
               <li>
                 <router-link class="flex items-center p-2 text-gray-800 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')">
-                  <svg class="w-4 h-4 fill-current text-gray-400 group-hover:text-white group-hover:text-opacity-50 flex-shrink-0 mr-3" viewBox="0 0 16 16">
+                  <svg class="w-4 h-4 fill-current text-gray-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
                     <path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
                   </svg>
                   <span>Master Digital Marketing Strategy course</span>
@@ -73,7 +73,7 @@
               </li>
               <li>
                 <router-link class="flex items-center p-2 text-gray-800 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')">
-                  <svg class="w-4 h-4 fill-current text-gray-400 group-hover:text-white group-hover:text-opacity-50 flex-shrink-0 mr-3" viewBox="0 0 16 16">
+                  <svg class="w-4 h-4 fill-current text-gray-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
                     <path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
                   </svg>
                   <span>Dedicated forms for products</span>
@@ -81,7 +81,7 @@
               </li>
               <li>
                 <router-link class="flex items-center p-2 text-gray-800 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')">
-                  <svg class="w-4 h-4 fill-current text-gray-400 group-hover:text-white group-hover:text-opacity-50 flex-shrink-0 mr-3" viewBox="0 0 16 16">
+                  <svg class="w-4 h-4 fill-current text-gray-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
                     <path d="M15.707 14.293v.001a1 1 0 01-1.414 1.414L11.185 12.6A6.935 6.935 0 017 14a7.016 7.016 0 01-5.173-2.308l-1.537 1.3L0 8l4.873 1.12-1.521 1.285a4.971 4.971 0 008.59-2.835l1.979.454a6.971 6.971 0 01-1.321 3.157l3.107 3.112zM14 6L9.127 4.88l1.521-1.28a4.971 4.971 0 00-8.59 2.83L.084 5.976a6.977 6.977 0 0112.089-3.668l1.537-1.3L14 6z" />
                   </svg>
                   <span>Product Update - Q4 2021</span>
@@ -95,7 +95,7 @@
             <ul class="text-sm">
               <li>
                 <router-link class="flex items-center p-2 text-gray-800 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')">
-                  <svg class="w-4 h-4 fill-current text-gray-400 group-hover:text-white group-hover:text-opacity-50 flex-shrink-0 mr-3" viewBox="0 0 16 16">
+                  <svg class="w-4 h-4 fill-current text-gray-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
                     <path d="M14 0H2c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1zM3 2h10v8H9v4H3V2z" />
                   </svg>
                   <span><span class="font-medium text-gray-800 group-hover:text-white">Messages</span> - Conversation / … / Mike Mills</span>
@@ -103,7 +103,7 @@
               </li>
               <li>
                 <router-link class="flex items-center p-2 text-gray-800 hover:text-white hover:bg-indigo-500 rounded group" to="#0" @click="$emit('close-modal')">
-                  <svg class="w-4 h-4 fill-current text-gray-400 group-hover:text-white group-hover:text-opacity-50 flex-shrink-0 mr-3" viewBox="0 0 16 16">
+                  <svg class="w-4 h-4 fill-current text-gray-400 group-hover:text-white group-hover:text-opacity-50 shrink-0 mr-3" viewBox="0 0 16 16">
                     <path d="M14 0H2c-.6 0-1 .4-1 1v14c0 .6.4 1 1 1h8l5-5V1c0-.6-.4-1-1-1zM3 2h10v8H9v4H3V2z" />
                   </svg>
                   <span><span class="font-medium text-gray-800 group-hover:text-white">Messages</span> - Conversation / … / Eva Patrick</span>
diff --git a/src/css/additional-styles/theme.scss b/src/css/additional-styles/theme.scss
index 41412c6..6299955 100644
--- a/src/css/additional-styles/theme.scss
+++ b/src/css/additional-styles/theme.scss
@@ -1,16 +1,3 @@
-:focus,
-button:focus,
-.btn:focus,
-.btn-sm:focus,
-.form-input:focus,
-.form-textarea:focus,
-.form-multiselect:focus,
-.form-select:focus,
-.form-checkbox:focus,
-.form-radio:focus {
-    @apply outline-blue;
-}
-
 .form-input,
 .form-textarea,
 .form-multiselect,
@@ -19,6 +6,7 @@ button:focus,
 .form-radio {
 
     &:focus {
-        box-shadow: none !important;
+        @apply ring-0;
     }
 }
+
diff --git a/src/css/tailwind.config.js b/src/css/tailwind.config.js
index d5fd8c8..1359203 100644
--- a/src/css/tailwind.config.js
+++ b/src/css/tailwind.config.js
@@ -2,8 +2,7 @@ const colors = require('tailwindcss/colors');
 const plugin = require('tailwindcss/plugin');
 
 module.exports = {
-  mode: 'jit',
-  purge: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
   theme: {
     extend: {
       boxShadow: {
@@ -13,7 +12,7 @@ module.exports = {
         xl: '0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.01)',
       },
       colors: {
-        gray: colors.blueGray,
+        gray: colors.slate,
         'light-blue': colors.sky,
         red: colors.rose,
       },
diff --git a/src/pages/Dashboard.vue b/src/pages/Dashboard.vue
index 30e26a3..270a4fe 100644
--- a/src/pages/Dashboard.vue
+++ b/src/pages/Dashboard.vue
@@ -31,7 +31,7 @@
               <Datepicker align="right" />
               <!-- Add view button -->
               <button class="btn bg-indigo-500 hover:bg-indigo-600 text-white">
-                  <svg class="w-4 h-4 fill-current opacity-50 flex-shrink-0" viewBox="0 0 16 16">
+                  <svg class="w-4 h-4 fill-current opacity-50 shrink-0" viewBox="0 0 16 16">
                       <path d="M15 7H9V1c0-.6-.4-1-1-1S7 .4 7 1v6H1c-.6 0-1 .4-1 1s.4 1 1 1h6v6c0 .6.4 1 1 1s1-.4 1-1V9h6c.6 0 1-.4 1-1s-.4-1-1-1z" />
                   </svg>
                   <span class="hidden xs:block ml-2">Add view</span>
diff --git a/src/partials/Banner.vue b/src/partials/Banner.vue
index c0bbe34..5bf8110 100644
--- a/src/partials/Banner.vue
+++ b/src/partials/Banner.vue
@@ -4,7 +4,7 @@
       <div>👉 <a class="hover:underline" href="https://github.com/cruip/vuejs-admin-dashboard-template" target="_blank" rel="noreferrer">Download Mosaic Lite on GitHub</a></div>
       <button class="text-gray-500 hover:text-gray-400 ml-5" @click="open = false">
         <span class="sr-only">Close</span>
-        <svg class="w-4 h-4 flex-shrink-0 fill-current" viewBox="0 0 16 16">
+        <svg class="w-4 h-4 shrink-0 fill-current" viewBox="0 0 16 16">
           <path d="M12.72 3.293a1 1 0 00-1.415 0L8.012 6.586 4.72 3.293a1 1 0 00-1.414 1.414L6.598 8l-3.293 3.293a1 1 0 101.414 1.414l3.293-3.293 3.293 3.293a1 1 0 001.414-1.414L9.426 8l3.293-3.293a1 1 0 000-1.414z" />
         </svg>
       </button>
diff --git a/src/partials/Sidebar.vue b/src/partials/Sidebar.vue
index 48584da..c930cf7 100644
--- a/src/partials/Sidebar.vue
+++ b/src/partials/Sidebar.vue
@@ -7,7 +7,7 @@
     <div
       id="sidebar"
       ref="sidebar"
-      class="flex flex-col absolute z-40 left-0 top-0 lg:static lg:left-auto lg:top-auto lg:translate-x-0 transform h-screen overflow-y-scroll lg:overflow-y-auto no-scrollbar w-64 lg:w-20 lg:sidebar-expanded:!w-64 2xl:!w-64 flex-shrink-0 bg-gray-800 p-4 transition-all duration-200 ease-in-out"
+      class="flex flex-col absolute z-40 left-0 top-0 lg:static lg:left-auto lg:top-auto lg:translate-x-0 transform h-screen overflow-y-scroll lg:overflow-y-auto no-scrollbar w-64 lg:w-20 lg:sidebar-expanded:!w-64 2xl:!w-64 shrink-0 bg-gray-800 p-4 transition-all duration-200 ease-in-out"
       :class="sidebarOpen ? 'translate-x-0' : '-translate-x-64'"
     >
 
@@ -61,7 +61,7 @@
               <li class="px-3 py-2 rounded-sm mb-0.5 last:mb-0" :class="isExactActive && 'bg-gray-900'">
                 <a class="block text-gray-200 hover:text-white truncate transition duration-150" :class="isExactActive && 'hover:text-gray-200'" :href="href" @click="navigate">
                   <div class="flex items-center">
-                    <svg class="flex-shrink-0 h-6 w-6" viewBox="0 0 24 24">
+                    <svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24">
                       <path class="fill-current text-gray-400" :class="isExactActive && '!text-indigo-500'" d="M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12 12-5.383 12-12S18.617 0 12 0z" />
                       <path class="fill-current text-gray-600" :class="isExactActive && 'text-indigo-600'" d="M12 3c-4.963 0-9 4.037-9 9s4.037 9 9 9 9-4.037 9-9-4.037-9-9-9z" />
                       <path class="fill-current text-gray-400" :class="isExactActive && 'text-indigo-200'" d="M12 15c-1.654 0-3-1.346-3-3 0-.462.113-.894.3-1.285L6 6l4.714 3.301A2.973 2.973 0 0112 9c1.654 0 3 1.346 3 3s-1.346 3-3 3z" />
@@ -76,7 +76,7 @@
               <li class="px-3 py-2 rounded-sm mb-0.5 last:mb-0">
                 <a class="block text-gray-200 hover:text-white truncate transition duration-150" :href="href" @click="navigate">
                   <div class="flex items-center">
-                    <svg class="flex-shrink-0 h-6 w-6" viewBox="0 0 24 24">
+                    <svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24">
                       <path class="fill-current text-gray-600" d="M0 20h24v2H0z" />
                       <path class="fill-current text-gray-400" d="M4 18h2a1 1 0 001-1V8a1 1 0 00-1-1H4a1 1 0 00-1 1v9a1 1 0 001 1zM11 18h2a1 1 0 001-1V3a1 1 0 00-1-1h-2a1 1 0 00-1 1v14a1 1 0 001 1zM17 12v5a1 1 0 001 1h2a1 1 0 001-1v-5a1 1 0 00-1-1h-2a1 1 0 00-1 1z" />                    
                     </svg>
@@ -90,7 +90,7 @@
               <a class="block text-gray-200 hover:text-white truncate transition duration-150" :class="currentRoute.fullPath.includes('ecommerce') && 'hover:text-gray-200'" href="#0" @click.prevent="sidebarExpanded ? parentLink.handleClick() : sidebarExpanded = true">
                 <div class="flex items-center justify-between">
                   <div class="flex items-center">
-                    <svg class="flex-shrink-0 h-6 w-6" viewBox="0 0 24 24">
+                    <svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24">
                       <path class="fill-current text-gray-400" :class="currentRoute.fullPath.includes('ecommerce') && 'text-indigo-300'" d="M13 15l11-7L11.504.136a1 1 0 00-1.019.007L0 7l13 8z" />
                       <path class="fill-current text-gray-700" :class="currentRoute.fullPath.includes('ecommerce') && '!text-indigo-600'" d="M13 15L0 7v9c0 .355.189.685.496.864L13 24v-9z" />
                       <path class="fill-current text-gray-600" :class="currentRoute.fullPath.includes('ecommerce') && 'text-indigo-500'" d="M13 15.047V24l10.573-7.181A.999.999 0 0024 16V8l-11 7.047z" />                    
@@ -98,8 +98,8 @@
                     <span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">E-Commerce </span>
                   </div>
                   <!-- Icon -->
-                  <div class="flex flex-shrink-0 ml-2">
-                    <svg class="w-3 h-3 flex-shrink-0 ml-1 fill-current text-gray-400" :class="parentLink.expanded && 'transform rotate-180'" viewBox="0 0 12 12">
+                  <div class="flex shrink-0 ml-2">
+                    <svg class="w-3 h-3 shrink-0 ml-1 fill-current text-gray-400" :class="parentLink.expanded && 'transform rotate-180'" viewBox="0 0 12 12">
                       <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
                     </svg>
                   </div>
@@ -178,7 +178,7 @@
               <li class="px-3 py-2 rounded-sm mb-0.5 last:mb-0">
                 <a class="block text-gray-200 hover:text-white truncate transition duration-150" :href="href" @click="navigate">
                   <div class="flex items-center">
-                    <svg class="flex-shrink-0 h-6 w-6" viewBox="0 0 24 24">
+                    <svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24">
                       <path class="fill-current text-gray-600" d="M20 7a.75.75 0 01-.75-.75 1.5 1.5 0 00-1.5-1.5.75.75 0 110-1.5 1.5 1.5 0 001.5-1.5.75.75 0 111.5 0 1.5 1.5 0 001.5 1.5.75.75 0 110 1.5 1.5 1.5 0 00-1.5 1.5A.75.75 0 0120 7zM4 23a.75.75 0 01-.75-.75 1.5 1.5 0 00-1.5-1.5.75.75 0 110-1.5 1.5 1.5 0 001.5-1.5.75.75 0 111.5 0 1.5 1.5 0 001.5 1.5.75.75 0 110 1.5 1.5 1.5 0 00-1.5 1.5A.75.75 0 014 23z" />
                       <path class="fill-current text-gray-400" d="M17 23a1 1 0 01-1-1 4 4 0 00-4-4 1 1 0 010-2 4 4 0 004-4 1 1 0 012 0 4 4 0 004 4 1 1 0 010 2 4 4 0 00-4 4 1 1 0 01-1 1zM7 13a1 1 0 01-1-1 4 4 0 00-4-4 1 1 0 110-2 4 4 0 004-4 1 1 0 112 0 4 4 0 004 4 1 1 0 010 2 4 4 0 00-4 4 1 1 0 01-1 1z" />                    
                     </svg>
@@ -192,15 +192,15 @@
               <a class="block text-gray-200 hover:text-white truncate transition duration-150" :class="currentRoute.fullPath.includes('team') && 'hover:text-gray-200'" href="#0" @click.prevent="sidebarExpanded ? parentLink.handleClick() : sidebarExpanded = true">
                 <div class="flex items-center justify-between">
                   <div class="flex items-center">
-                    <svg class="flex-shrink-0 h-6 w-6" viewBox="0 0 24 24">
+                    <svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24">
                       <path class="fill-current text-gray-600" :class="currentRoute.fullPath.includes('team') && 'text-indigo-500'" d="M18.974 8H22a2 2 0 012 2v6h-2v5a1 1 0 01-1 1h-2a1 1 0 01-1-1v-5h-2v-6a2 2 0 012-2h.974zM20 7a2 2 0 11-.001-3.999A2 2 0 0120 7zM2.974 8H6a2 2 0 012 2v6H6v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5H0v-6a2 2 0 012-2h.974zM4 7a2 2 0 11-.001-3.999A2 2 0 014 7z" />
                       <path class="fill-current text-gray-400" :class="currentRoute.fullPath.includes('team') && 'text-indigo-300'" d="M12 6a3 3 0 110-6 3 3 0 010 6zm2 18h-4a1 1 0 01-1-1v-6H6v-6a3 3 0 013-3h6a3 3 0 013 3v6h-3v6a1 1 0 01-1 1z" />
                     </svg>
                     <span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Team</span>
                   </div>
                   <!-- Icon -->
-                  <div class="flex flex-shrink-0 ml-2">
-                    <svg class="w-3 h-3 flex-shrink-0 ml-1 fill-current text-gray-400" :class="parentLink.expanded && 'transform rotate-180'" viewBox="0 0 12 12">
+                  <div class="flex shrink-0 ml-2">
+                    <svg class="w-3 h-3 shrink-0 ml-1 fill-current text-gray-400" :class="parentLink.expanded && 'transform rotate-180'" viewBox="0 0 12 12">
                       <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
                     </svg>
                   </div>
@@ -237,7 +237,7 @@
               <li class="px-3 py-2 rounded-sm mb-0.5 last:mb-0">
                 <a class="block text-gray-200 hover:text-white truncate transition duration-150" :href="href" @click="navigate">
                   <div class="flex items-center">
-                    <svg class="flex-shrink-0 h-6 w-6" viewBox="0 0 24 24">
+                    <svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24">
                       <path class="fill-current text-gray-600" d="M14.5 7c4.695 0 8.5 3.184 8.5 7.111 0 1.597-.638 3.067-1.7 4.253V23l-4.108-2.148a10 10 0 01-2.692.37c-4.695 0-8.5-3.184-8.5-7.11C6 10.183 9.805 7 14.5 7z" />
                       <path class="fill-current text-gray-400" d="M11 1C5.477 1 1 4.582 1 9c0 1.797.75 3.45 2 4.785V19l4.833-2.416C8.829 16.85 9.892 17 11 17c5.523 0 10-3.582 10-8s-4.477-8-10-8z" />
                     </svg>
@@ -251,7 +251,7 @@
               <li class="px-3 py-2 rounded-sm mb-0.5 last:mb-0">
                 <a class="block text-gray-200 hover:text-white truncate transition duration-150" :href="href" @click="navigate">
                   <div class="flex items-center">
-                    <svg class="flex-shrink-0 h-6 w-6" viewBox="0 0 24 24">
+                    <svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24">
                       <path class="fill-current text-gray-600" d="M8 1v2H3v19h18V3h-5V1h7v23H1V1z" />
                       <path class="fill-current text-gray-600" d="M1 1h22v23H1z" />
                       <path class="fill-current text-gray-400" d="M15 10.586L16.414 12 11 17.414 7.586 14 9 12.586l2 2zM5 0h14v4H5z" />
@@ -266,7 +266,7 @@
               <li class="px-3 py-2 rounded-sm mb-0.5 last:mb-0">
                 <a class="block text-gray-200 hover:text-white truncate transition duration-150" :href="href" @click="navigate">
                   <div class="flex items-center">
-                    <svg class="flex-shrink-0 h-6 w-6" viewBox="0 0 24 24">
+                    <svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24">
                       <path class="fill-current text-gray-600" d="M16 13v4H8v-4H0l3-9h18l3 9h-8Z" />
                       <path class="fill-current text-gray-400" d="m23.72 12 .229.686A.984.984 0 0 1 24 13v8a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-8c0-.107.017-.213.051-.314L.28 12H8v4h8v-4H23.72ZM13 0v7h3l-4 5-4-5h3V0h2Z" />
                     </svg>
@@ -280,7 +280,7 @@
               <li class="px-3 py-2 rounded-sm mb-0.5 last:mb-0">
                 <a class="block text-gray-200 hover:text-white truncate transition duration-150" :href="href" @click="navigate">
                   <div class="flex items-center">
-                    <svg class="flex-shrink-0 h-6 w-6" viewBox="0 0 24 24">
+                    <svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24">
                       <path class="fill-current text-gray-600" d="M1 3h22v20H1z" />
                       <path class="fill-current text-gray-400" d="M21 3h2v4H1V3h2V1h4v2h10V1h4v2Z" />
                     </svg>
@@ -294,7 +294,7 @@
               <a class="block text-gray-200 hover:text-white truncate transition duration-150" :class="currentRoute.fullPath.includes('settings') && 'hover:text-gray-200'" href="#0" @click.prevent="sidebarExpanded ? parentLink.handleClick() : sidebarExpanded = true">            
                 <div class="flex items-center justify-between">
                   <div class="flex items-center">
-                    <svg class="flex-shrink-0 h-6 w-6" viewBox="0 0 24 24">
+                    <svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24">
                       <path class="fill-current text-gray-600" :class="currentRoute.fullPath.includes('settings') && 'text-indigo-500'" d="M19.714 14.7l-7.007 7.007-1.414-1.414 7.007-7.007c-.195-.4-.298-.84-.3-1.286a3 3 0 113 3 2.969 2.969 0 01-1.286-.3z" />
                       <path class="fill-current text-gray-400" :class="currentRoute.fullPath.includes('settings') && 'text-indigo-300'" d="M10.714 18.3c.4-.195.84-.298 1.286-.3a3 3 0 11-3 3c.002-.446.105-.885.3-1.286l-6.007-6.007 1.414-1.414 6.007 6.007z" />
                       <path class="fill-current text-gray-600" :class="currentRoute.fullPath.includes('settings') && 'text-indigo-500'" d="M5.7 10.714c.195.4.298.84.3 1.286a3 3 0 11-3-3c.446.002.885.105 1.286.3l7.007-7.007 1.414 1.414L5.7 10.714z" />
@@ -303,8 +303,8 @@
                     <span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Settings</span>
                   </div>
                   <!-- Icon -->
-                  <div class="flex flex-shrink-0 ml-2">
-                    <svg class="w-3 h-3 flex-shrink-0 ml-1 fill-current text-gray-400" :class="parentLink.expanded && 'transform rotate-180'" viewBox="0 0 12 12">
+                  <div class="flex shrink-0 ml-2">
+                    <svg class="w-3 h-3 shrink-0 ml-1 fill-current text-gray-400" :class="parentLink.expanded && 'transform rotate-180'" viewBox="0 0 12 12">
                       <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
                     </svg>
                   </div>
@@ -362,7 +362,7 @@
               <a class="block text-gray-200 hover:text-white truncate transition duration-150" :class="currentRoute.fullPath.includes('utility') && 'hover:text-gray-200'" href="#0" @click.prevent="sidebarExpanded ? parentLink.handleClick() : sidebarExpanded = true">
                 <div class="flex items-center justify-between">
                   <div class="flex items-center">
-                    <svg class="flex-shrink-0 h-6 w-6" viewBox="0 0 24 24">
+                    <svg class="shrink-0 h-6 w-6" viewBox="0 0 24 24">
                       <circle class="fill-current text-gray-400" :class="currentRoute.fullPath.includes('utility') && 'text-indigo-300'" cx="18.5" cy="5.5" r="4.5" />
                       <circle class="fill-current text-gray-600" :class="currentRoute.fullPath.includes('utility') && 'text-indigo-500'" cx="5.5" cy="5.5" r="4.5" />
                       <circle class="fill-current text-gray-600" :class="currentRoute.fullPath.includes('utility') && 'text-indigo-500'" cx="18.5" cy="18.5" r="4.5" />
@@ -371,8 +371,8 @@
                     <span class="text-sm font-medium ml-3 lg:opacity-0 lg:sidebar-expanded:opacity-100 2xl:opacity-100 duration-200">Utility</span>
                   </div>
                   <!-- Icon -->
-                  <div class="flex flex-shrink-0 ml-2">
-                    <svg class="w-3 h-3 flex-shrink-0 ml-1 fill-current text-gray-400" :class="parentLink.expanded && 'transform rotate-180'" viewBox="0 0 12 12">
+                  <div class="flex shrink-0 ml-2">
+                    <svg class="w-3 h-3 shrink-0 ml-1 fill-current text-gray-400" :class="parentLink.expanded && 'transform rotate-180'" viewBox="0 0 12 12">
                       <path d="M5.9 11.4L.5 6l1.4-1.4 4 4 4-4L11.3 6z" />
                     </svg>
                   </div>
diff --git a/src/partials/dashboard/DashboardCard01.vue b/src/partials/dashboard/DashboardCard01.vue
index 03aeff5..1bd0d37 100644
--- a/src/partials/dashboard/DashboardCard01.vue
+++ b/src/partials/dashboard/DashboardCard01.vue
@@ -24,7 +24,7 @@
       </div>
     </div>
     <!-- Chart built with Chart.js 3 -->
-    <div class="flex-grow">
+    <div class="grow">
       <!-- Change the height attribute to adjust the chart height -->
       <LineChart :data="chartData" width="389" height="128" />
     </div>
diff --git a/src/partials/dashboard/DashboardCard02.vue b/src/partials/dashboard/DashboardCard02.vue
index 1b8ee00..f2acbf6 100644
--- a/src/partials/dashboard/DashboardCard02.vue
+++ b/src/partials/dashboard/DashboardCard02.vue
@@ -24,7 +24,7 @@
       </div>
     </div>
     <!-- Chart built with Chart.js 3 -->
-    <div class="flex-grow">
+    <div class="grow">
       <!-- Change the height attribute to adjust the chart height -->
       <LineChart :data="chartData" width="389" height="128" />
     </div>
diff --git a/src/partials/dashboard/DashboardCard03.vue b/src/partials/dashboard/DashboardCard03.vue
index ac6526b..9e959da 100644
--- a/src/partials/dashboard/DashboardCard03.vue
+++ b/src/partials/dashboard/DashboardCard03.vue
@@ -24,7 +24,7 @@
       </div>
     </div>
     <!-- Chart built with Chart.js 3 -->
-    <div class="flex-grow">
+    <div class="grow">
       <!-- Change the height attribute to adjust the chart height -->
       <LineChart :data="chartData" width="389" height="128" />
     </div>
diff --git a/src/partials/dashboard/DashboardCard07.vue b/src/partials/dashboard/DashboardCard07.vue
index 8538edb..2bfea38 100644
--- a/src/partials/dashboard/DashboardCard07.vue
+++ b/src/partials/dashboard/DashboardCard07.vue
@@ -34,7 +34,7 @@
             <tr>
               <td class="p-2">
                 <div class="flex items-center">
-                  <svg class="flex-shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
+                  <svg class="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
                     <circle fill="#24292E" cx="18" cy="18" r="18" />
                     <path d="M18 10.2c-4.4 0-8 3.6-8 8 0 3.5 2.3 6.5 5.5 7.6.4.1.5-.2.5-.4V24c-2.2.5-2.7-1-2.7-1-.4-.9-.9-1.2-.9-1.2-.7-.5.1-.5.1-.5.8.1 1.2.8 1.2.8.7 1.3 1.9.9 2.3.7.1-.5.3-.9.5-1.1-1.8-.2-3.6-.9-3.6-4 0-.9.3-1.6.8-2.1-.1-.2-.4-1 .1-2.1 0 0 .7-.2 2.2.8.6-.2 1.3-.3 2-.3s1.4.1 2 .3c1.5-1 2.2-.8 2.2-.8.4 1.1.2 1.9.1 2.1.5.6.8 1.3.8 2.1 0 3.1-1.9 3.7-3.7 3.9.3.4.6.9.6 1.6v2.2c0 .2.1.5.6.4 3.2-1.1 5.5-4.1 5.5-7.6-.1-4.4-3.7-8-8.1-8z" fill="#FFF" />
                   </svg>
@@ -58,7 +58,7 @@
             <tr>
               <td class="p-2">
                 <div class="flex items-center">
-                  <svg class="flex-shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
+                  <svg class="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
                     <circle fill="#1DA1F2" cx="18" cy="18" r="18" />
                     <path d="M26 13.5c-.6.3-1.2.4-1.9.5.7-.4 1.2-1 1.4-1.8-.6.4-1.3.6-2.1.8-.6-.6-1.5-1-2.4-1-1.7 0-3.2 1.5-3.2 3.3 0 .3 0 .5.1.7-2.7-.1-5.2-1.4-6.8-3.4-.3.5-.4 1-.4 1.7 0 1.1.6 2.1 1.5 2.7-.5 0-1-.2-1.5-.4 0 1.6 1.1 2.9 2.6 3.2-.3.1-.6.1-.9.1-.2 0-.4 0-.6-.1.4 1.3 1.6 2.3 3.1 2.3-1.1.9-2.5 1.4-4.1 1.4H10c1.5.9 3.2 1.5 5 1.5 6 0 9.3-5 9.3-9.3v-.4c.7-.5 1.3-1.1 1.7-1.8z" fill="#FFF" fill-rule="nonzero" />
                   </svg>
@@ -82,7 +82,7 @@
             <tr>
               <td class="p-2">
                 <div class="flex items-center">
-                  <svg class="flex-shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
+                  <svg class="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
                     <circle fill="#EA4335" cx="18" cy="18" r="18" />
                     <path d="M18 17v2.4h4.1c-.2 1-1.2 3-4 3-2.4 0-4.3-2-4.3-4.4 0-2.4 2-4.4 4.3-4.4 1.4 0 2.3.6 2.8 1.1l1.9-1.8C21.6 11.7 20 11 18.1 11c-3.9 0-7 3.1-7 7s3.1 7 7 7c4 0 6.7-2.8 6.7-6.8 0-.5 0-.8-.1-1.2H18z" fill="#FFF" fill-rule="nonzero" />
                   </svg>
@@ -106,7 +106,7 @@
             <tr>
               <td class="p-2">
                 <div class="flex items-center">
-                  <svg class="flex-shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
+                  <svg class="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
                     <circle fill="#4BC9FF" cx="18" cy="18" r="18" />
                     <path d="M26 14.3c-.1 1.6-1.2 3.7-3.3 6.4-2.2 2.8-4 4.2-5.5 4.2-.9 0-1.7-.9-2.4-2.6C14 19.9 13.4 15 12 15c-.1 0-.5.3-1.2.8l-.8-1c.8-.7 3.5-3.4 4.7-3.5 1.2-.1 2 .7 2.3 2.5.3 2 .8 6.1 1.8 6.1.9 0 2.5-3.4 2.6-4 .1-.9-.3-1.9-2.3-1.1.8-2.6 2.3-3.8 4.5-3.8 1.7.1 2.5 1.2 2.4 3.3z" fill="#FFF" fill-rule="nonzero" />
                   </svg>
@@ -130,7 +130,7 @@
             <tr>
               <td class="p-2">
                 <div class="flex items-center">
-                  <svg class="flex-shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
+                  <svg class="shrink-0 mr-2 sm:mr-3" width="36" height="36" viewBox="0 0 36 36">
                     <circle fill="#0E2439" cx="18" cy="18" r="18" />
                     <path d="M14.232 12.818V23H11.77V12.818h2.46zM15.772 23V12.818h2.462v4.087h4.012v-4.087h2.456V23h-2.456v-4.092h-4.012V23h-2.461z" fill="#E6ECF4" />
                   </svg>
diff --git a/src/partials/dashboard/DashboardCard09.vue b/src/partials/dashboard/DashboardCard09.vue
index 11f090b..e1bae19 100644
--- a/src/partials/dashboard/DashboardCard09.vue
+++ b/src/partials/dashboard/DashboardCard09.vue
@@ -13,7 +13,7 @@
       </div>
     </div>
     <!-- Chart built with Chart.js 3 -->
-    <div class="flex-grow">
+    <div class="grow">
       <!-- Change the height attribute to adjust the chart height -->
       <BarChart :data="chartData" width="595" height="248" />
     </div>
diff --git a/src/partials/dashboard/DashboardCard10.vue b/src/partials/dashboard/DashboardCard10.vue
index 18ef5a2..0e830d3 100644
--- a/src/partials/dashboard/DashboardCard10.vue
+++ b/src/partials/dashboard/DashboardCard10.vue
@@ -33,7 +33,7 @@
             >
               <td class="p-2 whitespace-nowrap">
                 <div class="flex items-center">
-                  <div class="w-10 h-10 flex-shrink-0 mr-2 sm:mr-3">
+                  <div class="w-10 h-10 shrink-0 mr-2 sm:mr-3">
                     <img class="rounded-full" :src="customer.image" width="40" height="40" :alt="customer.name" />
                   </div>
                   <div class="font-medium text-gray-800">{{customer.name}}</div>
diff --git a/src/partials/dashboard/DashboardCard11.vue b/src/partials/dashboard/DashboardCard11.vue
index 27ad1c3..2ea8460 100644
--- a/src/partials/dashboard/DashboardCard11.vue
+++ b/src/partials/dashboard/DashboardCard11.vue
@@ -10,7 +10,7 @@
       </div>
     </div>
     <!-- Chart built with Chart.js 3 -->
-    <div class="flex-grow">
+    <div class="grow">
       <!-- Change the height attribute to adjust the chart height -->
       <BarChart :data="chartData" :width="595" :height="48" />
     </div>
diff --git a/src/partials/dashboard/DashboardCard12.vue b/src/partials/dashboard/DashboardCard12.vue
index d6720bc..56d293f 100644
--- a/src/partials/dashboard/DashboardCard12.vue
+++ b/src/partials/dashboard/DashboardCard12.vue
@@ -12,15 +12,15 @@
         <ul class="my-1">
           <!-- Item -->
           <li class="flex px-2">
-            <div class="w-9 h-9 rounded-full flex-shrink-0 bg-indigo-500 my-2 mr-3">
+            <div class="w-9 h-9 rounded-full shrink-0 bg-indigo-500 my-2 mr-3">
               <svg class="w-9 h-9 fill-current text-indigo-50" viewBox="0 0 36 36">
                 <path d="M18 10c-4.4 0-8 3.1-8 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7zm4 10.8v2.3L18.9 22H18c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8z" />
               </svg>
             </div>
-            <div class="flex-grow flex items-center border-b border-gray-100 text-sm py-2">
-              <div class="flex-grow flex justify-between">
+            <div class="grow flex items-center border-b border-gray-100 text-sm py-2">
+              <div class="grow flex justify-between">
                 <div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900" href="#0">Nick Mark</a> mentioned <a class="font-medium text-gray-800" href="#0">Sara Smith</a> in a new post</div>
-                <div class="flex-shrink-0 self-end ml-2">
+                <div class="shrink-0 self-end ml-2">
                   <a class="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span class="hidden sm:inline"> -&gt;</span></a>
                 </div>
               </div>
@@ -28,15 +28,15 @@
           </li>
           <!-- Item -->
           <li class="flex px-2">
-            <div class="w-9 h-9 rounded-full flex-shrink-0 bg-red-500 my-2 mr-3">
+            <div class="w-9 h-9 rounded-full shrink-0 bg-red-500 my-2 mr-3">
               <svg class="w-9 h-9 fill-current text-red-50" viewBox="0 0 36 36">
                 <path d="M25 24H11a1 1 0 01-1-1v-5h2v4h12v-4h2v5a1 1 0 01-1 1zM14 13h8v2h-8z" />
               </svg>
             </div>
-            <div class="flex-grow flex items-center border-b border-gray-100 text-sm py-2">
-              <div class="flex-grow flex justify-between">
+            <div class="grow flex items-center border-b border-gray-100 text-sm py-2">
+              <div class="grow flex justify-between">
                 <div class="self-center">The post <a class="font-medium text-gray-800" href="#0">Post Name</a> was removed by <a class="font-medium text-gray-800 hover:text-gray-900" href="#0">Nick Mark</a></div>
-                <div class="flex-shrink-0 self-end ml-2">
+                <div class="shrink-0 self-end ml-2">
                   <a class="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span class="hidden sm:inline"> -&gt;</span></a>
                 </div>
               </div>
@@ -44,15 +44,15 @@
           </li>
           <!-- Item -->
           <li class="flex px-2">
-            <div class="w-9 h-9 rounded-full flex-shrink-0 bg-green-500 my-2 mr-3">
+            <div class="w-9 h-9 rounded-full shrink-0 bg-green-500 my-2 mr-3">
               <svg class="w-9 h-9 fill-current text-green-50" viewBox="0 0 36 36">
                 <path d="M15 13v-3l-5 4 5 4v-3h8a1 1 0 000-2h-8zM21 21h-8a1 1 0 000 2h8v3l5-4-5-4v3z" />
               </svg>
             </div>
-            <div class="flex-grow flex items-center text-sm py-2">
-              <div class="flex-grow flex justify-between">
+            <div class="grow flex items-center text-sm py-2">
+              <div class="grow flex justify-between">
                 <div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900" href="#0">Patrick Sullivan</a> published a new <a class="font-medium text-gray-800" href="#0">post</a></div>
-                <div class="flex-shrink-0 self-end ml-2">
+                <div class="shrink-0 self-end ml-2">
                   <a class="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span class="hidden sm:inline"> -&gt;</span></a>
                 </div>
               </div>
@@ -66,15 +66,15 @@
         <ul class="my-1">
           <!-- Item -->
           <li class="flex px-2">
-            <div class="w-9 h-9 rounded-full flex-shrink-0 bg-light-blue-500 my-2 mr-3">
+            <div class="w-9 h-9 rounded-full shrink-0 bg-light-blue-500 my-2 mr-3">
               <svg class="w-9 h-9 fill-current text-light-blue-50" viewBox="0 0 36 36">
                 <path d="M23 11v2.085c-2.841.401-4.41 2.462-5.8 4.315-1.449 1.932-2.7 3.6-5.2 3.6h-1v2h1c3.5 0 5.253-2.338 6.8-4.4 1.449-1.932 2.7-3.6 5.2-3.6h3l-4-4zM15.406 16.455c.066-.087.125-.162.194-.254.314-.419.656-.872 1.033-1.33C15.475 13.802 14.038 13 12 13h-1v2h1c1.471 0 2.505.586 3.406 1.455zM24 21c-1.471 0-2.505-.586-3.406-1.455-.066.087-.125.162-.194.254-.316.422-.656.873-1.028 1.328.959.878 2.108 1.573 3.628 1.788V25l4-4h-3z" />
               </svg>
             </div>
-            <div class="flex-grow flex items-center border-b border-gray-100 text-sm py-2">
-              <div class="flex-grow flex justify-between">
+            <div class="grow flex items-center border-b border-gray-100 text-sm py-2">
+              <div class="grow flex justify-between">
                 <div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900" href="#0">240+</a> users have subscribed to <a class="font-medium text-gray-800" href="#0">Newsletter #1</a></div>
-                <div class="flex-shrink-0 self-end ml-2">
+                <div class="shrink-0 self-end ml-2">
                   <a class="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span class="hidden sm:inline"> -&gt;</span></a>
                 </div>
               </div>
@@ -82,15 +82,15 @@
           </li>
           <!-- Item -->
           <li class="flex px-2">
-            <div class="w-9 h-9 rounded-full flex-shrink-0 bg-indigo-500 my-2 mr-3">
+            <div class="w-9 h-9 rounded-full shrink-0 bg-indigo-500 my-2 mr-3">
               <svg class="w-9 h-9 fill-current text-indigo-50" viewBox="0 0 36 36">
                 <path d="M18 10c-4.4 0-8 3.1-8 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7zm4 10.8v2.3L18.9 22H18c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8z" />
               </svg>
             </div>
-            <div class="flex-grow flex items-center text-sm py-2">
-              <div class="flex-grow flex justify-between">
+            <div class="grow flex items-center text-sm py-2">
+              <div class="grow flex justify-between">
                 <div class="self-center">The post <a class="font-medium text-gray-800" href="#0">Post Name</a> was suspended by <a class="font-medium text-gray-800 hover:text-gray-900" href="#0">Nick Mark</a></div>
-                <div class="flex-shrink-0 self-end ml-2">
+                <div class="shrink-0 self-end ml-2">
                   <a class="font-medium text-indigo-500 hover:text-indigo-600" href="#0">View<span class="hidden sm:inline"> -&gt;</span></a>
                 </div>
               </div>
diff --git a/src/partials/dashboard/DashboardCard13.vue b/src/partials/dashboard/DashboardCard13.vue
index e3bc56e..31e2e3d 100644
--- a/src/partials/dashboard/DashboardCard13.vue
+++ b/src/partials/dashboard/DashboardCard13.vue
@@ -12,15 +12,15 @@
         <ul class="my-1">
           <!-- Item -->
           <li class="flex px-2">
-            <div class="w-9 h-9 rounded-full flex-shrink-0 bg-red-500 my-2 mr-3">
+            <div class="w-9 h-9 rounded-full shrink-0 bg-red-500 my-2 mr-3">
               <svg class="w-9 h-9 fill-current text-red-50" viewBox="0 0 36 36">
                 <path d="M17.7 24.7l1.4-1.4-4.3-4.3H25v-2H14.8l4.3-4.3-1.4-1.4L11 18z" />
               </svg>
             </div>
-            <div class="flex-grow flex items-center border-b border-gray-100 text-sm py-2">
-              <div class="flex-grow flex justify-between">
+            <div class="grow flex items-center border-b border-gray-100 text-sm py-2">
+              <div class="grow flex justify-between">
                 <div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900" href="#0">Qonto</a> billing</div>
-                <div class="flex-shrink-0 self-start ml-2">
+                <div class="shrink-0 self-start ml-2">
                   <span class="font-medium text-gray-800">-$49.88</span>
                 </div>
               </div>
@@ -28,15 +28,15 @@
           </li>
           <!-- Item -->
           <li class="flex px-2">
-            <div class="w-9 h-9 rounded-full flex-shrink-0 bg-green-500 my-2 mr-3">
+            <div class="w-9 h-9 rounded-full shrink-0 bg-green-500 my-2 mr-3">
               <svg class="w-9 h-9 fill-current text-green-50" viewBox="0 0 36 36">
                 <path d="M18.3 11.3l-1.4 1.4 4.3 4.3H11v2h10.2l-4.3 4.3 1.4 1.4L25 18z" />
               </svg>
             </div>
-            <div class="flex-grow flex items-center border-b border-gray-100 text-sm py-2">
-              <div class="flex-grow flex justify-between">
+            <div class="grow flex items-center border-b border-gray-100 text-sm py-2">
+              <div class="grow flex justify-between">
                 <div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900" href="#0">Cruip.com</a> Market Ltd 70 Wilson St London</div>
-                <div class="flex-shrink-0 self-start ml-2">
+                <div class="shrink-0 self-start ml-2">
                   <span class="font-medium text-green-500">+249.88</span>
                 </div>
               </div>
@@ -44,15 +44,15 @@
           </li>
           <!-- Item -->
           <li class="flex px-2">
-            <div class="w-9 h-9 rounded-full flex-shrink-0 bg-green-500 my-2 mr-3">
+            <div class="w-9 h-9 rounded-full shrink-0 bg-green-500 my-2 mr-3">
               <svg class="w-9 h-9 fill-current text-green-50" viewBox="0 0 36 36">
                 <path d="M18.3 11.3l-1.4 1.4 4.3 4.3H11v2h10.2l-4.3 4.3 1.4 1.4L25 18z" />
               </svg>
             </div>
-            <div class="flex-grow flex items-center border-b border-gray-100 text-sm py-2">
-              <div class="flex-grow flex justify-between">
+            <div class="grow flex items-center border-b border-gray-100 text-sm py-2">
+              <div class="grow flex justify-between">
                 <div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900" href="#0">Notion Labs Inc</a></div>
-                <div class="flex-shrink-0 self-start ml-2">
+                <div class="shrink-0 self-start ml-2">
                   <span class="font-medium text-green-500">+99.99</span>
                 </div>
               </div>
@@ -60,15 +60,15 @@
           </li>
           <!-- Item -->
           <li class="flex px-2">
-            <div class="w-9 h-9 rounded-full flex-shrink-0 bg-green-500 my-2 mr-3">
+            <div class="w-9 h-9 rounded-full shrink-0 bg-green-500 my-2 mr-3">
               <svg class="w-9 h-9 fill-current text-green-50" viewBox="0 0 36 36">
                 <path d="M18.3 11.3l-1.4 1.4 4.3 4.3H11v2h10.2l-4.3 4.3 1.4 1.4L25 18z" />
               </svg>
             </div>
-            <div class="flex-grow flex items-center border-b border-gray-100 text-sm py-2">
-              <div class="flex-grow flex justify-between">
+            <div class="grow flex items-center border-b border-gray-100 text-sm py-2">
+              <div class="grow flex justify-between">
                 <div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900" href="#0">Market Cap Ltd</a></div>
-                <div class="flex-shrink-0 self-start ml-2">
+                <div class="shrink-0 self-start ml-2">
                   <span class="font-medium text-green-500">+1,200.88</span>
                 </div>
               </div>
@@ -76,15 +76,15 @@
           </li>
           <!-- Item -->
           <li class="flex px-2">
-            <div class="w-9 h-9 rounded-full flex-shrink-0 bg-gray-200 my-2 mr-3">
+            <div class="w-9 h-9 rounded-full shrink-0 bg-gray-200 my-2 mr-3">
               <svg class="w-9 h-9 fill-current text-gray-400" viewBox="0 0 36 36">
                 <path d="M21.477 22.89l-8.368-8.367a6 6 0 008.367 8.367zm1.414-1.413a6 6 0 00-8.367-8.367l8.367 8.367zM18 26a8 8 0 110-16 8 8 0 010 16z" />
               </svg>
             </div>
-            <div class="flex-grow flex items-center border-b border-gray-100 text-sm py-2">
-              <div class="flex-grow flex justify-between">
+            <div class="grow flex items-center border-b border-gray-100 text-sm py-2">
+              <div class="grow flex justify-between">
                 <div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900" href="#0">App.com</a> Market Ltd 70 Wilson St London</div>
-                <div class="flex-shrink-0 self-start ml-2">
+                <div class="shrink-0 self-start ml-2">
                   <span class="font-medium text-gray-800 line-through">+$99.99</span>
                 </div>
               </div>
@@ -92,15 +92,15 @@
           </li>
           <!-- Item -->
           <li class="flex px-2">
-            <div class="w-9 h-9 rounded-full flex-shrink-0 bg-red-500 my-2 mr-3">
+            <div class="w-9 h-9 rounded-full shrink-0 bg-red-500 my-2 mr-3">
               <svg class="w-9 h-9 fill-current text-red-50" viewBox="0 0 36 36">
                 <path d="M17.7 24.7l1.4-1.4-4.3-4.3H25v-2H14.8l4.3-4.3-1.4-1.4L11 18z" />
               </svg>
             </div>
-            <div class="flex-grow flex items-center text-sm py-2">
-              <div class="flex-grow flex justify-between">
+            <div class="grow flex items-center text-sm py-2">
+              <div class="grow flex justify-between">
                 <div class="self-center"><a class="font-medium text-gray-800 hover:text-gray-900" href="#0">App.com</a> Market Ltd 70 Wilson St London</div>
-                <div class="flex-shrink-0 self-start ml-2">
+                <div class="shrink-0 self-start ml-2">
                   <span class="font-medium text-gray-800">-$49.88</span>
                 </div>
               </div>
diff --git a/vite.config.js b/vite.config.js
index 0779c12..0cf8389 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -3,6 +3,9 @@ import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
+  define: {
+    'process.env': process.env
+  },  
   plugins: [vue()],
   resolve: {
     alias: [