diff --git a/angular.json b/angular.json
index 7ed1ac13d..42a0ca769 100644
--- a/angular.json
+++ b/angular.json
@@ -37,33 +37,8 @@
               "src/main.scss",
               {
                 "inject": false,
-                "input": "src/theme/deeppurple-amber.scss",
-                "bundleName": "deeppurple-amber"
-              },
-              {
-                "inject": false,
-                "input": "src/theme/indigo-pink.scss",
-                "bundleName": "indigo-pink"
-              },
-              {
-                "inject": false,
-                "input": "src/theme/pink-bluegrey.scss",
-                "bundleName": "pink-bluegrey"
-              },
-              {
-                "inject": false,
-                "input": "src/theme/purple-green.scss",
-                "bundleName": "purple-green"
-              },
-              {
-                "inject": false,
-                "input": "src/theme/custom/denim-yellowgreen.scss",
-                "bundleName": "denim-yellowgreen"
-              },
-              {
-                "inject": false,
-                "input": "src/theme/custom/pictonblue-yellowgreen.scss",
-                "bundleName": "pictonblue-yellowgreen"
+                "input": "src/theme/mifosx-theme.scss",
+                "bundleName": "mifosx-theme"
               }
             ],
             "scripts": [],
@@ -147,33 +122,8 @@
               "src/main.scss",
               {
                 "inject": false,
-                "input": "src/theme/deeppurple-amber.scss",
-                "bundleName": "deeppurple-amber"
-              },
-              {
-                "inject": false,
-                "input": "src/theme/indigo-pink.scss",
-                "bundleName": "indigo-pink"
-              },
-              {
-                "inject": false,
-                "input": "src/theme/pink-bluegrey.scss",
-                "bundleName": "pink-bluegrey"
-              },
-              {
-                "inject": false,
-                "input": "src/theme/purple-green.scss",
-                "bundleName": "purple-green"
-              },
-              {
-                "inject": false,
-                "input": "src/theme/custom/denim-yellowgreen.scss",
-                "bundleName": "denim-yellowgreen"
-              },
-              {
-                "inject": false,
-                "input": "src/theme/custom/pictonblue-yellowgreen.scss",
-                "bundleName": "pictonblue-yellowgreen"
+                "input": "src/theme/mifosx-theme.scss",
+                "bundleName": "mifosx-theme"
               }
             ],
             "assets": [
diff --git a/package-lock.json b/package-lock.json
index 34528f3a3..401946eae 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
         "@ngx-translate/core": "13.0.0",
         "@ngx-translate/http-loader": "^6.0.0",
         "@swimlane/ngx-graph": "^8.0.2",
+        "@tailwindcss/forms": "^0.5.4",
         "chart.js": "3.0.0-alpha",
         "d3": "^7.6.1",
         "install": "^0.13.0",
@@ -72,12 +73,14 @@
         "karma-jasmine": "^5.1.0",
         "karma-jasmine-html-reporter": "^2.0.0",
         "karma-junit-reporter": "1.2.0",
+        "prettier": "^3.0.1",
         "protractor": "~7.0.0",
         "puppeteer": "^15.3.2",
         "stylelint": "10.0.1",
         "stylelint-config-recommended-scss": "3.3.0",
         "stylelint-config-standard": "18.3.0",
         "stylelint-scss": "3.6.1",
+        "tailwindcss": "^3.3.3",
         "ts-node": "8.2.0",
         "tslint": "~6.1.0",
         "typescript": "4.6.4"
@@ -87,6 +90,17 @@
         "npm": ">= 8.11.0"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
@@ -2853,6 +2867,30 @@
         "node": ">=0.1.90"
       }
     },
+    "node_modules/@cspotcode/source-map-support": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
+      "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/trace-mapping": "0.3.9"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@cspotcode/source-map-support/node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.9",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
+      "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
     "node_modules/@csstools/postcss-progressive-custom-properties": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-1.3.0.tgz",
@@ -3318,7 +3356,6 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -3331,7 +3368,6 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -3340,7 +3376,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -3527,6 +3562,17 @@
         "rxjs": "6.x || 7.x"
       }
     },
+    "node_modules/@tailwindcss/forms": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.4.tgz",
+      "integrity": "sha512-YAm12D3R7/9Mh4jFbYSMnsd6jG++8KxogWgqs7hbdo/86aWjjlIEvL7+QYdVELmAI0InXTpZqFIg5e7aDVWI2Q==",
+      "dependencies": {
+        "mini-svg-data-uri": "^1.2.3"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
+      }
+    },
     "node_modules/@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
@@ -3536,6 +3582,34 @@
         "node": ">= 6"
       }
     },
+    "node_modules/@tsconfig/node10": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
+      "integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==",
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/@tsconfig/node12": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
+      "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/@tsconfig/node14": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
+      "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/@tsconfig/node16": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
+      "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/@types/body-parser": {
       "version": "1.19.2",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
@@ -3742,7 +3816,7 @@
       "version": "12.11.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-12.11.1.tgz",
       "integrity": "sha512-TJtwsqZ39pqcljJpajeoofYRfeZ7/I/OMUQ5pR4q5wOKf2ocrUvBAZUMhWsOvKx3dVc/aaV5GluBivt0sWqA5A==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
@@ -4079,6 +4153,16 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/acorn-walk": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
+      "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
+      "optional": true,
+      "peer": true,
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/adjust-sourcemap-loader": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-4.0.0.tgz",
@@ -4282,6 +4366,11 @@
         "node": ">=4"
       }
     },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
+    },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -5334,6 +5423,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/camelcase-keys": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-4.2.0.tgz",
@@ -6315,6 +6412,13 @@
         "node": ">=10"
       }
     },
+    "node_modules/create-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
+      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/critters": {
       "version": "0.0.16",
       "resolved": "https://registry.npmjs.org/critters/-/critters-0.0.16.tgz",
@@ -6582,7 +6686,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
       "bin": {
         "cssesc": "bin/cssesc"
       },
@@ -7978,11 +8081,16 @@
       "integrity": "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==",
       "dev": true
     },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
+    },
     "node_modules/diff": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
       "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=0.3.1"
       }
@@ -7999,6 +8107,11 @@
         "node": ">=8"
       }
     },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
+    },
     "node_modules/dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -9263,7 +9376,6 @@
       "version": "3.2.12",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
       "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
-      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -9291,7 +9403,6 @@
       "version": "1.14.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.14.0.tgz",
       "integrity": "sha512-eR2D+V9/ExcbF9ls441yIuN6TI2ED1Y2ZcA5BmMtJsOkWOFRJQ0Jt0g1UwqXJJVAb+V+umH5Dfr8oh4EVP7VVg==",
-      "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -9628,8 +9739,7 @@
     "node_modules/function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "dev": true
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
     "node_modules/functions-have-names": {
       "version": "1.2.3",
@@ -10109,7 +10219,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1"
       },
@@ -11147,10 +11256,9 @@
       }
     },
     "node_modules/is-core-module": {
-      "version": "2.11.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
-      "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
-      "dev": true,
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz",
+      "integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==",
       "dependencies": {
         "has": "^1.0.3"
       },
@@ -11744,6 +11852,14 @@
         "url": "https://github.com/chalk/supports-color?sponsor=1"
       }
     },
+    "node_modules/jiti": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.19.1.tgz",
+      "integrity": "sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg==",
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
     "node_modules/js-stringify": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
@@ -12390,11 +12506,18 @@
         "immediate": "~3.0.5"
       }
     },
+    "node_modules/lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/lines-and-columns": {
       "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
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "node_modules/listr2": {
       "version": "3.14.0",
@@ -12798,7 +12921,7 @@
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/make-fetch-happen": {
       "version": "9.1.0",
@@ -12990,7 +13113,6 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -13038,7 +13160,6 @@
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
       "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-      "dev": true,
       "dependencies": {
         "braces": "^3.0.2",
         "picomatch": "^2.3.1"
@@ -13126,6 +13247,14 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "bin": {
+        "mini-svg-data-uri": "cli.js"
+      }
+    },
     "node_modules/minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -13372,11 +13501,26 @@
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
       "dev": true
     },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "node_modules/nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
-      "dev": true,
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
       "bin": {
         "nanoid": "bin/nanoid.cjs"
       },
@@ -14018,7 +14162,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -14114,6 +14257,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/object-inspect": {
       "version": "1.12.2",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
@@ -14631,8 +14782,7 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "node_modules/path-to-regexp": {
       "version": "0.1.7",
@@ -14681,7 +14831,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -14707,6 +14856,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/pirates": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/piscina": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/piscina/-/piscina-3.2.0.tgz",
@@ -14790,7 +14947,6 @@
       "version": "8.4.5",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz",
       "integrity": "sha512-jBDboWM8qpaqwkMwItqTQTiFikhs/67OYVvblFFTM7MrZjt6yMKd6r2kgXizEbTTljacm4NldIlZnhbjr84QYg==",
-      "dev": true,
       "dependencies": {
         "nanoid": "^3.1.30",
         "picocolors": "^1.0.0",
@@ -15306,6 +15462,24 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/postcss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.11"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
     "node_modules/postcss-nesting": {
       "version": "10.2.0",
       "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-10.2.0.tgz",
@@ -15659,7 +15833,6 @@
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
       "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
-      "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -15680,8 +15853,22 @@
     "node_modules/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
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+    },
+    "node_modules/prettier": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.1.tgz",
+      "integrity": "sha512-fcOWSnnpCrovBsmFZIGIy9UqK2FaI7Hqax+DIO0A9UxeVoY4iweyaFjS5TavZN97Hfehph0nhsZnjlVKzEQSrQ==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
     },
     "node_modules/pretty-bytes": {
       "version": "5.6.0",
@@ -16288,7 +16475,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -16362,7 +16548,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
       "dependencies": {
         "pify": "^2.3.0"
       }
@@ -16975,7 +17160,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -17020,7 +17204,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -17972,7 +18155,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -19013,6 +19195,67 @@
         "webpack": "^5.0.0"
       }
     },
+    "node_modules/sucrase": {
+      "version": "3.34.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz",
+      "integrity": "sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "7.1.6",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/sucrase/node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+      "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/sucrase/node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/sucrase/node_modules/glob": {
+      "version": "7.1.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+      "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.0.4",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/sugarss": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-2.0.0.tgz",
@@ -19103,7 +19346,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -19236,6 +19478,235 @@
         "node": ">=6"
       }
     },
+    "node_modules/tailwindcss": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
+      "integrity": "sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.2.12",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.18.2",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/acorn": {
+      "version": "8.10.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
+      "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
+    },
+    "node_modules/tailwindcss/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/postcss": {
+      "version": "8.4.27",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.27.tgz",
+      "integrity": "sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/postcss-load-config": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
+      "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==",
+      "dependencies": {
+        "lilconfig": "^2.0.5",
+        "yaml": "^2.1.1"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": ">=8.0.9",
+        "ts-node": ">=9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "postcss": {
+          "optional": true
+        },
+        "ts-node": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tailwindcss/node_modules/resolve": {
+      "version": "1.22.4",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.4.tgz",
+      "integrity": "sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==",
+      "dependencies": {
+        "is-core-module": "^2.13.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwindcss/node_modules/ts-node": {
+      "version": "10.9.1",
+      "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
+      "integrity": "sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "@cspotcode/source-map-support": "^0.8.0",
+        "@tsconfig/node10": "^1.0.7",
+        "@tsconfig/node12": "^1.0.7",
+        "@tsconfig/node14": "^1.0.0",
+        "@tsconfig/node16": "^1.0.2",
+        "acorn": "^8.4.1",
+        "acorn-walk": "^8.1.1",
+        "arg": "^4.1.0",
+        "create-require": "^1.1.0",
+        "diff": "^4.0.1",
+        "make-error": "^1.1.1",
+        "v8-compile-cache-lib": "^3.0.1",
+        "yn": "3.1.1"
+      },
+      "bin": {
+        "ts-node": "dist/bin.js",
+        "ts-node-cwd": "dist/bin-cwd.js",
+        "ts-node-esm": "dist/bin-esm.js",
+        "ts-node-script": "dist/bin-script.js",
+        "ts-node-transpile-only": "dist/bin-transpile.js",
+        "ts-script": "dist/bin-script-deprecated.js"
+      },
+      "peerDependencies": {
+        "@swc/core": ">=1.2.50",
+        "@swc/wasm": ">=1.2.50",
+        "@types/node": "*",
+        "typescript": ">=2.7"
+      },
+      "peerDependenciesMeta": {
+        "@swc/core": {
+          "optional": true
+        },
+        "@swc/wasm": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tailwindcss/node_modules/ts-node/node_modules/arg": {
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+      "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
+      "optional": true,
+      "peer": true
+    },
+    "node_modules/tailwindcss/node_modules/yaml": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz",
+      "integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==",
+      "engines": {
+        "node": ">= 14"
+      }
+    },
     "node_modules/tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -19445,6 +19916,25 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/throttleit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-1.0.0.tgz",
@@ -19622,6 +20112,11 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
+    },
     "node_modules/ts-node": {
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-8.2.0.tgz",
@@ -20163,6 +20658,13 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/v8-compile-cache-lib": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
+      "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
+      "optional": true,
+      "peer": true
+    },
     "node_modules/validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -21166,7 +21668,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
-      "dev": true,
+      "devOptional": true,
       "engines": {
         "node": ">=6"
       }
@@ -21181,6 +21683,11 @@
     }
   },
   "dependencies": {
+    "@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="
+    },
     "@ampproject/remapping": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz",
@@ -23124,6 +23631,29 @@
       "integrity": "sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==",
       "dev": true
     },
+    "@cspotcode/source-map-support": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
+      "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==",
+      "optional": true,
+      "peer": true,
+      "requires": {
+        "@jridgewell/trace-mapping": "0.3.9"
+      },
+      "dependencies": {
+        "@jridgewell/trace-mapping": {
+          "version": "0.3.9",
+          "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz",
+          "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==",
+          "optional": true,
+          "peer": true,
+          "requires": {
+            "@jridgewell/resolve-uri": "^3.0.3",
+            "@jridgewell/sourcemap-codec": "^1.4.10"
+          }
+        }
+      }
+    },
     "@csstools/postcss-progressive-custom-properties": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-1.3.0.tgz",
@@ -23474,7 +24004,6 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
       "requires": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -23483,14 +24012,12 @@
     "@nodelib/fs.stat": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A=="
     },
     "@nodelib/fs.walk": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
       "requires": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -23643,12 +24170,48 @@
         "webcola": "^3.3.8"
       }
     },
+    "@tailwindcss/forms": {
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.4.tgz",
+      "integrity": "sha512-YAm12D3R7/9Mh4jFbYSMnsd6jG++8KxogWgqs7hbdo/86aWjjlIEvL7+QYdVELmAI0InXTpZqFIg5e7aDVWI2Q==",
+      "requires": {
+        "mini-svg-data-uri": "^1.2.3"
+      }
+    },
     "@tootallnate/once": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@tootallnate/once/-/once-1.1.2.tgz",
       "integrity": "sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==",
       "dev": true
     },
+    "@tsconfig/node10": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.9.tgz",
+      "integrity": "sha512-jNsYVVxU8v5g43Erja32laIDHXeoNvFEpX33OK4d6hljo3jDhCBDhx5dhCCTMWUojscpAagGiRkBKxpdl9fxqA==",
+      "optional": true,
+      "peer": true
+    },
+    "@tsconfig/node12": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz",
+      "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==",
+      "optional": true,
+      "peer": true
+    },
+    "@tsconfig/node14": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz",
+      "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==",
+      "optional": true,
+      "peer": true
+    },
+    "@tsconfig/node16": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz",
+      "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==",
+      "optional": true,
+      "peer": true
+    },
     "@types/body-parser": {
       "version": "1.19.2",
       "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
@@ -23855,7 +24418,7 @@
       "version": "12.11.1",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-12.11.1.tgz",
       "integrity": "sha512-TJtwsqZ39pqcljJpajeoofYRfeZ7/I/OMUQ5pR4q5wOKf2ocrUvBAZUMhWsOvKx3dVc/aaV5GluBivt0sWqA5A==",
-      "dev": true
+      "devOptional": true
     },
     "@types/parse-json": {
       "version": "4.0.0",
@@ -24182,6 +24745,13 @@
       "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
       "dev": true
     },
+    "acorn-walk": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
+      "integrity": "sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==",
+      "optional": true,
+      "peer": true
+    },
     "adjust-sourcemap-loader": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/adjust-sourcemap-loader/-/adjust-sourcemap-loader-4.0.0.tgz",
@@ -24328,6 +24898,11 @@
         "color-convert": "^1.9.0"
       }
     },
+    "any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
+    },
     "anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
@@ -25123,6 +25698,11 @@
       "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
       "dev": true
     },
+    "camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
+    },
     "camelcase-keys": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-4.2.0.tgz",
@@ -25882,6 +26462,13 @@
         "yaml": "^1.10.0"
       }
     },
+    "create-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz",
+      "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
+      "optional": true,
+      "peer": true
+    },
     "critters": {
       "version": "0.0.16",
       "resolved": "https://registry.npmjs.org/critters/-/critters-0.0.16.tgz",
@@ -26080,8 +26667,7 @@
     "cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="
     },
     "currently-unhandled": {
       "version": "0.4.1",
@@ -27212,11 +27798,16 @@
         }
       }
     },
+    "didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
+    },
     "diff": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz",
       "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==",
-      "dev": true
+      "devOptional": true
     },
     "dir-glob": {
       "version": "3.0.1",
@@ -27227,6 +27818,11 @@
         "path-type": "^4.0.0"
       }
     },
+    "dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
+    },
     "dns-equal": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz",
@@ -28134,7 +28730,6 @@
       "version": "3.2.12",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
       "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
-      "dev": true,
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -28159,7 +28754,6 @@
       "version": "1.14.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.14.0.tgz",
       "integrity": "sha512-eR2D+V9/ExcbF9ls441yIuN6TI2ED1Y2ZcA5BmMtJsOkWOFRJQ0Jt0g1UwqXJJVAb+V+umH5Dfr8oh4EVP7VVg==",
-      "dev": true,
       "requires": {
         "reusify": "^1.0.4"
       }
@@ -28409,8 +29003,7 @@
     "function-bind": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "dev": true
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
     "functions-have-names": {
       "version": "1.2.3",
@@ -28784,7 +29377,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "dev": true,
       "requires": {
         "function-bind": "^1.1.1"
       }
@@ -29587,10 +30179,9 @@
       }
     },
     "is-core-module": {
-      "version": "2.11.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz",
-      "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==",
-      "dev": true,
+      "version": "2.13.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.0.tgz",
+      "integrity": "sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==",
       "requires": {
         "has": "^1.0.3"
       }
@@ -30024,6 +30615,11 @@
         }
       }
     },
+    "jiti": {
+      "version": "1.19.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.19.1.tgz",
+      "integrity": "sha512-oVhqoRDaBXf7sjkll95LHVS6Myyyb1zaunVwk4Z0+WPSW4gjS0pl01zYKHScTuyEhQsFxV5L4DR5r+YqSyqyyg=="
+    },
     "js-stringify": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
@@ -30537,11 +31133,15 @@
         "immediate": "~3.0.5"
       }
     },
+    "lilconfig": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
+      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ=="
+    },
     "lines-and-columns": {
       "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
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "listr2": {
       "version": "3.14.0",
@@ -30847,7 +31447,7 @@
       "version": "1.3.6",
       "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz",
       "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==",
-      "dev": true
+      "devOptional": true
     },
     "make-fetch-happen": {
       "version": "9.1.0",
@@ -30995,8 +31595,7 @@
     "merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="
     },
     "mermaid": {
       "version": "9.2.2",
@@ -31037,7 +31636,6 @@
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
       "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
-      "dev": true,
       "requires": {
         "braces": "^3.0.2",
         "picomatch": "^2.3.1"
@@ -31092,6 +31690,11 @@
         }
       }
     },
+    "mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg=="
+    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -31286,11 +31889,20 @@
       "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==",
       "dev": true
     },
+    "mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "requires": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
     "nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
-      "dev": true
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA=="
     },
     "nanomatch": {
       "version": "1.2.13",
@@ -31793,8 +32405,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
     },
     "object-copy": {
       "version": "0.1.0",
@@ -31870,6 +32481,11 @@
         }
       }
     },
+    "object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw=="
+    },
     "object-inspect": {
       "version": "1.12.2",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
@@ -32274,8 +32890,7 @@
     "path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
     "path-to-regexp": {
       "version": "0.1.7",
@@ -32314,8 +32929,7 @@
     "pify": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="
     },
     "pinkie": {
       "version": "2.0.4",
@@ -32332,6 +32946,11 @@
         "pinkie": "^2.0.0"
       }
     },
+    "pirates": {
+      "version": "4.0.6",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
+      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg=="
+    },
     "piscina": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/piscina/-/piscina-3.2.0.tgz",
@@ -32403,7 +33022,6 @@
       "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",
@@ -32698,6 +33316,14 @@
         "icss-utils": "^5.0.0"
       }
     },
+    "postcss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "requires": {
+        "postcss-selector-parser": "^6.0.11"
+      }
+    },
     "postcss-nesting": {
       "version": "10.2.0",
       "resolved": "https://registry.npmjs.org/postcss-nesting/-/postcss-nesting-10.2.0.tgz",
@@ -32954,7 +33580,6 @@
       "version": "6.0.11",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz",
       "integrity": "sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==",
-      "dev": true,
       "requires": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -32970,7 +33595,12 @@
     "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==",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+    },
+    "prettier": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.1.tgz",
+      "integrity": "sha512-fcOWSnnpCrovBsmFZIGIy9UqK2FaI7Hqax+DIO0A9UxeVoY4iweyaFjS5TavZN97Hfehph0nhsZnjlVKzEQSrQ==",
       "dev": true
     },
     "pretty-bytes": {
@@ -33476,8 +34106,7 @@
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="
     },
     "quick-lru": {
       "version": "1.1.0",
@@ -33527,7 +34156,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
       "requires": {
         "pify": "^2.3.0"
       }
@@ -34024,8 +34652,7 @@
     "reusify": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true
+      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw=="
     },
     "rfdc": {
       "version": "1.3.0",
@@ -34057,7 +34684,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
       "requires": {
         "queue-microtask": "^1.2.2"
       }
@@ -34810,8 +35436,7 @@
     "source-map-js": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
-      "dev": true
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
     },
     "source-map-loader": {
       "version": "3.0.1",
@@ -35646,6 +36271,50 @@
         "normalize-path": "^3.0.0"
       }
     },
+    "sucrase": {
+      "version": "3.34.0",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.34.0.tgz",
+      "integrity": "sha512-70/LQEZ07TEcxiU2dz51FKaE6hCTWC6vr7FOk3Gr0U60C3shtAN+H+BFr9XlYe5xqf3RA8nrc+VIwzCfnxuXJw==",
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "glob": "7.1.6",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "dependencies": {
+        "@jridgewell/gen-mapping": {
+          "version": "0.3.3",
+          "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",
+          "integrity": "sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==",
+          "requires": {
+            "@jridgewell/set-array": "^1.0.1",
+            "@jridgewell/sourcemap-codec": "^1.4.10",
+            "@jridgewell/trace-mapping": "^0.3.9"
+          }
+        },
+        "commander": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+          "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="
+        },
+        "glob": {
+          "version": "7.1.6",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
+          "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==",
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        }
+      }
+    },
     "sugarss": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-2.0.0.tgz",
@@ -35717,8 +36386,7 @@
     "supports-preserve-symlinks-flag": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="
     },
     "svg-tags": {
       "version": "1.0.0",
@@ -35819,6 +36487,140 @@
         }
       }
     },
+    "tailwindcss": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz",
+      "integrity": "sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==",
+      "requires": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.2.12",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.18.2",
+        "lilconfig": "^2.1.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.23",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-selector-parser": "^6.0.11",
+        "resolve": "^1.22.2",
+        "sucrase": "^3.32.0"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "8.10.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
+          "integrity": "sha512-F0SAmZ8iUtS//m8DmCTA0jlh6TDKkHQyK6xc6V4KDTyZKA9dnvX9/3sRTVQrWm79glUAZbnmmNcdYwUIHWVybw==",
+          "optional": true,
+          "peer": true
+        },
+        "arg": {
+          "version": "5.0.2",
+          "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+          "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
+        },
+        "glob-parent": {
+          "version": "6.0.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+          "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+          "requires": {
+            "is-glob": "^4.0.3"
+          }
+        },
+        "postcss": {
+          "version": "8.4.27",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.27.tgz",
+          "integrity": "sha512-gY/ACJtJPSmUFPDCHtX78+01fHa64FaU4zaaWfuh1MhGJISufJAH4cun6k/8fwsHYeK4UQmENQK+tRLCFJE8JQ==",
+          "requires": {
+            "nanoid": "^3.3.6",
+            "picocolors": "^1.0.0",
+            "source-map-js": "^1.0.2"
+          }
+        },
+        "postcss-import": {
+          "version": "15.1.0",
+          "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+          "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+          "requires": {
+            "postcss-value-parser": "^4.0.0",
+            "read-cache": "^1.0.0",
+            "resolve": "^1.1.7"
+          }
+        },
+        "postcss-js": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+          "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+          "requires": {
+            "camelcase-css": "^2.0.1"
+          }
+        },
+        "postcss-load-config": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.1.tgz",
+          "integrity": "sha512-vEJIc8RdiBRu3oRAI0ymerOn+7rPuMvRXslTvZUKZonDHFIczxztIyJ1urxM1x9JXEikvpWWTUUqal5j/8QgvA==",
+          "requires": {
+            "lilconfig": "^2.0.5",
+            "yaml": "^2.1.1"
+          }
+        },
+        "resolve": {
+          "version": "1.22.4",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.4.tgz",
+          "integrity": "sha512-PXNdCiPqDqeUou+w1C2eTQbNfxKSuMxqTCuvlmmMsk1NWHL5fRrhY6Pl0qEYYc6+QqGClco1Qj8XnjPego4wfg==",
+          "requires": {
+            "is-core-module": "^2.13.0",
+            "path-parse": "^1.0.7",
+            "supports-preserve-symlinks-flag": "^1.0.0"
+          }
+        },
+        "ts-node": {
+          "version": "10.9.1",
+          "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.1.tgz",
+          "integrity": "sha512-NtVysVPkxxrwFGUUxGYhfux8k78pQB3JqYBXlLRZgdGUqTO5wU/UyHop5p70iEbGhB7q5KmiZiU0Y3KlJrScEw==",
+          "optional": true,
+          "peer": true,
+          "requires": {
+            "@cspotcode/source-map-support": "^0.8.0",
+            "@tsconfig/node10": "^1.0.7",
+            "@tsconfig/node12": "^1.0.7",
+            "@tsconfig/node14": "^1.0.0",
+            "@tsconfig/node16": "^1.0.2",
+            "acorn": "^8.4.1",
+            "acorn-walk": "^8.1.1",
+            "arg": "^4.1.0",
+            "create-require": "^1.1.0",
+            "diff": "^4.0.1",
+            "make-error": "^1.1.1",
+            "v8-compile-cache-lib": "^3.0.1",
+            "yn": "3.1.1"
+          },
+          "dependencies": {
+            "arg": {
+              "version": "4.1.3",
+              "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz",
+              "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==",
+              "optional": true,
+              "peer": true
+            }
+          }
+        },
+        "yaml": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.3.1.tgz",
+          "integrity": "sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ=="
+        }
+      }
+    },
     "tapable": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
@@ -35970,6 +36772,22 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "requires": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "requires": {
+        "thenify": ">= 3.1.0 < 4"
+      }
+    },
     "throttleit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/throttleit/-/throttleit-1.0.0.tgz",
@@ -36111,6 +36929,11 @@
       "integrity": "sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==",
       "dev": true
     },
+    "ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
+    },
     "ts-node": {
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-8.2.0.tgz",
@@ -36527,6 +37350,13 @@
       "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
       "dev": true
     },
+    "v8-compile-cache-lib": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz",
+      "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==",
+      "optional": true,
+      "peer": true
+    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -37292,7 +38122,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz",
       "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==",
-      "dev": true
+      "devOptional": true
     },
     "zone.js": {
       "version": "0.11.6",
diff --git a/package.json b/package.json
index 0be609879..cee4751d3 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "@ngx-translate/core": "13.0.0",
     "@ngx-translate/http-loader": "^6.0.0",
     "@swimlane/ngx-graph": "^8.0.2",
+    "@tailwindcss/forms": "^0.5.4",
     "chart.js": "3.0.0-alpha",
     "d3": "^7.6.1",
     "install": "^0.13.0",
@@ -91,12 +92,14 @@
     "karma-jasmine": "^5.1.0",
     "karma-jasmine-html-reporter": "^2.0.0",
     "karma-junit-reporter": "1.2.0",
+    "prettier": "^3.0.1",
     "protractor": "~7.0.0",
     "puppeteer": "^15.3.2",
     "stylelint": "10.0.1",
     "stylelint-config-recommended-scss": "3.3.0",
     "stylelint-config-standard": "18.3.0",
     "stylelint-scss": "3.6.1",
+    "tailwindcss": "^3.3.3",
     "ts-node": "8.2.0",
     "tslint": "~6.1.0",
     "typescript": "4.6.4"
diff --git a/src/app/loans/common-resolvers/external-asset-owner-active-transfer.resolver.ts b/src/app/loans/common-resolvers/external-asset-owner-active-transfer.resolver.ts
index 1db52a35a..15bb8d7f2 100644
--- a/src/app/loans/common-resolvers/external-asset-owner-active-transfer.resolver.ts
+++ b/src/app/loans/common-resolvers/external-asset-owner-active-transfer.resolver.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
 import { Observable } from 'rxjs';
-import { ExternalAssetOwnerService } from '../external-asset-owner.service';
+import { ExternalAssetOwnerService } from '../services/external-asset-owner.service';
 
 @Injectable({
   providedIn: 'root'
diff --git a/src/app/loans/common-resolvers/external-asset-owner-journal-entry.resolver.ts b/src/app/loans/common-resolvers/external-asset-owner-journal-entry.resolver.ts
index bc2d887a3..75eeb5ae1 100644
--- a/src/app/loans/common-resolvers/external-asset-owner-journal-entry.resolver.ts
+++ b/src/app/loans/common-resolvers/external-asset-owner-journal-entry.resolver.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
 import { Observable, of } from 'rxjs';
-import { ExternalAssetOwnerService } from '../external-asset-owner.service';
+import { ExternalAssetOwnerService } from '../services/external-asset-owner.service';
 
 @Injectable({
   providedIn: 'root'
diff --git a/src/app/loans/common-resolvers/external-asset-owner.resolver.ts b/src/app/loans/common-resolvers/external-asset-owner.resolver.ts
index 29f1fb6af..e4f89cfdf 100644
--- a/src/app/loans/common-resolvers/external-asset-owner.resolver.ts
+++ b/src/app/loans/common-resolvers/external-asset-owner.resolver.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
 import { Observable } from 'rxjs';
-import { ExternalAssetOwnerService } from '../external-asset-owner.service';
+import { ExternalAssetOwnerService } from '../services/external-asset-owner.service';
 
 @Injectable({
   providedIn: 'root'
diff --git a/src/app/loans/common-resolvers/loan-collaterals.resolver.ts b/src/app/loans/common-resolvers/loan-collaterals.resolver.ts
new file mode 100644
index 000000000..4830a9a10
--- /dev/null
+++ b/src/app/loans/common-resolvers/loan-collaterals.resolver.ts
@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import {
+  Resolve,
+  ActivatedRouteSnapshot
+} from '@angular/router';
+import { Observable } from 'rxjs';
+import { LoansService } from '../loans.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoanCollateralsResolver implements Resolve<boolean> {
+
+  /**
+   * @param {LoansService} LoansService Loans service.
+   */
+  constructor(private loansService: LoansService) { }
+
+  /**
+   * Returns the Loans data.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const loanId = route.paramMap.get('loanId') || route.parent.paramMap.get('loanId');
+    return this.loansService.getLoanCollaterals(loanId);
+  }
+}
diff --git a/src/app/loans/loans-routing.module.ts b/src/app/loans/loans-routing.module.ts
index 4df9e9abe..6a50b55d9 100644
--- a/src/app/loans/loans-routing.module.ts
+++ b/src/app/loans/loans-routing.module.ts
@@ -61,6 +61,7 @@ import { ExternalAssetOwnerTabComponent } from './loans-view/external-asset-owne
 import { ExternalAssetOwnerResolver } from './common-resolvers/external-asset-owner.resolver';
 import { ExternalAssetOwnerActiveTransferResolver } from './common-resolvers/external-asset-owner-active-transfer.resolver';
 import { ExternalAssetOwnerJournalEntryResolver } from './common-resolvers/external-asset-owner-journal-entry.resolver';
+import { LoanCollateralsResolver } from './common-resolvers/loan-collaterals.resolver';
 
 /** Loans Route. */
 const routes: Routes = [
@@ -160,6 +161,9 @@ const routes: Routes = [
             path: 'loan-collateral',
             component: LoanCollateralTabComponent,
             data: { title: extract('Loan Collateral Details'), breadcrumb: 'Loan Collateral Details', routeParamBreadcrumb: false },
+            resolve: {
+              loanCollaterals: LoanCollateralsResolver
+            }
           },
           {
             path: 'loan-tranche-details',
diff --git a/src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.html b/src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.html
index 839e78b15..65d3fe03c 100644
--- a/src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.html
+++ b/src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.html
@@ -1,93 +1,22 @@
 <div class="tab-container mat-typography">
   <div fxFlexFill *ngIf="existActiveTransfer">
     <h3>Active Asset Transfer</h3>
-    <div fxLayout="row" fxLayoutGap="32px" class="asset-transfer-container">
-      <table>
-        <tbody>
-          <tr>
-            <td fxFlex="25%">
-              <b>Status :</b>
-            </td>
-            <td fxFlex="25%" class="left">
-              <div [ngClass]="itemStatus(activeTransferData.status)">
-                <fa-icon icon="stop"></fa-icon>
-                <span class="m-l-10 status">{{activeTransferData.status}}</span>
-              </div>
-            </td>
-            <td fxFlex="25%">
-              <b>Owner External Id :</b>
-            </td>
-            <td fxFlex="25%" class="left">
-              <mifosx-external-identifier externalId="{{activeTransferData.owner.externalId}}" completed="true"></mifosx-external-identifier>
-            </td>
-          </tr>
-          <tr>
-            <td fxFlex="25%">
-              <b>Settlement Date :</b>
-            </td>
-            <td fxFlex="25%" class="left">
-              {{activeTransferData.settlementDate | dateFormat}}
-            </td>
-            <td fxFlex="25%">
-              <b>Effective Date :</b>
-            </td>
-            <td fxFlex="25%" class="left">
-              {{activeTransferData.effectiveFrom | dateFormat}}
-            </td>
-          </tr>
-          <tr>
-            <td fxFlex="25%">
-              <b>Details :</b>
-            </td>
-            <td fxFlex="75%" class="left">
-              <table>
-                <tbody>
-                  <tr>
-                    <td fxFlex="50%"><b>Principal Outstanding :</b></td>
-                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalPrincipalOutstanding | formatNumber}}</td>
-                  </tr>
-                  <tr>
-                    <td fxFlex="50%"><b>Interest Outstanding :</b></td>
-                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalInterestOutstanding | formatNumber}}</td>
-                  </tr>
-                  <tr>
-                    <td fxFlex="50%"><b>Fees Outstanding :</b></td>
-                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalFeeChargesOutstanding | formatNumber}}</td>
-                  </tr>
-                  <tr>
-                    <td fxFlex="50%"><b>Penalties Outstanding :</b></td>
-                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalPenaltyChargesOutstanding | formatNumber}}</td>
-                  </tr>
-                  <tr>
-                    <td fxFlex="50%"><b>Outstanding :</b></td>
-                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalOutstanding | formatNumber}}</td>
-                  </tr>
-                  <tr>
-                    <td fxFlex="50%"><b>Overpaid :</b></td>
-                    <td fxFlex="50%" class="r-amount">{{activeTransferData.details.totalOverpaid | formatNumber}}</td>
-                  </tr>
-                </tbody>
-              </table>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
+    <mifosx-external-asset-transfer [transferData]="activeTransferData"></mifosx-external-asset-transfer>
   </div>
 
   <div fxLayout="row" fxLayoutAlign="start center">
 
     <h3 fxFlex="90%">External Asset Owner</h3>
 
-    <div fxFlex="10%" *ngIf="canBeSaled()" >
+    <div fxFlex="10%" *ngIf="canBeSold()" >
       <button mat-raised-button class="f-right" color="primary" (click)="saleLoan()" *mifosxHasPermission="'SALE_LOAN'">
-        <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>Sale Loan
+        <fa-icon icon="dollar-sign" class="m-r-10"></fa-icon>Sell Loan
       </button>
     </div>
 
     <div fxFlex="10%" *ngIf="canBeCancelled()" >
       <button mat-raised-button class="f-right" color="warn" (click)="cancelSaleLoan()" *mifosxHasPermission="'SALE_LOAN'">
-        <fa-icon icon="trash" class="m-r-10"></fa-icon>Cancel Sale Loan
+        <fa-icon icon="trash" class="m-r-10"></fa-icon>Cancel Sell Loan
       </button>
     </div>
 
diff --git a/src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.ts b/src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.ts
index 8ee7ab32b..cf00c7343 100644
--- a/src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.ts
+++ b/src/app/loans/loans-view/external-asset-owner-tab/external-asset-owner-tab.component.ts
@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
-import { ExternalAssetOwnerService } from 'app/loans/external-asset-owner.service';
+import { ExternalAssetOwner } from 'app/loans/services/external-asset-owner';
+import { ExternalAssetOwnerService } from 'app/loans/services/external-asset-owner.service';
 import { CancelDialogComponent } from 'app/shared/cancel-dialog/cancel-dialog.component';
 
 @Component({
@@ -22,6 +23,7 @@ export class ExternalAssetOwnerTabComponent implements OnInit {
   constructor(private route: ActivatedRoute,
     private router: Router,
     private dialog: MatDialog,
+    private externalAssetOwner: ExternalAssetOwner,
     private externalAssetOwnerService: ExternalAssetOwnerService
     ) {
     this.route.data.subscribe((data: { loanTransfersData: any, activeTransferData: any }) => {
@@ -39,52 +41,39 @@ export class ExternalAssetOwnerTabComponent implements OnInit {
   }
 
   itemCurrentStatus(item: any): string {
-    if (this.isBuyBackPending(item)) {
-      return item.status + ' PENDING';
-    }
-    return item.status;
+    return this.externalAssetOwner.itemCurrentStatus(item);
   }
 
   itemStatus(status: string): string {
-    return 'status-' + status.toLowerCase();
+    return this.externalAssetOwner.itemStatus(status);
   }
 
   isPending(item: any): boolean {
-    return (item.status === 'PENDING');
+    return this.externalAssetOwner.isPending(item);
   }
 
   isPendingOrCanceled(item: any): boolean {
-    return ((item.status === 'PENDING') || (item.status === 'CANCELLED') || this.isBuyBackPending(item));
+    return this.externalAssetOwner.isPendingOrCanceled(item);
   }
 
   isBuyBackPending(item: any): boolean {
-    return (item.status === 'BUYBACK' && item.effectiveTo === this.defaultDate);
+    return this.externalAssetOwner.isBuyBackPending(item);
   }
 
   canBeCancelled(): boolean {
-    return this.validateStatus('PENDING');
+    return this.externalAssetOwner.validateStatus(this.currentItem, 'PENDING');
   }
 
-  canBeSaled(): boolean {
-    if (this.currentItem == null) {
-      return true;
-    }
-    return ['', 'CANCELLED'].includes(this.currentItem.status) || (this.currentItem.status === 'BUYBACK' && this.currentItem.effectiveTo !== this.defaultDate);
+  canBeSold(): boolean {
+    return this.externalAssetOwner.canBeSold(this.currentItem);
   }
 
   canBeBuyed(): boolean {
-    return this.validateStatus('ACTIVE');
-  }
-
-  private validateStatus(status: string): boolean {
-    if (this.currentItem != null) {
-      return (this.currentItem.status === status);
-    }
-    return false;
+    return this.externalAssetOwner.validateStatus(this.currentItem, 'ACTIVE');
   }
 
   saleLoan(): void {
-    this.router.navigate(['../actions/Sale Loan'], { relativeTo: this.route });
+    this.router.navigate(['../actions/Sell Loan'], { relativeTo: this.route });
   }
 
   cancelSaleLoan(): void {
diff --git a/src/app/loans/loans-view/external-asset-owner-tab/external-asset-transfer/external-asset-transfer.component.html b/src/app/loans/loans-view/external-asset-owner-tab/external-asset-transfer/external-asset-transfer.component.html
new file mode 100644
index 000000000..0cef3e2d6
--- /dev/null
+++ b/src/app/loans/loans-view/external-asset-owner-tab/external-asset-transfer/external-asset-transfer.component.html
@@ -0,0 +1,72 @@
+<div fxLayout="row" fxLayoutGap="32px" class="asset-transfer-container">
+  <table>
+    <tbody>
+      <tr>
+        <td fxFlex="25%" class="m-l-5">
+          <b>Status :</b>
+        </td>
+        <td fxFlex="25%" class="m-l-5 left">
+          <div [ngClass]="itemStatus(transferData.status)">
+            <fa-icon icon="stop"></fa-icon>
+            <span class="m-l-5 status">{{transferData.status}}</span>
+          </div>
+        </td>
+        <td fxFlex="25%" class="m-l-5">
+          <b>Owner External Id :</b>
+        </td>
+        <td fxFlex="25%" class="m-l-5 left">
+          <mifosx-external-identifier externalId="{{transferData.owner.externalId}}" completed="true"></mifosx-external-identifier>
+        </td>
+      </tr>
+      <tr>
+        <td fxFlex="25%" class="m-l-5">
+          <b>Settlement Date :</b>
+        </td>
+        <td fxFlex="25%" class="m-l-5">
+          {{transferData.settlementDate | dateFormat}}
+        </td>
+        <td fxFlex="25%" class="m-l-5">
+          <b>Effective Date :</b>
+        </td>
+        <td fxFlex="25%" class="m-l-5">
+          {{transferData.effectiveFrom | dateFormat}}
+        </td>
+      </tr>
+      <tr>
+        <td fxFlex="25%" class="m-l-5">
+          <b>Details :</b>
+        </td>
+        <td fxFlex="75%" class="left">
+          <table>
+            <tbody>
+              <tr>
+                <td fxFlex="50%" class="m-l-5"><b>Principal Outstanding :</b></td>
+                <td fxFlex="50%" class="r-amount">{{transferData.details.totalPrincipalOutstanding | formatNumber}}</td>
+              </tr>
+              <tr>
+                <td fxFlex="50%" class="m-l-5"><b>Interest Outstanding :</b></td>
+                <td fxFlex="50%" class="r-amount">{{transferData.details.totalInterestOutstanding | formatNumber}}</td>
+              </tr>
+              <tr>
+                <td fxFlex="50%" class="m-l-5"><b>Fees Outstanding :</b></td>
+                <td fxFlex="50%" class="r-amount">{{transferData.details.totalFeeChargesOutstanding | formatNumber}}</td>
+              </tr>
+              <tr>
+                <td fxFlex="50%" class="m-l-5"><b>Penalties Outstanding :</b></td>
+                <td fxFlex="50%" class="r-amount">{{transferData.details.totalPenaltyChargesOutstanding | formatNumber}}</td>
+              </tr>
+              <tr>
+                <td fxFlex="50%" class="m-l-5"><b>Outstanding :</b></td>
+                <td fxFlex="50%" class="r-amount">{{transferData.details.totalOutstanding | formatNumber}}</td>
+              </tr>
+              <tr>
+                <td fxFlex="50%" class="m-l-5"><b>Overpaid :</b></td>
+                <td fxFlex="50%" class="r-amount">{{transferData.details.totalOverpaid | formatNumber}}</td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/src/app/loans/loans-view/external-asset-owner-tab/external-asset-transfer/external-asset-transfer.component.scss b/src/app/loans/loans-view/external-asset-owner-tab/external-asset-transfer/external-asset-transfer.component.scss
new file mode 100644
index 000000000..f2cf6d40e
--- /dev/null
+++ b/src/app/loans/loans-view/external-asset-owner-tab/external-asset-transfer/external-asset-transfer.component.scss
@@ -0,0 +1,8 @@
+.asset-transfer-container {
+
+  height: 150px;
+
+  .status {
+    color: black;
+  }
+}
diff --git a/src/app/loans/loans-view/external-asset-owner-tab/external-asset-transfer/external-asset-transfer.component.spec.ts b/src/app/loans/loans-view/external-asset-owner-tab/external-asset-transfer/external-asset-transfer.component.spec.ts
new file mode 100644
index 000000000..feefb23c5
--- /dev/null
+++ b/src/app/loans/loans-view/external-asset-owner-tab/external-asset-transfer/external-asset-transfer.component.spec.ts
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ExternalAssetTransferComponent } from './external-asset-transfer.component';
+
+describe('ExternalAssetTransferComponent', () => {
+  let component: ExternalAssetTransferComponent;
+  let fixture: ComponentFixture<ExternalAssetTransferComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ExternalAssetTransferComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ExternalAssetTransferComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/loans/loans-view/external-asset-owner-tab/external-asset-transfer/external-asset-transfer.component.ts b/src/app/loans/loans-view/external-asset-owner-tab/external-asset-transfer/external-asset-transfer.component.ts
new file mode 100644
index 000000000..872d1aac8
--- /dev/null
+++ b/src/app/loans/loans-view/external-asset-owner-tab/external-asset-transfer/external-asset-transfer.component.ts
@@ -0,0 +1,23 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { ExternalAssetOwner } from 'app/loans/services/external-asset-owner';
+
+@Component({
+  selector: 'mifosx-external-asset-transfer',
+  templateUrl: './external-asset-transfer.component.html',
+  styleUrls: ['./external-asset-transfer.component.scss']
+})
+export class ExternalAssetTransferComponent implements OnInit {
+  /** Input Fields Data */
+  @Input() transferData: any;
+
+  constructor(private externalAssetOwner: ExternalAssetOwner) { }
+
+  ngOnInit(): void {
+    console.log(this.transferData);
+  }
+
+  itemStatus(status: string): string {
+    return this.externalAssetOwner.itemStatus(status);
+  }
+
+}
diff --git a/src/app/loans/loans-view/loan-account-actions/add-collateral/add-collateral.component.html b/src/app/loans/loans-view/loan-account-actions/add-collateral/add-collateral.component.html
index 9a2d3c4a3..6947f6be0 100644
--- a/src/app/loans/loans-view/loan-account-actions/add-collateral/add-collateral.component.html
+++ b/src/app/loans/loans-view/loan-account-actions/add-collateral/add-collateral.component.html
@@ -36,7 +36,7 @@
         </div>
 
         <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button type="button" mat-raised-button [routerLink]="['../../loan-collateral']">Cancel</button>
           <button mat-raised-button color="primary" [disabled]="!collateralForm.valid"
             *mifosxHasPermission="'CREATE_COLLATERAL'">Submit</button>
         </mat-card-actions>
diff --git a/src/app/loans/loans-view/loan-account-actions/add-collateral/add-collateral.component.ts b/src/app/loans/loans-view/loan-account-actions/add-collateral/add-collateral.component.ts
index 89c7ece46..67622eb41 100644
--- a/src/app/loans/loans-view/loan-account-actions/add-collateral/add-collateral.component.ts
+++ b/src/app/loans/loans-view/loan-account-actions/add-collateral/add-collateral.component.ts
@@ -62,7 +62,7 @@ export class AddCollateralComponent implements OnInit {
     const collateralForm = this.collateralForm.value;
     collateralForm.locale = 'en';
     this.loanService.createLoanCollateral(loanId, collateralForm).subscribe((response: any) => {
-      this.router.navigate(['../../general'], { relativeTo: this.route });
+      this.router.navigate(['../../loan-collateral'], { relativeTo: this.route });
     });
   }
 
diff --git a/src/app/loans/loans-view/loan-account-actions/asset-transfer-loan/asset-transfer-loan.component.ts b/src/app/loans/loans-view/loan-account-actions/asset-transfer-loan/asset-transfer-loan.component.ts
index 7d1dc063d..4ecd7c11f 100644
--- a/src/app/loans/loans-view/loan-account-actions/asset-transfer-loan/asset-transfer-loan.component.ts
+++ b/src/app/loans/loans-view/loan-account-actions/asset-transfer-loan/asset-transfer-loan.component.ts
@@ -2,7 +2,7 @@ import { Component, Input, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
-import { ExternalAssetOwnerService } from 'app/loans/external-asset-owner.service';
+import { ExternalAssetOwnerService } from 'app/loans/services/external-asset-owner.service';
 import { SettingsService } from 'app/settings/settings.service';
 
 @Component({
@@ -22,7 +22,7 @@ export class AssetTransferLoanComponent implements OnInit {
   minDate = new Date(2000, 0, 1);
   /** Maximum Date allowed. */
   maxDate = new Date();
-  /** Sale Loan Form */
+  /** Sell Loan Form */
   saleLoanForm: FormGroup;
 
   constructor(private formBuilder: FormBuilder,
@@ -33,11 +33,11 @@ export class AssetTransferLoanComponent implements OnInit {
     private settingsService: SettingsService) {
       this.loanId = this.route.snapshot.params['loanId'];
       const actionName = this.route.snapshot.params['action'];
-      this.command = (actionName === 'Sale Loan') ? this.SALE_COMMAND : this.BUYBACK_COMMAND;
+      this.command = (actionName === 'Sell Loan') ? this.SALE_COMMAND : this.BUYBACK_COMMAND;
     }
 
   /**
-   * Creates the sale loan form
+   * Creates the Sell Loan form
    * and initialize with the required values
    */
   ngOnInit() {
diff --git a/src/app/loans/loans-view/loan-collateral-tab/loan-collateral-tab.component.html b/src/app/loans/loans-view/loan-collateral-tab/loan-collateral-tab.component.html
index bd5245484..597e0dfa8 100644
--- a/src/app/loans/loans-view/loan-collateral-tab/loan-collateral-tab.component.html
+++ b/src/app/loans/loans-view/loan-collateral-tab/loan-collateral-tab.component.html
@@ -1,25 +1,52 @@
 <div class="container">
 
-  <table mat-table [dataSource]="loanDetails.collateral">
+  <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px" class="action-buttons">
+    <button mat-raised-button color="primary" [routerLink]="['../actions/Add Collateral']">
+      Add Collateral
+    </button>
+  </div>
+
+  <div fxLayout="row" fxLayoutGap="32px" *ngIf="loanCollaterals?.length > 0" class="performance-history-container">
+    <table>
+      <tbody>
+        <tr>
+          <td fxFlex="25%">
+            <b>Number of Collaterals :</b>
+          </td>
+          <td fxFlex="25%" class="left">
+            {{loanCollaterals?.length | formatNumber}}
+          </td>
+          <td fxFlex="25%">
+            <b>Total Amount :</b>
+          </td>
+          <td fxFlex="25%" class="left">
+            {{totalAmount | formatNumber}}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+
+  <table mat-table *ngIf="loanCollaterals?.length > 0" [dataSource]="loanCollaterals">
 
     <ng-container matColumnDef="id">
       <th mat-header-cell *matHeaderCellDef> ID </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.clientCollateralId }} </td>
+      <td mat-cell *matCellDef="let ele"> {{ ele.id }} </td>
     </ng-container>
 
-    <ng-container matColumnDef="quantity">
-      <th mat-header-cell *matHeaderCellDef> Quantity </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.quantity }} </td>
+    <ng-container matColumnDef="currency">
+      <th mat-header-cell *matHeaderCellDef> Currency </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.currency.code }} </td>
+    </ng-container>
+
+    <ng-container matColumnDef="description">
+      <th mat-header-cell *matHeaderCellDef> Description </th>
+      <td mat-cell *matCellDef="let ele"> {{ ele.description }} </td>
     </ng-container>
 
     <ng-container matColumnDef="total">
       <th mat-header-cell *matHeaderCellDef> Total Value </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.total }} </td>
-    </ng-container>
-
-    <ng-container matColumnDef="totalCollateral">
-      <th mat-header-cell *matHeaderCellDef> Total Collateral Value </th>
-      <td mat-cell *matCellDef="let ele"> {{ ele.totalCollateral }} </td>
+      <td mat-cell *matCellDef="let ele"> {{ ele.value | currency:currencyCode:'symbol-narrow':'1.2-2' }} </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
diff --git a/src/app/loans/loans-view/loan-collateral-tab/loan-collateral-tab.component.ts b/src/app/loans/loans-view/loan-collateral-tab/loan-collateral-tab.component.ts
index 7c46490e5..ce12dd813 100644
--- a/src/app/loans/loans-view/loan-collateral-tab/loan-collateral-tab.component.ts
+++ b/src/app/loans/loans-view/loan-collateral-tab/loan-collateral-tab.component.ts
@@ -8,22 +8,28 @@ import { ActivatedRoute } from '@angular/router';
 })
 export class LoanCollateralTabComponent implements OnInit {
 
-  /** Loan Details */
-  loanDetails: any;
+  /** Loan Collateral Details */
+  loanCollaterals: any[] = [];
   /** Columns to be displayed in collateral table. */
-  displayedColumns: string[] = ['id', 'quantity', 'total', 'totalCollateral'];
+  displayedColumns: string[] = ['id', 'currency', 'description', 'total'];
+
+  totalAmount: number;
 
   /**
    * Retrieves the loans data from `resolve`.
    * @param {ActivatedRoute} route Activated Route.
    */
   constructor(private route: ActivatedRoute) {
-    this.route.parent.data.subscribe((data: { loanDetailsData: any }) => {
-      this.loanDetails = data.loanDetailsData;
+    this.route.data.subscribe((data: { loanCollaterals: any }) => {
+      this.loanCollaterals = data.loanCollaterals;
     });
   }
 
   ngOnInit() {
+    this.totalAmount = 0;
+    this.loanCollaterals.forEach((collateral: any) => {
+      this.totalAmount = this.totalAmount + collateral.value;
+    });
   }
 
 }
diff --git a/src/app/loans/loans-view/transactions-tab/transactions-tab.component.ts b/src/app/loans/loans-view/transactions-tab/transactions-tab.component.ts
index a598be1a4..745213a1c 100644
--- a/src/app/loans/loans-view/transactions-tab/transactions-tab.component.ts
+++ b/src/app/loans/loans-view/transactions-tab/transactions-tab.component.ts
@@ -162,13 +162,15 @@ export class TransactionsTabComponent implements OnInit {
     if (this.isChargeOff(transaction.type)) {
       command = 'undo-charge-off';
       operationDate = this.settingsService.businessDate;
+      payload = {};
+    } else {
+      payload = {
+        transactionDate: this.dateUtils.formatDate(operationDate && new Date(operationDate), dateFormat),
+        transactionAmount: 0,
+        dateFormat,
+        locale
+      };
     }
-    payload = {
-      transactionDate: this.dateUtils.formatDate(operationDate && new Date(operationDate), dateFormat),
-      transactionAmount: 0,
-      dateFormat,
-      locale
-    };
 
     const undoTransactionAccountDialogRef = this.dialog.open(ConfirmationDialogComponent, {
       data: { heading: 'Undo Transaction', dialogContext: `Are you sure you want undo the transaction type ${transaction.type.value} with id ${transaction.id}` }
diff --git a/src/app/loans/loans.module.ts b/src/app/loans/loans.module.ts
index fdcc80ed5..da0e03a9e 100644
--- a/src/app/loans/loans.module.ts
+++ b/src/app/loans/loans.module.ts
@@ -77,6 +77,7 @@ import { AdjustLoanChargeComponent } from './loans-view/loan-account-actions/adj
 import { ChargeOffComponent } from './loans-view/loan-account-actions/charge-off/charge-off.component';
 import { AssetTransferLoanComponent } from './loans-view/loan-account-actions/asset-transfer-loan/asset-transfer-loan.component';
 import { ExternalAssetOwnerTabComponent } from './loans-view/external-asset-owner-tab/external-asset-owner-tab.component';
+import { ExternalAssetTransferComponent } from './loans-view/external-asset-owner-tab/external-asset-transfer/external-asset-transfer.component';
 
 /**
  * Loans Module
@@ -152,7 +153,8 @@ import { ExternalAssetOwnerTabComponent } from './loans-view/external-asset-owne
     AdjustLoanChargeComponent,
     ChargeOffComponent,
     AssetTransferLoanComponent,
-    ExternalAssetOwnerTabComponent
+    ExternalAssetOwnerTabComponent,
+    ExternalAssetTransferComponent
   ],
   providers: [ ],
 })
diff --git a/src/app/loans/loans.service.ts b/src/app/loans/loans.service.ts
index fdc0c7b92..ebe96d40d 100644
--- a/src/app/loans/loans.service.ts
+++ b/src/app/loans/loans.service.ts
@@ -112,6 +112,15 @@ export class LoansService {
     return this.http.get(`/loans/${loanId}/collaterals/template`);
   }
 
+  /**
+   * Get collaterals.
+   * @param {string} loanId Loan Id.
+   * @returns {Observable<any>}
+   */
+  getLoanCollaterals(loanId: string): Observable<any> {
+    return this.http.get(`/loans/${loanId}/collaterals`);
+  }
+
   /**
    * Create Loan Collateral.
    * @param {string} loanId Loan Id.
diff --git a/src/app/loans/external-asset-owner.service.ts b/src/app/loans/services/external-asset-owner.service.ts
similarity index 68%
rename from src/app/loans/external-asset-owner.service.ts
rename to src/app/loans/services/external-asset-owner.service.ts
index 9e1f86770..ae3a00c7d 100644
--- a/src/app/loans/external-asset-owner.service.ts
+++ b/src/app/loans/services/external-asset-owner.service.ts
@@ -7,6 +7,8 @@ import { Observable } from 'rxjs';
 })
 export class ExternalAssetOwnerService {
 
+  basePath = '/external-asset-owners';
+
   constructor(private http: HttpClient) { }
 
   /**
@@ -17,7 +19,7 @@ export class ExternalAssetOwnerService {
    */
   executeExternalAssetOwnerLoanCommand(loanId: string, data: any, command: string): Observable<any> {
     const httpParams = new HttpParams().set('command', command);
-    return this.http.post(`/external-asset-owners/transfers/loans/${loanId}`, data, { params: httpParams });
+    return this.http.post(`${this.basePath}/transfers/loans/${loanId}`, data, { params: httpParams });
   }
 
   /**
@@ -28,7 +30,7 @@ export class ExternalAssetOwnerService {
    */
   executeExternalAssetOwnerTransferCommand(transferId: string, data: any, command: string): Observable<any> {
     const httpParams = new HttpParams().set('command', command);
-    return this.http.post(`/external-asset-owners/transfers/${transferId}`, data, { params: httpParams });
+    return this.http.post(`${this.basePath}/transfers/${transferId}`, data, { params: httpParams });
   }
 
   /**
@@ -37,7 +39,7 @@ export class ExternalAssetOwnerService {
    */
   retrieveExternalAssetOwnerTransfers(loanId: string): Observable<any> {
     const httpParams = new HttpParams().set('loanId', loanId);
-    return this.http.get(`/external-asset-owners/transfers`, { params: httpParams });
+    return this.http.get(`${this.basePath}/transfers`, { params: httpParams });
   }
 
   /**
@@ -46,7 +48,7 @@ export class ExternalAssetOwnerService {
    */
   retrieveExternalAssetOwnerActiveTransfer(loanId: string): Observable<any> {
     const httpParams = new HttpParams().set('loanId', loanId);
-    return this.http.get(`/external-asset-owners/transfers/active-transfer`, { params: httpParams });
+    return this.http.get(`${this.basePath}/transfers/active-transfer`, { params: httpParams });
   }
 
   /**
@@ -54,7 +56,15 @@ export class ExternalAssetOwnerService {
    * @returns {Observable<any>}
    */
   retrieveExternalAssetOwnerTransferJournalEntries(transferId: string): Observable<any> {
-    return this.http.get(`/external-asset-owners/transfers/${transferId}/journal-entries`);
+    return this.http.get(`${this.basePath}/transfers/${transferId}/journal-entries`);
+  }
+
+  /**
+   * @param {any} request Transfer Id
+   * @returns {Observable<any>}
+   */
+  searchExternalAssetOwnerTransfer(request: any): Observable<any> {
+    return this.http.post(`${this.basePath}/search`, request);
   }
 
 }
diff --git a/src/app/loans/services/external-asset-owner.ts b/src/app/loans/services/external-asset-owner.ts
new file mode 100644
index 000000000..e9d183f93
--- /dev/null
+++ b/src/app/loans/services/external-asset-owner.ts
@@ -0,0 +1,55 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ExternalAssetOwner {
+  defaultDate = '9999-12-31';
+
+  validateStatus(item: any, status: string): boolean {
+    if (item != null) {
+      return (item.status === status);
+    }
+    return false;
+  }
+
+  itemCurrentStatus(item: any): string {
+    if (this.isBuyBackPending(item)) {
+      return item.status + ' PENDING';
+    }
+    return item.status;
+  }
+
+  itemStatus(status: string): string {
+    return 'status-' + status.toLowerCase();
+  }
+
+  isPending(item: any): boolean {
+    return (item.status === 'PENDING');
+  }
+
+  isPendingOrCanceled(item: any): boolean {
+    return ((item.status === 'PENDING') || (item.status === 'CANCELLED') || this.isBuyBackPending(item));
+  }
+
+  isBuyBackPending(item: any): boolean {
+    return (item.status === 'BUYBACK' && item.effectiveTo === this.defaultDate);
+  }
+
+  canBeCancelled(item: any): boolean {
+    return this.validateStatus(item, 'PENDING');
+  }
+
+  canBeSold(item: any): boolean {
+    if (item == null) {
+      return true;
+    }
+    return ['', 'CANCELLED'].includes(item.status)
+      || (item.status === 'BUYBACK' && item.effectiveTo !== this.defaultDate);
+  }
+
+  canBeBuyed(item: any): boolean {
+    return this.validateStatus(item, 'ACTIVE');
+  }
+
+}
diff --git a/src/app/organization/investors/investors.component.html b/src/app/organization/investors/investors.component.html
index ae7690e7b..92fbc3130 100644
--- a/src/app/organization/investors/investors.component.html
+++ b/src/app/organization/investors/investors.component.html
@@ -1,84 +1,145 @@
-<div class="container" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+<mat-card class="container">
 
-  <mat-form-field fxFlex="31%">
-    <mat-label>{{ 'labels.inputs.Filter' | translate }}</mat-label>
-    <mat-select [formControl]="entryTypeFilter">
-      <mat-option *ngFor="let filter of entryTypeFilterData" [value]="filter.value">
-        {{ filter.option }}
-      </mat-option>
-    </mat-select>
-  </mat-form-field>
+  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
-  <mat-form-field fxFlex="31%" (click)="transferDateFromPicker.open()">
-    <mat-label>Transfer Date From</mat-label>
-    <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transferDateFromPicker" [formControl]="transferDateFrom">
-    <mat-datepicker-toggle matSuffix [for]="transferDateFromPicker"></mat-datepicker-toggle>
-    <mat-datepicker #transferDateFromPicker></mat-datepicker>
-  </mat-form-field>
+    <mat-form-field fxFlex="22%" (click)="effectiveFromDatePicker.open()">
+      <mat-label>Effective Date From</mat-label>
+      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="effectiveFromDatePicker"
+        [formControl]="effectiveFromDate">
+      <mat-datepicker-toggle matSuffix [for]="effectiveFromDatePicker"></mat-datepicker-toggle>
+      <mat-datepicker #effectiveFromDatePicker></mat-datepicker>
+    </mat-form-field>
 
-  <mat-form-field fxFlex="31%" (click)="transferDateToPicker.open()">
-    <mat-label>Transfer Date To</mat-label>
-    <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="transferDateToPicker" [formControl]="transferDateTo">
-    <mat-datepicker-toggle matSuffix [for]="transferDateToPicker"></mat-datepicker-toggle>
-    <mat-datepicker #transferDateToPicker></mat-datepicker>
-  </mat-form-field>
+    <mat-form-field fxFlex="22%" (click)="effectiveToDatePicker.open()">
+      <mat-label>Effective Date To</mat-label>
+      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="effectiveToDatePicker"
+        [formControl]="effectiveToDate">
+      <mat-datepicker-toggle matSuffix [for]="effectiveToDatePicker"></mat-datepicker-toggle>
+      <mat-datepicker #effectiveToDatePicker></mat-datepicker>
+    </mat-form-field>
 
-  <mat-form-field fxFlex="31%">
-    <mat-label>Transfer External Id</mat-label>
-    <input matInput [formControl]="transferExternalId">
-  </mat-form-field>
+    <mat-form-field fxFlex="22%" (click)="settlementFromDatePicker.open()">
+      <mat-label>Settlement Date From</mat-label>
+      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="settlementFromDatePicker"
+        [formControl]="settlementFromDate">
+      <mat-datepicker-toggle matSuffix [for]="settlementFromDatePicker"></mat-datepicker-toggle>
+      <mat-datepicker #settlementFromDatePicker></mat-datepicker>
+    </mat-form-field>
 
-</div>
+    <mat-form-field fxFlex="22%" (click)="settlementToDatePicker.open()">
+      <mat-label>Settlement Date To</mat-label>
+      <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="settlementToDatePicker"
+        [formControl]="settlementToDate">
+      <mat-datepicker-toggle matSuffix [for]="settlementToDatePicker"></mat-datepicker-toggle>
+      <mat-datepicker #settlementToDatePicker></mat-datepicker>
+    </mat-form-field>
 
-<div class="mat-elevation-z8 container">
+    <mat-form-field fxFlex="60%">
+      <mat-label>Transaction ID</mat-label>
+      <input matInput [formControl]="searchText">
+    </mat-form-field>
 
-  <table mat-table [dataSource]="dataSource" matSort>
-
-    <ng-container matColumnDef="investor">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Investor </th>
-      <td mat-cell *matCellDef="let item">  </td>
+    <ng-container fxFlex="40%" class="right">
+      <button mat-raised-button color="primary" (click)="searchEAO()">
+        <fa-icon icon="search" class="m-r-10"></fa-icon> Search
+      </button>
     </ng-container>
+  </div>
 
-    <ng-container matColumnDef="loanAccount">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Loan </th>
-      <td mat-cell *matCellDef="let item">  </td>
-    </ng-container>
+  <div class="mat-elevation-z8 container">
+    <mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
 
-    <ng-container matColumnDef="totalAmount">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Total Amount </th>
-      <td mat-cell *matCellDef="let item">  </td>
-    </ng-container>
+    <table mat-table [dataSource]="dataSource" matSort *ngIf="existsDataToFilter" multiTemplateDataRows>
 
-    <ng-container matColumnDef="principal">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Principal </th>
-      <td mat-cell *matCellDef="let item">  </td>
-    </ng-container>
+      <ng-container matColumnDef="status">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Status </th>
+        <td mat-cell *matCellDef="let item">
+          <div [ngClass]="itemStatus(item.status)">
+            <fa-icon icon="stop"></fa-icon>
+            <span class="m-l-10 status">{{item.status}}</span>
+          </div>
+        </td>
+      </ng-container>
 
-    <ng-container matColumnDef="interest">
-      <th mat-header-cell *matHeaderCellDef> Interest </th>
-      <td mat-cell *matCellDef="let item">  </td>
-    </ng-container>
+      <ng-container matColumnDef="effectiveFrom">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Effective From Date </th>
+        <td mat-cell *matCellDef="let item"> {{ item.effectiveFrom | dateFormat }} </td>
+      </ng-container>
 
-    <ng-container matColumnDef="fees">
-      <th mat-header-cell *matHeaderCellDef> Fees </th>
-      <td mat-cell *matCellDef="let item">  </td>
-    </ng-container>
+      <ng-container matColumnDef="ownerExternalId">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Owner </th>
+        <td mat-cell *matCellDef="let item">
+          <mifosx-external-identifier externalId="{{item.owner.externalId}}"></mifosx-external-identifier>
+        </td>
+      </ng-container>
 
-    <ng-container matColumnDef="penalties">
-      <th mat-header-cell *matHeaderCellDef> Penalties </th>
-      <td mat-cell *matCellDef="let item">  </td>
-    </ng-container>
+      <ng-container matColumnDef="loanAccount">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Loan </th>
+        <td mat-cell *matCellDef="let item"> {{ item.loan.loanId }} </td>
+      </ng-container>
 
-    <ng-container matColumnDef="actions">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
-      <td mat-cell *matCellDef="let item">  </td>
-    </ng-container>
+      <ng-container matColumnDef="transferExternalId">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Transfer </th>
+        <td mat-cell *matCellDef="let item">
+          <mifosx-external-identifier externalId="{{item.transferExternalId}}"></mifosx-external-identifier>
+        </td>
+      </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['transactions/view', row.transactionId]" class="select-row"></tr>
+      <ng-container matColumnDef="settlementDate">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Settlement Date </th>
+        <td mat-cell *matCellDef="let item"> {{ item.settlementDate | dateFormat }} </td>
+      </ng-container>
 
-  </table>
+      <ng-container matColumnDef="purchasePriceRatio">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Purchase Price Ratio </th>
+        <td mat-cell *matCellDef="let item"> {{ item.purchasePriceRatio | number }} </td>
+      </ng-container>
 
-  <mat-paginator [pageSize]="50" [pageSizeOptions]="[50, 100, 200, 500]" showFirstLastButtons></mat-paginator>
+      <ng-container matColumnDef="totalAmount">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> Total Amount </th>
+        <td mat-cell *matCellDef="let item">
+          <span *ngIf="item.details">
+            {{ item.details.totalOutstanding | number }}
+          </span>
+        </td>
+      </ng-container>
 
-</div>
+      <ng-container matColumnDef="actions">
+        <th mat-header-cell class="center" *matHeaderCellDef> Actions </th>
+        <td mat-cell *matCellDef="let item" class="center td-min-space">
+          <button class="account-action-button" *ngIf="!isPendingOrCanceled(item)" mat-raised-button color="primary" matTooltip="View Journal Entries"
+            matTooltipPosition="left" (click)="routeJournalEntry($event)" [routerLink]="['/', 'journal-entry', 'view-transfer', item.transferId]">
+            <i class="fa fa-arrow-circle-right"></i>
+          </button>
+        </td>
+      </ng-container>
+
+      <ng-container matColumnDef="expandedDetail">
+        <td mat-cell *matCellDef="let item" [attr.colspan]="displayedColumns.length">
+          <div class="element-detail"
+          [@detailExpand]="item.transferId == expandedRowId ? 'expanded' : 'collapsed'">
+            <mifosx-external-asset-transfer [transferData]="item"></mifosx-external-asset-transfer>
+          </div>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let item; columns: displayedColumns;"
+        class="element-row"
+        [class.expanded-row]="expandedRowId === item.transferId"
+        (click)="expandedRowId = expandedRowId === item.transferId ? null : item.transferId"></tr>
+      <tr mat-row *matRowDef="let item; columns: ['expandedDetail']" class="detail-row"></tr>
+    </table>
+
+    <mat-paginator [pageSize]="pageSize" [pageSizeOptions]="[50, 100, 200]" [length]="totalRows" (page)="pageChanged($event)"
+      showFirstLastButtons *ngIf="existsDataToFilter"></mat-paginator>
+  </div>
+
+  <div class="alert" *ngIf="!existsDataToFilter">
+    <div class="message">
+      <i class="fa fa-exclamation-circle alert-check"></i>
+      No data was found
+    </div>
+  </div>
+
+</mat-card>
diff --git a/src/app/organization/investors/investors.component.scss b/src/app/organization/investors/investors.component.scss
index e69de29bb..82de60279 100644
--- a/src/app/organization/investors/investors.component.scss
+++ b/src/app/organization/investors/investors.component.scss
@@ -0,0 +1,40 @@
+.status {
+  color: black;
+}
+
+.account-action-button{
+  min-width: 26px;
+  padding: 0 0 3px 0;
+  margin: 0 2%;
+  line-height: 25px;
+}
+
+.item-detail {
+  overflow: hidden;
+  display: flex;
+}
+
+tr.detail-row {
+  height: 0;
+}
+
+tr.element-row:hover {
+  cursor: pointer;
+}
+
+tr.element-row:not(.expanded-row):hover {
+  background: whitesmoke;
+}
+
+tr.element-row:not(.expanded-row):active {
+  background: #efefef;
+}
+
+.element-row td {
+  border-bottom-width: 0;
+}
+
+.element-detail {
+  overflow: hidden;
+  display: flex;
+}
diff --git a/src/app/organization/investors/investors.component.ts b/src/app/organization/investors/investors.component.ts
index 45f21299a..2c21e9725 100644
--- a/src/app/organization/investors/investors.component.ts
+++ b/src/app/organization/investors/investors.component.ts
@@ -1,11 +1,25 @@
-import { Component, OnInit } from '@angular/core';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+import { Component, OnInit, ViewChild } from '@angular/core';
 import { FormControl } from '@angular/forms';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
+import { Dates } from 'app/core/utils/dates';
+import { ExternalAssetOwner } from 'app/loans/services/external-asset-owner';
+import { ExternalAssetOwnerService } from 'app/loans/services/external-asset-owner.service';
+import { SettingsService } from 'app/settings/settings.service';
 
 @Component({
   selector: 'mifosx-investors',
   templateUrl: './investors.component.html',
-  styleUrls: ['./investors.component.scss']
+  styleUrls: ['./investors.component.scss'],
+  animations: [
+    trigger('detailExpand', [
+      state('collapsed', style({height: '0px', minHeight: '0'})),
+      state('expanded', style({height: '*'})),
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+    ]),
+  ],
 })
 export class InvestorsComponent implements OnInit {
 
@@ -14,9 +28,28 @@ export class InvestorsComponent implements OnInit {
   /** Maximum transaction date allowed. */
   maxDate = new Date();
 
-  transferDateFrom = new FormControl('');
-  transferDateTo = new FormControl('');
-  transferExternalId = new FormControl('');
+  searchText = new FormControl('');
+  effectiveFromDate = new FormControl('');
+  effectiveToDate = new FormControl('');
+  settlementFromDate = new FormControl('');
+  settlementToDate = new FormControl('');
+
+  dataSource: MatTableDataSource<any> = new MatTableDataSource();
+  existsDataToFilter = false;
+  expandedRowId: number | null;
+
+  totalRows: number;
+  isLoading = false;
+
+  pageSize = 50;
+  currentPage = 0;
+  filterText = '';
+
+  sortAttribute = '';
+  sortDirection = '';
+
+  @ViewChild(MatPaginator) paginator: MatPaginator;
+  @ViewChild(MatSort) sort: MatSort;
 
   /** Entry type filter form control. */
   entryTypeFilter = new FormControl('');
@@ -27,7 +60,7 @@ export class InvestorsComponent implements OnInit {
       value: ''
     },
     {
-      option: 'Sale',
+      option: 'Sell',
       value: true
     },
     {
@@ -37,13 +70,87 @@ export class InvestorsComponent implements OnInit {
   ];
 
   /** Columns to be displayed in investors table. */
-  displayedColumns: string[] = ['investor', 'loanAccount', 'totalAmount', 'principal', 'interest', 'fees', 'penalties', 'actions'];
-  /** Data source for investors table. */
-  dataSource: MatTableDataSource<any> = new MatTableDataSource();
-
-  constructor() { }
+  displayedColumns: string[] = ['status', 'effectiveFrom', 'ownerExternalId', 'loanAccount', 'transferExternalId', 'settlementDate', 'purchasePriceRatio', 'totalAmount', 'actions'];
+  constructor(private settingsService: SettingsService,
+    private externalAssetOwner: ExternalAssetOwner,
+    private externalAssetOwnerService: ExternalAssetOwnerService,
+    private dateUtils: Dates) { }
 
   ngOnInit(): void {
+    this.maxDate = this.settingsService.maxAllowedDate;
+    this.searchEAO();
   }
 
+  itemStatus(status: string): string {
+    return this.externalAssetOwner.itemStatus(status);
+  }
+
+  isPending(item: any): boolean {
+    return this.externalAssetOwner.isPending(item);
+  }
+
+  isPendingOrCanceled(item: any): boolean {
+    return this.externalAssetOwner.isPendingOrCanceled(item);
+  }
+
+  isBuyBackPending(item: any): boolean {
+    return this.externalAssetOwner.isBuyBackPending(item);
+  }
+
+  canBeCancelled(item: any): boolean {
+    return this.externalAssetOwner.validateStatus(item, 'PENDING');
+  }
+
+  canBeSold(item: any): boolean {
+    return this.externalAssetOwner.canBeSold(item);
+  }
+
+  canBeBuyed(item: any): boolean {
+    return this.externalAssetOwner.validateStatus(item, 'ACTIVE');
+  }
+
+  searchEAO(): void {
+    this.isLoading = true;
+    const payload: any = {
+      'request': {},
+      'page': this.currentPage,
+      'size': this.pageSize
+    };
+    const dateFormat = 'yyyy-MM-dd';
+    const request: any = {};
+    if (this.searchText.value) {
+      request['text'] = this.searchText.value;
+    }
+    if (this.effectiveFromDate.value) {
+      request['effectiveFromDate'] = this.dateUtils.formatDate(this.effectiveFromDate.value, dateFormat);
+    }
+    if (this.effectiveToDate.value) {
+      request['effectiveToDate'] = this.dateUtils.formatDate(this.effectiveToDate.value, dateFormat);
+    }
+    if (this.settlementFromDate.value) {
+      request['settlementFromDate'] = this.dateUtils.formatDate(this.settlementFromDate.value, dateFormat);
+    }
+    if (this.settlementToDate.value) {
+      request['settlementToDate'] = this.dateUtils.formatDate(this.settlementToDate.value, dateFormat);
+    }
+    payload['request'] = request;
+    this.externalAssetOwnerService.searchExternalAssetOwnerTransfer(payload).subscribe((response: any) => {
+      this.totalRows = response.totalElements;
+      this.existsDataToFilter = (response.totalElements > 0);
+      this.dataSource.data = response.content;
+      this.isLoading = false;
+    });
+
+  }
+
+  pageChanged(event: PageEvent) {
+    this.pageSize = event.pageSize;
+    this.currentPage = event.pageIndex;
+    this.searchEAO();
+  }
+
+  private resetPaginator() {
+    this.currentPage = 0;
+    this.paginator.firstPage();
+  }
 }
diff --git a/src/app/organization/organization.module.ts b/src/app/organization/organization.module.ts
index a8ebb0a95..2fb9a681a 100644
--- a/src/app/organization/organization.module.ts
+++ b/src/app/organization/organization.module.ts
@@ -78,6 +78,8 @@ import { CreateFundComponent } from './manage-funds/create-fund/create-fund.comp
 import { EditFundComponent } from './manage-funds/edit-fund/edit-fund.component';
 import { ViewFundComponent } from './manage-funds/view-fund/view-fund.component';
 import { InvestorsComponent } from './investors/investors.component';
+import { ExternalAssetTransferComponent } from 'app/loans/loans-view/external-asset-owner-tab/external-asset-transfer/external-asset-transfer.component';
+import { LoansModule } from 'app/loans/loans.module';
 
 
 /**
@@ -90,7 +92,8 @@ import { InvestorsComponent } from './investors/investors.component';
     SharedModule,
     PipesModule,
     DirectivesModule,
-    OrganizationRoutingModule
+    OrganizationRoutingModule,
+    LoansModule
   ],
   declarations: [
     OrganizationComponent,
@@ -155,7 +158,7 @@ import { InvestorsComponent } from './investors/investors.component';
     CreateFundComponent,
     EditFundComponent,
     ViewFundComponent,
-    InvestorsComponent,
+    InvestorsComponent
   ],
   providers: [
     CreateHoliday,
diff --git a/src/app/products/collaterals/create-collateral/create-collateral.component.html b/src/app/products/collaterals/create-collateral/create-collateral.component.html
index b55bb8369..768e2dd9d 100644
--- a/src/app/products/collaterals/create-collateral/create-collateral.component.html
+++ b/src/app/products/collaterals/create-collateral/create-collateral.component.html
@@ -1,5 +1,5 @@
 <div class="container">
-    
+
     <mat-card>
 
         <form [formGroup]="collateralForm" (ngSubmit)="submit()">
@@ -56,7 +56,7 @@
                     </mat-form-field>
 
                 </div>
-                
+
             </mat-card-content>
 
             <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
@@ -68,4 +68,4 @@
 
     </mat-card>
 
-</div>
\ No newline at end of file
+</div>
diff --git a/src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.ts b/src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.ts
index ca3380361..f963d54e0 100644
--- a/src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.ts
+++ b/src/app/products/loan-products/loan-product-stepper/loan-product-settings-step/loan-product-settings-step.component.ts
@@ -96,13 +96,13 @@ export class LoanProductSettingsStepComponent implements OnInit {
 
     if (this.loanProductsTemplate.delinquencyBucket) {
       this.loanProductSettingsForm.patchValue({
-        'disbursedAmountPercentageForDownPayment': this.loanProductsTemplate.disbursedAmountPercentageForDownPayment || 0
+        'delinquencyBucketId': this.loanProductsTemplate.delinquencyBucket.id
       });
     }
 
     if (this.loanProductsTemplate.enableDownPayment) {
       this.loanProductSettingsForm.patchValue({
-        'delinquencyBucketId': this.loanProductsTemplate.delinquencyBucket.id
+        'disbursedAmountPercentageForDownPayment': this.loanProductsTemplate.disbursedAmountPercentageForDownPayment || 0
       });
     }
 
diff --git a/src/app/search/search-page/search-page.component.html b/src/app/search/search-page/search-page.component.html
index 0e1c9f34a..1339e8b24 100644
--- a/src/app/search/search-page/search-page.component.html
+++ b/src/app/search/search-page/search-page.component.html
@@ -18,7 +18,9 @@
 
       <ng-container matColumnDef="entityAccount">
         <th mat-header-cell *matHeaderCellDef> Account No </th>
-        <td mat-cell *matCellDef="let entity" class="view-details"> {{entity.entityAccountNo}} </td>
+        <td mat-cell *matCellDef="let entity" class="view-details">
+          <mifosx-account-number display="left" accountNo="{{entity.entityAccountNo}}"></mifosx-account-number>
+        </td>
       </ng-container>
 
       <ng-container matColumnDef="externalId">
diff --git a/src/app/shared/external-identifier/external-identifier.component.html b/src/app/shared/external-identifier/external-identifier.component.html
index 9f6aa167d..fea557279 100644
--- a/src/app/shared/external-identifier/external-identifier.component.html
+++ b/src/app/shared/external-identifier/external-identifier.component.html
@@ -1,4 +1,4 @@
-<span (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()">
+<span (mouseenter)="mouseEnter()" (mouseleave)="mouseLeave()" *ngIf="!emptyValue">
   <span (click)="copyValue()" *ngIf="displayL && iconVisible"><fa-icon icon="copy" size="sm" title="Copy External Id"></fa-icon></span>
   <span class="m-l-3" *ngIf="displayL && !completed && iconVisible && isLongValue()"><fa-icon icon="eye" size="sm" [title]="externalId"></fa-icon></span>
   <span class="m-l-5" *ngIf="!completed">{{ externalId | externalIdentifier }}</span>
diff --git a/src/app/shared/external-identifier/external-identifier.component.ts b/src/app/shared/external-identifier/external-identifier.component.ts
index ce1595171..fbd37be51 100644
--- a/src/app/shared/external-identifier/external-identifier.component.ts
+++ b/src/app/shared/external-identifier/external-identifier.component.ts
@@ -15,11 +15,13 @@ export class ExternalIdentifierComponent implements OnInit {
   iconVisible = false;
   displayL = false;
   displayR = true;
+  emptyValue = false;
 
   constructor(private clipboard: Clipboard,
     private alertService: AlertService) { }
 
   ngOnInit(): void {
+    this.emptyValue = (!this.externalId || this.externalId === '');
     this.displayL = (this.display === 'left');
     this.displayR = (this.display === 'right');
   }
diff --git a/src/app/web-app.component.ts b/src/app/web-app.component.ts
index 728f7f8c9..7e301d3b3 100644
--- a/src/app/web-app.component.ts
+++ b/src/app/web-app.component.ts
@@ -25,6 +25,7 @@ import { SettingsService } from './settings/settings.service';
 import { Alert } from './core/alert/alert.model';
 import { KeyboardShortcutsConfiguration } from './keyboards-shortcut-config';
 import { Dates } from './core/utils/dates';
+import { animate, style, transition, trigger } from '@angular/animations';
 
 /** Initialize Logger */
 const log = new Logger('MifosX');
@@ -35,7 +36,19 @@ const log = new Logger('MifosX');
 @Component({
   selector: 'mifosx-web-app',
   templateUrl: './web-app.component.html',
-  styleUrls: ['./web-app.component.scss']
+  styleUrls: ['./web-app.component.scss'],
+  animations: [
+    trigger('opacityScale', [
+      transition(':enter', [
+          style({ opacity: 0, transform: 'scale(.95)' }),
+          animate('100ms ease-out', style({  opacity: 1, transform: 'scale(1)' }))
+      ]),
+      transition(':leave', [
+          style({ opacity: 1, transform: 'scale(1)' }),
+          animate('75ms ease-in', style({ opacity: 0, transform: 'scale(.95)' }))
+      ])
+    ])
+  ]
 })
 export class WebAppComponent implements OnInit {
 
diff --git a/src/index.html b/src/index.html
index b1e566f8b..eee9fa4e2 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="h-full bg-gray-100">
 <head>
   <meta charset="utf-8"/>
   <title>{{ 'APP_NAME' | translate }}</title>
@@ -18,7 +18,7 @@
   <!-- Load environment variables -->
   <script src="assets/env.js"></script>
 </head>
-<body>
+<body class="h-full">
   <!--[if lt IE 10]>
     <p>
       You are using an <strong>outdated</strong> browser.
diff --git a/src/main.scss b/src/main.scss
index c5b646a94..9b2cf8c9a 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -4,7 +4,7 @@
  */
 
 // Import Default Theme for MifosX
-@import "theme/custom/denim-yellowgreen";
+@import "theme/mifosx-theme";
 
 // Global Imports
 /* You can add global styles to this file, and also import other style files */
diff --git a/src/theme/_material-palette.scss b/src/theme/_material-palette.scss
new file mode 100644
index 000000000..61e9accf0
--- /dev/null
+++ b/src/theme/_material-palette.scss
@@ -0,0 +1,21 @@
+$primary-palette: (
+  100: #5ba2ec,
+  500: #1074b9,
+  700: #004989,
+  contrast: (
+    100: rgba(black, 0.87),
+    500: white,
+    700: white
+  )
+);
+
+$accent-palette: (
+  100: #e7ffa5,
+  500: #b4d575,
+  700: #83a447,
+  contrast: (
+    100: rgba(black, 0.87),
+    500: rgba(black, 0.87),
+    700: rgba(black, 0.87)
+  )
+);
diff --git a/src/theme/_tailwind.scss b/src/theme/_tailwind.scss
new file mode 100644
index 000000000..b5c61c956
--- /dev/null
+++ b/src/theme/_tailwind.scss
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/theme/_variables.scss b/src/theme/_variables.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/theme/custom/pictonblue-yellowgreen.scss b/src/theme/custom/pictonblue-yellowgreen.scss
deleted file mode 100644
index e2b9d92bb..000000000
--- a/src/theme/custom/pictonblue-yellowgreen.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@use '@angular/material' as mat;
-// Plus imports for other components in your app.
-@import '../../app/clients/clients-view/clients-view.component-theme.scss';
-@import '../../app/groups/groups-view/groups-view.component-theme.scss';
-@import '../../app/centers/centers-view/centers-view.component-theme.scss';
-@import '../../app/home/dashboard/dashboard.component-theme.scss';
-@import '../../app/loans/loans-view/loans-view.component-theme.scss';
-@import '../../app/savings/savings-account-view/savings-account-view.component-theme.scss';
-@import '../../app/shares/shares-account-view/shares-account-view.component-theme.scss';
-@import '../../app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component-theme.scss';
-@import '../../app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component-theme.scss';
-
-// Custom material palette
-$mat-picton-blue: (
-  100: #6ce0ff,
-  500: #1daeec,
-  700: #007fb9,
-  contrast: (
-    100: rgba(black, 0.87),
-    500: rgba(black, 0.87),
-    700: rgba(black, 0.87)
-  )
-);
-
-$mat-yellow-green: (
-  100: #e7ffa5,
-  500: #b4d575,
-  700: #83a447,
-  contrast: (
-    100: rgba(black, 0.87),
-    500: rgba(black, 0.87),
-    700: rgba(black, 0.87)
-  )
-);
-
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
-@include mat.core();
-
-// Define the palettes for your theme using the Material Design palettes available in palette.scss
-// (imported above). For each palette, you can optionally specify a default, lighter, and darker
-// hue. Available color palettes: https://material.io/design/color/
-$mifosx-app-primary: mat.define-palette($mat-picton-blue);
-$mifosx-app-accent:  mat.define-palette($mat-yellow-green);
-
-// The warn palette is optional (defaults to red).
-$mifosx-app-warn:    mat.define-palette(mat.$red-palette);
-
-// Create the theme object (a Sass map containing all of the palettes).
-$mifosx-app-theme: mat.define-light-theme($mifosx-app-primary, $mifosx-app-accent, $mifosx-app-warn);
-
-// Include theme styles for core and each component used in your app.
-// Alternatively, you can import and @include the theme mixins for each component
-// that you are using.
-@include mat.all-component-themes($mifosx-app-theme);
-@include clients-view-component-theme($mifosx-app-theme);
-@include groups-view-component-theme($mifosx-app-theme);
-@include centers-view-component-theme($mifosx-app-theme);
-@include dashboard-component-theme($mifosx-app-theme);
-@include loans-view-component-theme($mifosx-app-theme);
-@include savings-account-view-component-theme($mifosx-app-theme);
-@include shares-account-view-component-theme($mifosx-app-theme);
-@include fixed-deposits-account-view-component-theme($mifosx-app-theme);
-@include recurring-deposits-account-view-component-theme($mifosx-app-theme);
diff --git a/src/theme/deeppurple-amber.scss b/src/theme/deeppurple-amber.scss
deleted file mode 100644
index 0409bbbc2..000000000
--- a/src/theme/deeppurple-amber.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";
diff --git a/src/theme/indigo-pink.scss b/src/theme/indigo-pink.scss
deleted file mode 100644
index 4455d9278..000000000
--- a/src/theme/indigo-pink.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import "~@angular/material/prebuilt-themes/indigo-pink.css";
diff --git a/src/theme/custom/denim-yellowgreen.scss b/src/theme/mifosx-theme.scss
similarity index 59%
rename from src/theme/custom/denim-yellowgreen.scss
rename to src/theme/mifosx-theme.scss
index 107e1747c..4efc46dfc 100644
--- a/src/theme/custom/denim-yellowgreen.scss
+++ b/src/theme/mifosx-theme.scss
@@ -1,37 +1,18 @@
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
-@import '../../app/clients/clients-view/clients-view.component-theme.scss';
-@import '../../app/groups/groups-view/groups-view.component-theme.scss';
-@import '../../app/centers/centers-view/centers-view.component-theme.scss';
-@import '../../app/home/dashboard/dashboard.component-theme.scss';
-@import '../../app/loans/loans-view/loans-view.component-theme.scss';
-@import '../../app/savings/savings-account-view/savings-account-view.component-theme.scss';
-@import '../../app/shares/shares-account-view/shares-account-view.component-theme.scss';
-@import '../../app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component-theme.scss';
-@import '../../app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component-theme.scss';
 
 // Custom material palette
-$mat-denim: (
-  100: #5ba2ec,
-  500: #1074b9,
-  700: #004989,
-  contrast: (
-    100: rgba(black, 0.87),
-    500: white,
-    700: white
-  )
-);
+@import 'material-palette';
 
-$mat-yellow-green: (
-  100: #e7ffa5,
-  500: #b4d575,
-  700: #83a447,
-  contrast: (
-    100: rgba(black, 0.87),
-    500: rgba(black, 0.87),
-    700: rgba(black, 0.87)
-  )
-);
+// Plus imports for other components in your app.
+@import '../app/clients/clients-view/clients-view.component-theme.scss';
+@import '../app/groups/groups-view/groups-view.component-theme.scss';
+@import '../app/centers/centers-view/centers-view.component-theme.scss';
+@import '../app/home/dashboard/dashboard.component-theme.scss';
+@import '../app/loans/loans-view/loans-view.component-theme.scss';
+@import '../app/savings/savings-account-view/savings-account-view.component-theme.scss';
+@import '../app/shares/shares-account-view/shares-account-view.component-theme.scss';
+@import '../app/deposits/fixed-deposits/fixed-deposit-account-view/fixed-deposit-account-view.component-theme.scss';
+@import '../app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component-theme.scss';
 
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
@@ -41,8 +22,8 @@ $mat-yellow-green: (
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$mifosx-app-primary: mat.define-palette($mat-denim);
-$mifosx-app-accent:  mat.define-palette($mat-yellow-green);
+$mifosx-app-primary: mat.define-palette($primary-palette);
+$mifosx-app-accent:  mat.define-palette($accent-palette);
 
 // The warn palette is optional (defaults to red).
 $mifosx-app-warn:    mat.define-palette(mat.$red-palette);
diff --git a/src/theme/pink-bluegrey.scss b/src/theme/pink-bluegrey.scss
deleted file mode 100644
index 580f9fdd8..000000000
--- a/src/theme/pink-bluegrey.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@import "~@angular/material/prebuilt-themes/pink-bluegrey.css";
-
-div.alert {
-    background-color: dimgray !important;
-}
-
-table.mat-table tbody tr:nth-child(even) {
-    background-color: dimgray !important;
-}
-
diff --git a/src/theme/purple-green.scss b/src/theme/purple-green.scss
deleted file mode 100644
index b3fcb75b0..000000000
--- a/src/theme/purple-green.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@import "~@angular/material/prebuilt-themes/purple-green.css";
-
-div.alert {
-    background-color: dimgray !important;
-}
-
-table.mat-table tbody tr:nth-child(even) {
-    background-color: dimgray !important;
-}
-
diff --git a/src/theme/theme.scss b/src/theme/theme.scss
deleted file mode 100644
index e49965155..000000000
--- a/src/theme/theme.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-/*
- * Global application theme.
- * Framework overrides and customization goes here.
- */
-
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 000000000..59200155d
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,26 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  mode: process.env.TAILWIND_MODE ? 'jit' : '',
+  content: [
+    "./src/app/**/*.{html,js}",
+    './index.html',
+  ],
+  theme: {
+    extends: {
+      animation: {
+        wiggle: 'wiggle 1s ease-in-out infinite',
+        'fade-in-down': 'fade-in-down 0.3s ease-out',
+        'fade-out-down': 'fade-out-down 0.3s ease-out',
+        'fade-in-up': 'fade-in-up 0.3s ease-out',
+        'fade-out-up': 'fade-out-up 0.3s ease-out',
+      },
+      boxShadow: {
+        custom: '0px 0px 50px 0px rgb(82 63 105 / 15%)',
+      },
+    },
+  },
+  plugins: [
+    require("@tailwindcss/forms")
+  ],
+}
+