diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 2672b84e..4aa49912 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -13,19 +13,19 @@
     "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.js": "/chunks/admin~chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~1bec6fe4.js?id=510e6c1b1017a73a40a6",
     "/chunks/admin~chunks/platform.js": "/chunks/admin~chunks/platform.js?id=a8e78a3b0ce4dba71a6e",
     "/chunks/admin~chunks/platform~chunks/settings.js": "/chunks/admin~chunks/platform~chunks/settings.js?id=3121d1c093031fba08ec",
-    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js?id=d99d78cf99eec0ed3a81",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js?id=9e90103c70ecef1771d1",
     "/chunks/admin~chunks/platform~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/shared.js?id=afeba4ebd13af7e995be",
-    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=5e7505fe2f64858109fa",
+    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=e4bd3e51dbb74e894be3",
     "/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=9dd101339ae6d85c6175",
     "/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=6f363efa7ba2f45c9d24",
     "/chunks/app-email.js": "/chunks/app-email.js?id=01efc9cc57d65ec7039a",
-    "/chunks/app-index.js": "/chunks/app-index.js?id=31141d91afa8ebc381f4",
-    "/chunks/app-language.js": "/chunks/app-language.js?id=076c03dcb960a4edb672",
+    "/chunks/app-index.js": "/chunks/app-index.js?id=fee803b8bdc0032fb1dd",
+    "/chunks/app-language.js": "/chunks/app-language.js?id=3787049bbcb0b5a4e140",
     "/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~d6690165.js": "/chunks/app-language~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan-creat~d6690165.js?id=2f03fbbe27b922063d16",
-    "/chunks/app-others.js": "/chunks/app-others.js?id=d48001de73029fe3a5ce",
-    "/chunks/app-payments.js": "/chunks/app-payments.js?id=f7ba69541b8d8d10926f",
+    "/chunks/app-others.js": "/chunks/app-others.js?id=34d85e85534feb7fc649",
+    "/chunks/app-payments.js": "/chunks/app-payments.js?id=0b851be1fcc6e1374007",
     "/chunks/app-settings.js": "/chunks/app-settings.js?id=2a96295eef59bd6c8921",
     "/chunks/app-setup.js": "/chunks/app-setup.js?id=64f4753ffef5f731dc96",
     "/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",
@@ -52,29 +52,29 @@
     "/chunks/invoices.js": "/chunks/invoices.js?id=2032e4f8e4f5ed58b8b4",
     "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=4eb4c11f0e574303af7f",
     "/chunks/not-found.js": "/chunks/not-found.js?id=034287ee0ecb036320d3",
-    "/chunks/page-edit.js": "/chunks/page-edit.js?id=4bc9ddd14ff472d455e6",
+    "/chunks/page-edit.js": "/chunks/page-edit.js?id=1b8c9a0eee76fcb52f12",
     "/chunks/pages.js": "/chunks/pages.js?id=8c6772e3224fadca2bf2",
     "/chunks/plan.js": "/chunks/plan.js?id=f62a5bd64fb706b2f0e2",
     "/chunks/plan-create/fixed.js": "/chunks/plan-create/fixed.js?id=84617542ab68f42c2ab8",
-    "/chunks/plan-create/metered.js": "/chunks/plan-create/metered.js?id=f865f6dafff99c0a356b",
+    "/chunks/plan-create/metered.js": "/chunks/plan-create/metered.js?id=4aeec95a76351205dab0",
     "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=c97fde9a7b6395a7dd45",
-    "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=f04752a32b8bf397599d",
+    "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=8a959e196d628d0efc4b",
     "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=7eff560fea52770a642f",
     "/chunks/plans.js": "/chunks/plans.js?id=854c232c29d88c5b541a",
-    "/chunks/platform.js": "/chunks/platform.js?id=56c6a261168c708d8284",
+    "/chunks/platform.js": "/chunks/platform.js?id=079849949b8872ce74d0",
     "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=06f4d5fe4dc931026a02",
     "/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=dfa4128d68360d5e1b3b",
     "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=19ed542c413992bb052e",
     "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=2716127ee2f945a90c0e",
-    "/chunks/settings.js": "/chunks/settings.js?id=3feadf596e576e256454",
-    "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=44f5a03f79d2ebd29a79",
-    "/chunks/settings-password.js": "/chunks/settings-password.js?id=049c3383e310392f966d",
+    "/chunks/settings.js": "/chunks/settings.js?id=d40f8c73d3c8baa29600",
+    "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=92b82ac5385e90f4bf77",
+    "/chunks/settings-password.js": "/chunks/settings-password.js?id=5ff6ab3f66a1ea9b41f3",
     "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=5a0971b7e97d67546f9d",
     "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=76b45c336e8e12b23e81",
     "/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=3e16c9ff52b4447b2c90",
-    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=d0f15dad141528e80d8f",
+    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=2d87aa10c9b10a8c2379",
     "/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=aafc9cd6aa47b01bc25a",
     "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=651d5accf401908724c5",
     "/chunks/shared.js": "/chunks/shared.js?id=6230d050545cd1bd9b87",
@@ -204,5 +204,224 @@
     "/chunks/settings.26fb9ae87225d86923f8.hot-update.js": "/chunks/settings.26fb9ae87225d86923f8.hot-update.js",
     "/chunks/settings.6da9a15f8348f4457bcf.hot-update.js": "/chunks/settings.6da9a15f8348f4457bcf.hot-update.js",
     "/chunks/settings.72b5f647cc14fc3c96d7.hot-update.js": "/chunks/settings.72b5f647cc14fc3c96d7.hot-update.js",
-    "/chunks/settings.21d7007ef6c9337390e5.hot-update.js": "/chunks/settings.21d7007ef6c9337390e5.hot-update.js"
+    "/chunks/settings.21d7007ef6c9337390e5.hot-update.js": "/chunks/settings.21d7007ef6c9337390e5.hot-update.js",
+    "/chunks/app-appearance.7cf496fee8a83761062f.hot-update.js": "/chunks/app-appearance.7cf496fee8a83761062f.hot-update.js",
+    "/chunks/app-index.7cf496fee8a83761062f.hot-update.js": "/chunks/app-index.7cf496fee8a83761062f.hot-update.js",
+    "/chunks/app-language.7cf496fee8a83761062f.hot-update.js": "/chunks/app-language.7cf496fee8a83761062f.hot-update.js",
+    "/chunks/app-others.7cf496fee8a83761062f.hot-update.js": "/chunks/app-others.7cf496fee8a83761062f.hot-update.js",
+    "/chunks/app-payments.7cf496fee8a83761062f.hot-update.js": "/chunks/app-payments.7cf496fee8a83761062f.hot-update.js",
+    "/chunks/page-edit.7cf496fee8a83761062f.hot-update.js": "/chunks/page-edit.7cf496fee8a83761062f.hot-update.js",
+    "/chunks/plan-create/metered.7cf496fee8a83761062f.hot-update.js": "/chunks/plan-create/metered.7cf496fee8a83761062f.hot-update.js",
+    "/chunks/plan-settings.7cf496fee8a83761062f.hot-update.js": "/chunks/plan-settings.7cf496fee8a83761062f.hot-update.js",
+    "/chunks/platform.7cf496fee8a83761062f.hot-update.js": "/chunks/platform.7cf496fee8a83761062f.hot-update.js",
+    "/chunks/settings-password.7cf496fee8a83761062f.hot-update.js": "/chunks/settings-password.7cf496fee8a83761062f.hot-update.js",
+    "/chunks/settings-subscription.7cf496fee8a83761062f.hot-update.js": "/chunks/settings-subscription.7cf496fee8a83761062f.hot-update.js",
+    "/chunks/app-appearance.1536c804c943e0ab59c7.hot-update.js": "/chunks/app-appearance.1536c804c943e0ab59c7.hot-update.js",
+    "/chunks/app-index.1536c804c943e0ab59c7.hot-update.js": "/chunks/app-index.1536c804c943e0ab59c7.hot-update.js",
+    "/chunks/app-language.1536c804c943e0ab59c7.hot-update.js": "/chunks/app-language.1536c804c943e0ab59c7.hot-update.js",
+    "/chunks/app-others.1536c804c943e0ab59c7.hot-update.js": "/chunks/app-others.1536c804c943e0ab59c7.hot-update.js",
+    "/chunks/app-payments.1536c804c943e0ab59c7.hot-update.js": "/chunks/app-payments.1536c804c943e0ab59c7.hot-update.js",
+    "/chunks/page-edit.1536c804c943e0ab59c7.hot-update.js": "/chunks/page-edit.1536c804c943e0ab59c7.hot-update.js",
+    "/chunks/plan-create/metered.1536c804c943e0ab59c7.hot-update.js": "/chunks/plan-create/metered.1536c804c943e0ab59c7.hot-update.js",
+    "/chunks/plan-settings.1536c804c943e0ab59c7.hot-update.js": "/chunks/plan-settings.1536c804c943e0ab59c7.hot-update.js",
+    "/chunks/platform.1536c804c943e0ab59c7.hot-update.js": "/chunks/platform.1536c804c943e0ab59c7.hot-update.js",
+    "/chunks/settings-password.1536c804c943e0ab59c7.hot-update.js": "/chunks/settings-password.1536c804c943e0ab59c7.hot-update.js",
+    "/chunks/settings-subscription.1536c804c943e0ab59c7.hot-update.js": "/chunks/settings-subscription.1536c804c943e0ab59c7.hot-update.js",
+    "/chunks/app-appearance.d239d34a32c5a4c40e3a.hot-update.js": "/chunks/app-appearance.d239d34a32c5a4c40e3a.hot-update.js",
+    "/chunks/app-index.d239d34a32c5a4c40e3a.hot-update.js": "/chunks/app-index.d239d34a32c5a4c40e3a.hot-update.js",
+    "/chunks/app-language.d239d34a32c5a4c40e3a.hot-update.js": "/chunks/app-language.d239d34a32c5a4c40e3a.hot-update.js",
+    "/chunks/app-others.d239d34a32c5a4c40e3a.hot-update.js": "/chunks/app-others.d239d34a32c5a4c40e3a.hot-update.js",
+    "/chunks/app-payments.d239d34a32c5a4c40e3a.hot-update.js": "/chunks/app-payments.d239d34a32c5a4c40e3a.hot-update.js",
+    "/chunks/page-edit.d239d34a32c5a4c40e3a.hot-update.js": "/chunks/page-edit.d239d34a32c5a4c40e3a.hot-update.js",
+    "/chunks/plan-create/metered.d239d34a32c5a4c40e3a.hot-update.js": "/chunks/plan-create/metered.d239d34a32c5a4c40e3a.hot-update.js",
+    "/chunks/plan-settings.d239d34a32c5a4c40e3a.hot-update.js": "/chunks/plan-settings.d239d34a32c5a4c40e3a.hot-update.js",
+    "/chunks/platform.d239d34a32c5a4c40e3a.hot-update.js": "/chunks/platform.d239d34a32c5a4c40e3a.hot-update.js",
+    "/chunks/settings-password.d239d34a32c5a4c40e3a.hot-update.js": "/chunks/settings-password.d239d34a32c5a4c40e3a.hot-update.js",
+    "/chunks/settings-subscription.d239d34a32c5a4c40e3a.hot-update.js": "/chunks/settings-subscription.d239d34a32c5a4c40e3a.hot-update.js",
+    "/chunks/app-appearance.0226e139d7160b2507e4.hot-update.js": "/chunks/app-appearance.0226e139d7160b2507e4.hot-update.js",
+    "/chunks/app-index.0226e139d7160b2507e4.hot-update.js": "/chunks/app-index.0226e139d7160b2507e4.hot-update.js",
+    "/chunks/app-language.0226e139d7160b2507e4.hot-update.js": "/chunks/app-language.0226e139d7160b2507e4.hot-update.js",
+    "/chunks/app-others.0226e139d7160b2507e4.hot-update.js": "/chunks/app-others.0226e139d7160b2507e4.hot-update.js",
+    "/chunks/app-payments.0226e139d7160b2507e4.hot-update.js": "/chunks/app-payments.0226e139d7160b2507e4.hot-update.js",
+    "/chunks/page-edit.0226e139d7160b2507e4.hot-update.js": "/chunks/page-edit.0226e139d7160b2507e4.hot-update.js",
+    "/chunks/plan-create/metered.0226e139d7160b2507e4.hot-update.js": "/chunks/plan-create/metered.0226e139d7160b2507e4.hot-update.js",
+    "/chunks/plan-settings.0226e139d7160b2507e4.hot-update.js": "/chunks/plan-settings.0226e139d7160b2507e4.hot-update.js",
+    "/chunks/platform.0226e139d7160b2507e4.hot-update.js": "/chunks/platform.0226e139d7160b2507e4.hot-update.js",
+    "/chunks/settings-password.0226e139d7160b2507e4.hot-update.js": "/chunks/settings-password.0226e139d7160b2507e4.hot-update.js",
+    "/chunks/settings-subscription.0226e139d7160b2507e4.hot-update.js": "/chunks/settings-subscription.0226e139d7160b2507e4.hot-update.js",
+    "/chunks/app-appearance.d3a32202061b43267178.hot-update.js": "/chunks/app-appearance.d3a32202061b43267178.hot-update.js",
+    "/chunks/app-index.d3a32202061b43267178.hot-update.js": "/chunks/app-index.d3a32202061b43267178.hot-update.js",
+    "/chunks/app-language.d3a32202061b43267178.hot-update.js": "/chunks/app-language.d3a32202061b43267178.hot-update.js",
+    "/chunks/app-others.d3a32202061b43267178.hot-update.js": "/chunks/app-others.d3a32202061b43267178.hot-update.js",
+    "/chunks/app-payments.d3a32202061b43267178.hot-update.js": "/chunks/app-payments.d3a32202061b43267178.hot-update.js",
+    "/chunks/page-edit.d3a32202061b43267178.hot-update.js": "/chunks/page-edit.d3a32202061b43267178.hot-update.js",
+    "/chunks/plan-create/metered.d3a32202061b43267178.hot-update.js": "/chunks/plan-create/metered.d3a32202061b43267178.hot-update.js",
+    "/chunks/plan-settings.d3a32202061b43267178.hot-update.js": "/chunks/plan-settings.d3a32202061b43267178.hot-update.js",
+    "/chunks/platform.d3a32202061b43267178.hot-update.js": "/chunks/platform.d3a32202061b43267178.hot-update.js",
+    "/chunks/settings-password.d3a32202061b43267178.hot-update.js": "/chunks/settings-password.d3a32202061b43267178.hot-update.js",
+    "/chunks/settings-subscription.d3a32202061b43267178.hot-update.js": "/chunks/settings-subscription.d3a32202061b43267178.hot-update.js",
+    "/chunks/settings-subscription.9264decb141164440877.hot-update.js": "/chunks/settings-subscription.9264decb141164440877.hot-update.js",
+    "/chunks/settings-subscription.78271456cf0dca580c1d.hot-update.js": "/chunks/settings-subscription.78271456cf0dca580c1d.hot-update.js",
+    "/chunks/settings.3ae7b6652e9c2be66abe.hot-update.js": "/chunks/settings.3ae7b6652e9c2be66abe.hot-update.js",
+    "/chunks/settings.ffc77f6ec277ec32f78e.hot-update.js": "/chunks/settings.ffc77f6ec277ec32f78e.hot-update.js",
+    "/chunks/settings.d111185e4d2723b0760c.hot-update.js": "/chunks/settings.d111185e4d2723b0760c.hot-update.js",
+    "/chunks/settings.9f82ae84f4887451a97f.hot-update.js": "/chunks/settings.9f82ae84f4887451a97f.hot-update.js",
+    "/chunks/settings.c9333942718332eec760.hot-update.js": "/chunks/settings.c9333942718332eec760.hot-update.js",
+    "/chunks/settings.eeae2c5e05db896f2f83.hot-update.js": "/chunks/settings.eeae2c5e05db896f2f83.hot-update.js",
+    "/chunks/settings.56c61d09bb366b7a0333.hot-update.js": "/chunks/settings.56c61d09bb366b7a0333.hot-update.js",
+    "/chunks/settings.d8b83eff1cead1d459af.hot-update.js": "/chunks/settings.d8b83eff1cead1d459af.hot-update.js",
+    "/chunks/settings.b18a6a6f2b0727700a3a.hot-update.js": "/chunks/settings.b18a6a6f2b0727700a3a.hot-update.js",
+    "/chunks/settings.1049ac020a0503278ad9.hot-update.js": "/chunks/settings.1049ac020a0503278ad9.hot-update.js",
+    "/chunks/settings.975c25aa927fd3a33664.hot-update.js": "/chunks/settings.975c25aa927fd3a33664.hot-update.js",
+    "/chunks/settings.b678632674f1da8b8e74.hot-update.js": "/chunks/settings.b678632674f1da8b8e74.hot-update.js",
+    "/chunks/settings.48a44e4cd8c1e8d0495c.hot-update.js": "/chunks/settings.48a44e4cd8c1e8d0495c.hot-update.js",
+    "/chunks/settings.5317a595e48dafd4cb62.hot-update.js": "/chunks/settings.5317a595e48dafd4cb62.hot-update.js",
+    "/chunks/settings.60fd77fbbaaa18372559.hot-update.js": "/chunks/settings.60fd77fbbaaa18372559.hot-update.js",
+    "/chunks/settings.9bb865ea0a5999931b59.hot-update.js": "/chunks/settings.9bb865ea0a5999931b59.hot-update.js",
+    "/chunks/settings.bf2c26418608c3e0c1d8.hot-update.js": "/chunks/settings.bf2c26418608c3e0c1d8.hot-update.js",
+    "/chunks/settings.6ed2bc4add224286baef.hot-update.js": "/chunks/settings.6ed2bc4add224286baef.hot-update.js",
+    "/chunks/settings.24e218796955bcd2163d.hot-update.js": "/chunks/settings.24e218796955bcd2163d.hot-update.js",
+    "/chunks/settings.c77458bd996e4744211e.hot-update.js": "/chunks/settings.c77458bd996e4744211e.hot-update.js",
+    "/chunks/settings.0122f387d1bf035c4cfc.hot-update.js": "/chunks/settings.0122f387d1bf035c4cfc.hot-update.js",
+    "/chunks/settings.560813bd5713a5c9c43d.hot-update.js": "/chunks/settings.560813bd5713a5c9c43d.hot-update.js",
+    "/chunks/settings.f4da0410509cf30d157b.hot-update.js": "/chunks/settings.f4da0410509cf30d157b.hot-update.js",
+    "/chunks/settings.bff3ea2f44a270e517ab.hot-update.js": "/chunks/settings.bff3ea2f44a270e517ab.hot-update.js",
+    "/chunks/settings.29a18f21671d48739ef8.hot-update.js": "/chunks/settings.29a18f21671d48739ef8.hot-update.js",
+    "/chunks/settings.0555c4f8c4cea575dfc1.hot-update.js": "/chunks/settings.0555c4f8c4cea575dfc1.hot-update.js",
+    "/chunks/settings.742bfde63d49c70506e0.hot-update.js": "/chunks/settings.742bfde63d49c70506e0.hot-update.js",
+    "/chunks/settings.9cc5bb664d361a1b28dc.hot-update.js": "/chunks/settings.9cc5bb664d361a1b28dc.hot-update.js",
+    "/chunks/settings.985cd6723c91011e5eff.hot-update.js": "/chunks/settings.985cd6723c91011e5eff.hot-update.js",
+    "/chunks/settings-subscription.21815a5a0af024010061.hot-update.js": "/chunks/settings-subscription.21815a5a0af024010061.hot-update.js",
+    "/chunks/settings-subscription.c64f7ab58467ac1b807f.hot-update.js": "/chunks/settings-subscription.c64f7ab58467ac1b807f.hot-update.js",
+    "/chunks/settings-subscription.af28420657fdc3df179a.hot-update.js": "/chunks/settings-subscription.af28420657fdc3df179a.hot-update.js",
+    "/chunks/settings-subscription.813a0b9acb187c0ff473.hot-update.js": "/chunks/settings-subscription.813a0b9acb187c0ff473.hot-update.js",
+    "/chunks/settings-subscription.8d13a248f4da32d65eec.hot-update.js": "/chunks/settings-subscription.8d13a248f4da32d65eec.hot-update.js",
+    "/chunks/settings-subscription.cd5f4fde34e88e766724.hot-update.js": "/chunks/settings-subscription.cd5f4fde34e88e766724.hot-update.js",
+    "/chunks/settings-subscription.65c3a6c2664c78278563.hot-update.js": "/chunks/settings-subscription.65c3a6c2664c78278563.hot-update.js",
+    "/chunks/settings-subscription.026cbdceda141d9b2245.hot-update.js": "/chunks/settings-subscription.026cbdceda141d9b2245.hot-update.js",
+    "/chunks/settings-subscription.17cf6234cf89cacf3c11.hot-update.js": "/chunks/settings-subscription.17cf6234cf89cacf3c11.hot-update.js",
+    "/chunks/settings-subscription.e486c5b8045be69f6f42.hot-update.js": "/chunks/settings-subscription.e486c5b8045be69f6f42.hot-update.js",
+    "/chunks/settings-subscription.dab138155bae02a07442.hot-update.js": "/chunks/settings-subscription.dab138155bae02a07442.hot-update.js",
+    "/chunks/settings-subscription.05d12821e29cc8ad3327.hot-update.js": "/chunks/settings-subscription.05d12821e29cc8ad3327.hot-update.js",
+    "/chunks/settings.e96984dc00f369b921be.hot-update.js": "/chunks/settings.e96984dc00f369b921be.hot-update.js",
+    "/chunks/settings-subscription.c7e15be580d5df854371.hot-update.js": "/chunks/settings-subscription.c7e15be580d5df854371.hot-update.js",
+    "/js/main.e0d1278223f2b1218a69.hot-update.js": "/js/main.e0d1278223f2b1218a69.hot-update.js",
+    "/chunks/settings-storage~chunks/user-storage~chunks/user-subscription.js": "/chunks/settings-storage~chunks/user-storage~chunks/user-subscription.js?id=8e604e2d3de21807f411",
+    "/chunks/settings-subscription.e0d1278223f2b1218a69.hot-update.js": "/chunks/settings-subscription.e0d1278223f2b1218a69.hot-update.js",
+    "/js/main.94d29532d02191fff30a.hot-update.js": "/js/main.94d29532d02191fff30a.hot-update.js",
+    "/chunks/settings-subscription.94d29532d02191fff30a.hot-update.js": "/chunks/settings-subscription.94d29532d02191fff30a.hot-update.js",
+    "/chunks/settings-subscription.b27df0d1c2a29354a0e1.hot-update.js": "/chunks/settings-subscription.b27df0d1c2a29354a0e1.hot-update.js",
+    "/chunks/settings-subscription.2801fc466654a71cd74b.hot-update.js": "/chunks/settings-subscription.2801fc466654a71cd74b.hot-update.js",
+    "/chunks/settings-subscription.de6689d25cda8fac02a1.hot-update.js": "/chunks/settings-subscription.de6689d25cda8fac02a1.hot-update.js",
+    "/chunks/settings-subscription.95fe74dbdc544d18a9e6.hot-update.js": "/chunks/settings-subscription.95fe74dbdc544d18a9e6.hot-update.js",
+    "/chunks/settings-subscription.3eee9af51b3e86eefd56.hot-update.js": "/chunks/settings-subscription.3eee9af51b3e86eefd56.hot-update.js",
+    "/chunks/settings-subscription.83f45e3d70d4156666b1.hot-update.js": "/chunks/settings-subscription.83f45e3d70d4156666b1.hot-update.js",
+    "/chunks/settings-subscription.bbaee001688f6984937a.hot-update.js": "/chunks/settings-subscription.bbaee001688f6984937a.hot-update.js",
+    "/chunks/settings-subscription.b54654c49f6a313fc0f7.hot-update.js": "/chunks/settings-subscription.b54654c49f6a313fc0f7.hot-update.js",
+    "/chunks/settings-subscription.6b747655d1469a1fdfb9.hot-update.js": "/chunks/settings-subscription.6b747655d1469a1fdfb9.hot-update.js",
+    "/chunks/settings-subscription.758bb312d12c94586c16.hot-update.js": "/chunks/settings-subscription.758bb312d12c94586c16.hot-update.js",
+    "/chunks/settings-subscription.e9b938bc9f0b1a8aa512.hot-update.js": "/chunks/settings-subscription.e9b938bc9f0b1a8aa512.hot-update.js",
+    "/chunks/settings-subscription.92d10833b93f8d8e8654.hot-update.js": "/chunks/settings-subscription.92d10833b93f8d8e8654.hot-update.js",
+    "/chunks/settings-subscription.abc31ac6d150af7854fe.hot-update.js": "/chunks/settings-subscription.abc31ac6d150af7854fe.hot-update.js",
+    "/chunks/settings-subscription.6301b365d421894c758f.hot-update.js": "/chunks/settings-subscription.6301b365d421894c758f.hot-update.js",
+    "/chunks/settings-subscription.fda9651142d719ea5de1.hot-update.js": "/chunks/settings-subscription.fda9651142d719ea5de1.hot-update.js",
+    "/chunks/settings-subscription.bd5402ef92e7600787c8.hot-update.js": "/chunks/settings-subscription.bd5402ef92e7600787c8.hot-update.js",
+    "/chunks/settings-subscription.84e4ea1bb5840d78db33.hot-update.js": "/chunks/settings-subscription.84e4ea1bb5840d78db33.hot-update.js",
+    "/chunks/settings-subscription.80399b9ba8ad4e93e9fd.hot-update.js": "/chunks/settings-subscription.80399b9ba8ad4e93e9fd.hot-update.js",
+    "/chunks/settings-subscription.6af3c8ede63ea46c5a63.hot-update.js": "/chunks/settings-subscription.6af3c8ede63ea46c5a63.hot-update.js",
+    "/chunks/settings-subscription.ebd7175b334d9b3e7d45.hot-update.js": "/chunks/settings-subscription.ebd7175b334d9b3e7d45.hot-update.js",
+    "/chunks/settings-subscription.bed5f903f0e9c031acca.hot-update.js": "/chunks/settings-subscription.bed5f903f0e9c031acca.hot-update.js",
+    "/chunks/settings-subscription.da1f88586e55926297a8.hot-update.js": "/chunks/settings-subscription.da1f88586e55926297a8.hot-update.js",
+    "/chunks/settings-subscription.9d8626d3a44a55e2a2fc.hot-update.js": "/chunks/settings-subscription.9d8626d3a44a55e2a2fc.hot-update.js",
+    "/chunks/settings-subscription.130258d7b204f0ad2d08.hot-update.js": "/chunks/settings-subscription.130258d7b204f0ad2d08.hot-update.js",
+    "/chunks/settings-subscription.a2124fb988816eab5551.hot-update.js": "/chunks/settings-subscription.a2124fb988816eab5551.hot-update.js",
+    "/chunks/settings-subscription.e94c2790ce524e8553fa.hot-update.js": "/chunks/settings-subscription.e94c2790ce524e8553fa.hot-update.js",
+    "/chunks/settings-subscription.c072d148d313aec82253.hot-update.js": "/chunks/settings-subscription.c072d148d313aec82253.hot-update.js",
+    "/chunks/settings-subscription.6a54cdd550afffd7a451.hot-update.js": "/chunks/settings-subscription.6a54cdd550afffd7a451.hot-update.js",
+    "/chunks/settings-subscription.bce79ac8a4d22932fecc.hot-update.js": "/chunks/settings-subscription.bce79ac8a4d22932fecc.hot-update.js",
+    "/chunks/settings-subscription.b537a69762ca9d61eacf.hot-update.js": "/chunks/settings-subscription.b537a69762ca9d61eacf.hot-update.js",
+    "/chunks/settings-subscription.b75123cb1859deef7453.hot-update.js": "/chunks/settings-subscription.b75123cb1859deef7453.hot-update.js",
+    "/chunks/settings-subscription.ee3f8fd4ac9bf6a41925.hot-update.js": "/chunks/settings-subscription.ee3f8fd4ac9bf6a41925.hot-update.js",
+    "/chunks/settings-subscription.43676700043777805465.hot-update.js": "/chunks/settings-subscription.43676700043777805465.hot-update.js",
+    "/chunks/settings-subscription.2b954e5d777d0fc26a79.hot-update.js": "/chunks/settings-subscription.2b954e5d777d0fc26a79.hot-update.js",
+    "/chunks/settings-subscription.52017f0f1612dae7531f.hot-update.js": "/chunks/settings-subscription.52017f0f1612dae7531f.hot-update.js",
+    "/chunks/settings-subscription.5a5a2d6139bb6c872e68.hot-update.js": "/chunks/settings-subscription.5a5a2d6139bb6c872e68.hot-update.js",
+    "/chunks/settings-subscription.92af7b9ab14d7061db8c.hot-update.js": "/chunks/settings-subscription.92af7b9ab14d7061db8c.hot-update.js",
+    "/chunks/settings-subscription.02fded6119bf3ff81a62.hot-update.js": "/chunks/settings-subscription.02fded6119bf3ff81a62.hot-update.js",
+    "/chunks/settings-subscription.41873ee1e29346fdb9d6.hot-update.js": "/chunks/settings-subscription.41873ee1e29346fdb9d6.hot-update.js",
+    "/chunks/settings-subscription.f257c1f7275a4023a5e5.hot-update.js": "/chunks/settings-subscription.f257c1f7275a4023a5e5.hot-update.js",
+    "/chunks/settings-subscription.a479dfe7779e980c598a.hot-update.js": "/chunks/settings-subscription.a479dfe7779e980c598a.hot-update.js",
+    "/chunks/settings-subscription.bd3fac38b34981307256.hot-update.js": "/chunks/settings-subscription.bd3fac38b34981307256.hot-update.js",
+    "/chunks/settings-subscription.d4b3af0c7e415166267a.hot-update.js": "/chunks/settings-subscription.d4b3af0c7e415166267a.hot-update.js",
+    "/chunks/settings-subscription.2f6a9e00212e8a65eb84.hot-update.js": "/chunks/settings-subscription.2f6a9e00212e8a65eb84.hot-update.js",
+    "/chunks/settings-subscription.1c7d9124308f62476eba.hot-update.js": "/chunks/settings-subscription.1c7d9124308f62476eba.hot-update.js",
+    "/chunks/settings-subscription.9355ca6c6767cf49c647.hot-update.js": "/chunks/settings-subscription.9355ca6c6767cf49c647.hot-update.js",
+    "/chunks/settings-subscription.17cbe4f253b19faa9925.hot-update.js": "/chunks/settings-subscription.17cbe4f253b19faa9925.hot-update.js",
+    "/chunks/settings-subscription.ad1cd7e7a867d20c34bc.hot-update.js": "/chunks/settings-subscription.ad1cd7e7a867d20c34bc.hot-update.js",
+    "/chunks/settings-subscription.2acd6a144aab40274f41.hot-update.js": "/chunks/settings-subscription.2acd6a144aab40274f41.hot-update.js",
+    "/chunks/settings-subscription.5da79ada0097426cc0ef.hot-update.js": "/chunks/settings-subscription.5da79ada0097426cc0ef.hot-update.js",
+    "/chunks/settings-subscription.ca4b3eb159d8fa68a0ea.hot-update.js": "/chunks/settings-subscription.ca4b3eb159d8fa68a0ea.hot-update.js",
+    "/chunks/settings-subscription.8644733dab5a11edf836.hot-update.js": "/chunks/settings-subscription.8644733dab5a11edf836.hot-update.js",
+    "/chunks/settings-subscription.3e0c1d6746d8817c2b4d.hot-update.js": "/chunks/settings-subscription.3e0c1d6746d8817c2b4d.hot-update.js",
+    "/chunks/settings-subscription.2126b3cec0a3cdd2f621.hot-update.js": "/chunks/settings-subscription.2126b3cec0a3cdd2f621.hot-update.js",
+    "/chunks/settings-subscription.62eff09d38e9df1b8c50.hot-update.js": "/chunks/settings-subscription.62eff09d38e9df1b8c50.hot-update.js",
+    "/chunks/settings-subscription.0d71478d74726b77ef9c.hot-update.js": "/chunks/settings-subscription.0d71478d74726b77ef9c.hot-update.js",
+    "/chunks/settings-subscription.4187247505559d55837c.hot-update.js": "/chunks/settings-subscription.4187247505559d55837c.hot-update.js",
+    "/chunks/settings-subscription.dd1ad905edd70bbe4da3.hot-update.js": "/chunks/settings-subscription.dd1ad905edd70bbe4da3.hot-update.js",
+    "/chunks/settings-subscription.7952f2b152b1eed82dfe.hot-update.js": "/chunks/settings-subscription.7952f2b152b1eed82dfe.hot-update.js",
+    "/chunks/settings-subscription.486e95f60340414adae0.hot-update.js": "/chunks/settings-subscription.486e95f60340414adae0.hot-update.js",
+    "/chunks/settings-subscription.5e694026aa1c749d5fdf.hot-update.js": "/chunks/settings-subscription.5e694026aa1c749d5fdf.hot-update.js",
+    "/chunks/settings-subscription.aca0b237b57c89cd5645.hot-update.js": "/chunks/settings-subscription.aca0b237b57c89cd5645.hot-update.js",
+    "/chunks/settings-subscription.4c10e05bbead440cdb3f.hot-update.js": "/chunks/settings-subscription.4c10e05bbead440cdb3f.hot-update.js",
+    "/chunks/settings-subscription.dd3eb723866fd9fce277.hot-update.js": "/chunks/settings-subscription.dd3eb723866fd9fce277.hot-update.js",
+    "/chunks/settings-subscription.5a9a453b574117e78b07.hot-update.js": "/chunks/settings-subscription.5a9a453b574117e78b07.hot-update.js",
+    "/chunks/settings-subscription.5a1526f8e4bae1f1606b.hot-update.js": "/chunks/settings-subscription.5a1526f8e4bae1f1606b.hot-update.js",
+    "/chunks/settings-subscription.e1d0145d0632614cff28.hot-update.js": "/chunks/settings-subscription.e1d0145d0632614cff28.hot-update.js",
+    "/chunks/settings-subscription.a5c2769ab36a0a7e4858.hot-update.js": "/chunks/settings-subscription.a5c2769ab36a0a7e4858.hot-update.js",
+    "/chunks/settings-subscription.eb14b8d7a25673ce577c.hot-update.js": "/chunks/settings-subscription.eb14b8d7a25673ce577c.hot-update.js",
+    "/chunks/settings-subscription.f85d6f6076d464817e47.hot-update.js": "/chunks/settings-subscription.f85d6f6076d464817e47.hot-update.js",
+    "/chunks/settings-subscription.e5f89d670880092b50bc.hot-update.js": "/chunks/settings-subscription.e5f89d670880092b50bc.hot-update.js",
+    "/js/main.987bb389470e6ba108d4.hot-update.js": "/js/main.987bb389470e6ba108d4.hot-update.js",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-p~106e7cc8.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-p~106e7cc8.js?id=40162f04656017a75f9d",
+    "/chunks/settings-subscription.987bb389470e6ba108d4.hot-update.js": "/chunks/settings-subscription.987bb389470e6ba108d4.hot-update.js",
+    "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~b810e987.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~b810e987.js?id=f993f201235dfd5afa22",
+    "/js/main.c3d197911eb089ad4037.hot-update.js": "/js/main.c3d197911eb089ad4037.hot-update.js",
+    "/chunks/settings-subscription.c3d197911eb089ad4037.hot-update.js": "/chunks/settings-subscription.c3d197911eb089ad4037.hot-update.js",
+    "/chunks/settings-subscription.32fb08521f72921a5288.hot-update.js": "/chunks/settings-subscription.32fb08521f72921a5288.hot-update.js",
+    "/chunks/settings-subscription.7588579a4b91d06f520c.hot-update.js": "/chunks/settings-subscription.7588579a4b91d06f520c.hot-update.js",
+    "/chunks/settings-subscription.a04f868ebf28587f2253.hot-update.js": "/chunks/settings-subscription.a04f868ebf28587f2253.hot-update.js",
+    "/chunks/settings-subscription.e0e89120a76142fc9d68.hot-update.js": "/chunks/settings-subscription.e0e89120a76142fc9d68.hot-update.js",
+    "/chunks/settings-subscription.ac039928ef7a58eb93d5.hot-update.js": "/chunks/settings-subscription.ac039928ef7a58eb93d5.hot-update.js",
+    "/chunks/settings-subscription.f67a0de1acead88abdb0.hot-update.js": "/chunks/settings-subscription.f67a0de1acead88abdb0.hot-update.js",
+    "/chunks/settings.728b8825ad6f4a1070f8.hot-update.js": "/chunks/settings.728b8825ad6f4a1070f8.hot-update.js",
+    "/chunks/settings-subscription.ccb544093500d934198a.hot-update.js": "/chunks/settings-subscription.ccb544093500d934198a.hot-update.js",
+    "/js/main.7872a1b28e6af5b603f5.hot-update.js": "/js/main.7872a1b28e6af5b603f5.hot-update.js",
+    "/chunks/settings-subscription.7872a1b28e6af5b603f5.hot-update.js": "/chunks/settings-subscription.7872a1b28e6af5b603f5.hot-update.js",
+    "/js/main.99210e06aba2e80e12c7.hot-update.js": "/js/main.99210e06aba2e80e12c7.hot-update.js",
+    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~d00129eb.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~d00129eb.js?id=fed76264f26694c9db37",
+    "/chunks/settings-create-payment-methods.99210e06aba2e80e12c7.hot-update.js": "/chunks/settings-create-payment-methods.99210e06aba2e80e12c7.hot-update.js",
+    "/js/main.fac1b13bd1efc2f42f34.hot-update.js": "/js/main.fac1b13bd1efc2f42f34.hot-update.js",
+    "/chunks/admin~chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-item~3b21240c.js": "/chunks/admin~chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-item~3b21240c.js?id=1e02bcb6e880e4c679a1",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.fac1b13bd1efc2f42f34.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.fac1b13bd1efc2f42f34.hot-update.js",
+    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~217928f6.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~217928f6.js?id=9c4d17d768dc543a0e4b",
+    "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~8729b0a3.js": "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-items~chunks/page~8729b0a3.js?id=50f7067283a882b798bd",
+    "/chunks/billing.js": "/chunks/billing.js?id=8a75c805a916b03597d5",
+    "/chunks/billing~chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~ch~5d1c5841.js": "/chunks/billing~chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~ch~5d1c5841.js?id=f8f80b9b2ff56cb089fb",
+    "/chunks/billing~chunks/settings-storage~chunks/user-storage~chunks/user-subscription.js": "/chunks/billing~chunks/settings-storage~chunks/user-storage~chunks/user-subscription.js?id=9bb4b7b4c8f9442fc828",
+    "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~81844718.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~81844718.js?id=21edd02ba7123e444147",
+    "/js/main.2701b65e37c8b8796a85.hot-update.js": "/js/main.2701b65e37c8b8796a85.hot-update.js",
+    "/chunks/billing.580dad5d484c9e080cc1.hot-update.js": "/chunks/billing.580dad5d484c9e080cc1.hot-update.js",
+    "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.643f2961de5c2d459f87.hot-update.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.643f2961de5c2d459f87.hot-update.js",
+    "/chunks/settings.3da09fb5fd6633f80e4f.hot-update.js": "/chunks/settings.3da09fb5fd6633f80e4f.hot-update.js",
+    "/chunks/settings-password.3da09fb5fd6633f80e4f.hot-update.js": "/chunks/settings-password.3da09fb5fd6633f80e4f.hot-update.js",
+    "/chunks/settings.c119a078f32d91bd411c.hot-update.js": "/chunks/settings.c119a078f32d91bd411c.hot-update.js",
+    "/chunks/settings.52081832b31602c240a6.hot-update.js": "/chunks/settings.52081832b31602c240a6.hot-update.js",
+    "/chunks/settings.2088d8ae67f8cd6d39d2.hot-update.js": "/chunks/settings.2088d8ae67f8cd6d39d2.hot-update.js",
+    "/chunks/settings.aacd1d7d23d640557259.hot-update.js": "/chunks/settings.aacd1d7d23d640557259.hot-update.js",
+    "/chunks/settings~chunks/settings-password.aacd1d7d23d640557259.hot-update.js": "/chunks/settings~chunks/settings-password.aacd1d7d23d640557259.hot-update.js",
+    "/chunks/settings.5f0086508ea24618153f.hot-update.js": "/chunks/settings.5f0086508ea24618153f.hot-update.js",
+    "/chunks/settings.74bc0ec39a2763776f82.hot-update.js": "/chunks/settings.74bc0ec39a2763776f82.hot-update.js",
+    "/chunks/settings.c3d61ef320de2a2e416c.hot-update.js": "/chunks/settings.c3d61ef320de2a2e416c.hot-update.js",
+    "/chunks/settings.ea354159b254df466a33.hot-update.js": "/chunks/settings.ea354159b254df466a33.hot-update.js",
+    "/chunks/settings.6743a7421e351e032520.hot-update.js": "/chunks/settings.6743a7421e351e032520.hot-update.js"
 }
diff --git a/resources/js/components/Admin/AppInputSwitch.vue b/resources/js/components/Admin/AppInputSwitch.vue
index a5e1f58b..ea147464 100644
--- a/resources/js/components/Admin/AppInputSwitch.vue
+++ b/resources/js/components/Admin/AppInputSwitch.vue
@@ -1,5 +1,5 @@
 <template>
-	<div :class="{'mb-7': !isLast}" class="flex justify-between space-x-8 w-full">
+	<div :class="{'mb-7': !isLast}" class="sm:flex justify-between sm:space-x-8 sm:space-y-0 space-y-4 w-full">
 
 		<!--Label for input-->
 		<div class="leading-5">
diff --git a/resources/js/components/Others/PaymentMethod.vue b/resources/js/components/Others/PaymentMethod.vue
index 8d467d76..fa1f8fc8 100644
--- a/resources/js/components/Others/PaymentMethod.vue
+++ b/resources/js/components/Others/PaymentMethod.vue
@@ -12,11 +12,11 @@
 	</div>
 </template>
 <script>
-export default {
-	name: 'PaymentMethod',
-	props: [
-		'description',
-		'driver',
-	]
-}
+	export default {
+		name: 'PaymentMethod',
+		props: [
+			'description',
+			'driver',
+		]
+	}
 </script>
diff --git a/resources/js/components/Spotlight/Spotlight.vue b/resources/js/components/Spotlight/Spotlight.vue
index 37df1c40..0a89d9fb 100644
--- a/resources/js/components/Spotlight/Spotlight.vue
+++ b/resources/js/components/Spotlight/Spotlight.vue
@@ -90,7 +90,7 @@
 							<upload-cloud-icon v-if="result.action.value === 'RecentUploads'" size="18" class="vue-feather text-theme"/>
 							<file-text-icon v-if="['Invoices', 'Invoice'].includes(result.action.value)" size="18" class="vue-feather text-theme"/>
 							<database-icon v-if="result.action.value === 'Plans'" size="18" class="vue-feather text-theme"/>
-							<dollar-sign-icon v-if="['Subscriptions', 'Subscription', 'MeteredSubscription'].includes(result.action.value)" size="18" class="vue-feather text-theme"/>
+							<dollar-sign-icon v-if="['Subscriptions', 'Billing'].includes(result.action.value)" size="18" class="vue-feather text-theme"/>
 							<globe-icon v-if="result.action.value === 'Language'" size="18" class="vue-feather text-theme"/>
 							<monitor-icon v-if="result.action.value === 'Pages'" size="18" class="vue-feather text-theme"/>
 							<box-icon v-if="result.action.value === 'Dashboard'" size="18" class="vue-feather text-theme"/>
@@ -408,12 +408,10 @@ export default {
 					},
 				},
 				{
-					title: this.$t('Show my Subscription'),
+					title: this.$t('Show my Billing'),
 					action: {
 						type: 'route',
-						value: this.config.subscriptionType === 'fixed'
-							? 'Subscription'
-							: 'MeteredSubscription',
+						value: 'Billing',
 					},
 				},
 				{
diff --git a/resources/js/components/Subscription/PaymentCard.vue b/resources/js/components/Subscription/PaymentCard.vue
new file mode 100644
index 00000000..66f19b4b
--- /dev/null
+++ b/resources/js/components/Subscription/PaymentCard.vue
@@ -0,0 +1,56 @@
+<template>
+	<div class="flex items-center justify-between py-3 px-4 input-dark">
+		<div class="flex items-center">
+			<img :src="`/assets/gateways/${card.data.attributes.brand}.svg`" alt="" class="h-5 mr-3 rounded">
+			<b class="text-sm font-bold leading-none capitalize">
+				{{ card.data.attributes.brand }} •••• {{ card.data.attributes.last4 }}
+			</b>
+		</div>
+		<b class="text-sm font-bold leading-none">
+			{{ $t('Expires') }} {{ card.data.attributes.expiration }}
+		</b>
+		<Trash2Icon @click="deleteCreditCard(card.data.id)" size="15" class="cursor-pointer" />
+	</div>
+</template>
+<script>
+    import {Trash2Icon,} from "vue-feather-icons";
+	import {events} from "../../bus";
+	import axios from "axios";
+
+	export default {
+		name: 'PaymentCard',
+		components: {
+			Trash2Icon,
+		},
+		props: [
+			'card',
+		],
+		methods: {
+			deleteCreditCard(id) {
+				events.$emit('confirm:open', {
+					title: this.$t('Are you sure you want to delete your credit card?'),
+					message: this.$t('We will no longer settle your payments automatically and you will have to fund your account for the next payments.'),
+					action: {
+						id: id,
+						operation: 'delete-credit-card',
+					}
+				})
+			},
+		},
+		created() {
+			events.$on('action:confirmed', data => {
+				if (data.operation === 'delete-credit-card')
+					axios.delete(`/api/stripe/credit-cards/${data.id}`)
+						.then(() => {
+							this.$store.dispatch('getAppData')
+
+							events.$emit('toaster', {
+								type: 'success',
+								message: this.$t('Your credit card was deleted.'),
+							})
+						})
+						.catch(() => this.$isSomethingWrong())
+			})
+		}
+	}
+</script>
\ No newline at end of file
diff --git a/resources/js/components/Subscription/SelectPlanSubscriptionPopup.vue b/resources/js/components/Subscription/SelectPlanSubscriptionPopup.vue
index 054d5233..377ff17d 100644
--- a/resources/js/components/Subscription/SelectPlanSubscriptionPopup.vue
+++ b/resources/js/components/Subscription/SelectPlanSubscriptionPopup.vue
@@ -5,22 +5,45 @@
 
 		<!--Payment Options-->
 		<div v-if="isPaymentOptionPage">
-
 			<PopupContent class="px-4">
-				<b class="text-center block mb-3 mt-8">
-					Stripe
-				</b>
-				<ButtonBase @click.native="payByStripe" class="block w-full mb-6" button-style="theme" type="button">
-					<span class="text-theme">
-						Pay With Stripe
-					</span>
-				</ButtonBase>
 
-				<b class="text-center block mb-3 mt-8">
-					PayStack
-				</b>
-				<ButtonBase class="block w-full mb-6" button-style="theme" type="button">
+				<!--Stripe implementation-->
+				<PaymentMethod
+					v-if="config.isStripe"
+					driver="stripe"
+					:description="$t('Pay by your credit card or Apple Pay')"
+				>
+					<span v-if="! paypalMethodsLoaded" @click="payByStripe" class="text-sm text-theme font-bold cursor-pointer">
+						{{ $t('Select') }}
+					</span>
+				</PaymentMethod>
+
+				<!--PayPal implementation-->
+				<div v-if="config.isPayPal" :class="{'dark:bg-2x-dark-foreground bg-light-background rounded-xl px-4 mb-2': paypalMethodsLoaded}">
+					<PaymentMethod
+						@click.native="pickedPaymentMethod('paypal')"
+						driver="paypal"
+						:description="$t('Available PayPal Credit, Debit or Credit Card.')"
+					>
+						<span v-if="! paypalMethodsLoaded" class="text-sm text-theme font-bold cursor-pointer">
+							{{ $t('Select') }}
+						</span>
+					</PaymentMethod>
+
+					<!--PayPal Buttons-->
+					<div v-if="paypalMethodsLoaded">
+						<div id="paypal-button-container"></div>
+					</div>
+				</div>
+
+				<!--Paystack implementation-->
+				<PaymentMethod
+					v-if="config.isPaystack"
+					driver="paystack"
+					:description="$t('Available Bank Account, USSD, Mobile Money, Apple Pay')"
+				>
 					<paystack
+						v-if="user && config"
 						:channels="['bank', 'ussd', 'qr', 'mobile_money', 'bank_transfer']"
 						class="font-bold"
 						currency="ZAR"
@@ -32,18 +55,22 @@
 						:callback="paymentSuccessful"
 						:close="paystackClosed"
 					>
-						<span class="text-theme">
-							Pay With PayStack
+						<span class="text-sm text-theme font-bold cursor-pointer">
+							{{ $t('Select') }}
 						</span>
 					 </paystack>
-				</ButtonBase>
-
-				<b class="text-center block mb-3">
-					PayPal
-				</b>
-				<!--PayPal Button-->
-				<div id="paypal-button-container"></div>
+				</PaymentMethod>
 			</PopupContent>
+
+			<PopupActions>
+				<ButtonBase
+					class="popup-button"
+					@click.native="$closePopup()"
+					button-style="secondary"
+				>
+					{{ $t('Cancel Payment') }}
+				</ButtonBase>
+			</PopupActions>
 		</div>
 
 		<!--Select Payment Plans-->
@@ -55,8 +82,8 @@
 					<label :class="{'text-gray-400': !isYearlyPlans}" class="font-bold cursor-pointer text-xs">
 						{{ $t('Billed Annually') }}
 					</label>
-					<div class="relative inline-block w-14 align-middle select-none">
-						<SwitchInput class="transform scale-90" v-model="isYearlyPlans" :state="isYearlyPlans" />
+					<div class="relative inline-block w-12 align-middle select-none">
+						<SwitchInput class="transform scale-75" v-model="isYearlyPlans" :state="isYearlyPlans" />
 					</div>
 				</div>
 
@@ -85,7 +112,7 @@
 				<ButtonBase
 					class="popup-button"
 					:button-style="buttonStyle"
-					@click.native="showPaymentOptions"
+					@click.native="isPaymentOptionPage = true"
 				>{{ $t('Upgrade Account') }}
 				</ButtonBase>
 			</PopupActions>
@@ -94,6 +121,7 @@
 </template>
 
 <script>
+	import PaymentMethod from "../Others/PaymentMethod";
 	import { loadScript } from "@paypal/paypal-js";
     import SwitchInput from '/resources/js/components/Others/Forms/SwitchInput'
 	import PopupWrapper from '/resources/js/components/Others/Popup/PopupWrapper'
@@ -110,6 +138,7 @@
 	export default {
 		name: 'SelectPlanSubscriptionPopup',
 		components: {
+			PaymentMethod,
 			paystack,
 			PlanDetail,
 			SwitchInput,
@@ -152,6 +181,8 @@
 		},
 		data() {
 			return {
+				paypalMethodsLoaded: false,
+
 				isPaymentOptionPage: false,
 				isYearlyPlans: false,
 				isLoading: false,
@@ -160,19 +191,17 @@
 			}
 		},
 		methods: {
-			payByStripe() {
-				axios.post('/api/subscriptions/stripe/checkout', {
-						planCode: this.selectedPlan.data.meta.driver_plan_id.stripe
-					})
-					.then(response => {
-						window.location = response.data.url
-					})
+			pickedPaymentMethod(driver) {
+				if (driver === 'paystack') {
+					this.$closePopup()
+				}
+				if (driver === 'paypal' && !this.paypalMethodsLoaded) {
+					this.PayPalInitialization()
+				}
 			},
-			async showPaymentOptions() {
-				// Show payment buttons page
-				this.isPaymentOptionPage = true
+			async PayPalInitialization() {
+				this.paypalMethodsLoaded = true
 
-				// PayPal
 				let paypal;
 
 				try {
@@ -183,7 +212,7 @@
 				} catch (error) {
 					events.$emit('toaster', {
 						type: 'danger',
-						message: this.$t('failed to load the PayPal components'),
+						message: this.$t('Failed to load the PayPal service'),
 					})
 				}
 
@@ -191,8 +220,8 @@
 				const userId = this.user.data.id
 				const app = this
 
-				// Initialize paypal buttons for subscription
-				/*await paypal.Buttons({
+				// Initialize paypal buttons for single charge
+				await paypal.Buttons({
 					createSubscription: function(data, actions) {
 						return actions.subscription.create({
 							plan_id: planId,
@@ -202,22 +231,16 @@
 					onApprove: function(data, actions) {
 						app.paymentSuccessful()
 					}
-				}).render('#paypal-button-container');*/
-
-				// Initialize paypal buttons for single charge
-				await paypal.Buttons({
-					createOrder: function(data, actions) {
-						return actions.order.create({
-							purchase_units: [{
-								amount: {
-									value: '10.49',
-								},
-								custom_id: userId
-							}]
-						});
-					}
 				}).render('#paypal-button-container');
 			},
+			payByStripe() {
+				axios.post('/api/stripe/checkout', {
+						planCode: this.selectedPlan.data.meta.driver_plan_id.stripe
+					})
+					.then(response => {
+						window.location = response.data.url
+					})
+			},
 			selectPlan(plan) {
 				this.selectedPlan = plan
 			},
diff --git a/resources/js/components/Subscription/UserBalance.vue b/resources/js/components/Subscription/UserBalance.vue
new file mode 100644
index 00000000..ca8e74cc
--- /dev/null
+++ b/resources/js/components/Subscription/UserBalance.vue
@@ -0,0 +1,74 @@
+<template>
+	<div v-if="! hasPaymentMethod" class="card shadow-card">
+		<FormLabel icon="dollar">
+			{{ $t('Balance') }}
+		</FormLabel>
+
+		<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
+			{{ user.data.relationships.balance.data.attributes.formatted }}
+		</b>
+
+		<!-- Make payment form -->
+		<ValidationObserver ref="fundAccount" @submit.prevent="makePayment" v-slot="{ invalid }" tag="form" class="mt-6">
+			<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Capacity" rules="required">
+				<AppInputText :description="$t('The amount will be increased as soon as we register your charge from payment gateway.')" :error="errors[0]" :is-last="true">
+					<div class="sm:flex sm:space-x-4 sm:space-y-0 space-y-4">
+						<input v-model="chargeAmount"
+							   :placeholder="$t('Fund Your Account Balance...')"
+							   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="sm:w-auto w-full">
+							{{ $t('Make a Payment') }}
+						</ButtonBase>
+					</div>
+				</AppInputText>
+			</ValidationProvider>
+		</ValidationObserver>
+	</div>
+</template>
+<script>
+import {ValidationObserver, ValidationProvider} from 'vee-validate/dist/vee-validate.full'
+import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
+import FormLabel from "../Others/Forms/FormLabel"
+import AppInputText from "../Admin/AppInputText"
+import {mapGetters} from "vuex";
+
+export default {
+	name: 'UserBalance',
+	components: {
+		ValidationObserver,
+		ValidationProvider,
+		AppInputText,
+		ButtonBase,
+		FormLabel
+	},
+	computed: {
+		...mapGetters([
+			'user',
+		]),
+		hasPaymentMethod() {
+			return this.user.data.relationships.creditCards && this.user.data.relationships.creditCards.data.length > 0
+		},
+	},
+	data() {
+		return {
+			chargeAmount: undefined,
+		}
+	},
+	methods: {
+		async makePayment() {
+			// Validate fields
+			const isValid = await this.$refs.fundAccount.validate();
+
+			if (!isValid) return;
+
+			// Show payment methods popup
+			this.$store.dispatch('callSingleChargeProcess', this.chargeAmount)
+		},
+	}
+}
+</script>
\ No newline at end of file
diff --git a/resources/js/components/Subscription/UserBillingAlerts.vue b/resources/js/components/Subscription/UserBillingAlerts.vue
new file mode 100644
index 00000000..f876fa24
--- /dev/null
+++ b/resources/js/components/Subscription/UserBillingAlerts.vue
@@ -0,0 +1,189 @@
+<template>
+	<div class="card shadow-card">
+		<FormLabel icon="bell">
+			{{ $t('Billing Alert') }}
+		</FormLabel>
+
+		<div v-if="user.data.relationships.alert">
+			<b class="text-3xl font-extrabold -mt-3 block mb-0.5 flex items-center">
+				{{ user.data.relationships.alert.data.attributes.formatted }}
+				<edit2-icon v-if="! showUpdateBillingAlertForm" @click="showUpdateBillingAlertForm = ! showUpdateBillingAlertForm" size="12" class="vue-feather cursor-pointer ml-2 transform -translate-y-0.5" />
+				<trash2-icon v-if="showUpdateBillingAlertForm" @click="deleteBillingAlert" size="12" class="vue-feather cursor-pointer ml-2 transform -translate-y-0.5" />
+			</b>
+
+			<b class="block text-sm text-gray-400">
+				{{ $t('Alert will be triggered after you reach the value above.') }}
+			</b>
+		</div>
+
+		<ValidationObserver v-if="showUpdateBillingAlertForm" ref="updatebillingAlertForm" @submit.prevent="updateBillingAlert" v-slot="{ invalid }" tag="form" class="mt-6">
+			<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Billing Alert" rules="required">
+				<AppInputText :description="$t('You will receive an email whenever your monthly balance reaches the specified amount above.')" :error="errors[0]" :is-last="true">
+					<div class="sm:flex sm:space-x-4 sm:space-y-0 space-y-4">
+						<input v-model="billingAlertAmount"
+							   :placeholder="$t('Alert Amount...')"
+							   type="number"
+							   min="1"
+							   max="999999999"
+							   class="focus-border-theme input-dark"
+							   :class="{'border-red-700': errors[0]}"
+						/>
+						<ButtonBase :loadint="isSendingBillingAlert" :disabled="isSendingBillingAlert" type="submit" button-style="theme" class="sm:w-auto w-full">
+							{{ $t('Update Alert') }}
+						</ButtonBase>
+					</div>
+				</AppInputText>
+			</ValidationProvider>
+		</ValidationObserver>
+
+		<ValidationObserver v-if="! user.data.relationships.alert" ref="billingAlertForm" @submit.prevent="setBillingAlert" v-slot="{ invalid }" tag="form" class="mt-6">
+			<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Billing Alert" rules="required">
+				<AppInputText :description="$t('You will receive an email whenever your monthly balance reaches the specified amount above.')" :error="errors[0]" :is-last="true">
+					<div class="flex space-x-4">
+						<input v-model="billingAlertAmount"
+							   :placeholder="$t('Alert Amount...')"
+							   type="number"
+							   min="1"
+							   max="999999999"
+							   class="focus-border-theme input-dark"
+							   :class="{'border-red-700': errors[0]}"
+						/>
+						<ButtonBase :loadint="isSendingBillingAlert" :disabled="isSendingBillingAlert" type="submit" button-style="theme" class="submit-button">
+							{{ $t('Set Alert') }}
+						</ButtonBase>
+					</div>
+				</AppInputText>
+			</ValidationProvider>
+		</ValidationObserver>
+	</div>
+</template>
+<script>
+import {ValidationObserver, ValidationProvider} from 'vee-validate/dist/vee-validate.full'
+import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
+import AppInputText from "../Admin/AppInputText"
+import FormLabel from "../Others/Forms/FormLabel"
+import { Edit2Icon, Trash2Icon } from 'vue-feather-icons'
+import {events} from "../../bus";
+import {mapGetters} from "vuex";
+import axios from "axios";
+
+export default {
+	name: 'UserBillingAlerts',
+	components: {
+		ValidationObserver,
+		ValidationProvider,
+		AppInputText,
+		ButtonBase,
+		Trash2Icon,
+		Edit2Icon,
+		FormLabel,
+	},
+	computed: {
+		...mapGetters([
+			'user',
+		]),
+	},
+	data() {
+		return {
+			billingAlertAmount: undefined,
+			isSendingBillingAlert: false,
+			showUpdateBillingAlertForm: false,
+		}
+	},
+	methods: {
+		async updateBillingAlert() {
+
+			// Validate fields
+			const isValid = await this.$refs.updatebillingAlertForm.validate();
+
+			if (!isValid) return;
+
+			this.isSendingBillingAlert = true
+
+			axios
+				.patch(`/api/subscriptions/billing-alerts/${this.user.data.relationships.alert.data.id}`, {
+					amount: this.billingAlertAmount
+				})
+				.then(() => {
+					this.$store.dispatch('getAppData')
+
+					this.showUpdateBillingAlertForm = false
+
+					events.$emit('toaster', {
+						type: 'success',
+						message: this.$t('Your billing alert was updated successfully'),
+					})
+				})
+				.catch(() => {
+					events.$emit('toaster', {
+						type: 'danger',
+						message: this.$t('popup_error.title'),
+					})
+				})
+				.finally(() => {
+					this.isSendingBillingAlert = false
+				})
+		},
+		async setBillingAlert() {
+
+			// Validate fields
+			const isValid = await this.$refs.billingAlertForm.validate();
+
+			if (!isValid) return;
+
+			this.isSendingBillingAlert = true
+
+			axios
+				.post('/api/subscriptions/billing-alerts', {
+					amount: this.billingAlertAmount
+				})
+				.then(() => {
+					this.$store.dispatch('getAppData')
+
+					events.$emit('toaster', {
+						type: 'success',
+						message: this.$t('Your billing alert was set successfully'),
+					})
+				})
+				.catch(() => {
+					events.$emit('toaster', {
+						type: 'danger',
+						message: this.$t('popup_error.title'),
+					})
+				})
+				.finally(() => {
+					this.isSendingBillingAlert = false
+				})
+		},
+		deleteBillingAlert() {
+			events.$emit('confirm:open', {
+				title: this.$t('Are you sure you want to delete your alert?'),
+				message: this.$t('You will no longer receive any notifications that your billing limit has been exceeded.'),
+				action: {
+					id: this.user.data.relationships.alert.data.id,
+					operation: 'delete-billing-alert',
+				}
+			})
+		},
+	},
+	created() {
+		events.$on('action:confirmed', data => {
+
+			if (data.operation === 'delete-billing-alert')
+				axios.delete(`/api/subscriptions/billing-alerts/${this.user.data.relationships.alert.data.id}`)
+					.then(() => {
+						this.$store.dispatch('getAppData')
+
+						this.showUpdateBillingAlertForm = false
+						this.billingAlertAmount = undefined
+
+						events.$emit('toaster', {
+							type: 'success',
+							message: this.$t('Your billing alert was deleted.'),
+						})
+					})
+					.catch(() => this.$isSomethingWrong())
+		})
+	}
+}
+</script>
\ No newline at end of file
diff --git a/resources/js/components/Subscription/UserEditSubscription.vue b/resources/js/components/Subscription/UserEditSubscription.vue
new file mode 100644
index 00000000..16d77762
--- /dev/null
+++ b/resources/js/components/Subscription/UserEditSubscription.vue
@@ -0,0 +1,93 @@
+<template>
+	<div class="card shadow-card">
+		<FormLabel>
+			{{ $t('Edit your Subscription') }}
+		</FormLabel>
+
+		<AppInputSwitch :title="$t('Cancel Subscription')" :description="$t('You can cancel your subscription now. You\'ll continue to have access to the features you\'ve paid for until the end of your billing cycle.')">
+			<ButtonBase @click.native="cancelSubscriptionConfirmation" :loading="isCancelling" class="sm:w-auto w-full" button-style="secondary">
+				{{ $t('Cancel Now') }}
+			</ButtonBase>
+		</AppInputSwitch>
+
+		<AppInputSwitch :title="$t('Upgrade Plan')" :description="$t('You can upgrade your plan at any time you want.')" :is-last="true">
+			<ButtonBase @click.native="$openUpgradeOptions" class="sm:w-auto w-full" button-style="secondary">
+				{{ $t('Upgrade Now') }}
+			</ButtonBase>
+		</AppInputSwitch>
+	</div>
+</template>
+
+<script>
+	import AppInputSwitch from "../Admin/AppInputSwitch"
+	import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
+	import FormLabel from "../Others/Forms/FormLabel"
+	import {events} from "../../bus";
+	import axios from "axios";
+
+	export default {
+		name: 'UserEditSubscription',
+		components: {
+			AppInputSwitch,
+			ButtonBase,
+			FormLabel
+		},
+		computed: {
+			subscription() {
+				return this.$store.getters.user.data.relationships.subscription.data
+			}
+		},
+		data() {
+			return {
+				isCancelling: false,
+			}
+		},
+		methods: {
+			cancelSubscriptionConfirmation() {
+				events.$emit('confirm:open', {
+					title: this.$t('Are you sure you want to cancel subscription?'),
+					message: this.$t("You'll continue to have access to the features you've paid for until the end of your billing cycle."),
+					action: {
+						operation: 'cancel-subscription',
+					}
+				})
+			},
+		},
+		created() {
+
+			events.$on('action:confirmed', data => {
+				if (data.operation === 'cancel-subscription') {
+
+					// Start deleting spinner button
+					this.isCancelling = true
+
+					// Send post request
+					axios
+						.post('/api/subscriptions/cancel')
+						.then(() => {
+
+							// Update user data
+							this.$store.dispatch('getAppData').then(() => {
+								this.fetchSubscriptionDetail()
+							})
+
+							events.$emit('toaster', {
+								type: 'success',
+								message: this.$t('popup_subscription_cancel.title'),
+							})
+						})
+						.catch(() => {
+							events.$emit('toaster', {
+								type: 'danger',
+								message: this.$t('popup_error.title'),
+							})
+						})
+						.finally(() => {
+							this.isCancelling = false
+						})
+				}
+
+			})
+		}
+	}
+</script>
\ No newline at end of file
diff --git a/resources/js/components/Subscription/UserEmptySubscription.vue b/resources/js/components/Subscription/UserEmptySubscription.vue
new file mode 100644
index 00000000..a854e490
--- /dev/null
+++ b/resources/js/components/Subscription/UserEmptySubscription.vue
@@ -0,0 +1,23 @@
+<template>
+	<div v-if="! hasSubscription" class="card shadow-card">
+		<InfoBox style="margin-bottom: 0">
+			<p>{{ $t("You don't have any subscription") }}</p>
+		</InfoBox>
+	</div>
+</template>
+
+<script>
+	import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
+
+	export default {
+		name: 'UserEmptySubscription',
+		components: {
+			InfoBox
+		},
+		computed: {
+			hasSubscription() {
+				return this.$store.getters.user.data.relationships.subscription
+			},
+		},
+	}
+</script>
\ No newline at end of file
diff --git a/resources/js/components/Subscription/UserFailedPayments.vue b/resources/js/components/Subscription/UserFailedPayments.vue
new file mode 100644
index 00000000..5d757161
--- /dev/null
+++ b/resources/js/components/Subscription/UserFailedPayments.vue
@@ -0,0 +1,62 @@
+<template>
+	<div v-if="user.data.relationships.failedPayments && user.data.relationships.failedPayments.data.length > 0" class="card shadow-card">
+		<FormLabel icon="frown">
+			{{ $t('Failed Payments') }}
+		</FormLabel>
+
+		<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
+			-{{ user.data.meta.totalDebt }}
+		</b>
+
+		<b class="mb-3 block text-sm text-gray-400 mb-5">
+			{{ $t("We are unable to charge your usage. Please register new credit card or fund your account with sufficient amount and we'll give it another try!") }}
+		</b>
+
+		<!--Failed Payments-->
+		<div
+			v-for="payment in user.data.relationships.failedPayments.data"
+			:key="payment.data.id"
+			class="flex items-center justify-between py-2 border-b dark:border-opacity-5 border-light border-dashed"
+		>
+			<div class="w-2/4 leading-none">
+				<b class="text-sm font-bold leading-none">
+					{{ payment.data.attributes.note }}
+				</b>
+			</div>
+			<div class="text-left w-1/4">
+				<span class="text-sm font-bold text-gray-560 capitalize">
+					{{ $t(payment.data.attributes.source) }}
+				</span>
+			</div>
+			<div class="text-right w-1/4">
+				<span class="text-sm font-bold">
+					{{ payment.data.attributes.created_at }}
+				</span>
+			</div>
+			<div class="text-right w-1/4">
+				<span class="text-sm font-bold text-red">
+					{{ payment.data.attributes.amount }}
+				</span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import FormLabel from "../Others/Forms/FormLabel"
+import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
+import {mapGetters} from "vuex";
+
+export default {
+	name: 'UserFailedPayments',
+	components: {
+		FormLabel,
+		InfoBox,
+	},
+	computed: {
+		...mapGetters([
+			'user',
+		])
+	},
+}
+</script>
\ No newline at end of file
diff --git a/resources/js/components/Subscription/UserFixedSubscriptionDetail.vue b/resources/js/components/Subscription/UserFixedSubscriptionDetail.vue
new file mode 100644
index 00000000..a78f55ca
--- /dev/null
+++ b/resources/js/components/Subscription/UserFixedSubscriptionDetail.vue
@@ -0,0 +1,90 @@
+<template>
+	<div class="card shadow-card">
+		<FormLabel>
+			{{ $t('Subscription') }}
+		</FormLabel>
+
+		<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
+			{{ status }}
+		</b>
+		<b class="mb-3 block text-sm text-gray-400 mb-8">
+			{{ subscription.data.relationships.plan.data.attributes.name }} / {{ price }}
+		</b>
+
+		<div v-for="(limit, i) in limitations" :key="i" :class="{'mb-6': (Object.keys(limitations).length - 1) !== i}">
+			<b class="mb-3 block text-sm text-gray-400">
+				{{ limit.message }}
+			</b>
+			<ProgressLine :data="limit.distribution" />
+		</div>
+	</div>
+</template>
+<script>
+	import FormLabel from "../Others/Forms/FormLabel"
+	import ProgressLine from "../Admin/ProgressLine"
+	import {mapGetters} from "vuex";
+
+	export default {
+		name: 'UserFixedSubscriptionDetail',
+		components: {
+			ProgressLine,
+			FormLabel,
+		},
+		computed: {
+			...mapGetters([
+				'user',
+			]),
+			subscription() {
+				return this.$store.getters.user.data.relationships.subscription
+			},
+			limitations() {
+				let limitations = []
+
+				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`,
+							}
+						}
+
+						limitations.push({
+							message: payload.message[key],
+							distribution: [
+								{
+									progress: item.percentage,
+									color: payload.color[key],
+									title: payload.title[key],
+								}
+							]
+						})
+					})
+
+				return limitations
+			},
+			status() {
+				return {
+					'active': `Active until ${this.subscription.data.attributes.renews_at}`,
+					'cancelled': `Ends at ${this.subscription.data.attributes.ends_at}`,
+				}[this.subscription.data.attributes.status]
+			},
+			price() {
+				return {
+					'month': `${this.subscription.data.relationships.plan.data.attributes.price} Per Month`,
+					'year': `${this.subscription.data.relationships.plan.data.attributes.price} Per Year`,
+				}[this.subscription.data.relationships.plan.data.attributes.interval]
+			},
+		}
+	}
+</script>
\ No newline at end of file
diff --git a/resources/js/components/Subscription/UserStoredPaymentMethods.vue b/resources/js/components/Subscription/UserStoredPaymentMethods.vue
new file mode 100644
index 00000000..1f34c6a9
--- /dev/null
+++ b/resources/js/components/Subscription/UserStoredPaymentMethods.vue
@@ -0,0 +1,179 @@
+<template>
+	<div v-if="config.isStripe" class="card shadow-card">
+		<FormLabel icon="credit-card">
+			{{ $t('Payment Method') }}
+		</FormLabel>
+
+		<!-- User has registered payment method -->
+		<div v-if="hasPaymentMethod">
+			<b v-if="config.subscriptionType === 'metered' && user.data.relationships.balance.data.attributes.balance > 0" class="mb-3 block text-sm mb-5">
+				{{ $t('credit_to_auto_withdraw', {credit: user.data.relationships.balance.data.attributes.formatted}) }}
+			</b>
+
+			<!-- Card -->
+			<PaymentCard
+				v-for="card in user.data.relationships.creditCards.data"
+				:key="card.data.id"
+				:card="card"
+			/>
+
+			<small class="text-xs text-gray-500 pt-3 leading-none sm:block hidden">
+				{{ $t('We are settling your payment automatically via your saved credit card.') }}
+			</small>
+		</div>
+
+		<!-- User doesn't have registered payment method -->
+		<div v-if="! hasPaymentMethod">
+
+			<!-- Show credit card form -->
+			<ButtonBase @click.native="showStoreCreditCardForm" v-if="! isCreditCardForm" :loading="stripeData.storingStripePaymentMethod" type="submit" button-style="theme" class="w-full mt-4">
+				{{ $t('Add Payment Method') }}
+			</ButtonBase>
+
+			<!-- Store credit card form -->
+			<form v-if="isCreditCardForm" @submit.prevent="storeStripePaymentMethod" id="payment-form" class="mt-6">
+				<div v-if="stripeData.isInitialization" class="h-10 relative mb-6">
+					<Spinner />
+				</div>
+				<div id="payment-element">
+				<!-- Elements will create form elements here -->
+				</div>
+				<ButtonBase :loading="stripeData.storingStripePaymentMethod" type="submit" button-style="theme" class="w-full mt-4">
+					{{ $t('Store My Credit Card') }}
+				</ButtonBase>
+				<div id="error-message">
+					<!-- Display error message to your customers here -->
+				</div>
+			</form>
+		</div>
+	</div>
+</template>
+<script>
+	import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
+	import FormLabel from "../Others/Forms/FormLabel"
+	import PaymentCard from "./PaymentCard"
+	import Spinner from "../FilesView/Spinner"
+	import {mapGetters} from "vuex";
+	import {events} from "../../bus";
+	import {loadStripe} from "@stripe/stripe-js";
+	import axios from "axios";
+
+	// Define stripe variables
+	let stripe, elements = undefined
+
+	export default {
+		name: 'UserStoredPaymentMethods',
+		components: {
+			ButtonBase,
+			FormLabel,
+			PaymentCard,
+			Spinner
+		},
+		computed: {
+			...mapGetters([
+				'isDarkMode',
+				'config',
+				'user',
+			]),
+			hasPaymentMethod() {
+				return this.user.data.relationships.creditCards && this.user.data.relationships.creditCards.data.length > 0
+			},
+		},
+		data() {
+			return {
+				isLoading: false,
+
+				isCreditCardForm: false,
+
+				stripeData: {
+					isInitialization: true,
+					storingStripePaymentMethod: false
+				}
+			}
+		},
+		methods: {
+			async storeStripePaymentMethod() {
+
+				this.stripeData.storingStripePaymentMethod = true
+
+				const {error} = await stripe.confirmSetup({
+					//`Elements` instance that was used to create the Payment Element
+					elements,
+					redirect: 'if_required',
+					confirmParams: {
+						return_url: window.location.href,
+					}
+				});
+
+				if (error) {
+					// This point will only be reached if there is an immediate error when
+					// confirming the payment. Show error to your customer (e.g., payment
+					// details incomplete)
+					const messageContainer = document.querySelector('#error-message');
+					messageContainer.textContent = error.message;
+				} else {
+					// Your customer will be redirected to your `return_url`. For some payment
+					// methods like iDEAL, your customer will be redirected to an intermediate
+					// site first to authorize the payment, then redirected to the `return_url`.
+					events.$emit('toaster', {
+						type: 'success',
+						message: this.$t('Your credit card was stored successfully'),
+					})
+
+					// TODO: L9 - load credit card after was stored in database
+				}
+
+				this.stripeData.storingStripePaymentMethod = false
+			},
+			async stripeInit() {
+
+				// Init stripe js
+				stripe = await loadStripe(this.config.stripe_public_key);
+
+				await axios.get('/api/stripe/setup-intent')
+					.then(response => {
+						// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 2
+						elements = stripe.elements({
+							clientSecret: response.data.client_secret,
+							appearance: {
+								theme: 'stripe',
+								variables: {
+									colorPrimary: this.config.app_color,
+									fontFamily: 'Nunito',
+									borderRadius: '8px',
+									colorText: this.isDarkMode ? '#bec6cf' : '#1B2539',
+									colorBackground: this.isDarkMode ? '#191b1e' : '#fff',
+									fontWeightNormal: '700',
+									fontSizeSm: '0.875rem',
+									colorSuccessText: '#0ABB87',
+									colorSuccess: '#0ABB87',
+									colorWarning: '#fd397a',
+									colorWarningText: '#fd397a',
+									colorDangerText: '#fd397a',
+									colorTextSecondary: '#6b7280',
+									spacingGridRow: '20px',
+								}
+							},
+						});
+
+						// Create and mount the Payment Element
+						const paymentElement = elements.create('payment');
+
+						paymentElement.mount('#payment-element');
+					})
+					.catch(() => {
+						events.$emit('toaster', {
+							type: 'danger',
+							message: this.$t('popup_error.title'),
+						})
+					})
+
+				this.stripeData.isInitialization = false
+			},
+			showStoreCreditCardForm() {
+				this.isCreditCardForm = !this.isCreditCardForm
+				this.stripeInit()
+			}
+		}
+	}
+</script>
\ No newline at end of file
diff --git a/resources/js/components/Subscription/UserTransactionsForFixedBilling.vue b/resources/js/components/Subscription/UserTransactionsForFixedBilling.vue
new file mode 100644
index 00000000..8891c880
--- /dev/null
+++ b/resources/js/components/Subscription/UserTransactionsForFixedBilling.vue
@@ -0,0 +1,90 @@
+<template>
+	<div class="card shadow-card">
+		<FormLabel icon="file-text">
+			{{ $t('Transactions') }}
+		</FormLabel>
+
+		<DatatableWrapper
+			api="/api/subscriptions/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>
+</template>
+<script>
+import ColorLabel from "../Others/ColorLabel"
+import DatatableWrapper from "../Others/Tables/DatatableWrapper"
+import FormLabel from "../Others/Forms/FormLabel"
+import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
+
+export default {
+	name: 'UserTransactionsForFixedBilling',
+	components: {ColorLabel, DatatableWrapper, FormLabel, InfoBox},
+	data() {
+		return {
+			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>
\ No newline at end of file
diff --git a/resources/js/components/Subscription/UserTransactionsForMeteredBilling.vue b/resources/js/components/Subscription/UserTransactionsForMeteredBilling.vue
new file mode 100644
index 00000000..e3f34f31
--- /dev/null
+++ b/resources/js/components/Subscription/UserTransactionsForMeteredBilling.vue
@@ -0,0 +1,105 @@
+<template>
+	<div class="card shadow-card">
+		<FormLabel icon="file-text">
+			{{ $t('Transactions') }}
+		</FormLabel>
+
+		<DatatableWrapper
+			api="/api/subscriptions/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 class="capitalize" :color="$getTransactionStatusColor(row.data.attributes.status)">
+							{{ row.data.attributes.status }}
+						</ColorLabel>
+					</td>
+					<td class="py-4">
+						<span class="text-sm font-bold capitalize">
+							{{ $t(row.data.attributes.type) }}
+						</span>
+					</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>
+</template>
+<script>
+import ColorLabel from "../Others/ColorLabel"
+import DatatableWrapper from "../Others/Tables/DatatableWrapper"
+import FormLabel from "../Others/Forms/FormLabel"
+import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
+
+export default {
+	name: 'UserTransactionsForMeteredBilling',
+	components: {
+		ColorLabel,
+		DatatableWrapper,
+		FormLabel,
+		InfoBox
+	},
+	data() {
+		return {
+			columns: [
+				{
+					label: this.$t('Note'),
+					field: 'note',
+					sortable: true
+				},
+				{
+					label: this.$t('Status'),
+					field: 'status',
+					sortable: true
+				},
+				{
+					label: this.$t('Type'),
+					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>
\ No newline at end of file
diff --git a/resources/js/components/Subscription/UserUpdatePaymentMethodsExternally.vue b/resources/js/components/Subscription/UserUpdatePaymentMethodsExternally.vue
new file mode 100644
index 00000000..dd017df1
--- /dev/null
+++ b/resources/js/components/Subscription/UserUpdatePaymentMethodsExternally.vue
@@ -0,0 +1,59 @@
+<template>
+	<div v-if="['paystack', 'paypal'].includes(subscription.attributes.driver)" class="card shadow-card">
+		<FormLabel>
+			{{ $t('Update Payments') }}
+		</FormLabel>
+
+		<AppInputSwitch :title="$t('Update your Payment Method')" :description="$t('You will be redirected to your payment provider to edit your payment method.')" :is-last="true">
+			<ButtonBase @click.native="updatePaymentMethod" :loading="isGeneratedUpdateLink" class="sm:w-auto w-full" button-style="theme">
+				{{ $t('Update Payments') }}
+			</ButtonBase>
+		</AppInputSwitch>
+	</div>
+</template>
+
+<script>
+	import AppInputSwitch from "../Admin/AppInputSwitch"
+	import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
+	import FormLabel from "../Others/Forms/FormLabel"
+	import axios from "axios";
+	import {events} from "../../bus";
+
+	export default {
+		name: 'UserUpdatePaymentMethodsExternally',
+		components: {
+			AppInputSwitch,
+			ButtonBase,
+			FormLabel
+		},
+		computed: {
+			subscription() {
+				return this.$store.getters.user.data.relationships.subscription.data
+			}
+		},
+		data() {
+			return {
+				isGeneratedUpdateLink: false,
+			}
+		},
+		methods: {
+			updatePaymentMethod() {
+
+				this.isGeneratedUpdateLink = true
+
+				axios.post(`/api/subscriptions/edit/${this.subscription.id}`)
+					.then(response => {
+						window.location = response.data.url
+					})
+					.catch(() => {
+						events.$emit('toaster', {
+							type: 'danger',
+							message: this.$t('popup_error.title'),
+						})
+
+						this.isGeneratedUpdateLink = false
+					})
+			},
+		}
+	}
+</script>
\ No newline at end of file
diff --git a/resources/js/components/Subscription/UserUsageEstimates.vue b/resources/js/components/Subscription/UserUsageEstimates.vue
new file mode 100644
index 00000000..70849c66
--- /dev/null
+++ b/resources/js/components/Subscription/UserUsageEstimates.vue
@@ -0,0 +1,54 @@
+<template>
+	<div class="card shadow-card">
+		<FormLabel icon="bar-chart">
+			{{ $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 sm:block hidden">
+						{{ $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>
+</template>
+<script>
+import FormLabel from "../Others/Forms/FormLabel"
+import {mapGetters} from "vuex";
+
+export default {
+	name: 'UserUsageEstimates',
+	components: {
+		FormLabel
+	},
+	computed: {
+		...mapGetters([
+			'user',
+		])
+	},
+}
+</script>
\ No newline at end of file
diff --git a/resources/js/routes/routesUser.js b/resources/js/routes/routesUser.js
index 09561796..0dea746e 100644
--- a/resources/js/routes/routesUser.js
+++ b/resources/js/routes/routesUser.js
@@ -39,45 +39,15 @@ const routesUser = [
 				},
 			},
 			{
-				name: 'Subscription',
-				path: '/user/settings/subscription',
-				component: () =>
-					import(/* webpackChunkName: "chunks/settings-subscription" */ '../views/User/Subscription'),
-				meta: {
-					requiresAuth: true,
-					title: 'routes_title.subscription'
-				},
-			},
-			{
-				name: 'MeteredSubscription',
+				name: 'Billing',
 				path: '/user/settings/billing',
 				component: () =>
-					import(/* webpackChunkName: "chunks/settings-subscription" */ '../views/User/MeteredSubscription'),
+					import(/* webpackChunkName: "chunks/billing" */ '../views/User/Billing'),
 				meta: {
 					requiresAuth: true,
 					title: 'routes_title.subscription'
 				},
 			},
-			{
-				name: 'PaymentMethods',
-				path: '/user/settings/payment-methods',
-				component: () =>
-					import(/* webpackChunkName: "chunks/settings-payment-methods" */ '../views/User/PaymentMethods'),
-				meta: {
-					requiresAuth: true,
-					title: 'routes_title.payment_methods'
-				},
-			},
-			{
-				name: 'CreatePaymentMethod',
-				path: '/user/settings/create-payment-method',
-				component: () =>
-					import(/* webpackChunkName: "chunks/settings-create-payment-methods" */ '../views/User/CreatePaymentMethod'),
-				meta: {
-					requiresAuth: true,
-					title: 'Create Payment Method'
-				},
-			},
 		]
 	},
 	{
diff --git a/resources/js/views/Profile.vue b/resources/js/views/Profile.vue
index 3b9423a3..863a2279 100644
--- a/resources/js/views/Profile.vue
+++ b/resources/js/views/Profile.vue
@@ -138,26 +138,7 @@
                 return this.user.data.attributes.incomplete_payment
             },
 			pages() {
-				let fixedSubscription = [
-					{
-						title: this.$t('menu.profile'),
-						route: 'Profile',
-					},
-					{
-						title: this.$t('menu.password'),
-						route: 'Password',
-					},
-					{
-						title: this.$t('menu.storage'),
-						route: 'Storage',
-					},
-					{
-						title: this.$t('menu.subscription'),
-						route: 'Subscription',
-					},
-				]
-
-				let meteredSubscription = [
+				return [
 					{
 						title: this.$t('menu.profile'),
 						route: 'Profile',
@@ -172,14 +153,9 @@
 					},
 					{
 						title: this.$t('Billing'),
-						route: 'MeteredSubscription',
+						route: 'Billing',
 					},
 				]
-
-				return {
-					fixed: fixedSubscription,
-					metered: meteredSubscription,
-				}[this.config.subscriptionType]
 			}
         },
         data() {
@@ -188,6 +164,9 @@
                 isLoading: false,
             }
         },
+		created() {
+			// setTimeout(() => this.$openUpgradeOptions(), 300)
+		}
 	}
 </script>
 
diff --git a/resources/js/views/User/Billing.vue b/resources/js/views/User/Billing.vue
new file mode 100644
index 00000000..04d0dca7
--- /dev/null
+++ b/resources/js/views/User/Billing.vue
@@ -0,0 +1,86 @@
+<template>
+    <PageTab>
+		<!-- Metered subscription components -->
+		<div v-if="config.subscriptionType === 'metered'">
+			<!--Failed Payments-->
+			<UserFailedPayments />
+
+			<!--Balance-->
+			<UserBalance/>
+
+			<!--Usage Estimates-->
+			<UserUsageEstimates />
+
+			<!--Billing Alert-->
+			<UserBillingAlerts />
+
+			<!-- Payment method for automatically handle payments - only for Stripe -->
+			<UserStoredPaymentMethods />
+
+			<!--Transactions-->
+			<UserTransactionsForMeteredBilling />
+		</div>
+
+		<!-- Fixed subscription components -->
+		<div v-if="config.subscriptionType === 'fixed'">
+
+			<!-- Subscription Detail -->
+			<UserFixedSubscriptionDetail />
+
+			<!-- Payment method for automatically handle payments - only for Stripe -->
+			<UserStoredPaymentMethods />
+
+			<!-- Update payment in external source -->
+			<UserUpdatePaymentMethodsExternally />
+
+			<!-- Edit subscription -->
+			<UserEditSubscription />
+
+			<!-- Transactions -->
+			<UserTransactionsForFixedBilling />
+
+			<!-- Empty subscription -->
+			<UserEmptySubscription />
+		</div>
+
+    </PageTab>
+</template>
+
+<script>
+	import UserUpdatePaymentMethodsExternally from "../../components/Subscription/UserUpdatePaymentMethodsExternally"
+	import UserTransactionsForMeteredBilling from "../../components/Subscription/UserTransactionsForMeteredBilling"
+	import UserTransactionsForFixedBilling from "../../components/Subscription/UserTransactionsForFixedBilling"
+	import UserFixedSubscriptionDetail from "../../components/Subscription/UserFixedSubscriptionDetail"
+	import UserStoredPaymentMethods from "../../components/Subscription/UserStoredPaymentMethods"
+	import UserEmptySubscription from "../../components/Subscription/UserEmptySubscription"
+	import UserEditSubscription from "../../components/Subscription/UserEditSubscription"
+	import UserFailedPayments from "../../components/Subscription/UserFailedPayments"
+	import UserUsageEstimates from "../../components/Subscription/UserUsageEstimates"
+	import UserBillingAlerts from "../../components/Subscription/UserBillingAlerts"
+	import PageTab from '/resources/js/components/Others/Layout/PageTab'
+	import UserBalance from "../../components/Subscription/UserBalance"
+	import {mapGetters} from 'vuex'
+
+	export default {
+		name: 'Billing',
+		components: {
+			UserUpdatePaymentMethodsExternally,
+			UserTransactionsForMeteredBilling,
+			UserTransactionsForFixedBilling,
+			UserFixedSubscriptionDetail,
+			UserStoredPaymentMethods,
+			UserEmptySubscription,
+			UserEditSubscription,
+			UserFailedPayments,
+			UserUsageEstimates,
+			UserBillingAlerts,
+			UserBalance,
+			PageTab,
+		},
+		computed: {
+			...mapGetters([
+				'config',
+			]),
+		},
+	}
+</script>
diff --git a/resources/js/views/User/CreatePaymentMethod.vue b/resources/js/views/User/CreatePaymentMethod.vue
deleted file mode 100644
index 7d2b315b..00000000
--- a/resources/js/views/User/CreatePaymentMethod.vue
+++ /dev/null
@@ -1,247 +0,0 @@
-<template>
-    <PageTab>
-        <PageTabGroup>
-            <div class="form block-form">
-                <FormLabel>{{ $t('user_payments.add_card') }}</FormLabel>
-
-                <!-- Register new credit card -->
-                <div class="register-card">
-                    <InfoBox v-if="config.isDemo || config.isDev">
-                        <p>For test your payment please use <b class="text-theme">4242 4242 4242 4242</b> or <b class="text-theme">5555 5555 5555 4444</b> as a card number, <b class="text-theme">11/22</b>
-                            as the expiration date and <b class="text-theme">123</b> as CVC number and ZIP <b class="text-theme">12345</b>.</p>
-                    </InfoBox>
-
-                    <div class="block-wrapper">
-                        <label>{{ $t('user_payments.card_field_title') }}:</label>
-                        <div ref="stripeCard" class="stripe-card" :class="{'is-error': isError }">
-                            <span class="loading">
-                                {{ $t('user_payments.field_loading') }}
-                            </span>
-                        </div>
-                        <div class="card-error-message" v-if="isError">
-                            <span>{{ errorMessage }}</span>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="block-wrapper">
-                    <div class="input-wrapper">
-                        <div class="inline-wrapper">
-                            <div class="switch-label">
-                                <label class="input-label">{{ $t('user_add_card.default_title') }}:</label>
-                                <small class="input-help">{{ $t('user_add_card.default_description') }}</small>
-                            </div>
-                            <SwitchInput v-model="defaultPaymentMethod" class="switch" :state="defaultPaymentMethod"/>
-                        </div>
-                    </div>
-                </div>
-
-                <ButtonBase @click.native="registerCard" :loading="isSubmitted" :button-style="isDisabledSubmit ? 'secondary' : 'theme'" type="submit">
-                    {{ $t('user_payments.store_card') }}
-                </ButtonBase>
-            </div>
-        </PageTabGroup>
-    </PageTab>
-</template>
-
-<script>
-    import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
-    import SwitchInput from '/resources/js/components/Others/Forms/SwitchInput'
-    import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
-    import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
-    import PageTab from '/resources/js/components/Others/Layout/PageTab'
-    import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
-    import {mapGetters} from 'vuex'
-    import {events} from '/resources/js/bus'
-    import axios from 'axios'
-
-    let [stripe, card] = [undefined, undefined];
-
-    export default {
-        name: 'CreatePaymentMethod',
-        components: {
-            PageTabGroup,
-            SwitchInput,
-            ButtonBase,
-            FormLabel,
-            PageTab,
-            InfoBox,
-        },
-        computed: {
-            ...mapGetters(['config']),
-        },
-        data() {
-            return {
-                errorMessage: undefined,
-                isError: false,
-
-                stripeOptions: {
-                    hidePostalCode: false
-                },
-
-                isSubmitted: false,
-                isDisabledSubmit: true,
-
-                defaultPaymentMethod: true,
-                clientSecret: undefined,
-            }
-        },
-        methods: {
-            async registerCard() {
-
-                // Prevent empty submit
-                if (! stripe && !card && ! this.$refs.stripeCard.classList.contains('StripeElement')) return
-
-                // Start loading
-                this.isSubmitted = true
-
-                const {setupIntent, error} = await stripe.confirmCardSetup(this.clientSecret, {
-                    payment_method: {
-                        card: card,
-                    }
-                })
-
-                if (setupIntent) {
-
-                    axios
-                        .post('/api/user/subscription/payment-cards', {
-                            token: setupIntent.payment_method,
-                            default: this.defaultPaymentMethod,
-                        })
-                        .then(() => {
-
-                            // Show toaster
-                            events.$emit('toaster', {
-                                type: 'success',
-                                message: this.$t('toaster.card_new_add'),
-                            })
-
-                            // Go to payment methods page
-                            this.$router.push({name: 'PaymentMethods'})
-                        })
-                        .catch(() => {
-                            events.$emit('alert:open', {
-                                title: this.$t('popup_error.title'),
-                                message: this.$t('popup_error.message'),
-                            })
-                        })
-                        .finally(() => {
-                            this.isSubmitted = false
-                        })
-                }
-
-                if (error) {
-
-                    // Set error on
-                    this.isError = true
-
-                    // End button spinner
-                    this.isSubmitted = false
-
-                    // Show error message
-                    this.errorMessage = error.message
-                }
-            },
-            initStripe() {
-                stripe = Stripe(this.config.stripe_public_key)
-
-                let elements = stripe.elements();
-
-                card = elements.create('card');
-
-                card.mount(this.$refs.stripeCard);
-
-                this.isDisabledSubmit = false
-            },
-        },
-        mounted() {
-            let StripeElementsScript = document.createElement('script')
-
-            StripeElementsScript.setAttribute('src', 'https://js.stripe.com/v3/')
-            document.head.appendChild(StripeElementsScript)
-
-            // Get setup intent for stripe
-            axios.get('/api/user/subscription/setup-intent')
-                .then(response => {
-                    this.clientSecret = response.data.client_secret
-
-                    this.initStripe()
-                })
-        },
-    }
-</script>
-
-<style lang="scss" scoped>
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-    @import '/resources/sass/vuefilemanager/_forms';
-
-    .register-card {
-        margin-bottom: 25px;
-    }
-
-    .stripe-card {
-        box-sizing: border-box;
-        padding: 13px 20px;
-
-        border: 1px solid transparent;
-        border-radius: 4px;
-        background-color: white;
-
-        box-shadow: 0 1px 3px 0 #e6ebf1;
-        -webkit-transition: box-shadow 150ms ease;
-        transition: box-shadow 150ms ease;
-
-
-        &:not(.StripeElement) {
-            background: $light_background;
-            padding: 14px 20px;
-
-            .loading {
-                @include font-size(14);
-                font-weight: 700;
-            }
-        }
-
-        &.is-error {
-            box-shadow: 0 0 7px rgba($danger, 0.3);
-            border: 2px solid $danger;
-            border-radius: 4px;
-        }
-
-        &.StripeElement--focus {
-            box-shadow: 0 1px 3px 0 #cfd7df;
-        }
-
-        &.StripeElement--invalid {
-            border-color: #fa755a;
-        }
-
-        &.StripeElement--webkit-autofill {
-            background-color: #fefde5 !important;
-        }
-
-        iframe .InputContainer .InputElement {
-            color: white;
-        }
-    }
-
-    .card-error-message {
-        padding-top: 10px;
-
-        span, a {
-            @include font-size(14);
-            font-weight: 600;
-            color: $danger;
-        }
-
-        .link, a {
-            text-decoration: underline;
-            cursor: pointer;
-
-            &:hover {
-                text-decoration: none;
-            }
-        }
-    }
-</style>
diff --git a/resources/js/views/User/MeteredSubscription.vue b/resources/js/views/User/MeteredSubscription.vue
deleted file mode 100644
index 73b12f85..00000000
--- a/resources/js/views/User/MeteredSubscription.vue
+++ /dev/null
@@ -1,611 +0,0 @@
-<template>
-    <PageTab :is-loading="isLoading">
-
-		<!--Failed Payments-->
-		<div v-if="user.data.relationships.failedPayments && user.data.relationships.failedPayments.data.length > 0" class="card shadow-card">
-			<FormLabel icon="frown">
-                {{ $t('Failed Payments') }}
-            </FormLabel>
-
-			<b class="text-3xl text-red font-extrabold -mt-3 block mb-0.5">
-				-{{ user.data.meta.totalDebt }}
-			</b>
-
-			<b class="mb-3 block text-sm text-gray-400 mb-5">
-				{{ $t('We are unable to charge your usage for items below') }}
-			</b>
-
-			<!--Failed Payments-->
-			<div
-				v-for="payment in user.data.relationships.failedPayments.data"
-				:key="payment.data.id"
-				class="flex items-center justify-between py-2 border-b dark:border-opacity-5 border-light border-dashed"
-			>
-				<div class="w-2/4 leading-none">
-					<b class="text-sm font-bold leading-none">
-						{{ payment.data.attributes.note }}
-					</b>
-				</div>
-				<div class="text-left w-1/4">
-					<span class="text-sm font-bold text-gray-560 capitalize">
-						{{ $t(payment.data.attributes.source) }}
-					</span>
-				</div>
-				<div class="text-right w-1/4">
-					<span class="text-sm font-bold">
-						{{ payment.data.attributes.created_at }}
-					</span>
-				</div>
-				<div class="text-right w-1/4">
-					<span class="text-sm font-bold text-theme">
-						{{ payment.data.attributes.amount }}
-					</span>
-				</div>
-			</div>
-
-			<InfoBox type="error" class="mt-7" style="margin-bottom: 0">
-				<p v-html="$t('Uh-oh! We are unable to charge your usage. Please register new credit card or fund your account with sufficient amount and we\'ll give it another try!')"></p>
-			</InfoBox>
-		</div>
-
-		<!-- Balance -->
-		<div v-if="! hasPaymentMethod" class="card shadow-card">
-			<FormLabel icon="dollar">
-                {{ $t('Balance') }}
-            </FormLabel>
-
-			<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
-				{{ user.data.relationships.balance.data.attributes.formatted }}
-			</b>
-
-			<!-- Make payment form -->
-			<ValidationObserver ref="fundAccount" @submit.prevent="makePayment" v-slot="{ invalid }" tag="form" class="mt-6">
-				<ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Capacity" rules="required">
-					<AppInputText :description="$t('The amount will be increased as soon as we register your charge from payment gateway.')" :error="errors[0]" :is-last="true">
-						<div class="sm:flex sm:space-x-4 sm:space-y-0 space-y-4">
-							<input v-model="chargeAmount"
-								   :placeholder="$t('Fund Your Account Balance...')"
-								   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="sm:w-auto w-full">
-								{{ $t('Make a Payment') }}
-							</ButtonBase>
-						</div>
-					</AppInputText>
-				</ValidationProvider>
-			</ValidationObserver>
-		</div>
-
-		<!--Usage Estimates-->
-		<div class="card shadow-card">
-			<FormLabel icon="bar-chart">
-                {{ $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 sm:block hidden">
-							{{ $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>
-
-		<!--Billing Alert-->
-		<div class="card shadow-card">
-			<FormLabel icon="bell">
-                {{ $t('Billing Alert') }}
-            </FormLabel>
-
-			<div v-if="user.data.relationships.alert">
-				<b class="text-3xl font-extrabold -mt-3 block mb-0.5 flex items-center">
-					{{ user.data.relationships.alert.data.attributes.formatted }}
-					<edit2-icon v-if="! showUpdateBillingAlertForm" @click="showUpdateBillingAlertForm = ! showUpdateBillingAlertForm" size="12" class="vue-feather cursor-pointer ml-2 transform -translate-y-0.5" />
-					<trash2-icon v-if="showUpdateBillingAlertForm" @click="deleteBillingAlert" size="12" class="vue-feather cursor-pointer ml-2 transform -translate-y-0.5" />
-				</b>
-
-				<b class="block text-sm text-gray-400">
-					{{ $t('Alert will be triggered after you reach the value above.') }}
-				</b>
-			</div>
-
-			<ValidationObserver v-if="showUpdateBillingAlertForm" ref="updatebillingAlertForm" @submit.prevent="updateBillingAlert" v-slot="{ invalid }" tag="form" class="mt-6">
-                <ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Billing Alert" rules="required">
-					<AppInputText :description="$t('You will receive an email whenever your monthly balance reaches the specified amount above.')" :error="errors[0]" :is-last="true">
-						<div class="sm:flex sm:space-x-4 sm:space-y-0 space-y-4">
-							<input v-model="billingAlertAmount"
-								   :placeholder="$t('Alert Amount...')"
-								   type="number"
-								   min="1"
-								   max="999999999"
-								   class="focus-border-theme input-dark"
-								   :class="{'border-red-700': errors[0]}"
-							/>
-							<ButtonBase :loadint="isSendingBillingAlert" :disabled="isSendingBillingAlert" type="submit" button-style="theme" class="sm:w-auto w-full">
-								{{ $t('Update Alert') }}
-							</ButtonBase>
-						</div>
-					</AppInputText>
-                </ValidationProvider>
-            </ValidationObserver>
-
-			<ValidationObserver v-if="! user.data.relationships.alert" ref="billingAlertForm" @submit.prevent="setBillingAlert" v-slot="{ invalid }" tag="form" class="mt-6">
-                <ValidationProvider tag="div" v-slot="{ errors }" mode="passive" name="Billing Alert" rules="required">
-					<AppInputText :description="$t('You will receive an email whenever your monthly balance reaches the specified amount above.')" :error="errors[0]" :is-last="true">
-						<div class="flex space-x-4">
-							<input v-model="billingAlertAmount"
-								   :placeholder="$t('Alert Amount...')"
-								   type="number"
-								   min="1"
-								   max="999999999"
-								   class="focus-border-theme input-dark"
-								   :class="{'border-red-700': errors[0]}"
-							/>
-							<ButtonBase :loadint="isSendingBillingAlert" :disabled="isSendingBillingAlert" type="submit" button-style="theme" class="submit-button">
-								{{ $t('Set Alert') }}
-							</ButtonBase>
-						</div>
-					</AppInputText>
-                </ValidationProvider>
-            </ValidationObserver>
-		</div>
-
-		<!-- Payment method for automatically handle payments - only for Stripe -->
-		<div v-if="config.isStripe" class="card shadow-card">
-			<FormLabel icon="credit-card">
-                {{ $t('Payment Method') }}
-            </FormLabel>
-
-			<!-- User doesn't have registered payment method -->
-			<div v-if="! hasPaymentMethod">
-				<!-- Show credit card form -->
-				<ButtonBase @click.native="showStoreCreditCardForm" v-if="! isCreditCardForm" :loading="stripeData.storingStripePaymentMethod" type="submit" button-style="theme" class="w-full mt-4">
-					{{ $t('Add Auto Payment Method') }}
-				</ButtonBase>
-
-				<!-- Store credit card form -->
-				<form v-if="isCreditCardForm" @submit.prevent="storeStripePaymentMethod" id="payment-form" class="mt-6">
-					<div v-if="stripeData.isInitialization" class="h-10 relative mb-6">
-						<Spinner />
-					</div>
-					<div id="payment-element">
-					<!-- Elements will create form elements here -->
-					</div>
-					<ButtonBase :loading="stripeData.storingStripePaymentMethod" type="submit" button-style="theme" class="w-full mt-4">
-						{{ $t('Store My Credit Card') }}
-					</ButtonBase>
-					<div id="error-message">
-						<!-- Display error message to your customers here -->
-					</div>
-				</form>
-			</div>
-
-			<!-- User has registered payment method -->
-			<div v-if="hasPaymentMethod">
-				<b v-if="user.data.relationships.balance.data.attributes.balance > 0" class="mb-3 block text-sm mb-5">
-					{{ $t('credit_to_auto_withdraw', {credit: user.data.relationships.balance.data.attributes.formatted}) }}
-				</b>
-
-				<!-- Card -->
-				<div
-					v-for="card in user.data.relationships.creditCards.data"
-					:key="card.data.id"
-					class="flex items-center justify-between py-3 px-4 input-dark"
-				>
-					<div class="flex items-center">
-						<img :src="`/assets/gateways/${card.data.attributes.brand}.svg`" alt="" class="h-5 mr-3 rounded">
-						<b class="text-sm font-bold leading-none capitalize">
-							{{ card.data.attributes.brand }} •••• {{ card.data.attributes.last4 }}
-						</b>
-					</div>
-					<b class="text-sm font-bold leading-none">
-						{{ $t('Expires') }} {{ card.data.attributes.expiration }}
-					</b>
-					<Trash2Icon @click="deleteCreditCard(card.data.id)" size="15" class="cursor-pointer" />
-				</div>
-
-				<small class="text-xs text-gray-500 pt-3 leading-none sm:block hidden">
-					{{ $t('We are settling your payment automatically via your saved credit card.') }}
-				</small>
-			</div>
-		</div>
-
-		<!--Transactions-->
-		<div class="card shadow-card">
-			<FormLabel icon="file-text">
-                {{ $t('Transactions') }}
-            </FormLabel>
-
-			<DatatableWrapper
-				@init="isLoading = false"
-				api="/api/subscriptions/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 class="capitalize" :color="$getTransactionStatusColor(row.data.attributes.status)">
-                                {{ row.data.attributes.status }}
-							</ColorLabel>
-                        </td>
-						<td class="py-4">
-                            <span class="text-sm font-bold capitalize">
-								{{ $t(row.data.attributes.type) }}
-							</span>
-                        </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 {
-		CreditCardIcon,
-		XIcon,
-		Trash2Icon,
-		Edit2Icon,
-	} from "vue-feather-icons";
-	import Spinner from "../../components/FilesView/Spinner";
-	import ColorLabel from "../../components/Others/ColorLabel";
-	import DatatableWrapper from "../../components/Others/Tables/DatatableWrapper";
-	import AppInputText from "../../components/Admin/AppInputText";
-	import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
-	import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
-	import PageTab from '/resources/js/components/Others/Layout/PageTab'
-	import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
-	import AppInputSwitch from "../../components/Admin/AppInputSwitch"
-	import FormLabel from "../../components/Others/Forms/FormLabel"
-	import ProgressLine from "../../components/Admin/ProgressLine"
-	import {mapGetters} from 'vuex'
-	import axios from 'axios'
-	import {events} from "../../bus"
-	import {loadStripe} from '@stripe/stripe-js'
-
-	// Define stripe variables
-	let stripe, elements = undefined
-
-	export default {
-		name: 'MeteredSubscription',
-		components: {
-			CreditCardIcon,
-			DatatableWrapper,
-			ValidationProvider,
-			ValidationObserver,
-			AppInputSwitch,
-			AppInputText,
-			ProgressLine,
-			ButtonBase,
-			ColorLabel,
-			Trash2Icon,
-			Edit2Icon,
-			XIcon,
-			FormLabel,
-			InfoBox,
-			PageTab,
-			Spinner,
-		},
-		computed: {
-			...mapGetters([
-				'isDarkMode',
-				'config',
-				'user',
-			]),
-			hasPaymentMethod() {
-				return this.user.data.relationships.creditCards && this.user.data.relationships.creditCards.data.length > 0
-			},
-		},
-		data() {
-			return {
-				isLoading: false,
-
-				isSendingBillingAlert: false,
-				billingAlertAmount: undefined,
-				showUpdateBillingAlertForm: false,
-
-				columns: [
-					{
-						label: this.$t('Note'),
-						field: 'note',
-						sortable: true
-					},
-					{
-						label: this.$t('Status'),
-						field: 'status',
-						sortable: true
-					},
-					{
-						label: this.$t('Type'),
-						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
-					},
-				],
-
-				chargeAmount: undefined,
-				isCreditCardForm: false,
-
-				stripeData: {
-					isInitialization: true,
-					storingStripePaymentMethod: false
-				}
-			}
-		},
-		methods: {
-			async updateBillingAlert() {
-
-				// Validate fields
-				const isValid = await this.$refs.updatebillingAlertForm.validate();
-
-				if (!isValid) return;
-
-				this.isSendingBillingAlert = true
-
-				axios
-					.patch(`/api/subscriptions/billing-alerts/${this.user.data.relationships.alert.data.id}`, {
-						amount: this.billingAlertAmount
-					})
-					.then(() => {
-						this.$store.dispatch('getAppData')
-
-						this.showUpdateBillingAlertForm = false
-
-						events.$emit('toaster', {
-							type: 'success',
-							message: this.$t('Your billing alert was updated successfully'),
-						})
-					})
-					.catch(() => {
-						events.$emit('toaster', {
-							type: 'danger',
-							message: this.$t('popup_error.title'),
-						})
-					})
-					.finally(() => {
-						this.isSendingBillingAlert = false
-					})
-			},
-			async setBillingAlert() {
-
-				// Validate fields
-				const isValid = await this.$refs.billingAlertForm.validate();
-
-				if (!isValid) return;
-
-				this.isSendingBillingAlert = true
-
-				axios
-					.post('/api/subscriptions/billing-alerts', {
-						amount: this.billingAlertAmount
-					})
-					.then(() => {
-						this.$store.dispatch('getAppData')
-
-						events.$emit('toaster', {
-							type: 'success',
-							message: this.$t('Your billing alert was set successfully'),
-						})
-					})
-					.catch(() => {
-						events.$emit('toaster', {
-							type: 'danger',
-							message: this.$t('popup_error.title'),
-						})
-					})
-					.finally(() => {
-						this.isSendingBillingAlert = false
-					})
-			},
-			async makePayment() {
-				// Validate fields
-				const isValid = await this.$refs.fundAccount.validate();
-
-				if (!isValid) return;
-
-				// Show payment methods popup
-				this.$store.dispatch('callSingleChargeProcess', this.chargeAmount)
-			},
-			async storeStripePaymentMethod() {
-
-				this.stripeData.storingStripePaymentMethod = true
-
-				const {error} = await stripe.confirmSetup({
-					//`Elements` instance that was used to create the Payment Element
-					elements,
-					redirect: 'if_required',
-					confirmParams: {
-						return_url: window.location.href,
-					}
-				});
-
-				if (error) {
-					// This point will only be reached if there is an immediate error when
-					// confirming the payment. Show error to your customer (e.g., payment
-					// details incomplete)
-					const messageContainer = document.querySelector('#error-message');
-					messageContainer.textContent = error.message;
-				} else {
-					// Your customer will be redirected to your `return_url`. For some payment
-					// methods like iDEAL, your customer will be redirected to an intermediate
-					// site first to authorize the payment, then redirected to the `return_url`.
-					events.$emit('toaster', {
-						type: 'success',
-						message: this.$t('Your credit card was stored successfully'),
-					})
-
-					// TODO: L9 - load credit card after was stored in database
-				}
-
-				this.stripeData.storingStripePaymentMethod = false
-			},
-			async stripeInit() {
-
-				// Init stripe js
-				stripe = await loadStripe(this.config.stripe_public_key);
-
-				await axios.get('/api/stripe/setup-intent')
-					.then(response => {
-						// Set up Stripe.js and Elements to use in checkout form, passing the client secret obtained in step 2
-						elements = stripe.elements({
-							clientSecret: response.data.client_secret,
-							appearance: {
-								theme: 'stripe',
-								variables: {
-									colorPrimary: this.config.app_color,
-									fontFamily: 'Nunito',
-									borderRadius: '8px',
-									colorText: this.isDarkMode ? '#bec6cf' : '#1B2539',
-									colorBackground: this.isDarkMode ? '#191b1e' : '#fff',
-									fontWeightNormal: '700',
-									fontSizeSm: '0.875rem',
-									colorSuccessText: '#0ABB87',
-									colorSuccess: '#0ABB87',
-									colorWarning: '#fd397a',
-									colorWarningText: '#fd397a',
-									colorDangerText: '#fd397a',
-									colorTextSecondary: '#6b7280',
-									spacingGridRow: '20px',
-								}
-							},
-						});
-
-						// Create and mount the Payment Element
-						const paymentElement = elements.create('payment');
-
-						paymentElement.mount('#payment-element');
-					})
-					.catch(() => {
-						events.$emit('toaster', {
-							type: 'danger',
-							message: this.$t('popup_error.title'),
-						})
-					})
-
-				this.stripeData.isInitialization = false
-			},
-			deleteBillingAlert() {
-				events.$emit('confirm:open', {
-					title: this.$t('Are you sure you want to delete your alert?'),
-					message: this.$t('You will no longer receive any notifications that your billing limit has been exceeded.'),
-					action: {
-						id: this.user.data.relationships.alert.data.id,
-						operation: 'delete-billing-alert',
-					}
-				})
-			},
-			deleteCreditCard(id) {
-				events.$emit('confirm:open', {
-					title: this.$t('Are you sure you want to delete your credit card?'),
-					message: this.$t('We will no longer settle your payments automatically and you will have to fund your account for the next payments.'),
-					action: {
-						id: id,
-						operation: 'delete-credit-card',
-					}
-				})
-			},
-			showStoreCreditCardForm() {
-				this.isCreditCardForm = !this.isCreditCardForm
-				this.stripeInit()
-			}
-		},
-		created() {
-			events.$on('action:confirmed', data => {
-
-				if (data.operation === 'delete-billing-alert')
-					axios.delete(`/api/subscriptions/billing-alerts/${this.user.data.relationships.alert.data.id}`)
-						.then(() => {
-							this.$store.dispatch('getAppData')
-
-							this.showUpdateBillingAlertForm = false
-							this.billingAlertAmount = undefined
-
-							events.$emit('toaster', {
-								type: 'success',
-								message: this.$t('Your billing alert was deleted.'),
-							})
-						})
-						.catch(() => this.$isSomethingWrong())
-
-				if (data.operation === 'delete-credit-card')
-					axios.delete(`/api/stripe/credit-cards/${data.id}`)
-						.then(() => {
-							this.$store.dispatch('getAppData')
-
-							events.$emit('toaster', {
-								type: 'success',
-								message: this.$t('Your credit card was deleted.'),
-							})
-						})
-						.catch(() => this.$isSomethingWrong())
-			})
-		}
-	}
-</script>
diff --git a/resources/js/views/User/PaymentMethods.vue b/resources/js/views/User/PaymentMethods.vue
deleted file mode 100644
index 88d7a6f8..00000000
--- a/resources/js/views/User/PaymentMethods.vue
+++ /dev/null
@@ -1,276 +0,0 @@
-<template>
-    <PageTab :is-loading="isLoading">
-        <PageTabGroup>
-
-            <!--Page title-->
-            <FormLabel>{{ $t('user_payments.title') }}</FormLabel>
-
-            <!--Add payment method button-->
-            <div class="page-actions" v-if="PaymentMethods && PaymentMethods.length > 0">
-                <router-link :to="{name: 'CreatePaymentMethod'}">
-                    <MobileActionButton icon="credit-card">
-                        {{ $t('user_payments.add_card') }}
-                    </MobileActionButton>
-                </router-link>
-            </div>
-
-            <!--Payment methods table-->
-            <DatatableWrapper v-if="PaymentMethods" :table-data="{data: PaymentMethods}" :paginator="false" :columns="columns" class="table">
-
-                <!--Table data content-->
-                <template slot-scope="{ row }">
-                    <tr :class="{'is-deleting': row.data.attributes.card_id === deletingID}">
-                        <td style="width: 300px">
-                            <span class="cell-item">
-                                <div class="credit-card">
-                                    <img class="credit-card-icon" :src="$getCreditCardBrand(row.data.attributes.brand)"
-                                         :alt="row.data.attributes.brand">
-                                    <div class="credit-card-numbers">
-                                        •••• {{ row.data.attributes.last4 }}
-                                    </div>
-                                    <ColorLabel v-if="row.data.id === defaultPaymentCard.data.id" color="purple">{{ $t('global.default') }}</ColorLabel>
-                                </div>
-                            </span>
-                        </td>
-                        <td>
-                            <span class="cell-item">
-                                {{ row.data.attributes.exp_month }} / {{ row.data.attributes.exp_year }}
-                            </span>
-                        </td>
-                        <td>
-                            <div class="action-icons">
-                                <label class="icon-wrapper" :title="$t('user_payments.set_as_default')">
-                                    <credit-card-icon size="15" class="icon icon-card" @click="setDefaultCard(row.data.attributes)"  v-if="row.data.id !== defaultPaymentCard.data.id"></credit-card-icon>
-                                </label>
-                                <label class="icon-wrapper" :title="$t('user_payments.delete_card')">
-                                    <trash2-icon size="15" class="icon icon-trash" @click="deleteCard(row.data.attributes)"></trash2-icon>
-                                </label>
-                            </div>
-                        </td>
-                    </tr>
-                </template>
-
-                <!--Empty page-->
-                <template v-slot:empty-page>
-                    <InfoBox>
-                        <p>{{ $t('user_payments.empty') }} <router-link v-if="user.data.attributes.stripe_customer" :to="{name: 'CreatePaymentMethod'}" class="text-theme">Add new payment method.</router-link> </p>
-                    </InfoBox>
-                </template>
-            </DatatableWrapper>
-        </PageTabGroup>
-    </PageTab>
-</template>
-
-<script>
-    import MobileActionButton from '/resources/js/components/FilesView/MobileActionButton'
-    import DatatableWrapper from '/resources/js/components/Others/Tables/DatatableWrapper'
-    import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
-    import {CreditCardIcon, Trash2Icon} from "vue-feather-icons"
-    import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
-    import PageTab from '/resources/js/components/Others/Layout/PageTab'
-    import ColorLabel from '/resources/js/components/Others/ColorLabel'
-    import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
-    import { mapGetters } from 'vuex'
-    import {events} from '/resources/js/bus'
-    import axios from 'axios'
-
-    export default {
-        name: 'UserPaymentMethods',
-        components: {
-            MobileActionButton,
-            DatatableWrapper,
-            CreditCardIcon,
-            PageTabGroup,
-            Trash2Icon,
-            ColorLabel,
-            FormLabel,
-            InfoBox,
-            PageTab,
-        },
-        computed: {
-            ...mapGetters(['user']),
-        },
-        data() {
-            return {
-                defaultPaymentCard: undefined,
-                PaymentMethods: undefined,
-                deletingID: undefined,
-                columns: [
-                    {
-                        label: this.$t('rows.card.number'),
-                        field: 'data.attributes.total',
-                        sortable: false
-                    },
-                    {
-                        label: this.$t('rows.card.expiration'),
-                        field: 'data.attributes.total',
-                        sortable: false
-                    },
-                    {
-                        label: this.$t('admin_page_user.table.action'),
-                        field: 'data.action',
-                        sortable: false
-                    },
-                ],
-                isLoading: true,
-            }
-        },
-        methods: {
-            getCardStatusColor(status) {
-                switch (status) {
-                    case 'active':
-                        return 'green'
-                    break
-                    case 'card_declined':
-                        return 'yellow'
-                    break
-                    case 'expired':
-                        return 'red'
-                    break
-                }
-            },
-            setDefaultCard(card) {
-                events.$emit('confirm:open', {
-                    title: this.$t('popup_set_card.title'),
-                    message: this.$t('popup_set_card.message'),
-                    buttonColor: 'theme-solid',
-                    action: {
-                        id: card.card_id,
-                        operation: 'set-as-default-credit-card'
-                    }
-                })
-            },
-            deleteCard(card) {
-                events.$emit('confirm:open', {
-                    title: this.$t('popup_delete_card.title'),
-                    message: this.$t('popup_delete_card.message'),
-                    action: {
-                        id: card.card_id,
-                        operation: 'delete-credit-card'
-                    }
-                })
-            },
-            fetchPaymentMethods() {
-                axios.get('/api/user/subscription/payment-cards')
-                    .then(response => {
-
-                        if (response.status == 204) {
-                            this.PaymentMethods = {}
-                        }
-
-                        if (response.status == 200) {
-                            this.defaultPaymentCard = response.data.default
-
-                            this.PaymentMethods = response.data.others.data
-                            this.PaymentMethods.push(response.data.default)
-                        }
-                    }).finally(() => {
-                        this.isLoading = false
-                    }
-                )
-            }
-        },
-        created() {
-
-            // Get payments card
-            this.fetchPaymentMethods()
-
-            // Delete credit card
-            events.$on('action:confirmed', data => {
-
-                if (data.operation === 'delete-credit-card') {
-
-                    this.deletingID = data.id
-
-                    axios.post('/api/user/subscription/payment-cards/' + data.id, {
-                        _method: 'delete'
-                    })
-                        .then(() => {
-
-                            // Get payments card
-                            this.fetchPaymentMethods()
-
-                            // Show toaster
-                            events.$emit('toaster', {
-                                type: 'success',
-                                message: this.$t('toaster.card_deleted'),
-                            })
-                        })
-                        .catch(() => {
-                            events.$emit('alert:open', {
-                                title: this.$t('popup_error.title'),
-                                message: this.$t('popup_error.message'),
-                            })
-                        })
-                }
-
-                if (data.operation === 'set-as-default-credit-card') {
-
-                    axios.post('/api/user/subscription/payment-cards/' + data.id, {
-                        default: 1,
-                        _method: 'patch'
-                    })
-                        .then(() => {
-
-                            // Get payments card
-                            this.fetchPaymentMethods()
-
-                            // Show toaster
-                            events.$emit('toaster', {
-                                type: 'success',
-                                message: this.$t('toaster.card_set'),
-                            })
-                        })
-                        .catch(() => {
-                            events.$emit('alert:open', {
-                                title: this.$t('popup_error.title'),
-                                message: this.$t('popup_error.message'),
-                            })
-                        })
-                }
-            })
-        },
-        destroyed() {
-            events.$off('action:confirmed')
-        }
-    }
-</script>
-
-<style lang="scss" scoped>
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-    @import '/resources/sass/vuefilemanager/_forms';
-
-    .is-deleting {
-        opacity: 0.35;
-    }
-
-    .credit-card {
-        display: flex;
-        align-items: center;
-
-        .credit-card-numbers {
-            margin-right: 10px;
-        }
-
-        .credit-card-icon {
-            max-height: 20px;
-            margin-right: 8px;
-        }
-    }
-
-    .page-actions {
-        margin-top: 45px;
-        margin-bottom: 10px;
-    }
-
-
-    @media only screen and (max-width: 960px) {
-
-    }
-
-    .dark {
-
-    }
-
-</style>
diff --git a/resources/js/views/User/Subscription.vue b/resources/js/views/User/Subscription.vue
deleted file mode 100644
index 60e6c2e3..00000000
--- a/resources/js/views/User/Subscription.vue
+++ /dev/null
@@ -1,299 +0,0 @@
-<template>
-    <PageTab :is-loading="isLoading">
-		<div v-if="subscription" class="card shadow-card">
-			<FormLabel>
-				{{ $t('Subscription') }}
-			</FormLabel>
-
-			<b class="text-3xl font-extrabold -mt-3 block mb-0.5">
-				{{ status }}
-			</b>
-			<b class="mb-3 block text-sm text-gray-400 mb-8">
-				{{ subscription.relationships.plan.data.attributes.name }} / {{ price }}
-			</b>
-
-			<div v-for="(limit, i) in limitations" :key="i" :class="{'mb-6': (Object.keys(limitations).length - 1) !== i}">
-				<b class="mb-3 block text-sm text-gray-400">
-					{{ limit.message }}
-				</b>
-				<ProgressLine :data="limit.distribution" />
-			</div>
-
-		</div>
-
-		<div v-if="subscription && ['paystack', 'paypal'].includes(subscription.attributes.driver)" class="card shadow-card">
-			<FormLabel>
-				{{ $t('Update Payments') }}
-			</FormLabel>
-
-			<AppInputSwitch :title="$t('Update your Payment Method')" :description="$t('You will be redirected to your payment provider to edit your payment method.')" :is-last="true">
-				<ButtonBase @click.native="updatePaymentMethod" :loading="isGeneratedUpdateLink" class="popup-button" button-style="theme">
-					{{ $t('Update Payments') }}
-				</ButtonBase>
-			</AppInputSwitch>
-		</div>
-
-		<div v-if="subscription" class="card shadow-card">
-			<FormLabel>
-				{{ $t('Edit your Subscription') }}
-			</FormLabel>
-
-			<AppInputSwitch :title="$t('Cancel Subscription')" :description="$t('You can cancel your subscription now. You\'ll continue to have access to the features you\'ve paid for until the end of your billing cycle.')">
-				<ButtonBase @click.native="cancelSubscriptionConfirmation" :loading="isCancelling" class="popup-button" button-style="secondary">
-					{{ $t('Cancel Now') }}
-				</ButtonBase>
-			</AppInputSwitch>
-
-			<AppInputSwitch :title="$t('Upgrade Plan')" :description="$t('You can upgrade your plan at any time you want.')" :is-last="true">
-				<ButtonBase @click.native="$openUpgradeOptions" class="popup-button" button-style="secondary">
-					{{ $t('Upgrade Now') }}
-				</ButtonBase>
-			</AppInputSwitch>
-		</div>
-
-		<!--Transactions-->
-		<div class="card shadow-card">
-			<FormLabel icon="file-text">
-                {{ $t('Transactions') }}
-            </FormLabel>
-
-			<DatatableWrapper
-				@init="isLoading = false"
-				api="/api/subscriptions/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>
-
-		<div v-if="! subscription && !isLoading" class="card shadow-card">
-			<InfoBox style="margin-bottom: 0">
-				<p>{{ $t("You don't have any subscription") }}</p>
-			</InfoBox>
-		</div>
-    </PageTab>
-</template>
-
-<script>
-	import DatatableWrapper from "../../components/Others/Tables/DatatableWrapper";
-	import ColorLabel from "../../components/Others/ColorLabel";
-	import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
-	import PageTab from '/resources/js/components/Others/Layout/PageTab'
-	import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
-	import AppInputSwitch from "../../components/Admin/AppInputSwitch"
-	import FormLabel from "../../components/Others/Forms/FormLabel"
-	import ProgressLine from "../../components/Admin/ProgressLine"
-	import {events} from '/resources/js/bus'
-	import {mapGetters} from 'vuex'
-	import axios from 'axios'
-
-	export default {
-		name: 'UserSubscription',
-		components: {
-			DatatableWrapper,
-			ColorLabel,
-			AppInputSwitch,
-			ProgressLine,
-			ButtonBase,
-			FormLabel,
-			InfoBox,
-			PageTab,
-		},
-		computed: {
-			...mapGetters([
-				'user',
-			]),
-			status() {
-				return {
-					'active': `Active until ${this.subscription.attributes.renews_at}`,
-					'cancelled': `Ends at ${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 {
-				isGeneratedUpdateLink: false,
-				subscription: undefined,
-				isCancelling: false,
-				limitations: [],
-				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
-					},
-				],
-			}
-		},
-		methods: {
-			updatePaymentMethod() {
-
-				this.isGeneratedUpdateLink = true
-
-				axios.post(`/api/subscriptions/edit/${this.subscription.id}`)
-					.then(response => {
-						window.location = response.data.url
-					})
-					.catch(() => {
-						events.$emit('toaster', {
-							type: 'danger',
-							message: this.$t('popup_error.title'),
-						})
-
-						this.isGeneratedUpdateLink = false
-					})
-			},
-			cancelSubscriptionConfirmation() {
-				events.$emit('confirm:open', {
-					title: this.$t('Are you sure you want to cancel subscription?'),
-					message: this.$t("You'll continue to have access to the features you've paid for until the end of your billing cycle."),
-					action: {
-						operation: 'cancel-subscription',
-					}
-				})
-			},
-			cancelSubscription() {
-
-				// Start deleting spinner button
-				this.isCancelling = true
-
-				// Send post request
-				axios
-					.post('/api/subscriptions/cancel')
-					.then(() => {
-
-						// Update user data
-						this.$store.dispatch('getAppData').then(() => {
-							this.fetchSubscriptionDetail()
-						})
-
-						events.$emit('toaster', {
-							type: 'success',
-							message: this.$t('popup_subscription_cancel.title'),
-						})
-					})
-					.catch(() => {
-						events.$emit('toaster', {
-							type: 'danger',
-							message: this.$t('popup_error.title'),
-						})
-					})
-					.finally(() => {
-						this.isCancelling = false
-					})
-			},
-			fetchSubscriptionDetail() {
-				axios.get('/api/subscriptions/detail')
-					.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
-					})
-					.finally(() => {
-						this.isLoading = false
-					})
-			}
-		},
-		created() {
-			this.fetchSubscriptionDetail()
-
-			events.$on('action:confirmed', data => {
-				if (data.operation === 'cancel-subscription')
-					this.cancelSubscription()
-			})
-		}
-	}
-</script>
diff --git a/src/App/Users/Resources/UserResource.php b/src/App/Users/Resources/UserResource.php
index 84a49767..9161916a 100644
--- a/src/App/Users/Resources/UserResource.php
+++ b/src/App/Users/Resources/UserResource.php
@@ -43,6 +43,7 @@ class UserResource extends JsonResource
                 'relationships' => [
                     'settings'   => new SettingsResource($this->settings),
                     'favourites' => new FolderCollection($this->favouriteFolders),
+                    'creditCards' => new CreditCardCollection($this->creditCards),
                     $this->mergeWhen($this->hasSubscription(), fn () => [
                         'subscription' => new SubscriptionResource($this->subscription),
                     ]),
@@ -52,9 +53,6 @@ class UserResource extends JsonResource
                     $this->mergeWhen($isMeteredSubscription, fn () => [
                         'alert' => new BillingAlertResource($this->billingAlert),
                     ]),
-                    $this->mergeWhen($isMeteredSubscription, fn () => [
-                        'creditCards' => new CreditCardCollection($this->creditCards),
-                    ]),
                     $this->mergeWhen($isMeteredSubscription, fn () => [
                         'failedPayments' => new FailedPaymentsCollection($this->failedPayments),
                     ]),