diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 5738b9ec..441759a6 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -3,7 +3,7 @@
     "/css/app.css": "/css/app.css",
     "/css/tailwind.css": "/css/tailwind.css",
     "/chunks/admin.js": "/chunks/admin.js?id=4648dcc5c93c59d5e458",
-    "/chunks/admin-account.js": "/chunks/admin-account.js?id=55f9b983b9aa60c21a62",
+    "/chunks/admin-account.js": "/chunks/admin-account.js?id=1d297064a7b806655c53",
     "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js?id=b6966627bd253eda63ba",
     "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~3e4fdd8b.js": "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~3e4fdd8b.js?id=d7a8e5b5b913858da427",
     "/chunks/admin~chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-item~9b68162c.js": "/chunks/admin~chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/my-shared-item~9b68162c.js?id=5841d65172536a8a9bdc",
@@ -14,48 +14,48 @@
     "/chunks/admin~chunks/platform.js": "/chunks/admin~chunks/platform.js?id=90270d0c5aeb5c50dacf",
     "/chunks/admin~chunks/platform~chunks/settings.js": "/chunks/admin~chunks/platform~chunks/settings.js?id=61e970ffb679245686c3",
     "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/settings~chunks/shared.js?id=02b6620b94dc282ba692",
-    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=530fb76ae7b6a5aa6b1d",
+    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=6190b5814fdd1bcaa3e7",
     "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js?id=aa284736dda7647d5c9e",
-    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js?id=6bd4516589f23ec25ae6",
+    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js?id=87266e580e0abf1170c5",
     "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js?id=b1123c792a51f9b3ec11",
-    "/chunks/app-billings.js": "/chunks/app-billings.js?id=c507004c1e6a3bdeb574",
-    "/chunks/app-email.js": "/chunks/app-email.js?id=20f70ca270cf76a68439",
-    "/chunks/app-index.js": "/chunks/app-index.js?id=072ca392fe4b07a263cf",
-    "/chunks/app-language.js": "/chunks/app-language.js?id=bc7b162598794d12a71c",
+    "/chunks/app-billings.js": "/chunks/app-billings.js?id=78ff72f66100c8dad524",
+    "/chunks/app-email.js": "/chunks/app-email.js?id=08bbbc986763c5cd469b",
+    "/chunks/app-index.js": "/chunks/app-index.js?id=8e568be1ed7c95b1dd7a",
+    "/chunks/app-language.js": "/chunks/app-language.js?id=3e49a545b33ee6cc07d6",
     "/chunks/app-language~chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pag~824d674f.js": "/chunks/app-language~chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pag~824d674f.js?id=38b2085e829a84df0e5f",
     "/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-others.js": "/chunks/app-others.js?id=f60c0311260d76d7e2d7",
-    "/chunks/app-payments.js": "/chunks/app-payments.js?id=900702132f5dd8a49c8e",
+    "/chunks/app-others.js": "/chunks/app-others.js?id=d25dc78f3833ad821ce6",
+    "/chunks/app-payments.js": "/chunks/app-payments.js?id=394ca7cbc1228a62a1e5",
     "/chunks/app-settings.js": "/chunks/app-settings.js?id=46db5576c075122828de",
-    "/chunks/app-setup.js": "/chunks/app-setup.js?id=459d95c0256c819ce4bf",
+    "/chunks/app-setup.js": "/chunks/app-setup.js?id=d08c8db88e7c09d691a7",
     "/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~5d0bfc57.js": "/chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/database~chunks/email-veri~5d0bfc57.js?id=107a78323eef0c1d4c81",
-    "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=f8562a0dd73fdc9a3f71",
+    "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=90001da58614ded6d2dc",
     "/chunks/contact-us.js": "/chunks/contact-us.js?id=3d0bbcd0c36d74bf739a",
     "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js": "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js?id=65ee559ca803555be568",
     "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=55135fff8801bdf735c4",
     "/chunks/dashboard.js": "/chunks/dashboard.js?id=2cf7518289765027a590",
     "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js?id=f2305bd9f2fbf4fd55e6",
-    "/chunks/database.js": "/chunks/database.js?id=1ae81800a700012ddb82",
+    "/chunks/database.js": "/chunks/database.js?id=18549b910ac0b115d2f1",
     "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=6c86916c6c6f679fa86b",
     "/chunks/email-verified.js": "/chunks/email-verified.js?id=253ce639751cc8799458",
-    "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=94aba21b70f5648f6c95",
+    "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=67b3581a365924852735",
     "/chunks/files.js": "/chunks/files.js?id=a4f88b13671ef8b37818",
     "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/share~c7960950.js": "/chunks/files~chunks/my-shared-items~chunks/platform~chunks/recent-uploads~chunks/shared~chunks/share~c7960950.js?id=64ac90ff8ae7d3ee3ed1",
     "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~34b5eb22.js?id=2f2e1987e91a74932dcb",
     "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~bf3ddedc.js": "/chunks/files~chunks/my-shared-items~chunks/recent-uploads~chunks/shared-with-me~chunks/shared/files~~bf3ddedc.js?id=44dd372c3414f407ed37",
     "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=8e13225bf4eda83750fc",
     "/chunks/homepage.js": "/chunks/homepage.js?id=b89dd81804b8a0bd3f0b",
-    "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=b3f6fb91be8517fbc085",
+    "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=1579259e826aa89fb00a",
     "/chunks/invitation.js": "/chunks/invitation.js?id=c9cd3541ee362ae8d5f7",
     "/chunks/invoices.js": "/chunks/invoices.js?id=dde37879c074c8bf91b1",
     "/chunks/my-shared-items.js": "/chunks/my-shared-items.js?id=ea129760157c8e44f324",
     "/chunks/not-found.js": "/chunks/not-found.js?id=034287ee0ecb036320d3",
-    "/chunks/page-edit.js": "/chunks/page-edit.js?id=7472371b2338ffa0cb67",
+    "/chunks/page-edit.js": "/chunks/page-edit.js?id=b0235e76cbd41a62a331",
     "/chunks/pages.js": "/chunks/pages.js?id=10510081613e26cb3d84",
     "/chunks/plan.js": "/chunks/plan.js?id=052940a7395f559b7c60",
-    "/chunks/plan-create.js": "/chunks/plan-create.js?id=72e4ef277bb881d5cadf",
+    "/chunks/plan-create.js": "/chunks/plan-create.js?id=c1ad8299871917f21f8e",
     "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=a4db8cc9a98a81eed8d1",
-    "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=e8da481270be8010fe35",
+    "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=b3287cc8a37898410410",
     "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=6c052021e0f162f6942d",
     "/chunks/plans.js": "/chunks/plans.js?id=1dd67aa61e7482424e6d",
     "/chunks/platform.js": "/chunks/platform.js?id=f8e1c28f9e64711f0c57",
@@ -63,16 +63,16 @@
     "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=b9673d70cdfa5f083a18",
     "/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=c4ac8e0a3b9cd57354c0",
+    "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=4c9656de6fa221022bf5",
     "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=f8b2619e393a5823bf29",
     "/chunks/recent-uploads.js": "/chunks/recent-uploads.js?id=22f629caf127051898e9",
     "/chunks/settings.js": "/chunks/settings.js?id=17e49d22d9c7fa2cfb24",
-    "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=0920151cdeb1c2bdb36a",
-    "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=f73f0faf411f750a1c07",
+    "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=cacac1c92fcaa4f21f69",
+    "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=f28ea2adab3e870dc9b3",
     "/chunks/settings-password.js": "/chunks/settings-password.js?id=68dafd28e0eff002bf5f",
-    "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=979e74627582832e7a79",
-    "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=9a1352324cbee9630496",
-    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=b1e1ae3cff004140701e",
+    "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=3a88e55341d1f1ffe12d",
+    "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=c1a4036392db4eea190f",
+    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=6c375ac49b361d9df78d",
     "/chunks/settings~chunks/settings-password.js": "/chunks/settings~chunks/settings-password.js?id=e67e12955133c57194d1",
     "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=651d5accf401908724c5",
     "/chunks/shared.js": "/chunks/shared.js?id=6230d050545cd1bd9b87",
@@ -83,23 +83,23 @@
     "/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=f2fb680ebf4873ff4436",
     "/chunks/sign-in.js": "/chunks/sign-in.js?id=04b378323ff1494fa85d",
     "/chunks/sign-up.js": "/chunks/sign-up.js?id=0307551ea7ad8e9bd3c2",
-    "/chunks/status-check.js": "/chunks/status-check.js?id=a3e3ddecf11f2476d5ec",
-    "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=629a6eae27148dfcd3cc",
-    "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=2f3eea4ae324e6ffcf44",
+    "/chunks/status-check.js": "/chunks/status-check.js?id=1f40335d1a872e8d1fdf",
+    "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=cb0ce03d3cd0c8ca1164",
+    "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=104e676d6994ebf3e96e",
     "/chunks/subscription-service.js": "/chunks/subscription-service.js?id=8ac19b3fcfd57d79e5b1",
     "/chunks/team-folders.js": "/chunks/team-folders.js?id=0e69f4432e968cc512f9",
     "/chunks/trash.js": "/chunks/trash.js?id=5fe84aadd8729e68849e",
-    "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=0b40203411b63118a5eb",
+    "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=28dce4872f5b8c5e95f8",
     "/chunks/upgrade-billing~chunks/upgrade-plan.js": "/chunks/upgrade-billing~chunks/upgrade-plan.js?id=8bd237c632018a537d76",
     "/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=7ee9b84ffed9bf544997",
-    "/chunks/user.js": "/chunks/user.js?id=febd5c542ebe1fad7ece",
-    "/chunks/user-create.js": "/chunks/user-create.js?id=0b26beecfb2a8cb5ff10",
+    "/chunks/user.js": "/chunks/user.js?id=1a89d96454562e0bd29d",
+    "/chunks/user-create.js": "/chunks/user-create.js?id=e88511a44794a13905a7",
     "/chunks/user-delete.js": "/chunks/user-delete.js?id=ce3ff1769cb97e99427b",
-    "/chunks/user-detail.js": "/chunks/user-detail.js?id=b59366ad1fb6d493b479",
+    "/chunks/user-detail.js": "/chunks/user-detail.js?id=6d798cc57ea2ae5c924f",
     "/chunks/user-invoices.js": "/chunks/user-invoices.js?id=a03cdaa3511d88acdd97",
     "/chunks/user-password.js": "/chunks/user-password.js?id=ce6c12a5b038f5481bd1",
-    "/chunks/user-storage.js": "/chunks/user-storage.js?id=4313d87360b8911ca839",
-    "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=370b3df08b2ee39bf6ac",
+    "/chunks/user-storage.js": "/chunks/user-storage.js?id=0e46d73f77f2778bb395",
+    "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=9af6308cdf06b91d0f9f",
     "/chunks/users.js": "/chunks/users.js?id=90f7cc304d20dd44f0a2",
     "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~24b428d3.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~24b428d3.js?id=ee89932f7ee76e74483e",
     "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~b505e62a.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~b505e62a.js?id=8163e0eab55c50f8afb8",
@@ -1301,5 +1301,141 @@
     "/chunks/user-detail.5e42c1b9c3db1618bbbd.hot-update.js": "/chunks/user-detail.5e42c1b9c3db1618bbbd.hot-update.js",
     "/chunks/user-storage.5e42c1b9c3db1618bbbd.hot-update.js": "/chunks/user-storage.5e42c1b9c3db1618bbbd.hot-update.js",
     "/chunks/app-language.422588dbf7bed9c2add6.hot-update.js": "/chunks/app-language.422588dbf7bed9c2add6.hot-update.js",
-    "/chunks/users.25a94f1f180b0bdc8cbb.hot-update.js": "/chunks/users.25a94f1f180b0bdc8cbb.hot-update.js"
+    "/chunks/users.25a94f1f180b0bdc8cbb.hot-update.js": "/chunks/users.25a94f1f180b0bdc8cbb.hot-update.js",
+    "/chunks/settings-storage.cb46da2da2ea401c7f1f.hot-update.js": "/chunks/settings-storage.cb46da2da2ea401c7f1f.hot-update.js",
+    "/chunks/settings-storage.9737cc9367f936ca6b63.hot-update.js": "/chunks/settings-storage.9737cc9367f936ca6b63.hot-update.js",
+    "/chunks/settings-storage.42e943f4e61db04475b8.hot-update.js": "/chunks/settings-storage.42e943f4e61db04475b8.hot-update.js",
+    "/chunks/settings-storage.d60664c0d15a97147054.hot-update.js": "/chunks/settings-storage.d60664c0d15a97147054.hot-update.js",
+    "/chunks/settings-storage.de7473730b01fe01c812.hot-update.js": "/chunks/settings-storage.de7473730b01fe01c812.hot-update.js",
+    "/chunks/settings-storage.cfcb5884079ecab18eef.hot-update.js": "/chunks/settings-storage.cfcb5884079ecab18eef.hot-update.js",
+    "/chunks/settings-storage.08749d3bed0fabc366b2.hot-update.js": "/chunks/settings-storage.08749d3bed0fabc366b2.hot-update.js",
+    "/chunks/settings-storage.2a10d688e079f1279edf.hot-update.js": "/chunks/settings-storage.2a10d688e079f1279edf.hot-update.js",
+    "/chunks/settings-storage.e2aa1e0f168a775c21f4.hot-update.js": "/chunks/settings-storage.e2aa1e0f168a775c21f4.hot-update.js",
+    "/chunks/settings-storage.cfd6c96ae44057cffe6e.hot-update.js": "/chunks/settings-storage.cfd6c96ae44057cffe6e.hot-update.js",
+    "/chunks/settings-storage.e6c39e831c9c94dec47a.hot-update.js": "/chunks/settings-storage.e6c39e831c9c94dec47a.hot-update.js",
+    "/chunks/settings-storage.2a7b2386abcbfde1ebbe.hot-update.js": "/chunks/settings-storage.2a7b2386abcbfde1ebbe.hot-update.js",
+    "/chunks/settings-storage.f9e01b2490e95a2338e1.hot-update.js": "/chunks/settings-storage.f9e01b2490e95a2338e1.hot-update.js",
+    "/chunks/settings-storage.7794e81d005906bc0a18.hot-update.js": "/chunks/settings-storage.7794e81d005906bc0a18.hot-update.js",
+    "/chunks/admin-account.1eb4319ebbfb1bb62bef.hot-update.js": "/chunks/admin-account.1eb4319ebbfb1bb62bef.hot-update.js",
+    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.1eb4319ebbfb1bb62bef.hot-update.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.1eb4319ebbfb1bb62bef.hot-update.js",
+    "/chunks/app-language.1eb4319ebbfb1bb62bef.hot-update.js": "/chunks/app-language.1eb4319ebbfb1bb62bef.hot-update.js",
+    "/chunks/app-setup.1eb4319ebbfb1bb62bef.hot-update.js": "/chunks/app-setup.1eb4319ebbfb1bb62bef.hot-update.js",
+    "/chunks/billings-detail.1eb4319ebbfb1bb62bef.hot-update.js": "/chunks/billings-detail.1eb4319ebbfb1bb62bef.hot-update.js",
+    "/chunks/database.1eb4319ebbfb1bb62bef.hot-update.js": "/chunks/database.1eb4319ebbfb1bb62bef.hot-update.js",
+    "/chunks/environment-setup.1eb4319ebbfb1bb62bef.hot-update.js": "/chunks/environment-setup.1eb4319ebbfb1bb62bef.hot-update.js",
+    "/chunks/installation-disclaimer.1eb4319ebbfb1bb62bef.hot-update.js": "/chunks/installation-disclaimer.1eb4319ebbfb1bb62bef.hot-update.js",
+    "/chunks/page-edit.1eb4319ebbfb1bb62bef.hot-update.js": "/chunks/page-edit.1eb4319ebbfb1bb62bef.hot-update.js",
+    "/chunks/plan-create.1eb4319ebbfb1bb62bef.hot-update.js": "/chunks/plan-create.1eb4319ebbfb1bb62bef.hot-update.js",
+    "/chunks/profile~chunks/settings-password.1eb4319ebbfb1bb62bef.hot-update.js": "/chunks/profile~chunks/settings-password.1eb4319ebbfb1bb62bef.hot-update.js",
+    "/chunks/settings-create-payment-methods.1eb4319ebbfb1bb62bef.hot-update.js": "/chunks/settings-create-payment-methods.1eb4319ebbfb1bb62bef.hot-update.js",
+    "/chunks/settings-invoices.1eb4319ebbfb1bb62bef.hot-update.js": "/chunks/settings-invoices.1eb4319ebbfb1bb62bef.hot-update.js",
+    "/chunks/settings-payment-methods.1eb4319ebbfb1bb62bef.hot-update.js": "/chunks/settings-payment-methods.1eb4319ebbfb1bb62bef.hot-update.js",
+    "/chunks/settings-storage.1eb4319ebbfb1bb62bef.hot-update.js": "/chunks/settings-storage.1eb4319ebbfb1bb62bef.hot-update.js",
+    "/chunks/settings-subscription.1eb4319ebbfb1bb62bef.hot-update.js": "/chunks/settings-subscription.1eb4319ebbfb1bb62bef.hot-update.js",
+    "/chunks/status-check.1eb4319ebbfb1bb62bef.hot-update.js": "/chunks/status-check.1eb4319ebbfb1bb62bef.hot-update.js",
+    "/chunks/stripe-credentials.1eb4319ebbfb1bb62bef.hot-update.js": "/chunks/stripe-credentials.1eb4319ebbfb1bb62bef.hot-update.js",
+    "/chunks/subscription-plans.1eb4319ebbfb1bb62bef.hot-update.js": "/chunks/subscription-plans.1eb4319ebbfb1bb62bef.hot-update.js",
+    "/chunks/upgrade-billing.1eb4319ebbfb1bb62bef.hot-update.js": "/chunks/upgrade-billing.1eb4319ebbfb1bb62bef.hot-update.js",
+    "/chunks/user-create.1eb4319ebbfb1bb62bef.hot-update.js": "/chunks/user-create.1eb4319ebbfb1bb62bef.hot-update.js",
+    "/chunks/user-subscription.1eb4319ebbfb1bb62bef.hot-update.js": "/chunks/user-subscription.1eb4319ebbfb1bb62bef.hot-update.js",
+    "/chunks/settings-storage.e8d825aaaf863e4cbce2.hot-update.js": "/chunks/settings-storage.e8d825aaaf863e4cbce2.hot-update.js",
+    "/chunks/settings-storage.4b926e81fed6c65a7c66.hot-update.js": "/chunks/settings-storage.4b926e81fed6c65a7c66.hot-update.js",
+    "/chunks/settings-storage.7b9224485b2878fa08cf.hot-update.js": "/chunks/settings-storage.7b9224485b2878fa08cf.hot-update.js",
+    "/chunks/settings-storage.bad9af7dc753c9aa7750.hot-update.js": "/chunks/settings-storage.bad9af7dc753c9aa7750.hot-update.js",
+    "/chunks/settings-storage.f26f7655658f96ee9eb7.hot-update.js": "/chunks/settings-storage.f26f7655658f96ee9eb7.hot-update.js",
+    "/chunks/settings-storage.16ab772e149b0cd14cdc.hot-update.js": "/chunks/settings-storage.16ab772e149b0cd14cdc.hot-update.js",
+    "/chunks/settings-storage.fc9afafe4a340f1dd388.hot-update.js": "/chunks/settings-storage.fc9afafe4a340f1dd388.hot-update.js",
+    "/chunks/settings-storage.8ccac50a7a53f1841a41.hot-update.js": "/chunks/settings-storage.8ccac50a7a53f1841a41.hot-update.js",
+    "/chunks/settings-storage.9a17ad41a262837b4bbb.hot-update.js": "/chunks/settings-storage.9a17ad41a262837b4bbb.hot-update.js",
+    "/chunks/settings-storage.2575c46d81d03921f230.hot-update.js": "/chunks/settings-storage.2575c46d81d03921f230.hot-update.js",
+    "/chunks/settings-storage.de83c90bfe165faf41d0.hot-update.js": "/chunks/settings-storage.de83c90bfe165faf41d0.hot-update.js",
+    "/chunks/settings-storage.aad71e97fad739be21f3.hot-update.js": "/chunks/settings-storage.aad71e97fad739be21f3.hot-update.js",
+    "/chunks/settings-storage.c52f4e7934108f8d0d39.hot-update.js": "/chunks/settings-storage.c52f4e7934108f8d0d39.hot-update.js",
+    "/chunks/settings-storage.a5a945f0fdee6b48e78d.hot-update.js": "/chunks/settings-storage.a5a945f0fdee6b48e78d.hot-update.js",
+    "/chunks/settings-storage.3ceaa38c6f5bd7ac72d7.hot-update.js": "/chunks/settings-storage.3ceaa38c6f5bd7ac72d7.hot-update.js",
+    "/chunks/settings-storage.915789d66c92a520ce3d.hot-update.js": "/chunks/settings-storage.915789d66c92a520ce3d.hot-update.js",
+    "/chunks/settings-storage.5fe094613136d06e58bf.hot-update.js": "/chunks/settings-storage.5fe094613136d06e58bf.hot-update.js",
+    "/chunks/settings-storage.8bd0b512a222c95ce8d7.hot-update.js": "/chunks/settings-storage.8bd0b512a222c95ce8d7.hot-update.js",
+    "/chunks/settings-storage.5c8184a4928147965fb6.hot-update.js": "/chunks/settings-storage.5c8184a4928147965fb6.hot-update.js",
+    "/chunks/settings-storage.414e7bd0a9efa0365ed6.hot-update.js": "/chunks/settings-storage.414e7bd0a9efa0365ed6.hot-update.js",
+    "/js/main.99bb45c0f8443a102a02.hot-update.js": "/js/main.99bb45c0f8443a102a02.hot-update.js",
+    "/chunks/app-appearance.99bb45c0f8443a102a02.hot-update.js": "/chunks/app-appearance.99bb45c0f8443a102a02.hot-update.js",
+    "/chunks/app-billings.99bb45c0f8443a102a02.hot-update.js": "/chunks/app-billings.99bb45c0f8443a102a02.hot-update.js",
+    "/chunks/app-email.99bb45c0f8443a102a02.hot-update.js": "/chunks/app-email.99bb45c0f8443a102a02.hot-update.js",
+    "/chunks/app-index.99bb45c0f8443a102a02.hot-update.js": "/chunks/app-index.99bb45c0f8443a102a02.hot-update.js",
+    "/chunks/app-others.99bb45c0f8443a102a02.hot-update.js": "/chunks/app-others.99bb45c0f8443a102a02.hot-update.js",
+    "/chunks/app-payments.99bb45c0f8443a102a02.hot-update.js": "/chunks/app-payments.99bb45c0f8443a102a02.hot-update.js",
+    "/chunks/plan-settings.99bb45c0f8443a102a02.hot-update.js": "/chunks/plan-settings.99bb45c0f8443a102a02.hot-update.js",
+    "/chunks/settings-storage.99bb45c0f8443a102a02.hot-update.js": "/chunks/settings-storage.99bb45c0f8443a102a02.hot-update.js",
+    "/chunks/user.99bb45c0f8443a102a02.hot-update.js": "/chunks/user.99bb45c0f8443a102a02.hot-update.js",
+    "/chunks/user-detail.99bb45c0f8443a102a02.hot-update.js": "/chunks/user-detail.99bb45c0f8443a102a02.hot-update.js",
+    "/chunks/user-storage.99bb45c0f8443a102a02.hot-update.js": "/chunks/user-storage.99bb45c0f8443a102a02.hot-update.js",
+    "/chunks/settings-storage.1694c21cfa4b0341e455.hot-update.js": "/chunks/settings-storage.1694c21cfa4b0341e455.hot-update.js",
+    "/js/main.a1d59dd75ee6de668ce5.hot-update.js": "/js/main.a1d59dd75ee6de668ce5.hot-update.js",
+    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8e91086a.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8e91086a.js?id=2573d5ca66f73fbb0964",
+    "/chunks/app-language~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~c80ea79c.js": "/chunks/app-language~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~c80ea79c.js?id=625c65b01d8f3f5635ec",
+    "/chunks/settings-storage.a1d59dd75ee6de668ce5.hot-update.js": "/chunks/settings-storage.a1d59dd75ee6de668ce5.hot-update.js",
+    "/js/main.3087c12f1cebcecfa823.hot-update.js": "/js/main.3087c12f1cebcecfa823.hot-update.js",
+    "/chunks/settings-storage.3087c12f1cebcecfa823.hot-update.js": "/chunks/settings-storage.3087c12f1cebcecfa823.hot-update.js",
+    "/chunks/settings-storage.e74cf0750b1593d5df76.hot-update.js": "/chunks/settings-storage.e74cf0750b1593d5df76.hot-update.js",
+    "/chunks/settings-storage.4110460a2fa196b12bf5.hot-update.js": "/chunks/settings-storage.4110460a2fa196b12bf5.hot-update.js",
+    "/chunks/settings-storage.df1404abd79c85cc07f2.hot-update.js": "/chunks/settings-storage.df1404abd79c85cc07f2.hot-update.js",
+    "/chunks/settings-storage.a2a4971aed09b699d5a3.hot-update.js": "/chunks/settings-storage.a2a4971aed09b699d5a3.hot-update.js",
+    "/chunks/settings-storage.a68d394aa6eddd12f541.hot-update.js": "/chunks/settings-storage.a68d394aa6eddd12f541.hot-update.js",
+    "/chunks/settings-storage.21415996c40962d10ed8.hot-update.js": "/chunks/settings-storage.21415996c40962d10ed8.hot-update.js",
+    "/chunks/settings-storage.2cf2a49e2d13c92d0a69.hot-update.js": "/chunks/settings-storage.2cf2a49e2d13c92d0a69.hot-update.js",
+    "/chunks/settings-storage.339c85effb27fc3a848e.hot-update.js": "/chunks/settings-storage.339c85effb27fc3a848e.hot-update.js",
+    "/chunks/settings-storage.8d448c77ed6370a5ab2d.hot-update.js": "/chunks/settings-storage.8d448c77ed6370a5ab2d.hot-update.js",
+    "/chunks/settings-storage.73f4ad8be0c001bea4d4.hot-update.js": "/chunks/settings-storage.73f4ad8be0c001bea4d4.hot-update.js",
+    "/chunks/settings-storage.70bcb3453ab2ef9df270.hot-update.js": "/chunks/settings-storage.70bcb3453ab2ef9df270.hot-update.js",
+    "/chunks/settings-storage.a409372bae1f57b9a99a.hot-update.js": "/chunks/settings-storage.a409372bae1f57b9a99a.hot-update.js",
+    "/chunks/settings-storage.b1767f12ccc8a551d193.hot-update.js": "/chunks/settings-storage.b1767f12ccc8a551d193.hot-update.js",
+    "/chunks/settings-storage.029c497ccde945ec3dd6.hot-update.js": "/chunks/settings-storage.029c497ccde945ec3dd6.hot-update.js",
+    "/chunks/settings-storage.299b444757c8518ee92b.hot-update.js": "/chunks/settings-storage.299b444757c8518ee92b.hot-update.js",
+    "/chunks/settings-storage.8baa27377f39939ee415.hot-update.js": "/chunks/settings-storage.8baa27377f39939ee415.hot-update.js",
+    "/chunks/settings-storage.9a585cc110cbd2ab6a62.hot-update.js": "/chunks/settings-storage.9a585cc110cbd2ab6a62.hot-update.js",
+    "/chunks/settings-storage.cd62d561df2b90fa3cf9.hot-update.js": "/chunks/settings-storage.cd62d561df2b90fa3cf9.hot-update.js",
+    "/chunks/app-appearance.ddc87654bd0990a5f948.hot-update.js": "/chunks/app-appearance.ddc87654bd0990a5f948.hot-update.js",
+    "/chunks/app-billings.ddc87654bd0990a5f948.hot-update.js": "/chunks/app-billings.ddc87654bd0990a5f948.hot-update.js",
+    "/chunks/app-email.ddc87654bd0990a5f948.hot-update.js": "/chunks/app-email.ddc87654bd0990a5f948.hot-update.js",
+    "/chunks/app-index.ddc87654bd0990a5f948.hot-update.js": "/chunks/app-index.ddc87654bd0990a5f948.hot-update.js",
+    "/chunks/app-others.ddc87654bd0990a5f948.hot-update.js": "/chunks/app-others.ddc87654bd0990a5f948.hot-update.js",
+    "/chunks/app-payments.ddc87654bd0990a5f948.hot-update.js": "/chunks/app-payments.ddc87654bd0990a5f948.hot-update.js",
+    "/chunks/plan-settings.ddc87654bd0990a5f948.hot-update.js": "/chunks/plan-settings.ddc87654bd0990a5f948.hot-update.js",
+    "/chunks/user.ddc87654bd0990a5f948.hot-update.js": "/chunks/user.ddc87654bd0990a5f948.hot-update.js",
+    "/chunks/user-detail.ddc87654bd0990a5f948.hot-update.js": "/chunks/user-detail.ddc87654bd0990a5f948.hot-update.js",
+    "/chunks/user-storage.ddc87654bd0990a5f948.hot-update.js": "/chunks/user-storage.ddc87654bd0990a5f948.hot-update.js",
+    "/chunks/settings-storage.9e0bc666c7a74b87a38c.hot-update.js": "/chunks/settings-storage.9e0bc666c7a74b87a38c.hot-update.js",
+    "/chunks/settings-storage.892cd6e132f0ec45331b.hot-update.js": "/chunks/settings-storage.892cd6e132f0ec45331b.hot-update.js",
+    "/chunks/settings-storage.9e824570b9b7d6477919.hot-update.js": "/chunks/settings-storage.9e824570b9b7d6477919.hot-update.js",
+    "/chunks/settings-storage.e68362e90c214a1a19b2.hot-update.js": "/chunks/settings-storage.e68362e90c214a1a19b2.hot-update.js",
+    "/chunks/settings-storage.b47cd8093cc6727b8f55.hot-update.js": "/chunks/settings-storage.b47cd8093cc6727b8f55.hot-update.js",
+    "/chunks/settings-storage.4cbc519d735575b6f04b.hot-update.js": "/chunks/settings-storage.4cbc519d735575b6f04b.hot-update.js",
+    "/chunks/settings-storage.bfef5c8fb1a1377e0357.hot-update.js": "/chunks/settings-storage.bfef5c8fb1a1377e0357.hot-update.js",
+    "/chunks/settings-storage.adb9a324f00424b5440e.hot-update.js": "/chunks/settings-storage.adb9a324f00424b5440e.hot-update.js",
+    "/chunks/settings-storage.d2401acf36ce28de0a66.hot-update.js": "/chunks/settings-storage.d2401acf36ce28de0a66.hot-update.js",
+    "/chunks/settings-storage.ed0cc19a2d6dec469145.hot-update.js": "/chunks/settings-storage.ed0cc19a2d6dec469145.hot-update.js",
+    "/chunks/settings-storage.755c54e17f15ba01c5a2.hot-update.js": "/chunks/settings-storage.755c54e17f15ba01c5a2.hot-update.js",
+    "/chunks/settings-storage.6bab988799e45c3cd8bb.hot-update.js": "/chunks/settings-storage.6bab988799e45c3cd8bb.hot-update.js",
+    "/chunks/settings-storage.63bd9f6a8e367f7398b5.hot-update.js": "/chunks/settings-storage.63bd9f6a8e367f7398b5.hot-update.js",
+    "/chunks/settings-storage.7be1b36eb7ef00ea3ff9.hot-update.js": "/chunks/settings-storage.7be1b36eb7ef00ea3ff9.hot-update.js",
+    "/chunks/settings.63fb4fe96626ba2fda67.hot-update.js": "/chunks/settings.63fb4fe96626ba2fda67.hot-update.js",
+    "/chunks/settings.92a2175a586b0a80be50.hot-update.js": "/chunks/settings.92a2175a586b0a80be50.hot-update.js",
+    "/js/main.89afdac8aabce8afc5e9.hot-update.js": "/js/main.89afdac8aabce8afc5e9.hot-update.js",
+    "/chunks/settings-storage.89afdac8aabce8afc5e9.hot-update.js": "/chunks/settings-storage.89afdac8aabce8afc5e9.hot-update.js",
+    "/chunks/settings-storage.703a9bca56f5344950a6.hot-update.js": "/chunks/settings-storage.703a9bca56f5344950a6.hot-update.js",
+    "/chunks/settings-storage.e0436bd2ccf74ffb5f47.hot-update.js": "/chunks/settings-storage.e0436bd2ccf74ffb5f47.hot-update.js",
+    "/chunks/settings-storage.b258cba70783fe0e790a.hot-update.js": "/chunks/settings-storage.b258cba70783fe0e790a.hot-update.js",
+    "/chunks/settings-storage.9893f28d1b23efa68cbd.hot-update.js": "/chunks/settings-storage.9893f28d1b23efa68cbd.hot-update.js",
+    "/js/main.68051dbc6317abaf59d4.hot-update.js": "/js/main.68051dbc6317abaf59d4.hot-update.js",
+    "/chunks/settings-storage.5761a9579fab501502a7.hot-update.js": "/chunks/settings-storage.5761a9579fab501502a7.hot-update.js",
+    "/js/main.94479ecf217dc99858e7.hot-update.js": "/js/main.94479ecf217dc99858e7.hot-update.js",
+    "/chunks/settings-storage.fc97a7779755d5666b93.hot-update.js": "/chunks/settings-storage.fc97a7779755d5666b93.hot-update.js",
+    "/js/main.36cc97142e239b8568c8.hot-update.js": "/js/main.36cc97142e239b8568c8.hot-update.js",
+    "/chunks/settings-storage.36cc97142e239b8568c8.hot-update.js": "/chunks/settings-storage.36cc97142e239b8568c8.hot-update.js",
+    "/chunks/settings-storage~chunks/user-storage.js": "/chunks/settings-storage~chunks/user-storage.js?id=aea7db000950ccb8ad53",
+    "/chunks/user-storage.36cc97142e239b8568c8.hot-update.js": "/chunks/user-storage.36cc97142e239b8568c8.hot-update.js",
+    "/chunks/user-storage.cbfa5d5fe70295f3d34b.hot-update.js": "/chunks/user-storage.cbfa5d5fe70295f3d34b.hot-update.js",
+    "/chunks/user-storage.8a4b74d427eab10bf6bb.hot-update.js": "/chunks/user-storage.8a4b74d427eab10bf6bb.hot-update.js",
+    "/chunks/user-storage.b0b32719a5d0f3e6b6cf.hot-update.js": "/chunks/user-storage.b0b32719a5d0f3e6b6cf.hot-update.js"
 }
diff --git a/resources/js/components/Admin/DotLabel.vue b/resources/js/components/Admin/DotLabel.vue
new file mode 100644
index 00000000..cfea6651
--- /dev/null
+++ b/resources/js/components/Admin/DotLabel.vue
@@ -0,0 +1,68 @@
+<template>
+    <div class="label">
+        <span :class="['label-dot', color]"></span>
+        <b class="label-title">
+            {{ title }}
+        </b>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'DotLabel',
+        props: [
+            'color',
+            'title',
+        ],
+    }
+</script>
+
+<style lang="scss" scoped>
+
+    .label {
+        display: flex;
+        align-items: center;
+
+        .label-dot {
+            margin-right: 10px;
+            width: 8px;
+            height: 8px;
+            display: block;
+            border-radius: 8px;
+            flex: none;
+
+            &.success {
+                background: #0ABB87;
+            }
+
+            &.danger {
+                background: #fd397a;
+            }
+
+            &.warning {
+                background: #ffb822;
+            }
+
+            &.info {
+                background: #5578eb;
+            }
+
+            &.primary {
+                background: red;
+            }
+
+            &.purple {
+                background: #9d66fe;
+            }
+
+            &.secondary {
+                background: #e1e1ef;
+            }
+        }
+
+        .label-title {
+            font-size: 16px;
+            font-weight: 700;
+        }
+    }
+</style>
diff --git a/resources/js/components/Admin/ProgressLine.vue b/resources/js/components/Admin/ProgressLine.vue
new file mode 100644
index 00000000..9de1d1e2
--- /dev/null
+++ b/resources/js/components/Admin/ProgressLine.vue
@@ -0,0 +1,117 @@
+<template>
+    <div class="progress-wrapper">
+        <div class="chart">
+            <div v-for="(chart, i) in data" :key="i" :style="{width: chart.progress + '%'}" class="chart-wrapper">
+				<!--<DotLabel class="label" :class="{'offset-top': chart.progress < 5}" :color="chart.color" :title="chart.value" />-->
+                <span :class="['chart-progress', chart.color]"></span>
+            </div>
+        </div>
+        <footer>
+            <DotLabel v-for="(chart, i) in data" :key="i" :color="chart.color" :title="chart.title" />
+        </footer>
+    </div>
+</template>
+
+<script>
+    import DotLabel from "./DotLabel";
+
+    export default {
+        name: 'ProgressLine',
+        props: [
+            'data',
+        ],
+        components: {
+            DotLabel
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+
+
+    .progress-wrapper {
+
+        .chart {
+            display: flex;
+            align-items: center;
+            margin-bottom: 14px;
+
+            .chart-wrapper {
+
+                .label {
+                    justify-content: flex-end;
+                    padding-right: 5px;
+                    margin-bottom: 10px;
+
+                    &.offset-top {
+                        //@include transform(translateY(50px));
+                    }
+                }
+
+                &:nth-child(1) {
+                    .chart-progress {
+                        border-bottom-left-radius: 8px;
+                        border-top-left-radius: 8px;
+                        border-right: 2px solid white;
+                    }
+                }
+
+				.chart-progress {
+					border-right: 2px solid white;
+				}
+
+                &:nth-child(6) {
+                    .chart-progress {
+                        border-bottom-right-radius: 8px;
+                        border-top-right-radius: 8px;
+                    }
+                }
+            }
+
+            .chart-progress {
+                width: 100%;
+                height: 8px;
+                display: block;
+
+                &.success {
+                    background: #0ABB87;
+                    box-shadow: 0 3px 10px rgba(#0ABB87, 0.5);
+                }
+
+                &.danger {
+                    background: #fd397a;
+                    box-shadow: 0 3px 10px rgba(#fd397a, 0.5);
+                }
+
+                &.warning {
+                    background: #ffb822;
+                    box-shadow: 0 3px 10px rgba(#ffb822, 0.5);
+                }
+
+                &.info {
+                    background: #5578eb;
+                    box-shadow: 0 3px 10px rgba(#5578eb, 0.5);
+                }
+
+                &.purple {
+                    background: #9d66fe;
+                    box-shadow: 0 3px 10px rgba(#9d66fe, 0.5);
+                }
+
+                &.secondary {
+                    background: #e1e1ef;
+                    box-shadow: 0 3px 10px rgba(#e1e1ef, 0.5);
+                }
+            }
+        }
+
+        footer {
+            display: flex;
+            align-items: center;
+
+            .label {
+                margin-right: 22px;
+            }
+        }
+    }
+</style>
diff --git a/resources/js/components/Others/Forms/FormLabel.vue b/resources/js/components/Others/Forms/FormLabel.vue
index 2848d964..f4687d97 100644
--- a/resources/js/components/Others/Forms/FormLabel.vue
+++ b/resources/js/components/Others/Forms/FormLabel.vue
@@ -2,6 +2,7 @@
     <div class="form-label">
         <edit-2-icon v-if="!icon" size="22" class="icon text-theme dark-text-theme" />
         <settings-icon v-if="icon === 'settings'" size="22" class="icon text-theme dark-text-theme" />
+        <hard-drive-icon v-if="icon === 'hard-drive'" size="22" class="icon text-theme dark-text-theme" />
         <smartphone-icon v-if="icon === 'smartphone'" size="22" class="icon text-theme dark-text-theme" />
         <key-icon v-if="icon === 'key'" size="22" class="icon text-theme dark-text-theme" />
         <b class="label">
@@ -12,6 +13,7 @@
 
 <script>
     import {
+		HardDriveIcon,
 		KeyIcon,
 		Edit2Icon,
 		SettingsIcon,
@@ -25,6 +27,7 @@
 			KeyIcon,
             Edit2Icon,
             SettingsIcon,
+			HardDriveIcon,
 			SmartphoneIcon,
         }
     }
diff --git a/resources/js/components/Others/StorageItemDetail.vue b/resources/js/components/Others/StorageItemDetail.vue
deleted file mode 100644
index b1826b92..00000000
--- a/resources/js/components/Others/StorageItemDetail.vue
+++ /dev/null
@@ -1,203 +0,0 @@
-<template>
-    <article class="detail-storage-item" :class="type">
-        <div class="header-storage-item">
-            <div class="icon">
-                <image-icon v-if="type == 'images'" size="23"></image-icon>
-                <video-icon v-if="type == 'videos'" size="23"></video-icon>
-                <music-icon v-if="type == 'audios'" size="23"></music-icon>
-                <file-text-icon v-if="type == 'documents'" size="23"></file-text-icon>
-                <file-icon v-if="type == 'others'" size="23"></file-icon>
-                <hard-drive-icon v-if="type == 'disk'" size="23"></hard-drive-icon>
-            </div>
-            <div class="title">
-                <b class="type">{{ title }}</b>
-                <span class="total-size">{{ used }}</span>
-            </div>
-        </div>
-        <ProgressBar class="storage-progress" :progress="percentage" />
-    </article>
-</template>
-
-<script>
-    import ProgressBar from '/resources/js/components/FilesView/ProgressBar'
-    import { ImageIcon, VideoIcon, FileTextIcon, FileIcon, HardDriveIcon, MusicIcon } from 'vue-feather-icons'
-
-    export default {
-        name: 'StorageItemDetail',
-        props: ['percentage', 'title', 'type', 'used'],
-        components: {
-            HardDriveIcon,
-            FileTextIcon,
-            ProgressBar,
-            MusicIcon,
-            VideoIcon,
-            ImageIcon,
-            FileIcon,
-        },
-    }
-</script>
-
-<style lang="scss" scoped>
-    @import '/resources/sass/vuefilemanager/_variables';
-    @import '/resources/sass/vuefilemanager/_mixins';
-
-    .detail-storage-item {
-        margin-bottom: 35px;
-
-        &.disk {
-
-            .icon {
-
-                path, line, polyline, rect, circle, polygon {
-                    stroke: $text;
-                }
-            }
-
-            .storage-progress {
-
-                /deep/ span {
-                    background: $text;
-                }
-            }
-        }
-
-        &.images {
-
-            .icon {
-
-                path, line, polyline, rect, circle, polygon {
-                    stroke: $purple;
-                }
-            }
-
-            .storage-progress {
-
-                /deep/ span {
-                    background: $purple;
-                }
-            }
-        }
-
-        &.videos {
-
-            .icon {
-
-                path, line, polyline, rect, circle, polygon {
-                    stroke: $yellow;
-                }
-            }
-
-            .storage-progress {
-
-                /deep/ span {
-                    background: $yellow;
-                }
-            }
-        }
-
-        &.audios {
-
-            .icon {
-
-                path, line, polyline, rect, circle, polygon {
-                    stroke: $pink;
-                }
-            }
-
-            .storage-progress {
-
-                /deep/ span {
-                    background: $pink;
-                }
-            }
-        }
-
-        &.documents {
-
-            .icon {
-
-                path, line, polyline, rect, circle, polygon {
-                    stroke: $red;
-                }
-            }
-
-            .storage-progress {
-
-                /deep/ span {
-                    background: $red;
-                }
-            }
-        }
-
-        &.others {
-
-            .icon {
-
-                path, line, polyline, rect, circle, polygon {
-                    stroke: $text;
-                }
-            }
-
-            .storage-progress {
-
-                /deep/ span {
-                    background: $text;
-                }
-            }
-        }
-    }
-
-    .header-storage-item {
-        display: flex;
-        align-items: flex-start;
-        margin-bottom: 10px;
-
-        .icon {
-            width: 35px;
-        }
-
-        .type {
-            @include font-size(15);
-            color: $text;
-        }
-
-        .total-size {
-            @include font-size(10);
-            display: block;
-            color: $text-muted;
-        }
-    }
-
-    .dark {
-
-        .header-storage-item {
-            .type {
-                color: $dark_mode_text_primary;
-            }
-
-            .total-size {
-                color: $dark_mode_text_secondary;
-            }
-        }
-
-        .detail-storage-item {
-
-            &.others, &.disk {
-
-                .icon {
-
-                    path, line, polyline, rect, circle, polygon {
-                        stroke: lighten($dark_mode_foreground, 15%);
-                    }
-                }
-
-                .storage-progress {
-
-                    /deep/ span {
-                        background: lighten($dark_mode_foreground, 15%);
-                    }
-                }
-            }
-        }
-    }
-</style>
diff --git a/resources/js/helpers/functionHelpers.js b/resources/js/helpers/functionHelpers.js
index 9108df53..c83b2ccf 100644
--- a/resources/js/helpers/functionHelpers.js
+++ b/resources/js/helpers/functionHelpers.js
@@ -1,6 +1,6 @@
 import i18n from '/resources/js/i18n/index'
 import store from '../store/index'
-import {debounce, isArray} from "lodash";
+import {debounce, isArray, orderBy} from "lodash";
 import {events} from '../bus'
 import axios from 'axios'
 
@@ -69,6 +69,55 @@ const FunctionHelpers = {
             })
         }
 
+        Vue.prototype.$mapStorageUsage = function (storage) {
+
+            let distribution = [
+                {
+                    progress: storage.data.meta.images.percentage,
+                    color: 'success',
+                    value: storage.data.meta.images.used,
+                    title: 'Images'
+                },
+                {
+                    progress: storage.data.meta.videos.percentage,
+                    color: 'danger',
+                    value: storage.data.meta.videos.used,
+                    title: 'Videos'
+                },
+                {
+                    progress: storage.data.meta.audios.percentage,
+                    color: 'warning',
+                    value: storage.data.meta.audios.used,
+                    title: 'Audios'
+                },
+                {
+                    progress: storage.data.meta.documents.percentage,
+                    color: 'info',
+                    value: storage.data.meta.documents.used,
+                    title: 'Documents'
+                },
+                {
+                    progress: storage.data.meta.others.percentage,
+                    color: 'purple',
+                    value: storage.data.meta.others.used,
+                    title: 'Others'
+                },
+            ]
+
+            // Order distribution by it's size
+            distribution = orderBy(distribution, ['progress'], ['desc'])
+
+            // Push at the end empty space data
+            distribution.push({
+                progress: 100 - storage.data.attributes.percentage,
+                color: 'secondary',
+                value: storage.data.meta.others.used,
+                title: 'Empty'
+            })
+
+            return distribution
+        }
+
         Vue.prototype.$getImage = function (source) {
             return source ? this.$store.getters.config.host + '/' + source : ''
         }
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
index bb0ef85a..1326e7c1 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Appearance.vue
@@ -49,7 +49,6 @@
 	import AppInputSwitch from "../../../../components/Admin/AppInputSwitch";
 	import AppInputText from "../../../../components/Admin/AppInputText";
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
-    import StorageItemDetail from '/resources/js/components/Others/StorageItemDetail'
     import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
     import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
     import ImageInput from '/resources/js/components/Others/Forms/ImageInput'
@@ -68,7 +67,6 @@
 			AppInputText,
             ValidationObserver,
             ValidationProvider,
-            StorageItemDetail,
             PageTabGroup,
             SelectInput,
             ImageInput,
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Billings.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Billings.vue
index 5eea8fd3..7a3369cc 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Billings.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Billings.vue
@@ -50,7 +50,6 @@
 <script>
 	import AppInputText from "../../../../components/Admin/AppInputText";
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
-    import StorageItemDetail from '/resources/js/components/Others/StorageItemDetail'
     import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
     import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
     import ImageInput from '/resources/js/components/Others/Forms/ImageInput'
@@ -68,7 +67,6 @@
         components: {
             ValidationObserver,
             ValidationProvider,
-            StorageItemDetail,
 			AppInputText,
             PageTabGroup,
             SelectInput,
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue
index 5ca7531f..a697006b 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Email.vue
@@ -45,7 +45,6 @@
 <script>
 	import AppInputText from "../../../../components/Admin/AppInputText";
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
-    import StorageItemDetail from '/resources/js/components/Others/StorageItemDetail'
     import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
     import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
     import ImageInput from '/resources/js/components/Others/Forms/ImageInput'
@@ -64,7 +63,6 @@
 			AppInputText,
             ValidationObserver,
             ValidationProvider,
-            StorageItemDetail,
             PageTabGroup,
             SelectInput,
             ImageInput,
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Index.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Index.vue
index 3a7c20a4..69e956d0 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Index.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Index.vue
@@ -246,7 +246,6 @@
 import AppInputSwitch from "../../../../components/Admin/AppInputSwitch";
 import AppInputText from "../../../../components/Admin/AppInputText";
 import { ValidationProvider, ValidationObserver } from 'vee-validate/dist/vee-validate.full'
-import StorageItemDetail from '/resources/js/components/Others/StorageItemDetail'
 import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
 import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
 import SwitchInput from '/resources/js/components/Others/Forms/SwitchInput'
@@ -267,7 +266,6 @@ export default {
 		AppInputText,
         ValidationObserver,
         ValidationProvider,
-        StorageItemDetail,
         PageTabGroup,
         SwitchInput,
         SelectInput,
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue
index f1a0cd35..8e8757c2 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Others.vue
@@ -82,7 +82,6 @@
 	import AppInputSwitch from "../../../../components/Admin/AppInputSwitch";
 	import AppInputText from "../../../../components/Admin/AppInputText";
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
-	import StorageItemDetail from '/resources/js/components/Others/StorageItemDetail'
 	import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
 	import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
 	import SwitchInput from '/resources/js/components/Others/Forms/SwitchInput'
@@ -103,7 +102,6 @@
 			AppInputText,
 			ValidationObserver,
 			ValidationProvider,
-			StorageItemDetail,
 			PageTabGroup,
 			SwitchInput,
 			SelectInput,
diff --git a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Payments.vue b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Payments.vue
index ec21c423..a200c899 100644
--- a/resources/js/views/Admin/AppSettings/AppSettingsTabs/Payments.vue
+++ b/resources/js/views/Admin/AppSettings/AppSettingsTabs/Payments.vue
@@ -71,7 +71,6 @@
 <script>
 	import AppInputText from "../../../../components/Admin/AppInputText";
 	import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
-	import StorageItemDetail from '/resources/js/components/Others/StorageItemDetail'
 	import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
 	import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
 	import SwitchInput from '/resources/js/components/Others/Forms/SwitchInput'
@@ -94,7 +93,6 @@
 			AppInputText,
 			ValidationObserver,
 			ValidationProvider,
-			StorageItemDetail,
 			PageTabGroup,
 			SwitchInput,
 			SelectInput,
diff --git a/resources/js/views/Admin/Plans/PlanTabs/PlanSettings.vue b/resources/js/views/Admin/Plans/PlanTabs/PlanSettings.vue
index ebd0f1c3..d01a2c58 100644
--- a/resources/js/views/Admin/Plans/PlanTabs/PlanSettings.vue
+++ b/resources/js/views/Admin/Plans/PlanTabs/PlanSettings.vue
@@ -59,7 +59,6 @@
 
 <script>
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
-    import StorageItemDetail from '/resources/js/components/Others/StorageItemDetail'
     import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
     import SwitchInput from '/resources/js/components/Others/Forms/SwitchInput'
     import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
@@ -78,7 +77,6 @@
         components: {
             ValidationProvider,
             ValidationObserver,
-            StorageItemDetail,
             PageTabGroup,
             SwitchInput,
             SelectInput,
diff --git a/resources/js/views/Admin/Users/User.vue b/resources/js/views/Admin/Users/User.vue
index 1674f2de..ea1bfce6 100644
--- a/resources/js/views/Admin/Users/User.vue
+++ b/resources/js/views/Admin/Users/User.vue
@@ -34,7 +34,6 @@
 <script>
 	import CardNavigation from "../../../components/Admin/CardNavigation";
     import {UserIcon, HardDriveIcon, LockIcon, Trash2Icon, FileTextIcon, CreditCardIcon} from 'vue-feather-icons'
-    import StorageItemDetail from '/resources/js/components/Others/StorageItemDetail'
     import MobileHeader from '/resources/js/components/Mobile/MobileHeader'
     import SectionTitle from '/resources/js/components/Others/SectionTitle'
     import PageHeader from '/resources/js/components/Others/PageHeader'
@@ -46,7 +45,6 @@
     export default {
         name: 'Profile',
         components: {
-            StorageItemDetail,
 			CardNavigation,
             CreditCardIcon,
             HardDriveIcon,
diff --git a/resources/js/views/Admin/Users/UserTabs/UserDetail.vue b/resources/js/views/Admin/Users/UserTabs/UserDetail.vue
index 31881c04..f0d21b2d 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserDetail.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserDetail.vue
@@ -105,7 +105,6 @@
     import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
     import PageTab from '/resources/js/components/Others/Layout/PageTab'
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
-    import StorageItemDetail from '/resources/js/components/Others/StorageItemDetail'
     import SelectInput from '/resources/js/components/Others/Forms/SelectInput'
     import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
     import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
@@ -128,7 +127,6 @@
             FormLabel,
             ValidationProvider,
             ValidationObserver,
-            StorageItemDetail,
             SelectInput,
             ButtonBase,
             SetupBox,
diff --git a/resources/js/views/Admin/Users/UserTabs/UserStorage.vue b/resources/js/views/Admin/Users/UserTabs/UserStorage.vue
index 56fff1de..80f0e558 100644
--- a/resources/js/views/Admin/Users/UserTabs/UserStorage.vue
+++ b/resources/js/views/Admin/Users/UserTabs/UserStorage.vue
@@ -1,6 +1,19 @@
 <template>
     <PageTab :is-loading="isLoading" v-if="storage">
 
+		<div class="card shadow-card">
+			<FormLabel icon="hard-drive">
+                {{ $t('Storage Usage') }}
+            </FormLabel>
+
+			<div v-if="distribution">
+				<b class="mb-3 block text-sm text-gray-400">
+					{{ $t('Total') }} {{ storage.data.attributes.used }} {{ $t('of') }} {{ storage.data.attributes.capacity }} {{ $t('Used') }}
+				</b>
+				<ProgressLine :data="distribution" />
+			</div>
+		</div>
+
         <div v-if="config.storageLimit && ! user.data.attributes.subscription" class="card shadow-card">
             <FormLabel>
                 {{ $t('user_box_storage.title') }}
@@ -28,32 +41,17 @@
                 </ValidationProvider>
             </ValidationObserver>
         </div>
-
-        <PageTabGroup>
-            <FormLabel>{{ $t('storage.sec_details') }}</FormLabel>
-            <StorageItemDetail
-                    type="disk"
-                    :title="$t('storage.total_used', {used: storage.attributes.used})"
-                    :percentage="storage.attributes.percentage"
-                    :used="$t('storage.total_capacity', {capacity: storage.attributes.capacity})"
-            />
-            <StorageItemDetail type="images" :title="$t('storage.images')" :percentage="storage.meta.images.percentage" :used="storage.meta.images.used" />
-            <StorageItemDetail type="videos" :title="$t('storage.videos')" :percentage="storage.meta.videos.percentage" :used="storage.meta.videos.used" />
-            <StorageItemDetail type="audios" :title="$t('storage.audios')" :percentage="storage.meta.audios.percentage" :used="storage.meta.audios.used" />
-            <StorageItemDetail type="documents" :title="$t('storage.documents')" :percentage="storage.meta.documents.percentage" :used="storage.meta.documents.used" />
-            <StorageItemDetail type="others" :title="$t('storage.others')" :percentage="storage.meta.others.percentage" :used="storage.meta.others.used" />
-        </PageTabGroup>
     </PageTab>
 </template>
 
 <script>
+	import ProgressLine from "../../../../components/Admin/ProgressLine";
 	import AppInputText from "../../../../components/Admin/AppInputText";
     import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
     import InfoBox from '/resources/js/components/Others/Forms/InfoBox'
     import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
     import PageTab from '/resources/js/components/Others/Layout/PageTab'
     import {ValidationProvider, ValidationObserver} from 'vee-validate/dist/vee-validate.full'
-    import StorageItemDetail from '/resources/js/components/Others/StorageItemDetail'
     import ButtonBase from '/resources/js/components/FilesView/ButtonBase'
     import SetupBox from '/resources/js/components/Others/Forms/SetupBox'
     import {required} from 'vee-validate/dist/rules'
@@ -67,6 +65,7 @@
 			'user'
 		],
         components: {
+			ProgressLine,
 			AppInputText,
             PageTabGroup,
             FormLabel,
@@ -74,7 +73,6 @@
             InfoBox,
             ValidationProvider,
             ValidationObserver,
-            StorageItemDetail,
             ButtonBase,
             SetupBox,
             required,
@@ -88,6 +86,7 @@
                 isSendingRequest: false,
                 capacity: undefined,
                 storage: undefined,
+				distribution: undefined,
             }
         },
         methods: {
@@ -147,7 +146,10 @@
             getStorageDetails() {
                 axios.get('/api/admin/users/' + this.$route.params.id + '/storage')
                     .then(response => {
-                        this.storage = response.data.data
+						this.distribution = this.$mapStorageUsage(response.data)
+
+						this.storage = response.data
+
                         this.isLoading = false
                     })
             }
diff --git a/resources/js/views/User/Storage.vue b/resources/js/views/User/Storage.vue
index 54a9d251..f2d2b81c 100644
--- a/resources/js/views/User/Storage.vue
+++ b/resources/js/views/User/Storage.vue
@@ -1,53 +1,49 @@
 <template>
-    <PageTab v-if="storage">
-        <PageTabGroup>
-            <FormLabel>{{ $t('storage.sec_capacity') }}</FormLabel>
-            <StorageItemDetail type="disk" :title="$t('storage.total_used', {used: storage.attributes.used})" :percentage="storage.attributes.percentage" :used="$t('storage.total_capacity', {capacity: storage.attributes.capacity})"/>
-        </PageTabGroup>
-        <PageTabGroup>
-            <FormLabel>{{ $t('storage.sec_details') }}</FormLabel>
-            <StorageItemDetail type="images" :title="$t('storage.images')" :percentage="storage.meta.images.percentage" :used="storage.meta.images.used" />
-            <StorageItemDetail type="videos" :title="$t('storage.videos')" :percentage="storage.meta.videos.percentage" :used="storage.meta.videos.used" />
-            <StorageItemDetail type="audios" :title="$t('storage.audios')" :percentage="storage.meta.audios.percentage" :used="storage.meta.audios.used" />
-            <StorageItemDetail type="documents" :title="$t('storage.documents')" :percentage="storage.meta.documents.percentage" :used="storage.meta.documents.used" />
-            <StorageItemDetail type="others" :title="$t('storage.others')" :percentage="storage.meta.others.percentage" :used="storage.meta.others.used" />
-        </PageTabGroup>
+    <PageTab>
+		<div class="card shadow-card">
+			<FormLabel icon="hard-drive">
+                {{ $t('Storage Usage') }}
+            </FormLabel>
+
+			<div v-if="distribution">
+				<b class="mb-3 block text-sm text-gray-400">
+					{{ $t('Total') }} {{ storage.data.attributes.used }} {{ $t('of') }} {{ storage.data.attributes.capacity }} {{ $t('Used') }}
+				</b>
+				<ProgressLine :data="distribution" />
+			</div>
+		</div>
     </PageTab>
 </template>
 
 <script>
+	import ProgressLine from "../../components/Admin/ProgressLine";
     import FormLabel from '/resources/js/components/Others/Forms/FormLabel'
-    import PageTabGroup from '/resources/js/components/Others/Layout/PageTabGroup'
     import PageTab from '/resources/js/components/Others/Layout/PageTab'
-    import StorageItemDetail from '/resources/js/components/Others/StorageItemDetail'
-    import MobileHeader from '/resources/js/components/Mobile/MobileHeader'
-    import SectionTitle from '/resources/js/components/Others/SectionTitle'
-    import PageHeader from '/resources/js/components/Others/PageHeader'
     import Spinner from '/resources/js/components/FilesView/Spinner'
     import axios from 'axios'
 
     export default {
         name: 'Storage',
         components: {
-            PageTabGroup,
+			ProgressLine,
             FormLabel,
             PageTab,
-            StorageItemDetail,
-            SectionTitle,
-            MobileHeader,
-            PageHeader,
             Spinner,
         },
         data() {
             return {
                 isLoading: true,
-                storage: undefined,
+				distribution: undefined,
+				storage: undefined
             }
         },
         created() {
             axios.get('/api/user/storage')
                 .then(response => {
-                    this.storage = response.data.data
+					this.distribution = this.$mapStorageUsage(response.data)
+
+					this.storage = response.data
+
                     this.isLoading = false
                 })
         }