diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 849e8042..8b65eba4 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -29,7 +29,7 @@
     "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=a2eed5073e52410cab54",
     "/chunks/files.js": "/chunks/files.js?id=b738eb9054e663cc32b7",
     "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js": "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js?id=b646ec02fb9d6a497e74",
-    "/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=30316e46ee9a782d4552",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=d993829b1f84eb603c66",
     "/chunks/files~chunks/shared-page.js": "/chunks/files~chunks/shared-page.js?id=47ade53389e84dd64310",
     "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=d5e39543eeb619cb5513",
     "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=be9304e6ba2c61b6cab3",
@@ -75,145 +75,20 @@
     "/chunks/user-storage.js": "/chunks/user-storage.js?id=5cfec8a8f8a8aef24ef2",
     "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=c001bef2d6d5171cb359",
     "/chunks/users.js": "/chunks/users.js?id=6e68cb068f69fba3199c",
-    "/js/main.e9267f5855b7b9bf8a61.hot-update.js": "/js/main.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/admin.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/admin.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/admin-account.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/admin-account.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/app-index.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/app-index.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/app-settings.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/app-settings.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/app-setup.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/app-setup.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/billings-detail.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/billings-detail.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/contact-us.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/contact-us.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/dashboard.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/dashboard.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/database.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/database.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/environment-setup.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/environment-setup.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/files.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/files.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared-page.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/installation-disclaimer.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/installation-disclaimer.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/landing-page.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/landing-page.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/plan-create.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/plan-create.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/plan-subscribers.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/plan-subscribers.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/profile.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/profile.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/purchase-code.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/purchase-code.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/settings.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/settings.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/settings-create-payment-methods.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/settings-create-payment-methods.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/settings-invoices.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/settings-invoices.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/settings-payment-methods.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/settings-payment-methods.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/settings-subscription.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/settings-subscription.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/shared-page.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/shared-page.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/sign-in.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/sign-in.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/sign-up.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/sign-up.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/stripe-credentials.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/stripe-credentials.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/subscription-plans.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/subscription-plans.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/upgrade.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/upgrade.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/upgrade-billing.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/upgrade-billing.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/user-invoices.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/user-invoices.e9267f5855b7b9bf8a61.hot-update.js",
-    "/chunks/user-subscription.e9267f5855b7b9bf8a61.hot-update.js": "/chunks/user-subscription.e9267f5855b7b9bf8a61.hot-update.js",
-    "/js/main.871f26d57ff984531ed7.hot-update.js": "/js/main.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/admin.871f26d57ff984531ed7.hot-update.js": "/chunks/admin.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/admin-account.871f26d57ff984531ed7.hot-update.js": "/chunks/admin-account.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.871f26d57ff984531ed7.hot-update.js": "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.871f26d57ff984531ed7.hot-update.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/app-index.871f26d57ff984531ed7.hot-update.js": "/chunks/app-index.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/app-settings.871f26d57ff984531ed7.hot-update.js": "/chunks/app-settings.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/app-setup.871f26d57ff984531ed7.hot-update.js": "/chunks/app-setup.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/billings-detail.871f26d57ff984531ed7.hot-update.js": "/chunks/billings-detail.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/contact-us.871f26d57ff984531ed7.hot-update.js": "/chunks/contact-us.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/dashboard.871f26d57ff984531ed7.hot-update.js": "/chunks/dashboard.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/database.871f26d57ff984531ed7.hot-update.js": "/chunks/database.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/environment-setup.871f26d57ff984531ed7.hot-update.js": "/chunks/environment-setup.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/files.871f26d57ff984531ed7.hot-update.js": "/chunks/files.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared-page.871f26d57ff984531ed7.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/installation-disclaimer.871f26d57ff984531ed7.hot-update.js": "/chunks/installation-disclaimer.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/landing-page.871f26d57ff984531ed7.hot-update.js": "/chunks/landing-page.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/plan-create.871f26d57ff984531ed7.hot-update.js": "/chunks/plan-create.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/plan-subscribers.871f26d57ff984531ed7.hot-update.js": "/chunks/plan-subscribers.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/profile.871f26d57ff984531ed7.hot-update.js": "/chunks/profile.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/purchase-code.871f26d57ff984531ed7.hot-update.js": "/chunks/purchase-code.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/settings.871f26d57ff984531ed7.hot-update.js": "/chunks/settings.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/settings-create-payment-methods.871f26d57ff984531ed7.hot-update.js": "/chunks/settings-create-payment-methods.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/settings-invoices.871f26d57ff984531ed7.hot-update.js": "/chunks/settings-invoices.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/settings-payment-methods.871f26d57ff984531ed7.hot-update.js": "/chunks/settings-payment-methods.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/settings-subscription.871f26d57ff984531ed7.hot-update.js": "/chunks/settings-subscription.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/shared-page.871f26d57ff984531ed7.hot-update.js": "/chunks/shared-page.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/sign-in.871f26d57ff984531ed7.hot-update.js": "/chunks/sign-in.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/sign-up.871f26d57ff984531ed7.hot-update.js": "/chunks/sign-up.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/stripe-credentials.871f26d57ff984531ed7.hot-update.js": "/chunks/stripe-credentials.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/subscription-plans.871f26d57ff984531ed7.hot-update.js": "/chunks/subscription-plans.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/upgrade.871f26d57ff984531ed7.hot-update.js": "/chunks/upgrade.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/upgrade-billing.871f26d57ff984531ed7.hot-update.js": "/chunks/upgrade-billing.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/user-invoices.871f26d57ff984531ed7.hot-update.js": "/chunks/user-invoices.871f26d57ff984531ed7.hot-update.js",
-    "/chunks/user-subscription.871f26d57ff984531ed7.hot-update.js": "/chunks/user-subscription.871f26d57ff984531ed7.hot-update.js",
-    "/js/main.c7cbbf3360eac9eeae3b.hot-update.js": "/js/main.c7cbbf3360eac9eeae3b.hot-update.js",
-    "/js/main.48f0bfae14f4ed46dea5.hot-update.js": "/js/main.48f0bfae14f4ed46dea5.hot-update.js",
-    "/js/main.1492c66807829942e717.hot-update.js": "/js/main.1492c66807829942e717.hot-update.js",
-    "/js/main.149679330c73de8257ce.hot-update.js": "/js/main.149679330c73de8257ce.hot-update.js",
-    "/js/main.cd0935260de5c844fd32.hot-update.js": "/js/main.cd0935260de5c844fd32.hot-update.js",
-    "/js/main.32716bf68f26a81cfa90.hot-update.js": "/js/main.32716bf68f26a81cfa90.hot-update.js",
-    "/js/main.d41315820dc6aea7c657.hot-update.js": "/js/main.d41315820dc6aea7c657.hot-update.js",
-    "/js/main.5066ec5f43b73a31faf2.hot-update.js": "/js/main.5066ec5f43b73a31faf2.hot-update.js",
-    "/js/main.769c8f8865ecbda96421.hot-update.js": "/js/main.769c8f8865ecbda96421.hot-update.js",
-    "/js/main.162963d9959ea402ef8b.hot-update.js": "/js/main.162963d9959ea402ef8b.hot-update.js",
-    "/js/main.91cbbb4409a74966af6a.hot-update.js": "/js/main.91cbbb4409a74966af6a.hot-update.js",
-    "/js/main.c63ea0fca2b42d76235a.hot-update.js": "/js/main.c63ea0fca2b42d76235a.hot-update.js",
-    "/js/main.61101ac1662fa9d0232c.hot-update.js": "/js/main.61101ac1662fa9d0232c.hot-update.js",
-    "/js/main.1242d7225c618db86030.hot-update.js": "/js/main.1242d7225c618db86030.hot-update.js",
-    "/js/main.66e40767781497dcc735.hot-update.js": "/js/main.66e40767781497dcc735.hot-update.js",
-    "/js/main.c7f0b6550eda01fd6dae.hot-update.js": "/js/main.c7f0b6550eda01fd6dae.hot-update.js",
-    "/js/main.0bc82a61de9040aa9539.hot-update.js": "/js/main.0bc82a61de9040aa9539.hot-update.js",
-    "/js/main.175370b95ce7f9dbcdb9.hot-update.js": "/js/main.175370b95ce7f9dbcdb9.hot-update.js",
-    "/js/main.fb849b93bd7d0469758b.hot-update.js": "/js/main.fb849b93bd7d0469758b.hot-update.js",
-    "/js/main.d2432b2c18142aad5a21.hot-update.js": "/js/main.d2432b2c18142aad5a21.hot-update.js",
-    "/js/main.7a9740b11b92a4ead4fa.hot-update.js": "/js/main.7a9740b11b92a4ead4fa.hot-update.js",
-    "/js/main.eee8fc565d122b953f31.hot-update.js": "/js/main.eee8fc565d122b953f31.hot-update.js",
-    "/js/main.ae97dccedd08fa79279d.hot-update.js": "/js/main.ae97dccedd08fa79279d.hot-update.js",
-    "/js/main.474b6a73e5b579a1e9ed.hot-update.js": "/js/main.474b6a73e5b579a1e9ed.hot-update.js",
-    "/js/main.6949b1ebc0f5b757365a.hot-update.js": "/js/main.6949b1ebc0f5b757365a.hot-update.js",
-    "/js/main.5e480bca4e173abfb24f.hot-update.js": "/js/main.5e480bca4e173abfb24f.hot-update.js",
-    "/js/main.6dbff4f58d8589621e27.hot-update.js": "/js/main.6dbff4f58d8589621e27.hot-update.js",
-    "/js/main.5cdc498c12306d7764bb.hot-update.js": "/js/main.5cdc498c12306d7764bb.hot-update.js",
-    "/js/main.79072d9d504649c01f67.hot-update.js": "/js/main.79072d9d504649c01f67.hot-update.js",
-    "/js/main.cecd5fa1145045127bde.hot-update.js": "/js/main.cecd5fa1145045127bde.hot-update.js",
-    "/js/main.44249911ef43f623ae5d.hot-update.js": "/js/main.44249911ef43f623ae5d.hot-update.js",
-    "/js/main.cebf662867612eafd237.hot-update.js": "/js/main.cebf662867612eafd237.hot-update.js",
-    "/js/main.28765658e4d7c7ed000c.hot-update.js": "/js/main.28765658e4d7c7ed000c.hot-update.js",
-    "/js/main.dbad4f2ade50b9b98193.hot-update.js": "/js/main.dbad4f2ade50b9b98193.hot-update.js",
-    "/js/main.fb1d38fcc5c9c2831912.hot-update.js": "/js/main.fb1d38fcc5c9c2831912.hot-update.js",
-    "/js/main.e4acc136078fb68318d7.hot-update.js": "/js/main.e4acc136078fb68318d7.hot-update.js",
-    "/js/main.540c863212264a8c42da.hot-update.js": "/js/main.540c863212264a8c42da.hot-update.js",
-    "/js/main.83a7111596ca49e3bd23.hot-update.js": "/js/main.83a7111596ca49e3bd23.hot-update.js",
-    "/js/main.31d2eff7bdada6452dbf.hot-update.js": "/js/main.31d2eff7bdada6452dbf.hot-update.js",
-    "/js/main.f21abaadb891263f7f93.hot-update.js": "/js/main.f21abaadb891263f7f93.hot-update.js",
-    "/js/main.77884d67732b2ef05146.hot-update.js": "/js/main.77884d67732b2ef05146.hot-update.js",
-    "/js/main.3a47ec594f1f1b0f9e33.hot-update.js": "/js/main.3a47ec594f1f1b0f9e33.hot-update.js",
-    "/js/main.8fca0b061990af84b610.hot-update.js": "/js/main.8fca0b061990af84b610.hot-update.js",
-    "/js/main.fe789446b8915dc37dd0.hot-update.js": "/js/main.fe789446b8915dc37dd0.hot-update.js",
-    "/js/main.4f8c1af81d1721ffe435.hot-update.js": "/js/main.4f8c1af81d1721ffe435.hot-update.js",
-    "/js/main.7ecfd103fcf6dd43b21f.hot-update.js": "/js/main.7ecfd103fcf6dd43b21f.hot-update.js",
-    "/js/main.9b91d9264832912ecc89.hot-update.js": "/js/main.9b91d9264832912ecc89.hot-update.js",
-    "/js/main.1e35e3f51f8da275c4f6.hot-update.js": "/js/main.1e35e3f51f8da275c4f6.hot-update.js",
-    "/js/main.42f2295d79b1bb4ec06b.hot-update.js": "/js/main.42f2295d79b1bb4ec06b.hot-update.js",
-    "/js/main.320cabdf4e5ea516b255.hot-update.js": "/js/main.320cabdf4e5ea516b255.hot-update.js",
-    "/js/main.00dcef1ff43e011fa18c.hot-update.js": "/js/main.00dcef1ff43e011fa18c.hot-update.js",
-    "/js/main.18238b039c77a37616e6.hot-update.js": "/js/main.18238b039c77a37616e6.hot-update.js",
-    "/js/main.29278b44925c9c522edc.hot-update.js": "/js/main.29278b44925c9c522edc.hot-update.js",
-    "/js/main.1ae48c4c36cfeffcb800.hot-update.js": "/js/main.1ae48c4c36cfeffcb800.hot-update.js",
-    "/js/main.9277dcd74ffc60466145.hot-update.js": "/js/main.9277dcd74ffc60466145.hot-update.js",
-    "/js/main.02a18bb60dda8cfe941d.hot-update.js": "/js/main.02a18bb60dda8cfe941d.hot-update.js",
-    "/js/main.82da70d4ec9cc24f9a2b.hot-update.js": "/js/main.82da70d4ec9cc24f9a2b.hot-update.js",
-    "/js/main.796b2f1e94940c793e01.hot-update.js": "/js/main.796b2f1e94940c793e01.hot-update.js",
-    "/js/main.eb83066d5e7c3a1ae75d.hot-update.js": "/js/main.eb83066d5e7c3a1ae75d.hot-update.js",
-    "/js/main.6c2e67f84646faf9706b.hot-update.js": "/js/main.6c2e67f84646faf9706b.hot-update.js",
-    "/js/main.a8fb774ab90ddd224242.hot-update.js": "/js/main.a8fb774ab90ddd224242.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared-page.f4f301a3d5be1c275da9.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.f4f301a3d5be1c275da9.hot-update.js",
-    "/chunks/files~chunks/shared-files~chunks/shared-page.d6e83650cef181b768a9.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.d6e83650cef181b768a9.hot-update.js",
-    "/js/main.f8a13e30e927d22524fd.hot-update.js": "/js/main.f8a13e30e927d22524fd.hot-update.js",
-    "/js/main.88b003fcdc776fcec402.hot-update.js": "/js/main.88b003fcdc776fcec402.hot-update.js",
-    "/js/main.4beb0b0d19a1137453ed.hot-update.js": "/js/main.4beb0b0d19a1137453ed.hot-update.js",
-    "/js/main.a96076649da6fb28b76f.hot-update.js": "/js/main.a96076649da6fb28b76f.hot-update.js",
-    "/js/main.a49257e55c71e014158e.hot-update.js": "/js/main.a49257e55c71e014158e.hot-update.js",
-    "/js/main.1edad3b830f916beac27.hot-update.js": "/js/main.1edad3b830f916beac27.hot-update.js",
-    "/js/main.c6672597ea7635cf44a0.hot-update.js": "/js/main.c6672597ea7635cf44a0.hot-update.js",
-    "/js/main.5124895a5f5c73a6e74e.hot-update.js": "/js/main.5124895a5f5c73a6e74e.hot-update.js"
+    "/js/main.93ff83c5f5a67dcd8559.hot-update.js": "/js/main.93ff83c5f5a67dcd8559.hot-update.js",
+    "/js/main.2158ef4095124a5356a4.hot-update.js": "/js/main.2158ef4095124a5356a4.hot-update.js",
+    "/js/main.c6eb4dff1a8ea3b6a849.hot-update.js": "/js/main.c6eb4dff1a8ea3b6a849.hot-update.js",
+    "/js/main.f1f5dfc5b48d11baaac5.hot-update.js": "/js/main.f1f5dfc5b48d11baaac5.hot-update.js",
+    "/js/main.865581728f06bb0befb4.hot-update.js": "/js/main.865581728f06bb0befb4.hot-update.js",
+    "/js/main.40c34bf4d214e766857b.hot-update.js": "/js/main.40c34bf4d214e766857b.hot-update.js",
+    "/js/main.0c2b7dbcc215122a5bac.hot-update.js": "/js/main.0c2b7dbcc215122a5bac.hot-update.js",
+    "/js/main.500fcd77a1acf6d204d0.hot-update.js": "/js/main.500fcd77a1acf6d204d0.hot-update.js",
+    "/js/main.cb56d3f2fa5f75b66993.hot-update.js": "/js/main.cb56d3f2fa5f75b66993.hot-update.js",
+    "/js/main.42863a771cbbf13408d8.hot-update.js": "/js/main.42863a771cbbf13408d8.hot-update.js",
+    "/js/main.d413b0564c5ba3b1f5c0.hot-update.js": "/js/main.d413b0564c5ba3b1f5c0.hot-update.js",
+    "/js/main.2c827f4bced0e065dd6f.hot-update.js": "/js/main.2c827f4bced0e065dd6f.hot-update.js",
+    "/js/main.ea6dbc6d6fa7ef1931d3.hot-update.js": "/js/main.ea6dbc6d6fa7ef1931d3.hot-update.js",
+    "/js/main.a64c05d8dd6934c92aba.hot-update.js": "/js/main.a64c05d8dd6934c92aba.hot-update.js",
+    "/js/main.5ec2576d502705dfb0f1.hot-update.js": "/js/main.5ec2576d502705dfb0f1.hot-update.js",
+    "/js/main.72c83ac94af4f4dc33bc.hot-update.js": "/js/main.72c83ac94af4f4dc33bc.hot-update.js"
 }
diff --git a/resources/js/components/FilesView/FileBrowser.vue b/resources/js/components/FilesView/FileBrowser.vue
index 9fd86232..aeb2ce04 100644
--- a/resources/js/components/FilesView/FileBrowser.vue
+++ b/resources/js/components/FilesView/FileBrowser.vue
@@ -34,7 +34,7 @@
                             @dragstart="dragStart(item)"
                             @drop.stop.native.prevent="dragFinish(item, $event)"
                             @contextmenu.native.prevent="contextMenu($event, item)"
-                            :data="item"
+                            :item="item"
                             v-for="item in data"
                             :key="item.unique_id"
                             class="file-item"
@@ -55,7 +55,7 @@
                             @dragstart="dragStart(item)"
                             @drop.native.prevent="dragFinish(item, $event)"
                             @contextmenu.native.prevent="contextMenu($event, item)"
-                            :data="item"
+                            :item="item"
                             v-for="item in data"
                             :key="item.unique_id"
                             class="file-item"
diff --git a/resources/js/components/FilesView/FileItemGrid.vue b/resources/js/components/FilesView/FileItemGrid.vue
index a0da004f..d4f10ad5 100644
--- a/resources/js/components/FilesView/FileItemGrid.vue
+++ b/resources/js/components/FilesView/FileItemGrid.vue
@@ -8,52 +8,49 @@
             <div class="icon-item">
 
                 <!-- MultiSelecting for the mobile version -->
-                <div :class="{'check-select-folder' : this.data.type === 'folder', 'check-select' : this.data.type !== 'folder'}" v-if="multiSelectMode">
+                <div :class="{'check-select-folder' : this.item.type === 'folder', 'check-select' : this.item.type !== 'folder'}" v-if="multiSelectMode">
                     <div class="select-box" :class="{'select-box-active' : isClicked } ">
                         <CheckIcon v-if="isClicked" class="icon" size="17"/>
                     </div>
                 </div>
 
                 <!--If is file or image, then link item-->
-                <span v-if="isFile || (isImage && !data.thumbnail)" class="file-icon-text">
-                    {{ data.mimetype }}
+                <span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text">
+                    {{ item.mimetype }}
                 </span>
 
                 <!--Folder thumbnail-->
-                <FontAwesomeIcon v-if="isFile || (isImage && !data.thumbnail)" class="file-icon" icon="file"/>
+                <FontAwesomeIcon v-if="isFile || (isImage && !item.thumbnail)" class="file-icon" icon="file"/>
 
                 <!--Image thumbnail-->
-                <img loading="lazy" v-if="isImage && data.thumbnail" class="image" :src="data.thumbnail" :alt="data.name"/>
+                <img loading="lazy" v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name"/>
 
-                 <!-- If folder have set emoji -->
-                <Emoji class="emoji" v-if="isFolder && setFolderEmojiOrColor" :emoji="setFolderEmojiOrColor" size="80" />
-
-                <!--Else show only folder icon-->
-                <FontAwesomeIcon v-if="isFolder && !setFolderEmojiOrColor" :ref="`folder${this.data.unique_id}`" :class="{'is-deleted': isDeleted}" class="folder-icon" icon="folder"/>
+                 <!--Else show only folder icon-->
+                <FolderIcon v-if="isFolder" :item="item" class="folder"/>
 
             </div>
 
             <!--Name-->
             <div class="item-name">
                 <!--Name-->
-                <b :ref="this.data.unique_id" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName" class="name">
+                <b :ref="this.item.unique_id" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName" class="name">
                     {{ itemName }}
                 </b>
 
                 <div class="item-info">
 
                     <!--Shared Icon-->
-                    <div v-if="$checkPermission('master') && data.shared" class="item-shared">
+                    <div v-if="$checkPermission('master') && item.shared" class="item-shared">
                         <link-icon size="12" class="shared-icon"></link-icon>
                     </div>
 
                     <!--Participant owner Icon-->
-                    <div v-if="$checkPermission('master') && data.user_scope !== 'master'" class="item-shared">
+                    <div v-if="$checkPermission('master') && item.user_scope !== 'master'" class="item-shared">
                         <user-plus-icon size="12" class="shared-icon"></user-plus-icon>
                     </div>
 
                     <!--Filesize-->
-                    <span v-if="! isFolder" class="item-size">{{ data.filesize }}</span>
+                    <span v-if="! isFolder" class="item-size">{{ item.filesize }}</span>
 
                     <!--Folder item counts-->
                     <span v-if="isFolder" class="item-length">
@@ -71,61 +68,60 @@
 
 <script>
 import { LinkIcon, UserPlusIcon, CheckIcon } from 'vue-feather-icons'
-import Emoji from '@/components/Others/Emoji'
+import FolderIcon from '@/components/FilesView/FolderIcon'
 import { debounce } from 'lodash'
 import { mapGetters } from 'vuex'
 import { events } from '@/bus'
 
 export default {
     name: 'FileItemGrid',
-    props: ['data'],
+    props: ['item'],
     components: {
         UserPlusIcon,
         CheckIcon,
         LinkIcon,
-        Emoji
+        FolderIcon,
     },
     computed: {
         ...mapGetters([
-            'FilePreviewType', 'sharedDetail', 'fileInfoDetail'
+            'FilePreviewType', 'sharedDetail', 'fileInfoDetail', 'data'
         ]),
-         setFolderEmojiOrColor(){
+         folderEmojiOrColor(){
 
              // If folder have set some color
-            if(this.data.icon_color) {
+            if(this.item.icon_color) {
                  this.$nextTick(() => {
-                    this.$refs[`folder${this.data.unique_id}`].firstElementChild.style.fill = `${this.data.icon_color}`
+                    this.$refs[`folder${this.item.unique_id}`].firstElementChild.style.fill = `${this.item.icon_color}`
                 })
                 return false
             }
                
             // If folder have set some emoji
-            if(this.data.icon_emoji)
-                return this.data.icon_emoji
+            if(this.item.icon_emoji)
+                return this.item.icon_emoji
 
         },
-        ...mapGetters({ allData: 'data' }),
         isClicked() {
-            return this.fileInfoDetail.some(element => element.unique_id == this.data.unique_id)
+            return this.fileInfoDetail.some(element => element.unique_id == this.item.unique_id)
         },
         isFolder() {
-            return this.data.type === 'folder'
+            return this.item.type === 'folder'
         },
         isFile() {
-            return this.data.type !== 'folder' && this.data.type !== 'image'
+            return this.item.type !== 'folder' && this.item.type !== 'image'
         },
         isPdf() {
-            return this.data.mimetype === 'pdf'
+            return this.item.mimetype === 'pdf'
         },
         isImage() {
-            return this.data.type === 'image'
+            return this.item.type === 'image'
         },
         isVideo() {
-            return this.data.type === 'video'
+            return this.item.type === 'video'
         },
         isAudio() {
             let mimetypes = ['mpeg', 'mp3', 'mp4', 'wan', 'flac']
-            return mimetypes.includes(this.data.mimetype) && this.data.type === 'audio'
+            return mimetypes.includes(this.item.mimetype) && this.item.type === 'audio'
         },
         canEditName() {
             return !this.$isMobile()
@@ -140,13 +136,13 @@ export default {
             return !this.isDeleted && this.$checkPermission(['master', 'editor'])
         },
         timeStamp() {
-            return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', this.data.deleted_at) : this.data.created_at
+            return this.item.deleted_at ? this.$t('item_thumbnail.deleted_at', this.item.deleted_at) : this.item.created_at
         },
         folderItems() {
-            return this.data.deleted_at ? this.data.trashed_items : this.data.items
+            return this.item.deleted_at ? this.item.trashed_items : this.item.items
         },
         isDeleted() {
-            return this.data.deleted_at ? true : false
+            return this.item.deleted_at ? true : false
         }
     },
     data() {
@@ -163,12 +159,12 @@ export default {
         showItemActions() {
             // Load file info detail
             this.$store.commit('CLEAR_FILEINFO_DETAIL')
-            this.$store.commit('GET_FILEINFO_DETAIL', this.data)
+            this.$store.commit('GET_FILEINFO_DETAIL', this.item)
 
             events.$emit('mobileMenu:show')
         },
         dragEnter() {
-            if (this.data.type !== 'folder') return
+            if (this.item.type !== 'folder') return
 
             this.area = true
         },
@@ -185,15 +181,15 @@ export default {
                 
                 if (e.ctrlKey || e.metaKey && !e.shiftKey) {
                     // Click + Ctrl
-                    if (this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) {
-                        this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data)
+                    if (this.fileInfoDetail.some(item => item.unique_id === this.item.unique_id)) {
+                        this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.item)
                     } else {
-                        this.$store.commit('GET_FILEINFO_DETAIL', this.data)
+                        this.$store.commit('GET_FILEINFO_DETAIL', this.item)
                     }
                 } else if (e.shiftKey) {
                     // Click + Shift
-                    let lastItem = this.allData.indexOf(this.fileInfoDetail[this.fileInfoDetail.length - 1])
-                    let clickedItem = this.allData.indexOf(this.data)
+                    let lastItem = this.data.indexOf(this.fileInfoDetail[this.fileInfoDetail.length - 1])
+                    let clickedItem = this.data.indexOf(this.item)
 
                     // If Click + Shift + Ctrl dont remove already selected items
                     if (!e.ctrlKey && !e.metaKey) {
@@ -203,18 +199,18 @@ export default {
                     //Shift selecting from top to bottom
                     if (lastItem < clickedItem) {
                         for (let i = lastItem; i <= clickedItem; i++) {
-                            this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
+                            this.$store.commit('GET_FILEINFO_DETAIL', this.data[i])
                         }
                         //Shift selecting from bottom to top
                     } else {
                         for (let i = lastItem; i >= clickedItem; i--) {
-                            this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
+                            this.$store.commit('GET_FILEINFO_DETAIL', this.data[i])
                         }
                     }
                 } else {
                     // Click
                     this.$store.commit('CLEAR_FILEINFO_DETAIL')
-                    this.$store.commit('GET_FILEINFO_DETAIL', this.data)
+                    this.$store.commit('GET_FILEINFO_DETAIL', this.item)
                 }
             }
 
@@ -223,25 +219,25 @@ export default {
                 if (this.$isMobile() && this.isFolder) {
                     // Go to folder
                     if (this.$isThisLocation('public')) {
-                        this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
+                        this.$store.dispatch('browseShared', [{ folder: this.item, back: false, init: false }])
                     } else {
-                        this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }])
+                        this.$store.dispatch('getFolder', [{ folder: this.item, back: false, init: false }])
                     }
                 }
 
                 if (this.$isMobile()) {
                     if (this.isImage || this.isVideo || this.isAudio) {
-                        this.$store.commit('GET_FILEINFO_DETAIL', this.data)
+                        this.$store.commit('GET_FILEINFO_DETAIL', this.item)
                         events.$emit('fileFullPreview:show')
                     }
                 }
             }
 
             if (this.multiSelectMode && this.$isMobile()) {
-                if (this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) {
-                    this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data)
+                if (this.fileInfoDetail.some(item => item.unique_id === this.item.unique_id)) {
+                    this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.item)
                 } else {
-                    this.$store.commit('GET_FILEINFO_DETAIL', this.data)
+                    this.$store.commit('GET_FILEINFO_DETAIL', this.item)
                 }
             }
             // Get target classname
@@ -259,7 +255,7 @@ export default {
                 events.$emit('fileFullPreview:show')
 
             } else if (this.isFile || !this.isFolder && !this.isPdf && !this.isVideo && !this.isAudio && !this.isImage) {
-                this.$downloadFile(this.data.file_url, this.data.name + '.' + this.data.mimetype)
+                this.$downloadFile(this.item.file_url, this.item.name + '.' + this.item.mimetype)
 
             } else if (this.isFolder) {
 
@@ -267,9 +263,9 @@ export default {
                 this.$store.commit('CLEAR_FILEINFO_DETAIL')
 
                 if (this.$isThisLocation('public')) {
-                    this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
+                    this.$store.dispatch('browseShared', [{ folder: this.item, back: false, init: false }])
                 } else {
-                    this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }])
+                    this.$store.dispatch('getFolder', [{ folder: this.item, back: false, init: false }])
                 }
             }
         },
@@ -279,18 +275,18 @@ export default {
             if (e.target.innerText.trim() === '') return
 
             this.$store.dispatch('renameItem', {
-                unique_id: this.data.unique_id,
-                type: this.data.type,
+                unique_id: this.item.unique_id,
+                type: this.item.type,
                 name: e.target.innerText
             })
         }, 300)
     },
     created() {
-        this.itemName = this.data.name
+        this.itemName = this.item.name
 
          events.$on('newFolder:focus', (unique_id) => {
 
-            if(this.data.unique_id == unique_id) {
+            if(this.item.unique_id == unique_id) {
                 this.$refs[unique_id].focus()
                 document.execCommand('selectAll')
             }
@@ -307,7 +303,7 @@ export default {
         })
         // Change item name
         events.$on('change:name', (item) => {
-            if (this.data.unique_id == item.unique_id) this.itemName = item.name
+            if (this.item.unique_id == item.unique_id) this.itemName = item.name
         })
     }
 }
@@ -481,9 +477,6 @@ export default {
         display: flex;
         align-items: center;
 
-        .emoji {
-            margin: 0 auto;
-        }
 
         .file-link {
             display: block;
@@ -527,19 +520,13 @@ export default {
             pointer-events: none;
         }
 
-        .folder-icon {
-            align-items: flex-end;
-            @include font-size(80);
-            margin: 0 auto;
+        .folder {
+            width: 80px;
+            height: 80px;
+            margin: auto;
 
-            path {
-                fill: $theme;
-            }
-
-            &.is-deleted {
-                path {
-                    fill: $dark_background;
-                }
+            /deep/ .folder-icon {
+                @include font-size(80)
             }
         }
     }
@@ -573,11 +560,17 @@ export default {
             .file-icon-text {
                 @include font-size(12);
             }
+            
 
-            .folder-icon {
-                @include font-size(75);
+            .folder {
+                width: 75px;
+                height: 75px;
                 margin-top: 0;
                 margin-bottom: 0;
+
+                /deep/ .folder-icon {
+                    @include font-size(75)
+                }                
             }
 
             .image {
@@ -619,15 +612,6 @@ export default {
                     stroke: #2F3C54;
                 }
             }
-
-            .folder-icon {
-
-                &.is-deleted {
-                    path {
-                        fill: lighten($dark_mode_foreground, 5%);
-                    }
-                }
-            }
         }
 
         .file-item {
diff --git a/resources/js/components/FilesView/FileItemList.vue b/resources/js/components/FilesView/FileItemList.vue
index 7d6ecdb8..6812239a 100644
--- a/resources/js/components/FilesView/FileItemList.vue
+++ b/resources/js/components/FilesView/FileItemList.vue
@@ -21,43 +21,40 @@
             <!--Thumbnail for item-->
             <div class="icon-item">
                 <!--If is file or image, then link item-->
-                <span v-if="isFile || (isImage && !data.thumbnail)" class="file-icon-text">
-                    {{ data.mimetype | limitCharacters }}
+                <span v-if="isFile || (isImage && !item.thumbnail)" class="file-icon-text">
+                    {{ item.mimetype | limitCharacters }}
                 </span>
 
                 <!--Folder thumbnail-->
-                <FontAwesomeIcon v-if="isFile || (isImage && !data.thumbnail)" class="file-icon" icon="file"/>
+                <FontAwesomeIcon v-if="isFile || (isImage && !item.thumbnail)" class="file-icon" icon="file"/>
 
                 <!--Image thumbnail-->
-                <img loading="lazy" v-if="isImage && data.thumbnail" class="image" :src="data.thumbnail" :alt="data.name"/>
+                <img loading="lazy" v-if="isImage && item.thumbnail" class="image" :src="item.thumbnail" :alt="item.name"/>
 
-                <!-- If folder have set emoji -->
-                <Emoji  v-if="isFolder && setFolderEmojiOrColor" :emoji="setFolderEmojiOrColor" size="52" />
-
-                <!--Else show only folder icon-->
-                <FontAwesomeIcon v-if="isFolder && !setFolderEmojiOrColor" :ref="`folder${this.data.unique_id}`" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder"/>
+                 <!--Else show only folder icon-->
+                <FolderIcon v-if="isFolder" :item="item" class="folder" />
 
             </div>
 
             <!--Name-->
             <div class="item-name">
-                <b :ref="this.data.unique_id" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName" class="name">
+                <b :ref="this.item.unique_id" @input="renameItem" @keydown.delete.stop @click.stop :contenteditable="canEditName" class="name">
                     {{ itemName }}
                 </b>
 
                 <div class="item-info">
                     <!--Shared Icon-->
-                    <div v-if="$checkPermission('master') && data.shared" class="item-shared">
+                    <div v-if="$checkPermission('master') && item.shared" class="item-shared">
                         <link-icon size="12" class="shared-icon"></link-icon>
                     </div>
 
                     <!--Participant owner Icon-->
-                    <div v-if="$checkPermission('master') && data.user_scope !== 'master'" class="item-shared">
+                    <div v-if="$checkPermission('master') && item.user_scope !== 'master'" class="item-shared">
                         <user-plus-icon size="12" class="shared-icon"></user-plus-icon>
                     </div>
 
                     <!--Filesize and timestamp-->
-                    <span v-if="!isFolder" class="item-size">{{ data.filesize }}, {{ timeStamp }}</span>
+                    <span v-if="!isFolder" class="item-size">{{ item.filesize }}, {{ timeStamp }}</span>
 
                     <!--Folder item counts-->
                     <span v-if="isFolder" class="item-length"> {{ folderItems == 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }} </span>
@@ -78,59 +75,43 @@
 
 <script>
 import { LinkIcon, UserPlusIcon, CheckIcon } from 'vue-feather-icons'
-import Emoji from '@/components/Others/Emoji'
+import FolderIcon from '@/components/FilesView/FolderIcon'
 import { debounce } from 'lodash'
 import { mapGetters } from 'vuex'
 import { events } from '@/bus'
 
 export default {
     name: 'FileItemList',
-    props: ['data'],
+    props: ['item'],
     components: {
         UserPlusIcon,
         LinkIcon,
+        FolderIcon,
         CheckIcon,
-        Emoji
     },
     computed: {
-        ...mapGetters(['FilePreviewType', 'fileInfoDetail']),
-        ...mapGetters({ allData: 'data' }),
-        setFolderEmojiOrColor(){
-
-            // If folder have set some icon color
-            if(this.data.icon_color) {
-                 this.$nextTick(() => {
-                    this.$refs[`folder${this.data.unique_id}`].firstElementChild.style.fill = `${this.data.icon_color}`
-                })
-                return false
-            }
-
-            // If folder have set some emoji
-            if(this.data.icon_emoji)
-               return this.data.icon_emoji
-
-        },
+        ...mapGetters(['FilePreviewType', 'fileInfoDetail', 'data']),
         isClicked() {
-            return this.fileInfoDetail.some(element => element.unique_id == this.data.unique_id)
+            return this.fileInfoDetail.some(element => element.unique_id == this.item.unique_id)
         },
         isFolder() {
-            return this.data.type === 'folder'
+            return this.item.type === 'folder'
         },
         isFile() {
-            return this.data.type !== 'folder' && this.data.type !== 'image'
+            return this.item.type !== 'folder' && this.item.type !== 'image'
         },
         isImage() {
-            return this.data.type === 'image'
+            return this.item.type === 'image'
         },
         isPdf() {
-            return this.data.mimetype === 'pdf'
+            return this.item.mimetype === 'pdf'
         },
         isVideo() {
-            return this.data.type === 'video'
+            return this.item.type === 'video'
         },
         isAudio() {
             let mimetypes = ['mpeg', 'mp3', 'mp4', 'wan', 'flac']
-            return mimetypes.includes(this.data.mimetype) && this.data.type === 'audio'
+            return mimetypes.includes(this.item.mimetype) && this.item.type === 'audio'
         },
         canEditName() {
             return !this.$isMobile() && !this.$isThisLocation(['trash', 'trash-root']) && !this.$checkPermission('visitor') && !(this.sharedDetail && this.sharedDetail.type === 'file')
@@ -139,13 +120,13 @@ export default {
             return !this.isDeleted && this.$checkPermission(['master', 'editor'])
         },
         timeStamp() {
-            return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', { time: this.data.deleted_at }) : this.data.created_at
+            return this.item.deleted_at ? this.$t('item_thumbnail.deleted_at', { time: this.item.deleted_at }) : this.item.created_at
         },
         folderItems() {
-            return this.data.deleted_at ? this.data.trashed_items : this.data.items
+            return this.item.deleted_at ? this.item.trashed_items : this.item.items
         },
         isDeleted() {
-            return this.data.deleted_at ? true : false
+            return this.item.deleted_at ? true : false
         }
     },
     filters: {
@@ -172,12 +153,12 @@ export default {
         showItemActions() {
             // Load file info detail
             this.$store.commit('CLEAR_FILEINFO_DETAIL')
-            this.$store.commit('GET_FILEINFO_DETAIL', this.data)
+            this.$store.commit('GET_FILEINFO_DETAIL', this.item)
 
             events.$emit('mobileMenu:show')
         },
         dragEnter() {
-            if (this.data.type !== 'folder') return
+            if (this.item.type !== 'folder') return
 
             this.area = true
         },
@@ -195,15 +176,15 @@ export default {
                 if ((e.ctrlKey || e.metaKey) && !e.shiftKey) {
                     // Click + Ctrl
 
-                    if (this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) {
-                        this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data)
+                    if (this.fileInfoDetail.some(item => item.unique_id === this.item.unique_id)) {
+                        this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.item)
                     } else {
-                        this.$store.commit('GET_FILEINFO_DETAIL', this.data)
+                        this.$store.commit('GET_FILEINFO_DETAIL', this.item)
                     }
                 } else if (e.shiftKey) {
                     // Click + Shift
-                    let lastItem = this.allData.indexOf(this.fileInfoDetail[this.fileInfoDetail.length - 1])
-                    let clickedItem = this.allData.indexOf(this.data)
+                    let lastItem = this.data.indexOf(this.fileInfoDetail[this.fileInfoDetail.length - 1])
+                    let clickedItem = this.data.indexOf(this.item)
 
                     // If Click + Shift + Ctrl dont remove already selected items
                     if (!e.ctrlKey && !e.metaKey) {
@@ -213,18 +194,18 @@ export default {
                     //Shift selecting from top to bottom
                     if (lastItem < clickedItem) {
                         for (let i = lastItem; i <= clickedItem; i++) {
-                            this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
+                            this.$store.commit('GET_FILEINFO_DETAIL', this.data[i])
                         }
                         //Shift selecting from bottom to top
                     } else {
                         for (let i = lastItem; i >= clickedItem; i--) {
-                            this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
+                            this.$store.commit('GET_FILEINFO_DETAIL', this.data[i])
                         }
                     }
                 } else {
                     // Click
                     this.$store.commit('CLEAR_FILEINFO_DETAIL')
-                    this.$store.commit('GET_FILEINFO_DETAIL', this.data)
+                    this.$store.commit('GET_FILEINFO_DETAIL', this.item)
                 }
             }
 
@@ -233,25 +214,25 @@ export default {
                 if (this.$isMobile() && this.isFolder) {
                     // Go to folder
                     if (this.$isThisLocation('public')) {
-                        this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
+                        this.$store.dispatch('browseShared', [{ folder: this.item, back: false, init: false }])
                     } else {
-                        this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }])
+                        this.$store.dispatch('getFolder', [{ folder: this.item, back: false, init: false }])
                     }
                 }
 
                 if (this.$isMobile()) {
                     if (this.isImage || this.isVideo || this.isAudio) {
-                        this.$store.commit('GET_FILEINFO_DETAIL', this.data)
+                        this.$store.commit('GET_FILEINFO_DETAIL', this.item)
                         events.$emit('fileFullPreview:show')
                     }
                 }
             }
 
             if (this.mobileMultiSelect && this.$isMobile()) {
-                if (this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) {
-                    this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data)
+                if (this.fileInfoDetail.some(item => item.unique_id === this.item.unique_id)) {
+                    this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.item)
                 } else {
-                    this.$store.commit('GET_FILEINFO_DETAIL', this.data)
+                    this.$store.commit('GET_FILEINFO_DETAIL', this.item)
                 }
             }
 
@@ -265,7 +246,7 @@ export default {
                 events.$emit('fileFullPreview:show')
 
             } else if (this.isFile || !this.isFolder && !this.isPdf && !this.isVideo && !this.isAudio && !this.isImage) {
-                this.$downloadFile(this.data.file_url, this.data.name + '.' + this.data.mimetype)
+                this.$downloadFile(this.item.file_url, this.item.name + '.' + this.item.mimetype)
 
             } else if (this.isFolder) {
 
@@ -273,9 +254,9 @@ export default {
                 this.$store.commit('CLEAR_FILEINFO_DETAIL')
 
                 if (this.$isThisLocation('public')) {
-                    this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
+                    this.$store.dispatch('browseShared', [{ folder: this.item, back: false, init: false }])
                 } else {
-                    this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }])
+                    this.$store.dispatch('getFolder', [{ folder: this.item, back: false, init: false }])
                 }
             }
         },
@@ -284,19 +265,19 @@ export default {
             if (e.target.innerText.trim() === '') return
 
             this.$store.dispatch('renameItem', {
-                unique_id: this.data.unique_id,
-                type: this.data.type,
+                unique_id: this.item.unique_id,
+                type: this.item.type,
                 name: e.target.innerText
             })
         }, 300)
     },
     created() {
 
-        this.itemName = this.data.name
+        this.itemName = this.item.name
 
         events.$on('newFolder:focus', (unique_id) => {
 
-            if(this.data.unique_id == unique_id) {
+            if(this.item.unique_id == unique_id) {
                 this.$refs[unique_id].focus()
                 document.execCommand('selectAll')
             }
@@ -314,7 +295,7 @@ export default {
 
         // Change item name
         events.$on('change:name', (item) => {
-            if (this.data.unique_id == item.unique_id) this.itemName = item.name
+            if (this.item.unique_id == item.unique_id) this.itemName = item.name
         })
     }
 }
@@ -476,18 +457,13 @@ export default {
         flex: 0 0 50px;
         line-height: 0;
         margin-right: 20px;
+        
+        .folder {
+            width: 52px;
+            height: 52px;
 
-        .folder-icon {
-            @include font-size(52);
-
-            path {
-                fill: $theme;
-            }
-
-            &.is-deleted {
-                path {
-                    fill: $dark_background;
-                }
+            /deep/ .folder-icon {
+                @include font-size(52)
             }
         }
 
@@ -585,14 +561,6 @@ export default {
                     stroke: #2f3c54;
                 }
             }
-
-            .folder-icon {
-                &.is-deleted {
-                    path {
-                        fill: lighten($dark_mode_foreground, 5%);
-                    }
-                }
-            }
         }
 
         .file-item {
diff --git a/resources/js/components/FilesView/FolderIcon.vue b/resources/js/components/FilesView/FolderIcon.vue
new file mode 100644
index 00000000..b61f7743
--- /dev/null
+++ b/resources/js/components/FilesView/FolderIcon.vue
@@ -0,0 +1,66 @@
+<template>
+    <div>
+        <Emoji v-if="folderEmoji" :emoji="folderEmoji"/>
+        <FontAwesomeIcon v-if="!folderEmoji" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder" :style="{fill: `${folderColor}`}"/>
+    </div>
+</template>
+
+
+<script>
+import Emoji from '@/components/Others/Emoji'
+export default {
+    name:"FolderIcon",
+    props: ['item' , 'folderIcon'],
+    components: {Emoji},
+    computed: {
+        isDeleted() {
+            return this.item.deleted_at ? true : false
+        },
+        folderEmoji(){
+            // Return emoji if is changed from rename popup 
+            if(this.folderIcon)
+                return this.folderIcon.emoji ? this.folderIcon.emoji : false
+            
+            // Return emoji if is already set
+            return this.item.icon_emoji ? this.item.icon_emoji : false
+        },
+        folderColor() {
+            // Return color if is changed from rename popup 
+            if(this.folderIcon)
+                return this.folderIcon.color ? this.folderIcon.color : '#00BC7E'
+            
+            // Return color if is already set
+            return this.item.icon_color ? this.item.icon_color : '#00BC7E'    
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@assets/vue-file-manager/_variables';
+@import '@assets/vue-file-manager/_mixins';
+
+.folder-icon {
+
+    path {
+        fill: inherit;
+    }
+
+    &.is-deleted {
+        path {
+            fill: $dark_background;
+        }
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+   
+    .folder-icon {
+        &.is-deleted {
+            path {
+                fill: lighten($dark_mode_foreground, 5%);
+            }
+        }
+    }
+}
+</style>
diff --git a/resources/js/components/Others/Emoji.vue b/resources/js/components/Others/Emoji.vue
index 08aecb83..6998f408 100644
--- a/resources/js/components/Others/Emoji.vue
+++ b/resources/js/components/Others/Emoji.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
-        <div v-if="transferEmoji && !isIos" :style="{width: `${size}px`, height: `${size}px`}"  v-html="transferEmoji"/>
-        <span v-if="transferEmoji && isIos" :style="{fontSize: `${size}px`}">{{transferEmoji}}</span>
+        <div v-if="transferEmoji && !isApple"  v-html="transferEmoji"/>
+        <span v-if="transferEmoji && isApple" class="apple-emoji">{{transferEmoji}}</span>
     </div>
     
 </template>
@@ -10,7 +10,7 @@
 import twemoji from 'twemoji'
 export default {
     name: 'Emoji',
-    props: ['emoji', 'size'],
+    props: ['emoji'],
     computed: {
         transferEmoji () {
             
@@ -24,16 +24,16 @@ export default {
                     }) 
 
             // Check the OS, if is OS not iOS return transfered emoji to twemoji
-            return !this.isIos ? tweomjiParse : this.emoji.char
+            return !this.isApple ? tweomjiParse : this.emoji.char
         },
     },
     data () {
         return {
-            isIos: false
+            isApple: false
         }
     },
     created () {
-        this.isIos = this.$isIos()
+        this.isApple = this.$isApple()
     }
 }
 </script>
diff --git a/resources/js/components/Others/SetFolderIcon.vue b/resources/js/components/Others/SetFolderIcon.vue
index ccdcf9ab..0381c370 100644
--- a/resources/js/components/Others/SetFolderIcon.vue
+++ b/resources/js/components/Others/SetFolderIcon.vue
@@ -418,6 +418,8 @@ export default {
         align-items: center;
 
         .emoji-preview {
+            width: 25px;
+            height: 25px;
             margin-right: 10px;
             margin-left: 6px;
         }
@@ -460,19 +462,20 @@ export default {
     position: relative;
 }
 
-.slide-in-enter-active {
+.slide-in-enter-active
+{
     transition: all 150ms ease;
 }
 
-.slide-in-enter,
-.slide-in-leave-to{
+.slide-in-enter
+{
     opacity: 0;
-    transform: translateY(-300px);
+    transform: translateY(-210px);
 }
 
-.slide-in-enter-to,
-.slide-in-leave {
-    transform: translateY(-152px);
+.slide-in-enter-to
+{
+    transform: translateY(-134px);
 }
 
 @media (max-width: 336px) {
diff --git a/resources/js/components/Others/ThumbnailItem.vue b/resources/js/components/Others/ThumbnailItem.vue
index 029c7601..a57ae559 100644
--- a/resources/js/components/Others/ThumbnailItem.vue
+++ b/resources/js/components/Others/ThumbnailItem.vue
@@ -13,11 +13,8 @@
             <!--Image thumbnail-->
             <img v-if="isImage" class="image" :src="item.thumbnail" :alt="item.name"/>
 
-            <!-- If folder have set emoji -->
-            <Emoji v-if="isFolder && setFolderEmojiOrColor" :emoji="setFolderEmojiOrColor" size="36"/>
-
             <!--Else show only folder icon-->
-            <FontAwesomeIcon ref="folderIcon" v-if="isFolder && !setFolderEmojiOrColor" class="folder-icon" icon="folder"/>
+            <FolderIcon v-if="isFolder" :item="item" :folder-icon="setFolderIcon" class="folder" />
 
         </div>
 
@@ -45,37 +42,14 @@
 
 <script>
     import {mapGetters} from 'vuex'
-    import Emoji from '@/components/Others/Emoji'
+    import FolderIcon from '@/components/FilesView/FolderIcon'
 
     export default {
         name: 'ThumbnailItem',
         props: ['item', 'info', 'setFolderIcon'],
-        components: {Emoji},
+        components: {FolderIcon},
         computed: {
             ...mapGetters(['currentFolder']),
-
-            setFolderEmojiOrColor(){
-
-                // Set icon folder if set folder from rename popup
-                if(this.setFolderIcon){
-
-                    return this.setFolderIcon.emoji 
-                        ? this.setFolderIcon.emoji
-                        : this.$nextTick(() => {
-                            this.$refs.folderIcon.firstElementChild.style.fill = `${this.setFolderIcon.color}`
-                        })  
-                }
-
-                // If folder have already set some icon
-                if(!this.setFolderIcon && (this.item.icon_emoji || this.item.icon_color)){
-
-                    return this.item.icon_emoji 
-                        ? this.item.icon_emoji
-                        : this.$nextTick(() => {
-                            this.$refs.folderIcon.firstElementChild.style.fill = `${this.item.icon_color}`
-                        })
-                }
-            },
             isFolder() {
                 return this.item.type === 'folder'
             },
@@ -137,7 +111,6 @@
             justify-content: center;
             line-height: 0;
 
-
             .file-icon {
                 @include font-size(35);
 
@@ -148,11 +121,12 @@
                 }
             }
 
-            .folder-icon {
-                @include font-size(36);
+            .folder {
+                width: 36px;
+                height: 36px;
 
-                path {
-                    fill: $theme;
+                /deep/ .folder-icon {
+                    @include font-size(36);
                 }
             }
 
diff --git a/resources/js/helpers.js b/resources/js/helpers.js
index eeee98e2..7d194fd3 100644
--- a/resources/js/helpers.js
+++ b/resources/js/helpers.js
@@ -352,7 +352,7 @@ const Helpers = {
 				body.classList.add('windows')
 			}
         }
-        Vue.prototype.$isIos = function() {
+        Vue.prototype.$isApple = function() {
 
             const toMatch = [
                 /iPhone/i,