From eba8903792616b8337254efbcbd93a53814e61be Mon Sep 17 00:00:00 2001
From: Peter Papp <peterpapp@makingcg.com>
Date: Wed, 14 Apr 2021 11:17:29 +0200
Subject: [PATCH] - Mobile menu components refactoring - Components name
 renaming

---
 public/mix-manifest.json                      | 284 ++++++---
 resources/js/App.vue                          |   3 +-
 .../FilesView/DesktopSortingAndPreview.vue    |  10 +-
 ...obileActions.vue => FileActionsMobile.vue} |  77 +--
 .../js/components/FilesView/FileBrowser.vue   |   6 +-
 .../components/FilesView/FileFullPreview.vue  |  96 ---
 .../js/components/FilesView/FileInfoPanel.vue |   6 +-
 .../js/components/FilesView/FileItemGrid.vue  |   2 +-
 .../js/components/FilesView/FileItemList.vue  |   2 +-
 .../components/FilesView/FileMenuMobile.vue   | 182 ++++++
 .../js/components/FilesView/FilePreview.vue   | 137 +++--
 .../FilesView/FilePreviewNavigationPanel.vue  |   2 +-
 .../FilesView/FileSortingMobile.vue           |  22 +
 ...PreviewMenu.vue => FileSortingOptions.vue} | 116 +---
 .../FilesView/MobileActionButton.vue          |   4 +-
 .../js/components/FilesView/MobileMenu.vue    | 560 ------------------
 .../FilesView/MobileSortingAndPreview.vue     |  76 ---
 .../js/components/FilesView/MobileToolbar.vue |   2 +-
 ...tMenu.vue => MultiSelectToolbarMobile.vue} |  72 +--
 resources/js/components/FilesView/Option.vue  |   1 +
 .../js/components/Mobile/MenuItemList.vue     |  63 +-
 resources/js/components/Mobile/MenuMobile.vue |  93 +++
 .../js/components/Mobile/MenuMobileGroup.vue  |  35 ++
 .../js/components/Mobile/MobileHeader.vue     |   4 +-
 ...CreateFolder.vue => CreateFolderPopup.vue} |   2 +-
 .../components/Others/FilePreviewDetail.vue   |  61 ++
 .../js/components/Others/MobileNavigation.vue |  49 +-
 .../{MoveItem.vue => MoveItemPopup.vue}       |   2 +-
 .../Popup/{Confirm.vue => ConfirmPopup.vue}   |   1 -
 .../{RenameItem.vue => RenameItemPopup.vue}   |   2 +-
 .../{ShareCreate.vue => ShareCreatePopup.vue} |   2 +-
 .../{ShareEdit.vue => ShareEditPopup.vue}     |   2 +-
 resources/js/components/Others/Vignette.vue   |  15 +-
 .../{MenuBar.vue => SidebarNavigation.vue}    |   2 +-
 .../js/components/Sidebar/UserHeadline.vue    |  31 +-
 resources/js/views/Admin.vue                  |  14 +-
 resources/js/views/Platform.vue               | 164 +++--
 resources/js/views/Shared.vue                 | 176 +++---
 .../others/color-template.blade.php           |   2 +-
 webpack.mix.js                                |   4 +-
 40 files changed, 1044 insertions(+), 1340 deletions(-)
 rename resources/js/components/FilesView/{MobileActions.vue => FileActionsMobile.vue} (71%)
 delete mode 100644 resources/js/components/FilesView/FileFullPreview.vue
 create mode 100644 resources/js/components/FilesView/FileMenuMobile.vue
 create mode 100644 resources/js/components/FilesView/FileSortingMobile.vue
 rename resources/js/components/FilesView/{SortingAndPreviewMenu.vue => FileSortingOptions.vue} (53%)
 delete mode 100644 resources/js/components/FilesView/MobileMenu.vue
 delete mode 100644 resources/js/components/FilesView/MobileSortingAndPreview.vue
 rename resources/js/components/FilesView/{MobileMultiSelectMenu.vue => MultiSelectToolbarMobile.vue} (78%)
 create mode 100644 resources/js/components/Mobile/MenuMobile.vue
 create mode 100644 resources/js/components/Mobile/MenuMobileGroup.vue
 rename resources/js/components/Others/{CreateFolder.vue => CreateFolderPopup.vue} (99%)
 create mode 100644 resources/js/components/Others/FilePreviewDetail.vue
 rename resources/js/components/Others/{MoveItem.vue => MoveItemPopup.vue} (99%)
 rename resources/js/components/Others/Popup/{Confirm.vue => ConfirmPopup.vue} (99%)
 rename resources/js/components/Others/{RenameItem.vue => RenameItemPopup.vue} (99%)
 rename resources/js/components/Others/{ShareCreate.vue => ShareCreatePopup.vue} (99%)
 rename resources/js/components/Others/{ShareEdit.vue => ShareEditPopup.vue} (99%)
 rename resources/js/components/Sidebar/{MenuBar.vue => SidebarNavigation.vue} (99%)

diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index b85ca860..39bcd4f2 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,77 +1,211 @@
 {
-    "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~2fac28cc.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~2fac28cc.js?id=d8dac775684711abc6e2",
-    "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~5f8db287.js": "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~5f8db287.js?id=d85e8bc2bb4fc4b9cd7e",
-    "/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=7e636c58637634393ebd",
-    "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.js?id=27dc0a5d34766399afb9",
-    "/chunks/files~chunks/shared-files~chunks/shared/file-browser~chunks/shared/single-file.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser~chunks/shared/single-file.js?id=d55509cf07031fb3460f",
-    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.js?id=d3728bf80112000ff2ea",
-    "/chunks/not-found.js": "/chunks/not-found.js?id=05b1ba4bacdc129f2b9d",
-    "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=a72c50e0fd5289000d7c",
-    "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=665543709ee6cfd0ac32",
-    "/vendors~chunks/platform~chunks/shared.js": "/vendors~chunks/platform~chunks/shared.js?id=0e6d6979c32214f01a99",
-    "/js/main.js": "/js/main.js?id=9ff46b8434eebed4b593",
-    "/css/app.css": "/css/app.css?id=5ef36155a311dd4539c1",
-    "/chunks/admin.js": "/chunks/admin.js?id=ad2fdd7add13510a6869",
-    "/chunks/admin-account.js": "/chunks/admin-account.js?id=74832d1136b70db80e68",
-    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=58baefeb9cb14a9638de",
-    "/chunks/app-billings.js": "/chunks/app-billings.js?id=56fa0e764a7e34d33e26",
-    "/chunks/app-email.js": "/chunks/app-email.js?id=cd9d6ed9e9d015da9d91",
-    "/chunks/app-index.js": "/chunks/app-index.js?id=cb3498e406901deb0930",
-    "/chunks/app-language.js": "/chunks/app-language.js?id=82471b889e0bac03d269",
-    "/chunks/app-others.js": "/chunks/app-others.js?id=034793903665db47a0bc",
-    "/chunks/app-payments.js": "/chunks/app-payments.js?id=f034a7f9f588fd0665f5",
-    "/chunks/app-settings.js": "/chunks/app-settings.js?id=adf82ebe3b4afab7f145",
-    "/chunks/app-setup.js": "/chunks/app-setup.js?id=61eaa35b1807d26ed3a0",
-    "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=c7bcc29436bb9821e65d",
-    "/chunks/contact-us.js": "/chunks/contact-us.js?id=e3c45469a83f82938eef",
-    "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=f67f77d78c62e27feb8d",
-    "/chunks/dashboard.js": "/chunks/dashboard.js?id=ec22cf79f03a7e5b2704",
-    "/chunks/database.js": "/chunks/database.js?id=4c4925b5e68f9da983db",
-    "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=6a4f59eb5a9b27c9bcea",
-    "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=5081b5846c5446ed6801",
-    "/chunks/files.js": "/chunks/files.js?id=f1a6299d0a8e7a23868c",
-    "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=5760d4df726d6fb823f0",
-    "/chunks/homepage.js": "/chunks/homepage.js?id=2f62cb7c5a4f4cc81cd5",
-    "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=7375c45f9ccd94429286",
-    "/chunks/invoices.js": "/chunks/invoices.js?id=49b9d6c93e2eaf172598",
-    "/chunks/page-edit.js": "/chunks/page-edit.js?id=1c3a7c3a0b35ebd4c9ef",
-    "/chunks/pages.js": "/chunks/pages.js?id=4f1a076b098b090bc0a5",
-    "/chunks/plan.js": "/chunks/plan.js?id=c6eb3b2ce2ced3b5fddb",
-    "/chunks/plan-create.js": "/chunks/plan-create.js?id=def653848a1b8d9271c7",
-    "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=9f42b1eb10d062c5b57c",
-    "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=f35db87931ff3ea8d417",
-    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=1147d630ed7ab79581eb",
-    "/chunks/plans.js": "/chunks/plans.js?id=f954b7046f69ab147ab0",
-    "/chunks/platform.js": "/chunks/platform.js?id=fa5822cff1f4e16bf243",
-    "/chunks/profile.js": "/chunks/profile.js?id=eb42c69ad64ffb1f1d9c",
-    "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=f49c482d232b2036dd1d",
-    "/chunks/settings.js": "/chunks/settings.js?id=ba49333bd61079e1c647",
-    "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=42594b68cecda23f3092",
-    "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=ce22879a0d39da904ea0",
-    "/chunks/settings-password.js": "/chunks/settings-password.js?id=af99ddcdc5baac89f34b",
-    "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=055208393eac740b539b",
-    "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=ffadbefe2d239fe2bd64",
-    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=9b58101f1a0cb73b5d4c",
-    "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=d60972a2216523642850",
-    "/chunks/shared.js": "/chunks/shared.js?id=070dcf971c21f4f1d30b",
-    "/chunks/shared-files.js": "/chunks/shared-files.js?id=c473caf528377b2bacf6",
-    "/chunks/shared/authenticate.js": "/chunks/shared/authenticate.js?id=c679dd7737bbad19700a",
-    "/chunks/shared/file-browser.js": "/chunks/shared/file-browser.js?id=4733ba7889f5b31760e2",
-    "/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=d57e261a133924a8857f",
-    "/chunks/sign-in.js": "/chunks/sign-in.js?id=6a92a83db12f0d425dff",
-    "/chunks/sign-up.js": "/chunks/sign-up.js?id=d9a106720f1b216845ee",
-    "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=4515bb31ce9a54898b27",
-    "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=ec88acaf8d126f646628",
-    "/chunks/subscription-service.js": "/chunks/subscription-service.js?id=59c036318ba1785a7f5a",
-    "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=cf092c2a6c1816855f83",
-    "/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=81bf57d7eb737eca6071",
-    "/chunks/user.js": "/chunks/user.js?id=68e688174b27864a8f1f",
-    "/chunks/user-create.js": "/chunks/user-create.js?id=d99c25d654617ca95af7",
-    "/chunks/user-delete.js": "/chunks/user-delete.js?id=4fd6e3a2a671370b695a",
-    "/chunks/user-detail.js": "/chunks/user-detail.js?id=bfe7fdb83731e9278ec8",
-    "/chunks/user-invoices.js": "/chunks/user-invoices.js?id=d48ebd039b9651b667d0",
-    "/chunks/user-password.js": "/chunks/user-password.js?id=9d1c9cdac5b2d51fb905",
-    "/chunks/user-storage.js": "/chunks/user-storage.js?id=a665c14aca1c9d9b2dbd",
-    "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=5d8e905cd39d44f54b1e",
-    "/chunks/users.js": "/chunks/users.js?id=bfe65b425d1c218a62ea"
+    "/js/main.js": "/js/main.js",
+    "/css/app.css": "/css/app.css",
+    "/chunks/admin.js": "/chunks/admin.js?id=7bb0da90be946f1f239f",
+    "/chunks/admin-account.js": "/chunks/admin-account.js?id=5ad2162bf1689c20bccb",
+    "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~c7a13fb0.js?id=d21b5946c88a87e9099d",
+    "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~5f8db287.js": "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~5f8db287.js?id=07a5f340da451bf2ae5d",
+    "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~eeab5771.js": "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~eeab5771.js?id=319ba6f55c8fb5dca6ac",
+    "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared/file-browser.js?id=6f6e038b64009a752638",
+    "/chunks/admin~chunks/platform.js": "/chunks/admin~chunks/platform.js?id=e8c676f0b1add89a391f",
+    "/chunks/admin~chunks/platform~chunks/shared.js": "/chunks/admin~chunks/platform~chunks/shared.js?id=f34c3f924e632de0bc6e",
+    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=f779d10bf0f57bf3b08c",
+    "/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=075ff381293e1a20d167",
+    "/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=5f27527c258dada4aeb9",
+    "/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=b6c9565875974d8c350c",
+    "/chunks/app-billings.js": "/chunks/app-billings.js?id=22ad87a460950d32721a",
+    "/chunks/app-email.js": "/chunks/app-email.js?id=db0423ca77d7b92a1d52",
+    "/chunks/app-index.js": "/chunks/app-index.js?id=e3e2403810a4f1fd94e9",
+    "/chunks/app-language.js": "/chunks/app-language.js?id=3e5407ae9576a0edc760",
+    "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/s~38c276fc.js": "/chunks/app-language~chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/s~38c276fc.js?id=5e8dfc5ac3b67b3009f8",
+    "/chunks/app-others.js": "/chunks/app-others.js?id=73a4e8a13652e2b7ed83",
+    "/chunks/app-payments.js": "/chunks/app-payments.js?id=4b8627cfd6546bd56caa",
+    "/chunks/app-settings.js": "/chunks/app-settings.js?id=92003b708b3a043078d3",
+    "/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=c6c12c5a2f5ee26888a3",
+    "/chunks/app-setup.js": "/chunks/app-setup.js?id=a0ef7ae0d22e995093d2",
+    "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=d0da577903083a891b00",
+    "/chunks/contact-us.js": "/chunks/contact-us.js?id=1702da1aa1818e97dda1",
+    "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js": "/chunks/contact-us~chunks/dynamic-page~chunks/homepage.js?id=7abdbac43596d1deb664",
+    "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=ed92e7337efbd2afaa52",
+    "/chunks/dashboard.js": "/chunks/dashboard.js?id=a9a199caa6709ebb48f2",
+    "/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=ef163f8da51054f89d5c",
+    "/chunks/database.js": "/chunks/database.js?id=7cf91421350f68985889",
+    "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=ffff5333522a1116d856",
+    "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=de64a0ce7c737b106d96",
+    "/chunks/files.js": "/chunks/files.js?id=1731c1b3a8bfbbeaa301",
+    "/chunks/files~chunks/platform~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared-files~chunks/shared/file-browser.js?id=a930cc4a4f5af02460bb",
+    "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.js?id=dcd82a6b80a31f229b5a",
+    "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser~chunks/sha~8510f6c9.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser~chunks/sha~8510f6c9.js?id=ac54ac828e9a8667410f",
+    "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared/file-browser~chunks/user~9058a49f.js": "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared/file-browser~chunks/user~9058a49f.js?id=a0dd218c154e83af8dee",
+    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.js?id=c5009a3c2463bfb02c36",
+    "/chunks/files~chunks/shared-files~chunks/shared/file-browser~chunks/shared/single-file.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser~chunks/shared/single-file.js?id=7f84c4b09fcf5b890775",
+    "/chunks/files~chunks/shared/file-browser.js": "/chunks/files~chunks/shared/file-browser.js?id=ff8043fe2c43e13a74e2",
+    "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=daaffc43387587cf4b57",
+    "/chunks/homepage.js": "/chunks/homepage.js?id=4395ca4eb2abdbe487c0",
+    "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=6b17b649280761c01c5a",
+    "/chunks/invoices.js": "/chunks/invoices.js?id=49e5e88b85d0bcfa04c2",
+    "/chunks/not-found.js": "/chunks/not-found.js?id=e0eb924527b6f9b20e3f",
+    "/chunks/page-edit.js": "/chunks/page-edit.js?id=23bb8bddee499a6b1061",
+    "/chunks/pages.js": "/chunks/pages.js?id=513b48ab860bfe24bed9",
+    "/chunks/plan.js": "/chunks/plan.js?id=980ecbb2c550ecc08b6d",
+    "/chunks/plan-create.js": "/chunks/plan-create.js?id=3392652808dff5264c28",
+    "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=bb0d06be8e675c88bd0f",
+    "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=7a6acca368d11e2a4815",
+    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=260d274a422706d71809",
+    "/chunks/plans.js": "/chunks/plans.js?id=6d14bd88ebd6cf82fdc6",
+    "/chunks/platform.js": "/chunks/platform.js?id=97c929acc6aa40ee32cc",
+    "/chunks/platform~chunks/shared.js": "/chunks/platform~chunks/shared.js?id=ffbda8c58183915cb55a",
+    "/chunks/profile.js": "/chunks/profile.js?id=bdc92d734851c0d09b8c",
+    "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=a5e7ed872d1430177922",
+    "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=b35e751cdc1946a4fb60",
+    "/chunks/settings.js": "/chunks/settings.js?id=1a5e37e67eb534cbda1b",
+    "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=17428f129a14c15323e5",
+    "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=9bf3504a262af35fa997",
+    "/chunks/settings-password.js": "/chunks/settings-password.js?id=dd27209e827e96b49917",
+    "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=e5437f00d24224997f86",
+    "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=aa34712346ed9a2fc12d",
+    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=1bffa4ae7d545af08355",
+    "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=c6b88005b133268ed88f",
+    "/chunks/shared.js": "/chunks/shared.js?id=68165b2df75fd836ec22",
+    "/chunks/shared-files.js": "/chunks/shared-files.js?id=e8961791d642db47b77e",
+    "/chunks/shared/authenticate.js": "/chunks/shared/authenticate.js?id=aab96d6900885ccb90ed",
+    "/chunks/shared/file-browser.js": "/chunks/shared/file-browser.js?id=b2fbe95c0ed7074377ce",
+    "/chunks/shared/single-file.js": "/chunks/shared/single-file.js?id=e11f79244629896c95db",
+    "/chunks/sign-in.js": "/chunks/sign-in.js?id=f8ed9524d42eac1b22cc",
+    "/chunks/sign-up.js": "/chunks/sign-up.js?id=f82eac926eccda791f9e",
+    "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=6cd6006913355a32f2dc",
+    "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=0da9ece2d7d853f2bb27",
+    "/chunks/subscription-service.js": "/chunks/subscription-service.js?id=a09dc140a3914fb64a1a",
+    "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=b49a1f662c7dadee59ac",
+    "/chunks/upgrade-billing~chunks/upgrade-plan.js": "/chunks/upgrade-billing~chunks/upgrade-plan.js?id=66b9183a2e51801b81a5",
+    "/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=05a7779a4d6bb2dda84e",
+    "/chunks/user.js": "/chunks/user.js?id=c72518ac51fba4af725d",
+    "/chunks/user-create.js": "/chunks/user-create.js?id=ccbd9c25bb268bb084c8",
+    "/chunks/user-delete.js": "/chunks/user-delete.js?id=4a7ec6133d2e735229aa",
+    "/chunks/user-detail.js": "/chunks/user-detail.js?id=afa8a3f0f5972909e62a",
+    "/chunks/user-invoices.js": "/chunks/user-invoices.js?id=5700c76f6041d7b0ed2d",
+    "/chunks/user-password.js": "/chunks/user-password.js?id=de180838609bb88ffe90",
+    "/chunks/user-storage.js": "/chunks/user-storage.js?id=dc33def6d2b4390869b5",
+    "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=c6ec1b7215530cfdbceb",
+    "/chunks/users.js": "/chunks/users.js?id=a6a20d23eaef40e24740",
+    "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~2fac28cc.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~2fac28cc.js?id=5007f400f6b506ab23f4",
+    "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~d5e36d91.js": "/vendors~chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~d5e36d91.js?id=2b11dd8f37c3c2421f2f",
+    "/vendors~chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser~ch~52c14f2e.js": "/vendors~chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser~ch~52c14f2e.js?id=8f589cb0d5e028068d09",
+    "/chunks/platform~chunks/shared.dd0933f81c0c06787f9f.hot-update.js": "/chunks/platform~chunks/shared.dd0933f81c0c06787f9f.hot-update.js",
+    "/chunks/platform.58d67c82033c1297eeba.hot-update.js": "/chunks/platform.58d67c82033c1297eeba.hot-update.js",
+    "/chunks/platform~chunks/shared.58d67c82033c1297eeba.hot-update.js": "/chunks/platform~chunks/shared.58d67c82033c1297eeba.hot-update.js",
+    "/chunks/shared.58d67c82033c1297eeba.hot-update.js": "/chunks/shared.58d67c82033c1297eeba.hot-update.js",
+    "/chunks/platform~chunks/shared.9cd207a6d4f0cfb7a143.hot-update.js": "/chunks/platform~chunks/shared.9cd207a6d4f0cfb7a143.hot-update.js",
+    "/chunks/platform.e438fc1e539608f3d09b.hot-update.js": "/chunks/platform.e438fc1e539608f3d09b.hot-update.js",
+    "/chunks/platform~chunks/shared.e438fc1e539608f3d09b.hot-update.js": "/chunks/platform~chunks/shared.e438fc1e539608f3d09b.hot-update.js",
+    "/chunks/shared.e438fc1e539608f3d09b.hot-update.js": "/chunks/shared.e438fc1e539608f3d09b.hot-update.js",
+    "/chunks/platform.8be87d602a93a72b44b4.hot-update.js": "/chunks/platform.8be87d602a93a72b44b4.hot-update.js",
+    "/js/main.686d37ebb385dca2f5d6.hot-update.js": "/js/main.686d37ebb385dca2f5d6.hot-update.js",
+    "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~96958efc.js": "/chunks/admin~chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/~96958efc.js?id=dd4d11bf1f9b19df4768",
+    "/chunks/platform.686d37ebb385dca2f5d6.hot-update.js": "/chunks/platform.686d37ebb385dca2f5d6.hot-update.js",
+    "/js/main.f1cbcf7fe85514ae5abf.hot-update.js": "/js/main.f1cbcf7fe85514ae5abf.hot-update.js",
+    "/chunks/admin~chunks/platform.f1cbcf7fe85514ae5abf.hot-update.js": "/chunks/admin~chunks/platform.f1cbcf7fe85514ae5abf.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.f1cbcf7fe85514ae5abf.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.f1cbcf7fe85514ae5abf.hot-update.js",
+    "/chunks/platform.f1cbcf7fe85514ae5abf.hot-update.js": "/chunks/platform.f1cbcf7fe85514ae5abf.hot-update.js",
+    "/chunks/platform~chunks/shared.f1cbcf7fe85514ae5abf.hot-update.js": "/chunks/platform~chunks/shared.f1cbcf7fe85514ae5abf.hot-update.js",
+    "/chunks/shared.4ad84f567976f8d3bc21.hot-update.js": "/chunks/shared.4ad84f567976f8d3bc21.hot-update.js",
+    "/chunks/admin.14eb57fa554b61ff8683.hot-update.js": "/chunks/admin.14eb57fa554b61ff8683.hot-update.js",
+    "/chunks/platform.14eb57fa554b61ff8683.hot-update.js": "/chunks/platform.14eb57fa554b61ff8683.hot-update.js",
+    "/chunks/admin.185fd275a1de7ebef3ae.hot-update.js": "/chunks/admin.185fd275a1de7ebef3ae.hot-update.js",
+    "/chunks/admin~chunks/platform.185fd275a1de7ebef3ae.hot-update.js": "/chunks/admin~chunks/platform.185fd275a1de7ebef3ae.hot-update.js",
+    "/chunks/platform.185fd275a1de7ebef3ae.hot-update.js": "/chunks/platform.185fd275a1de7ebef3ae.hot-update.js",
+    "/chunks/platform.09b1061e0780b787489b.hot-update.js": "/chunks/platform.09b1061e0780b787489b.hot-update.js",
+    "/chunks/platform~chunks/shared.09b1061e0780b787489b.hot-update.js": "/chunks/platform~chunks/shared.09b1061e0780b787489b.hot-update.js",
+    "/chunks/shared.09b1061e0780b787489b.hot-update.js": "/chunks/shared.09b1061e0780b787489b.hot-update.js",
+    "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.1594551a22ec7ca0c57b.hot-update.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.1594551a22ec7ca0c57b.hot-update.js",
+    "/chunks/platform~chunks/shared.1594551a22ec7ca0c57b.hot-update.js": "/chunks/platform~chunks/shared.1594551a22ec7ca0c57b.hot-update.js",
+    "/chunks/platform~chunks/shared.cd715703115a0afa6430.hot-update.js": "/chunks/platform~chunks/shared.cd715703115a0afa6430.hot-update.js",
+    "/chunks/platform~chunks/shared.06197771d9e750d5d765.hot-update.js": "/chunks/platform~chunks/shared.06197771d9e750d5d765.hot-update.js",
+    "/chunks/platform~chunks/shared.4f3142dd4ed4de8b8630.hot-update.js": "/chunks/platform~chunks/shared.4f3142dd4ed4de8b8630.hot-update.js",
+    "/chunks/platform~chunks/shared.4b13d28cdd9e06c00eb3.hot-update.js": "/chunks/platform~chunks/shared.4b13d28cdd9e06c00eb3.hot-update.js",
+    "/chunks/platform~chunks/shared.c11140130f2464ecebed.hot-update.js": "/chunks/platform~chunks/shared.c11140130f2464ecebed.hot-update.js",
+    "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.5989062c7a1bd87a2fe1.hot-update.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.5989062c7a1bd87a2fe1.hot-update.js",
+    "/chunks/platform~chunks/shared.4da7be6c51fb765e3f3a.hot-update.js": "/chunks/platform~chunks/shared.4da7be6c51fb765e3f3a.hot-update.js",
+    "/chunks/platform~chunks/shared.b57812a1c17c084a1dc7.hot-update.js": "/chunks/platform~chunks/shared.b57812a1c17c084a1dc7.hot-update.js",
+    "/chunks/platform~chunks/shared.d1b35477441ba484cd33.hot-update.js": "/chunks/platform~chunks/shared.d1b35477441ba484cd33.hot-update.js",
+    "/chunks/platform~chunks/shared.dd8117e8d03b846e17fd.hot-update.js": "/chunks/platform~chunks/shared.dd8117e8d03b846e17fd.hot-update.js",
+    "/chunks/platform~chunks/shared.a50ebf529b5a7d7becdc.hot-update.js": "/chunks/platform~chunks/shared.a50ebf529b5a7d7becdc.hot-update.js",
+    "/chunks/platform~chunks/shared.81f4b0f5a38c25479500.hot-update.js": "/chunks/platform~chunks/shared.81f4b0f5a38c25479500.hot-update.js",
+    "/chunks/platform~chunks/shared.5b0dff4ac0e0a41d56de.hot-update.js": "/chunks/platform~chunks/shared.5b0dff4ac0e0a41d56de.hot-update.js",
+    "/chunks/platform~chunks/shared.0273af08eacb06edd47f.hot-update.js": "/chunks/platform~chunks/shared.0273af08eacb06edd47f.hot-update.js",
+    "/chunks/platform~chunks/shared.02d8a42b0bae66d417d7.hot-update.js": "/chunks/platform~chunks/shared.02d8a42b0bae66d417d7.hot-update.js",
+    "/chunks/platform~chunks/shared.596c12f22edc607e504b.hot-update.js": "/chunks/platform~chunks/shared.596c12f22edc607e504b.hot-update.js",
+    "/chunks/platform~chunks/shared.a09f163cb817128df7a0.hot-update.js": "/chunks/platform~chunks/shared.a09f163cb817128df7a0.hot-update.js",
+    "/chunks/platform~chunks/shared.f03741c15f42e092ad65.hot-update.js": "/chunks/platform~chunks/shared.f03741c15f42e092ad65.hot-update.js",
+    "/chunks/platform~chunks/shared.ba88ef29b4bfbcb64a08.hot-update.js": "/chunks/platform~chunks/shared.ba88ef29b4bfbcb64a08.hot-update.js",
+    "/js/main.8f64bf335cef67dcb962.hot-update.js": "/js/main.8f64bf335cef67dcb962.hot-update.js",
+    "/js/main.66b9d73658ae67853407.hot-update.js": "/js/main.66b9d73658ae67853407.hot-update.js",
+    "/chunks/admin~chunks/platform.66b9d73658ae67853407.hot-update.js": "/chunks/admin~chunks/platform.66b9d73658ae67853407.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.66b9d73658ae67853407.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.66b9d73658ae67853407.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared/file-browser~chunks/shared/single-file.66b9d73658ae67853407.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser~chunks/shared/single-file.66b9d73658ae67853407.hot-update.js",
+    "/chunks/platform.66b9d73658ae67853407.hot-update.js": "/chunks/platform.66b9d73658ae67853407.hot-update.js",
+    "/chunks/platform~chunks/shared.66b9d73658ae67853407.hot-update.js": "/chunks/platform~chunks/shared.66b9d73658ae67853407.hot-update.js",
+    "/chunks/shared.66b9d73658ae67853407.hot-update.js": "/chunks/shared.66b9d73658ae67853407.hot-update.js",
+    "/chunks/platform~chunks/shared.6d4d89cd3ebd8a5948b6.hot-update.js": "/chunks/platform~chunks/shared.6d4d89cd3ebd8a5948b6.hot-update.js",
+    "/chunks/platform~chunks/shared.e349ad386ff7244cf4d4.hot-update.js": "/chunks/platform~chunks/shared.e349ad386ff7244cf4d4.hot-update.js",
+    "/chunks/platform~chunks/shared.5dc831112b25ed5bd5c9.hot-update.js": "/chunks/platform~chunks/shared.5dc831112b25ed5bd5c9.hot-update.js",
+    "/chunks/platform~chunks/shared.e408d01d3d583eafbc27.hot-update.js": "/chunks/platform~chunks/shared.e408d01d3d583eafbc27.hot-update.js",
+    "/chunks/platform~chunks/shared.01a1aea19d1c52ffd54d.hot-update.js": "/chunks/platform~chunks/shared.01a1aea19d1c52ffd54d.hot-update.js",
+    "/chunks/platform~chunks/shared.bc5906eb02278190f17d.hot-update.js": "/chunks/platform~chunks/shared.bc5906eb02278190f17d.hot-update.js",
+    "/chunks/platform~chunks/shared.bcf97d153907d502e651.hot-update.js": "/chunks/platform~chunks/shared.bcf97d153907d502e651.hot-update.js",
+    "/chunks/platform~chunks/shared.2498249eb28d6ea7c7de.hot-update.js": "/chunks/platform~chunks/shared.2498249eb28d6ea7c7de.hot-update.js",
+    "/chunks/platform~chunks/shared.9cb7197e53af0311d657.hot-update.js": "/chunks/platform~chunks/shared.9cb7197e53af0311d657.hot-update.js",
+    "/chunks/platform~chunks/shared.381f776802c068f9198a.hot-update.js": "/chunks/platform~chunks/shared.381f776802c068f9198a.hot-update.js",
+    "/chunks/platform~chunks/shared.815c0828ff5ca52ff68d.hot-update.js": "/chunks/platform~chunks/shared.815c0828ff5ca52ff68d.hot-update.js",
+    "/chunks/platform~chunks/shared.2df30c8cefb817c6e158.hot-update.js": "/chunks/platform~chunks/shared.2df30c8cefb817c6e158.hot-update.js",
+    "/chunks/platform~chunks/shared.177c1e18b11c54145db6.hot-update.js": "/chunks/platform~chunks/shared.177c1e18b11c54145db6.hot-update.js",
+    "/chunks/platform~chunks/shared.b720f6a39f34ea3fa824.hot-update.js": "/chunks/platform~chunks/shared.b720f6a39f34ea3fa824.hot-update.js",
+    "/chunks/platform~chunks/shared.7c343d74aaedac327895.hot-update.js": "/chunks/platform~chunks/shared.7c343d74aaedac327895.hot-update.js",
+    "/chunks/platform~chunks/shared.26d7af48dbe1212ee9fb.hot-update.js": "/chunks/platform~chunks/shared.26d7af48dbe1212ee9fb.hot-update.js",
+    "/chunks/platform~chunks/shared.18026b96f60a6f69230f.hot-update.js": "/chunks/platform~chunks/shared.18026b96f60a6f69230f.hot-update.js",
+    "/chunks/platform~chunks/shared.d7f64ef1231d4a780934.hot-update.js": "/chunks/platform~chunks/shared.d7f64ef1231d4a780934.hot-update.js",
+    "/chunks/platform~chunks/shared.b1f0ceebe8140c039b8a.hot-update.js": "/chunks/platform~chunks/shared.b1f0ceebe8140c039b8a.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared/file-browser~chunks/shared/single-file.6f2348f89a409b0e556a.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser~chunks/shared/single-file.6f2348f89a409b0e556a.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.7ac0a28f2225808b4613.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.7ac0a28f2225808b4613.hot-update.js",
+    "/chunks/platform~chunks/shared.7ac0a28f2225808b4613.hot-update.js": "/chunks/platform~chunks/shared.7ac0a28f2225808b4613.hot-update.js",
+    "/chunks/platform~chunks/shared.44310db7254238804c0b.hot-update.js": "/chunks/platform~chunks/shared.44310db7254238804c0b.hot-update.js",
+    "/chunks/platform~chunks/shared.df38c4bf391a2575e3af.hot-update.js": "/chunks/platform~chunks/shared.df38c4bf391a2575e3af.hot-update.js",
+    "/chunks/platform~chunks/shared.29776da85f9521230847.hot-update.js": "/chunks/platform~chunks/shared.29776da85f9521230847.hot-update.js",
+    "/chunks/platform~chunks/shared.9572ec7385ecf23757e2.hot-update.js": "/chunks/platform~chunks/shared.9572ec7385ecf23757e2.hot-update.js",
+    "/chunks/platform~chunks/shared.315a38198dd3acb81dce.hot-update.js": "/chunks/platform~chunks/shared.315a38198dd3acb81dce.hot-update.js",
+    "/chunks/platform~chunks/shared.8d57e08f4db8c5ff6268.hot-update.js": "/chunks/platform~chunks/shared.8d57e08f4db8c5ff6268.hot-update.js",
+    "/chunks/platform~chunks/shared.46c010a33461cd7c2341.hot-update.js": "/chunks/platform~chunks/shared.46c010a33461cd7c2341.hot-update.js",
+    "/chunks/platform~chunks/shared.439d0278621fb178f758.hot-update.js": "/chunks/platform~chunks/shared.439d0278621fb178f758.hot-update.js",
+    "/js/main.c0cc833f4bb5fb51021c.hot-update.js": "/js/main.c0cc833f4bb5fb51021c.hot-update.js",
+    "/chunks/platform.a6dfd284423b109939ac.hot-update.js": "/chunks/platform.a6dfd284423b109939ac.hot-update.js",
+    "/chunks/platform.4372379062e90811d40d.hot-update.js": "/chunks/platform.4372379062e90811d40d.hot-update.js",
+    "/chunks/platform~chunks/shared.5d63dcda4a85f6deddd4.hot-update.js": "/chunks/platform~chunks/shared.5d63dcda4a85f6deddd4.hot-update.js",
+    "/chunks/platform~chunks/shared.19fb3b4d8ec97dc21a93.hot-update.js": "/chunks/platform~chunks/shared.19fb3b4d8ec97dc21a93.hot-update.js",
+    "/chunks/platform~chunks/shared.8e3a4e2397bcb067188c.hot-update.js": "/chunks/platform~chunks/shared.8e3a4e2397bcb067188c.hot-update.js",
+    "/chunks/platform~chunks/shared.412a4d6ca87763c1b9d5.hot-update.js": "/chunks/platform~chunks/shared.412a4d6ca87763c1b9d5.hot-update.js",
+    "/chunks/platform~chunks/shared.44e77142781a9e16eb25.hot-update.js": "/chunks/platform~chunks/shared.44e77142781a9e16eb25.hot-update.js",
+    "/chunks/platform~chunks/shared.b3af2d4eb3f343abbab8.hot-update.js": "/chunks/platform~chunks/shared.b3af2d4eb3f343abbab8.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.39b32e7ebd36143c7630.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.39b32e7ebd36143c7630.hot-update.js",
+    "/js/main.c6875c881bb90531a832.hot-update.js": "/js/main.c6875c881bb90531a832.hot-update.js",
+    "/chunks/platform~chunks/shared.c6875c881bb90531a832.hot-update.js": "/chunks/platform~chunks/shared.c6875c881bb90531a832.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.72b9f293239b9d604ac9.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.72b9f293239b9d604ac9.hot-update.js",
+    "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.8ccafde208cd7a1dffb7.hot-update.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.8ccafde208cd7a1dffb7.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.8ccafde208cd7a1dffb7.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.8ccafde208cd7a1dffb7.hot-update.js",
+    "/chunks/platform~chunks/shared.8469152e311439f8cb70.hot-update.js": "/chunks/platform~chunks/shared.8469152e311439f8cb70.hot-update.js",
+    "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.1496d35248fc37a71f4c.hot-update.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.1496d35248fc37a71f4c.hot-update.js",
+    "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.d9f12ac2ffed93e49fbd.hot-update.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.d9f12ac2ffed93e49fbd.hot-update.js",
+    "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.c65fca4ccf225e410338.hot-update.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.c65fca4ccf225e410338.hot-update.js",
+    "/chunks/platform~chunks/shared.17b65f80fabb223da0cf.hot-update.js": "/chunks/platform~chunks/shared.17b65f80fabb223da0cf.hot-update.js",
+    "/chunks/platform~chunks/shared.25cd01d9f05803b71aca.hot-update.js": "/chunks/platform~chunks/shared.25cd01d9f05803b71aca.hot-update.js",
+    "/chunks/platform~chunks/shared.76dc0afabcd373f6de1d.hot-update.js": "/chunks/platform~chunks/shared.76dc0afabcd373f6de1d.hot-update.js",
+    "/chunks/platform~chunks/shared.91dacb62931448cef9ad.hot-update.js": "/chunks/platform~chunks/shared.91dacb62931448cef9ad.hot-update.js",
+    "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.76ff94b6d0a557a6a81c.hot-update.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.76ff94b6d0a557a6a81c.hot-update.js",
+    "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.9565183c03ffb13adfe1.hot-update.js": "/chunks/files~chunks/platform~chunks/shared~chunks/shared-files~chunks/shared/file-browser.9565183c03ffb13adfe1.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared/file-browser.9565183c03ffb13adfe1.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared/file-browser.9565183c03ffb13adfe1.hot-update.js",
+    "/chunks/platform~chunks/shared.9565183c03ffb13adfe1.hot-update.js": "/chunks/platform~chunks/shared.9565183c03ffb13adfe1.hot-update.js",
+    "/chunks/platform~chunks/shared.1f30f829c0b184357bf1.hot-update.js": "/chunks/platform~chunks/shared.1f30f829c0b184357bf1.hot-update.js",
+    "/chunks/platform~chunks/shared.d82c4cbe4bcee26a499a.hot-update.js": "/chunks/platform~chunks/shared.d82c4cbe4bcee26a499a.hot-update.js",
+    "/chunks/shared.5ef9810a79a9b9f21044.hot-update.js": "/chunks/shared.5ef9810a79a9b9f21044.hot-update.js",
+    "/js/main.7b86ccc4038937e14422.hot-update.js": "/js/main.7b86ccc4038937e14422.hot-update.js",
+    "/chunks/platform.610f56f1f5ffe3dd7fdb.hot-update.js": "/chunks/platform.610f56f1f5ffe3dd7fdb.hot-update.js"
 }
diff --git a/resources/js/App.vue b/resources/js/App.vue
index 1c3bd5dd..00587f5a 100644
--- a/resources/js/App.vue
+++ b/resources/js/App.vue
@@ -5,13 +5,14 @@
         <Alert />
         <ToastrWrapper />
         <CookieDisclaimer />
-        <Vignette />
 
         <!--Show spinner before translations is loaded-->
         <Spinner v-if="! isLoadedTranslations"/>
 
         <!--App view-->
         <router-view v-if="isLoadedTranslations" />
+
+        <Vignette />
     </div>
 </template>
 
diff --git a/resources/js/components/FilesView/DesktopSortingAndPreview.vue b/resources/js/components/FilesView/DesktopSortingAndPreview.vue
index aba4ab3c..0a9791d5 100644
--- a/resources/js/components/FilesView/DesktopSortingAndPreview.vue
+++ b/resources/js/components/FilesView/DesktopSortingAndPreview.vue
@@ -1,16 +1,18 @@
 <template>
     <div v-if="isVisible" class="sorting-preview">
-        <SortingAndPreviewMenu />
+        <FileSortingOptions />
     </div>
 </template>
 
 <script>
-import SortingAndPreviewMenu from '@/components/FilesView/SortingAndPreviewMenu'
+import FileSortingOptions from '@/components/FilesView/FileSortingOptions'
 import { events } from '@/bus'
 
     export default {
-        name: 'DesktopSortingAndPreview',
-        components: {SortingAndPreviewMenu},
+        name: 'DesktopSortingOptions',
+        components: {
+            FileSortingOptions
+        },
         data () {
             return {
                 isVisible: false
diff --git a/resources/js/components/FilesView/MobileActions.vue b/resources/js/components/FilesView/FileActionsMobile.vue
similarity index 71%
rename from resources/js/components/FilesView/MobileActions.vue
rename to resources/js/components/FilesView/FileActionsMobile.vue
index 8a39269e..da2ffa5a 100644
--- a/resources/js/components/FilesView/MobileActions.vue
+++ b/resources/js/components/FilesView/FileActionsMobile.vue
@@ -1,7 +1,7 @@
 <template>
     <div id="mobile-actions-wrapper">
 
-        <!--Actions for trash location with MASTER permission--->
+        <!--Actions for trash location--->
         <div v-if="trashLocationMenu && ! multiSelectMode" class="mobile-actions">
             <MobileActionButton @click.native="$store.dispatch('emptyTrash')" icon="trash">
                 {{ $t('context_menu.empty_trash') }}
@@ -9,25 +9,28 @@
              <MobileActionButton @click.native="enableMultiSelectMode" icon="check-square">
                 {{ $t('context_menu.select') }}
             </MobileActionButton>
-             <MobileActionButton class="preview-sorting" @click.native="showViewOptions" icon="preview-sorting">
-                {{$t('preview_sorting.preview_sorting_button')}}
+             <MobileActionButton @click.native="showViewOptions" icon="preview-sorting">
+                {{ $t('preview_sorting.preview_sorting_button') }}
             </MobileActionButton>
         </div>
 
-        <!--ContextMenu for Base location with MASTER permission-->
+        <!--Actions for Base location-->
         <transition name="button">
             <div v-if="baseLocationMasterMenu && ! multiSelectMode" class="mobile-actions">
-                <MobileActionButton @click.native="createFolder" icon="folder-plus" :class="{'is-inactive' : multiSelectMode}">
+                <MobileActionButton @click.native="showLocations" icon="filter">
+                    {{ filterLocationTitle }}
+                </MobileActionButton>
+                <MobileActionButton @click.native="createFolder" icon="folder-plus">
                     {{ $t('context_menu.add_folder') }}
                 </MobileActionButton>
-                <MobileActionButtonUpload :class="{'is-inactive' : multiSelectMode}">
+                <MobileActionButtonUpload>
                     {{ $t('context_menu.upload') }}
                 </MobileActionButtonUpload>
                 <MobileActionButton @click.native="enableMultiSelectMode" icon="check-square">
                     {{ $t('context_menu.select') }}
                 </MobileActionButton>
-                <MobileActionButton class="preview-sorting" @click.native="showViewOptions" icon="preview-sorting">
-                    {{$t('preview_sorting.preview_sorting_button')}}
+                <MobileActionButton @click.native="showViewOptions" icon="preview-sorting">
+                    {{ $t('preview_sorting.preview_sorting_button') }}
                 </MobileActionButton>
             </div>
         </transition>
@@ -36,24 +39,24 @@
         <transition name="button">
             <div v-if="multiSelectMode" class="mobile-actions">
                 <MobileActionButton @click.native="selectAll" icon="check-square">
-                    {{$t('mobile_selecting.select_all')}}
+                    {{ $t('mobile_selecting.select_all') }}
                 </MobileActionButton>
                 <MobileActionButton @click.native="deselectAll" icon="x-square">
-                    {{$t('mobile_selecting.deselect_all')}}
+                    {{ $t('mobile_selecting.deselect_all') }}
                 </MobileActionButton>
                 <MobileActionButton @click.native="disableMultiSelectMode" icon="check">
-                    {{$t('mobile_selecting.done')}}
+                    {{ $t('mobile_selecting.done') }}
                 </MobileActionButton>
             </div>
         </transition>
 
-        <!--ContextMenu for Base location with VISITOR permission-->
+        <!--Actions for Base location in shared folder with visit permission-->
         <div v-if="baseLocationVisitorMenu && ! multiSelectMode" class="mobile-actions">
              <MobileActionButton @click.native="enableMultiSelectMode" icon="check-square">
                {{ $t('context_menu.select') }}
             </MobileActionButton>
-             <MobileActionButton class="preview-sorting" @click.native="showViewOptions" icon="preview-sorting">
-                {{$t('preview_sorting.preview_sorting_button')}}
+             <MobileActionButton @click.native="showViewOptions" icon="preview-sorting">
+                {{ $t('preview_sorting.preview_sorting_button') }}
             </MobileActionButton>
         </div>
 
@@ -68,18 +71,23 @@
     import UploadProgress from '@/components/FilesView/UploadProgress'
     import {mapGetters} from 'vuex'
     import {events} from '@/bus'
+    import store from "../../store";
 
     export default {
-        name: 'MobileActions',
+        name: 'FileActionsMobile',
         components: {
             MobileActionButtonUpload,
             MobileActionButton,
             UploadProgress,
         },
         computed: {
-            ...mapGetters(['FilePreviewType']),
+            ...mapGetters([
+                'FilePreviewType'
+            ]),
             previewIcon() {
-                return this.FilePreviewType === 'list' ? 'th' : 'th-list'
+                return this.FilePreviewType === 'list'
+                    ? 'th'
+                    : 'th-list'
             },
             trashLocationMenu() {
                 return this.$isThisLocation(['trash', 'trash-root']) && this.$checkPermission('master')
@@ -90,14 +98,27 @@
             baseLocationVisitorMenu() {
                 return (this.$isThisLocation(['base', 'shared', 'public']) && this.$checkPermission('visitor')) || (this.$isThisLocation(['latest', 'shared']) && this.$checkPermission('master'))
             },
+            filterLocationTitle() {
+                return {
+                    'base': 'Files',
+                    'public': 'Files',
+                    'shared': 'Shared',
+                    'latest': 'Latest',
+                    'trash': 'Trash',
+                    'trash-root': 'Trash',
+                    'participant_uploads': 'Participants',
+                }[this.$store.getters.currentFolder.location]
+            }
         },
-        data () {
+        data() {
             return {
                 multiSelectMode: false,
-                mobileSortingAndPreview: false,
             }
         },
         methods: {
+            showLocations() {
+
+            },
             selectAll() {
                 this.$store.commit('SELECT_ALL_FILES')
             },
@@ -115,19 +136,14 @@
                 events.$emit('mobileSelecting:stop')
             },
             showViewOptions() {
-                this.mobileSortingAndPreview = ! this.mobileSortingAndPreview
-
-                // Toggle mobile sorting
-                events.$emit('mobileSortingAndPreview', this.mobileSortingAndPreview)
-                events.$emit('mobileSortingAndPreviewVignette', this.mobileSortingAndPreview)
+                events.$emit('mobile-menu:show', 'file-sorting')
             },
             createFolder() {
                 events.$emit('popup:open', {name: 'create-folder'})
             },
         },
-        mounted () {
-                events.$on('mobileSelecting:stop', () => this.multiSelectMode = false)
-                events.$on('mobileSortingAndPreview', state => this.mobileSortingAndPreview = state)
+        mounted() {
+            events.$on('mobileSelecting:stop', () => this.multiSelectMode = false)
         }
     }
 </script>
@@ -163,13 +179,6 @@
         z-index: 3;
     }
 
-    .mobile-action-button {
-        &.is-inactive {
-            opacity: 0.25;
-            pointer-events: none;
-        }
-    }
-
     .mobile-actions {
         white-space: nowrap;
         overflow-x: auto;
diff --git a/resources/js/components/FilesView/FileBrowser.vue b/resources/js/components/FilesView/FileBrowser.vue
index 22702aaa..c2948b90 100644
--- a/resources/js/components/FilesView/FileBrowser.vue
+++ b/resources/js/components/FilesView/FileBrowser.vue
@@ -20,7 +20,7 @@
             <SearchBar class="mobile-search" />
 
             <!--Mobile Actions-->
-            <MobileActions />
+            <FileActionsMobile />
 
             <!--Item previews list-->
             <div v-if="isList" class="file-list-wrapper">
@@ -92,8 +92,8 @@
 </template>
 
 <script>
+    import FileActionsMobile from '@/components/FilesView/FileActionsMobile'
     import MobileToolbar from '@/components/FilesView/MobileToolbar'
-    import MobileActions from '@/components/FilesView/MobileActions'
     import MultiSelected from '@/components/FilesView/MultiSelected'
     import FileInfoPanel from '@/components/FilesView/FileInfoPanel'
     import FileItemList from '@/components/FilesView/FileItemList'
@@ -107,8 +107,8 @@
     export default {
         name: 'FilesContainer',
         components: {
+            FileActionsMobile,
             MobileToolbar,
-            MobileActions,
             MultiSelected,
             FileInfoPanel,
             FileItemList,
diff --git a/resources/js/components/FilesView/FileFullPreview.vue b/resources/js/components/FilesView/FileFullPreview.vue
deleted file mode 100644
index ad94b368..00000000
--- a/resources/js/components/FilesView/FileFullPreview.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-	<div
-		v-if="showFullPreview"
-		class="file-full-preview-wrapper"
-		id="fileFullPreview"
-		ref="filePreview"
-		tabindex="-1"
-		@click="closeContextMenu"
-		@keydown.esc=";(showFullPreview = false), hideContextMenu()"
-		@keydown.right="next"
-		@keydown.left="prev"
-	>
-		<FilePreviewNavigationPanel />
-		<MediaFullPreview />
-		<FilePreviewActions />
-	</div>
-</template>
-
-<script>
-import { events } from '@/bus'
-import { mapGetters } from 'vuex'
-
-import MediaFullPreview from '@/components/FilesView/MediaFullPreview'
-import FilePreviewActions from '@/components/FilesView/FilePreviewActions'
-import FilePreviewNavigationPanel from '@/components/FilesView/FilePreviewNavigationPanel'
-
-export default {
-	name: 'FileFullPreview',
-	components: {
-		MediaFullPreview,
-		FilePreviewNavigationPanel,
-		FilePreviewActions
-	},
-	computed: {
-		...mapGetters(['fileInfoDetail', 'data'])
-	},
-	data() {
-		return {
-			showFullPreview: false
-		}
-	},
-	methods: {
-		closeContextMenu(event) {
-			if ((event.target.parentElement.id || event.target.id) === 'fast-preview-menu') {
-				return
-			} else {
-				events.$emit('showContextMenuPreview:hide')
-			}
-		},
-		next: function() {
-			events.$emit('filePreviewAction:next')
-		},
-		prev: function() {
-			events.$emit('filePreviewAction:prev')
-		},
-		hideContextMenu() {
-			events.$emit('showContextMenuPreview:hide')
-		}
-	},
-
-	updated() {
-		//Focus file preview for key binding
-		if (this.showFullPreview) {
-			this.$refs.filePreview.focus()
-		}
-	},
-	mounted() {
-		events.$on('fileFullPreview:show', () => {
-			this.showFullPreview = true
-		})
-		events.$on('fileFullPreview:hide', () => {
-			this.showFullPreview = false
-
-            events.$emit('hide:mobile-navigation')
-        })
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-@import '@assets/vuefilemanager/_variables';
-
-.file-full-preview-wrapper {
-	width: 100%;
-	height: 100%;
-	position: absolute;
-	z-index: 7;
-	background-color: white;
-}
-
-@media (prefers-color-scheme: dark) {
-	.file-full-preview-wrapper {
-		background-color: $dark_mode_background;
-	}
-}
-</style>
\ No newline at end of file
diff --git a/resources/js/components/FilesView/FileInfoPanel.vue b/resources/js/components/FilesView/FileInfoPanel.vue
index 4b50bba3..a3b78a79 100644
--- a/resources/js/components/FilesView/FileInfoPanel.vue
+++ b/resources/js/components/FilesView/FileInfoPanel.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="file-info-content" v-if="fileInfoDetail.length === 1">
         <div class="file-headline" spellcheck="false">
-            <FilePreview/>
+            <FilePreviewDetail/>
 
             <!--File info-->
             <div class="flex">
@@ -66,8 +66,8 @@
 
 <script>
     import {Edit2Icon, LockIcon, UnlockIcon, ImageIcon, VideoIcon, FolderIcon, FileIcon} from 'vue-feather-icons'
+    import FilePreviewDetail from '@/components/Others/FilePreviewDetail'
     import ImageMetaData from '@/components/FilesView/ImageMetaData'
-    import FilePreview from '@/components/FilesView/FilePreview'
     import CopyInput from '@/components/Others/Forms/CopyInput'
     import ListInfoItem from '@/components/Others/ListInfoItem'
     import ListInfo from '@/components/Others/ListInfo'
@@ -77,10 +77,10 @@
     export default {
         name: 'FileInfoPanel',
         components: {
+            FilePreviewDetail,
             ImageMetaData,
             ListInfoItem,
             ListInfo,
-            FilePreview,
             FolderIcon,
             UnlockIcon,
             VideoIcon,
diff --git a/resources/js/components/FilesView/FileItemGrid.vue b/resources/js/components/FilesView/FileItemGrid.vue
index c3ce09ad..5c52754e 100644
--- a/resources/js/components/FilesView/FileItemGrid.vue
+++ b/resources/js/components/FilesView/FileItemGrid.vue
@@ -161,7 +161,7 @@ export default {
             this.$store.commit('CLEAR_FILEINFO_DETAIL')
             this.$store.commit('GET_FILEINFO_DETAIL', this.item)
 
-            events.$emit('mobileMenu:show')
+            events.$emit('mobile-menu:show', 'file-menu')
         },
         dragEnter() {
             if (this.item.type !== 'folder') return
diff --git a/resources/js/components/FilesView/FileItemList.vue b/resources/js/components/FilesView/FileItemList.vue
index 37653728..0dfe6c62 100644
--- a/resources/js/components/FilesView/FileItemList.vue
+++ b/resources/js/components/FilesView/FileItemList.vue
@@ -155,7 +155,7 @@ export default {
             this.$store.commit('CLEAR_FILEINFO_DETAIL')
             this.$store.commit('GET_FILEINFO_DETAIL', this.item)
 
-            events.$emit('mobileMenu:show')
+            events.$emit('mobile-menu:show', 'file-menu')
         },
         dragEnter() {
             if (this.item.type !== 'folder') return
diff --git a/resources/js/components/FilesView/FileMenuMobile.vue b/resources/js/components/FilesView/FileMenuMobile.vue
new file mode 100644
index 00000000..6b7309db
--- /dev/null
+++ b/resources/js/components/FilesView/FileMenuMobile.vue
@@ -0,0 +1,182 @@
+<template>
+    <MenuMobile name="file-menu">
+        <ThumbnailItem class="item-thumbnail" :item="fileInfoDetail[0]" info="metadata" />
+
+        <!--Trash location-->
+        <MenuMobileGroup v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')">
+            <OptionGroup v-if="fileInfoDetail[0]">
+                <Option @click.native="restoreItem" :title="$t('context_menu.restore')" icon="restore" />
+                <Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="delete" />
+            </OptionGroup>
+
+            <OptionGroup>
+                <Option v-if="!isFolder" @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
+                <Option v-if="isFolder" @click.native="downloadFolder" :title="$t('context_menu.zip_folder')" icon="zip-folder" />
+            </OptionGroup>
+        </MenuMobileGroup>
+
+        <!--Shared location-->
+        <MenuMobileGroup v-if="$isThisLocation(['shared']) && $checkPermission('master')">
+            <OptionGroup v-if="fileInfoDetail[0] && isFolder">
+                <Option @click.native="addToFavourites" :title="favouritesTitle" icon="star" />
+            </OptionGroup>
+
+            <OptionGroup v-if="fileInfoDetail[0]">
+                <Option @click.native="renameItem" :title="$t('context_menu.rename')" icon="rename" />
+                <Option @click.native="shareItem" :title="fileInfoDetail[0].shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
+                <Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
+            </OptionGroup>
+
+            <OptionGroup>
+                <Option v-if="!isFolder" @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
+                <Option v-if="isFolder" @click.native="downloadFolder" :title="$t('context_menu.zip_folder')" icon="zip-folder" />
+            </OptionGroup>
+        </MenuMobileGroup>
+
+        <!--Base location for user-->
+        <MenuMobileGroup v-if="$isThisLocation(['base', 'participant_uploads', 'latest']) && $checkPermission('master')">
+            <OptionGroup v-if="fileInfoDetail[0] && isFolder">
+                <Option @click.native="addToFavourites" :title="favouritesTitle" icon="star" />
+            </OptionGroup>
+
+            <OptionGroup v-if="fileInfoDetail[0]">
+                <Option @click.native="renameItem" :title="$t('context_menu.rename')" icon="rename" />
+                <Option @click.native="moveItem" :title="$t('context_menu.move')" icon="move-item" />
+                <Option @click.native="shareItem" :title="fileInfoDetail[0].shared ? $t('context_menu.share_edit') : $t('context_menu.share')" icon="share" />
+                <Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
+            </OptionGroup>
+
+            <OptionGroup>
+                <Option v-if="!isFolder" @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
+                <Option v-if="isFolder" @click.native="downloadFolder" :title="$t('context_menu.zip_folder')" icon="zip-folder" />
+            </OptionGroup>
+        </MenuMobileGroup>
+
+        <!--Base location for guest-->
+        <MenuMobileGroup v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor')">
+            <OptionGroup>
+                <Option v-if="fileInfoDetail[0]" @click.native="renameItem" :title="$t('context_menu.rename')" icon="rename" />
+                <Option v-if="fileInfoDetail[0]" @click.native="moveItem" :title="$t('context_menu.move')" icon="move-item" />
+                <Option @click.native="deleteItem" :title="$t('context_menu.delete')" icon="trash" />
+            </OptionGroup>
+
+            <OptionGroup>
+                <Option v-if="!isFolder" @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
+                <Option v-if="isFolder" @click.native="downloadFolder" :title="$t('context_menu.zip_folder')" icon="zip-folder" />
+            </OptionGroup>
+        </MenuMobileGroup>
+
+        <!--Base location for guest with visit permission-->
+        <MenuMobileGroup v-if="$isThisLocation(['base', 'public']) && $checkPermission('visitor')">
+            <OptionGroup>
+                <Option v-if="!isFolder" @click.native="downloadItem" :title="$t('context_menu.download')" icon="download" />
+                <Option v-if="isFolder" @click.native="downloadFolder" :title="$t('context_menu.zip_folder')" icon="zip-folder" />
+            </OptionGroup>
+        </MenuMobileGroup>
+    </MenuMobile>
+</template>
+
+<script>
+import MenuMobileGroup from '@/components/Mobile/MenuMobileGroup'
+import MenuMobile from '@/components/Mobile/MenuMobile'
+import ThumbnailItem from '@/components/Others/ThumbnailItem'
+import OptionGroup from '@/components/FilesView/OptionGroup'
+import Option from '@/components/FilesView/Option'
+import {mapGetters} from 'vuex'
+import {events} from '@/bus'
+
+export default {
+    name: 'FileMenuMobile',
+    components: {
+        MenuMobileGroup,
+        MenuMobile,
+        ThumbnailItem,
+        OptionGroup,
+        Option,
+    },
+    computed: {
+        ...mapGetters([
+            'fileInfoDetail',
+            'user',
+        ]),
+        favourites() {
+            return this.user.data.relationships.favourites.data.attributes.folders
+        },
+        favouritesTitle() {
+            return this.isInFavourites
+                ? this.$t('context_menu.remove_from_favourites')
+                : this.$t('context_menu.add_to_favourites')
+        },
+        isInFavourites() {
+            return this.favourites.find(el => el.id === this.fileInfoDetail[0].id)
+        },
+        isFile() {
+            return !this.isImage && !this.isFolder
+        },
+        isImage() {
+            return this.fileInfoDetail[0] && this.fileInfoDetail[0].type === 'image'
+        },
+        isFolder() {
+            return this.fileInfoDetail[0] && this.fileInfoDetail[0].type === 'folder'
+        }
+    },
+    data() {
+        return {
+            isVisible: false,
+        }
+    },
+    methods: {
+        downloadFolder() {
+            this.$store.dispatch('downloadFolder', this.fileInfoDetail[0])
+        },
+        moveItem() {
+            events.$emit('popup:open', {name: 'move', item: [this.fileInfoDetail[0]]})
+        },
+        shareItem() {
+            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]
+                })
+            }
+        },
+        addToFavourites() {
+            if (this.favourites && !this.favourites.find(el => el.id === this.fileInfoDetail[0].id)) {
+                this.$store.dispatch('addToFavourites', this.fileInfoDetail[0])
+            } else {
+                this.$store.dispatch('removeFromFavourites', this.fileInfoDetail[0])
+            }
+        },
+        downloadItem() {
+            this.$downloadFile(
+                this.fileInfoDetail[0].file_url,
+                this.fileInfoDetail[0].name + '.' + this.fileInfoDetail[0].mimetype
+            )
+        },
+        deleteItem() {
+            this.$store.dispatch('deleteItem')
+        },
+        restoreItem() {
+            this.$store.dispatch('restoreItem', this.fileInfoDetail[0])
+        },
+        renameItem() {
+            events.$emit('popup:open', {name: 'rename-item', item: this.fileInfoDetail[0]})
+        },
+    }
+}
+</script>
+
+<style scoped lang="scss">
+@import "@assets/vuefilemanager/_variables";
+@import "@assets/vuefilemanager/_mixins";
+
+.item-thumbnail {
+    padding: 20px 20px 10px;
+    margin-bottom: 0;
+}
+</style>
diff --git a/resources/js/components/FilesView/FilePreview.vue b/resources/js/components/FilesView/FilePreview.vue
index a04b3721..e950a3fc 100644
--- a/resources/js/components/FilesView/FilePreview.vue
+++ b/resources/js/components/FilesView/FilePreview.vue
@@ -1,61 +1,96 @@
 <template>
-    <div v-if="canBePreview" class="preview">
-        <img v-if="fileInfoDetail[0].type == 'image' && fileInfoDetail[0].thumbnail" :src="fileInfoDetail[0].thumbnail" :alt="fileInfoDetail[0].name" />
-        <audio v-else-if="fileInfoDetail[0].type == 'audio'" :src="fileInfoDetail[0].file_url" controlsList="nodownload" controls></audio>
-        <video v-else-if="fileInfoDetail[0].type == 'video'" controlsList="nodownload" disablePictureInPicture playsinline controls>
-            <source :src="fileInfoDetail[0].file_url" type="video/mp4">
-        </video>
-    </div>
+	<div
+		v-if="showFullPreview"
+		class="file-full-preview-wrapper"
+		id="fileFullPreview"
+		ref="filePreview"
+		tabindex="-1"
+		@click="closeContextMenu"
+		@keydown.esc=";(showFullPreview = false), hideContextMenu()"
+		@keydown.right="next"
+		@keydown.left="prev"
+	>
+		<FilePreviewNavigationPanel />
+		<MediaFullPreview />
+		<FilePreviewActions />
+	</div>
 </template>
 
 <script>
-    import { mapGetters } from 'vuex'
-    import { includes } from 'lodash'
+import { events } from '@/bus'
+import { mapGetters } from 'vuex'
 
-    export default {
-        name: 'FilePreview',
-        computed: {
-            ...mapGetters(['fileInfoDetail']),
-            canBePreview() {
-                return this.fileInfoDetail[0] && ! includes([
-                    'folder', 'file'
-                ], this.fileInfoDetail[0].type)
-            }
-        },
-    }
+import MediaFullPreview from '@/components/FilesView/MediaFullPreview'
+import FilePreviewActions from '@/components/FilesView/FilePreviewActions'
+import FilePreviewNavigationPanel from '@/components/FilesView/FilePreviewNavigationPanel'
+
+export default {
+	name: 'FilePreview',
+	components: {
+		MediaFullPreview,
+		FilePreviewNavigationPanel,
+		FilePreviewActions
+	},
+	computed: {
+		...mapGetters(['fileInfoDetail', 'data'])
+	},
+	data() {
+		return {
+			showFullPreview: false
+		}
+	},
+	methods: {
+		closeContextMenu(event) {
+			if ((event.target.parentElement.id || event.target.id) === 'fast-preview-menu') {
+				return
+			} else {
+				events.$emit('showContextMenuPreview:hide')
+			}
+		},
+		next: function() {
+			events.$emit('filePreviewAction:next')
+		},
+		prev: function() {
+			events.$emit('filePreviewAction:prev')
+		},
+		hideContextMenu() {
+			events.$emit('showContextMenuPreview:hide')
+		}
+	},
+
+	updated() {
+		//Focus file preview for key binding
+		if (this.showFullPreview) {
+			this.$refs.filePreview.focus()
+		}
+	},
+	mounted() {
+		events.$on('fileFullPreview:show', () => {
+			this.showFullPreview = true
+		})
+		events.$on('fileFullPreview:hide', () => {
+			this.showFullPreview = false
+
+            events.$emit('mobile-navigation:hide')
+        })
+	}
+}
 </script>
 
-<style scoped lang="scss">
-    @import '@assets/vuefilemanager/_variables';
-    @import '@assets/vuefilemanager/_mixins';
+<style lang="scss" scoped>
+@import '@assets/vuefilemanager/_variables';
 
-    .preview {
-        width: 100%;
-        display: block;
-        margin-bottom: 7px;
+.file-full-preview-wrapper {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	z-index: 7;
+	background-color: white;
+}
 
-        img {
-            border-radius: 4px;
-            overflow: hidden;
-            width: 100%;
-            object-fit: cover;
-        }
-
-        audio {
-            width: 100%;
-            &::-webkit-media-controls-panel {
-                background-color: $light_background;
-            }
-
-            &::-webkit-media-controls-play-button {
-                color: $theme;
-            }
-        }
-
-        video {
-            width: 100%;
-            height: auto;
-            border-radius: 3px;
-        }
-    }
+@media (prefers-color-scheme: dark) {
+	.file-full-preview-wrapper {
+		background-color: $dark_mode_background;
+	}
+}
 </style>
\ No newline at end of file
diff --git a/resources/js/components/FilesView/FilePreviewNavigationPanel.vue b/resources/js/components/FilesView/FilePreviewNavigationPanel.vue
index 494a8afe..52d4b455 100644
--- a/resources/js/components/FilesView/FilePreviewNavigationPanel.vue
+++ b/resources/js/components/FilesView/FilePreviewNavigationPanel.vue
@@ -93,7 +93,7 @@ export default {
 		},
 		menuOpen() {
 			if (this.$isMobile()) {
-				events.$emit('mobileMenu:show', 'showFromMediaPreview')
+				events.$emit('mobile-menu:show', 'file-menu')
 			} else {
 				events.$emit('showContextMenuPreview:show', this.fileInfoDetail[0])
 			}
diff --git a/resources/js/components/FilesView/FileSortingMobile.vue b/resources/js/components/FilesView/FileSortingMobile.vue
new file mode 100644
index 00000000..de1f39df
--- /dev/null
+++ b/resources/js/components/FilesView/FileSortingMobile.vue
@@ -0,0 +1,22 @@
+<template>
+    <MenuMobile name="file-sorting">
+        <MenuMobileGroup>
+            <FileSortingOptions />
+        </MenuMobileGroup>
+    </MenuMobile>
+</template>
+
+<script>
+import FileSortingOptions from '@/components/FilesView/FileSortingOptions'
+import MenuMobileGroup from '@/components/Mobile/MenuMobileGroup'
+import MenuMobile from '@/components/Mobile/MenuMobile'
+
+export default {
+    name: 'FilterSortingMobile',
+    components: {
+        FileSortingOptions,
+        MenuMobileGroup,
+        MenuMobile,
+    },
+}
+</script>
diff --git a/resources/js/components/FilesView/SortingAndPreviewMenu.vue b/resources/js/components/FilesView/FileSortingOptions.vue
similarity index 53%
rename from resources/js/components/FilesView/SortingAndPreviewMenu.vue
rename to resources/js/components/FilesView/FileSortingOptions.vue
index 630fae99..dddebcbb 100644
--- a/resources/js/components/FilesView/SortingAndPreviewMenu.vue
+++ b/resources/js/components/FilesView/FileSortingOptions.vue
@@ -1,10 +1,10 @@
 <template>
-    <div class="menu-options" id="menu-list">
-        <OptionGroup class="menu-option-group">
+    <div>
+        <OptionGroup>
             <Option v-if="isList" @click.native="changePreview('grid')" :title="$t('preview_sorting.grid_view')" icon="grid" />
             <Option v-if="isGrid" @click.native="changePreview('list')" :title="$t('preview_sorting.list_view')" icon="list" />
         </OptionGroup>
-        <OptionGroup class="menu-option-group">
+        <OptionGroup>
             <Option @click.native.stop="sort('created_at')" :title="$t('preview_sorting.sort_date')" icon="calendar" />
             <Option @click.native.stop="sort('name')" :title="$t('preview_sorting.sort_alphabet')" icon="alphabet" />
         </OptionGroup>
@@ -19,25 +19,20 @@
 
 import OptionGroup from '@/components/FilesView/OptionGroup'
 import Option from '@/components/FilesView/Option'
-import { CalendarIcon, ListIcon, GridIcon, ArrowUpIcon, CheckIcon } from 'vue-feather-icons'
-import AlphabetIcon from '@/components/FilesView/Icons/AlphabetIcon'
+import { ArrowUpIcon } from 'vue-feather-icons'
 import { mapGetters } from 'vuex'
-import { events } from '@/bus'
 
 export default {
-    name: 'SortingAndPreviewMenu',
+    name: 'FileSortingOptions',
     components: {
         OptionGroup,
-        Option,
-        CalendarIcon,
-        AlphabetIcon,
         ArrowUpIcon,
-        CheckIcon,
-        ListIcon,
-        GridIcon
+        Option,
     },
     computed: {
-        ...mapGetters(['FilePreviewType']),
+        ...mapGetters([
+            'FilePreviewType'
+        ]),
         isGrid() {
             return this.FilePreviewType === 'grid'
         },
@@ -55,7 +50,6 @@ export default {
     },
     methods: {
         sort(field) {
-
             this.filter.field = field
 
             // Set sorting direction
@@ -74,16 +68,10 @@ export default {
             this.$getDataByLocation()
         },
         changePreview(previewType) {
-
             this.$store.dispatch('changePreviewType', previewType)
-
-            if (this.$isMobile())
-                events.$emit('mobileSortingAndPreview', false)
-                events.$emit('mobileSortingAndPreviewVignette', this.mobileSortingAndPreview)
         }
     },
     mounted() {
-
         let sorting = JSON.parse(localStorage.getItem('sorting'))
 
         // Set default sorting if in not setup in LocalStorage
@@ -92,89 +80,3 @@ export default {
     }
 }
 </script>
-
-<style scoped lang="scss">
-@import "@assets/vuefilemanager/_variables";
-@import "@assets/vuefilemanager/_mixins";
-
-.show-icon {
-    margin-left: auto;
-    max-height: 19px;
-
-    .arrow-down {
-        @include transform(rotate(180deg));
-    }
-}
-
-.menu-option {
-    display: flex;
-
-    .icon {
-        margin-right: 20px;
-        line-height: 0;
-    }
-
-    .text-label {
-        @include font-size(16);
-    }
-}
-
-.sorting-preview {
-    min-width: 250px;
-    position: absolute;
-    z-index: 99;
-    box-shadow: $shadow;
-    background: white;
-    border-radius: 8px;
-    overflow: hidden;
-    right: 66px;
-    top: 63px;
-
-    &.showed {
-        display: block;
-    }
-}
-
-.menu-options {
-    list-style: none;
-    width: 100%;
-    margin: 0;
-    padding: 0;
-
-    .menu-option-group {
-        padding: 5px 0;
-        border-bottom: 1px solid $light_mode_border;
-
-        &:first-child {
-            padding-top: 0;
-        }
-
-        &:last-child {
-            padding-bottom: 0;
-            border-bottom: none;
-        }
-    }
-
-    .menu-option {
-        white-space: nowrap;
-        font-weight: 700;
-        @include font-size(14);
-        padding: 15px 20px;
-        cursor: pointer;
-        width: 100%;
-        color: $text;
-    }
-}
-
-@media (prefers-color-scheme: dark) {
-    .menu-options {
-        .menu-option-group {
-            border-color: $dark_mode_border_color;
-        }
-
-        .menu-option {
-            color: $dark_mode_text_primary;
-        }
-    }
-}
-</style>
diff --git a/resources/js/components/FilesView/MobileActionButton.vue b/resources/js/components/FilesView/MobileActionButton.vue
index 58c68941..77fe677b 100644
--- a/resources/js/components/FilesView/MobileActionButton.vue
+++ b/resources/js/components/FilesView/MobileActionButton.vue
@@ -1,6 +1,7 @@
 <template>
     <button class="mobile-action-button">
         <div class="flex">
+            <filter-icon v-if="icon === 'filter'" size="15" class="icon dark-text-theme" />
             <credit-card-icon v-if="icon === 'credit-card'" size="15" class="icon dark-text-theme" />
             <folder-plus-icon v-if="icon === 'folder-plus'" size="15" class="icon dark-text-theme" />
             <list-icon v-if="icon === 'th-list'" size="15" class="icon dark-text-theme" />
@@ -21,7 +22,7 @@
 </template>
 
 <script>
-    import { DollarSignIcon, CheckIcon, XSquareIcon, CheckSquareIcon, FolderPlusIcon, ListIcon, GridIcon, TrashIcon, UserPlusIcon, PlusIcon, CreditCardIcon  } from 'vue-feather-icons'
+    import { FilterIcon, DollarSignIcon, CheckIcon, XSquareIcon, CheckSquareIcon, FolderPlusIcon, ListIcon, GridIcon, TrashIcon, UserPlusIcon, PlusIcon, CreditCardIcon  } from 'vue-feather-icons'
     import SortingAndPreviewIcon from '@/components/FilesView/Icons/SortingAndPreviewIcon'
 
     export default {
@@ -37,6 +38,7 @@
             FolderPlusIcon,
             UserPlusIcon,
             XSquareIcon,
+            FilterIcon,
             CheckIcon,
             TrashIcon,
             PlusIcon,
diff --git a/resources/js/components/FilesView/MobileMenu.vue b/resources/js/components/FilesView/MobileMenu.vue
deleted file mode 100644
index 86e58ee9..00000000
--- a/resources/js/components/FilesView/MobileMenu.vue
+++ /dev/null
@@ -1,560 +0,0 @@
-<template>
-    <div class="options-wrapper">
-        <transition name="context-menu">
-            <div v-if="isVisible" ref="contextmenu" class="options" @click="closeAndResetContextMenu">
-
-                <div class="menu-wrapper">
-
-                    <!--Item Thumbnail-->
-                    <ThumbnailItem class="item-thumbnail" :item="fileInfoDetail[0]" info="metadata"/>
-
-                    <!--Mobile for trash location-->
-                    <div v-if="$isThisLocation(['trash', 'trash-root']) && $checkPermission('master')" class="menu-options">
-                        <ul class="menu-option-group">
-                            <li class="menu-option" @click="$store.dispatch('restoreItem', fileInfoDetail[0])" v-if="fileInfoDetail[0]">
-                                <div class="icon">
-                                    <life-buoy-icon size="17"></life-buoy-icon>
-                                </div>
-                                <div class="text-label">
-                                    {{ $t('context_menu.restore') }}
-                                </div>
-                            </li>
-                            <li class="menu-option delete" @click="deleteItem" v-if="fileInfoDetail[0]">
-                                <div class="icon">
-                                    <trash-2-icon size="17"></trash-2-icon>
-                                </div>
-                                <div class="text-label">
-                                    {{ $t('context_menu.delete') }}
-                                </div>
-                            </li>
-                        </ul>
-
-                        <ul class="menu-option-group" >
-                            <li class="menu-option" @click="downloadItem" v-if="!isFolder">
-                                <div class="icon">
-                                    <download-cloud-icon size="17"></download-cloud-icon>
-                                </div>
-                                <div class="text-label">
-                                    {{ $t('context_menu.download') }}
-                                </div>
-                            </li>
-
-                             <li class="menu-option" @click="downloadFolder" v-if="isFolder">
-                                <div class="icon">
-                                    <paperclip-icon size="17"></paperclip-icon>
-                                </div>
-                                <div class="text-label">
-                                   {{ $t('context_menu.zip_folder') }}
-                                </div>
-                            </li>
-                        </ul>
-                    </div>
-
-                    <!--Mobile for Base location-->
-                    <div v-if="$isThisLocation(['shared']) && $checkPermission('master')" class="menu-options">
-                        <ul class="menu-option-group">
-                            <li class="menu-option" @click="addToFavourites" v-if="fileInfoDetail[0] && isFolder">
-                                <div class="icon">
-                                    <star-icon size="17"></star-icon>
-                                </div>
-                                <div class="text-label">
-                                    {{
-                                        isInFavourites
-                                            ? $t('context_menu.remove_from_favourites')
-                                            : $t('context_menu.add_to_favourites')
-                                    }}
-                                </div>
-                            </li>
-                        </ul>
-
-                        <ul class="menu-option-group">
-                            <li class="menu-option" @click="renameItem" v-if="fileInfoDetail[0]">
-                                <div class="icon">
-                                    <edit-2-icon size="17"></edit-2-icon>
-                                </div>
-                                <div class="text-label">
-                                    {{ $t('context_menu.rename') }}
-                                </div>
-                            </li>
-                            <li class="menu-option" @click="shareItem" v-if="fileInfoDetail[0]">
-                                <div class="icon">
-                                    <link-icon size="17"></link-icon>
-                                </div>
-                                <div class="text-label">
-                                    {{
-                                        fileInfoDetail[0].shared
-                                            ? $t('context_menu.share_edit')
-                                            : $t('context_menu.share')
-                                    }}
-                                </div>
-                            </li>
-                            <li class="menu-option delete" @click="deleteItem" v-if="fileInfoDetail[0]">
-                                <div class="icon">
-                                    <trash-2-icon size="17"></trash-2-icon>
-                                </div>
-                                <div class="text-label">
-                                    {{ $t('context_menu.delete') }}
-                                </div>
-                            </li>
-                        </ul>
-
-                        <ul class="menu-option-group">
-                            <li class="menu-option" @click="downloadItem" v-if="!isFolder">
-                                <div class="icon">
-                                    <download-cloud-icon size="17"></download-cloud-icon>
-                                </div>
-                                <div class="text-label">
-                                    {{ $t('context_menu.download') }}
-                                </div>
-                            </li>
-
-                             <li class="menu-option" @click="downloadFolder" v-if="isFolder">
-                                <div class="icon">
-                                    <paperclip-icon size="17"></paperclip-icon>
-                                </div>
-                                <div class="text-label">
-                                    {{ $t('context_menu.zip_folder') }}
-                                </div>
-                            </li>
-                        </ul>
-                    </div>
-
-                    <!--Mobile for Base location-->
-                    <div v-if="$isThisLocation(['base', 'participant_uploads', 'latest']) && $checkPermission('master')" class="menu-options">
-                        <ul class="menu-option-group" v-if="fileInfoDetail[0] && isFolder">
-                            <li class="menu-option" @click="addToFavourites">
-                                <div class="icon">
-                                    <star-icon size="17"></star-icon>
-                                </div>
-                                <div class="text-label">
-                                    {{
-                                        isInFavourites
-                                            ? $t('context_menu.remove_from_favourites')
-                                            : $t('context_menu.add_to_favourites')
-                                    }}
-                                </div>
-                            </li>
-                        </ul>
-
-                        <ul class="menu-option-group">
-                            <li class="menu-option" @click="renameItem" v-if="fileInfoDetail[0]">
-                                <div class="icon">
-                                    <edit-2-icon size="17"></edit-2-icon>
-                                </div>
-                                <div class="text-label">
-                                    {{ $t('context_menu.rename') }}
-                                </div>
-                            </li>
-                            <li class="menu-option" @click="moveItem" v-if="fileInfoDetail[0]">
-                                <div class="icon">
-                                    <corner-down-right-icon size="17"></corner-down-right-icon>
-                                </div>
-                                <div class="text-label">
-                                    {{ $t('context_menu.move') }}
-                                </div>
-                            </li>
-                            <li class="menu-option" @click="shareItem" v-if="fileInfoDetail[0]">
-                                <div class="icon">
-                                    <link-icon size="17"></link-icon>
-                                </div>
-                                <div class="text-label">
-                                    {{
-                                        fileInfoDetail[0].shared
-                                            ? $t('context_menu.share_edit')
-                                            : $t('context_menu.share')
-                                    }}
-                                </div>
-                            </li>
-                            <li class="menu-option delete" @click="deleteItem" v-if="fileInfoDetail[0]">
-                                <div class="icon">
-                                    <trash-2-icon size="17"></trash-2-icon>
-                                </div>
-                                <div class="text-label">
-                                    {{ $t('context_menu.delete') }}
-                                </div>
-                            </li>
-                        </ul>
-
-                        <ul class="menu-option-group">
-                            <li class="menu-option" @click="downloadItem" v-if="!isFolder">
-                                <div class="icon">
-                                    <download-cloud-icon size="17"></download-cloud-icon>
-                                </div>
-                                <div class="text-label">
-                                    {{ $t('context_menu.download') }}
-                                </div>
-                            </li>
-
-                            <li class="menu-option" @click="downloadFolder" v-if="isFolder">
-                                <div class="icon">
-                                    <paperclip-icon size="17"></paperclip-icon>
-                                </div>
-                                <div class="text-label">
-                                    {{ $t('context_menu.zip_folder') }}
-                                </div>
-                            </li>
-                        </ul>
-                    </div>
-
-                    <!--Mobile for Base location with EDITOR permission-->
-                    <div v-if="$isThisLocation(['base', 'public']) && $checkPermission('editor')" class="menu-options">
-                        <ul class="menu-option-group">
-                            <li class="menu-option" @click="renameItem" v-if="fileInfoDetail[0]">
-                                <div class="icon">
-                                    <edit-2-icon size="17"></edit-2-icon>
-                                </div>
-                                <div class="text-label">
-                                    {{ $t('context_menu.rename') }}
-                                </div>
-                            </li>
-                            <li class="menu-option" @click="moveItem" v-if="fileInfoDetail[0]">
-                                <div class="icon">
-                                    <corner-down-right-icon size="17"></corner-down-right-icon>
-                                </div>
-                                <div class="text-label">
-                                    {{ $t('context_menu.move') }}
-                                </div>
-                            </li>
-                            <li class="menu-option" @click="deleteItem">
-                                <div class="icon">
-                                    <trash-2-icon size="17"></trash-2-icon>
-                                </div>
-                                <div class="text-label">
-                                    {{ $t('context_menu.delete') }}
-                                </div>
-                            </li>
-                        </ul>
-
-                        <ul class="menu-option-group">
-                            <li class="menu-option" @click="downloadItem" v-if="!isFolder">
-                                <div class="icon">
-                                    <download-cloud-icon size="17"></download-cloud-icon>
-                                </div>
-                                <div class="text-label">
-                                    {{ $t('context_menu.download') }}
-                                </div>
-                            </li>
-
-                             <li class="menu-option" @click="downloadFolder" v-if="isFolder">
-                                <div class="icon">
-                                    <paperclip-icon size="17"></paperclip-icon>
-                                </div>
-                                <div class="text-label">
-                                    {{ $t('context_menu.zip_folder') }}
-                                </div>
-                            </li>
-                        </ul>
-                    </div>
-
-                    <!--Mobile for Base location with VISITOR permission-->
-                    <div v-if="$isThisLocation(['base', 'public']) && $checkPermission('visitor')" class="menu-options">
-                        <ul class="menu-option-group">
-                            <li class="menu-option" @click="downloadItem" v-if="!isFolder">
-                                <div class="icon">
-                                    <download-cloud-icon size="17"></download-cloud-icon>
-                                </div>
-                                <div class="text-label">
-                                    {{ $t('context_menu.download') }}
-                                </div>
-                            </li>
-
-                            <li class="menu-option" @click="downloadFolder" v-if="isFolder">
-                                <div class="icon">
-                                    <paperclip-icon size="17"></paperclip-icon>
-                                </div>
-                                <div class="text-label">
-                                    {{ $t('context_menu.zip_folder') }}
-                                </div>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-        </transition>
-        <transition name="fade">
-            <div v-show="isVisible" class="vignette" @click="closeAndResetContextMenu"></div>
-        </transition>
-    </div>
-</template>
-
-<script>
-import ThumbnailItem from '@/components/Others/ThumbnailItem'
-
-import {
-    CornerDownRightIcon,
-    DownloadCloudIcon,
-    FolderPlusIcon,
-    PaperclipIcon,
-    LifeBuoyIcon,
-    Trash2Icon,
-    Edit2Icon,
-    TrashIcon,
-    StarIcon,
-    LinkIcon,
-    EyeIcon
-} from 'vue-feather-icons'
-import { events } from '@/bus'
-import { mapGetters } from 'vuex'
-
-export default {
-    name: 'MobileMenu',
-    components: {
-        CornerDownRightIcon,
-        DownloadCloudIcon,
-        FolderPlusIcon,
-        PaperclipIcon,
-        ThumbnailItem,
-        LifeBuoyIcon,
-        Trash2Icon,
-        Edit2Icon,
-        TrashIcon,
-        LinkIcon,
-        StarIcon,
-        EyeIcon
-    },
-    computed: {
-        ...mapGetters(['fileInfoDetail', 'user']),
-        favourites() {
-            return this.user.data.relationships.favourites.data.attributes.folders
-        },
-        isInFavourites() {
-            return this.favourites.find(
-                (el) => el.id == this.fileInfoDetail[0].id
-            )
-        },
-        isFile() {
-            return (
-                this.fileInfoDetail[0] &&
-                this.fileInfoDetail[0].type !== 'folder' &&
-                this.fileInfoDetail[0] &&
-                this.fileInfoDetail[0].type !== 'image'
-            )
-        },
-        isImage() {
-            return this.fileInfoDetail[0] && this.fileInfoDetail[0].type === 'image'
-        },
-        isFolder() {
-            return this.fileInfoDetail[0] && this.fileInfoDetail[0].type === 'folder'
-        }
-    },
-    data() {
-        return {
-            isVisible: false,
-            showFromMediaPreview: false
-        }
-    },
-    methods: {
-        downloadFolder(){
-            this.$store.dispatch( 'downloadFolder' , this.fileInfoDetail[0] )
-        },
-        moveItem() {
-            events.$emit('popup:open', { name: 'move', item: [this.fileInfoDetail[0]] })
-        },
-        shareItem() {
-            if (this.fileInfoDetail[0].shared) {
-                // Open share item popup
-                events.$emit('popup:open', {
-                    name: 'share-edit',
-                    item: this.fileInfoDetail[0]
-                })
-            } else {
-                // Open share item popup
-                events.$emit('popup:open', {
-                    name: 'share-create',
-                    item: this.fileInfoDetail[0]
-                })
-            }
-        },
-        addToFavourites() {
-            if (
-                this.favourites &&
-                !this.favourites.find(
-                    (el) => el.id == this.fileInfoDetail[0].id
-                )
-            ) {
-                this.$store.dispatch('addToFavourites', this.fileInfoDetail[0])
-            } else {
-                this.$store.dispatch('removeFromFavourites', this.fileInfoDetail[0])
-            }
-        },
-        downloadItem() {
-            this.$downloadFile(
-                this.fileInfoDetail[0].file_url,
-                this.fileInfoDetail[0].name + '.' + this.fileInfoDetail[0].mimetype
-            )
-        },
-        deleteItem() {
-            this.$store.dispatch('deleteItem')
-        },
-        renameItem() {
-            events.$emit('popup:open', { name: 'rename-item', item: this.fileInfoDetail[0] })
-        },
-        closeAndResetContextMenu() {
-            //If emit to show menu coming from MediaFullPreview dont reset data
-            this.isVisible = false
-            this.showFromMediaPreview = false
-            events.$emit('hide:mobile-navigation')
-        }
-    },
-    created() {
-        events.$on('mobileMenu:show', showFromMedia => {
-            // If emit come from MediaFullPreview
-            if (showFromMedia) {
-                this.isVisible = true
-                this.showFromMediaPreview = true
-            } else {
-                this.isVisible = !this.isVisible
-            }
-        })
-
-        // Hide mobile menu
-        events.$on('mobileMenu:hide', () => {
-            this.isVisible = false
-        })
-    }
-}
-</script>
-
-<style scoped lang="scss">
-@import "@assets/vuefilemanager/_variables";
-@import "@assets/vuefilemanager/_mixins";
-
-.mobile-selected-menu {
-    display: flex;
-    margin-left: 15px;
-    margin-right: 15px;
-
-    .close-icon {
-        margin-left: auto !important;
-    }
-}
-
-.menu-option {
-    display: flex;
-    align-items: center;
-
-    .icon {
-        margin-right: 20px;
-        line-height: 0;
-    }
-
-    .text-label {
-        @include font-size(16);
-    }
-}
-
-.vignette {
-    background: rgba(0, 0, 0, 0.35);
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    z-index: 9;
-    cursor: pointer;
-    opacity: 1;
-}
-
-.options {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 99;
-    overflow: hidden;
-    background: white;
-    border-top-left-radius: 12px;
-    border-top-right-radius: 12px;
-
-    &.showed {
-        display: block;
-    }
-
-    .item-thumbnail {
-        padding: 20px 20px 10px;
-        margin-bottom: 0px;
-    }
-
-    .menu-options {
-        margin-top: 10px;
-        list-style: none;
-        width: 100%;
-
-        .menu-option-group {
-            padding: 5px 0;
-            border-bottom: 1px solid $light_mode_border;
-
-            &:first-child {
-                padding-top: 0;
-            }
-
-            &:last-child {
-                padding-bottom: 0;
-                border-bottom: none;
-            }
-        }
-
-        .menu-option {
-            font-weight: 700;
-            letter-spacing: 0.15px;
-            @include font-size(14);
-            cursor: pointer;
-            width: 100%;
-            padding: 17px 20px;
-            text-align: center;
-
-            &:last-child {
-                border: none;
-            }
-        }
-    }
-}
-
-@media (prefers-color-scheme: dark) {
-    .vignette {
-        background: $dark_mode_vignette;
-    }
-
-    .options {
-        background: $dark_mode_foreground;
-
-        .menu-options {
-            background: $dark_mode_foreground;
-
-            .menu-option-group {
-                border-color: $dark_mode_border_color;
-            }
-
-            .menu-option {
-                color: $dark_mode_text_primary;
-            }
-        }
-    }
-}
-
-// Transition
-.context-menu-enter-active,
-.fade-enter-active {
-    transition: all 200ms;
-}
-
-.context-menu-leave-active,
-.fade-leave-active {
-    transition: all 200ms;
-}
-
-.fade-enter,
-.fade-leave-to {
-    opacity: 0;
-}
-
-.context-menu-enter,
-.context-menu-leave-to {
-    opacity: 0;
-    transform: translateY(100%);
-}
-
-.context-menu-leave-active {
-    position: absolute;
-}
-</style>
diff --git a/resources/js/components/FilesView/MobileSortingAndPreview.vue b/resources/js/components/FilesView/MobileSortingAndPreview.vue
deleted file mode 100644
index d9d1f8b0..00000000
--- a/resources/js/components/FilesView/MobileSortingAndPreview.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-    <transition v-if="isVisible" name="preview-menu" >
-        <SortingAndPreviewMenu class="options"/>
-    </transition>
-</template>
-
-<script>
-import SortingAndPreviewMenu from '@/components/FilesView/SortingAndPreviewMenu'
-import { events } from '@/bus'
-
-    export default {
-        name: 'MobileSortingAndPreview',
-        components: {SortingAndPreviewMenu},
-        data () {
-            return {
-                isVisible: false
-            }
-        },
-        mounted () {
-            events.$on('mobileSortingAndPreview', (state) => {
-                this.isVisible = state
-            })
-        }
-    }
-</script>
-
-<style scoped lang="scss">
-@import "@assets/vuefilemanager/_variables";
-@import "@assets/vuefilemanager/_mixins";
-
-.options {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 99;
-    overflow: hidden;
-    background: white;
-    border-top-left-radius: 12px;
-    border-top-right-radius: 12px;
-}
-
-@media (prefers-color-scheme: dark) {
-    .options {
-        background: $dark_mode_foreground;
-    }
-}
-
-
-// Transition
-.preview-menu-enter-active,
-.fade-enter-active {
-    transition: all 200ms;
-}
-
-.preview-menu-leave-active,
-.fade-leave-active {
-    transition: all 200ms;
-}
-
-.fade-enter,
-.fade-leave-to {
-    opacity: 0;
-}
-
-.preview-menu-enter,
-.preview-menu-leave-to {
-    opacity: 0;
-    transform: translateY(100%);
-}
-
-.preview-menu-leave-active {
-    position: absolute;
-}
-
-</style>
diff --git a/resources/js/components/FilesView/MobileToolbar.vue b/resources/js/components/FilesView/MobileToolbar.vue
index 6976475c..e6ebfa33 100644
--- a/resources/js/components/FilesView/MobileToolbar.vue
+++ b/resources/js/components/FilesView/MobileToolbar.vue
@@ -51,7 +51,7 @@
         },
         methods: {
             showMobileNavigation() {
-                events.$emit('show:mobile-navigation')
+                events.$emit('mobile-navigation:show')
                 events.$emit('mobileSelecting:stop')
             },
             goBack() {
diff --git a/resources/js/components/FilesView/MobileMultiSelectMenu.vue b/resources/js/components/FilesView/MultiSelectToolbarMobile.vue
similarity index 78%
rename from resources/js/components/FilesView/MobileMultiSelectMenu.vue
rename to resources/js/components/FilesView/MultiSelectToolbarMobile.vue
index 3389cf8c..48879b81 100644
--- a/resources/js/components/FilesView/MobileMultiSelectMenu.vue
+++ b/resources/js/components/FilesView/MultiSelectToolbarMobile.vue
@@ -1,27 +1,27 @@
 <template>
     <transition name="context-menu">
         <div class="multiselect-actions" v-if="mobileMultiSelect">
-            <ToolbarButton class="action-btn" v-if="!$isThisLocation(['trash', 'trash-root' , 'shared', 'latest']) && $checkPermission('master') || $checkPermission('editor')" source="move" :action="$t('actions.move')" :class="{'is-inactive' : fileInfoDetail.length < 1}" @click.native="moveItem"/>
+            <ToolbarButton class="action-btn" v-if="!$isThisLocation(['trash', 'trash-root' , 'shared', 'latest']) && $checkPermission('master') || $checkPermission('editor')" source="move" :action="$t('actions.move')" :class="{'is-inactive' : fileInfoDetail.length < 1}" @click.native="moveItem" />
 
-            <ToolbarButton class="action-btn" v-if="!$isThisLocation(['shared']) && $checkPermission('master') || $checkPermission('editor')" source="trash" :class="{'is-inactive' : fileInfoDetail.length < 1}" :action="$t('actions.delete')" @click.native="deleteItem"/>
+            <ToolbarButton class="action-btn" v-if="!$isThisLocation(['shared']) && $checkPermission('master') || $checkPermission('editor')" source="trash" :class="{'is-inactive' : fileInfoDetail.length < 1}" :action="$t('actions.delete')" @click.native="deleteItem" />
 
-            <ToolbarButton class="action-btn" v-if="!$isThisLocation(['shared'])" source="download" :class="{'is-inactive': canDownloadItems}" :action="$t('actions.delete')" @click.native="downloadItem"/>
+            <ToolbarButton class="action-btn" v-if="!$isThisLocation(['shared'])" source="download" :class="{'is-inactive': canDownloadItems}" :action="$t('actions.delete')" @click.native="downloadItem" />
 
-            <ToolbarButton class="action-btn" source="shared-off" @click.native="shareCancel" v-if="$isThisLocation(['shared'])"/>
+            <ToolbarButton class="action-btn" source="shared-off" @click.native="shareCancel" v-if="$isThisLocation(['shared'])" />
 
-            <ToolbarButton class="action-btn close-icon" source="close" :action="$t('actions.close')" @click.native="closeSelecting"/>
+            <ToolbarButton class="action-btn close-icon" source="close" :action="$t('actions.close')" @click.native="closeSelecting" />
         </div>
     </transition>
 </template>
 
 <script>
 import ToolbarButton from '@/components/FilesView/ToolbarButton'
-import { events } from '@/bus'
-import { mapGetters } from 'vuex'
+import {events} from '@/bus'
+import {mapGetters} from 'vuex'
 
 export default {
-    name: 'MobileMultiSelectMenu',
-    components: { ToolbarButton },
+    name: 'MultiSelectToolbarMobile',
+    components: {ToolbarButton},
     computed: {
         ...mapGetters(['fileInfoDetail']),
         canDownloadItems() {
@@ -34,7 +34,7 @@ export default {
         }
     },
     methods: {
-         shareCancel() {
+        shareCancel() {
             this.$store.dispatch('shareCancel')
             this.closeSelecting()
         },
@@ -51,7 +51,7 @@ export default {
         },
         moveItem() {
             // Open move item popup
-            events.$emit('popup:open', { name: 'move', item: [this.fileInfoDetail[0]] })
+            events.$emit('popup:open', {name: 'move', item: [this.fileInfoDetail[0]]})
         },
         deleteItem() {
             //Delete items
@@ -120,37 +120,37 @@ export default {
     }
 }
 
-    @media (prefers-color-scheme: dark) {
+@media (prefers-color-scheme: dark) {
 
-        .multiselect-actions {
-            background: $dark_mode_foreground;
-        }
+    .multiselect-actions {
+        background: $dark_mode_foreground;
     }
+}
 
-    // Transition
-    .context-menu-enter-active,
-    .fade-enter-active {
-        transition: all 200ms;
-    }
+// Transition
+.context-menu-enter-active,
+.fade-enter-active {
+    transition: all 200ms;
+}
 
-    .context-menu-leave-active,
-    .fade-leave-active {
-        transition: all 200ms;
-    }
+.context-menu-leave-active,
+.fade-leave-active {
+    transition: all 200ms;
+}
 
-    .fade-enter,
-    .fade-leave-to {
-        opacity: 0;
-    }
+.fade-enter,
+.fade-leave-to {
+    opacity: 0;
+}
 
-    .context-menu-enter,
-    .context-menu-leave-to {
-        opacity: 0;
-        transform: translateY(100%);
-    }
+.context-menu-enter,
+.context-menu-leave-to {
+    opacity: 0;
+    transform: translateY(100%);
+}
 
-    .context-menu-leave-active {
-        position: absolute;
-    }
+.context-menu-leave-active {
+    position: absolute;
+}
 
 </style>
diff --git a/resources/js/components/FilesView/Option.vue b/resources/js/components/FilesView/Option.vue
index b9329374..922271c8 100644
--- a/resources/js/components/FilesView/Option.vue
+++ b/resources/js/components/FilesView/Option.vue
@@ -17,6 +17,7 @@
             <smile-icon v-if="icon === 'no-options'" size="17" class="group-hover-text-theme"/>
             <paperclip-icon v-if="icon === 'zip-folder'" size="17" class="group-hover-text-theme"/>
             <alphabet-icon v-if="icon === 'alphabet'" size="17" class="group-hover-text-theme"/>
+            <star-icon v-if="icon === 'star'" size="17" class="group-hover-text-theme"/>
         </div>
         <div class="text-label group-hover-text-theme">
             {{ title }}
diff --git a/resources/js/components/Mobile/MenuItemList.vue b/resources/js/components/Mobile/MenuItemList.vue
index 770ae722..42eab117 100644
--- a/resources/js/components/Mobile/MenuItemList.vue
+++ b/resources/js/components/Mobile/MenuItemList.vue
@@ -1,29 +1,29 @@
 <template>
     <ul class="link-group">
-        <router-link :to="{name: link.routeName}" v-for="(link, i) in navigation" :key="i" v-if="link.isVisible" :class="link.icon" class="link-item" @click.native="$emit('menu', link.icon)">
+        <li @click="goToItem(link)" v-for="(link, i) in navigation" :key="i" v-if="link.isVisible" :class="link.icon" class="link-item">
             <div class="menu-icon">
-                <hard-drive-icon v-if="link.icon === 'hard-drive'" size="17"></hard-drive-icon>
-                <share-icon v-if="link.icon === 'share'" size="17"></share-icon>
-                <trash2-icon v-if="link.icon === 'trash'" size="17"></trash2-icon>
-                <power-icon v-if="link.icon === 'power'" size="17"></power-icon>
-                <settings-icon v-if="link.icon === 'settings'" size="17"></settings-icon>
-                <upload-cloud-icon v-if="link.icon === 'latest'" size="17"></upload-cloud-icon>
-                <user-icon v-if="link.icon === 'user'" size="17"></user-icon>
-                <users-icon v-if="link.icon === 'users'" size="17"></users-icon>
-                <lock-icon v-if="link.icon === 'lock'" size="17"></lock-icon>
-                <file-text-icon v-if="link.icon === 'file-text'" size="17"></file-text-icon>
-                <database-icon v-if="link.icon === 'database'" size="17"></database-icon>
-                <credit-card-icon v-if="link.icon === 'credit-card'" size="17"></credit-card-icon>
-                <cloud-icon v-if="link.icon === 'cloud'" size="17"></cloud-icon>
-                <monitor-icon v-if="link.icon === 'monitor'" size="17"></monitor-icon>
-                <box-icon v-if="link.icon === 'box'" size="17"></box-icon>
-                <globe-icon v-if="link.icon === 'language'" size="17"></globe-icon>
+                <hard-drive-icon v-if="link.icon === 'hard-drive'" size="17" />
+                <share-icon v-if="link.icon === 'share'" size="17" />
+                <trash2-icon v-if="link.icon === 'trash'" size="17" />
+                <power-icon v-if="link.icon === 'power'" size="17" />
+                <settings-icon v-if="link.icon === 'settings'" size="17" />
+                <upload-cloud-icon v-if="link.icon === 'latest'" size="17" />
+                <user-icon v-if="link.icon === 'user'" size="17" />
+                <users-icon v-if="link.icon === 'users'" size="17" />
+                <lock-icon v-if="link.icon === 'lock'" size="17" />
+                <file-text-icon v-if="link.icon === 'file-text'" size="17" />
+                <database-icon v-if="link.icon === 'database'" size="17" />
+                <credit-card-icon v-if="link.icon === 'credit-card'" size="17" />
+                <cloud-icon v-if="link.icon === 'cloud'" size="17" />
+                <monitor-icon v-if="link.icon === 'monitor'" size="17" />
+                <box-icon v-if="link.icon === 'box'" size="17" />
+                <globe-icon v-if="link.icon === 'language'" size="17" />
             </div>
             <b class="menu-link">
                 <span>{{ link.title }}</span>
-                <chevron-right-icon size="15" class="arrow-right"></chevron-right-icon>
+                <chevron-right-icon size="15" class="arrow-right"/>
             </b>
-        </router-link>
+        </li>
     </ul>
 </template>
 
@@ -49,7 +49,7 @@
     } from 'vue-feather-icons'
 
     export default {
-        name: 'MenuBar',
+        name: 'MenuItemList',
         components: {
             BoxIcon,
             MonitorIcon,
@@ -72,6 +72,15 @@
         props: [
             'navigation'
         ],
+        methods: {
+            goToItem(link) {
+                this.$emit('menu', link.icon)
+
+                // Go to next route
+                if (link.routeName !== this.$route.name)
+                    this.$router.push({name: link.routeName})
+            }
+        }
     }
 </script>
 
@@ -85,20 +94,6 @@
         padding: 17px 0;
         width: 100%;
 
-        &.power {
-
-            .menu-icon {
-
-                path, line, polyline, rect, circle, ellipse {
-                    stroke: $red;
-                }
-            }
-
-            .menu-link {
-                color: $red;
-            }
-        }
-
         .menu-icon {
             display: block;
             margin-right: 20px;
diff --git a/resources/js/components/Mobile/MenuMobile.vue b/resources/js/components/Mobile/MenuMobile.vue
new file mode 100644
index 00000000..43925db2
--- /dev/null
+++ b/resources/js/components/Mobile/MenuMobile.vue
@@ -0,0 +1,93 @@
+<template>
+    <transition name="context-menu">
+        <div v-if="isVisible" @click="closeMenu" class="options">
+            <slot></slot>
+        </div>
+    </transition>
+</template>
+
+<script>
+    import {events} from '@/bus'
+
+    export default {
+        name: 'MenuMobile',
+        props: [
+            'name'
+        ],
+        data() {
+            return {
+                isVisible: false,
+            }
+        },
+        methods: {
+            closeMenu() {
+                this.isVisible = false
+
+                events.$emit('mobile-menu:hide')
+            }
+        },
+        created() {
+            events.$on('mobile-menu:show', name => {
+                if (name === this.name)
+                    this.isVisible = !this.isVisible
+            })
+
+            events.$on('mobile-menu:hide', () => this.isVisible = false)
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "@assets/vuefilemanager/_variables";
+    @import "@assets/vuefilemanager/_mixins";
+
+    .options {
+        position: absolute;
+        padding-bottom: 12px;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 99;
+        overflow: hidden;
+        background: white;
+        border-top-left-radius: 12px;
+        border-top-right-radius: 12px;
+
+        &.showed {
+            display: block;
+        }
+    }
+
+    // Transition
+    .context-menu-enter-active,
+    .fade-enter-active {
+        transition: all 200ms;
+    }
+
+    .context-menu-leave-active,
+    .fade-leave-active {
+        transition: all 200ms;
+    }
+
+    .fade-enter,
+    .fade-leave-to {
+        opacity: 0;
+    }
+
+    .context-menu-enter,
+    .context-menu-leave-to {
+        opacity: 0;
+        transform: translateY(100%);
+    }
+
+    .context-menu-leave-active {
+        position: absolute;
+    }
+
+    @media (prefers-color-scheme: dark) {
+
+        .options {
+            background: $dark_mode_foreground;
+        }
+    }
+</style>
diff --git a/resources/js/components/Mobile/MenuMobileGroup.vue b/resources/js/components/Mobile/MenuMobileGroup.vue
new file mode 100644
index 00000000..fc6d4283
--- /dev/null
+++ b/resources/js/components/Mobile/MenuMobileGroup.vue
@@ -0,0 +1,35 @@
+<template>
+    <div class="menu-options">
+        <slot></slot>
+    </div>
+</template>
+
+<script>
+    import {mapGetters} from 'vuex'
+
+    export default {
+        name: 'MenuMobileGroup',
+        components: {
+
+        },
+        computed: {
+            ...mapGetters(['config']),
+        },
+        data() {
+            return {
+
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "@assets/vuefilemanager/_variables";
+    @import "@assets/vuefilemanager/_mixins";
+
+    .menu-options {
+        margin-top: 10px;
+        list-style: none;
+        width: 100%;
+    }
+</style>
diff --git a/resources/js/components/Mobile/MobileHeader.vue b/resources/js/components/Mobile/MobileHeader.vue
index 8ca2ca41..cabf2a67 100644
--- a/resources/js/components/Mobile/MobileHeader.vue
+++ b/resources/js/components/Mobile/MobileHeader.vue
@@ -25,7 +25,7 @@
     } from 'vue-feather-icons'
 
     export default {
-        name: 'MenuBar',
+        name: 'MobileHeader',
         props: [
             'title'
         ],
@@ -35,7 +35,7 @@
         },
         methods: {
             showMobileNavigation() {
-                events.$emit('show:mobile-navigation')
+                events.$emit('mobile-navigation:show')
             },
             goBack() {
                 this.$router.back();
diff --git a/resources/js/components/Others/CreateFolder.vue b/resources/js/components/Others/CreateFolderPopup.vue
similarity index 99%
rename from resources/js/components/Others/CreateFolder.vue
rename to resources/js/components/Others/CreateFolderPopup.vue
index 07a0907d..258615a2 100644
--- a/resources/js/components/Others/CreateFolder.vue
+++ b/resources/js/components/Others/CreateFolderPopup.vue
@@ -55,7 +55,7 @@
     import {events} from '@/bus'
 
     export default {
-        name: 'CreateFolder',
+        name: 'CreateFolderPopup',
         components: {
             ValidationProvider,
             ValidationObserver,
diff --git a/resources/js/components/Others/FilePreviewDetail.vue b/resources/js/components/Others/FilePreviewDetail.vue
new file mode 100644
index 00000000..a04b3721
--- /dev/null
+++ b/resources/js/components/Others/FilePreviewDetail.vue
@@ -0,0 +1,61 @@
+<template>
+    <div v-if="canBePreview" class="preview">
+        <img v-if="fileInfoDetail[0].type == 'image' && fileInfoDetail[0].thumbnail" :src="fileInfoDetail[0].thumbnail" :alt="fileInfoDetail[0].name" />
+        <audio v-else-if="fileInfoDetail[0].type == 'audio'" :src="fileInfoDetail[0].file_url" controlsList="nodownload" controls></audio>
+        <video v-else-if="fileInfoDetail[0].type == 'video'" controlsList="nodownload" disablePictureInPicture playsinline controls>
+            <source :src="fileInfoDetail[0].file_url" type="video/mp4">
+        </video>
+    </div>
+</template>
+
+<script>
+    import { mapGetters } from 'vuex'
+    import { includes } from 'lodash'
+
+    export default {
+        name: 'FilePreview',
+        computed: {
+            ...mapGetters(['fileInfoDetail']),
+            canBePreview() {
+                return this.fileInfoDetail[0] && ! includes([
+                    'folder', 'file'
+                ], this.fileInfoDetail[0].type)
+            }
+        },
+    }
+</script>
+
+<style scoped lang="scss">
+    @import '@assets/vuefilemanager/_variables';
+    @import '@assets/vuefilemanager/_mixins';
+
+    .preview {
+        width: 100%;
+        display: block;
+        margin-bottom: 7px;
+
+        img {
+            border-radius: 4px;
+            overflow: hidden;
+            width: 100%;
+            object-fit: cover;
+        }
+
+        audio {
+            width: 100%;
+            &::-webkit-media-controls-panel {
+                background-color: $light_background;
+            }
+
+            &::-webkit-media-controls-play-button {
+                color: $theme;
+            }
+        }
+
+        video {
+            width: 100%;
+            height: auto;
+            border-radius: 3px;
+        }
+    }
+</style>
\ No newline at end of file
diff --git a/resources/js/components/Others/MobileNavigation.vue b/resources/js/components/Others/MobileNavigation.vue
index e21c0cbf..fc7c370b 100644
--- a/resources/js/components/Others/MobileNavigation.vue
+++ b/resources/js/components/Others/MobileNavigation.vue
@@ -4,25 +4,18 @@
             <nav v-if="isVisible" class="mobile-navigation">
 
                 <!--User Info-->
-                <div class="user-info">
-                    <UserAvatar size="large"/>
-                    <UserHeadline/>
-                </div>
+                <UserHeadline class="user-info"/>
 
                 <!--Navigation-->
                 <MenuItemList :navigation="navigation" @menu="action"/>
             </nav>
         </transition>
-        <transition name="fade">
-            <div v-show="isVisible" class="vignette" @click="closeAndResetContextMenu"></div>
-        </transition>
     </div>
 </template>
 
 <script>
     import UserHeadline from '@/components/Sidebar/UserHeadline'
     import MenuItemList from '@/components/Mobile/MenuItemList'
-    import UserAvatar from '@/components/Others/UserAvatar'
     import {mapGetters} from 'vuex'
     import {events} from '@/bus'
 
@@ -31,7 +24,6 @@
         components: {
             MenuItemList,
             UserHeadline,
-            UserAvatar,
         },
         computed: {
             ...mapGetters(['user', 'homeDirectory']),
@@ -43,7 +35,7 @@
                         routeName: 'Files',
                         isVisible: true,
                     },
-                    {
+                    /*{
                         icon: 'latest',
                         title: this.$t('menu.latest'),
                         routeName: 'Files',
@@ -60,7 +52,7 @@
                         title: this.$t('menu.trash'),
                         routeName: 'Files',
                         isVisible: true,
-                    },
+                    },*/
                     {
                         icon: 'user',
                         title: this.$t('menu.settings'),
@@ -90,13 +82,13 @@
         methods: {
             action(name) {
 
-                if (name === 'latest') {
+                /*if (name === 'latest') {
                     this.$store.dispatch('getLatest')
                 }
 
                 if (name === 'trash') {
                     this.$store.dispatch('getTrash')
-                }
+                }*/
 
                 if (name === 'hard-drive') {
                     this.$store.dispatch('getFolder', [{folder: this.homeDirectory, back: false, init: true}])
@@ -106,18 +98,12 @@
                     this.$store.dispatch('logOut')
                 }
 
-                this.closeAndResetContextMenu()
+                events.$emit('mobile-navigation:hide')
             },
-            closeAndResetContextMenu() {
-                this.isVisible = false
-
-                events.$emit('hide:mobile-navigation')
-            }
         },
         created() {
-            events.$on('show:mobile-navigation', () => {
-                this.isVisible = true
-            })
+            events.$on('mobile-navigation:show', () => this.isVisible = true)
+            events.$on('mobile-navigation:hide', () => this.isVisible = false)
         }
     }
 </script>
@@ -137,33 +123,14 @@
         background: white;
         border-top-left-radius: 12px;
         border-top-right-radius: 12px;
-        min-height: 440px;
         max-height: 80%;
         overflow-y: auto;
     }
 
-    .vignette {
-        background: rgba(0, 0, 0, 0.35);
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        z-index: 9;
-        cursor: pointer;
-        opacity: 1;
-    }
-
     .user-info {
-        display: flex;
-        align-items: center;
         margin-bottom: 10px;
     }
 
-    @media only screen and (max-width: 690px) {
-
-    }
-
     @media (prefers-color-scheme: dark) {
         .mobile-navigation {
             background: $dark_mode_background;
diff --git a/resources/js/components/Others/MoveItem.vue b/resources/js/components/Others/MoveItemPopup.vue
similarity index 99%
rename from resources/js/components/Others/MoveItem.vue
rename to resources/js/components/Others/MoveItemPopup.vue
index cf877f61..b4e39b69 100644
--- a/resources/js/components/Others/MoveItem.vue
+++ b/resources/js/components/Others/MoveItemPopup.vue
@@ -54,7 +54,7 @@
     import {events} from '@/bus'
 
     export default {
-        name: 'MoveItem',
+        name: 'MoveItemPopup',
         components: {
             ThumbnailItem,
             PopupWrapper,
diff --git a/resources/js/components/Others/Popup/Confirm.vue b/resources/js/components/Others/Popup/ConfirmPopup.vue
similarity index 99%
rename from resources/js/components/Others/Popup/Confirm.vue
rename to resources/js/components/Others/Popup/ConfirmPopup.vue
index 72e01caf..6653a1d8 100644
--- a/resources/js/components/Others/Popup/Confirm.vue
+++ b/resources/js/components/Others/Popup/ConfirmPopup.vue
@@ -1,6 +1,5 @@
 <template>
     <PopupWrapper>
-
         <div class="popup-image">
             <span class="emoji">{{ emoji }}</span>
         </div>
diff --git a/resources/js/components/Others/RenameItem.vue b/resources/js/components/Others/RenameItemPopup.vue
similarity index 99%
rename from resources/js/components/Others/RenameItem.vue
rename to resources/js/components/Others/RenameItemPopup.vue
index 751bb586..4d4d6134 100644
--- a/resources/js/components/Others/RenameItem.vue
+++ b/resources/js/components/Others/RenameItemPopup.vue
@@ -59,7 +59,7 @@ import {required} from 'vee-validate/dist/rules'
 import {events} from '@/bus'
 
 export default {
-    name: 'RenameItem',
+    name: 'RenameItemPopup',
     components: {
         ValidationProvider,
         ValidationObserver,
diff --git a/resources/js/components/Others/ShareCreate.vue b/resources/js/components/Others/ShareCreatePopup.vue
similarity index 99%
rename from resources/js/components/Others/ShareCreate.vue
rename to resources/js/components/Others/ShareCreatePopup.vue
index 4782edd2..93042d6b 100644
--- a/resources/js/components/Others/ShareCreate.vue
+++ b/resources/js/components/Others/ShareCreatePopup.vue
@@ -112,7 +112,7 @@ import {events} from '@/bus'
 import axios from 'axios'
 
 export default {
-    name: 'ShareCreate',
+    name: 'ShareCreatePopup',
     components: {
         ValidationProvider,
         ValidationObserver,
diff --git a/resources/js/components/Others/ShareEdit.vue b/resources/js/components/Others/ShareEditPopup.vue
similarity index 99%
rename from resources/js/components/Others/ShareEdit.vue
rename to resources/js/components/Others/ShareEditPopup.vue
index 422115fa..b7d5cc6e 100644
--- a/resources/js/components/Others/ShareEdit.vue
+++ b/resources/js/components/Others/ShareEditPopup.vue
@@ -115,7 +115,7 @@
     import axios from 'axios'
 
     export default {
-        name: 'ShareEdit',
+        name: 'ShareEditPopup',
         components: {
             ValidationProvider,
             ValidationObserver,
diff --git a/resources/js/components/Others/Vignette.vue b/resources/js/components/Others/Vignette.vue
index 98088c05..2119d9ed 100644
--- a/resources/js/components/Others/Vignette.vue
+++ b/resources/js/components/Others/Vignette.vue
@@ -26,22 +26,23 @@
         methods: {
             closePopup() {
                 events.$emit('popup:close')
-                events.$emit('mobileMenu:hide')
-                events.$emit('mobileSortingAndPreview', false)
+                events.$emit('mobile-menu:hide')
+                events.$emit('mobile-navigation:hide')
             }
         },
         created() {
-
-            // Hide vignette
-            events.$on('popup:close', () => this.isVisibleVignette = false)
-
             // Show vignette
             events.$on('popup:open', () => this.isVisibleVignette = true)
+            events.$on('mobile-menu:show', () => this.isVisibleVignette = true)
             events.$on('alert:open', () => this.isVisibleVignette = true)
             events.$on('success:open', () => this.isVisibleVignette = true)
             events.$on('confirm:open', () => this.isVisibleVignette = true)
-            events.$on('mobileSortingAndPreviewVignette', (state) => this.isVisibleVignette = state)
+            events.$on('mobile-navigation:show', () => this.isVisibleVignette = true)
 
+            // Hide vignette
+            events.$on('mobile-navigation:hide', () => this.isVisibleVignette = false)
+            events.$on('mobile-menu:hide', () => this.isVisibleVignette = false)
+            events.$on('popup:close', () => this.isVisibleVignette = false)
         }
     }
 </script>
diff --git a/resources/js/components/Sidebar/MenuBar.vue b/resources/js/components/Sidebar/SidebarNavigation.vue
similarity index 99%
rename from resources/js/components/Sidebar/MenuBar.vue
rename to resources/js/components/Sidebar/SidebarNavigation.vue
index 14dc5b7b..7b93e69c 100644
--- a/resources/js/components/Sidebar/MenuBar.vue
+++ b/resources/js/components/Sidebar/SidebarNavigation.vue
@@ -57,7 +57,7 @@
     } from 'vue-feather-icons'
 
     export default {
-        name: 'MenuBar',
+        name: 'SidebarNavigation',
         components: {
             HardDriveIcon,
             SettingsIcon,
diff --git a/resources/js/components/Sidebar/UserHeadline.vue b/resources/js/components/Sidebar/UserHeadline.vue
index f6bd48ed..6e1bcde1 100644
--- a/resources/js/components/Sidebar/UserHeadline.vue
+++ b/resources/js/components/Sidebar/UserHeadline.vue
@@ -1,18 +1,26 @@
 <template>
-    <div class="user-meta" v-if="user">
-        <b class="name">{{ user.data.relationships.settings.data.attributes.name }}</b>
-        <span class="email text-theme">{{ user.data.attributes.email }}</span>
+    <div class="user-headline">
+        <UserAvatar size="large"/>
+        <div class="user-meta">
+            <b class="name">{{ user.data.relationships.settings.data.attributes.name }}</b>
+            <span class="email text-theme">{{ user.data.attributes.email }}</span>
+        </div>
     </div>
 </template>
 
 <script>
+    import UserAvatar from '@/components/Others/UserAvatar'
     import { mapGetters } from 'vuex'
-    import {events} from '@/bus'
 
     export default {
         name: 'UserHeadline',
+        components: {
+            UserAvatar,
+        },
         computed: {
-            ...mapGetters(['user']),
+            ...mapGetters([
+                'user'
+            ]),
         },
     }
 </script>
@@ -21,6 +29,11 @@
     @import '@assets/vuefilemanager/_variables';
     @import '@assets/vuefilemanager/_mixins';
 
+    .user-headline {
+        display: flex;
+        align-items: center;
+    }
+
     .user-meta {
         padding-left: 20px;
 
@@ -35,12 +48,4 @@
             font-weight: 600;
         }
     }
-
-    @media only screen and (max-width: 690px) {
-
-    }
-
-    @media (prefers-color-scheme: dark) {
-
-    }
 </style>
diff --git a/resources/js/views/Admin.vue b/resources/js/views/Admin.vue
index faf60bd8..33fd74e8 100644
--- a/resources/js/views/Admin.vue
+++ b/resources/js/views/Admin.vue
@@ -4,14 +4,14 @@
         <!--Mobile Navigation-->
         <MobileNavigation />
 
-        <!--Confirm Popup-->
-        <Confirm />
+        <!--ConfirmPopup Popup-->
+        <ConfirmPopup />
 
         <!-- Create language popup -->
         <CreateLanguage/>
 
         <!--Navigation Sidebar-->
-        <MenuBar/>
+        <SidebarNavigation/>
 
         <ContentSidebar>
 
@@ -90,12 +90,12 @@
 
 <script>
     import { UsersIcon, SettingsIcon, FileTextIcon, CreditCardIcon, DatabaseIcon, BoxIcon, MonitorIcon, GlobeIcon } from 'vue-feather-icons'
+    import SidebarNavigation from '@/components/Sidebar/SidebarNavigation'
     import MobileNavigation from '@/components/Others/MobileNavigation'
     import ContentSidebar from '@/components/Sidebar/ContentSidebar'
     import CreateLanguage from '@/components/Others/CreateLanguage'
     import ContentGroup from '@/components/Sidebar/ContentGroup'
-    import Confirm from '@/components/Others/Popup/Confirm'
-    import MenuBar from '@/components/Sidebar/MenuBar'
+    import ConfirmPopup from '@/components/Others/Popup/ConfirmPopup'
     import { mapGetters } from 'vuex'
 
     export default {
@@ -104,6 +104,7 @@
             ...mapGetters(['config']),
         },
         components: {
+            SidebarNavigation,
             MobileNavigation,
             CreateLanguage,
             ContentSidebar,
@@ -115,8 +116,7 @@
             MonitorIcon,
             UsersIcon,
             GlobeIcon,
-            Confirm,
-            MenuBar,
+            ConfirmPopup,
             BoxIcon,
         },
     }
diff --git a/resources/js/views/Platform.vue b/resources/js/views/Platform.vue
index 63f2c6fe..c4311814 100644
--- a/resources/js/views/Platform.vue
+++ b/resources/js/views/Platform.vue
@@ -1,118 +1,102 @@
 <template>
     <div id="application-wrapper">
 
-        <!--Full File Preview-->
-        <FileFullPreview />
+        <!--File preview window-->
+        <FilePreview />
 
-        <!--Mobile Navigation-->
-        <MobileNavigation />
-
-        <!--Processing popup-->
+        <!--Popups-->
         <ProcessingPopup />
+        <ConfirmPopup />
 
-        <!--Confirm Popup-->
-        <Confirm />
+        <ShareCreatePopup />
+        <ShareEditPopup />
 
-        <!--Share Item popup-->
-        <ShareCreate />
-        <ShareEdit />
+        <CreateFolderPopup />
+        <RenameItemPopup />
 
-        <!--Rename folder/file item-->
-        <RenameItem />
+        <MoveItemPopup />
 
-        <!--Create folder mobile UI-->
-        <CreateFolder />
+        <!--Mobile components-->
+        <FileSortingMobile />
+        <FileMenuMobile />
 
-        <!--Move item popup-->
-        <MoveItem />
+        <MultiSelectToolbarMobile />
 
-        <!-- Mobile Menu for Multi selected items -->
-        <MobileMultiSelectMenu />
+        <!--Navigations-->
+        <MobileNavigation />
+        <SidebarNavigation />
 
-        <!--Drag UI-->
+        <!--Others-->
         <DragUI />
 
-        <!--Mobile menu for selecting view and sorting-->
-        <MobileSortingAndPreview />
-
-        <!--Mobile Menu-->
-        <MobileMenu />
-
-        <!--Navigation Sidebar-->
-        <MenuBar />
-
-        <!--File page-->
-        <keep-alive :include="['Admin', 'Users']">
-            <router-view :class="{'is-scaled-down': isScaledDown}" />
-        </keep-alive>
+        <router-view :class="{'is-scaled-down': isScaledDown}" />
     </div>
 </template>
 
 <script>
-import MobileSortingAndPreview from '@/components/FilesView/MobileSortingAndPreview'
-import MobileMultiSelectMenu from '@/components/FilesView/MobileMultiSelectMenu'
-import ProcessingPopup from '@/components/FilesView/ProcessingPopup'
-import FileFullPreview from '@/components/FilesView/FileFullPreview'
-import MobileNavigation from '@/components/Others/MobileNavigation'
-import CreateFolder from '@/components/Others/CreateFolder'
-import MobileMenu from '@/components/FilesView/MobileMenu'
-import ShareCreate from '@/components/Others/ShareCreate'
-import Confirm from '@/components/Others/Popup/Confirm'
-import RenameItem from '@/components/Others/RenameItem'
-import ShareEdit from '@/components/Others/ShareEdit'
-import MoveItem from '@/components/Others/MoveItem'
-import DragUI from '@/components/FilesView/DragUI'
-import MenuBar from '@/components/Sidebar/MenuBar'
-import {includes} from 'lodash'
-import {mapGetters} from 'vuex'
-import {events} from '@/bus'
+    import MultiSelectToolbarMobile from '@/components/FilesView/MultiSelectToolbarMobile'
+    import FileSortingMobile from '@/components/FilesView/FileSortingMobile'
+    import SidebarNavigation from '@/components/Sidebar/SidebarNavigation'
+    import CreateFolderPopup from '@/components/Others/CreateFolderPopup'
+    import ProcessingPopup from '@/components/FilesView/ProcessingPopup'
+    import MobileNavigation from '@/components/Others/MobileNavigation'
+    import ShareCreatePopup from '@/components/Others/ShareCreatePopup'
+    import FileMenuMobile from '@/components/FilesView/FileMenuMobile'
+    import ConfirmPopup from '@/components/Others/Popup/ConfirmPopup'
+    import RenameItemPopup from '@/components/Others/RenameItemPopup'
+    import ShareEditPopup from '@/components/Others/ShareEditPopup'
+    import MoveItemPopup from '@/components/Others/MoveItemPopup'
+    import FilePreview from '@/components/FilesView/FilePreview'
+    import DragUI from '@/components/FilesView/DragUI'
+    import {mapGetters} from 'vuex'
+    import {events} from '@/bus'
 
-export default {
-    name: 'Platform',
-    components: {
-        MobileSortingAndPreview,
-        MobileMultiSelectMenu,
-        MobileNavigation,
-        FileFullPreview,
-        ProcessingPopup,
-        CreateFolder,
-        ShareCreate,
-        MobileMenu,
-        RenameItem,
-        ShareEdit,
-        MoveItem,
-        Confirm,
-        MenuBar,
-        DragUI,
-    },
-    computed: {
-        ...mapGetters([
-            'config'
-        ]),
-    },
-    data() {
-        return {
-            isScaledDown: false
+    export default {
+        name: 'Platform',
+        components: {
+            MultiSelectToolbarMobile,
+            CreateFolderPopup,
+            FileSortingMobile,
+            SidebarNavigation,
+            MobileNavigation,
+            ShareCreatePopup,
+            ProcessingPopup,
+            RenameItemPopup,
+            ShareEditPopup,
+            FileMenuMobile,
+            MoveItemPopup,
+            ConfirmPopup,
+            FilePreview,
+            DragUI,
+        },
+        computed: {
+            ...mapGetters([
+                'config'
+            ]),
+        },
+        data() {
+            return {
+                isScaledDown: false
+            }
+        },
+        mounted() {
+            events.$on('mobile-navigation:show', () => this.isScaledDown = true)
+            events.$on('mobile-menu:show', () => this.isScaledDown = true)
+
+            events.$on('mobile-navigation:hide', () => this.isScaledDown = false)
+            events.$on('fileItem:deselect', () => this.isScaledDown = false)
+            events.$on('mobile-menu:hide', () => this.isScaledDown = false)
         }
-    },
-    mounted() {
-        events.$on('show:mobile-navigation', () => this.isScaledDown = true)
-        events.$on('hide:mobile-navigation', () => this.isScaledDown = false)
-        events.$on('mobileMenu:show', () => this.isScaledDown = true)
-        events.$on('fileItem:deselect', () => this.isScaledDown = false)
-        events.$on('mobileSortingAndPreview', state => this.isScaledDown = state)
     }
-}
 </script>
 
 <style lang="scss">
-@import '@assets/vuefilemanager/_variables';
-@import '@assets/vuefilemanager/_mixins';
+    @import '@assets/vuefilemanager/_mixins';
 
-@media only screen and (max-width: 690px) {
+    @media only screen and (max-width: 690px) {
 
-    .is-scaled-down {
-        @include transform(scale(0.95));
+        .is-scaled-down {
+            @include transform(scale(0.95));
+        }
     }
-}
 </style>
diff --git a/resources/js/views/Shared.vue b/resources/js/views/Shared.vue
index 83075033..4475e0f3 100644
--- a/resources/js/views/Shared.vue
+++ b/resources/js/views/Shared.vue
@@ -1,108 +1,114 @@
 <template>
     <div id="application-wrapper">
 
-        <!--Full File Preview-->
-        <FileFullPreview />
-
         <!--Loading Spinner-->
         <Spinner v-if="isLoading" />
 
-        <!--Move item popup-->
-        <MoveItem />
+        <!--File preview window-->
+        <FilePreview />
 
-        <!-- Processing popup for zip -->
+        <!--Popups-->
         <ProcessingPopup />
 
-        <!-- Mobile Menu for Multi selected items -->
-        <MobileMultiSelectMenu />
+        <CreateFolderPopup />
+        <RenameItemPopup />
 
-        <!--Rename folder/file item-->
-        <RenameItem />
+        <MoveItemPopup />
 
-        <!--Create folder mobile UI-->
-        <CreateFolder />
+        <!-- Mobile components -->
+        <FileSortingMobile />
+        <FileMenuMobile />
 
-        <!--Drag UI-->
+        <MultiSelectToolbarMobile />
+
+        <!--Others-->
+        <Vignette />
         <DragUI />
-
-        <!--Mobile Menu-->
-        <MobileMenu />
-
-        <!--Mobile menu for selecting view and sorting-->
-        <MobileSortingAndPreview />
-
-        <!--System alerts-->
         <Alert />
 
-        <!--Background vignette-->
-        <Vignette />
-
-        <!--Pages-->
-        <router-view />
+        <router-view :class="{'is-scaled-down': isScaledDown}" />
     </div>
 </template>
 
 <script>
-import MobileSortingAndPreview from '@/components/FilesView/MobileSortingAndPreview'
-import MobileMultiSelectMenu from '@/components/FilesView/MobileMultiSelectMenu'
-import ProcessingPopup from '@/components/FilesView/ProcessingPopup'
-import FileFullPreview from '@/components/FilesView/FileFullPreview'
-import CreateFolder from '@/components/Others/CreateFolder'
-import MobileMenu from '@/components/FilesView/MobileMenu'
-import RenameItem from '@/components/Others/RenameItem'
-import Spinner from '@/components/FilesView/Spinner'
-import MoveItem from '@/components/Others/MoveItem'
-import Vignette from '@/components/Others/Vignette'
-import DragUI from '@/components/FilesView/DragUI'
-import Alert from '@/components/FilesView/Alert'
-import {mapGetters} from 'vuex'
+    import MultiSelectToolbarMobile from '@/components/FilesView/MultiSelectToolbarMobile'
+    import FileSortingMobile from '@/components/FilesView/FileSortingMobile'
+    import CreateFolderPopup from '@/components/Others/CreateFolderPopup'
+    import ProcessingPopup from '@/components/FilesView/ProcessingPopup'
+    import FileMenuMobile from '@/components/FilesView/FileMenuMobile'
+    import RenameItemPopup from '@/components/Others/RenameItemPopup'
+    import MoveItemPopup from '@/components/Others/MoveItemPopup'
+    import FilePreview from '@/components/FilesView/FilePreview'
+    import Spinner from '@/components/FilesView/Spinner'
+    import Vignette from '@/components/Others/Vignette'
+    import DragUI from '@/components/FilesView/DragUI'
+    import Alert from '@/components/FilesView/Alert'
+    import {events} from '@/bus'
+    import {mapGetters} from 'vuex'
 
-export default {
-    name: 'Platform',
-    components: {
-        MobileSortingAndPreview,
-        MobileMultiSelectMenu,
-        FileFullPreview,
-        ProcessingPopup,
-        CreateFolder,
-        MobileMenu,
-        RenameItem,
-        MoveItem,
-        Vignette,
-        Spinner,
-        DragUI,
-        Alert,
-    },
-    computed: {
-        ...mapGetters([
-            'config'
-        ]),
-    },
-    data() {
-        return {
-            isLoading: true,
+    export default {
+        name: 'Platform',
+        components: {
+            MultiSelectToolbarMobile,
+            CreateFolderPopup,
+            FileSortingMobile,
+            ProcessingPopup,
+            RenameItemPopup,
+            FileMenuMobile,
+            MoveItemPopup,
+            FilePreview,
+            Vignette,
+            Spinner,
+            DragUI,
+            Alert,
+        },
+        computed: {
+            ...mapGetters([
+                'config'
+            ]),
+        },
+        data() {
+            return {
+                isLoading: true,
+                isScaledDown: false
+            }
+        },
+        mounted() {
+            events.$on('mobile-navigation:show', () => this.isScaledDown = true)
+            events.$on('mobile-navigation:hide', () => this.isScaledDown = false)
+            events.$on('mobile-menu:show', () => this.isScaledDown = true)
+            events.$on('fileItem:deselect', () => this.isScaledDown = false)
+
+            this.$store.dispatch('getShareDetail', this.$route.params.token)
+                .then(response => {
+                    this.isLoading = false
+
+                    // Show public file browser
+                    if (response.data.data.attributes.type === 'folder' && !response.data.data.attributes.is_protected && this.$router.currentRoute.name !== 'SharedFileBrowser') {
+                        this.$router.push({name: 'SharedFileBrowser'})
+                    }
+
+                    // Show public single file
+                    if (response.data.data.attributes.type !== 'folder' && !response.data.data.attributes.is_protected && this.$router.currentRoute.name !== 'SharedSingleFile') {
+                        this.$router.push({name: 'SharedSingleFile'})
+                    }
+
+                    // Show authentication page
+                    if (response.data.data.attributes.is_protected && this.$router.currentRoute.name !== 'SharedAuthentication') {
+                        this.$router.push({name: 'SharedAuthentication'})
+                    }
+                })
         }
-    },
-    mounted() {
-        this.$store.dispatch('getShareDetail', this.$route.params.token)
-            .then(response => {
-                this.isLoading = false
-
-                // Show public file browser
-                if (response.data.data.attributes.type === 'folder' && !response.data.data.attributes.is_protected && this.$router.currentRoute.name !== 'SharedFileBrowser') {
-                    this.$router.push({name: 'SharedFileBrowser'})
-                }
-
-                // Show public single file
-                if (response.data.data.attributes.type !== 'folder' && !response.data.data.attributes.is_protected && this.$router.currentRoute.name !== 'SharedSingleFile') {
-                    this.$router.push({name: 'SharedSingleFile'})
-                }
-
-                // Show authentication page
-                if (response.data.data.attributes.is_protected && this.$router.currentRoute.name !== 'SharedAuthentication') {
-                    this.$router.push({name: 'SharedAuthentication'})
-                }
-            })
     }
-}
 </script>
+
+<style lang="scss">
+    @import '@assets/vuefilemanager/_mixins';
+
+    @media only screen and (max-width: 690px) {
+
+        .is-scaled-down {
+            @include transform(scale(0.95));
+        }
+    }
+</style>
diff --git a/resources/views/vuefilemanager/others/color-template.blade.php b/resources/views/vuefilemanager/others/color-template.blade.php
index 04ec8648..439235c5 100644
--- a/resources/views/vuefilemanager/others/color-template.blade.php
+++ b/resources/views/vuefilemanager/others/color-template.blade.php
@@ -50,7 +50,7 @@
         {{-- Emoji Picker --}}
         .active-menu.focus-border-theme {border-color: {{ $color }} !important;}
 
-        {{-- Menubar --}}
+        {{-- Sidebar Navigation --}}
         .router-link-active.home .button-icon {background: {{ $color }}10}
 
         {{-- Content Panel --}}
diff --git a/webpack.mix.js b/webpack.mix.js
index 17c9fe68..d3ec8bab 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -33,12 +33,12 @@ mix.js('resources/js/main.js', 'public/js')
             clientLogLevel: 'none'
         }
     })
-    /*.options({
+    .options({
         hmrOptions: {
             host: '192.168.1.198',
             port: '8080'
         },
-    })*/
+    })
     .disableNotifications();
 
 if (mix.inProduction()) {