diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index ba7ba1c0..000c5954 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -27,9 +27,9 @@
     "/chunks/database.js": "/chunks/database.js?id=1fc78cfeb3befbd92423",
     "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=f7ff36abf37571173944",
     "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=a2eed5073e52410cab54",
-    "/chunks/files.js": "/chunks/files.js?id=6a283c2c9f8a02500bc6",
+    "/chunks/files.js": "/chunks/files.js?id=b738eb9054e663cc32b7",
     "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js": "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js?id=b646ec02fb9d6a497e74",
-    "/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=21632550b02db8bfd464",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=48524061ae633d993344",
     "/chunks/files~chunks/shared-page.js": "/chunks/files~chunks/shared-page.js?id=47ade53389e84dd64310",
     "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=d5e39543eeb619cb5513",
     "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=be9304e6ba2c61b6cab3",
@@ -57,7 +57,7 @@
     "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=b671f4f3198119b48449",
     "/chunks/shared-files.js": "/chunks/shared-files.js?id=b13068f12911fbf79f74",
     "/chunks/shared-page.js": "/chunks/shared-page.js?id=09252cb95089d52ee56a",
-    "/chunks/sign-in.js": "/chunks/sign-in.js?id=0212907c9bf1cdbd99ed",
+    "/chunks/sign-in.js": "/chunks/sign-in.js?id=7b6565f5df2060b45bc0",
     "/chunks/sign-up.js": "/chunks/sign-up.js?id=39de7293c26fb3cef1a3",
     "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=57235ac99a66b55fbf7c",
     "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=51a2856dd0631053b42e",
@@ -117,5 +117,9 @@
     "/js/main.94786b794f722913db2f.hot-update.js": "/js/main.94786b794f722913db2f.hot-update.js",
     "/js/main.5b97e99de82c004b7040.hot-update.js": "/js/main.5b97e99de82c004b7040.hot-update.js",
     "/js/main.0994c3cbbe38c708be78.hot-update.js": "/js/main.0994c3cbbe38c708be78.hot-update.js",
-    "/js/main.1743a74cb9afb57f23a8.hot-update.js": "/js/main.1743a74cb9afb57f23a8.hot-update.js"
+    "/js/main.1743a74cb9afb57f23a8.hot-update.js": "/js/main.1743a74cb9afb57f23a8.hot-update.js",
+    "/js/main.4d61823678463591028f.hot-update.js": "/js/main.4d61823678463591028f.hot-update.js",
+    "/chunks/files.4d61823678463591028f.hot-update.js": "/chunks/files.4d61823678463591028f.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.4d61823678463591028f.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.4d61823678463591028f.hot-update.js",
+    "/chunks/sign-in.4d61823678463591028f.hot-update.js": "/chunks/sign-in.4d61823678463591028f.hot-update.js"
 }
diff --git a/resources/js/App.vue b/resources/js/App.vue
index 2aa81815..2d9f9233 100644
--- a/resources/js/App.vue
+++ b/resources/js/App.vue
@@ -59,7 +59,6 @@
 
         <CookieDisclaimer/>
 
-        <!--Background vignette-->
         <Vignette/>
     </div>
 </template>
diff --git a/resources/js/components/FilesView/DesktopToolbar.vue b/resources/js/components/FilesView/DesktopToolbar.vue
index 43662259..9d9ac3d2 100644
--- a/resources/js/components/FilesView/DesktopToolbar.vue
+++ b/resources/js/components/FilesView/DesktopToolbar.vue
@@ -25,22 +25,22 @@
                     <SearchBar/>
                 </div>
 
-                <!--Files controlls-->
+                <!--Creating controls-->
                 <div class="toolbar-button-wrapper" v-if="$checkPermission(['master', 'editor'])">
                     <ToolbarButtonUpload :class="{ 'is-inactive': canUploadInView || !hasCapacity }" :action="$t('actions.upload')"/>
                     <ToolbarButton :class="{ 'is-inactive': canCreateFolderInView }" @click.native="createFolder" source="folder-plus" :action="$t('actions.create_folder')"/>
                 </div>
 
-                <div class="toolbar-button-wrapper" v-if="$checkPermission(['master', 'editor'])">
+                <!--File Controls-->
+                <div class="toolbar-button-wrapper" v-if="$checkPermission(['master', 'editor']) && ! $isMobile()">
                     <ToolbarButton source="move" :class="{ 'is-inactive': canMoveInView }" :action="$t('actions.move')" @click.native="moveItem"/>
                     <ToolbarButton v-if="!$isThisLocation(['public'])" source="share" :class="{ 'is-inactive': canShareInView }" :action="$t('actions.share')" @click.native="shareItem"/>
                     <ToolbarButton source="trash" :class="{ 'is-inactive': canDeleteInView }" :action="$t('actions.delete')" @click.native="deleteItem"/>
                 </div>
 
-                <!--View options-->
+                <!--View Controls-->
                 <div class="toolbar-button-wrapper">
                     <ToolbarButton source="preview-sorting" class="preview-sorting" :action="$t('actions.sorting_view')" :class="{ active: sortingAndPreview }" @click.stop.native="sortingAndPreview = !sortingAndPreview"/>
-
                     <ToolbarButton :action="$t('actions.info_panel')" :class="{ active: fileInfoVisible }" @click.native="$store.dispatch('fileInfoToggle')" source="info"/>
                 </div>
             </div>
diff --git a/resources/js/components/FilesView/DragUI.vue b/resources/js/components/FilesView/DragUI.vue
index 36023efa..3ce2b488 100644
--- a/resources/js/components/FilesView/DragUI.vue
+++ b/resources/js/components/FilesView/DragUI.vue
@@ -1,72 +1,77 @@
 <template>
-        <MultiSelected :title="title" :subtitle="subtitle" id="multi-select-ui" v-show="dragged" />
+    <MultiSelected :title="title" :subtitle="subtitle" id="multi-select-ui" v-show="isVisible"/>
 </template>
 
 <script>
 import MultiSelected from '@/components/FilesView/MultiSelected'
-import {mapGetters} from 'vuex'
-import {events} from '@/bus'
+import { mapGetters } from 'vuex'
+import { events } from '@/bus'
 
-    export default {
-        name:"DragUI",
-        components: {MultiSelected},
-        computed: {
-            ...mapGetters(['fileInfoDetail']),
-            title(){
+export default {
+    name: 'DragUI',
+    components: { MultiSelected },
+    computed: {
+        ...mapGetters(['fileInfoDetail']),
+        title() {
+            let filesLength = this.fileInfoDetail.length,
+                hasDraggedItem = this.fileInfoDetail.includes(this.draggedItem)
 
-                // Title for multiple selected items
-                if(this.fileInfoDetail.length > 1 && this.fileInfoDetail.includes(this.draggedItem)) {
-                    return this.$t('file_detail.selected_multiple')
-                }
+            // Title for multiple selected items
+            if (filesLength > 1 && hasDraggedItem) {
+                return this.$t('file_detail.selected_multiple')
+            }
 
-                // Title for single item
-                if((this.fileInfoDetail.length < 2 || !this.fileInfoDetail.includes(this.draggedItem)) && this.draggedItem ) {
-                    return this.draggedItem.name
-                }
-            },
-            subtitle(){
-                // Subtitle for multiple selected items
-                if(this.fileInfoDetail.length > 1 && this.fileInfoDetail.includes(this.draggedItem) ) {
-                    return this.fileInfoDetail.length + ' ' + this.$tc('file_detail.items', this.fileInfoDetail.length)
-                }
-
-                if((this.fileInfoDetail.length < 2 || !this.fileInfoDetail.includes(this.draggedItem)) && this.draggedItem) {
-
-                    // Subtitle for single folder
-                    if(this.draggedItem.type === 'folder') {
-                       return  this.draggedItem.items == 0 ? this.$t('folder.empty') : this.$tc('folder.item_counts', this.draggedItem.items)
-                    }
-                    
-                    // Subtitle for single file
-                    if(this.draggedItem !== 'folder' && this.draggedItem.mimetype){
-                        return '.'+this.draggedItem.mimetype
-                    }
-                }
-            },
-        },
-        data () {
-            return {
-                dragged: false,
-                draggedItem: undefined
+            // Title for single item
+            if ((filesLength < 2 || !hasDraggedItem) && this.draggedItem) {
+                return this.draggedItem.name
             }
         },
-        mounted () {
+        subtitle() {
+            let filesLength = this.fileInfoDetail.length,
+                hasDraggedItem = this.fileInfoDetail.includes(this.draggedItem)
 
-            // Hnadle Drag & Drop Ghost show
-            
-            events.$on('dragstart', (data) => {
-                setTimeout(() => {
-                    this.dragged = true
-                }, 50);
-                this.draggedItem = data
-            })
-            events.$on('drop', () => {
-                this.dragged = false
-            })
-            
+            // Subtitle for multiple selected items
+            if (filesLength > 1 && hasDraggedItem) {
+                return filesLength + ' ' + this.$tc('file_detail.items', filesLength)
+            }
+
+            if ((filesLength < 2 || !hasDraggedItem) && this.draggedItem) {
+
+                // Subtitle for single folder
+                if (this.draggedItem.type === 'folder') {
+                    return this.draggedItem.items == 0 ? this.$t('folder.empty') : this.$tc('folder.item_counts', this.draggedItem.items)
+                }
+
+                // Subtitle for single file
+                if (this.draggedItem !== 'folder' && this.draggedItem.mimetype) {
+                    return '.' + this.draggedItem.mimetype
+                }
+            }
         }
-        
+    },
+    data() {
+        return {
+            isVisible: false,
+            draggedItem: undefined
+        }
+    },
+    created() {
+        // Handle Drag & Drop Ghost show
+        events.$on('dragstart', data => {
+            this.draggedItem = data
+
+            setTimeout(() => {
+                this.isVisible = true
+            }, 100)
+        })
+
+        events.$on('drop', () => {
+            this.isVisible = false
+        })
+
+
     }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -82,38 +87,44 @@ import {events} from '@/bus'
     padding: 10px;
     border-radius: 8px;
     box-shadow: 0 7px 25px 1px rgba(0, 0, 0, 0.12);
-    background:white;
-     /deep/.text{
-            .title {
-                color: $text;
-            }
-            .count {
-                color: $text-muted;
-            }
+    background: white;
+
+    /deep/ .text {
+        .title {
+            color: $text;
         }
-    /deep/.icon-wrapper {
-            .icon { 
-                stroke: $theme;
-            }
+
+        .count {
+            color: $text-muted;
         }
+    }
+
+    /deep/ .icon-wrapper {
+        .icon {
+            stroke: $theme;
+        }
+    }
 }
 
 @media (prefers-color-scheme: dark) {
     #multi-select-ui {
         background: $dark_mode_foreground;
-        /deep/.text {
+
+        /deep/ .text {
             .title {
                 color: $dark_mode_text_primary;
             }
+
             .count {
                 color: $dark_mode_text_secondary;
             }
-        }    
-        /deep/.icon-wrapper {
-            .icon { 
+        }
+
+        /deep/ .icon-wrapper {
+            .icon {
                 stroke: $theme;
-            }   
-        }  
+            }
+        }
     }
 }
 
diff --git a/resources/js/components/FilesView/FileItemGrid.vue b/resources/js/components/FilesView/FileItemGrid.vue
index c4ced3ea..9ed9074e 100644
--- a/resources/js/components/FilesView/FileItemGrid.vue
+++ b/resources/js/components/FilesView/FileItemGrid.vue
@@ -347,7 +347,7 @@ export default {
 }
 
 .select-box-active {
-    background-color: $text;
+    background-color: $theme;
 
     .icon {
         stroke: white;
@@ -601,10 +601,10 @@ export default {
     }
 
     .select-box-active {
-        background-color: #f4f5f6;
+        background-color: lighten($theme, 5%);
 
         .icon {
-            stroke: $text;
+            stroke: white;
         }
     }
 
diff --git a/resources/js/components/FilesView/FileItemList.vue b/resources/js/components/FilesView/FileItemList.vue
index da688d86..5a65f138 100644
--- a/resources/js/components/FilesView/FileItemList.vue
+++ b/resources/js/components/FilesView/FileItemList.vue
@@ -1,9 +1,14 @@
 <template>
     <div class="file-wrapper" @click.stop="clickedItem" @dblclick="goToItem" spellcheck="false">
         <!--List preview-->
-        <div :draggable="canDrag" @dragstart="$emit('dragstart')" @drop="
-				drop()
-				area = false" @dragleave="dragLeave" @dragover.prevent="dragEnter" class="file-item" :class="{'is-clicked' : isClicked , 'no-clicked' : !isClicked && this.$isMobile(), 'is-dragenter': area }">
+        <div
+            :draggable="canDrag"
+            @dragstart="$emit('dragstart')"
+            @drop="drop()"
+            @dragleave="dragLeave"
+            @dragover.prevent="dragEnter"
+            class="file-item" :class="{'is-clicked' : isClicked , 'no-clicked' : !isClicked && this.$isMobile(), 'is-dragenter': area }"
+        >
             <!-- MultiSelecting for the mobile version -->
             <transition name="slide-from-left">
                 <div class="check-select" v-if="mobileMultiSelect">
@@ -99,7 +104,7 @@ export default {
                 })
                 return false
             }
-               
+
             // If folder have set some emoji
             if(this.data.icon_emoji)
                return this.data.icon_emoji
@@ -161,6 +166,7 @@ export default {
     },
     methods: {
         drop() {
+            this.area = false
             events.$emit('drop')
         },
         showItemActions() {
@@ -358,10 +364,10 @@ export default {
     }
 
     .select-box-active {
-        background-color: #f4f5f6;
+        background-color: $theme;
 
         .icon {
-            stroke: $text;
+            stroke: white;
         }
     }
 }
@@ -563,10 +569,10 @@ export default {
         }
 
         .select-box-active {
-            background-color: lighten($dark_mode_foreground, 10%);
+            background-color: $theme;
 
             .icon {
-                stroke: $theme;
+                stroke: white;
             }
         }
     }
diff --git a/resources/js/components/FilesView/FilePreviewNavigationPanel.vue b/resources/js/components/FilesView/FilePreviewNavigationPanel.vue
index 45af76ec..cbde58f9 100644
--- a/resources/js/components/FilesView/FilePreviewNavigationPanel.vue
+++ b/resources/js/components/FilesView/FilePreviewNavigationPanel.vue
@@ -6,7 +6,7 @@
 				<p class="title">{{ fileInfoDetail[0].name }}</p>				
 				<span class="file-count"> ({{ showingImageIndex + ' ' + $t('pronouns.of') + ' ' + filteredFiles.length }}) </span>
 			</div>
-			<span id="fast-preview-menu" class="fast-menu-icon" @click.stop="menuOpen" v-if="$checkPermission(['master', 'editor'])">
+			<span id="fast-preview-menu" class="fast-menu-icon" @click.stop="menuOpen" v-if="$checkPermission(['master', 'editor', 'visitor'])">
 				<more-horizontal-icon class="more-icon" size="14"> </more-horizontal-icon>
 			</span>
 		</div>
diff --git a/resources/js/components/FilesView/MediaFullPreview.vue b/resources/js/components/FilesView/MediaFullPreview.vue
index f8aeccc6..a2954037 100644
--- a/resources/js/components/FilesView/MediaFullPreview.vue
+++ b/resources/js/components/FilesView/MediaFullPreview.vue
@@ -5,7 +5,7 @@
 				<audio class="file audio" :class="{ 'file-shadow': !isMobileDevice }" v-if="fileInfoDetail[0].type == 'audio'" :src="currentFile.file_url" controlsList="nodownload" controls></audio>
 				<img v-if="fileInfoDetail[0].type === 'image' && currentFile.thumbnail" class="file" :class="{ 'file-shadow': !isMobileDevice }" id="image" :src="currentFile.file_url" />
 				<div class="video-wrapper" v-if="fileInfoDetail[0].type === 'video' && currentFile.file_url">
-					<video :src="currentFile.file_url" class="video" :class="{ 'file-shadow': !isMobileDevice }" controlsList="nodownload" disablePictureInPicture playsinline controls />
+					<video :src="currentFile.file_url" class="video" :class="{ 'file-shadow': !isMobileDevice }" controlsList="nodownload" disablePictureInPicture playsinline controls autoplay />
 				</div>
 			</div>
 		</div>
diff --git a/resources/js/components/FilesView/MobileMenu.vue b/resources/js/components/FilesView/MobileMenu.vue
index 9792ae6b..56cb57e9 100644
--- a/resources/js/components/FilesView/MobileMenu.vue
+++ b/resources/js/components/FilesView/MobileMenu.vue
@@ -1,427 +1,368 @@
 <template>
-  <div class="options-wrapper">
-    <transition name="context-menu">
-      <div
-        v-if="isVisible"
-        ref="contextmenu"
-        class="options"
-        @click="closeAndResetContextMenu"
-      >
-  
-        <div class="menu-wrapper">
+    <div class="options-wrapper">
+        <transition name="context-menu">
+            <div v-if="isVisible" ref="contextmenu" class="options" @click="closeAndResetContextMenu">
 
-          <!--Item Thumbnail-->
-          <ThumbnailItem
-            class="item-thumbnail"
-            :item="fileInfoDetail[0]"
-            info="metadata"
-          />
+                <div class="menu-wrapper">
 
-          <!--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>
+                    <!--Item Thumbnail-->
+                    <ThumbnailItem class="item-thumbnail" :item="fileInfoDetail[0]" info="metadata"/>
 
-            <ul class="menu-option-group" v-if="!isFolder">
-              <li class="menu-option" @click="downloadItem">
-                <div class="icon">
-                  <download-cloud-icon size="17"></download-cloud-icon>
-                </div>
-                <div class="text-label">
-                  {{ $t("context_menu.download") }}
-                </div>
-              </li>
-            </ul>
-          </div>
+                    <!--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>
 
-          <!--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" v-if="!isFolder">
+                            <li class="menu-option" @click="downloadItem">
+                                <div class="icon">
+                                    <download-cloud-icon size="17"></download-cloud-icon>
+                                </div>
+                                <div class="text-label">
+                                    {{ $t('context_menu.download') }}
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
 
-            <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>
+                    <!--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="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>
-            </ul>
-          </div>
+                        <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>
 
-          <!--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="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>
+                        </ul>
+                    </div>
 
-            <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>
+                    <!--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="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>
-            </ul>
-          </div>
+                        <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>
 
-          <!--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>
+                        </ul>
+                    </div>
 
-            <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>
-            </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>
 
-          <!--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>
+                        <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>
+                        </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>
+                        </ul>
+                    </div>
                 </div>
-                <div class="text-label">
-                  {{ $t("context_menu.download") }}
-                </div>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </transition>
-    <transition name="fade">
-      <div
-        v-show="isVisible"
-        class="vignette"
-        @click="closeAndResetContextMenu"
-      ></div>
-    </transition>
-  </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 ThumbnailItem from '@/components/Others/ThumbnailItem'
 
 import {
-  CornerDownRightIcon,
-  DownloadCloudIcon,
-  FolderPlusIcon,
-  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,
-    ThumbnailItem,
     LifeBuoyIcon,
     Trash2Icon,
     Edit2Icon,
     TrashIcon,
-    LinkIcon,
     StarIcon,
-    EyeIcon,
-  },
-  computed: {
-    ...mapGetters(["fileInfoDetail", "user"]),
-    favourites() {
-      return this.user.relationships.favourites.data.attributes.folders;
-    },
-    isInFavourites() {
-      return this.favourites.find(
-        (el) => el.unique_id == this.fileInfoDetail[0].unique_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: {
-    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.unique_id == this.fileInfoDetail[0].unique_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() {
-    // Show context menu
-    events.$on("mobileMenu:show", (showFromMedia) => {
-      //If emit come from MediaFullPreview
-      if (showFromMedia) {
-        this.isVisible = true;
-        this.showFromMediaPreview = true;
-      } else {
-        this.isVisible = !this.isVisible;
-      }
-    });
+    LinkIcon,
+    EyeIcon
+} from 'vue-feather-icons'
+import { events } from '@/bus'
+import { mapGetters } from 'vuex'
 
-    // Hide mobile menu
-    events.$on("mobileMenu:hide", () => {
-      this.isVisible = false;
-    });
-  },
-};
+export default {
+    name: 'MobileMenu',
+    components: {
+        CornerDownRightIcon,
+        DownloadCloudIcon,
+        FolderPlusIcon,
+        ThumbnailItem,
+        LifeBuoyIcon,
+        Trash2Icon,
+        Edit2Icon,
+        TrashIcon,
+        LinkIcon,
+        StarIcon,
+        EyeIcon
+    },
+    computed: {
+        ...mapGetters(['fileInfoDetail', 'user']),
+        favourites() {
+            return this.user.relationships.favourites.data.attributes.folders
+        },
+        isInFavourites() {
+            return this.favourites.find(
+                (el) => el.unique_id == this.fileInfoDetail[0].unique_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: {
+        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.unique_id == this.fileInfoDetail[0].unique_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">
@@ -429,140 +370,141 @@ export default {
 @import "@assets/vue-file-manager/_mixins";
 
 .mobile-selected-menu {
-  display: flex;
-  margin-left: 15px;
-  margin-right: 15px;
-  .close-icon {
-    margin-left: auto !important;
-  }
+    display: flex;
+    margin-left: 15px;
+    margin-right: 15px;
+
+    .close-icon {
+        margin-left: auto !important;
+    }
 }
 
 .menu-option {
-  display: flex;
-  align-items: center;
+    display: flex;
+    align-items: center;
 
-  .icon {
-    margin-right: 20px;
-    line-height: 0;
-  }
+    .icon {
+        margin-right: 20px;
+        line-height: 0;
+    }
 
-  .text-label {
-    @include font-size(16);
-  }
+    .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;
+    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;
+    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;
-      }
+    &.showed {
+        display: block;
     }
 
-    .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;
-      }
+    .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_background;
-
-    .menu-options {
-      background: $dark_mode_background;
-
-      .menu-option-group {
-        border-color: $dark_mode_border_color;
-      }
-
-      .menu-option {
-        color: $dark_mode_text_primary;
-      }
+    .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;
+    transition: all 200ms;
 }
 
 .context-menu-leave-active,
 .fade-leave-active {
-  transition: all 200ms;
+    transition: all 200ms;
 }
 
 .fade-enter,
 .fade-leave-to {
-  opacity: 0;
+    opacity: 0;
 }
 
 .context-menu-enter,
 .context-menu-leave-to {
-  opacity: 0;
-  transform: translateY(100%);
+    opacity: 0;
+    transform: translateY(100%);
 }
 
 .context-menu-leave-active {
-  position: absolute;
+    position: absolute;
 }
 </style>
diff --git a/resources/js/components/FilesView/MobileSortingAndPreview.vue b/resources/js/components/FilesView/MobileSortingAndPreview.vue
index b935482f..df5d2d2a 100644
--- a/resources/js/components/FilesView/MobileSortingAndPreview.vue
+++ b/resources/js/components/FilesView/MobileSortingAndPreview.vue
@@ -42,7 +42,7 @@ import { events } from '@/bus'
 
 @media (prefers-color-scheme: dark) {
     .options {
-        background: $dark_mode_background;
+        background: $dark_mode_foreground;
     }
 }
 
diff --git a/resources/js/components/FilesView/ProcessingPopup.vue b/resources/js/components/FilesView/ProcessingPopup.vue
index a7f7bf93..d862c4eb 100644
--- a/resources/js/components/FilesView/ProcessingPopup.vue
+++ b/resources/js/components/FilesView/ProcessingPopup.vue
@@ -1,13 +1,13 @@
 <template>
     <transition name="popup">
-        <div class="popup" v-if="isZippingFiles">
+        <div class="popup" v-if="processingPopup">
             <div class="popup-wrapper">
                 <div class="popup-content">
                     <div class="spinner-wrapper">
                         <Spinner/>
                     </div>
-                    <h1 class="title">{{ $t('popup_zipping.title') }}</h1>
-                    <p class="message">{{ $t('popup_zipping.message') }}</p>
+                    <h1 class="title">{{ processingPopup.title }}</h1>
+                    <p class="message">{{ processingPopup.message }}</p>
                 </div>
             </div>
         </div>
@@ -25,7 +25,7 @@ export default {
     },
     computed: {
         ...mapGetters([
-            'isZippingFiles'
+            'processingPopup'
         ])
     }
 }
diff --git a/resources/js/components/Others/CookieDisclaimer.vue b/resources/js/components/Others/CookieDisclaimer.vue
index a082cb54..4fb50330 100644
--- a/resources/js/components/Others/CookieDisclaimer.vue
+++ b/resources/js/components/Others/CookieDisclaimer.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="cookie-wrapper" v-if="isVisibleDisclaimer && config.isSaaS">
-        <span class="close-icon">
-            <x-icon @click="closeDisclaimer" size="12"></x-icon>
+        <span @click="closeDisclaimer" class="close-icon">
+            <x-icon size="12"></x-icon>
         </span>
         <i18n path="cookie_disclaimer.description" tag="p">
             <router-link :to="{name: 'DynamicPage', params: {slug: 'cookie-policy'}}">{{ $t('cookie_disclaimer.button') }}</router-link>
diff --git a/resources/js/components/Others/SetFolderIcon.vue b/resources/js/components/Others/SetFolderIcon.vue
index 1d03e300..102c0381 100644
--- a/resources/js/components/Others/SetFolderIcon.vue
+++ b/resources/js/components/Others/SetFolderIcon.vue
@@ -87,408 +87,412 @@
 </template>
 
 <script>
-    import {SmileIcon, FolderIcon, ChevronDownIcon, XIcon} from 'vue-feather-icons'
-    import TabWrapper from '@/components/Others/TabWrapper'
-    import TabOption from '@/components/Others/TabOption'
-    import Emoji from '@/components/Others/Emoji'
-    import lodash from 'lodash'
-    import {mapGetters} from 'vuex'
-    import {events} from '@/bus'
+import { SmileIcon, FolderIcon, ChevronDownIcon, XIcon } from 'vue-feather-icons'
+import TabWrapper from '@/components/Others/TabWrapper'
+import TabOption from '@/components/Others/TabOption'
+import Emoji from '@/components/Others/Emoji'
+import lodash from 'lodash'
+import { mapGetters } from 'vuex'
+import { events } from '@/bus'
 
-    export default {
-        name: "SetFolderIcon",
-        props: ['folderData', 'unique_id'],
-        components: {
-            ChevronDownIcon ,
-            TabWrapper,
-            TabOption,
-            FolderIcon,
-            SmileIcon,
-            XIcon,
-            Emoji
+export default {
+    name: "SetFolderIcon",
+    props: ['folderData', 'unique_id'],
+    components: {
+        ChevronDownIcon ,
+        TabWrapper,
+        TabOption,
+        FolderIcon,
+        SmileIcon,
+        XIcon,
+        Emoji
+    },
+    computed: {
+        ...mapGetters(['emojis', 'emojiGroups']),
+        allEmoji() {
+            return  _.groupBy(this.emojis, 'group')                
         },
-        computed: {
-            ...mapGetters(['emojis', 'emojiGroups']),
-            allEmoji() {
-                return  _.groupBy(this.emojis,'group')                
-            },
-        },
-        data () {
-            return {
-                selectedEmoji: undefined,
-                selectedColor: undefined,
-                searchInput: '',
-                filteredEmojis: [],
-                selectOpen: false,
-                groupInView: 'Smileys & Emotion',
-                colors: ['#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', 
-                        '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
-                        '#80B300', '#809900', '#E6B3B3', '#6680B3']
-            }
-        },
-        methods: {
-            checkGroupInView: _.debounce(function() {
-
-                 this.emojiGroups.forEach(group => { 
-
-                    let element = document.getElementById(`group-${group.name}`).getBoundingClientRect()
-                    let groupBox = document.getElementById('group-box').getBoundingClientRect()
-
-                    // Check if the group is in the viewport of group-box
-                    if(element.top < groupBox.top && element.bottom > groupBox.top){
-                        this.groupInView = group.name
-                    }
-                })
-            }, 200),
-            scrollToGroup(name) {
-
-                let group = document.getElementById(`group-${name}`)
-
-                group.scrollIntoView({behavior: "smooth"})
-
-                this.groupInView = name
-            },
-            filterEmojis: _.debounce(function(emoji){
-
-               this.filteredEmojis = this.emojis.filter(emoji => emoji.name.includes(this.searchInput))
-
-            }, 800),
-            openMenu() {
-                this.selectOpen = ! this.selectOpen
-
-                this.searchInput = ''
-
-                this.groupInView = 'Smileys & Emotion'
-            },
-            setIcon(value) {
-                if(value.emoji){
-                    this.selectedEmoji = value.emoji
-                    this.selectedColor = undefined
-                }
-                    
-                if(value.color) {
-                    this.selectedColor = value.color
-                    this.selectedEmoji = undefined
-                }
-                
-                events.$emit('setFolderIcon', {'value':value, 'unique_id':this.unique_id})
-
-                this.selectOpen = false
-            },
-            resetEmoji(){
-                this.selectedEmoji = undefined
-
-                events.$emit('setFolderIcon', undefined)
-            }
-        },
-        mounted () {
-            this.selectOpen = false
-
-            events.$on('unClick', () => {
-                this.selectOpen = false
-            })
+    },
+    data () {
+        return {
+            selectedEmoji: undefined,
+            selectedColor: undefined,
+            searchInput: '',
+            filteredEmojis: [],
+            selectOpen: false,
+            groupInView: 'Smileys & Emotion',
+            colors: [ '#FF6633', '#FFB399', '#FF33FF', '#FFFF99', '#00B3E6', 
+                    '#E6B333', '#3366E6', '#999966', '#99FF99', '#B34D4D',
+                    '#80B300', '#809900', '#E6B3B3', '#6680B3' ]
         }
+    },
+    methods: {
+        checkGroupInView: _.debounce(function() {
+
+            this.emojiGroups.forEach(group => { 
+
+                let element = document.getElementById(`group-${group.name}`).getBoundingClientRect()
+                let groupBox = document.getElementById('group-box').getBoundingClientRect()
+
+                // Check if the group is in the viewport of group-box
+                if(element.top < groupBox.top && element.bottom > groupBox.top){
+                    this.groupInView = group.name
+                }
+            })
+
+        }, 200),
+        scrollToGroup( name ) {
+
+            let group = document.getElementById(`group-${name}`)
+
+            group.scrollIntoView({ behavior: "smooth" })
+
+            this.groupInView = name
+        },
+        filterEmojis: _.debounce(function( emoji ){
+
+            this.filteredEmojis = this.emojis.filter(emoji => emoji.name.includes(this.searchInput))
+
+        }, 800),
+        openMenu() {
+
+            this.selectOpen = ! this.selectOpen
+
+            this.searchInput = ''
+
+            this.groupInView = 'Smileys & Emotion'
+        },
+        setIcon( value ) {
+
+            if(value.emoji){
+                this.selectedEmoji = value.emoji
+                this.selectedColor = undefined
+            }
+                
+            if(value.color) {
+                this.selectedColor = value.color
+                this.selectedEmoji = undefined
+            }
+            
+            events.$emit('setFolderIcon', { 'value':value, 'unique_id':this.unique_id })
+
+            this.selectOpen = false
+        },
+        resetEmoji(){
+
+            this.selectedEmoji = undefined
+
+            events.$emit('setFolderIcon', undefined)
+        }
+    },
+    mounted () {
         
+        this.selectOpen = false
+
+        events.$on('unClick', () => {
+            this.selectOpen = false
+        })
     }
+}
 </script>
 
 <style scoped lang="scss">
-    @import "@assets/vue-file-manager/_inapp-forms.scss";
-    @import '@assets/vue-file-manager/_forms';
+@import "@assets/vue-file-manager/_inapp-forms.scss";
+@import '@assets/vue-file-manager/_forms';
 
-    .color-pick-wrapper {
-        .color-wrapper {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: space-between;
-            margin-bottom: 20px;
-            .single-color {
-                width: 40px;
-                height: 40px;
-                list-style: none;
-                margin: 8px;
-                border-radius: 8px;
-                cursor: pointer;
+.color-pick-wrapper {
+    .color-wrapper {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        margin-bottom: 20px;
+        .single-color {
+            width: 40px;
+            height: 40px;
+            list-style: none;
+            margin: 8px;
+            border-radius: 8px;
+            cursor: pointer;
 
-                 &.active-color {
-                    border: 2px solid $text;
-                }
+                &.active-color {
+                border: 2px solid $text;
+            }
 
-                &:hover {
-                    border: 2px solid $text;
-                }
+            &:hover {
+                border: 2px solid $text;
             }
         }
     }
+}
 
-    .select-emoji-wrapper{
-        margin-bottom: 20px;
+.select-emoji-wrapper{
+    margin-bottom: 20px;
+}
+
+.main-label {
+    @include font-size(14);
+    font-weight: 700;
+    margin-bottom: 8px;
+    display: block;
+}
+
+.emoji-wrapper {
+    height: 350px;
+    width: 100%;
+    position: absolute;
+    border: 1px solid transparent;
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
+    border-radius: 8px;
+    background: white;
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    top: 152px;
+
+    .loader {
+    width: 100%;
+    height: 100%;
+    position: relative;
     }
 
-    .main-label {
-        @include font-size(14);
-        font-weight: 700;
-        margin-bottom: 8px;
-        display: block;
-    }
+    .groups-list {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            margin-bottom: 20px;
 
-    .emoji-wrapper {
-        height: 350px;
-        width: 100%;
-        position: absolute;
-        border: 1px solid transparent;
-        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
-        border-radius: 8px;
-        background: white;
-        display: flex;
-        flex-direction: column;
-        padding: 10px;
-        top: 152px;
+            .active {
+                background: $light_background;
+                border-radius: 8px;
+            }
 
-        .loader {
-        width: 100%;
-        height: 100%;
-        position: relative;
-        }
+            .group-option {
+                list-style: none;
+                width: 45px;
+                height: 45px;
+                padding: 6px;
+                cursor: pointer;
 
-        .groups-list{
-                display: flex;
-                flex-direction: row;
-                flex-wrap: wrap;
-                margin-bottom: 20px;
-
-                .active {
+                &:hover {
                     background: $light_background;
                     border-radius: 8px;
                 }
-
-                .group-option {
-                    list-style: none;
-                    width: 45px;
-                    height: 45px;
-                    padding: 6px;
-                    cursor: pointer;
-
-                    &:hover {
-                        background: $light_background;
-                        border-radius: 8px;
-                    }
-                }
-            }
-
-        .emoji-input {
-            width: 100%;
-            border-radius: 8px;
-            padding: 4px;
-            margin-bottom: 20px;
-            background: $light_background;
-            border: none;
-            padding: 13px 20px;
-            font-weight: 700;
-
-            &::placeholder {
-                font-weight: 700;
-                color: $light_text;
             }
         }
 
-        .group-wrapper {
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            overflow: hidden;
-            overflow-y: scroll;
-            padding: 0px;
+    .emoji-input {
+        width: 100%;
+        border-radius: 8px;
+        padding: 4px;
+        margin-bottom: 20px;
+        background: $light_background;
+        border: none;
+        padding: 13px 20px;
+        font-weight: 700;
 
-            .options-wrapper {
-                display: flex;
-                flex-wrap: wrap;
-                margin-bottom: 10px;
-
-                &:last-child {
-                    margin-bottom: 0px;
-                 }
-
-                 .options-list {
-                    display: flex;
-                    flex-wrap: wrap;
-                    justify-content: center;
-                 }
-                
-                .group-name-label {
-                    width: 100%;
-                    @include font-size(14);
-                    font-weight: 700;
-                    margin-bottom: 10px;
-                }
-
-                 .option {
-                    list-style: none;
-                    width: 45px;
-                    height: 45px;
-                    padding: 6px;
-                    cursor: pointer;
-
-                    &:hover {
-                        background: $light_background;
-                        border-radius: 8px;
-                    }
-                }
-
-                 .not-found {
-                    align-self: center;
-                    margin:auto;
-                    font-weight: 700;
-                    padding: 10px;
-                    border-radius: 8px;
-                    background:$light_background ;
-                    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
-                }
-            }
-
-           
+        &::placeholder {
+            font-weight: 700;
+            color: $light_text;
         }
     }
-    
-    .select-input-wrapper{
-        height: 50px;
-        padding: 13px 20px;
-        border: 1px solid transparent;
-        border-radius: 8px;
-        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
-        cursor: pointer;
+
+    .group-wrapper {
+        height: 100%;
         display: flex;
-        justify-content: space-between;
-        align-items: center;
+        flex-direction: column;
+        overflow: hidden;
+        overflow-y: scroll;
+        padding: 0px;
 
-        .select-input-icon-wrapper {
-            width: 22px;
-            height: 22px;
-            border-radius: 6px;
+        .options-wrapper {
             display: flex;
-            justify-content: center;
-            align-items: center;
-            &:hover {
-                background: $light_background !important;
+            flex-wrap: wrap;
+            margin-bottom: 10px;
 
-                .select-input-icon {
-                    line {
-                    stroke: $theme;
-                    }
+            &:last-child {
+                margin-bottom: 0px;
                 }
-            }            
+
+                .options-list {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: center;
+                }
+            
+            .group-name-label {
+                width: 100%;
+                @include font-size(14);
+                font-weight: 700;
+                margin-bottom: 10px;
+            }
+
+                .option {
+                list-style: none;
+                width: 45px;
+                height: 45px;
+                padding: 6px;
+                cursor: pointer;
+
+                &:hover {
+                    background: $light_background;
+                    border-radius: 8px;
+                }
+            }
+
+                .not-found {
+                align-self: center;
+                margin:auto;
+                font-weight: 700;
+                padding: 10px;
+                border-radius: 8px;
+                background:$light_background ;
+                box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
+            }
+        }
+
+        
+    }
+}
+
+.select-input-wrapper {
+    height: 50px;
+    padding: 13px 20px;
+    border: 1px solid transparent;
+    border-radius: 8px;
+    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
+    cursor: pointer;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .select-input-icon-wrapper {
+        width: 22px;
+        height: 22px;
+        border-radius: 6px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        &:hover {
+            background: $light_background !important;
 
             .select-input-icon {
                 line {
-                stroke: $text;
+                stroke: $theme;
+                }
+            }
+        }            
+
+        .select-input-icon {
+            line {
+            stroke: $text;
+            }
+        }
+    }
+
+    .select-input {
+        @include font-size(16);
+        font-weight: 700;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+
+        .emoji-preview {
+            margin-right: 10px;
+        }
+    }
+
+    .not-selected {
+        span {
+            color: rgba($text, 0.5);
+            @include font-size(15);
+            font-weight: 700
+        }
+    }
+}
+
+.wrapper {
+    margin-bottom: 10px;
+}
+
+
+.set-folder-icon {
+    position: relative;
+}
+
+    .slide-in-enter-active {
+    transition: all 5s ease;
+}
+
+.slide-in-enter
+{
+    opacity: 0;
+    transform: translateY(-50px);
+}
+
+@media (prefers-color-scheme: dark) {
+    .color-pick-wrapper{
+        .color-wrapper{
+            .single-color {
+                &.active-color {
+                    border: 2px solid ;
+                }
+                &:hover {
+                    border: 2px solid $dark_mode_text_primary;
+                }  
+            }
+        }
+    }
+
+    .emoji-wrapper {
+        background: $dark_mode_background;
+        .emoji-input {
+            background: $dark_mode_foreground ;
+        }
+        .groups-list{
+            .active{
+                background: $dark_mode_foreground !important;
+            }
+            .group-option {
+                    &:hover {
+                    background: $dark_mode_foreground !important;
                 }
             }
         }
-
-        .select-input {
-            @include font-size(16);
-            font-weight: 700;
-            display: flex;
-            flex-direction: row;
-            align-items: center;
-
-            .emoji-preview {
-                margin-right: 10px;
+        .options-wrapper {
+            .option {
+                &:hover {
+                    background: $dark_mode_foreground !important;
+                }
+            }
+            .not-found {
+                background: $dark_mode_foreground !important;
             }
         }
+    }
 
+    .select-input-wrapper {
+        background: $dark_mode_foreground;
         .not-selected {
             span {
-                color: rgba($text, 0.5);
-                @include font-size(15);
-                font-weight: 700
+                color:$dark_mode_text_secondary;
             }
         }
-    }
-
-    .wrapper {
-        margin-bottom: 10px;
-    }
-
-
-    .set-folder-icon {
-        position: relative;
-    }
-
-     .slide-in-enter-active {
-        transition: all 5s ease;
-    }
-
-    .slide-in-enter
-    {
-        opacity: 0;
-        transform: translateY(-50px);
-    }
-
-    @media (prefers-color-scheme: dark) {
-        .color-pick-wrapper{
-            .color-wrapper{
-                .single-color {
-                    &.active-color {
-                        border: 2px solid ;
-                    }
-                    &:hover {
-                        border: 2px solid $dark_mode_text_primary;
-                    }  
-                }
-            }
-        }
-
-        .emoji-wrapper {
-            background: $dark_mode_background;
-            .emoji-input {
-                background: $dark_mode_foreground ;
-            }
-            .groups-list{
-                .active{
-                    background: $dark_mode_foreground !important;
-                }
-                .group-option {
-                     &:hover {
-                        background: $dark_mode_foreground !important;
-                    }
-                }
-            }
-            .options-wrapper {
-                .option {
-                    &:hover {
-                        background: $dark_mode_foreground !important;
-                    }
-                }
-                .not-found {
-                    background: $dark_mode_foreground !important;
-                }
-            }
-        }
-
-        .select-input-wrapper {
-            background: $dark_mode_foreground;
-            .not-selected {
-                span {
-                    color:$dark_mode_text_secondary;
-                }
-            }
-            .select-input-icon-wrapper {
-                &:hover {
-                    background: rgba($theme, 0.1) !important;
-                    .select-input-icon {
-                        line {
-                            stroke: $theme !important;
-                        }
-                    }
-                }
+        .select-input-icon-wrapper {
+            &:hover {
+                background: rgba($theme, 0.1) !important;
                 .select-input-icon {
                     line {
-                        stroke:$dark_mode_text_primary !important;
+                        stroke: $theme !important;
                     }
-                }            
+                }
             }
+            .select-input-icon {
+                line {
+                    stroke:$dark_mode_text_primary !important;
+                }
+            }            
         }
     }
+}
 
 </style>
diff --git a/resources/js/components/Others/TabWrapper.vue b/resources/js/components/Others/TabWrapper.vue
index f6c892b0..0e60b1e7 100644
--- a/resources/js/components/Others/TabWrapper.vue
+++ b/resources/js/components/Others/TabWrapper.vue
@@ -61,10 +61,11 @@
         margin-bottom: 20px;
         cursor: pointer;
         align-items: center;
-        background: $light_background;
+        background: white;
         color: $text;
         border-radius: 8px;
         overflow: hidden;
+        border: 1px solid #E8E9EB;
 
         .tab-title {
             @include font-size(14);
@@ -78,10 +79,10 @@
             padding: 8px;
 
             &.active {
-                background: $text;
+                background: $light_background;
 
                 .tab-title {
-                    color: $light_background;
+                    color: $text;
                 }
             }
         }
@@ -101,6 +102,7 @@
     @media (prefers-color-scheme: dark) {
         .tab-wrapper {
             background: $dark_mode_foreground;
+            border-color: transparent;
 
             .tab.active {
                 background: rgba($theme, 0.1);
diff --git a/resources/js/components/Others/Vignette.vue b/resources/js/components/Others/Vignette.vue
index 1b8528ee..7b32d207 100644
--- a/resources/js/components/Others/Vignette.vue
+++ b/resources/js/components/Others/Vignette.vue
@@ -12,10 +12,10 @@
         name: 'Vignette',
         computed: {
             ...mapGetters([
-                'isZippingFiles'
+                'processingPopup'
             ]),
             isVisible() {
-                return this.isZippingFiles || this.isVisibleVignette
+                return this.processingPopup || this.isVisibleVignette
             },
         },
         data() {
diff --git a/resources/js/i18n/lang/cn.json b/resources/js/i18n/lang/cn.json
index cb9ba735..9f4b2ab9 100644
--- a/resources/js/i18n/lang/cn.json
+++ b/resources/js/i18n/lang/cn.json
@@ -284,7 +284,7 @@
 		"upload": "上传",
 		"select": "Select",
 		"no_options": "No Options Available",
-		"zip_folder": "Zip Folder"
+		"zip_folder": "Zip and Download"
 	},
 	"mobile_selecting": {
 		"select_all": "Select All",
diff --git a/resources/js/i18n/lang/en.json b/resources/js/i18n/lang/en.json
index ab04695a..04e0ea08 100644
--- a/resources/js/i18n/lang/en.json
+++ b/resources/js/i18n/lang/en.json
@@ -286,7 +286,7 @@
 		"upload": "Upload",
 		"select": "Select",
 		"no_options": "No Options Available",
-		"zip_folder": "Zip Folder"
+		"zip_folder": "Zip and Download"
 	},
 	"mobile_selecting": {
 		"select_all": "Select All",
@@ -308,9 +308,9 @@
 		"paginate_info": "Showing 1 - {visible} from {total} records"
 	},
 	"empty_page": {
-		"call_to_action": "Upload File",
-		"description": "Upload some files here easily via upload button",
-		"title": "There is Nothing"
+		"call_to_action": "Upload Files",
+		"description": "Upload some files here easily via upload button.",
+		"title": "Upload Your First File"
 	},
 	"errors": {
 		"capacity_digit": "The storage capacity must be lower than 10 digit number."
diff --git a/resources/js/main.js b/resources/js/main.js
index d1c70a4c..8fff57fa 100644
--- a/resources/js/main.js
+++ b/resources/js/main.js
@@ -90,8 +90,9 @@ Vue.use(Helpers);
 Vue.config.productionTip = false;
 
 // Handle position of Drag & Drop Ghost
-document.addEventListener('drag', (event) => {
+document.addEventListener('drag', event => {
   let multiSelect = document.getElementById('multi-select-ui')
+
   multiSelect.style.top = event.clientY + 20 + 'px'
   multiSelect.style.left = event.clientX + 'px'
 
diff --git a/resources/js/store/modules/app.js b/resources/js/store/modules/app.js
index 6a0b0e90..fac574c8 100644
--- a/resources/js/store/modules/app.js
+++ b/resources/js/store/modules/app.js
@@ -1,7 +1,7 @@
 import i18n from '@/i18n/index'
 
 const defaultState = {
-	fileInfoPanelVisible: localStorage.getItem('file_info_visibility') == 'true' || false,
+	fileInfoPanelVisible: localStorage.getItem('file_info_visibility') == 'true' || true,
 	FilePreviewType: localStorage.getItem('preview_type') || 'list',
 	config: undefined,
 	index: undefined,
diff --git a/resources/js/store/modules/fileFunctions.js b/resources/js/store/modules/fileFunctions.js
index ed67ca76..731b3a0f 100644
--- a/resources/js/store/modules/fileFunctions.js
+++ b/resources/js/store/modules/fileFunctions.js
@@ -6,13 +6,16 @@ import axios from 'axios'
 import Vue from 'vue'
 
 const defaultState = {
-	isZippingFiles: false,
+	processingPopup: undefined,
 }
 
 const actions = {
 	downloadFolder: ({commit, getters}, folder) => {
 
-		commit('ZIPPING_FILE_STATUS', true)
+		commit('PROCESSING_POPUP', {
+			title: i18n.t('popup_zipping.title'),
+			message: i18n.t('popup_zipping.message'),
+		})
 
 		// Get route
 		let route = getters.sharedDetail && !getters.sharedDetail.protected
@@ -27,7 +30,7 @@ const actions = {
 			Vue.prototype.$isSomethingWrong()
 		})
 		.finally(() => {
-			commit('ZIPPING_FILE_STATUS', false)
+			commit('PROCESSING_POPUP', undefined)
 		})
 
 	},
@@ -379,13 +382,13 @@ const actions = {
 }
 
 const mutations = {
-	ZIPPING_FILE_STATUS(state, status) {
-		state.isZippingFiles = status
+	PROCESSING_POPUP(state, status) {
+		state.processingPopup = status
 	}
 }
 
 const getters = {
-	isZippingFiles: state => state.isZippingFiles
+	processingPopup: state => state.processingPopup
 }
 
 export default {
diff --git a/resources/js/store/modules/userAuth.js b/resources/js/store/modules/userAuth.js
index 4b9ea5b5..0185c44d 100644
--- a/resources/js/store/modules/userAuth.js
+++ b/resources/js/store/modules/userAuth.js
@@ -39,11 +39,18 @@ const actions = {
         })
     },
     logOut: ({getters, commit}) => {
+
+        let popup = setTimeout(() => {
+            commit('PROCESSING_POPUP', {
+                title: 'Logging Out',
+                message: 'Wait a second...',
+            })
+        }, 300)
+
         axios
             .get(getters.api + '/logout')
             .then(() => {
-
-                // Commit Remove Access Token from vuex storage
+                clearTimeout(popup)
                 commit('DESTROY_DATA')
 
                 router.push({name: 'SignIn'})
diff --git a/resources/js/views/Auth/SignIn.vue b/resources/js/views/Auth/SignIn.vue
index b56c92b2..bc60fc48 100644
--- a/resources/js/views/Auth/SignIn.vue
+++ b/resources/js/views/Auth/SignIn.vue
@@ -208,6 +208,7 @@
         },
         created() {
             this.$scrollTop()
+            this.$store.commit('PROCESSING_POPUP', undefined)
         }
     }
 </script>
diff --git a/resources/js/views/FilePages/Files.vue b/resources/js/views/FilePages/Files.vue
index adaa4961..2b49f8be 100644
--- a/resources/js/views/FilePages/Files.vue
+++ b/resources/js/views/FilePages/Files.vue
@@ -188,18 +188,6 @@ export default {
         events.$on('drop', () => {
             this.dragInProgress = false
         })
-    },
-    beforeRouteLeave(to, from, next) {
-        // Inquire user about his willing to step back to sign in page
-        if (to.name === 'SignIn') {
-            if (window.confirm(this.$t('alerts.leave_to_sign_in'))) {
-                next()
-            } else {
-                next(false)
-            }
-        } else {
-            next()
-        }
     }
 }
 </script>