diff --git a/app/Http/Controllers/FileFunctions/EditItemsController.php b/app/Http/Controllers/FileFunctions/EditItemsController.php
index e217fe05..5ac0d0ed 100644
--- a/app/Http/Controllers/FileFunctions/EditItemsController.php
+++ b/app/Http/Controllers/FileFunctions/EditItemsController.php
@@ -204,9 +204,8 @@ class EditItemsController extends Controller
 
             // Delete item
             Editor::delete_item($file, $unique_id);
-
-            // Return response
         }
+
         return response(null, 204);
     }
 
@@ -229,7 +228,6 @@ class EditItemsController extends Controller
             return Demo::response_204();
         }
 
-
         // Check shared permission
         if (!is_editor($shared)) abort(403);
 
@@ -325,6 +323,25 @@ class EditItemsController extends Controller
      */
     public function user_zip_multiple_files(Request $request)
     {
+        // Check permission to upload for authenticated editor
+        if ($request->user()->tokenCan('editor')) {
+
+            // check if shared_token cookie exist
+            if (!$request->hasCookie('shared_token')) abort('401');
+
+            // Get shared token
+            $shared = get_shared($request->cookie('shared_token'));
+
+            $file_parent_folders = FileManagerFile::whereUserId(Auth::id())
+                ->whereIn('unique_id', $request->input('files'))
+                ->get()
+                ->pluck('folder_id')
+                ->toArray();
+
+            // Check access to requested directory
+            Guardian::check_item_access($file_parent_folders, $shared);
+        }
+
         // Get requested files
         $files = FileManagerFile::whereUserId(Auth::id())
             ->whereIn('unique_id', $request->input('files'))
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 3a360314..89585471 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,65 +1,113 @@
 {
-    "/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=40528aefcf8239019313",
-    "/js/main.js": "/js/main.js?id=ec7e3f4ffa00fa8abfa3",
-    "/css/app.css": "/css/app.css?id=8f6d5dcb7110a726e142",
-    "/chunks/admin.js": "/chunks/admin.js?id=5c1ef019716afc67775b",
-    "/chunks/admin-account.js": "/chunks/admin-account.js?id=16cd99641f6c1cb6788a",
-    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=3043f5ab051b9cac9ab7",
-    "/chunks/app-billings.js": "/chunks/app-billings.js?id=b4d28bec8835085f885f",
-    "/chunks/app-email.js": "/chunks/app-email.js?id=24fc0cc212e9b893bb09",
-    "/chunks/app-index.js": "/chunks/app-index.js?id=c1c8101bd90f630ac6bf",
-    "/chunks/app-others.js": "/chunks/app-others.js?id=c73372ee9f62d01c74d1",
-    "/chunks/app-payments.js": "/chunks/app-payments.js?id=83608af3a7e34ac062d4",
-    "/chunks/app-settings.js": "/chunks/app-settings.js?id=466c6bfc5ab7b883e443",
-    "/chunks/app-setup.js": "/chunks/app-setup.js?id=652f0ab8a6423dd24906",
-    "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=b955f8dcd6890a1b45ca",
-    "/chunks/contact-us.js": "/chunks/contact-us.js?id=a5150dcf81c8e1ab23a4",
-    "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=58c543c4f92b5ca9a284",
-    "/chunks/dashboard.js": "/chunks/dashboard.js?id=6dfd3a558e6c5d943dbc",
-    "/chunks/database.js": "/chunks/database.js?id=dbb3c73c995c7ee55015",
-    "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=08a0c2de8f93e0222600",
-    "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=3b6455db55e44d265c86",
-    "/chunks/files.js": "/chunks/files.js?id=3e7ab3ab0bc78accc9df",
-    "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=7ff98232e7b4cc5d2c2a",
-    "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=f8a13783dc40aad197b5",
-    "/chunks/invoices.js": "/chunks/invoices.js?id=2bf3d16c86c9a512d7cd",
-    "/chunks/landing-page.js": "/chunks/landing-page.js?id=00d49e4ffb54dc5abb5b",
-    "/chunks/not-found-shared.js": "/chunks/not-found-shared.js?id=53d4f9c58bdac1e568c7",
-    "/chunks/page-edit.js": "/chunks/page-edit.js?id=e3dbad6c75184042d2e6",
-    "/chunks/pages.js": "/chunks/pages.js?id=178f763a036b4ee9a366",
-    "/chunks/plan.js": "/chunks/plan.js?id=7ea9ddff467ab749441a",
-    "/chunks/plan-create.js": "/chunks/plan-create.js?id=b40c3e16a94a55fc9397",
-    "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=61c8edfbdad6904435ed",
-    "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=2be8a0aaf9e6968e158e",
-    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=60b05b4391ec24649eaf",
-    "/chunks/plans.js": "/chunks/plans.js?id=dccd289b5aeda9003aca",
-    "/chunks/profile.js": "/chunks/profile.js?id=91714cf4f6ca568515d6",
-    "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=82446c77da50e52cf1bd",
-    "/chunks/settings.js": "/chunks/settings.js?id=0cfc9ad9196a31d29811",
-    "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=72bc6c0599e6d6095ddd",
-    "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=daad8173619d5d047c0d",
-    "/chunks/settings-password.js": "/chunks/settings-password.js?id=9424e701a221958e50e8",
-    "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=66ad9cb43ef678407e3e",
-    "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=6af5afc7c03b54e80984",
-    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=1be617484ada2cd04bd7",
-    "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=47090233afc7b0cdf855",
-    "/chunks/shared-files.js": "/chunks/shared-files.js?id=9581a454bbb3b0de5ff1",
-    "/chunks/shared-page.js": "/chunks/shared-page.js?id=0bd5bb1769f850581967",
-    "/chunks/sign-in.js": "/chunks/sign-in.js?id=ec080714b24154cf1081",
-    "/chunks/sign-up.js": "/chunks/sign-up.js?id=0d8b571bcf5a54f073fd",
-    "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=099fd6800da190981a1c",
-    "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=a1582c9b65d4b9df716e",
-    "/chunks/subscription-service.js": "/chunks/subscription-service.js?id=67403d4466f7e7c5701d",
-    "/chunks/upgrade.js": "/chunks/upgrade.js?id=a414b418fb4f7c37287f",
-    "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=985dd231a8395f6a01d2",
-    "/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=a66c2011e6e99d0880de",
-    "/chunks/user.js": "/chunks/user.js?id=614b75d3e823cde8ab9f",
-    "/chunks/user-create.js": "/chunks/user-create.js?id=2bd3bf90450c1ae1a9e1",
-    "/chunks/user-delete.js": "/chunks/user-delete.js?id=08acb6b552540d60131f",
-    "/chunks/user-detail.js": "/chunks/user-detail.js?id=cf402ad5f8e4a19bfa6c",
-    "/chunks/user-invoices.js": "/chunks/user-invoices.js?id=968a95bf02cb6a5cf064",
-    "/chunks/user-password.js": "/chunks/user-password.js?id=59afc7db6a7c0b40781e",
-    "/chunks/user-storage.js": "/chunks/user-storage.js?id=cb0b4bfb94595993795f",
-    "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=893d245c41391543de25",
-    "/chunks/users.js": "/chunks/users.js?id=3b3ae7c11ce24170045c"
+    "/js/main.js": "/js/main.js",
+    "/css/app.css": "/css/app.css",
+    "/chunks/admin.js": "/chunks/admin.js?id=5807ec412746448047f9",
+    "/chunks/admin-account.js": "/chunks/admin-account.js?id=d820e99a25f40cc97570",
+    "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~2d9ff916.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~2d9ff916.js?id=1ad1b7b56512338223eb",
+    "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~01aef58e.js": "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~01aef58e.js?id=6c02fe91a2e167b63a98",
+    "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.js": "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.js?id=312acc0ff7daa010eea5",
+    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=03e587de7dd10fba3ead",
+    "/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=fd3c7242b5c765b469e4",
+    "/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=ebb1b6ed1df237b56cd9",
+    "/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=9df028786df5d3279ab9",
+    "/chunks/app-billings.js": "/chunks/app-billings.js?id=2b87899e656ed382d260",
+    "/chunks/app-email.js": "/chunks/app-email.js?id=2e5a1b525d335367cfc1",
+    "/chunks/app-index.js": "/chunks/app-index.js?id=05747ca2c86a1daea9cd",
+    "/chunks/app-others.js": "/chunks/app-others.js?id=55e1ec30bdca87c1adef",
+    "/chunks/app-payments.js": "/chunks/app-payments.js?id=796c7c2cfb9c6c39c8a7",
+    "/chunks/app-settings.js": "/chunks/app-settings.js?id=b85ce942737e25c37b8a",
+    "/chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~8a0e1d25.js": "/chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~8a0e1d25.js?id=99eb5ed6af46738c97e0",
+    "/chunks/app-setup.js": "/chunks/app-setup.js?id=78bbf0b2065cf270dbe6",
+    "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=573e29a00589cb5d3489",
+    "/chunks/contact-us.js": "/chunks/contact-us.js?id=7ded3c3e9668eea6c15c",
+    "/chunks/contact-us~chunks/dynamic-page~chunks/landing-page.js": "/chunks/contact-us~chunks/dynamic-page~chunks/landing-page.js?id=96ac1ede73f3fc9afa37",
+    "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=278eef02eace89698f20",
+    "/chunks/dashboard.js": "/chunks/dashboard.js?id=62896779642616a310ca",
+    "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~f48e9e59.js": "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~f48e9e59.js?id=ec096692af2fbfca8f8d",
+    "/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=d7795f20187163939276",
+    "/chunks/database.js": "/chunks/database.js?id=c7aa7caa9126b1ecdffa",
+    "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=1d8ee4bfbcde69c97021",
+    "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=86093752b39920044fda",
+    "/chunks/files.js": "/chunks/files.js?id=9e2bd0d46dd8654c2cd6",
+    "/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=e285e842f58178d681c4",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=7713560e6033e00622f0",
+    "/chunks/files~chunks/shared-page.js": "/chunks/files~chunks/shared-page.js?id=825fdc29b64056380220",
+    "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=06fc72f0d9a057bb8f18",
+    "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=8a5dfc3d2d07db1102db",
+    "/chunks/invoices.js": "/chunks/invoices.js?id=2352574bc22e5e3f7dac",
+    "/chunks/landing-page.js": "/chunks/landing-page.js?id=dabf50b10edb2ae2f388",
+    "/chunks/not-found-shared.js": "/chunks/not-found-shared.js?id=6666b81edc5ff6f60e82",
+    "/chunks/page-edit.js": "/chunks/page-edit.js?id=f7e24a5841604313332a",
+    "/chunks/pages.js": "/chunks/pages.js?id=7ec1c496031ff8478b51",
+    "/chunks/plan.js": "/chunks/plan.js?id=cc041fb9c2cb9ad8f0ff",
+    "/chunks/plan-create.js": "/chunks/plan-create.js?id=a66d8ae3a6edd08b755b",
+    "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=0732885b6e0839afe66e",
+    "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=445ca1affcefaf37cbfc",
+    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=8372954a6c160302859d",
+    "/chunks/plans.js": "/chunks/plans.js?id=0941e8c0e85e81162cc8",
+    "/chunks/profile.js": "/chunks/profile.js?id=b91a5757f57bdaee120d",
+    "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=a44394b1fa09f996a9fd",
+    "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=8c92667fa59dc9fd7ac7",
+    "/chunks/settings.js": "/chunks/settings.js?id=0be829a409b9cbcb9bfc",
+    "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=25225a758b04d6d48617",
+    "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=c7499d2d79bf9620dfa5",
+    "/chunks/settings-password.js": "/chunks/settings-password.js?id=015ead5623aee1a543cf",
+    "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=1810248d2c5931651314",
+    "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=013b6f15f907caaecd1e",
+    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=6172a89afe3b27cb76cd",
+    "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=99b4f321902fe6b0eb23",
+    "/chunks/shared-files.js": "/chunks/shared-files.js?id=403d9e06ee80aa328b4c",
+    "/chunks/shared-page.js": "/chunks/shared-page.js?id=9fb03fa225d831805aa9",
+    "/chunks/sign-in.js": "/chunks/sign-in.js?id=ddb0ae9561462e691ce3",
+    "/chunks/sign-up.js": "/chunks/sign-up.js?id=be89f6dcf7372d23668f",
+    "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=0e09f1509a73646c3198",
+    "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=7a4e1ba1d08b0bb37453",
+    "/chunks/subscription-service.js": "/chunks/subscription-service.js?id=f672876adcf877e6e126",
+    "/chunks/upgrade.js": "/chunks/upgrade.js?id=1c94ed3f8c2c366f730b",
+    "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=638ac716c4995894563c",
+    "/chunks/upgrade-billing~chunks/upgrade-plan.js": "/chunks/upgrade-billing~chunks/upgrade-plan.js?id=7e805915ede7c330c6d1",
+    "/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=ecc3c773b7c8ff422cf7",
+    "/chunks/user.js": "/chunks/user.js?id=1e0f9c8cab76e5ef871f",
+    "/chunks/user-create.js": "/chunks/user-create.js?id=fb808e071ab049b55490",
+    "/chunks/user-delete.js": "/chunks/user-delete.js?id=9c7eb4dab2be288cb884",
+    "/chunks/user-detail.js": "/chunks/user-detail.js?id=43545e2d110b40a47756",
+    "/chunks/user-invoices.js": "/chunks/user-invoices.js?id=b05dcb7e7ad2f4959e52",
+    "/chunks/user-password.js": "/chunks/user-password.js?id=57fe622e9a03e834d6fa",
+    "/chunks/user-storage.js": "/chunks/user-storage.js?id=76465e9a36a2ab78eff3",
+    "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=e9528debb38dc1654cef",
+    "/chunks/users.js": "/chunks/users.js?id=78680d85246eba5b175f",
+    "/js/main.138977ab51db50b1e0d6.hot-update.js": "/js/main.138977ab51db50b1e0d6.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.138977ab51db50b1e0d6.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.138977ab51db50b1e0d6.hot-update.js",
+    "/js/main.f79d973dad947ba37543.hot-update.js": "/js/main.f79d973dad947ba37543.hot-update.js",
+    "/js/main.2a1f5f7e3104f8dc51a9.hot-update.js": "/js/main.2a1f5f7e3104f8dc51a9.hot-update.js",
+    "/js/main.cda4897011e093572686.hot-update.js": "/js/main.cda4897011e093572686.hot-update.js",
+    "/js/main.62bdb842c87c47e6d37e.hot-update.js": "/js/main.62bdb842c87c47e6d37e.hot-update.js",
+    "/js/main.3d755cdf3323177f13ce.hot-update.js": "/js/main.3d755cdf3323177f13ce.hot-update.js",
+    "/js/main.10559b412b9fb7bfd166.hot-update.js": "/js/main.10559b412b9fb7bfd166.hot-update.js",
+    "/js/main.f58f5b02e5cf6f653ea5.hot-update.js": "/js/main.f58f5b02e5cf6f653ea5.hot-update.js",
+    "/js/main.8ed64bc6a170aa4bd2e6.hot-update.js": "/js/main.8ed64bc6a170aa4bd2e6.hot-update.js",
+    "/js/main.f8ac5e22a6d71bfd0978.hot-update.js": "/js/main.f8ac5e22a6d71bfd0978.hot-update.js",
+    "/js/main.1f2d7e5b40fe4a941254.hot-update.js": "/js/main.1f2d7e5b40fe4a941254.hot-update.js",
+    "/js/main.9c0a6726f0f995811cc7.hot-update.js": "/js/main.9c0a6726f0f995811cc7.hot-update.js",
+    "/js/main.7857c2b6336a9de7fc73.hot-update.js": "/js/main.7857c2b6336a9de7fc73.hot-update.js",
+    "/js/main.4b17bcb0a26beb166fe0.hot-update.js": "/js/main.4b17bcb0a26beb166fe0.hot-update.js",
+    "/js/main.3a7c777e5b583256e03a.hot-update.js": "/js/main.3a7c777e5b583256e03a.hot-update.js",
+    "/js/main.bebcd363b57c59983d22.hot-update.js": "/js/main.bebcd363b57c59983d22.hot-update.js",
+    "/js/main.5834aa5a5513c83985d5.hot-update.js": "/js/main.5834aa5a5513c83985d5.hot-update.js",
+    "/js/main.a8e1e844ed7a2613086a.hot-update.js": "/js/main.a8e1e844ed7a2613086a.hot-update.js",
+    "/js/main.bc1c6e04747b15c673c4.hot-update.js": "/js/main.bc1c6e04747b15c673c4.hot-update.js",
+    "/js/main.fc1e6c63d8c30fc8010d.hot-update.js": "/js/main.fc1e6c63d8c30fc8010d.hot-update.js",
+    "/js/main.6a3b3512fdbcad0e2d03.hot-update.js": "/js/main.6a3b3512fdbcad0e2d03.hot-update.js",
+    "/js/main.0cc1477ef98bf5094e33.hot-update.js": "/js/main.0cc1477ef98bf5094e33.hot-update.js",
+    "/js/main.4a23a1a5ef3f895273b7.hot-update.js": "/js/main.4a23a1a5ef3f895273b7.hot-update.js",
+    "/js/main.6f0af8ec80e294812229.hot-update.js": "/js/main.6f0af8ec80e294812229.hot-update.js",
+    "/js/main.d5246b544f1783858228.hot-update.js": "/js/main.d5246b544f1783858228.hot-update.js",
+    "/js/main.c5a05c0e6dbe02fbe138.hot-update.js": "/js/main.c5a05c0e6dbe02fbe138.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.82a00a98337b338afbf4.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.82a00a98337b338afbf4.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.d1b724e2d9e2e894c272.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.d1b724e2d9e2e894c272.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.73470bdfdadceeccb801.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.73470bdfdadceeccb801.hot-update.js",
+    "/js/main.3ccf7899e6a759d4efbf.hot-update.js": "/js/main.3ccf7899e6a759d4efbf.hot-update.js",
+    "/js/main.140acaffead1ac02280f.hot-update.js": "/js/main.140acaffead1ac02280f.hot-update.js",
+    "/js/main.f9fc1abb700f6fd824cc.hot-update.js": "/js/main.f9fc1abb700f6fd824cc.hot-update.js",
+    "/js/main.8e6a6281bbd098e6a6d1.hot-update.js": "/js/main.8e6a6281bbd098e6a6d1.hot-update.js"
 }
diff --git a/resources/js/components/FilesView/ContextMenu.vue b/resources/js/components/FilesView/ContextMenu.vue
index 3305cfd0..f829b936 100644
--- a/resources/js/components/FilesView/ContextMenu.vue
+++ b/resources/js/components/FilesView/ContextMenu.vue
@@ -450,8 +450,6 @@ export default {
             }
         },
         downloadItem() {
-
-            // Zip and download multiple files
             if (this.fileInfoDetail.length > 1)
                 this.$store.dispatch('downloadFiles')
             else {
diff --git a/resources/js/components/FilesView/DesktopToolbar.vue b/resources/js/components/FilesView/DesktopToolbar.vue
index a2123f01..c267d464 100644
--- a/resources/js/components/FilesView/DesktopToolbar.vue
+++ b/resources/js/components/FilesView/DesktopToolbar.vue
@@ -1,269 +1,216 @@
 <template>
-  <div id="desktop-toolbar">
-    <div class="toolbar-wrapper">
-      <!-- Go back-->
-      <div class="toolbar-go-back" v-if="homeDirectory">
-        <div @click="goBack" class="go-back-button">
-          <chevron-left-icon
-            size="17"
-            :class="{ 'is-active': browseHistory.length > 1 }"
-            class="icon-back"
-          ></chevron-left-icon>
+    <div id="desktop-toolbar">
+        <div class="toolbar-wrapper">
+            <!-- Go back-->
+            <div class="toolbar-go-back" v-if="homeDirectory">
+                <div @click="goBack" class="go-back-button">
+                    <chevron-left-icon size="17" :class="{ 'is-active': browseHistory.length > 1 }" class="icon-back"></chevron-left-icon>
 
-          <span class="back-directory-title">
+                    <span class="back-directory-title">
             {{ directoryName }}
           </span>
 
-          <span
-            @click.stop="folderActions"
-            v-if="
+                    <span @click.stop="folderActions" v-if="
               browseHistory.length > 1 && $isThisLocation(['base', 'public'])
-            "
-            class="folder-options"
-            id="folder-actions"
-          >
-            <more-horizontal-icon
-              size="14"
-              class="icon-more"
-            ></more-horizontal-icon>
+            " class="folder-options" id="folder-actions">
+            <more-horizontal-icon size="14" class="icon-more"></more-horizontal-icon>
           </span>
-        </div>
-      </div>
+                </div>
+            </div>
 
-      <!-- Tools-->
-      <div class="toolbar-tools">
-        <!--Search bar-->
-        <div class="toolbar-button-wrapper">
-          <SearchBar />
-        </div>
+            <!-- Tools-->
+            <div class="toolbar-tools">
+                <!--Search bar-->
+                <div class="toolbar-button-wrapper">
+                    <SearchBar/>
+                </div>
 
-        <!--Files controlls-->
-        <div
-          class="toolbar-button-wrapper"
-          v-if="$checkPermission(['master', 'editor'])"
-        >
-          <ToolbarButtonUpload
-            :class="{ 'is-inactive': canUploadInView || !hasCapacity }"
-            :action="$t('actions.upload')"
-          />
-          <ToolbarButton
-            :class="{ 'is-inactive': canCreateFolderInView }"
-            @click.native="createFolder"
-            source="folder-plus"
-            :action="$t('actions.create_folder')"
-          />
-        </div>
+                <!--Files controlls-->
+                <div class="toolbar-button-wrapper" v-if="$checkPermission(['master', 'editor'])">
+                    <ToolbarButtonUpload :class="{ 'is-inactive': canUploadInView || !hasCapacity }" :action="$t('actions.upload')"/>
+                    <ToolbarButton :class="{ 'is-inactive': canCreateFolderInView }" @click.native="createFolder" source="folder-plus" :action="$t('actions.create_folder')"/>
+                </div>
 
-        <div
-          class="toolbar-button-wrapper"
-          v-if="$checkPermission(['master', 'editor'])"
-        >
-          <ToolbarButton
-            source="move"
-            :class="{ 'is-inactive': canMoveInView }"
-            :action="$t('actions.move')"
-            @click.native="moveItem"
-          />
-          <ToolbarButton
-            v-if="!$isThisLocation(['public'])"
-            source="share"
-            :class="{ 'is-inactive': canShareInView }"
-            :action="$t('actions.share')"
-            @click.native="shareItem"
-          />
-          <ToolbarButton
-            source="trash"
-            :class="{ 'is-inactive': canDeleteInView }"
-            :action="$t('actions.delete')"
-            @click.native="deleteItem"
-          />
-        </div>
+                <div class="toolbar-button-wrapper" v-if="$checkPermission(['master', 'editor'])">
+                    <ToolbarButton source="move" :class="{ 'is-inactive': canMoveInView }" :action="$t('actions.move')" @click.native="moveItem"/>
+                    <ToolbarButton v-if="!$isThisLocation(['public'])" source="share" :class="{ 'is-inactive': canShareInView }" :action="$t('actions.share')" @click.native="shareItem"/>
+                    <ToolbarButton source="trash" :class="{ 'is-inactive': canDeleteInView }" :action="$t('actions.delete')" @click.native="deleteItem"/>
+                </div>
 
-        <!--View options-->
-        <div class="toolbar-button-wrapper">
-          <ToolbarButton 
-            source="preview-sorting"
-            class="preview-sorting"
-            :action="$t('actions.sorting_view')"
-            :class="{ active: sortingAndPreview }"
-            @click.native=" sortingAndPreview = !sortingAndPreview"
-          />
+                <!--View options-->
+                <div class="toolbar-button-wrapper">
+                    <ToolbarButton source="preview-sorting" class="preview-sorting" :action="$t('actions.sorting_view')" :class="{ active: sortingAndPreview }" @click.native="sortingAndPreview = !sortingAndPreview"/>
 
-          <ToolbarButton
-            :action="$t('actions.info_panel')"
-            :class="{ active: fileInfoVisible }"
-            @click.native="$store.dispatch('fileInfoToggle')"
-            source="info"
-          />
+                    <ToolbarButton :action="$t('actions.info_panel')" :class="{ active: fileInfoVisible }" @click.native="$store.dispatch('fileInfoToggle')" source="info"/>
+                </div>
+            </div>
         </div>
-      </div>
+        <UploadProgress/>
     </div>
-    <UploadProgress />
-  </div>
 </template>
 
 <script>
-import ToolbarButtonUpload from "@/components/FilesView/ToolbarButtonUpload";
-import { ChevronLeftIcon, MoreHorizontalIcon } from "vue-feather-icons";
-import UploadProgress from "@/components/FilesView/UploadProgress";
-import ToolbarButton from "@/components/FilesView/ToolbarButton";
-import SearchBar from "@/components/FilesView/SearchBar";
-import { mapGetters } from "vuex";
-import { events } from "@/bus";
-import { last } from "lodash";
+import ToolbarButtonUpload from '@/components/FilesView/ToolbarButtonUpload'
+import { ChevronLeftIcon, MoreHorizontalIcon } from 'vue-feather-icons'
+import UploadProgress from '@/components/FilesView/UploadProgress'
+import ToolbarButton from '@/components/FilesView/ToolbarButton'
+import SearchBar from '@/components/FilesView/SearchBar'
+import { mapGetters } from 'vuex'
+import { events } from '@/bus'
+import { last } from 'lodash'
 
 export default {
-  name: "ToolBar",
-  components: {
-    ToolbarButtonUpload,
-    MoreHorizontalIcon,
-    ChevronLeftIcon,
-    UploadProgress,
-    ToolbarButton,
-    SearchBar,
-  },
-  computed: {
-    ...mapGetters([
-      "FilePreviewType",
-      "fileInfoVisible",
-      "fileInfoDetail",
-      "currentFolder",
-      "browseHistory",
-      "homeDirectory",
-    ]),
-    hasCapacity() {
-      // Check if set storage limitation
-      if (!this.$store.getters.config.storageLimit) return true;
+    name: 'ToolBar',
+    components: {
+        ToolbarButtonUpload,
+        MoreHorizontalIcon,
+        ChevronLeftIcon,
+        UploadProgress,
+        ToolbarButton,
+        SearchBar
+    },
+    computed: {
+        ...mapGetters([
+            'FilePreviewType',
+            'fileInfoVisible',
+            'fileInfoDetail',
+            'currentFolder',
+            'browseHistory',
+            'homeDirectory'
+        ]),
+        hasCapacity() {
+            // Check if set storage limitation
+            if (!this.$store.getters.config.storageLimit) return true
 
-      // Check if is loaded user
-      if (!this.$store.getters.user) return true;
+            // Check if is loaded user
+            if (!this.$store.getters.user) return true
 
-      // Check if user has storage
-      return (
-        this.$store.getters.user.relationships.storage.data.attributes.used <=
-        100
-      );
-    },
-    directoryName() {
-      return this.currentFolder
-        ? this.currentFolder.name
-        : this.homeDirectory.name;
-    },
-    preview() {
-      return this.FilePreviewType === "list" ? "th" : "th-list";
-    },
-    canCreateFolderInView() {
-       return !this.$isThisLocation(["base", "public"]);
-    },
-    canDeleteInView() {
-      return !this.$isThisLocation([
-        "trash",
-        "trash-root",
-        "base",
-        "participant_uploads",
-        "latest",
-        "shared",
-        "public",
-      ]);
-    },
-    canUploadInView() {
-      return !this.$isThisLocation(["base", "public"]);
-    },
-    canMoveInView() {
-      return !this.$isThisLocation([
-        "base",
-        "participant_uploads",
-        "latest",
-        "shared",
-        "public",
-      ]);
-    },
-    canShareInView() {
-    let locations = [
-        "base",
-        "participant_uploads",
-        "latest",
-        "shared",
-        "public",
-      ]
-    
-    return !this.$isThisLocation(locations) || this.fileInfoDetail.length > 1
-    },
-  },
-  data () {
-    return {
-      sortingAndPreview: false
-    }
-  },
-  watch: {
-    sortingAndPreview () {
-      if(this.sortingAndPreview) {
-        events.$emit('sortingAndPreview', true)
-      }
+            // Check if user has storage
+            return (
+                this.$store.getters.user.relationships.storage.data.attributes.used <=
+                100
+            )
+        },
+        directoryName() {
+            return this.currentFolder
+                ? this.currentFolder.name
+                : this.homeDirectory.name
+        },
+        preview() {
+            return this.FilePreviewType === 'list' ? 'th' : 'th-list'
+        },
+        canCreateFolderInView() {
+            return !this.$isThisLocation(['base', 'public'])
+        },
+        canDeleteInView() {
+            return !this.$isThisLocation([
+                'trash',
+                'trash-root',
+                'base',
+                'participant_uploads',
+                'latest',
+                'shared',
+                'public'
+            ])
+        },
+        canUploadInView() {
+            return !this.$isThisLocation(['base', 'public'])
+        },
+        canMoveInView() {
+            return !this.$isThisLocation([
+                'base',
+                'participant_uploads',
+                'latest',
+                'shared',
+                'public'
+            ])
+        },
+        canShareInView() {
+            let locations = [
+                'base',
+                'participant_uploads',
+                'latest',
+                'shared',
+                'public'
+            ]
 
-      if(!this.sortingAndPreview) {
-        events.$emit('sortingAndPreview', false)
-      }
-    }
-  },
-  methods: {
-    goBack() {
-      // Get previous folder
-      let previousFolder = last(this.browseHistory);
-
-      if (!previousFolder) return;
-
-      if (previousFolder.location === "trash-root") {
-        this.$store.dispatch("getTrash");
-      } else if (previousFolder.location === "shared") {
-        this.$store.dispatch("getShared");
-      } else {
-        if (this.$isThisLocation("public")) {
-          this.$store.dispatch("browseShared", [
-            { folder: previousFolder, back: true, init: false },
-          ]);
-        } else {
-          this.$store.dispatch("getFolder", [
-            { folder: previousFolder, back: true, init: false },
-          ]);
+            return !this.$isThisLocation(locations) || this.fileInfoDetail.length > 1
         }
-      }
     },
-    folderActions() {
-      events.$emit("folder:actions", this.currentFolder);
-    },
-    deleteItem() {
-      this.$store.dispatch('deleteItem')
-    },
-    createFolder() {
-      this.$createFolder();
-    },
-    moveItem() {
-      events.$emit("popup:open", { name: "move", item: this.fileInfoDetail });
-    },
-    shareItem() {
-      if (this.fileInfoDetail[0]) {
-        //ADD BY M
-        if (this.fileInfoDetail[0].shared) {
-          events.$emit("popup:open", {
-            name: "share-edit",
-            item: this.fileInfoDetail[0],
-          });
-        } else {
-          events.$emit("popup:open", {
-            name: "share-create",
-            item: this.fileInfoDetail[0],
-          });
+    data() {
+        return {
+            sortingAndPreview: false
         }
-      }
     },
-  },
-  mounted () {
-    events.$on('sortingAndPreview', (state) => {
-      this.sortingAndPreview = state
-    })
-  }
-};
+    watch: {
+        sortingAndPreview() {
+            if (this.sortingAndPreview) {
+                events.$emit('sortingAndPreview', true)
+            }
+
+            if (!this.sortingAndPreview) {
+                events.$emit('sortingAndPreview', false)
+            }
+        }
+    },
+    methods: {
+        goBack() {
+            // Get previous folder
+            let previousFolder = last(this.browseHistory)
+
+            if (!previousFolder) return
+
+            if (previousFolder.location === 'trash-root') {
+                this.$store.dispatch('getTrash')
+            } else if (previousFolder.location === 'shared') {
+                this.$store.dispatch('getShared')
+            } else {
+                if (this.$isThisLocation('public')) {
+                    this.$store.dispatch('browseShared', [
+                        { folder: previousFolder, back: true, init: false }
+                    ])
+                } else {
+                    this.$store.dispatch('getFolder', [
+                        { folder: previousFolder, back: true, init: false }
+                    ])
+                }
+            }
+        },
+        folderActions() {
+            events.$emit('folder:actions', this.currentFolder)
+        },
+        deleteItem() {
+            this.$store.dispatch('deleteItem')
+        },
+        createFolder() {
+            this.$createFolder()
+        },
+        moveItem() {
+            events.$emit('popup:open', { name: 'move', item: this.fileInfoDetail })
+        },
+        shareItem() {
+            if (this.fileInfoDetail[0]) {
+                //ADD BY M
+                if (this.fileInfoDetail[0].shared) {
+                    events.$emit('popup:open', {
+                        name: 'share-edit',
+                        item: this.fileInfoDetail[0]
+                    })
+                } else {
+                    events.$emit('popup:open', {
+                        name: 'share-create',
+                        item: this.fileInfoDetail[0]
+                    })
+                }
+            }
+        }
+    },
+    mounted() {
+        events.$on('sortingAndPreview', (state) => {
+            this.sortingAndPreview = state
+        })
+    }
+}
 </script>
 
 <style scoped lang="scss">
@@ -271,179 +218,179 @@ export default {
 @import "@assets/vue-file-manager/_mixins";
 
 .toolbar-wrapper {
-  padding-top: 10px;
-  padding-bottom: 10px;
-  display: flex;
-  position: relative;
-  z-index: 2;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    display: flex;
+    position: relative;
+    z-index: 2;
 
-  > div {
-    flex-grow: 1;
-    align-self: center;
-    white-space: nowrap;
-  }
+    > div {
+        flex-grow: 1;
+        align-self: center;
+        white-space: nowrap;
+    }
 }
 
 .directory-name {
-  vertical-align: middle;
-  @include font-size(17);
-  color: $text;
-  font-weight: 700;
-  max-width: 220px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: inline-block;
-}
-
-.icon-back {
-  vertical-align: middle;
-  cursor: pointer;
-  margin-right: 6px;
-  opacity: 0.15;
-  pointer-events: none;
-  @include transition(150ms);
-
-  &.is-active {
-    opacity: 1;
-    pointer-events: initial;
-  }
-}
-
-.toolbar-go-back {
-  cursor: pointer;
-
-  .folder-options {
     vertical-align: middle;
-    margin-left: 6px;
-    padding: 1px 4px;
-    line-height: 0;
-    border-radius: 3px;
-    @include transition(150ms);
-
-    svg circle {
-      @include transition(150ms);
-    }
-
-    &:hover {
-      background: $light_background;
-
-      svg circle {
-        stroke: $theme;
-      }
-    }
-
-    .icon-more {
-      vertical-align: middle;
-    }
-  }
-
-  .back-directory-title {
-    @include font-size(15);
-    line-height: 1;
+    @include font-size(17);
+    color: $text;
     font-weight: 700;
+    max-width: 220px;
     overflow: hidden;
     text-overflow: ellipsis;
     display: inline-block;
+}
+
+.icon-back {
     vertical-align: middle;
-    color: $text;
-  }
+    cursor: pointer;
+    margin-right: 6px;
+    opacity: 0.15;
+    pointer-events: none;
+    @include transition(150ms);
+
+    &.is-active {
+        opacity: 1;
+        pointer-events: initial;
+    }
+}
+
+.toolbar-go-back {
+    cursor: pointer;
+
+    .folder-options {
+        vertical-align: middle;
+        margin-left: 6px;
+        padding: 1px 4px;
+        line-height: 0;
+        border-radius: 3px;
+        @include transition(150ms);
+
+        svg circle {
+            @include transition(150ms);
+        }
+
+        &:hover {
+            background: $light_background;
+
+            svg circle {
+                stroke: $theme;
+            }
+        }
+
+        .icon-more {
+            vertical-align: middle;
+        }
+    }
+
+    .back-directory-title {
+        @include font-size(15);
+        line-height: 1;
+        font-weight: 700;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: inline-block;
+        vertical-align: middle;
+        color: $text;
+    }
 }
 
 .toolbar-position {
-  text-align: center;
+    text-align: center;
 
-  span {
-    @include font-size(17);
-    font-weight: 600;
-  }
+    span {
+        @include font-size(17);
+        font-weight: 600;
+    }
 }
 
 .toolbar-tools {
-  text-align: right;
+    text-align: right;
 
-  .toolbar-button-wrapper {
-    margin-left: 28px;
-    display: inline-block;
-    vertical-align: middle;
+    .toolbar-button-wrapper {
+        margin-left: 28px;
+        display: inline-block;
+        vertical-align: middle;
 
-    &:first-child {
-      margin-left: 0 !important;
-    }
-  }
-
-  .button {
-    margin-left: 5px;
-
-    &.active {
-      /deep/ svg {
-        line,
-        circle,
-        rect {
-          stroke: $theme;
+        &:first-child {
+            margin-left: 0 !important;
         }
-      }
-
-      &.preview-sorting{
-        background: $light_background;
-      }
     }
 
-    &.is-inactive {
-      opacity: 0.25;
-      pointer-events: none;
-    }
+    .button {
+        margin-left: 5px;
 
-    &:first-child {
-      margin-left: 0;
+        &.active {
+            /deep/ svg {
+                line,
+                circle,
+                rect {
+                    stroke: $theme;
+                }
+            }
+
+            &.preview-sorting {
+                background: $light_background;
+            }
+        }
+
+        &.is-inactive {
+            opacity: 0.25;
+            pointer-events: none;
+        }
+
+        &:first-child {
+            margin-left: 0;
+        }
     }
-  }
 }
 
 @media only screen and (max-width: 1024px) {
-  .toolbar-go-back .back-directory-title {
-    max-width: 120px;
-  }
-
-  .toolbar-tools {
-    .button {
-      margin-left: 0;
-      height: 40px;
-      width: 40px;
+    .toolbar-go-back .back-directory-title {
+        max-width: 120px;
     }
 
-    .toolbar-button-wrapper {
-      margin-left: 25px;
+    .toolbar-tools {
+        .button {
+            margin-left: 0;
+            height: 40px;
+            width: 40px;
+        }
+
+        .toolbar-button-wrapper {
+            margin-left: 25px;
+        }
     }
-  }
 }
 
 @media only screen and (max-width: 960px) {
-  #desktop-toolbar {
-    display: none;
-  }
+    #desktop-toolbar {
+        display: none;
+    }
 }
 
 @media (prefers-color-scheme: dark) {
-  .toolbar .directory-name {
-    color: $dark_mode_text_primary;
-  }
-
-  .toolbar-go-back {
-    .back-directory-title {
-      color: $dark_mode_text_primary;
+    .toolbar .directory-name {
+        color: $dark_mode_text_primary;
     }
 
-    .folder-options {
-      &:hover {
-        background: $dark_mode_foreground;
-      }
+    .toolbar-go-back {
+        .back-directory-title {
+            color: $dark_mode_text_primary;
+        }
+
+        .folder-options {
+            &:hover {
+                background: $dark_mode_foreground;
+            }
+        }
     }
-  }
-  
-    .active {     
-      &.preview-sorting{
-        background: $dark_mode_foreground !important;
-      }
+
+    .active {
+        &.preview-sorting {
+            background: $dark_mode_foreground !important;
+        }
     }
 }
 </style>
diff --git a/resources/js/components/FilesView/MobileMultiSelectMenu.vue b/resources/js/components/FilesView/MobileMultiSelectMenu.vue
index 55e2ddec..36934060 100644
--- a/resources/js/components/FilesView/MobileMultiSelectMenu.vue
+++ b/resources/js/components/FilesView/MobileMultiSelectMenu.vue
@@ -5,7 +5,7 @@
 
             <ToolbarButton class="action-btn" v-if="$checkPermission('master') || $checkPermission('editor')" source="trash" :class="{'is-inactive' : fileInfoDetail.length < 1}" :action="$t('actions.delete')" @click.native="deleteItem"/>
 
-            <ToolbarButton class="action-btn" source="download" :class="{'is-inactive' : fileInfoDetail.length < 1}" :action="$t('actions.delete')" @click.native="downloadItem"/>
+            <ToolbarButton class="action-btn" source="download" :class="{'is-inactive': canDownloadItems}" :action="$t('actions.delete')" @click.native="downloadItem"/>
 
             <ToolbarButton class="action-btn close-icon" source="close" :action="$t('actions.close')" @click.native="closeSelecting"/>
         </div>
@@ -21,7 +21,10 @@ export default {
     name: 'MobileMultiSelectMenu',
     components: { ToolbarButton },
     computed: {
-        ...mapGetters(['fileInfoDetail'])
+        ...mapGetters(['fileInfoDetail']),
+        canDownloadItems() {
+            return this.fileInfoDetail.filter(item => item.type === 'folder').length !== 0
+        }
     },
     data() {
         return {
@@ -33,14 +36,11 @@ export default {
             events.$emit('mobileSelecting:stop')
         },
         downloadItem() {
-            this.fileInfoDetail.forEach((item , i) => {
-                setTimeout(() => {
-                    this.$downloadFile(
-                        item.file_url,
-                        item.name + '.' + item.mimetype
-                    )
-                }, i * 100);   
-            })
+            if (this.fileInfoDetail.length > 1)
+                this.$store.dispatch('downloadFiles')
+            else {
+                this.$downloadFile(this.fileInfoDetail[0].file_url, this.fileInfoDetail[0].name + '.' + this.fileInfoDetail[0].mimetype)
+            }
         },
         moveItem() {
             // Open move item popup
diff --git a/resources/js/components/FilesView/MobileSortingAndPreview.vue b/resources/js/components/FilesView/MobileSortingAndPreview.vue
index c36c8544..2924ccc5 100644
--- a/resources/js/components/FilesView/MobileSortingAndPreview.vue
+++ b/resources/js/components/FilesView/MobileSortingAndPreview.vue
@@ -1,60 +1,52 @@
 <template>
-        <transition name="context-menu" class="options-wrapper">
-            <div class="options" v-if="isVisible">
-                <div class="menu-options">
-
-                    <ul class="menu-option-group">
-                        <li class="menu-option" @click="changePreview('grid')">
-                            <div class="icon">
-                                <grid-icon size="17"/>
-                            </div>
-                            <div class="text-label">
-                                {{ $t('preview_sorting.grid_view') }}
-                            </div>
-                            <div class="show-icon" v-if="isGrid">
-                                <check-icon size="17"/>
-                            </div>
-                        </li>
-                        <li class="menu-option" @click="changePreview('list')">
-                            <div class="icon">
-                                <list-icon size="17"/>
-                            </div>
-                            <div class="text-label">
-                                {{ $t('preview_sorting.list_view') }}
-                            </div>
-                            <div class="show-icon" v-if="isList">
-                                <check-icon size="17"/>
-                            </div>
-                        </li>
-                    </ul>
-
-                    <ul class="menu-option-group">
-                        <li class="menu-option" @click="sort('created_at')">
-                            <div class="icon">
-                                <calendar-icon size="17"/>
-                            </div>
-                            <div class="text-label">
-                                {{ $t('preview_sorting.sort_date') }}
-                            </div>
-                            <div class="show-icon">
-                                <arrow-up-icon size="17" v-if="filter.field === 'created_at'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>
-                            </div>
-                        </li>
-                        <li class="menu-option" @click="sort('name')">
-                            <div class="icon">
-                                <alphabet-icon size="17" class="alphabet-icon"/>
-                            </div>
-                            <div class="text-label">
-                                {{ $t('preview_sorting.sort_alphabet') }}
-                            </div>
-                            <div class="show-icon">
-                                <arrow-up-icon size="17" v-if="filter.field === 'name'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>
-                            </div>
-                        </li>
-                    </ul>
-                </div>
+    <transition name="context-menu" class="options-wrapper">
+        <div class="options" v-if="isVisible">
+            <div class="menu-options">
+                <ul class="menu-option-group">
+                    <li v-if="isList" class="menu-option" @click="changePreview('grid')">
+                        <div class="icon">
+                            <grid-icon size="17"/>
+                        </div>
+                        <div class="text-label">
+                            {{ $t('preview_sorting.grid_view') }}
+                        </div>
+                    </li>
+                    <li v-if="isGrid" class="menu-option" @click="changePreview('list')">
+                        <div class="icon">
+                            <list-icon size="17"/>
+                        </div>
+                        <div class="text-label">
+                            {{ $t('preview_sorting.list_view') }}
+                        </div>
+                    </li>
+                </ul>
+                <ul class="menu-option-group">
+                    <li class="menu-option" @click="sort('created_at')">
+                        <div class="icon">
+                            <calendar-icon size="17"/>
+                        </div>
+                        <div class="text-label">
+                            {{ $t('preview_sorting.sort_date') }}
+                        </div>
+                        <div class="show-icon">
+                            <arrow-up-icon size="17" v-if="filter.field === 'created_at'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>
+                        </div>
+                    </li>
+                    <li class="menu-option" @click="sort('name')">
+                        <div class="icon">
+                            <alphabet-icon size="17" class="alphabet-icon"/>
+                        </div>
+                        <div class="text-label">
+                            {{ $t('preview_sorting.sort_alphabet') }}
+                        </div>
+                        <div class="show-icon">
+                            <arrow-up-icon size="17" v-if="filter.field === 'name'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>
+                        </div>
+                    </li>
+                </ul>
             </div>
-        </transition>
+        </div>
+    </transition>
 </template>
 
 <script>
@@ -118,11 +110,11 @@ export default {
             this.$getDataByLocation()
         },
         changePreview(previewType) {
-            
+
             this.$store.dispatch('changePreviewType', previewType)
 
             this.close()
-        },
+        }
     },
     mounted() {
 
diff --git a/resources/js/components/FilesView/SortingAndPreview.vue b/resources/js/components/FilesView/SortingAndPreview.vue
index e6208654..84e87c52 100644
--- a/resources/js/components/FilesView/SortingAndPreview.vue
+++ b/resources/js/components/FilesView/SortingAndPreview.vue
@@ -1,31 +1,24 @@
 <template>
-     <div v-if="isVisible"  class="sorting-preview" >
+    <div v-if="isVisible" class="sorting-preview">
 
         <div class="menu-options" id="menu-list">
             <ul class="menu-option-group">
-                <li class="menu-option" @click="changePreview('grid')" >
+                <li v-if="isList" class="menu-option" @click="changePreview('grid')">
                     <div class="icon">
                         <grid-icon size="17"/>
                     </div>
                     <div class="text-label">
-                      {{$t('preview_sorting.grid_view')}}
-                    </div>
-                    <div class="show-icon" v-if="isGrid">
-                        <check-icon size="17"/>
+                        {{ $t('preview_sorting.grid_view') }}
                     </div>
                 </li>
-                <li class="menu-option" @click="changePreview('list')"> 
+                <li v-if="isGrid" class="menu-option" @click="changePreview('list')">
                     <div class="icon">
                         <list-icon size="17"/>
                     </div>
                     <div class="text-label">
-                        {{$t('preview_sorting.list_view')}}
-                    </div>
-                    <div class="show-icon" v-if="isList">
-                        <check-icon size="17"/>
+                        {{ $t('preview_sorting.list_view') }}
                     </div>
                 </li>
-                
             </ul>
             <ul class="menu-option-group">
                 <li class="menu-option" @click="sort('created_at')">
@@ -33,18 +26,18 @@
                         <calendar-icon size="17"/>
                     </div>
                     <div class="text-label">
-                        {{$t('preview_sorting.sort_date')}}
+                        {{ $t('preview_sorting.sort_date') }}
                     </div>
-                    <div class="show-icon" >
+                    <div class="show-icon">
                         <arrow-up-icon size="17" v-if="filter.field === 'created_at'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>
                     </div>
                 </li>
-                <li class="menu-option" @click="sort('name')"  >
+                <li class="menu-option" @click="sort('name')">
                     <div class="icon">
-                       <alphabet-icon size="17" class="alphabet-icon"/>
+                        <alphabet-icon size="17" class="alphabet-icon"/>
                     </div>
                     <div class="text-label">
-                       {{$t('preview_sorting.sort_alphabet')}}
+                        {{ $t('preview_sorting.sort_alphabet') }}
                     </div>
                     <div class="show-icon">
                         <arrow-up-icon size="17" v-if="filter.field === 'name'" :class="{ 'arrow-down': filter.sort === 'ASC' }"/>
@@ -57,83 +50,83 @@
 
 <script>
 
-    import { CalendarIcon, ListIcon, GridIcon, ArrowUpIcon, CheckIcon } from 'vue-feather-icons'
-    import AlphabetIcon from '@/components/FilesView/Icons/AlphabetIcon'
-    import { mapGetters } from 'vuex'
-    import { events } from '@/bus'
+import { CalendarIcon, ListIcon, GridIcon, ArrowUpIcon, CheckIcon } from 'vue-feather-icons'
+import AlphabetIcon from '@/components/FilesView/Icons/AlphabetIcon'
+import { mapGetters } from 'vuex'
+import { events } from '@/bus'
 
-    export default {
-        name:'SortingAndPreview',
-        components: {
-            CalendarIcon,
-            AlphabetIcon,
-            ArrowUpIcon,
-            CheckIcon,
-            ListIcon,
-            GridIcon
+export default {
+    name: 'SortingAndPreview',
+    components: {
+        CalendarIcon,
+        AlphabetIcon,
+        ArrowUpIcon,
+        CheckIcon,
+        ListIcon,
+        GridIcon
+    },
+    computed: {
+        ...mapGetters(['FilePreviewType']),
+        isGrid() {
+            return this.FilePreviewType === 'grid'
         },
-        computed: {
-            ...mapGetters(['FilePreviewType']),
-            isGrid() {
-                return this.FilePreviewType === 'grid'
-            },
-            isList() {
-                return this.FilePreviewType === 'list'
-            },
-        },
-        data () {
-            return {
-                isVisible: false,
-                filter: {
-                    sort: 'DESC',
-                    field: undefined,
-                }
-            }
-        },
-        methods: {
-            sort (field) {
-
-                this.filter.field = field
-
-                 // Set sorting direction
-                if (this.filter.sort === 'DESC') {
-                    this.filter.sort = 'ASC'
-                } else if (this.filter.sort === 'ASC') {
-                    this.filter.sort = 'DESC'
-                }
-
-                // Save to localStorage sorting options
-                localStorage.setItem('sorting', JSON.stringify({sort: this.filter.sort , field: this.filter.field}))
-
-                // Update sorting state in vuex
-                this.$store.commit('UPDATE_SORTING')
-                
-                // Get data using the application location
-                this.$getDataByLocation()
-            },
-            changePreview(previewType) {
-
-                this.$store.dispatch('changePreviewType' , previewType)
-
-                this.isVisible = false
-
-                events.$emit('sortingAndPreview', false)
-            }
-        },
-        mounted () {
-
-            let sorting = JSON.parse(localStorage.getItem('sorting'))
-
-            // Set default sorting if in not setup in LocalStorage
-            this.filter.sort = sorting ? sorting.sort : 'DESC'
-            this.filter.field = sorting ? sorting.field : 'created_at'
-
-            events.$on('sortingAndPreview', (state) => {
-                this.isVisible = state
-            })
+        isList() {
+            return this.FilePreviewType === 'list'
         }
-        
+    },
+    data() {
+        return {
+            isVisible: false,
+            filter: {
+                sort: 'DESC',
+                field: undefined
+            }
+        }
+    },
+    methods: {
+        sort(field) {
+
+            this.filter.field = field
+
+            // Set sorting direction
+            if (this.filter.sort === 'DESC') {
+                this.filter.sort = 'ASC'
+            } else if (this.filter.sort === 'ASC') {
+                this.filter.sort = 'DESC'
+            }
+
+            // Save to localStorage sorting options
+            localStorage.setItem('sorting', JSON.stringify({ sort: this.filter.sort, field: this.filter.field }))
+
+            // Update sorting state in vuex
+            this.$store.commit('UPDATE_SORTING')
+
+            // Get data using the application location
+            this.$getDataByLocation()
+        },
+        changePreview(previewType) {
+
+            this.$store.dispatch('changePreviewType', previewType)
+
+            this.isVisible = false
+
+            events.$emit('sortingAndPreview', false)
+        }
+    },
+    mounted() {
+
+        let sorting = JSON.parse(localStorage.getItem('sorting'))
+
+        // Set default sorting if in not setup in LocalStorage
+        this.filter.sort = sorting ? sorting.sort : 'DESC'
+        this.filter.field = sorting ? sorting.field : 'created_at'
+
+        events.$on('sortingAndPreview', (state) => {
+            this.isVisible = state
+        })
     }
+
+}
 </script>
 
 <style scoped lang="scss">
@@ -143,7 +136,8 @@
 .show-icon {
     margin-left: auto;
     max-height: 19px;
-     .arrow-down {
+
+    .arrow-down {
         @include transform(rotate(180deg));
     }
 }
@@ -153,14 +147,15 @@
 
     .icon {
         margin-right: 20px;
-        line-height: 0; 
+        line-height: 0;
+
         .alphabet-icon {
-            /deep/line,
-            /deep/polyline {
-                stroke:$text ;
+            /deep/ line,
+            /deep/ polyline {
+                stroke: $text;
             }
         }
-            
+
     }
 
     .text-label {
@@ -221,12 +216,12 @@
             }
 
             path,
-            /deep/line,
-            /deep/polyline,
+            /deep/ line,
+            /deep/ polyline,
             rect,
             circle,
             polygon {
-                stroke: $theme !important; 
+                stroke: $theme !important;
             }
         }
     }
@@ -246,16 +241,16 @@
 
                 .icon {
                     .alphabet-icon {
-                        /deep/line,
-                        /deep/polyline {
-                            stroke:$dark_mode_text_primary ;
+                        /deep/ line,
+                        /deep/ polyline {
+                            stroke: $dark_mode_text_primary;
                         }
                     }
                 }
 
                 &:hover {
                     background: rgba($theme, 0.1);
-                }           
+                }
             }
         }
     }
diff --git a/resources/sass/vue-file-manager/_variables.scss b/resources/sass/vue-file-manager/_variables.scss
index 05731d16..c0c089e6 100755
--- a/resources/sass/vue-file-manager/_variables.scss
+++ b/resources/sass/vue-file-manager/_variables.scss
@@ -19,7 +19,7 @@ $shadow: 0 7px 25px 1px rgba(0, 0, 0, 0.12);
 
 $light_mode_input_background: hsla(210, 10%, 98%, 1);
 $light_mode_popup_shadow: 0 15px 50px 10px rgba(26,38,74,0.12);
-$light_mode_vignette: rgba(255, 255, 255, 0.7);
+$light_mode_vignette: rgba(9, 8, 12, 0.35);
 
 // Dark Mode
 $dark_mode_vignette: rgba(0, 0, 0, 0.3);