From e5a2be112b4928e1a667e0fc9a492b5329d0b9c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Sat, 18 Dec 2021 16:52:11 +0100
Subject: [PATCH] update/delete billing alert

---
 public/mix-manifest.json                      | 147 +++++++++++----
 .../components/Others/CreateFolderPopup.vue   |   2 +-
 .../js/components/Others/CreateLanguage.vue   |   2 +-
 .../Others/CreatePersonaTokenPopup.vue        |   2 +-
 .../js/components/Others/RenameItemPopup.vue  |   2 +-
 .../js/components/Others/ShareCreatePopup.vue |   2 +-
 .../js/components/Others/ShareEditPopup.vue   |   2 +-
 .../components/Others/TwoFactorSetupPopup.vue |   2 +-
 .../Teams/CreateTeamFolderPopup.vue           |   4 +-
 .../components/Teams/EditTeamFolderPopup.vue  |   2 +-
 resources/js/routes/routesAdmin.js            |  10 -
 .../AppSettings/AppSettingsTabs/Email.vue     |  10 +-
 .../AppSettings/AppSettingsTabs/Index.vue     |  30 +--
 .../AppSettings/AppSettingsTabs/Payments.vue  |   6 +-
 .../js/views/Admin/Languages/Language.vue     |   4 +-
 resources/js/views/Admin/Plans/PlanCreate.vue |  10 +-
 resources/js/views/Admin/Users/User.vue       |   9 +-
 resources/js/views/Admin/Users/UserCreate.vue |  10 +-
 .../views/Admin/Users/UserTabs/UserDelete.vue |   2 +-
 .../Users/UserTabs/UserFixedSubscription.vue  |  96 ++++++++++
 .../Admin/Users/UserTabs/UserInvoices.vue     |  96 ----------
 .../UserTabs/UserMeteredSubscription.vue      | 150 +++++++++++++++
 .../Admin/Users/UserTabs/UserStorage.vue      |   2 +-
 .../Admin/Users/UserTabs/UserSubscription.vue | 174 ++++++++++--------
 resources/js/views/Auth/CreateNewPassword.vue |   6 +-
 resources/js/views/Auth/ForgottenPassword.vue |   2 +-
 resources/js/views/Auth/SignIn.vue            |   8 +-
 resources/js/views/Auth/SignUp.vue            |   8 +-
 resources/js/views/Frontpage/ContactUs.vue    |   4 +-
 .../js/views/SetupWizard/AdminAccount.vue     |   8 +-
 resources/js/views/SetupWizard/AppSetup.vue   |  10 +-
 .../js/views/SetupWizard/BillingsDetail.vue   |  14 +-
 resources/js/views/SetupWizard/Database.vue   |  10 +-
 .../js/views/SetupWizard/EnvironmentSetup.vue |  16 +-
 .../js/views/SetupWizard/PurchaseCode.vue     |   2 +-
 .../views/SetupWizard/StripeCredentials.vue   |   6 +-
 .../views/SetupWizard/SubscriptionPlans.vue   |   8 +-
 .../js/views/Shared/SharedAuthentication.vue  |   2 +-
 resources/js/views/Upgrade/UpgradeBilling.vue |  12 +-
 .../js/views/User/MeteredSubscription.vue     |   2 +-
 resources/js/views/User/Password.vue          |   4 +-
 41 files changed, 573 insertions(+), 325 deletions(-)
 create mode 100644 resources/js/views/Admin/Users/UserTabs/UserFixedSubscription.vue
 delete mode 100644 resources/js/views/Admin/Users/UserTabs/UserInvoices.vue
 create mode 100644 resources/js/views/Admin/Users/UserTabs/UserMeteredSubscription.vue

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index c162b9a5..4fdb7646 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -2,8 +2,8 @@
     "/js/main.js": "/js/main.js",
     "/css/app.css": "/css/app.css",
     "/css/tailwind.css": "/css/tailwind.css",
-    "/chunks/admin.js": "/chunks/admin.js?id=6b44ad76c944f71d4bad",
-    "/chunks/admin-account.js": "/chunks/admin-account.js?id=6c5fd385fb7e1b8ae101",
+    "/chunks/admin.js": "/chunks/admin.js?id=436b6fedf7f534eccaad",
+    "/chunks/admin-account.js": "/chunks/admin-account.js?id=759433a182f73618e9f4",
     "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js?id=b6966627bd253eda63ba",
     "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~3e4fdd8b.js": "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~3e4fdd8b.js?id=d7a8e5b5b913858da427",
     "/chunks/admin~chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-item~9b68162c.js": "/chunks/admin~chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-item~9b68162c.js?id=5841d65172536a8a9bdc",
@@ -19,33 +19,33 @@
     "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~5acee76d.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~5acee76d.js?id=b72bbc2e750c80377527",
     "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~fa9d08c1.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~fa9d08c1.js?id=741acf06489eac45774e",
     "/chunks/app-billings.js": "/chunks/app-billings.js?id=714f7a9f33e15fe89b4a",
-    "/chunks/app-email.js": "/chunks/app-email.js?id=7419fedbf3228988067e",
-    "/chunks/app-index.js": "/chunks/app-index.js?id=0f920bb959cec96da985",
-    "/chunks/app-language.js": "/chunks/app-language.js?id=ef0329e61614a770b645",
+    "/chunks/app-email.js": "/chunks/app-email.js?id=324ae41d780105c9a9fb",
+    "/chunks/app-index.js": "/chunks/app-index.js?id=4f1f607c330b916c0090",
+    "/chunks/app-language.js": "/chunks/app-language.js?id=a469a2fd68729c3cfac2",
     "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~7dbb6a42.js": "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~7dbb6a42.js?id=3cbb19b80e635b3524e5",
     "/chunks/app-language~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan-creat~1a92dd55.js": "/chunks/app-language~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan-creat~1a92dd55.js?id=75317652be9e911b6013",
     "/chunks/app-others.js": "/chunks/app-others.js?id=2789aac07c894eeb29ea",
-    "/chunks/app-payments.js": "/chunks/app-payments.js?id=8ca6c120a8ba6f3659f6",
+    "/chunks/app-payments.js": "/chunks/app-payments.js?id=df48b9f5634db900c0ef",
     "/chunks/app-settings.js": "/chunks/app-settings.js?id=2a96295eef59bd6c8921",
-    "/chunks/app-setup.js": "/chunks/app-setup.js?id=a6f37a0bd7bd50c88904",
+    "/chunks/app-setup.js": "/chunks/app-setup.js?id=65481d5c45313ace4844",
     "/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~5d0bfc57.js": "/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~5d0bfc57.js?id=107a78323eef0c1d4c81",
-    "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=4e2693e6fbd815cef77f",
-    "/chunks/contact-us.js": "/chunks/contact-us.js?id=3d0bbcd0c36d74bf739a",
+    "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=5dbf157c75ae6fb9bda3",
+    "/chunks/contact-us.js": "/chunks/contact-us.js?id=fda418b31ad6bb55b223",
     "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js": "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js?id=65ee559ca803555be568",
-    "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=55135fff8801bdf735c4",
+    "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=a6608519c360dbc8fb79",
     "/chunks/dashboard.js": "/chunks/dashboard.js?id=f95d2d00f960c9c47d7c",
     "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~43d0932c.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~43d0932c.js?id=d9a6801ee22065f47498",
     "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plans~chunks/subscriptions.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plans~chunks/subscriptions.js?id=95b32230258beb6391ed",
     "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.js": "/chunks/dashboard~chunks/invoices~chunks/plan-subscribers~chunks/users.js?id=f72a1b2efde61b53a755",
-    "/chunks/database.js": "/chunks/database.js?id=7c44c9d284064687494e",
+    "/chunks/database.js": "/chunks/database.js?id=ca2b5a438ca2f0833de7",
     "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=6c86916c6c6f679fa86b",
     "/chunks/email-verified.js": "/chunks/email-verified.js?id=253ce639751cc8799458",
-    "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=91a89d5517943fb6bafa",
+    "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=24cc0134af21e141b822",
     "/chunks/files.js": "/chunks/files.js?id=26a322863d9c92183c6f",
     "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/share~c7960950.js": "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/share~c7960950.js?id=64ac90ff8ae7d3ee3ed1",
     "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.js?id=2f2e1987e91a74932dcb",
     "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~bf3ddedc.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~bf3ddedc.js?id=44dd372c3414f407ed37",
-    "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=8e13225bf4eda83750fc",
+    "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=9d10a05edfb3a4a11efe",
     "/chunks/homepage.js": "/chunks/homepage.js?id=b89dd81804b8a0bd3f0b",
     "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=380d56f8ccf10c1bf633",
     "/chunks/invitation.js": "/chunks/invitation.js?id=c9cd3541ee362ae8d5f7",
@@ -55,54 +55,54 @@
     "/chunks/page-edit.js": "/chunks/page-edit.js?id=c327905d0b6d997d402d",
     "/chunks/pages.js": "/chunks/pages.js?id=7db66df0453135bf4e51",
     "/chunks/plan.js": "/chunks/plan.js?id=4fa6f87c04a875875d36",
-    "/chunks/plan-create.js": "/chunks/plan-create.js?id=f6a27d5dea1d14b77fa5",
+    "/chunks/plan-create.js": "/chunks/plan-create.js?id=e027f178caef630a63db",
     "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=adbb08867b0da7178881",
     "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=414ba1f705f387f7aeb6",
     "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=adbaf70d9060712110ab",
     "/chunks/plans.js": "/chunks/plans.js?id=7f262c68655989372d3c",
-    "/chunks/platform.js": "/chunks/platform.js?id=6b779b37a3f6f6025425",
-    "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=799c38abf67a33cefe3a",
+    "/chunks/platform.js": "/chunks/platform.js?id=cb224c18bb25c409345a",
+    "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=5734e9333fc67c706853",
     "/chunks/platform~chunks/shared~chunks/shared-with-me~chunks/team-folders.js": "/chunks/platform~chunks/shared~chunks/shared-with-me~chunks/team-folders.js?id=7d983dfdc91de607d737",
     "/chunks/profile.js": "/chunks/profile.js?id=8688d9c7ff850e6989e6",
     "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=11a027aca50aa90afb77",
-    "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=f8b2619e393a5823bf29",
+    "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=0ae51c660a215d107f6c",
     "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=2716127ee2f945a90c0e",
-    "/chunks/settings.js": "/chunks/settings.js?id=783e0ddb413217a022e5",
+    "/chunks/settings.js": "/chunks/settings.js?id=a68e5b21ac4b4dd5645f",
     "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=d3443e79b667f5b4b1d2",
     "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=56f3c814aefb783ceb2a",
-    "/chunks/settings-password.js": "/chunks/settings-password.js?id=fc95bc9d31d3e9ee0442",
+    "/chunks/settings-password.js": "/chunks/settings-password.js?id=049c3383e310392f966d",
     "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=093cc2fd918ee6a340d3",
     "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=8ec1afafac5dcd26ae25",
     "/chunks/settings-storage~chunks/settings-subscription~chunks/user-storage~chunks/user-subscription.js": "/chunks/settings-storage~chunks/settings-subscription~chunks/user-storage~chunks/user-subscription.js?id=147afaac8c8bacfe6433",
-    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=fd11a9ee3772ed65553a",
+    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=e2717eb836e334b41976",
     "/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=c33cd2341b9b04a732e5",
     "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=651d5accf401908724c5",
     "/chunks/shared.js": "/chunks/shared.js?id=6230d050545cd1bd9b87",
     "/chunks/shared-with-me.js": "/chunks/shared-with-me.js?id=78390f82ed065495d64e",
     "/chunks/shared-with-me~chunks/team-folders.js": "/chunks/shared-with-me~chunks/team-folders.js?id=c8a127225521735d5da0",
-    "/chunks/shared/authenticate.js": "/chunks/shared/authenticate.js?id=8b9ac9ed9afd8dd15229",
+    "/chunks/shared/authenticate.js": "/chunks/shared/authenticate.js?id=e08c5aaa308b0ea7d90f",
     "/chunks/shared/files.js": "/chunks/shared/files.js?id=0e69fd2ab2fca29ecf0d",
     "/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=f2fb680ebf4873ff4436",
-    "/chunks/sign-in.js": "/chunks/sign-in.js?id=04b378323ff1494fa85d",
-    "/chunks/sign-up.js": "/chunks/sign-up.js?id=0307551ea7ad8e9bd3c2",
+    "/chunks/sign-in.js": "/chunks/sign-in.js?id=da0a2e8fa83c7384e72d",
+    "/chunks/sign-up.js": "/chunks/sign-up.js?id=f7a2321e731c85ade564",
     "/chunks/status-check.js": "/chunks/status-check.js?id=6d1f3e7295c1b35f58da",
-    "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=d3d3b4a67c9f584f088f",
-    "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=9932f9d570fc8f4f864b",
+    "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=7766326538fcc45601a8",
+    "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=e2d2ac5594fa695e030a",
     "/chunks/subscription-service.js": "/chunks/subscription-service.js?id=8ac19b3fcfd57d79e5b1",
     "/chunks/subscriptions.js": "/chunks/subscriptions.js?id=73d92ef0a3f78ca3260e",
     "/chunks/team-folders.js": "/chunks/team-folders.js?id=c337ec175f9e4b7f33c4",
     "/chunks/trash.js": "/chunks/trash.js?id=4f0ee7a430c2790c4213",
-    "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=70aa50550ff036157c04",
+    "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=b76762021d29da7cff97",
     "/chunks/upgrade-billing~chunks/upgrade-plan.js": "/chunks/upgrade-billing~chunks/upgrade-plan.js?id=8bd237c632018a537d76",
     "/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=7ee9b84ffed9bf544997",
-    "/chunks/user.js": "/chunks/user.js?id=96133c9c9650166985af",
-    "/chunks/user-create.js": "/chunks/user-create.js?id=8e56bca490be4c252550",
-    "/chunks/user-delete.js": "/chunks/user-delete.js?id=c0ea5194b4a4de8189dd",
+    "/chunks/user.js": "/chunks/user.js?id=3c4e3457980543743bda",
+    "/chunks/user-create.js": "/chunks/user-create.js?id=6ec0f7a5f0166dbe52fd",
+    "/chunks/user-delete.js": "/chunks/user-delete.js?id=97b9567df09384f7d303",
     "/chunks/user-detail.js": "/chunks/user-detail.js?id=a55ae1a545a65b92511d",
-    "/chunks/user-invoices.js": "/chunks/user-invoices.js?id=8813b138d1296673a27d",
+    "/chunks/user-invoices.js": "/chunks/user-invoices.js?id=8dbfbb88a2b66e94da17",
     "/chunks/user-password.js": "/chunks/user-password.js?id=ce6c12a5b038f5481bd1",
-    "/chunks/user-storage.js": "/chunks/user-storage.js?id=a535f6f5cce3d5a4e569",
-    "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=82038ce92ca5e1c9ae05",
+    "/chunks/user-storage.js": "/chunks/user-storage.js?id=79173e014b57c893f4be",
+    "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=15afb8585f5bd23d0f4b",
     "/chunks/users.js": "/chunks/users.js?id=2ed4763745592f464cc2",
     "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~35bc7519.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~35bc7519.js?id=ae06aafc3749254fe4aa",
     "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~47733ac6.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~47733ac6.js?id=1579cd824e874deff582",
@@ -1375,5 +1375,86 @@
     "/chunks/settings-storage.f78ab29ec8bacaed3c0a.hot-update.js": "/chunks/settings-storage.f78ab29ec8bacaed3c0a.hot-update.js",
     "/chunks/settings-storage.c5fabdda9cade020ac61.hot-update.js": "/chunks/settings-storage.c5fabdda9cade020ac61.hot-update.js",
     "/chunks/settings.323fbff57023ed24f786.hot-update.js": "/chunks/settings.323fbff57023ed24f786.hot-update.js",
-    "/chunks/settings.c6e6d822bb90887a109e.hot-update.js": "/chunks/settings.c6e6d822bb90887a109e.hot-update.js"
+    "/chunks/settings.c6e6d822bb90887a109e.hot-update.js": "/chunks/settings.c6e6d822bb90887a109e.hot-update.js",
+    "/js/main.12fd4522fb8497cb53cd.hot-update.js": "/js/main.12fd4522fb8497cb53cd.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-p~936201b1.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-p~936201b1.js?id=916597fd74909c9082d4",
+    "/chunks/user-subscription.12fd4522fb8497cb53cd.hot-update.js": "/chunks/user-subscription.12fd4522fb8497cb53cd.hot-update.js",
+    "/js/main.ccf23ea71f98a9d8e1c0.hot-update.js": "/js/main.ccf23ea71f98a9d8e1c0.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-p~2611ac93.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-p~2611ac93.js?id=c76ae7cb1ecbdedac1cf",
+    "/chunks/user-invoices.ccf23ea71f98a9d8e1c0.hot-update.js": "/chunks/user-invoices.ccf23ea71f98a9d8e1c0.hot-update.js",
+    "/chunks/user-subscription.99f9e033ac63cea0ac21.hot-update.js": "/chunks/user-subscription.99f9e033ac63cea0ac21.hot-update.js",
+    "/chunks/user.2efb7aa01d8f79623b60.hot-update.js": "/chunks/user.2efb7aa01d8f79623b60.hot-update.js",
+    "/chunks/user-subscription.9dfe002ca7541568fffb.hot-update.js": "/chunks/user-subscription.9dfe002ca7541568fffb.hot-update.js",
+    "/chunks/user-subscription.b98700e9f17ab0f1c771.hot-update.js": "/chunks/user-subscription.b98700e9f17ab0f1c771.hot-update.js",
+    "/chunks/user-subscription.15d4af72a1f3d481663f.hot-update.js": "/chunks/user-subscription.15d4af72a1f3d481663f.hot-update.js",
+    "/chunks/user-subscription.ed69fe8d73076b82f527.hot-update.js": "/chunks/user-subscription.ed69fe8d73076b82f527.hot-update.js",
+    "/chunks/user-subscription.c086212d4e02c59e37b8.hot-update.js": "/chunks/user-subscription.c086212d4e02c59e37b8.hot-update.js",
+    "/chunks/user-subscription.88596d708aee156dc787.hot-update.js": "/chunks/user-subscription.88596d708aee156dc787.hot-update.js",
+    "/chunks/user-subscription.eadea3389672d2effbec.hot-update.js": "/chunks/user-subscription.eadea3389672d2effbec.hot-update.js",
+    "/chunks/user-subscription.d306de3251c043f40d4d.hot-update.js": "/chunks/user-subscription.d306de3251c043f40d4d.hot-update.js",
+    "/chunks/user-subscription.300878d05f955f76362d.hot-update.js": "/chunks/user-subscription.300878d05f955f76362d.hot-update.js",
+    "/chunks/user-subscription.07e57d967694ad3292be.hot-update.js": "/chunks/user-subscription.07e57d967694ad3292be.hot-update.js",
+    "/chunks/user-subscription.780eed67d27be0f9abe5.hot-update.js": "/chunks/user-subscription.780eed67d27be0f9abe5.hot-update.js",
+    "/chunks/user-subscription.8942b62bbff1241285f8.hot-update.js": "/chunks/user-subscription.8942b62bbff1241285f8.hot-update.js",
+    "/js/main.0b11cabd2367b57b9f93.hot-update.js": "/js/main.0b11cabd2367b57b9f93.hot-update.js",
+    "/chunks/user.0be573e794dec5c4b906.hot-update.js": "/chunks/user.0be573e794dec5c4b906.hot-update.js",
+    "/chunks/user-subscription.7b100ade1a79d3cd1064.hot-update.js": "/chunks/user-subscription.7b100ade1a79d3cd1064.hot-update.js",
+    "/chunks/user-subscription.b13643d095fe4f9c8bc6.hot-update.js": "/chunks/user-subscription.b13643d095fe4f9c8bc6.hot-update.js",
+    "/js/main.59156b2e93a8cb868a92.hot-update.js": "/js/main.59156b2e93a8cb868a92.hot-update.js",
+    "/chunks/user-subscription.59156b2e93a8cb868a92.hot-update.js": "/chunks/user-subscription.59156b2e93a8cb868a92.hot-update.js",
+    "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~629342a0.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~629342a0.js?id=cdefaa7800d04dafb07b",
+    "/chunks/user-subscription.14d463b6f5e00330eb49.hot-update.js": "/chunks/user-subscription.14d463b6f5e00330eb49.hot-update.js",
+    "/chunks/user-subscription.eace44bafdcded9d9ab8.hot-update.js": "/chunks/user-subscription.eace44bafdcded9d9ab8.hot-update.js",
+    "/chunks/user-subscription.8915082b345e6cba48fa.hot-update.js": "/chunks/user-subscription.8915082b345e6cba48fa.hot-update.js",
+    "/chunks/user-subscription.ee37e3b9d980d104a33e.hot-update.js": "/chunks/user-subscription.ee37e3b9d980d104a33e.hot-update.js",
+    "/chunks/user-subscription.45f71143e7780309afef.hot-update.js": "/chunks/user-subscription.45f71143e7780309afef.hot-update.js",
+    "/chunks/user-subscription.c13383f4d8d63c5f2e69.hot-update.js": "/chunks/user-subscription.c13383f4d8d63c5f2e69.hot-update.js",
+    "/chunks/user-subscription.c4d4651f3fac91eeeba9.hot-update.js": "/chunks/user-subscription.c4d4651f3fac91eeeba9.hot-update.js",
+    "/chunks/user-subscription.46164d77ffefdb94b7ed.hot-update.js": "/chunks/user-subscription.46164d77ffefdb94b7ed.hot-update.js",
+    "/chunks/user-subscription.b2fdd8664aba5d5c594d.hot-update.js": "/chunks/user-subscription.b2fdd8664aba5d5c594d.hot-update.js",
+    "/chunks/user-subscription.bca26352cb48e3b56607.hot-update.js": "/chunks/user-subscription.bca26352cb48e3b56607.hot-update.js",
+    "/chunks/user-subscription.7506aa0c7a9e02089bb1.hot-update.js": "/chunks/user-subscription.7506aa0c7a9e02089bb1.hot-update.js",
+    "/chunks/user-subscription.e345623dfb800747b8ab.hot-update.js": "/chunks/user-subscription.e345623dfb800747b8ab.hot-update.js",
+    "/chunks/user-subscription.be91d2b66a37b4dc6ffd.hot-update.js": "/chunks/user-subscription.be91d2b66a37b4dc6ffd.hot-update.js",
+    "/chunks/user-subscription.d0fdc226d0a95f4dfdd7.hot-update.js": "/chunks/user-subscription.d0fdc226d0a95f4dfdd7.hot-update.js",
+    "/chunks/user-subscription.018c5b5a4e202c9218bd.hot-update.js": "/chunks/user-subscription.018c5b5a4e202c9218bd.hot-update.js",
+    "/chunks/user-subscription.bfc7fff7b08c58dffcea.hot-update.js": "/chunks/user-subscription.bfc7fff7b08c58dffcea.hot-update.js",
+    "/chunks/user-subscription.d25ddcd4fa991af88d35.hot-update.js": "/chunks/user-subscription.d25ddcd4fa991af88d35.hot-update.js",
+    "/chunks/user-subscription.40f113cd6b02d251bd14.hot-update.js": "/chunks/user-subscription.40f113cd6b02d251bd14.hot-update.js",
+    "/chunks/user-subscription.e480b3af0be1bb8f6e43.hot-update.js": "/chunks/user-subscription.e480b3af0be1bb8f6e43.hot-update.js",
+    "/chunks/user-subscription.6b975f6897e11483a98f.hot-update.js": "/chunks/user-subscription.6b975f6897e11483a98f.hot-update.js",
+    "/chunks/user.afe2924617db0e19d0a0.hot-update.js": "/chunks/user.afe2924617db0e19d0a0.hot-update.js",
+    "/chunks/user-subscription.afe2924617db0e19d0a0.hot-update.js": "/chunks/user-subscription.afe2924617db0e19d0a0.hot-update.js",
+    "/chunks/user-subscription.88fa5bb2b92d212ed7a3.hot-update.js": "/chunks/user-subscription.88fa5bb2b92d212ed7a3.hot-update.js",
+    "/chunks/user-subscription.a26b486a3b52f12cf389.hot-update.js": "/chunks/user-subscription.a26b486a3b52f12cf389.hot-update.js",
+    "/chunks/user-subscription.da9c5142df8206ff8f91.hot-update.js": "/chunks/user-subscription.da9c5142df8206ff8f91.hot-update.js",
+    "/chunks/admin.efd1dce7c1d396bae857.hot-update.js": "/chunks/admin.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/admin-account.efd1dce7c1d396bae857.hot-update.js": "/chunks/admin-account.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/app-email.efd1dce7c1d396bae857.hot-update.js": "/chunks/app-email.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/app-index.efd1dce7c1d396bae857.hot-update.js": "/chunks/app-index.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/app-language.efd1dce7c1d396bae857.hot-update.js": "/chunks/app-language.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/app-payments.efd1dce7c1d396bae857.hot-update.js": "/chunks/app-payments.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/app-setup.efd1dce7c1d396bae857.hot-update.js": "/chunks/app-setup.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/billings-detail.efd1dce7c1d396bae857.hot-update.js": "/chunks/billings-detail.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/contact-us.efd1dce7c1d396bae857.hot-update.js": "/chunks/contact-us.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/create-new-password.efd1dce7c1d396bae857.hot-update.js": "/chunks/create-new-password.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/database.efd1dce7c1d396bae857.hot-update.js": "/chunks/database.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/environment-setup.efd1dce7c1d396bae857.hot-update.js": "/chunks/environment-setup.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/forgotten-password.efd1dce7c1d396bae857.hot-update.js": "/chunks/forgotten-password.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/plan-create.efd1dce7c1d396bae857.hot-update.js": "/chunks/plan-create.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/platform.efd1dce7c1d396bae857.hot-update.js": "/chunks/platform.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/platform~chunks/shared.efd1dce7c1d396bae857.hot-update.js": "/chunks/platform~chunks/shared.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/purchase-code.efd1dce7c1d396bae857.hot-update.js": "/chunks/purchase-code.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/settings.efd1dce7c1d396bae857.hot-update.js": "/chunks/settings.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/settings-password.efd1dce7c1d396bae857.hot-update.js": "/chunks/settings-password.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/settings-subscription.efd1dce7c1d396bae857.hot-update.js": "/chunks/settings-subscription.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/shared/authenticate.efd1dce7c1d396bae857.hot-update.js": "/chunks/shared/authenticate.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/sign-in.efd1dce7c1d396bae857.hot-update.js": "/chunks/sign-in.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/sign-up.efd1dce7c1d396bae857.hot-update.js": "/chunks/sign-up.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/stripe-credentials.efd1dce7c1d396bae857.hot-update.js": "/chunks/stripe-credentials.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/subscription-plans.efd1dce7c1d396bae857.hot-update.js": "/chunks/subscription-plans.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/upgrade-billing.efd1dce7c1d396bae857.hot-update.js": "/chunks/upgrade-billing.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/user-create.efd1dce7c1d396bae857.hot-update.js": "/chunks/user-create.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/user-delete.efd1dce7c1d396bae857.hot-update.js": "/chunks/user-delete.efd1dce7c1d396bae857.hot-update.js",
+    "/chunks/user-storage.efd1dce7c1d396bae857.hot-update.js": "/chunks/user-storage.efd1dce7c1d396bae857.hot-update.js"
 }
diff --git a/resources/js/components/Others/CreateFolderPopup.vue b/resources/js/components/Others/CreateFolderPopup.vue
index d2ec6ca5..b1899c9a 100644
--- a/resources/js/components/Others/CreateFolderPopup.vue
+++ b/resources/js/components/Others/CreateFolderPopup.vue
@@ -13,7 +13,7 @@
                 <!--Set folder name-->
                 <ValidationProvider tag="div" mode="passive" name="Title" rules="required" v-slot="{ errors }">
 					<AppInputText :title="$t('popup_create_folder.label')" :error="errors[0]">
-    	                <input v-model="name" :class="{'is-error': errors[0]}" type="text" ref="input" class="focus-border-theme input-dark" :placeholder="$t('popup_create_folder.placeholder')">
+    	                <input v-model="name" :class="{'border-red-700': errors[0]}" type="text" ref="input" class="focus-border-theme input-dark" :placeholder="$t('popup_create_folder.placeholder')">
 					</AppInputText>
                 </ValidationProvider>
 
diff --git a/resources/js/components/Others/CreateLanguage.vue b/resources/js/components/Others/CreateLanguage.vue
index ffd9d550..fc3b9ab6 100644
--- a/resources/js/components/Others/CreateLanguage.vue
+++ b/resources/js/components/Others/CreateLanguage.vue
@@ -16,7 +16,7 @@
 				</ValidationProvider>
 				<ValidationProvider tag="div" mode="passive" name="Language Name" rules="required" v-slot="{ errors }">
 					<AppInputText :title="$t('locale_name')" :error="errors[0]" :is-last="true">
-						<input v-model="form.name" :class="{'is-error': errors[0]}" type="text" ref="input" class="focus-border-theme input-dark" :placeholder="$t('type_language_name')">
+						<input v-model="form.name" :class="{'border-red-700': errors[0]}" type="text" ref="input" class="focus-border-theme input-dark" :placeholder="$t('type_language_name')">
 					</AppInputText>
 				</ValidationProvider>
             </ValidationObserver>
diff --git a/resources/js/components/Others/CreatePersonaTokenPopup.vue b/resources/js/components/Others/CreatePersonaTokenPopup.vue
index 9dabcdfd..274af48e 100644
--- a/resources/js/components/Others/CreatePersonaTokenPopup.vue
+++ b/resources/js/components/Others/CreatePersonaTokenPopup.vue
@@ -8,7 +8,7 @@
 
                 <ValidationProvider tag="div" mode="passive" name="Token Name" rules="required" v-slot="{ errors }">
 					<AppInputText :title="$t('popup_personal_token.label')" :error="errors[0]" :is-last="true">
-    	                <input v-model="name" :class="{'is-error': errors[0]}" type="text" ref="input" class="focus-border-theme input-dark" :placeholder="$t('popup_personal_token.plc')">
+    	                <input v-model="name" :class="{'border-red-700': errors[0]}" type="text" ref="input" class="focus-border-theme input-dark" :placeholder="$t('popup_personal_token.plc')">
 					</AppInputText>
                 </ValidationProvider>
 
diff --git a/resources/js/components/Others/RenameItemPopup.vue b/resources/js/components/Others/RenameItemPopup.vue
index 523867e5..2738301d 100644
--- a/resources/js/components/Others/RenameItemPopup.vue
+++ b/resources/js/components/Others/RenameItemPopup.vue
@@ -16,7 +16,7 @@
                 <ValidationProvider tag="div" mode="passive" name="Name" rules="required" v-slot="{ errors }">
 					<AppInputText :title="$t('popup_rename.label')" :error="errors[0]">
 						<div class="flex items-center relative">
-							<input v-model="pickedItem.data.attributes.name" :class="{'is-error': errors[0]}" ref="input" type="text" class="focus-border-theme input-dark" :placeholder="$t('popup_rename.placeholder')">
+							<input v-model="pickedItem.data.attributes.name" :class="{'border-red-700': errors[0]}" ref="input" type="text" class="focus-border-theme input-dark" :placeholder="$t('popup_rename.placeholder')">
 							<div @click="pickedItem.data.attributes.name = ''" class="absolute right-4">
 								<x-icon class="close-icon hover-text-theme" size="14" />
 							</div>
diff --git a/resources/js/components/Others/ShareCreatePopup.vue b/resources/js/components/Others/ShareCreatePopup.vue
index 70f24b4a..758180ec 100644
--- a/resources/js/components/Others/ShareCreatePopup.vue
+++ b/resources/js/components/Others/ShareCreatePopup.vue
@@ -28,7 +28,7 @@
 					<!--Set password-->
 					<ValidationProvider v-if="shareOptions.isPassword" tag="div" mode="passive" name="Password" rules="required" v-slot="{ errors }">
 						<AppInputText :error="errors[0]" class="-mt-2">
-							<input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" class="focus-border-theme input-dark" :placeholder="$t('page_sign_in.placeholder_password')">
+							<input v-model="shareOptions.password" :class="{'border-red-700': errors[0]}" type="text" class="focus-border-theme input-dark" :placeholder="$t('page_sign_in.placeholder_password')">
 						</AppInputText>
 					</ValidationProvider>
 				</div>
diff --git a/resources/js/components/Others/ShareEditPopup.vue b/resources/js/components/Others/ShareEditPopup.vue
index 9eba8a56..d51ed401 100644
--- a/resources/js/components/Others/ShareEditPopup.vue
+++ b/resources/js/components/Others/ShareEditPopup.vue
@@ -47,7 +47,7 @@
 					<!--Set password-->
 					<ValidationProvider v-if="shareOptions.isProtected && ! canChangePassword" tag="div" mode="passive" name="Password" rules="required" v-slot="{ errors }">
 						<AppInputText :error="errors[0]" class="-mt-2">
-							<input v-model="shareOptions.password" :class="{'is-error': errors[0]}" type="text" class="focus-border-theme input-dark" :placeholder="$t('page_sign_in.placeholder_password')">
+							<input v-model="shareOptions.password" :class="{'border-red-700': errors[0]}" type="text" class="focus-border-theme input-dark" :placeholder="$t('page_sign_in.placeholder_password')">
 						</AppInputText>
 					</ValidationProvider>
 				</div>
diff --git a/resources/js/components/Others/TwoFactorSetupPopup.vue b/resources/js/components/Others/TwoFactorSetupPopup.vue
index ee456c65..c3019de3 100644
--- a/resources/js/components/Others/TwoFactorSetupPopup.vue
+++ b/resources/js/components/Others/TwoFactorSetupPopup.vue
@@ -7,7 +7,7 @@
              <ValidationObserver @submit.prevent="confirmPassword" v-if="! qrCode" ref="passwordForm" v-slot="{ invalid }" tag="form" class="form-wrapper">
                 <ValidationProvider tag="div" mode="passive" name="Password" rules="required" v-slot="{ errors }">
 					<AppInputText :title="$t('popup_2fa.input_label')" :error="errors[0]" :is-last="true">
-						<input v-model="password" :class="{'is-error': errors[0]}" type="password" ref="input" class="focus-border-theme input-dark" :placeholder="$t('page_sign_in.placeholder_password')">
+						<input v-model="password" :class="{'border-red-700': errors[0]}" type="password" ref="input" class="focus-border-theme input-dark" :placeholder="$t('page_sign_in.placeholder_password')">
 					</AppInputText>
                 </ValidationProvider>
             </ValidationObserver>
diff --git a/resources/js/components/Teams/CreateTeamFolderPopup.vue b/resources/js/components/Teams/CreateTeamFolderPopup.vue
index f2614e40..3a4adf1a 100644
--- a/resources/js/components/Teams/CreateTeamFolderPopup.vue
+++ b/resources/js/components/Teams/CreateTeamFolderPopup.vue
@@ -16,7 +16,7 @@
                 <!--Set folder name-->
                 <ValidationProvider v-if="isNewFolderTeamCreation" tag="div" mode="passive" name="Name" rules="required" v-slot="{ errors }">
 					<AppInputText :title="$t('popup_create_folder.label')" :error="errors[0]">
-						<input v-model="name" :class="{'is-error': errors[0]}" type="text" ref="name" class="focus-border-theme input-dark" :placeholder="$t('popup_create_folder.placeholder')">
+						<input v-model="name" :class="{'border-red-700': errors[0]}" type="text" ref="name" class="focus-border-theme input-dark" :placeholder="$t('popup_create_folder.placeholder')">
 					</AppInputText>
                 </ValidationProvider>
 
@@ -31,7 +31,7 @@
 							>
 								Add
 							</span>
-							<input @keypress.enter.stop.prevent="addMember" ref="email" v-model="email" :class="{'is-error': errors[0]}" type="email" class="focus-border-theme input-dark" :placeholder="$t('Type member email...')">
+							<input @keypress.enter.stop.prevent="addMember" ref="email" v-model="email" :class="{'border-red-700': errors[0]}" type="email" class="focus-border-theme input-dark" :placeholder="$t('Type member email...')">
 						</div>
 					</AppInputText>
 				</ValidationProvider>
diff --git a/resources/js/components/Teams/EditTeamFolderPopup.vue b/resources/js/components/Teams/EditTeamFolderPopup.vue
index 7a473123..db1d0873 100644
--- a/resources/js/components/Teams/EditTeamFolderPopup.vue
+++ b/resources/js/components/Teams/EditTeamFolderPopup.vue
@@ -26,7 +26,7 @@
 							</span>
 
 							<!--TODO: Fix !pr-20 after JIT official release-->
-							<input @keypress.enter.stop.prevent="addMember" ref="email" v-model="email" :class="{'is-error': errors[0]}" type="email" class="focus-border-theme !pr-20 input-dark" :placeholder="$t('Type member email...')">
+							<input @keypress.enter.stop.prevent="addMember" ref="email" v-model="email" :class="{'border-red-700': errors[0]}" type="email" class="focus-border-theme !pr-20 input-dark" :placeholder="$t('Type member email...')">
 						</div>
 					</AppInputText>
 				</ValidationProvider>
diff --git a/resources/js/routes/routesAdmin.js b/resources/js/routes/routesAdmin.js
index a7bbb3ba..832cfaca 100644
--- a/resources/js/routes/routesAdmin.js
+++ b/resources/js/routes/routesAdmin.js
@@ -139,16 +139,6 @@ const routesAdmin = [
 							title: 'routes_title.subscription'
 						},
 					},
-					{
-						name: 'UserInvoices',
-						path: '/admin/user/:id/invoices',
-						component: () =>
-							import(/* webpackChunkName: "chunks/user-invoices" */ '../views/Admin/Users/UserTabs/UserInvoices'),
-						meta: {
-							requiresAuth: true,
-							title: 'routes_title.invoices'
-						},
-					},
 					{
 						name: 'UserPassword',
 						path: '/admin/user/:id/password',
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue
index a697006b..295eb984 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue
@@ -7,27 +7,27 @@
             </InfoBox>
             <ValidationProvider tag="div" mode="passive" name="Mail Driver" rules="required" v-slot="{ errors }">
                 <AppInputText :title="$t('admin_settings.email.driver')" :error="errors[0]">
-                    <input v-model="mail.driver" :placeholder="$t('admin_settings.email.driver_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
+                    <input v-model="mail.driver" :placeholder="$t('admin_settings.email.driver_plac')" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
                 </AppInputText>
             </ValidationProvider>
             <ValidationProvider tag="div" mode="passive" name="Mail Host" rules="required" v-slot="{ errors }">
                 <AppInputText :title="$t('admin_settings.email.host')" :error="errors[0]">
-                    <input v-model="mail.host" :placeholder="$t('admin_settings.email.host_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
+                    <input v-model="mail.host" :placeholder="$t('admin_settings.email.host_plac')" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
                 </AppInputText>
             </ValidationProvider>
             <ValidationProvider tag="div" mode="passive" name="Mail Port" rules="required" v-slot="{ errors }">
                 <AppInputText :title="$t('admin_settings.email.port')" :error="errors[0]">
-                    <input v-model="mail.port" :placeholder="$t('admin_settings.email.port_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
+                    <input v-model="mail.port" :placeholder="$t('admin_settings.email.port_plac')" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
                 </AppInputText>
             </ValidationProvider>
             <ValidationProvider tag="div" mode="passive" name="Mail Username" rules="required" v-slot="{ errors }">
                 <AppInputText :title="$t('admin_settings.email.username')" :error="errors[0]">
-                    <input v-model="mail.username" :placeholder="$t('admin_settings.email.username_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
+                    <input v-model="mail.username" :placeholder="$t('admin_settings.email.username_plac')" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
                 </AppInputText>
             </ValidationProvider>
             <ValidationProvider tag="div" mode="passive" name="Mail Password" rules="required" v-slot="{ errors }">
                 <AppInputText :title="$t('admin_settings.email.password')" :error="errors[0]">
-                    <input v-model="mail.password" :placeholder="$t('admin_settings.email.password_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
+                    <input v-model="mail.password" :placeholder="$t('admin_settings.email.password_plac')" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
                 </AppInputText>
             </ValidationProvider>
             <ValidationProvider tag="div" mode="passive" name="Mail Encryption" rules="required" v-slot="{ errors }">
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Index.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Index.vue
index 69e956d0..2b0b3d6f 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Index.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Index.vue
@@ -25,7 +25,7 @@
                     <div class="block-wrapper">
                         <label>Title:</label>
                         <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
-                            <input @input="$updateText('/admin/settings', 'header_title', app.header_title)" v-model="app.header_title" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"/>
+                            <input @input="$updateText('/admin/settings', 'header_title', app.header_title)" v-model="app.header_title" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"/>
                             <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                         </ValidationProvider>
                     </div>
@@ -33,7 +33,7 @@
                     <div class="block-wrapper">
                         <label>Description:</label>
                         <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Description" rules="required" v-slot="{ errors }">
-                            <textarea @input="$updateText('/admin/settings', 'header_description', app.header_description)" rows="2" v-model="app.header_description" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"></textarea>
+                            <textarea @input="$updateText('/admin/settings', 'header_description', app.header_description)" rows="2" v-model="app.header_description" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"></textarea>
                             <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                         </ValidationProvider>
                     </div>
@@ -65,7 +65,7 @@
                         <div class="block-wrapper">
                             <label>Title:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
-                                <input @input="$updateText('/admin/settings', 'features_title', app.features_title)" v-model="app.features_title" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"/>
+                                <input @input="$updateText('/admin/settings', 'features_title', app.features_title)" v-model="app.features_title" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -73,7 +73,7 @@
                         <div class="block-wrapper">
                             <label>Description:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Description" rules="required" v-slot="{ errors }">
-                                <textarea @input="$updateText('/admin/settings', 'features_description', app.features_description)" rows="2" v-model="app.features_description" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"></textarea>
+                                <textarea @input="$updateText('/admin/settings', 'features_description', app.features_description)" rows="2" v-model="app.features_description" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"></textarea>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -104,42 +104,42 @@
                         <div class="block-wrapper">
                             <label>First Box Title:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Feature Title 1" rules="required" v-slot="{ errors }">
-                                <input @input="$updateText('/admin/settings', 'feature_title_1', app.feature_title_1)" v-model="app.feature_title_1" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"/>
+                                <input @input="$updateText('/admin/settings', 'feature_title_1', app.feature_title_1)" v-model="app.feature_title_1" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
                         <div class="block-wrapper">
                             <label>First Box Description:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Feature Description 1" rules="required" v-slot="{ errors }">
-                                <textarea @input="$updateText('/admin/settings', 'feature_description_1', app.feature_description_1)" rows="2" v-model="app.feature_description_1" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"></textarea>
+                                <textarea @input="$updateText('/admin/settings', 'feature_description_1', app.feature_description_1)" rows="2" v-model="app.feature_description_1" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"></textarea>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
                         <div class="block-wrapper">
                             <label>Second Box Title:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Feature Title 2" rules="required" v-slot="{ errors }">
-                                <input @input="$updateText('/admin/settings', 'feature_title_2', app.feature_title_2)" v-model="app.feature_title_2" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"/>
+                                <input @input="$updateText('/admin/settings', 'feature_title_2', app.feature_title_2)" v-model="app.feature_title_2" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
                         <div class="block-wrapper">
                             <label>Second Box Description:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Feature Description 2" rules="required" v-slot="{ errors }">
-                                <textarea @input="$updateText('/admin/settings', 'feature_description_2', app.feature_description_2)" rows="2" v-model="app.feature_description_2" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"></textarea>
+                                <textarea @input="$updateText('/admin/settings', 'feature_description_2', app.feature_description_2)" rows="2" v-model="app.feature_description_2" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"></textarea>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
                         <div class="block-wrapper">
                             <label>Third Box Title:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Feature Title 3" rules="required" v-slot="{ errors }">
-                                <input @input="$updateText('/admin/settings', 'feature_title_3', app.feature_title_3)" v-model="app.feature_title_3" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"/>
+                                <input @input="$updateText('/admin/settings', 'feature_title_3', app.feature_title_3)" v-model="app.feature_title_3" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
                         <div class="block-wrapper">
                             <label>Third Box Description:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Feature Description 3" rules="required" v-slot="{ errors }">
-                                <textarea @input="$updateText('/admin/settings', 'feature_description_3', app.feature_description_3)" rows="2" v-model="app.feature_description_3" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"></textarea>
+                                <textarea @input="$updateText('/admin/settings', 'feature_description_3', app.feature_description_3)" rows="2" v-model="app.feature_description_3" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"></textarea>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -170,7 +170,7 @@
                         <div class="block-wrapper">
                             <label>Title:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
-                                <input @input="$updateText('/admin/settings', 'pricing_title', app.pricing_title)" v-model="app.pricing_title" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"/>
+                                <input @input="$updateText('/admin/settings', 'pricing_title', app.pricing_title)" v-model="app.pricing_title" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -178,7 +178,7 @@
                         <div class="block-wrapper">
                             <label>Description:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Description" rules="required" v-slot="{ errors }">
-                                <textarea @input="$updateText('/admin/settings', 'pricing_description', app.pricing_description)" rows="2" v-model="app.pricing_description" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"></textarea>
+                                <textarea @input="$updateText('/admin/settings', 'pricing_description', app.pricing_description)" rows="2" v-model="app.pricing_description" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"></textarea>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -210,7 +210,7 @@
                         <div class="block-wrapper">
                             <label>Title:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
-                                <input @input="$updateText('/admin/settings', 'get_started_title', app.get_started_title)" v-model="app.get_started_title" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"/>
+                                <input @input="$updateText('/admin/settings', 'get_started_title', app.get_started_title)" v-model="app.get_started_title" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -218,7 +218,7 @@
                         <div class="block-wrapper">
                             <label>Description:</label>
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Description" rules="required" v-slot="{ errors }">
-                            <textarea @input="$updateText('/admin/settings', 'get_started_description', app.get_started_description)" rows="2" v-model="app.get_started_description" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"></textarea>
+                            <textarea @input="$updateText('/admin/settings', 'get_started_description', app.get_started_description)" rows="2" v-model="app.get_started_description" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"></textarea>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -232,7 +232,7 @@
                     <div class="block-wrapper">
                         <label>Footer content:</label>
                         <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
-                            <input @input="$updateText('/admin/settings', 'footer_content', app.footer_content)" v-model="app.footer_content" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"/>
+                            <input @input="$updateText('/admin/settings', 'footer_content', app.footer_content)" v-model="app.footer_content" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"/>
                             <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                         </ValidationProvider>
                     </div>
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Payments.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Payments.vue
index a200c899..e6fb1820 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Payments.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Payments.vue
@@ -35,12 +35,12 @@
 				</ValidationProvider>
 				<ValidationProvider tag="div" mode="passive" name="Publishable Key" rules="required" v-slot="{ errors }">
 					<AppInputText :title="$t('admin_settings.payments.stripe_pub_key')" :error="errors[0]">
-						<input v-model="stripeCredentials.key" :placeholder="$t('admin_settings.payments.stripe_pub_key_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
+						<input v-model="stripeCredentials.key" :placeholder="$t('admin_settings.payments.stripe_pub_key_plac')" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
 					</AppInputText>
 				</ValidationProvider>
 				<ValidationProvider tag="div" mode="passive" name="Secret Key" rules="required" v-slot="{ errors }">
 					<AppInputText :title="$t('admin_settings.payments.stripe_sec_key')" :error="errors[0]">
-						<input v-model="stripeCredentials.secret" :placeholder="$t('admin_settings.payments.stripe_sec_key_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
+						<input v-model="stripeCredentials.secret" :placeholder="$t('admin_settings.payments.stripe_sec_key_plac')" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
 					</AppInputText>
 				</ValidationProvider>
 				<ValidationProvider tag="div" mode="passive" name="Webhook URL" rules="required" v-slot="{ errors }">
@@ -53,7 +53,7 @@
 				</ValidationProvider>
 				<ValidationProvider tag="div" mode="passive" name="Webhook Secret" rules="required" v-slot="{ errors }">
 					<AppInputText :title="$t('Webhook Secret')" :error="errors[0]">
-						<input v-model="stripeCredentials.webhookSecret" :placeholder="$t('admin_settings.payments.stripe_webhook_key_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
+						<input v-model="stripeCredentials.webhookSecret" :placeholder="$t('admin_settings.payments.stripe_webhook_key_plac')" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
 					</AppInputText>
 				</ValidationProvider>
 				<InfoBox v-if="isError" type="error">
diff --git a/resources/js/views/Admin/Languages/Language.vue b/resources/js/views/Admin/Languages/Language.vue
index 5917254b..aada44fa 100644
--- a/resources/js/views/Admin/Languages/Language.vue
+++ b/resources/js/views/Admin/Languages/Language.vue
@@ -64,7 +64,7 @@
 
 						<ValidationProvider tag="div" mode="passive" name="Language name" rules="required" v-slot="{ errors }">
 							<AppInputText :title="$t('language_name')" :error="errors[0]">
-								<input @input="$updateText(`/admin/languages/${selectedLanguage.data.id}`, 'name', selectedLanguage.data.attributes.name)" v-model="selectedLanguage.data.attributes.name" :placeholder="$t('admin_settings.appearance.description_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
+								<input @input="$updateText(`/admin/languages/${selectedLanguage.data.id}`, 'name', selectedLanguage.data.attributes.name)" v-model="selectedLanguage.data.attributes.name" :placeholder="$t('admin_settings.appearance.description_plac')" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
 							</AppInputText>
 						</ValidationProvider>
 
@@ -100,7 +100,7 @@
 									@input="$updateText(`/admin/languages/${selectedLanguage.data.id}/strings`, key, selectedLanguage.data.attributes.translations[key])"
 									:rows="selectedLanguage.data.attributes.translations[key].length >= 80 ? 3 : 1"
 									class="focus-border-theme input-dark"
-									:class="{'is-error': errors[0]}"
+									:class="{'border-red-700': errors[0]}"
 								></textarea>
 							</AppInputText>
 						</ValidationProvider>
diff --git a/resources/js/views/Admin/Plans/PlanCreate.vue b/resources/js/views/Admin/Plans/PlanCreate.vue
index 5cff9f9d..12d69a79 100644
--- a/resources/js/views/Admin/Plans/PlanCreate.vue
+++ b/resources/js/views/Admin/Plans/PlanCreate.vue
@@ -9,14 +9,14 @@
 			<!--Name-->
 			<ValidationProvider tag="div" mode="passive" name="Name" rules="required" v-slot="{ errors }">
 				<AppInputText :title="$t('admin_page_plans.form.name')">
-					<input v-model="plan.name" :placeholder="$t('admin_page_plans.form.name_plac')" type="text" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
+					<input v-model="plan.name" :placeholder="$t('admin_page_plans.form.name_plac')" type="text" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
 				</AppInputText>
 			</ValidationProvider>
 
 			<!--Description-->
 			<ValidationProvider tag="div" mode="passive" name="Description" v-slot="{ errors }">
 				<AppInputText :title="$t('admin_page_plans.form.description')" :is-last="true">
-					<textarea v-model="plan.description" :placeholder="$t('admin_page_plans.form.description_plac')" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark"></textarea>
+					<textarea v-model="plan.description" :placeholder="$t('admin_page_plans.form.description_plac')" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark"></textarea>
 				</AppInputText>
 			</ValidationProvider>
 		</div>
@@ -30,7 +30,7 @@
 				<!--Price-->
 				<ValidationProvider tag="div" mode="passive" name="Price" rules="required" v-slot="{ errors }" class="w-full">
 					<AppInputText :title="$t('admin_page_plans.form.price')" class="w-full">
-						<input v-model="plan.amount" :placeholder="$t('admin_page_plans.form.price_plac')" type="number" step="0.01" min="1" max="999999999999" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
+						<input v-model="plan.amount" :placeholder="$t('admin_page_plans.form.price_plac')" type="number" step="0.01" min="1" max="999999999999" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
 					</AppInputText>
 				</ValidationProvider>
 
@@ -58,14 +58,14 @@
 			<!--Storage Capacity-->
 			<ValidationProvider tag="div" mode="passive" name="Max Storage Capacity" rules="required" v-slot="{ errors }">
 				<AppInputText :title="$t('admin_page_plans.form.storage')" :description="$t('admin_page_plans.form.storage_helper')">
-					<input v-model="plan.features.max_storage_amount" :placeholder="$t('admin_page_plans.form.storage_plac')" type="number" min="1" max="999999999" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
+					<input v-model="plan.features.max_storage_amount" :placeholder="$t('admin_page_plans.form.storage_plac')" type="number" min="1" max="999999999" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
 				</AppInputText>
 			</ValidationProvider>
 
 			<!--Team Members-->
 			<ValidationProvider tag="div" mode="passive" name="Max Team Members" rules="required" v-slot="{ errors }">
 				<AppInputText :title="$t('Team Members')" :description="$t('To set unlimited team members, type -1 into form')" :is-last="true">
-					<input v-model="plan.features.max_team_members" :placeholder="$t('Add max team members in number')" type="number" min="1" max="999999999" :class="{'is-error': errors[0]}" class="focus-border-theme input-dark" />
+					<input v-model="plan.features.max_team_members" :placeholder="$t('Add max team members in number')" type="number" min="1" max="999999999" :class="{'border-red-700': errors[0]}" class="focus-border-theme input-dark" />
 				</AppInputText>
 			</ValidationProvider>
 		</div>
diff --git a/resources/js/views/Admin/Users/User.vue b/resources/js/views/Admin/Users/User.vue
index f2dc9462..ac4d8370 100644
--- a/resources/js/views/Admin/Users/User.vue
+++ b/resources/js/views/Admin/Users/User.vue
@@ -39,6 +39,7 @@
     import PageHeader from '/resources/js/components/Others/PageHeader'
     import ColorLabel from '/resources/js/components/Others/ColorLabel'
     import Spinner from '/resources/js/components/FilesView/Spinner'
+	import {events} from '/resources/js/bus'
     import {mapGetters} from 'vuex'
     import axios from 'axios'
 
@@ -80,13 +81,9 @@
 						route: 'UserStorage',
 					},
 					{
-						title: this.$t('admin_page_user.tabs.subscription'),
+						title: this.$t('Billing'),
 						route: 'UserSubscription',
 					},
-					{
-						title: this.$t('Transactions'),
-						route: 'UserInvoices',
-					},
 					{
 						title: this.$t('admin_page_user.tabs.password'),
 						route: 'UserPassword',
@@ -109,6 +106,8 @@
         },
         created() {
             this.fetchUser()
+
+			events.$on('reload:user', () => this.fetchUser())
         }
     }
 </script>
diff --git a/resources/js/views/Admin/Users/UserCreate.vue b/resources/js/views/Admin/Users/UserCreate.vue
index 35b50229..7c3d8e8a 100644
--- a/resources/js/views/Admin/Users/UserCreate.vue
+++ b/resources/js/views/Admin/Users/UserCreate.vue
@@ -13,14 +13,14 @@
 			<!--Email-->
             <ValidationProvider tag="div" mode="passive" name="email" rules="required" v-slot="{ errors }">
                 <AppInputText :title="$t('page_registration.label_email')" :error="errors[0]">
-                    <input v-model="user.email" :placeholder="$t('admin_page_user.create_user.label_email')" type="email" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
+                    <input v-model="user.email" :placeholder="$t('admin_page_user.create_user.label_email')" type="email" class="focus-border-theme input-dark" :class="{'border-red-700': errors[0]}"/>
                 </AppInputText>
             </ValidationProvider>
 
 			<!--Name-->
             <ValidationProvider tag="div" mode="passive" name="user name" rules="required" v-slot="{ errors }">
                 <AppInputText :title="$t('page_registration.label_name')" :error="errors[0]">
-                    <input v-model="user.name" :placeholder="$t('admin_page_user.create_user.label_name')" type="text" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
+                    <input v-model="user.name" :placeholder="$t('admin_page_user.create_user.label_name')" type="text" class="focus-border-theme input-dark" :class="{'border-red-700': errors[0]}"/>
                 </AppInputText>
             </ValidationProvider>
 
@@ -28,12 +28,12 @@
             <div class="flex space-x-4">
                 <ValidationProvider tag="div" mode="passive" name="password" rules="required" v-slot="{ errors }" class="w-full">
                     <AppInputText :title="$t('page_registration.label_pass')" :error="errors[0]">
-                        <input v-model="user.password" :placeholder="$t('page_registration.placeholder_pass')" type="password" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
+                        <input v-model="user.password" :placeholder="$t('page_registration.placeholder_pass')" type="password" class="focus-border-theme input-dark" :class="{'border-red-700': errors[0]}"/>
                     </AppInputText>
                 </ValidationProvider>
                 <ValidationProvider tag="div" mode="passive" name="password confirm" rules="required" v-slot="{ errors }" class="w-full">
                     <AppInputText :title="$t('page_registration.label_confirm_pass')" :error="errors[0]">
-                        <input v-model="user.password_confirmation" :placeholder="$t('admin_page_user.create_user.label_conf_pass')" type="password" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
+                        <input v-model="user.password_confirmation" :placeholder="$t('admin_page_user.create_user.label_conf_pass')" type="password" class="focus-border-theme input-dark" :class="{'border-red-700': errors[0]}"/>
                     </AppInputText>
                 </ValidationProvider>
             </div>
@@ -51,7 +51,7 @@
 			<!--Storage Capacity-->
             <ValidationProvider tag="div" mode="passive" name="storage capacity" rules="required" v-slot="{ errors }">
                 <AppInputText :title="$t('admin_page_user.label_change_capacity')" :error="errors[0]">
-                    <input v-model="user.max_storage_amount" min="1" max="999999999" :placeholder="$t('admin_page_user.label_change_capacity')" type="number" class="focus-border-theme input-dark" :class="{'is-error': errors[0]}"/>
+                    <input v-model="user.max_storage_amount" min="1" max="999999999" :placeholder="$t('admin_page_user.label_change_capacity')" type="number" class="focus-border-theme input-dark" :class="{'border-red-700': errors[0]}"/>
                 </AppInputText>
             </ValidationProvider>
         </div>
diff --git a/resources/js/views/Admin/Users/UserTabs/UserDelete.vue b/resources/js/views/Admin/Users/UserTabs/UserDelete.vue
index 6cab305f..a025dab4 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserDelete.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserDelete.vue
@@ -14,7 +14,7 @@
 							   :placeholder="$t('admin_page_user.placeholder_delete_user')"
 							   type="text"
 							   class="focus-border-theme input-dark"
-							   :class="{'is-error': errors[0]}"
+							   :class="{'border-red-700': errors[0]}"
 						/>
 						<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="danger" class="submit-button">
 							{{ $t('admin_page_user.delete_user') }}
diff --git a/resources/js/views/Admin/Users/UserTabs/UserFixedSubscription.vue b/resources/js/views/Admin/Users/UserTabs/UserFixedSubscription.vue
new file mode 100644
index 00000000..b6051dea
--- /dev/null
+++ b/resources/js/views/Admin/Users/UserTabs/UserFixedSubscription.vue
@@ -0,0 +1,96 @@
+<template>
+	<div class="card shadow-card">
+		<div class="md:flex md:space-x-10 mb-8">
+			<div class="md:mb-0 mb-6">
+				<b class="block leading-5 text-lg">
+					{{ status }}
+				</b>
+				<small class="text-gray-500">
+					{{ $t('We will send you a notification upon Subscription expiration') }}
+				</small>
+			</div>
+			<div>
+				<b class="block leading-5 text-lg">
+					{{ price }}
+				</b>
+				<small class="text-gray-500">
+					{{ subscription.relationships.plan.data.attributes.name }}
+				</small>
+			</div>
+		</div>
+
+		<div v-for="(limit, i) in limitations" :key="i" class="mb-6">
+			<b class="mb-3 block text-sm text-gray-400">
+				{{ limit.message }}
+			</b>
+			<ProgressLine :data="limit.distribution" />
+		</div>
+	</div>
+</template>
+<script>
+	import ProgressLine from "../../../../components/Admin/ProgressLine"
+	import {mapGetters} from "vuex";
+
+	export default {
+		name: 'UserFixedSubscription',
+		props: [
+			'subscription',
+			'user',
+		],
+		components: {
+			ProgressLine
+		},
+		computed: {
+			status() {
+				return {
+					'active': `Active until ${this.subscription.attributes.renews_at}`,
+					'cancelled': `Active until ${this.subscription.attributes.ends_at}`,
+				}[this.subscription.attributes.status]
+			},
+			price() {
+				return {
+					'month': `${this.subscription.relationships.plan.data.attributes.price} Per Month`,
+					'year': `${this.subscription.relationships.plan.data.attributes.price} Per Year`,
+				}[this.subscription.relationships.plan.data.attributes.interval]
+			},
+		},
+		data() {
+			return {
+				limitations: []
+			}
+		},
+		created() {
+			Object
+				.entries(this.user.data.meta.limitations)
+				.map(([key, item]) => {
+
+					let payload = {
+						color: {
+							'max_storage_amount': 'warning',
+							'max_team_members': 'purple',
+						},
+						message: {
+							'max_storage_amount': `Total ${item.use} of ${item.total} Used`,
+							'max_team_members': `Total ${item.use} of ${item.total} Members`,
+						},
+						title: {
+							'max_storage_amount': `Storage`,
+							'max_team_members': `Team Members`,
+						}
+					}
+
+					this.limitations.push({
+						message: payload.message[key],
+						distribution: [
+							{
+								progress: item.percentage,
+								color: payload.color[key],
+								title: payload.title[key],
+							}
+						]
+					})
+				})
+		}
+
+	}
+</script>
\ No newline at end of file
diff --git a/resources/js/views/Admin/Users/UserTabs/UserInvoices.vue b/resources/js/views/Admin/Users/UserTabs/UserInvoices.vue
deleted file mode 100644
index 5bc9d492..00000000
--- a/resources/js/views/Admin/Users/UserTabs/UserInvoices.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-    <PageTab :is-loading="isLoading">
-		<div class="card shadow-card">
-			<DatatableWrapper
-				@init="isLoading = false"
-				:api="'/api/subscriptions/admin/users/' + this.$route.params.id + '/transactions'"
-				:paginator="true"
-				:columns="columns"
-			>
-                <template slot-scope="{ row }">
-                    <tr class="border-b dark:border-opacity-5 border-light border-dashed">
-                        <td class="py-4">
-                            <span class="text-sm font-bold">
-								{{ row.data.attributes.note }}
-							</span>
-                        </td>
-                        <td>
-							<ColorLabel :color="$getTransactionStatusColor(row.data.attributes.status)">
-                                {{ row.data.attributes.status }}
-							</ColorLabel>
-                        </td>
-                        <td>
-                            <span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
-                                {{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
-                            </span>
-                        </td>
-                        <td>
-                            <span class="text-sm font-bold">
-                                {{ row.data.attributes.created_at }}
-                            </span>
-                        </td>
-                        <td class="text-right">
-                            <img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
-                        </td>
-                    </tr>
-                </template>
-
-				<!--Empty page-->
-                <template v-slot:empty-page>
-                    <InfoBox>
-                        <p>{{ $t('admin_page_user.invoices.empty') }}</p>
-                    </InfoBox>
-                </template>
-            </DatatableWrapper>
-		</div>
-    </PageTab>
-</template>
-
-<script>
-    import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
-	import ColorLabel from "/resources/js/components/Others/ColorLabel"
-    import PageTab from '/resources/js/components/Others/Layout/PageTab'
-    import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
-
-    export default {
-        name: 'UserInvoices',
-        components: {
-            DatatableWrapper,
-			ColorLabel,
-            InfoBox,
-            PageTab,
-        },
-        data() {
-            return {
-                isLoading: true,
-                columns: [
-                    {
-                        label: this.$t('Note'),
-                        field: 'note',
-                        sortable: true
-                    },
-                    {
-                        label: this.$t('Status'),
-                        field: 'status',
-                        sortable: true
-                    },
-                    {
-                        label: this.$t('admin_page_invoices.table.total'),
-                        field: 'amount',
-                        sortable: true
-                    },
-                    {
-                        label: this.$t('Payed At'),
-                        field: 'created_at',
-                        sortable: true
-                    },
-                    {
-                        label: this.$t('Service'),
-						field: 'driver',
-                        sortable: true
-                    },
-                ],
-            }
-        },
-    }
-</script>
diff --git a/resources/js/views/Admin/Users/UserTabs/UserMeteredSubscription.vue b/resources/js/views/Admin/Users/UserTabs/UserMeteredSubscription.vue
new file mode 100644
index 00000000..382ac8b0
--- /dev/null
+++ b/resources/js/views/Admin/Users/UserTabs/UserMeteredSubscription.vue
@@ -0,0 +1,150 @@
+<template>
+	<div>
+		<!--Balance-->
+		<div class="card shadow-card">
+			<FormLabel icon="hard-drive">
+				{{ $t('Balance') }}
+			</FormLabel>
+
+			<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
+				{{ user.data.relationships.balance.data.attributes.formatted }}
+			</b>
+
+			<ValidationObserver ref="creditUserBalance" @submit.prevent="increaseBalance" v-slot="{ invalid }" tag="form" class="mt-6">
+				<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Balance Amount" rules="required">
+					<AppInputText :description="$t('User balance will be increased for the amount above.')" :error="errors[0]" :is-last="true">
+						<div class="flex space-x-4">
+							<input v-model="balanceAmount"
+								   :placeholder="$t('Increase user balance for...')"
+								   type="number"
+								   min="1"
+								   max="999999999"
+								   class="focus-border-theme input-dark"
+								   :class="{'border-red-700': errors[0]}"
+							/>
+							<ButtonBase type="submit" button-style="theme" class="submit-button"
+								:loading="isUpdatingBalanceAmount"
+								:disabled="isUpdatingBalanceAmount"
+							>
+								{{ $t('Increase Balance') }}
+							</ButtonBase>
+						</div>
+					</AppInputText>
+				</ValidationProvider>
+			</ValidationObserver>
+		</div>
+
+		<!--Usage Estimates-->
+		<div class="card shadow-card">
+			<FormLabel icon="hard-drive">
+				{{ $t('Usage Estimates') }}
+			</FormLabel>
+
+			<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
+				{{ user.data.meta.usages.costEstimate }}
+			</b>
+
+			<b class="mb-3 block text-sm text-gray-400 mb-5">
+				{{ user.data.relationships.subscription.data.attributes.updated_at }} {{ $t('till now') }}
+			</b>
+
+			<div>
+				<div class="flex items-center justify-between py-2 border-b dark:border-opacity-5 border-light border-dashed" v-for="(usage, i) in user.data.meta.usages.featureEstimates" :key="i">
+					<div class="w-2/4 leading-none">
+						<b class="text-sm font-bold leading-none">
+							{{ $t(usage.feature) }}
+						</b>
+						<small class="text-xs text-gray-500 pt-2 leading-none block">
+							{{ $t(`feature_usage_desc_${usage.feature}`) }}
+						</small>
+					</div>
+					<div class="text-left w-1/4">
+						<span class="text-sm font-bold text-gray-560">
+							{{ usage.usage }}
+						</span>
+					</div>
+					<div class="text-right w-1/4">
+						<span class="text-sm font-bold text-theme">
+							{{ usage.cost }}
+						</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+<script>
+	import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
+	import AppInputText from "../../../../components/Admin/AppInputText"
+	import FormLabel from "../../../../components/Others/Forms/FormLabel"
+	import ButtonBase from "../../../../components/FilesView/ButtonBase"
+	import ColorLabel from "../../../../components/Others/ColorLabel"
+	import {mapGetters} from "vuex";
+	import axios from "axios";
+	import {events} from "../../../../bus";
+
+	export default {
+		name: 'UserMeteredSubscription',
+		props: [
+			'subscription',
+			'user',
+		],
+		components: {
+			ValidationProvider,
+			ValidationObserver,
+			AppInputText,
+			ButtonBase,
+			ColorLabel,
+			FormLabel,
+		},
+		computed: {
+			...mapGetters([
+
+			]),
+		},
+		data() {
+			return {
+				balanceAmount: undefined,
+				isUpdatingBalanceAmount: false,
+			}
+		},
+		methods: {
+			async increaseBalance() {
+				// Validate fields
+				const isValid = await this.$refs.creditUserBalance.validate();
+
+				if (!isValid) return;
+
+				this.isUpdatingBalanceAmount = true
+
+				axios
+					.post(`/api/subscriptions/admin/users/${this.user.data.id}/credit`, {
+						amount: this.balanceAmount
+					})
+					.then(() => {
+						events.$emit('reload:user')
+
+						this.balanceAmount = undefined
+
+						events.$emit('toaster', {
+							type: 'success',
+							message: this.$t('User balance was successfully increased'),
+						})
+					})
+					.catch(() => {
+						events.$emit('toaster', {
+							type: 'success',
+							message: this.$t('popup_error.title'),
+						})
+					})
+					.finally(() => {
+						this.isUpdatingBalanceAmount = false
+					})
+			}
+		},
+		created() {
+
+		}
+
+	}
+</script>
\ No newline at end of file
diff --git a/resources/js/views/Admin/Users/UserTabs/UserStorage.vue b/resources/js/views/Admin/Users/UserTabs/UserStorage.vue
index 649efd49..3981d002 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserStorage.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserStorage.vue
@@ -64,7 +64,7 @@
 								   min="1"
 								   max="999999999"
 								   class="focus-border-theme input-dark"
-								   :class="{'is-error': errors[0]}"
+								   :class="{'border-red-700': errors[0]}"
 							/>
 							<ButtonBase :loading="isSendingRequest" :disabled="isSendingRequest" type="submit" button-style="theme" class="submit-button">
 								{{ $t('admin_page_user.change_capacity') }}
diff --git a/resources/js/views/Admin/Users/UserTabs/UserSubscription.vue b/resources/js/views/Admin/Users/UserTabs/UserSubscription.vue
index 33aa05d0..0f3819ae 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserSubscription.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserSubscription.vue
@@ -1,33 +1,68 @@
 <template>
     <PageTab :is-loading="isLoading">
-		<div v-if="subscription" class="card shadow-card">
-			<div class="md:flex md:space-x-10 mb-8">
-				<div class="md:mb-0 mb-6">
-					<b class="block leading-5 text-lg">
-						{{ status }}
-					</b>
-					<small class="text-gray-500">
-						{{ $t('We will send you a notification upon Subscription expiration') }}
-					</small>
-				</div>
-				<div>
-					<b class="block leading-5 text-lg">
-						{{ price }}
-					</b>
-					<small class="text-gray-500">
-						{{ subscription.relationships.plan.data.attributes.name }}
-					</small>
-				</div>
-			</div>
 
-			<div v-for="(limit, i) in limitations" :key="i" class="mb-6">
-				<b class="mb-3 block text-sm text-gray-400">
-					{{ limit.message }}
-				</b>
-				<ProgressLine :data="limit.distribution" />
-			</div>
+		<UserMeteredSubscription
+			v-if="subscription && config.subscriptionType === 'metered'"
+			:subscription="subscription"
+			:user="user"
+		/>
+
+		<UserFixedSubscription
+			v-if="subscription && config.subscriptionType === 'fixed'"
+			:subscription="subscription"
+			:user="user"
+		/>
+
+		<!--Transactions-->
+		<div class="card shadow-card">
+			<FormLabel icon="file-text">
+                {{ $t('Transactions') }}
+            </FormLabel>
+
+			<DatatableWrapper
+				@init="isLoading = false"
+				:api="'/api/subscriptions/admin/users/' + this.$route.params.id + '/transactions'"
+				:paginator="true"
+				:columns="columns"
+			>
+                <template slot-scope="{ row }">
+                    <tr class="border-b dark:border-opacity-5 border-light border-dashed">
+                        <td class="py-4">
+                            <span class="text-sm font-bold">
+								{{ row.data.attributes.note }}
+							</span>
+                        </td>
+                        <td>
+							<ColorLabel :color="$getTransactionStatusColor(row.data.attributes.status)">
+                                {{ row.data.attributes.status }}
+							</ColorLabel>
+                        </td>
+                        <td>
+                            <span class="text-sm font-bold" :class="$getTransactionTypeTextColor(row.data.attributes.type)">
+                                {{ $getTransactionMark(row.data.attributes.type) + row.data.attributes.price }}
+                            </span>
+                        </td>
+                        <td>
+                            <span class="text-sm font-bold">
+                                {{ row.data.attributes.created_at }}
+                            </span>
+                        </td>
+                        <td class="text-right">
+                            <img class="inline-block max-h-5" :src="$getPaymentLogo(row.data.attributes.driver)" :alt="row.data.attributes.driver">
+                        </td>
+                    </tr>
+                </template>
+
+				<!--Empty page-->
+                <template v-slot:empty-page>
+                    <InfoBox>
+                        <p>{{ $t('admin_page_user.invoices.empty') }}</p>
+                    </InfoBox>
+                </template>
+            </DatatableWrapper>
 		</div>
 
+		<!--Empty Message-->
 		<div v-if="! subscription && !isLoading" class="card shadow-card">
 			<InfoBox style="margin-bottom: 0">
 				<p>{{ $t("User don't have any subscription") }}</p>
@@ -37,10 +72,14 @@
 </template>
 
 <script>
-    import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
-	import ProgressLine from "../../../../components/Admin/ProgressLine"
+    import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
+	import FormLabel from "../../../../components/Others/Forms/FormLabel";
+	import ColorLabel from "/resources/js/components/Others/ColorLabel"
 	import PageTab from '/resources/js/components/Others/Layout/PageTab'
 	import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
+	import UserMeteredSubscription from "./UserMeteredSubscription";
+	import UserFixedSubscription from "./UserFixedSubscription"
+	import {mapGetters} from "vuex";
 	import axios from 'axios'
 
 	export default {
@@ -49,30 +88,50 @@
 			'user'
 		],
 		components: {
-			ProgressLine,
-			ButtonBase,
+			UserMeteredSubscription,
+			UserFixedSubscription,
+			DatatableWrapper,
+			ColorLabel,
+			FormLabel,
 			InfoBox,
 			PageTab,
 		},
 		computed: {
-			status() {
-				return {
-					'active': `Active until ${this.subscription.attributes.renews_at}`,
-					'cancelled': `Active until ${this.subscription.attributes.ends_at}`,
-				}[this.subscription.attributes.status]
-			},
-			price() {
-				return {
-					'month': `${this.subscription.relationships.plan.data.attributes.price} Per Month`,
-					'year': `${this.subscription.relationships.plan.data.attributes.price} Per Year`,
-				}[this.subscription.relationships.plan.data.attributes.interval]
-			},
+			...mapGetters([
+				'config',
+			]),
 		},
 		data() {
 			return {
 				subscription: undefined,
 				isLoading: true,
-				limitations: [],
+				columns: [
+					{
+						label: this.$t('Note'),
+						field: 'note',
+						sortable: true
+					},
+					{
+						label: this.$t('Status'),
+						field: 'status',
+						sortable: true
+					},
+					{
+						label: this.$t('admin_page_invoices.table.total'),
+						field: 'amount',
+						sortable: true
+					},
+					{
+						label: this.$t('Payed At'),
+						field: 'created_at',
+						sortable: true
+					},
+					{
+						label: this.$t('Service'),
+						field: 'driver',
+						sortable: true
+					},
+				],
 			}
 		},
 		created() {
@@ -80,37 +139,6 @@
 				.then(response => {
 					this.subscription = response.data.data
 
-					Object
-						.entries(this.user.data.meta.limitations)
-						.map(([key, item]) => {
-
-							let payload = {
-								color: {
-									'max_storage_amount': 'warning',
-									'max_team_members': 'purple',
-								},
-								message: {
-									'max_storage_amount': `Total ${item.use} of ${item.total} Used`,
-									'max_team_members': `Total ${item.use} of ${item.total} Members`,
-								},
-								title: {
-									'max_storage_amount': `Storage`,
-									'max_team_members': `Team Members`,
-								}
-							}
-
-							this.limitations.push({
-								message: payload.message[key],
-								distribution: [
-									{
-										progress: item.percentage,
-										color: payload.color[key],
-										title: payload.title[key],
-									}
-								]
-							})
-						})
-
 					this.isLoading = false
 				})
 				.catch(error => {
diff --git a/resources/js/views/Auth/CreateNewPassword.vue b/resources/js/views/Auth/CreateNewPassword.vue
index 6e39f251..6fca553e 100644
--- a/resources/js/views/Auth/CreateNewPassword.vue
+++ b/resources/js/views/Auth/CreateNewPassword.vue
@@ -16,7 +16,7 @@
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="E-Mail" rules="required"
                                         v-slot="{ errors }">
                         <input v-model="recoverPassword.email" :placeholder="$t('page_login.placeholder_email')" type="email"
-                               :class="{'is-error': errors[0]}"/>
+                               :class="{'border-red-700': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -26,7 +26,7 @@
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="New Password"
                                         rules="required" v-slot="{ errors }">
                         <input v-model="recoverPassword.newPassword" :placeholder="$t('page_create_password.label_new_pass')" type="password"
-                               :class="{'is-error': errors[0]}"/>
+                               :class="{'border-red-700': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -36,7 +36,7 @@
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Confirm Password"
                                         rules="required" v-slot="{ errors }">
                         <input v-model="recoverPassword.newPasswordConfirm" :placeholder="$t('page_create_password.label_confirm_pass')"
-                               type="password" :class="{'is-error': errors[0]}"/>
+                               type="password" :class="{'border-red-700': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
diff --git a/resources/js/views/Auth/ForgottenPassword.vue b/resources/js/views/Auth/ForgottenPassword.vue
index 3a1b16e9..0ed6d818 100644
--- a/resources/js/views/Auth/ForgottenPassword.vue
+++ b/resources/js/views/Auth/ForgottenPassword.vue
@@ -14,7 +14,7 @@
                                     v-slot="{ errors }">
                     <input v-model="recoverEmail" :placeholder="$t('page_login.placeholder_email')" type="email"
                            class="focus-border-theme"
-                           :class="{'is-error': errors[0]}"/>
+                           :class="{'border-red-700': errors[0]}"/>
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
 
diff --git a/resources/js/views/Auth/SignIn.vue b/resources/js/views/Auth/SignIn.vue
index 575e18e6..82588bc7 100644
--- a/resources/js/views/Auth/SignIn.vue
+++ b/resources/js/views/Auth/SignIn.vue
@@ -14,7 +14,7 @@
                                     v-slot="{ errors }">
                     <input v-model="loginEmail" :placeholder="$t('page_login.placeholder_email')" type="email"
                            class="focus-border-theme"
-                           :class="{'is-error': errors[0]}" />
+                           :class="{'border-red-700': errors[0]}" />
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
 
@@ -46,7 +46,7 @@
                     <input v-model="loginPassword" :placeholder="$t('page_sign_in.placeholder_password')"
                            type="password"
                            class="focus-border-theme"
-                           :class="{'is-error': errors[0]}" />
+                           :class="{'border-red-700': errors[0]}" />
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
 
@@ -92,7 +92,7 @@
                            type="text"
                            maxlength="6"
                            class="focus-border-theme"
-                           :class="{'is-error': errors[0]}" />
+                           :class="{'border-red-700': errors[0]}" />
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
 
@@ -128,7 +128,7 @@
                            type="text"
                            maxlength="21"
                            class="focus-border-theme"
-                           :class="{'is-error': errors[0]}" />
+                           :class="{'border-red-700': errors[0]}" />
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
 
diff --git a/resources/js/views/Auth/SignUp.vue b/resources/js/views/Auth/SignUp.vue
index 4a1251d7..d8369b98 100644
--- a/resources/js/views/Auth/SignUp.vue
+++ b/resources/js/views/Auth/SignUp.vue
@@ -15,7 +15,7 @@
                                         v-slot="{ errors }">
                         <input v-model="register.email" :placeholder="$t('page_registration.placeholder_email')" type="email"
                                class="focus-border-theme"
-                               :class="{'is-error': errors[0]}"/>
+                               :class="{'border-red-700': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -26,7 +26,7 @@
                                         v-slot="{ errors }">
                         <input v-model="register.name" :placeholder="$t('page_registration.placeholder_name')" type="text"
                                class="focus-border-theme"
-                               :class="{'is-error': errors[0]}"/>
+                               :class="{'border-red-700': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -37,7 +37,7 @@
                                         rules="required" v-slot="{ errors }">
                         <input v-model="register.password" :placeholder="$t('page_registration.placeholder_pass')" type="password"
                                class="focus-border-theme"
-                               :class="{'is-error': errors[0]}"/>
+                               :class="{'border-red-700': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -48,7 +48,7 @@
                                         rules="required" v-slot="{ errors }">
                         <input v-model="register.password_confirmation" :placeholder="$t('page_registration.placeholder_confirm_pass')"
                                class="focus-border-theme"
-                               type="password" :class="{'is-error': errors[0]}"/>
+                               type="password" :class="{'border-red-700': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
diff --git a/resources/js/views/Frontpage/ContactUs.vue b/resources/js/views/Frontpage/ContactUs.vue
index af12c82e..349757b9 100644
--- a/resources/js/views/Frontpage/ContactUs.vue
+++ b/resources/js/views/Frontpage/ContactUs.vue
@@ -23,7 +23,7 @@
                                         v-slot="{ errors }">
                         <input v-model="contact.email" :placeholder="$t('page_contact_us.form.email_plac')" type="email"
                                class="focus-border-theme"
-                               :class="{'is-error': errors[0]}"/>
+                               :class="{'border-red-700': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -34,7 +34,7 @@
                                         v-slot="{ errors }">
                         <textarea v-model="contact.message" :placeholder="$t('page_contact_us.form.message_plac')" rows="6"
                                   class="focus-border-theme"
-                                  :class="{'is-error': errors[0]}"
+                                  :class="{'border-red-700': errors[0]}"
                         ></textarea>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
diff --git a/resources/js/views/SetupWizard/AdminAccount.vue b/resources/js/views/SetupWizard/AdminAccount.vue
index a36fe986..862d5adc 100644
--- a/resources/js/views/SetupWizard/AdminAccount.vue
+++ b/resources/js/views/SetupWizard/AdminAccount.vue
@@ -22,7 +22,7 @@
                 <div class="block-wrapper">
                     <label>Full Name:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Full Name" rules="required" v-slot="{ errors }">
-                        <input v-model="admin.name" placeholder="Type your full name" type="text" :class="{'is-error': errors[0]}" />
+                        <input v-model="admin.name" placeholder="Type your full name" type="text" :class="{'border-red-700': errors[0]}" />
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -30,7 +30,7 @@
                 <div class="block-wrapper">
                     <label>Email:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Email" rules="required" v-slot="{ errors }">
-                        <input v-model="admin.email" placeholder="Type your email" type="email" :class="{'is-error': errors[0]}" />
+                        <input v-model="admin.email" placeholder="Type your email" type="email" :class="{'border-red-700': errors[0]}" />
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -38,7 +38,7 @@
                 <div class="block-wrapper">
                     <label>Password:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Password" rules="required|confirmed:confirmation" v-slot="{ errors }">
-                        <input v-model="admin.password" placeholder="Type your password" type="password" :class="{'is-error': errors[0]}" />
+                        <input v-model="admin.password" placeholder="Type your password" type="password" :class="{'border-red-700': errors[0]}" />
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -46,7 +46,7 @@
                 <div class="block-wrapper">
                     <label>Password Confirmation:</label>
                     <ValidationProvider tag="div" class="input-wrapper" name="confirmation" rules="required" vid="confirmation" v-slot="{ errors }">
-                        <input v-model="admin.password_confirmation" placeholder="Confirm your password" type="password" :class="{'is-error': errors[0]}" />
+                        <input v-model="admin.password_confirmation" placeholder="Confirm your password" type="password" :class="{'border-red-700': errors[0]}" />
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
diff --git a/resources/js/views/SetupWizard/AppSetup.vue b/resources/js/views/SetupWizard/AppSetup.vue
index 1532a51a..91efd147 100644
--- a/resources/js/views/SetupWizard/AppSetup.vue
+++ b/resources/js/views/SetupWizard/AppSetup.vue
@@ -18,7 +18,7 @@
                 <div class="block-wrapper">
                     <label>App Title:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Title" rules="required" v-slot="{ errors }">
-                        <input v-model="app.title" placeholder="Type your app title" type="text" :class="{'is-error': errors[0]}"/>
+                        <input v-model="app.title" placeholder="Type your app title" type="text" :class="{'border-red-700': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -26,7 +26,7 @@
                 <div class="block-wrapper">
                     <label>App Description:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="App Description" rules="required" v-slot="{ errors }">
-                        <input v-model="app.description" placeholder="Type your app description" type="text" :class="{'is-error': errors[0]}"/>
+                        <input v-model="app.description" placeholder="Type your app description" type="text" :class="{'border-red-700': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -74,7 +74,7 @@
                     <label>Contact Email:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Contact Email"
                                         rules="required" v-slot="{ errors }">
-                        <input v-model="app.contactMail" placeholder="Type your contact email" type="email" :class="{'is-error': errors[0]}"/>
+                        <input v-model="app.contactMail" placeholder="Type your contact email" type="email" :class="{'border-red-700': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -84,7 +84,7 @@
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Google Analytics Code"
                                         v-slot="{ errors }">
                         <input v-model="app.googleAnalytics" placeholder="Paste your Google Analytics Code"
-                               type="text" :class="{'is-error': errors[0]}"/>
+                               type="text" :class="{'border-red-700': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -109,7 +109,7 @@
                                max="999999999"
                                placeholder="Set default storage space in GB"
                                type="number"
-                               :class="{'is-error': errors[0]}"
+                               :class="{'border-red-700': errors[0]}"
                         />
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
diff --git a/resources/js/views/SetupWizard/BillingsDetail.vue b/resources/js/views/SetupWizard/BillingsDetail.vue
index 7ebd4449..6852d766 100644
--- a/resources/js/views/SetupWizard/BillingsDetail.vue
+++ b/resources/js/views/SetupWizard/BillingsDetail.vue
@@ -19,7 +19,7 @@
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Name"
                                         rules="required" v-slot="{ errors }">
                         <input v-model="billingInformation.billing_name" placeholder="Type your company name"
-                               type="text" :class="{'is-error': errors[0]}"/>
+                               type="text" :class="{'border-red-700': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -29,7 +29,7 @@
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Vat Number"
                                         rules="required" v-slot="{ errors }">
                         <input v-model="billingInformation.billing_vat_number" placeholder="Type your VAT number"
-                               type="text" :class="{'is-error': errors[0]}"/>
+                               type="text" :class="{'border-red-700': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -50,7 +50,7 @@
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Address"
                                         rules="required" v-slot="{ errors }">
                         <input v-model="billingInformation.billing_address" placeholder="Type your billing address"
-                               type="text" :class="{'is-error': errors[0]}"/>
+                               type="text" :class="{'border-red-700': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -61,7 +61,7 @@
                         <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing City"
                                             rules="required" v-slot="{ errors }">
                             <input v-model="billingInformation.billing_city" placeholder="Type your billing city"
-                                   type="text" :class="{'is-error': errors[0]}"/>
+                                   type="text" :class="{'border-red-700': errors[0]}"/>
                             <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                         </ValidationProvider>
                     </div>
@@ -70,7 +70,7 @@
                         <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Postal Code"
                                             rules="required" v-slot="{ errors }">
                             <input v-model="billingInformation.billing_postal_code"
-                                   placeholder="Type your billing postal code" type="text" :class="{'is-error': errors[0]}"/>
+                                   placeholder="Type your billing postal code" type="text" :class="{'border-red-700': errors[0]}"/>
                             <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                         </ValidationProvider>
                     </div>
@@ -81,7 +81,7 @@
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing State"
                                         rules="required" v-slot="{ errors }">
                         <input v-model="billingInformation.billing_state" placeholder="Type your billing state"
-                               type="text" :class="{'is-error': errors[0]}"/>
+                               type="text" :class="{'border-red-700': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -91,7 +91,7 @@
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Billing Phone Number"
                                         v-slot="{ errors }">
                         <input v-model="billingInformation.billing_phone_number" placeholder="Type your billing phone number"
-                               type="text" :class="{'is-error': errors[0]}"/>
+                               type="text" :class="{'border-red-700': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
diff --git a/resources/js/views/SetupWizard/Database.vue b/resources/js/views/SetupWizard/Database.vue
index e7d5fc03..bf799854 100644
--- a/resources/js/views/SetupWizard/Database.vue
+++ b/resources/js/views/SetupWizard/Database.vue
@@ -34,7 +34,7 @@
                 <div class="block-wrapper">
                     <label>Host:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Host" rules="required" v-slot="{ errors }">
-                        <input v-model="databaseCredentials.host" placeholder="Type your database host" type="text" :class="{'is-error': errors[0]}" />
+                        <input v-model="databaseCredentials.host" placeholder="Type your database host" type="text" :class="{'border-red-700': errors[0]}" />
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -42,7 +42,7 @@
                 <div class="block-wrapper">
                     <label>Port:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Port" rules="required" v-slot="{ errors }">
-                        <input v-model="databaseCredentials.port" placeholder="Type your database port" type="text" :class="{'is-error': errors[0]}" />
+                        <input v-model="databaseCredentials.port" placeholder="Type your database port" type="text" :class="{'border-red-700': errors[0]}" />
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -50,7 +50,7 @@
                 <div class="block-wrapper">
                     <label>Database Name:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Database Name" rules="required" v-slot="{ errors }">
-                        <input v-model="databaseCredentials.name" placeholder="Select your database name" type="text" :class="{'is-error': errors[0]}" />
+                        <input v-model="databaseCredentials.name" placeholder="Select your database name" type="text" :class="{'border-red-700': errors[0]}" />
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -58,7 +58,7 @@
                 <div class="block-wrapper">
                     <label>Database Username:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Database Username" rules="required" v-slot="{ errors }">
-                        <input v-model="databaseCredentials.username" placeholder="Select your database name" type="text" :class="{'is-error': errors[0]}" />
+                        <input v-model="databaseCredentials.username" placeholder="Select your database name" type="text" :class="{'border-red-700': errors[0]}" />
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -66,7 +66,7 @@
                 <div class="block-wrapper">
                     <label>Database Password:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Database Password" rules="required" v-slot="{ errors }">
-                        <input v-model="databaseCredentials.password" placeholder="Select your database password" type="text" :class="{'is-error': errors[0]}" />
+                        <input v-model="databaseCredentials.password" placeholder="Select your database password" type="text" :class="{'border-red-700': errors[0]}" />
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
diff --git a/resources/js/views/SetupWizard/EnvironmentSetup.vue b/resources/js/views/SetupWizard/EnvironmentSetup.vue
index 63c8a96f..a45ab711 100644
--- a/resources/js/views/SetupWizard/EnvironmentSetup.vue
+++ b/resources/js/views/SetupWizard/EnvironmentSetup.vue
@@ -30,14 +30,14 @@
                     <div class="block-wrapper">
                         <label>Key:</label>
                         <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Key" rules="required" v-slot="{ errors }">
-                            <input v-model="storage.key" placeholder="Paste your key" type="text" :class="{'is-error': errors[0]}"/>
+                            <input v-model="storage.key" placeholder="Paste your key" type="text" :class="{'border-red-700': errors[0]}"/>
                             <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                         </ValidationProvider>
                     </div>
                     <div class="block-wrapper">
                         <label>Secret:</label>
                         <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Secret" rules="required" v-slot="{ errors }">
-                            <input v-model="storage.secret" placeholder="Paste your secret" type="text" :class="{'is-error': errors[0]}"/>
+                            <input v-model="storage.secret" placeholder="Paste your secret" type="text" :class="{'border-red-700': errors[0]}"/>
                             <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                         </ValidationProvider>
                     </div>
@@ -54,14 +54,14 @@
                     <div class="block-wrapper" v-if="storage.driver !== 's3'">
                         <label>Endpoint URL:</label>
                         <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Endpoint" rules="required" v-slot="{ errors }">
-                            <input v-model="storage.endpoint" placeholder="Type your endpoint" type="text" :class="{'is-error': errors[0]}" readonly/>
+                            <input v-model="storage.endpoint" placeholder="Type your endpoint" type="text" :class="{'border-red-700': errors[0]}" readonly/>
                             <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                         </ValidationProvider>
                     </div>
                     <div class="block-wrapper">
                         <label>Bucket:</label>
                         <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Bucket" rules="required" v-slot="{ errors }">
-                            <input v-model="storage.bucket" placeholder="Type your bucket name" type="text" :class="{'is-error': errors[0]}"/>
+                            <input v-model="storage.bucket" placeholder="Type your bucket name" type="text" :class="{'border-red-700': errors[0]}"/>
                             <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             <small class="input-help">
                                 Provide your created unique bucket name
@@ -87,7 +87,7 @@
                 <div class="block-wrapper">
                     <label>Mail Host:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Host" rules="required" v-slot="{ errors }">
-                        <input v-model="mail.host" placeholder="Type your mail host" type="text" :class="{'is-error': errors[0]}"/>
+                        <input v-model="mail.host" placeholder="Type your mail host" type="text" :class="{'border-red-700': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -95,7 +95,7 @@
                 <div class="block-wrapper">
                     <label>Mail Port:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Port" rules="required" v-slot="{ errors }">
-                        <input v-model="mail.port" placeholder="Type your mail port" type="text" :class="{'is-error': errors[0]}"/>
+                        <input v-model="mail.port" placeholder="Type your mail port" type="text" :class="{'border-red-700': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -103,7 +103,7 @@
                 <div class="block-wrapper">
                     <label>Mail Username:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Username" rules="required" v-slot="{ errors }">
-                        <input v-model="mail.username" placeholder="Type your mail username" type="text" :class="{'is-error': errors[0]}"/>
+                        <input v-model="mail.username" placeholder="Type your mail username" type="text" :class="{'border-red-700': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -111,7 +111,7 @@
                 <div class="block-wrapper">
                     <label>Mail Password:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Mail Password" rules="required" v-slot="{ errors }">
-                        <input v-model="mail.password" placeholder="Type your mail password" type="text" :class="{'is-error': errors[0]}"/>
+                        <input v-model="mail.password" placeholder="Type your mail password" type="text" :class="{'border-red-700': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
diff --git a/resources/js/views/SetupWizard/PurchaseCode.vue b/resources/js/views/SetupWizard/PurchaseCode.vue
index ec08c8ec..29a28ea8 100644
--- a/resources/js/views/SetupWizard/PurchaseCode.vue
+++ b/resources/js/views/SetupWizard/PurchaseCode.vue
@@ -14,7 +14,7 @@
 
             <ValidationObserver @submit.prevent="verifyPurchaseCode" ref="verifyPurchaseCode" v-slot="{ invalid }" tag="form" class="form inline-form">
                 <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Purchase Code" rules="required" v-slot="{ errors }">
-                    <input v-model="purchaseCode" placeholder="Paste your purchase code" type="text" :class="{'is-error': errors[0]}"/>
+                    <input v-model="purchaseCode" placeholder="Paste your purchase code" type="text" :class="{'border-red-700': errors[0]}"/>
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
                 <AuthButton icon="chevron-right" text="Verify" :loading="isLoading" :disabled="isLoading"/>
diff --git a/resources/js/views/SetupWizard/StripeCredentials.vue b/resources/js/views/SetupWizard/StripeCredentials.vue
index 59f841ec..b61f9512 100644
--- a/resources/js/views/SetupWizard/StripeCredentials.vue
+++ b/resources/js/views/SetupWizard/StripeCredentials.vue
@@ -32,7 +32,7 @@
                 <div class="block-wrapper">
                     <label>Publishable Key:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Publishable Key" rules="required" v-slot="{ errors }">
-                        <input v-model="stripeCredentials.key" placeholder="Paste your publishable key" type="text" :class="{'is-error': errors[0]}"/>
+                        <input v-model="stripeCredentials.key" placeholder="Paste your publishable key" type="text" :class="{'border-red-700': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -40,7 +40,7 @@
                 <div class="block-wrapper">
                     <label>Secret Key:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Secret Key" rules="required" v-slot="{ errors }">
-                        <input v-model="stripeCredentials.secret" placeholder="Paste your secret key" type="text" :class="{'is-error': errors[0]}"/>
+                        <input v-model="stripeCredentials.secret" placeholder="Paste your secret key" type="text" :class="{'border-red-700': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
@@ -63,7 +63,7 @@
                 <div class="block-wrapper">
                     <label>Webhook Secret:</label>
                     <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Webhook Secret" rules="required" v-slot="{ errors }">
-                        <input v-model="stripeCredentials.webhookSecret" placeholder="Type your stripe webhook secret" type="text" :class="{'is-error': errors[0]}"/>
+                        <input v-model="stripeCredentials.webhookSecret" placeholder="Type your stripe webhook secret" type="text" :class="{'border-red-700': errors[0]}"/>
                         <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                     </ValidationProvider>
                 </div>
diff --git a/resources/js/views/SetupWizard/SubscriptionPlans.vue b/resources/js/views/SetupWizard/SubscriptionPlans.vue
index 29c43bdc..3f9325ef 100644
--- a/resources/js/views/SetupWizard/SubscriptionPlans.vue
+++ b/resources/js/views/SetupWizard/SubscriptionPlans.vue
@@ -28,7 +28,7 @@
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Name"
                                                 rules="required" v-slot="{ errors }">
                                 <input v-model="plan.attributes.name" placeholder="Type your plan name"
-                                       type="text" :class="{'is-error': errors[0]}"/>
+                                       type="text" :class="{'border-red-700': errors[0]}"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -38,7 +38,7 @@
                             <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Description"
                                                 v-slot="{ errors }">
                                 <textarea v-model="plan.attributes.description"
-                                          placeholder="Type your plan description" :class="{'is-error': errors[0]}"></textarea>
+                                          placeholder="Type your plan description" :class="{'border-red-700': errors[0]}"></textarea>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -49,7 +49,7 @@
                                                 rules="required" v-slot="{ errors }">
                                 <input v-model="plan.attributes.price" placeholder="Type your plan price" type="number"
                                        step="0.01" min="1" max="999999999999"
-                                       :class="{'is-error': errors[0]}"/>
+                                       :class="{'border-red-700': errors[0]}"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
@@ -63,7 +63,7 @@
                                        max="999999999"
                                        placeholder="Type storage capacity in GB"
                                        type="number"
-                                       :class="{'is-error': errors[0]}"/>
+                                       :class="{'border-red-700': errors[0]}"/>
                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                             </ValidationProvider>
                         </div>
diff --git a/resources/js/views/Shared/SharedAuthentication.vue b/resources/js/views/Shared/SharedAuthentication.vue
index 8962d86a..1f00e6ab 100644
--- a/resources/js/views/Shared/SharedAuthentication.vue
+++ b/resources/js/views/Shared/SharedAuthentication.vue
@@ -9,7 +9,7 @@
             <ValidationObserver @submit.prevent="authenticateProtected" ref="authenticateProtected" v-slot="{ invalid }" tag="form" class="form inline-form">
 
                 <ValidationProvider tag="div" mode="passive" class="input-wrapper" name="Password" rules="required" v-slot="{ errors }">
-                    <input v-model="password" :placeholder="$t('page_shared.placeholder_pass')" type="password" :class="{'is-error': errors[0]}" />
+                    <input v-model="password" :placeholder="$t('page_shared.placeholder_pass')" type="password" :class="{'border-red-700': errors[0]}" />
                     <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
                 </ValidationProvider>
 
diff --git a/resources/js/views/Upgrade/UpgradeBilling.vue b/resources/js/views/Upgrade/UpgradeBilling.vue
index a83401d4..b232adb4 100644
--- a/resources/js/views/Upgrade/UpgradeBilling.vue
+++ b/resources/js/views/Upgrade/UpgradeBilling.vue
@@ -94,7 +94,7 @@
                                             <input v-model="billing.name"
                                                    :placeholder="$t('user_settings.name_plac')"
                                                    type="text"
-                                                   :class="{'is-error': errors[0]}"
+                                                   :class="{'border-red-700': errors[0]}"
                                                    class="focus-border-theme"
                                             />
                                             <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
@@ -109,7 +109,7 @@
                                             <input v-model="billing.address"
                                                    :placeholder="$t('user_settings.address_plac')"
                                                    type="text"
-                                                   :class="{'is-error': errors[0]}"
+                                                   :class="{'border-red-700': errors[0]}"
                                                    class="focus-border-theme"
                                             />
                                             <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
@@ -125,7 +125,7 @@
                                                 <input v-model="billing.city"
                                                        :placeholder="$t('user_settings.city_plac')"
                                                        type="text"
-                                                       :class="{'is-error': errors[0]}"
+                                                       :class="{'border-red-700': errors[0]}"
                                                        class="focus-border-theme"
                                                 />
                                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
@@ -140,7 +140,7 @@
                                                 <input v-model="billing.postal_code"
                                                        :placeholder="$t('user_settings.postal_code_plac')"
                                                        type="text"
-                                                       :class="{'is-error': errors[0]}"
+                                                       :class="{'border-red-700': errors[0]}"
                                                        class="focus-border-theme"
                                                 />
                                                 <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
@@ -170,7 +170,7 @@
                                             <input v-model="billing.state"
                                                    :placeholder="$t('user_settings.state_plac')"
                                                    type="text"
-                                                   :class="{'is-error': errors[0]}"
+                                                   :class="{'border-red-700': errors[0]}"
                                                    class="focus-border-theme"
                                             />
                                             <small class="input-help">
@@ -188,7 +188,7 @@
                                             <input v-model="billing.phone_number"
                                                    :placeholder="$t('user_settings.phone_number_plac')"
                                                    type="text"
-                                                   :class="{'is-error': errors[0]}"
+                                                   :class="{'border-red-700': errors[0]}"
                                                    class="focus-border-theme"
                                             />
                                             <span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
diff --git a/resources/js/views/User/MeteredSubscription.vue b/resources/js/views/User/MeteredSubscription.vue
index 2dabb8da..7b3cebbe 100644
--- a/resources/js/views/User/MeteredSubscription.vue
+++ b/resources/js/views/User/MeteredSubscription.vue
@@ -21,7 +21,7 @@
 								   min="1"
 								   max="999999999"
 								   class="focus-border-theme input-dark"
-								   :class="{'is-error': errors[0]}"
+								   :class="{'border-red-700': errors[0]}"
 							/>
 							<ButtonBase type="submit" button-style="theme" class="submit-button">
 								{{ $t('Make a Payment') }}
diff --git a/resources/js/views/User/Password.vue b/resources/js/views/User/Password.vue
index fdc7eb7c..a5894fe4 100644
--- a/resources/js/views/User/Password.vue
+++ b/resources/js/views/User/Password.vue
@@ -52,7 +52,7 @@
                         <input v-model="newPassword" :placeholder="$t('page_create_password.label_new_pass')"
 							   type="password"
 							   class="focus-border-theme input-dark"
-							   :class="{'is-error': errors[0]}"
+							   :class="{'border-red-700': errors[0]}"
 						/>
                     </AppInputText>
                 </ValidationProvider>
@@ -62,7 +62,7 @@
 							   :placeholder="$t('page_create_password.label_confirm_pass')"
 							   type="password"
 							   class="focus-border-theme input-dark"
-							   :class="{'is-error': errors[0]}"
+							   :class="{'border-red-700': errors[0]}"
 						/>
                     </AppInputText>
                 </ValidationProvider>