diff --git a/.gitignore b/.gitignore
index aa9e9758..466f8b55 100644
--- a/.gitignore
+++ b/.gitignore
@@ -11,8 +11,10 @@
 .env.backup
 .phpunit.result.cache
 .phpstorm.meta.php
+.vscode/
 _ide_helper.php
 Homestead.json
 Homestead.yaml
 npm-debug.log
 yarn-error.log
+prettier.json
diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index c05f44e7..3b29db0c 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,11 +1,11 @@
 {
     "/js/main.js": "/js/main.js",
     "/css/app.css": "/css/app.css",
-    "/js/main.1e37c7b25acd36f7eda9.hot-update.js": "/js/main.1e37c7b25acd36f7eda9.hot-update.js",
-    "/js/main.8dba352fe9551e10fe92.hot-update.js": "/js/main.8dba352fe9551e10fe92.hot-update.js",
-    "/js/main.2067a539e7fd47de9e8b.hot-update.js": "/js/main.2067a539e7fd47de9e8b.hot-update.js",
-    "/js/main.2f57ea87830cf952c235.hot-update.js": "/js/main.2f57ea87830cf952c235.hot-update.js",
-    "/js/main.8f99a2048dd222012eea.hot-update.js": "/js/main.8f99a2048dd222012eea.hot-update.js",
-    "/js/main.dc3de7faec7bd4b74e73.hot-update.js": "/js/main.dc3de7faec7bd4b74e73.hot-update.js",
-    "/js/main.abe8591d01cb790f28ef.hot-update.js": "/js/main.abe8591d01cb790f28ef.hot-update.js"
+    "/js/main.972096550c1a7f368735.hot-update.js": "/js/main.972096550c1a7f368735.hot-update.js",
+    "/js/main.f5bdb077ae008261b7cc.hot-update.js": "/js/main.f5bdb077ae008261b7cc.hot-update.js",
+    "/js/main.f5271b849a9afac1ca3e.hot-update.js": "/js/main.f5271b849a9afac1ca3e.hot-update.js",
+    "/js/main.cd26f566c89e3ea7d999.hot-update.js": "/js/main.cd26f566c89e3ea7d999.hot-update.js",
+    "/js/main.ec8883e3bc6200937b70.hot-update.js": "/js/main.ec8883e3bc6200937b70.hot-update.js",
+    "/js/main.86422d63264ce98aedc4.hot-update.js": "/js/main.86422d63264ce98aedc4.hot-update.js",
+    "/js/main.c73a3d4490ae4ef2ccb0.hot-update.js": "/js/main.c73a3d4490ae4ef2ccb0.hot-update.js"
 }
diff --git a/resources/js/components/FilesView/FileFullPreview.vue b/resources/js/components/FilesView/FileFullPreview.vue
index e77cb888..c709f804 100644
--- a/resources/js/components/FilesView/FileFullPreview.vue
+++ b/resources/js/components/FilesView/FileFullPreview.vue
@@ -1,97 +1,94 @@
 <template>
-  <div
-    class="file-full-preview-wrapper"
-    v-if="showFullPreview"
-    id="fileFullPreview"
-    ref="filePreview"
-    tabindex="-1"
-     @click="closeContextMenu"
-    @keydown.esc="(showFullPreview = false), hideMenu()"
-    @keydown.right="next"
-    @keydown.left="prev"
-  >
-    <FilePreviewNavigationPanel />
-    <MediaFullPreview v-if="isMedia" />
-    <FilePreviewActions  />
-  </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 { events } from "@/bus";
-import { mapGetters } from "vuex";
+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";
+import MediaFullPreview from '@/components/FilesView/MediaFullPreview'
+import FilePreviewActions from '@/components/FilesView/FilePreviewActions'
+import FilePreviewNavigationPanel from '@/components/FilesView/FilePreviewNavigationPanel'
 
 export default {
-  components: {
-    MediaFullPreview,
-    FilePreviewNavigationPanel,
-    FilePreviewActions,
-  },
-  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");
-    },
-    hideMenu() {
-      events.$emit("showContextMenuPreview:hide");
-    },
-  },
+	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() {
-    if (this.showFullPreview) {
-      this.$refs.filePreview.focus();
-    }
-  },
-  computed: {
-    ...mapGetters(["fileInfoDetail" , "data"]),
-    isMedia() {
-      return this.fileInfoDetail === "image" || "video" || "audio";
-    },
-    
-  },
-
-  mounted() {
-    events.$on("fileFullPreview:show", () => {
-      this.showFullPreview = true;
-    });
-    events.$on("fileFullPreview:hide", () => {
-      this.showFullPreview = false;
-    });
-  },
-};
+	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
+		})
+	}
+}
 </script>
 
 <style lang="scss" scoped>
-@import "@assets/vue-file-manager/_variables";
+@import '@assets/vue-file-manager/_variables';
 
 .file-full-preview-wrapper {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  z-index: 7;
-  background-color: white;
+	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;
-  }
+	.file-full-preview-wrapper {
+		background-color: $dark_mode_background;
+	}
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/resources/js/components/FilesView/FileItemList.vue b/resources/js/components/FilesView/FileItemList.vue
index cc274eb4..67566250 100644
--- a/resources/js/components/FilesView/FileItemList.vue
+++ b/resources/js/components/FilesView/FileItemList.vue
@@ -1,520 +1,459 @@
 <template>
-  <div
-    class="file-wrapper"
-    @click.stop="clickedItem"
-    @dblclick="goToItem"
-    spellcheck="false"
-  >
-    <!--List preview-->
-    <div
-      :draggable="canDrag"
-      @dragstart="$emit('dragstart')"
-      @drop="
-        $emit('drop');
-        area = false;
-      "
-      @dragleave="dragLeave"
-      @dragover.prevent="dragEnter"
-      class="file-item"
-      :class="{ 'is-clicked': isClicked, 'is-dragenter': area }"
-    >
-      <!--Thumbnail for item-->
-      <div class="icon-item">
-        <!--If is file or image, then link item-->
-        <span v-if="isFile" class="file-icon-text">
-          {{ data.mimetype | limitCharacters }}
-        </span>
+	<div class="file-wrapper" @click.stop="clickedItem" @dblclick="goToItem" spellcheck="false">
+		<!--List preview-->
+		<div
+			:draggable="canDrag"
+			@dragstart="$emit('dragstart')"
+			@drop="
+				$emit('drop')
+				area = false
+			"
+			@dragleave="dragLeave"
+			@dragover.prevent="dragEnter"
+			class="file-item"
+			:class="{ 'is-clicked': isClicked, 'is-dragenter': area }"
+		>
+			<!--Thumbnail for item-->
+			<div class="icon-item">
+				<!--If is file or image, then link item-->
+				<span v-if="isFile" class="file-icon-text">
+					{{ data.mimetype | limitCharacters }}
+				</span>
 
-        <!--Folder thumbnail-->
-        <FontAwesomeIcon v-if="isFile" class="file-icon" icon="file" />
+				<!--Folder thumbnail-->
+				<FontAwesomeIcon v-if="isFile" class="file-icon" icon="file" />
 
-        <!--Image thumbnail-->
-        <img
-          v-if="isImage"
-          class="image"
-          :src="data.thumbnail"
-          :alt="data.name"
-        />
+				<!--Image thumbnail-->
+				<img v-if="isImage" class="image" :src="data.thumbnail" :alt="data.name" />
 
-        <!--Else show only folder icon-->
-        <FontAwesomeIcon
-          v-if="isFolder"
-          :class="{ 'is-deleted': isDeleted }"
-          class="folder-icon"
-          icon="folder"
-        />
-      </div>
+				<!--Else show only folder icon-->
+				<FontAwesomeIcon v-if="isFolder" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder" />
+			</div>
 
-      <!--Name-->
-      <div class="item-name">
-        <!--Name-->
-        <b
-          ref="name"
-          @input="renameItem"
-          :contenteditable="canEditName"
-          class="name"
-        >
-          {{ itemName }}
-        </b>
+			<!--Name-->
+			<div class="item-name">
+				<!--Name-->
+				<b ref="name" @input="renameItem" :contenteditable="canEditName" class="name">
+					{{ itemName }}
+				</b>
 
-        <div class="item-info">
-          <!--Shared Icon-->
-          <div
-            v-if="$checkPermission('master') && data.shared"
-            class="item-shared"
-          >
-            <link-icon size="12" class="shared-icon"></link-icon>
-          </div>
+				<div class="item-info">
+					<!--Shared Icon-->
+					<div v-if="$checkPermission('master') && data.shared" class="item-shared">
+						<link-icon size="12" class="shared-icon"></link-icon>
+					</div>
 
-          <!--Participant owner Icon-->
-          <div
-            v-if="$checkPermission('master') && data.user_scope !== 'master'"
-            class="item-shared"
-          >
-            <user-plus-icon size="12" class="shared-icon"></user-plus-icon>
-          </div>
+					<!--Participant owner Icon-->
+					<div v-if="$checkPermission('master') && data.user_scope !== 'master'" class="item-shared">
+						<user-plus-icon size="12" class="shared-icon"></user-plus-icon>
+					</div>
 
-          <!--Filesize and timestamp-->
-          <span v-if="!isFolder" class="item-size"
-            >{{ data.filesize }}, {{ timeStamp }}</span
-          >
+					<!--Filesize and timestamp-->
+					<span v-if="!isFolder" class="item-size">{{ data.filesize }}, {{ timeStamp }}</span>
 
-          <!--Folder item counts-->
-          <span v-if="isFolder" class="item-length">
-            {{
-              folderItems == 0
-                ? $t("folder.empty")
-                : $tc("folder.item_counts", folderItems)
-            }}, {{ timeStamp }}
-          </span>
-        </div>
-      </div>
+					<!--Folder item counts-->
+					<span v-if="isFolder" class="item-length"> {{ folderItems == 0 ? $t('folder.empty') : $tc('folder.item_counts', folderItems) }}, {{ timeStamp }} </span>
+				</div>
+			</div>
 
-      <!--Go Next icon-->
-      <div
-        class="actions"
-        v-if="$isMobile() && !($checkPermission('visitor') && isFolder)"
-      >
-        <span @click.stop="showItemActions" class="show-actions">
-          <FontAwesomeIcon
-            icon="ellipsis-v"
-            class="icon-action"
-          ></FontAwesomeIcon>
-        </span>
-      </div>
-    </div>
-  </div>
+			<!--Go Next icon-->
+			<div class="actions" v-if="$isMobile() && !($checkPermission('visitor') && isFolder)">
+				<span @click.stop="showItemActions" class="show-actions">
+					<FontAwesomeIcon icon="ellipsis-v" class="icon-action"></FontAwesomeIcon>
+				</span>
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
-import { LinkIcon, UserPlusIcon } from "vue-feather-icons";
-import { debounce } from "lodash";
-import { mapGetters } from "vuex";
-import { events } from "@/bus";
+import { LinkIcon, UserPlusIcon } from 'vue-feather-icons'
+import { debounce } from 'lodash'
+import { mapGetters } from 'vuex'
+import { events } from '@/bus'
 
 export default {
-  name: "FileItemList",
-  props: ["data"],
-  components: {
-    UserPlusIcon,
-    LinkIcon,
-  },
-  computed: {
-    ...mapGetters(["FilePreviewType"]),
-    isFolder() {
-      return this.data.type === "folder";
-    },
-    isFile() {
-      return this.data.type !== "folder" && this.data.type !== "image";
-    },
-    isImage() {
-      return this.data.type === "image";
-    },
-    isPdf() {
-      return this.data.mimetype === "pdf";
-    },
-    isVideo() {
-      return this.data.type === "video";
-    },
-    isAudio() {
-      let mimetypes = ['mpeg' , "mp3" , 'mp4', 'wan' ,'flac'];
-      return (
-        mimetypes.includes(this.data.mimetype) && this.data.type === 'audio'
-      );
-    },
-    canEditName() {
-      return (
-        !this.$isMobile() &&
-        !this.$isThisLocation(["trash", "trash-root"]) &&
-        !this.$checkPermission("visitor") &&
-        !(this.sharedDetail && this.sharedDetail.type === "file")
-      );
-    },
-    canDrag() {
-      return !this.isDeleted && this.$checkPermission(["master", "editor"]);
-    },
-    timeStamp() {
-      return this.data.deleted_at
-        ? this.$t("item_thumbnail.deleted_at", { time: this.data.deleted_at })
-        : this.data.created_at;
-    },
-    folderItems() {
-      return this.data.deleted_at ? this.data.trashed_items : this.data.items;
-    },
-    isDeleted() {
-      return this.data.deleted_at ? true : false;
-    },
-  },
-  filters: {
-    limitCharacters(str) {
-      if (str.length > 3) {
-        return str.substring(0, 3) + "...";
-      } else {
-        return str.substring(0, 3);
-      }
-    },
-  },
-  data() {
-    return {
-      isClicked: false,
-      area: false,
-      itemName: undefined,
-    };
-  },
-  methods: {
-    showItemActions() {
-      // Load file info detail
-      this.$store.commit("GET_FILEINFO_DETAIL", this.data);
+	name: 'FileItemList',
+	props: ['data'],
+	components: {
+		UserPlusIcon,
+		LinkIcon
+	},
+	computed: {
+		...mapGetters(['FilePreviewType']),
+		isFolder() {
+			return this.data.type === 'folder'
+		},
+		isFile() {
+			return this.data.type !== 'folder' && this.data.type !== 'image'
+		},
+		isImage() {
+			return this.data.type === 'image'
+		},
+		isPdf() {
+			return this.data.mimetype === 'pdf'
+		},
+		isVideo() {
+			return this.data.type === 'video'
+		},
+		isAudio() {
+			let mimetypes = ['mpeg', 'mp3', 'mp4', 'wan', 'flac']
+			return mimetypes.includes(this.data.mimetype) && this.data.type === 'audio'
+		},
+		canEditName() {
+			return !this.$isMobile() && !this.$isThisLocation(['trash', 'trash-root']) && !this.$checkPermission('visitor') && !(this.sharedDetail && this.sharedDetail.type === 'file')
+		},
+		canDrag() {
+			return !this.isDeleted && this.$checkPermission(['master', 'editor'])
+		},
+		timeStamp() {
+			return this.data.deleted_at ? this.$t('item_thumbnail.deleted_at', { time: this.data.deleted_at }) : this.data.created_at
+		},
+		folderItems() {
+			return this.data.deleted_at ? this.data.trashed_items : this.data.items
+		},
+		isDeleted() {
+			return this.data.deleted_at ? true : false
+		}
+	},
+	filters: {
+		limitCharacters(str) {
+			if (str.length > 3) {
+				return str.substring(0, 3) + '...'
+			} else {
+				return str.substring(0, 3)
+			}
+		}
+	},
+	data() {
+		return {
+			isClicked: false,
+			area: false,
+			itemName: undefined
+		}
+	},
+	methods: {
+		showItemActions() {
+			// Load file info detail
+			this.$store.commit('GET_FILEINFO_DETAIL', this.data)
 
-      //this.isClicked = true
+			//this.isClicked = true
 
-      events.$emit("mobileMenu:show");
-    },
-    dragEnter() {
-      if (this.data.type !== "folder") return;
+			events.$emit('mobileMenu:show')
+		},
+		dragEnter() {
+			if (this.data.type !== 'folder') return
 
-      this.area = true;
-    },
-    dragLeave() {
-      this.area = false;
-    },
-    clickedItem(e) {
-      events.$emit("contextMenu:hide");
-      events.$emit("fileItem:deselect");
+			this.area = true
+		},
+		dragLeave() {
+			this.area = false
+		},
+		clickedItem(e) {
+			events.$emit('contextMenu:hide')
+			events.$emit('fileItem:deselect')
 
-      // Set clicked item
-      this.isClicked = true;
+			// Set clicked item
+			this.isClicked = true
 
-      // Open in mobile version on first click
-      if (this.$isMobile() && this.isFolder) {
-        // Go to folder
-        if (this.$isThisLocation("public")) {
-          this.$store.dispatch("browseShared", [
-            { folder: this.data, back: false, init: false },
-          ]);
-        } else {
-          this.$store.dispatch("getFolder", [
-            { folder: this.data, back: false, init: false },
-          ]);
-        }
-      }
+			// Open in mobile version on first click
+			if (this.$isMobile() && this.isFolder) {
+				// Go to folder
+				if (this.$isThisLocation('public')) {
+					this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
+				} else {
+					this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }])
+				}
+			}
 
-      if (this.$isMobile()) {
-        if (this.isImage || this.isVideo || this.isAudio) {
-          events.$emit("fileFullPreview:show");
-        }
-      }
+			if (this.$isMobile()) {
+				if (this.isImage || this.isVideo || this.isAudio) {
+					events.$emit('fileFullPreview:show')
+				}
+			}
 
-      // Load file info detail
-      this.$store.commit("GET_FILEINFO_DETAIL", this.data);
+			// Load file info detail
+			this.$store.commit('GET_FILEINFO_DETAIL', this.data)
 
-      // Get target classname
-      let itemClass = e.target.className;
+			// Get target classname
+			let itemClass = e.target.className
 
-      if (["name", "icon", "file-link", "file-icon-text"].includes(itemClass))
-        return;
-    },
-    goToItem() {
-      if (this.isImage || this.isVideo || this.isAudio) {
-        // this.$openImageOnNewTab(this.data.file_url)
-        events.$emit("fileFullPreview:show");
-      }
+			if (['name', 'icon', 'file-link', 'file-icon-text'].includes(itemClass)) return
+		},
+		goToItem() {
+			if (this.isImage || this.isVideo || this.isAudio) {
+				// this.$openImageOnNewTab(this.data.file_url)
+				events.$emit('fileFullPreview:show')
+			}
 
-      if (this.isFile && !this.isPdf && !this.isVideo && !this.isAudio) {
-        this.$downloadFile(
-          this.data.file_url,
-          this.data.name + "." + this.data.mimetype
-        );
-      }
+			if (this.isFile && !this.isPdf && !this.isVideo && !this.isAudio) {
+				this.$downloadFile(this.data.file_url, this.data.name + '.' + this.data.mimetype)
+			}
 
-      if (this.isFolder) {
-        if (this.$isThisLocation("public")) {
-          this.$store.dispatch("browseShared", [
-            { folder: this.data, back: false, init: false },
-          ]);
-        } else {
-          this.$store.dispatch("getFolder", [
-            { folder: this.data, back: false, init: false },
-          ]);
-        }
-      }
-    },
-    renameItem: debounce(function (e) {
-      // Prevent submit empty string
-      if (e.target.innerText.trim() === "") return;
+			if (this.isFolder) {
+				if (this.$isThisLocation('public')) {
+					this.$store.dispatch('browseShared', [{ folder: this.data, back: false, init: false }])
+				} else {
+					this.$store.dispatch('getFolder', [{ folder: this.data, back: false, init: false }])
+				}
+			}
+		},
+		renameItem: debounce(function(e) {
+			// Prevent submit empty string
+			if (e.target.innerText.trim() === '') return
 
-      this.$store.dispatch("renameItem", {
-        unique_id: this.data.unique_id,
-        type: this.data.type,
-        name: e.target.innerText,
-      });
-    }, 300),
-  },
-  created() {
-    this.itemName = this.data.name;
+			this.$store.dispatch('renameItem', {
+				unique_id: this.data.unique_id,
+				type: this.data.type,
+				name: e.target.innerText
+			})
+		}, 300)
+	},
+	created() {
+		this.itemName = this.data.name
 
-    events.$on("fileItem:deselect", () => {
-      // Deselect file
-      this.isClicked = false;
-    });
+		events.$on('fileItem:deselect', () => {
+			// Deselect file
+			this.isClicked = false
+		})
 
-    // Change item name
-    events.$on("change:name", (item) => {
-      if (this.data.unique_id == item.unique_id) this.itemName = item.name;
-    });
-  },
-};
+		// Change item name
+		events.$on('change:name', (item) => {
+			if (this.data.unique_id == item.unique_id) this.itemName = item.name
+		})
+	}
+}
 </script>
 
 <style scoped lang="scss">
-@import "@assets/vue-file-manager/_variables";
-@import "@assets/vue-file-manager/_mixins";
+@import '@assets/vue-file-manager/_variables';
+@import '@assets/vue-file-manager/_mixins';
 
 .file-wrapper {
-  user-select: none;
-  position: relative;
+	user-select: none;
+	position: relative;
 
-  &:hover {
-    border-color: transparent;
-  }
+	&:hover {
+		border-color: transparent;
+	}
 
-  .actions {
-    text-align: right;
-    width: 50px;
+	.actions {
+		text-align: right;
+		width: 50px;
 
-    .show-actions {
-      cursor: pointer;
-      padding: 12px 6px 12px;
+		.show-actions {
+			cursor: pointer;
+			padding: 12px 6px 12px;
 
-      .icon-action {
-        @include font-size(14);
+			.icon-action {
+				@include font-size(14);
 
-        path {
-          fill: $theme;
-        }
-      }
-    }
-  }
+				path {
+					fill: $theme;
+				}
+			}
+		}
+	}
 
-  .item-name {
-    display: block;
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
+	.item-name {
+		display: block;
+		width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
 
-    .item-info {
-      display: block;
-      line-height: 1;
-    }
+		.item-info {
+			display: block;
+			line-height: 1;
+		}
 
-    .item-shared {
-      display: inline-block;
+		.item-shared {
+			display: inline-block;
 
-      .label {
-        @include font-size(12);
-        font-weight: 400;
-        color: $theme;
-      }
+			.label {
+				@include font-size(12);
+				font-weight: 400;
+				color: $theme;
+			}
 
-      .shared-icon {
-        vertical-align: middle;
+			.shared-icon {
+				vertical-align: middle;
 
-        path,
-        circle,
-        line {
-          stroke: $theme;
-        }
-      }
-    }
+				path,
+				circle,
+				line {
+					stroke: $theme;
+				}
+			}
+		}
 
-    .item-size,
-    .item-length {
-      @include font-size(11);
-      font-weight: 400;
-      color: rgba($text, 0.7);
-    }
+		.item-size,
+		.item-length {
+			@include font-size(11);
+			font-weight: 400;
+			color: rgba($text, 0.7);
+		}
 
-    .name {
-      white-space: nowrap;
+		.name {
+			white-space: nowrap;
 
-      &[contenteditable] {
-        -webkit-user-select: text;
-        user-select: text;
-      }
+			&[contenteditable] {
+				-webkit-user-select: text;
+				user-select: text;
+			}
 
-      &[contenteditable="true"]:hover {
-        text-decoration: underline;
-      }
-    }
+			&[contenteditable='true']:hover {
+				text-decoration: underline;
+			}
+		}
 
-    .name {
-      color: $text;
-      @include font-size(14);
-      font-weight: 700;
-      max-height: 40px;
-      overflow: hidden;
-      text-overflow: ellipsis;
+		.name {
+			color: $text;
+			@include font-size(14);
+			font-weight: 700;
+			max-height: 40px;
+			overflow: hidden;
+			text-overflow: ellipsis;
 
-      &.actived {
-        max-height: initial;
-      }
-    }
-  }
+			&.actived {
+				max-height: initial;
+			}
+		}
+	}
 
-  &.selected {
-    .file-item {
-      background: $light_background;
-    }
-  }
+	&.selected {
+		.file-item {
+			background: $light_background;
+		}
+	}
 
-  .icon-item {
-    text-align: center;
-    position: relative;
-    flex: 0 0 50px;
-    line-height: 0;
-    margin-right: 20px;
+	.icon-item {
+		text-align: center;
+		position: relative;
+		flex: 0 0 50px;
+		line-height: 0;
+		margin-right: 20px;
 
-    .folder-icon {
-      @include font-size(52);
+		.folder-icon {
+			@include font-size(52);
 
-      path {
-        fill: $theme;
-      }
+			path {
+				fill: $theme;
+			}
 
-      &.is-deleted {
-        path {
-          fill: $dark_background;
-        }
-      }
-    }
+			&.is-deleted {
+				path {
+					fill: $dark_background;
+				}
+			}
+		}
 
-    .file-icon {
-      @include font-size(45);
+		.file-icon {
+			@include font-size(45);
 
-      path {
-        fill: #fafafc;
-        stroke: #dfe0e8;
-        stroke-width: 1;
-      }
-    }
+			path {
+				fill: #fafafc;
+				stroke: #dfe0e8;
+				stroke-width: 1;
+			}
+		}
 
-    .file-icon-text {
-      line-height: 1;
-      top: 40%;
-      @include font-size(11);
-      margin: 0 auto;
-      position: absolute;
-      text-align: center;
-      left: 0;
-      right: 0;
-      color: $theme;
-      font-weight: 600;
-      user-select: none;
-      max-width: 50px;
-      max-height: 20px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
+		.file-icon-text {
+			line-height: 1;
+			top: 40%;
+			@include font-size(11);
+			margin: 0 auto;
+			position: absolute;
+			text-align: center;
+			left: 0;
+			right: 0;
+			color: $theme;
+			font-weight: 600;
+			user-select: none;
+			max-width: 50px;
+			max-height: 20px;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
 
-    .image {
-      object-fit: cover;
-      user-select: none;
-      max-width: 100%;
-      border-radius: 5px;
-      width: 50px;
-      height: 50px;
-      pointer-events: none;
-    }
-  }
+		.image {
+			object-fit: cover;
+			user-select: none;
+			max-width: 100%;
+			border-radius: 5px;
+			width: 50px;
+			height: 50px;
+			pointer-events: none;
+		}
+	}
 
-  .file-item {
-    border: 2px dashed transparent;
-    width: 100%;
-    display: flex;
-    align-items: center;
-    padding: 7px;
+	.file-item {
+		border: 2px dashed transparent;
+		width: 100%;
+		display: flex;
+		align-items: center;
+		padding: 7px;
 
-    &.is-dragenter {
-      border: 2px dashed $theme;
-      border-radius: 8px;
-    }
+		&.is-dragenter {
+			border: 2px dashed $theme;
+			border-radius: 8px;
+		}
 
-    &:hover,
-    &.is-clicked {
-      border-radius: 8px;
-      background: $light_background;
+		&:hover,
+		&.is-clicked {
+			border-radius: 8px;
+			background: $light_background;
 
-      .item-name .name {
-        color: $theme;
-      }
-    }
-  }
+			.item-name .name {
+				color: $theme;
+			}
+		}
+	}
 }
 
 @media (prefers-color-scheme: dark) {
-  .file-wrapper {
-    .icon-item {
-      .file-icon {
-        path {
-          fill: $dark_mode_foreground;
-          stroke: #2f3c54;
-        }
-      }
+	.file-wrapper {
+		.icon-item {
+			.file-icon {
+				path {
+					fill: $dark_mode_foreground;
+					stroke: #2f3c54;
+				}
+			}
 
-      .folder-icon {
-        &.is-deleted {
-          path {
-            fill: lighten($dark_mode_foreground, 5%);
-          }
-        }
-      }
-    }
+			.folder-icon {
+				&.is-deleted {
+					path {
+						fill: lighten($dark_mode_foreground, 5%);
+					}
+				}
+			}
+		}
 
-    .file-item {
-      &:hover,
-      &.is-clicked {
-        background: $dark_mode_foreground;
+		.file-item {
+			&:hover,
+			&.is-clicked {
+				background: $dark_mode_foreground;
 
-        .file-icon {
-          path {
-            fill: $dark_mode_background;
-          }
-        }
-      }
-    }
+				.file-icon {
+					path {
+						fill: $dark_mode_background;
+					}
+				}
+			}
+		}
 
-    .item-name {
-      .name {
-        color: $dark_mode_text_primary;
-      }
+		.item-name {
+			.name {
+				color: $dark_mode_text_primary;
+			}
 
-      .item-size,
-      .item-length {
-        color: $dark_mode_text_secondary;
-      }
-    }
-  }
+			.item-size,
+			.item-length {
+				color: $dark_mode_text_secondary;
+			}
+		}
+	}
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/resources/js/components/FilesView/FilePreviewActions.vue b/resources/js/components/FilesView/FilePreviewActions.vue
index 3148e779..4aa9d9f2 100644
--- a/resources/js/components/FilesView/FilePreviewActions.vue
+++ b/resources/js/components/FilesView/FilePreviewActions.vue
@@ -1,90 +1,74 @@
 <template>
-  <div v-if="filteredFiles.length > 1">
-    <chevron-left-icon
-      class="prev"
-      @click.prevent="prev"
-      size="17"
-    ></chevron-left-icon>
-
-    <chevron-right-icon
-      class="next"
-      @click.prevent="next"
-      size="17"
-    ></chevron-right-icon>
-  </div>
+	<div v-if="filteredFiles.length > 1">
+		<chevron-left-icon class="prev" @click.prevent="prev" size="17"></chevron-left-icon>
+		<chevron-right-icon class="next" @click.prevent="next" size="17"></chevron-right-icon>
+	</div>
 </template>
 
 <script>
-import { events } from '@/bus';
-import { mapGetters } from "vuex";
-import { ChevronLeftIcon, ChevronRightIcon } from 'vue-feather-icons';
-
+import { events } from '@/bus'
+import { mapGetters } from 'vuex'
+import { ChevronLeftIcon, ChevronRightIcon } from 'vue-feather-icons'
 export default {
-  components: {
-    ChevronLeftIcon,
-    ChevronRightIcon,
-  },
-  computed: {
-        ...mapGetters(["fileInfoDetail", "data"]),
+	name: 'FilePreviewActions',
+	components: {
+		ChevronLeftIcon,
+		ChevronRightIcon
+	},
+	computed: {
+		...mapGetters(['fileInfoDetail', 'data']),
 
-     filteredFiles() {
-       let filteredData = []
-      this.data.filter((element) => {
-        if (element.type == this.fileInfoDetail.type) {
-          filteredData.push(element);
-        }
-      });
-        return filteredData
-    },
-  },
+		filteredFiles() {
+			let filteredData = []
+			this.data.filter((element) => {
+				if (element.type == this.fileInfoDetail.type) {
+					filteredData.push(element)
+				}
+			})
+			return filteredData
+		}
+	},
 
-  methods: {
-    next: function() {
-      events.$emit('filePreviewAction:next');
-    },
-    prev: function() {
-      events.$emit('filePreviewAction:prev');
-    },
-  
-  },
-};
+	methods: {
+		next: function() {
+			events.$emit('filePreviewAction:next')
+		},
+		prev: function() {
+			events.$emit('filePreviewAction:prev')
+		}
+	}
+}
 </script>
 
 <style lang="scss" scoped>
 @import '@assets/vue-file-manager/_variables';
-
-.icon-wrapper {
-  width: 40px;
-  height: 40px;
-}
-
 .prev,
 .next {
-  cursor: pointer;
-  position: absolute;
-  top: 53.5%;
-  display: flex;
-  justify-content: center;
-  background-color: white !important;
-  color: $text;
-  border-radius: 50%;
-  text-decoration: none;
-  user-select: none;
+	cursor: pointer;
+	position: absolute;
+	top: 53.5%;
+	display: flex;
+	justify-content: center;
+	color: $text;
+	border-radius: 50%;
+	text-decoration: none;
+	user-select: none;
+	filter: drop-shadow(0px 0px 0.8px rgba(255, 255, 255, 1));
 }
 .next {
-  right: 0;
-  margin-right: 10px;
+	right: 0;
+	margin-right: 10px;
 }
 .prev {
-  left: 0;
-  margin-left: 10px;
+	left: 0;
+	margin-left: 10px;
 }
 
 @media (prefers-color-scheme: dark) {
-  .prev,
-  .next {
-    color: $light-text;
-    background-color: $dark_mode_background !important;
-  }
+	.prev,
+	.next {
+		color: $light-text;
+		filter: drop-shadow(0px 0px 0.8px rgba(17, 19, 20, 1));
+	}
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/resources/js/components/FilesView/FilePreviewNavigationPanel.vue b/resources/js/components/FilesView/FilePreviewNavigationPanel.vue
index 0d4c4c4e..8a89d4b7 100644
--- a/resources/js/components/FilesView/FilePreviewNavigationPanel.vue
+++ b/resources/js/components/FilesView/FilePreviewNavigationPanel.vue
@@ -1,164 +1,127 @@
 <template>
-  <!-- <div class="navigation-wrapper"> -->
-  <div class="navigation-panel" v-if="fileInfoDetail"    
- >
-    <div class="name-wrapper">
-      <x-icon @click="closeFullPreview" size="17" class="icon-close"></x-icon>
-      <div class="name-count-wrapper">
-        <p class="title">{{ formatedName }}</p>
+	<div class="navigation-panel" v-if="fileInfoDetail">
+		<div class="name-wrapper">
+			<x-icon @click="closeFullPreview" size="22" class="icon-close"></x-icon>
+			<div class="name-count-wrapper">
+				<p class="title">{{ formatedName }}</p>
+				<span class="file-count"> ({{ showingImageIndex + ' ' + $t('pronouns.of') + ' ' + filteredFiles.length }}) </span>
+			</div>
+			<span id="fast-preview-menu" class="fast-menu-icon" @click="menuOpen" v-if="$checkPermission(['master', 'editor'])">
+				<more-horizontal-icon class="more-icon" size="14"> </more-horizontal-icon>
+			</span>
+		</div>
 
-        <span class="file-count">
-          ({{
-            showImageIndex +
-              ' ' +
-              $t('pronouns.of') +
-              ' ' +
-              filteredFiles.length
-          }})
-        </span>
-      </div>
-      <span
-        id="fast-preview-menu"
-        class="fast-menu-icon"
-        @click="menuOpen"
-        v-if="$checkPermission(['master', 'editor'])"
-      >
-        <more-horizontal-icon class="more-icon" size="14">
-        </more-horizontal-icon>
-      </span>
-    </div>
-
-    <!-- </div> -->
-    <div class="created_at-wrapper">
-      <p>{{ fileInfoDetail.filesize }}, {{ fileInfoDetail.created_at }}</p>
-    </div>
-    <div class="navigation-icons">
-      <div class="navigation-tool-wrapper">
-        <ToolbarButton
-           v-if="!this.$isMobile()"
-          source="download"
-          @click.native="downloadItem"
-          :action="$t('actions.download')"
-        />
-        <ToolbarButton
-        v-if="!this.$isMobile()"
-          source="share"
-          :class="{ 'is-inactive': canShareInView }"
-          :action="$t('actions.share')"
-          @click.native="shareItem"
-        />
-        <ToolbarButton
-          v-if="this.fileInfoDetail.type === 'image'"
-          source="print"
-          :action="$t('actions.print')"
-          @click.native="printMethod()"
-        />
-      </div>
-    </div>
-  </div>
-  <!-- </div> -->
+		<div class="created-at-wrapper">
+			<p>{{ fileInfoDetail.filesize }}, {{ fileInfoDetail.created_at }}</p>
+		</div>
+		<div class="navigation-icons">
+			<div class="navigation-tool-wrapper">
+				<ToolbarButton source="download" class="mobile-hide" @click.native="downloadItem" :action="$t('actions.download')" />
+				<ToolbarButton source="share" class="mobile-hide" :class="{ 'is-inactive': canShareInView }" :action="$t('actions.share')" @click.native="shareItem" />
+				<ToolbarButton v-if="this.fileInfoDetail.type === 'image'" source="print" :action="$t('actions.print')" @click.native="printMethod()" />
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
-import { events } from '@/bus';
-import { mapGetters } from 'vuex';
-import { XIcon, MoreHorizontalIcon } from 'vue-feather-icons';
+import { events } from '@/bus'
+import { mapGetters } from 'vuex'
+import { XIcon, MoreHorizontalIcon } from 'vue-feather-icons'
 
-import ToolbarButton from '@/components/FilesView/ToolbarButton';
+import ToolbarButton from '@/components/FilesView/ToolbarButton'
 
 export default {
-  components: { ToolbarButton, XIcon, MoreHorizontalIcon },
-  data() {
-    return {
-      showContextMenu: false,
-    };
-  },
-  computed: {
-    ...mapGetters(['fileInfoDetail', 'data']),
-    filteredFiles() {
-      let files = [];
-      this.data.filter((element) => {
-        if (element.type == this.fileInfoDetail.type) {
-          files.push(element);
-        }
-      });
+	name: 'FilePreviewNavigationPanel',
+	components: { ToolbarButton, XIcon, MoreHorizontalIcon },
+	computed: {
+		...mapGetters(['fileInfoDetail', 'data']),
+		filteredFiles() {
+			let files = []
+			this.data.filter((element) => {
+				if (element.type == this.fileInfoDetail.type) {
+					files.push(element)
+				}
+			})
+			return files
+		},
+		showingImageIndex() {
+			let activeIndex = ''
+			this.filteredFiles.filter((element, index) => {
+				if (element.unique_id == this.fileInfoDetail.unique_id) {
+					activeIndex = index + 1
+				}
+			})
+			return activeIndex
+		},
 
-      return files;
-    },
-    showImageIndex() {
-      let activeIndex = '';
-      this.filteredFiles.filter((element, index) => {
-        if (element.unique_id == this.fileInfoDetail.unique_id) {
-          activeIndex = index + 1;
-        }
-      });
-      return activeIndex;
-    },
-
-    formatedName() {
-      let name = this.fileInfoDetail.name;
-      if (name.lastIndexOf('.') > -1) {
-        return _.truncate(name.substring(0, name.lastIndexOf('.')), {
-          length: 27,
-        });
-      } else {
-        return _.truncate(name, {
-          length: 27,
-        });
-      }
-    },
-    canShareInView() {
-      return !this.$isThisLocation([
-        'base',
-        'participant_uploads',
-        'latest',
-        'shared',
-        'public',
-      ]);
-    },
-  },
-
-  methods: {
-    printMethod() {
-      var tab = document.getElementById('image');
-      var win = window.open('', '', 'height=700,width=700');
-      win.document.write(tab.outerHTML);
-      win.document.close();
-      win.print();
-    },
-    downloadItem() {
-      // Download file
-      this.$downloadFile(
-        this.fileInfoDetail.file_url,
-        this.fileInfoDetail.name + '.' + this.fileInfoDetail.mimetype
-      );
-    },
-    shareItem() {
-      if (this.fileInfoDetail.shared) {
-        events.$emit('popup:open', {
-          name: 'share-edit',
-          item: this.fileInfoDetail,
-        });
-      } else {
-        events.$emit('popup:open', {
-          name: 'share-create',
-          item: this.fileInfoDetail,
-        });
-      }
-    },
-    menuOpen() {
-      if (this.$isMobile()) {
-        events.$emit('mobileMenu:show', 'showFromMediaPreview');
-      } else {
-        events.$emit('showContextMenuPreview:show', this.fileInfoDetail);
-      }
-    },
-    closeFullPreview() {
-      events.$emit('fileFullPreview:hide');
-      events.$emit('showContextMenuPreview:hide');
-    },
-  },
-};
+		formatedName() {
+			//Name length handling
+			let name = this.fileInfoDetail.name
+			let windowWidth = window.innerWidth
+			let nameLength
+			if (windowWidth < 410) {
+				nameLength = 18
+			} else {
+				nameLength = 27
+			}
+			if (name.lastIndexOf('.') > -1) {
+				return _.truncate(name.substring(0, name.lastIndexOf('.')), {
+					length: nameLength
+				})
+			} else {
+				return _.truncate(name, {
+					length: nameLength
+				})
+			}
+		},
+		canShareInView() {
+			return !this.$isThisLocation(['base', 'participant_uploads', 'latest', 'shared', 'public'])
+		}
+	},
+	data() {
+		return {
+			showContextMenu: false
+		}
+	},
+	methods: {
+		printMethod() {
+			var tab = document.getElementById('image')
+			var win = window.open('', '', 'height=700,width=700')
+			win.document.write(tab.outerHTML)
+			win.document.close()
+			win.print()
+		},
+		downloadItem() {
+			// Download file
+			this.$downloadFile(this.fileInfoDetail.file_url, this.fileInfoDetail.name + '.' + this.fileInfoDetail.mimetype)
+		},
+		shareItem() {
+			if (this.fileInfoDetail.shared) {
+				events.$emit('popup:open', {
+					name: 'share-edit',
+					item: this.fileInfoDetail
+				})
+			} else {
+				events.$emit('popup:open', {
+					name: 'share-create',
+					item: this.fileInfoDetail
+				})
+			}
+		},
+		menuOpen() {
+			if (this.$isMobile()) {
+				events.$emit('mobileMenu:show', 'showFromMediaPreview')
+			} else {
+				events.$emit('showContextMenuPreview:show', this.fileInfoDetail)
+			}
+		},
+		closeFullPreview() {
+			events.$emit('fileFullPreview:hide')
+			events.$emit('showContextMenuPreview:hide')
+		}
+	}
+}
 </script>
 
 <style lang="scss" scoped>
@@ -166,169 +129,195 @@ export default {
 @import '@assets/vue-file-manager/_mixins';
 
 .name-wrapper {
-  width: 33%;
-  height: 22px;
-  display: flex;
-  position: relative;
-  // align-items: center;
-  flex-grow: 1;
-  align-self: center;
-  white-space: nowrap;
-  .name-count-wrapper {
-    .file-count {
-      @include font-size(15);
-      margin-left: 6px;
-      line-height: 1;
-      font-weight: 700;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: inline-block;
-      vertical-align: middle;
-      align-self: center;
-      color: $text;
-    }
-    .title {
-      @include font-size(15);
-      line-height: 1;
-      font-weight: 700;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: inline-block;
-      vertical-align: middle;
-      align-self: center;
-      color: $text;
-    }
-  }
-  .icon-close {
-          min-width: 17px;
+	width: 33%;
+	height: 22px;
+	display: flex;
+	position: relative;
+	// align-items: center;
+	flex-grow: 1;
+	align-self: center;
+	white-space: nowrap;
+	.name-count-wrapper {
+		.file-count {
+			@include font-size(15);
+			margin-left: 6px;
+			line-height: 1;
+			font-weight: 700;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			display: inline-block;
+			vertical-align: middle;
+			align-self: center;
+			color: $text;
+		}
+		.title {
+			@include font-size(15);
+			line-height: 1;
+			font-weight: 700;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			display: inline-block;
+			vertical-align: middle;
+			color: $text;
+		}
+		@media (max-width: 570px) {
+			.title,
+			.file-count {
+				@include font-size(17);
+			}
+		}
+	}
+	.icon-close {
+		min-width: 22px;
+		padding: 1px 4px;
+		border-radius: 6px;
+		vertical-align: middle;
+		cursor: pointer;
+		margin-right: 6px;
+		color: $text;
+		align-self: center;
+		@include transition(150ms);
+		&:hover {
+			background: $light_background;
+			line {
+				stroke: $theme;
+			}
+		}
+	}
+	.fast-menu-icon {
+		height: 24px;
+		display: flex;
+		align-items: center;
+		vertical-align: middle;
+		margin-left: 6px;
+		padding: 1px 4px;
+		line-height: 0;
+		border-radius: 3px;
+		cursor: pointer;
+		@include transition(150ms);
 
-    vertical-align: middle;
-    cursor: pointer;
-    margin-right: 6px;
-    color: $text;
-    align-self: center;
-    @include transition(150ms);
-  }
-  .fast-menu-icon {
-    height: 24px;
-    display: flex;
-    align-items: center;
-    vertical-align: middle;
-    margin-left: 6px;
-    padding: 1px 4px;
-    line-height: 0;
-    border-radius: 3px;
-    cursor: pointer;
-    @include transition(150ms);
+		svg circle {
+			@include transition(150ms);
+		}
+		&:hover {
+			background: $light_background;
 
-    svg circle {
-      @include transition(150ms);
-    }
-    &:hover {
-      background: $light_background;
-
-      svg circle {
-        stroke: $theme;
-      }
-    }
-    .more-icon {
-      vertical-align: middle;
-      cursor: pointer;
-    }
-  }
+			svg circle {
+				stroke: $theme;
+			}
+		}
+		.more-icon {
+			vertical-align: middle;
+			cursor: pointer;
+		}
+	}
 }
 .context-menu {
-  min-width: 250px;
-  position: absolute;
-  z-index: 99;
-  box-shadow: $shadow;
-  background: white;
-  border-radius: 8px;
-  overflow: hidden;
-  top: 29px;
+	min-width: 250px;
+	position: absolute;
+	z-index: 99;
+	box-shadow: $shadow;
+	background: white;
+	border-radius: 8px;
+	overflow: hidden;
+	top: 29px;
 
-  &.showed {
-    display: block;
-  }
+	&.showed {
+		display: block;
+	}
 }
 
-@media (min-width: 420px) and (max-width: 930px) {
-  .name-wrapper {
-    width: 67%;
-  }
+@media (min-width: 420px) and (max-width: 985px) {
+	.name-wrapper {
+		width: 67%;
+	}
 }
 @media (max-width: 570px) {
-  .name-wrapper {
-    width: 100%;
-    justify-content: space-between;
-  }
+	.name-wrapper {
+		width: 100%;
+		justify-content: space-between;
+	}
 }
-.created_at-wrapper {
-  width: 33%;
-  height: 100%;
-  display: flex;
-  text-align: center;
-  justify-content: center;
-  p {
-    display: flex;
-    align-items: center;
-    @include font-size(11);
-  }
-  @media (max-width: 930px) {
-    display: none;
-  }
+.created-at-wrapper {
+	width: 33%;
+	// height: 100%;
+	display: flex;
+	text-align: center;
+	justify-content: center;
+	p {
+		display: flex;
+		align-items: center;
+		@include font-size(11);
+	}
+	@media (max-width: 985px) {
+		display: none;
+	}
 }
 .navigation-icons {
-  width: 33%;
-  text-align: right;
+	width: 33%;
+	text-align: right;
 
-  .navigation-tool-wrapper {
-    margin-left: 28px;
-    display: inline-block;
-    vertical-align: middle;
-  }
-  .button {
-    margin-left: 5px;
-    &:hover {
-      background: $light_background;
-    }
-  }
-  @media (max-width: 570px) {
-    display: none;
-  }
+	.navigation-tool-wrapper {
+		margin-left: 28px;
+		display: inline-block;
+		vertical-align: middle;
+	}
+	@media (max-width: 960px) {
+		.mobile-hide {
+			display: none;
+		}
+	}
+	.button {
+		margin-left: 5px;
+		&:hover {
+			background: $light_background;
+		}
+	}
+	@media (max-width: 570px) {
+		display: none;
+	}
 }
 .navigation-panel {
-height: 63px;
-  width: 100%;
-  padding: 10px 15px;
-  display: flex;
-  position: absolute;
-  z-index: 8;
-  align-items: center;
-  background-color: white;
-  color: $text;
+	height: 63px;
+	width: 100%;
+	padding: 10px 15px;
+	display: flex;
+	position: absolute;
+	z-index: 8;
+	align-items: center;
+	background-color: white;
+	color: $text;
+	@media (max-width: 960px) {
+		& {
+			height: 53px;
+			padding: 15px;
+		}
+	}
 }
 @media (prefers-color-scheme: dark) {
-  .navigation-panel {
-    background-color: $dark_mode_foreground;
-    color: $dark_mode_text_primary;
-    .icon-close {
-      color: $dark_mode_text_primary;
-    }
-    .fast-menu-icon:hover {
-      background: $dark_mode_background;
-    }
-  }
-  .name-wrapper {
-    .title,
-    .file-count {
-      color: $dark_mode_text_primary !important;
-    }
-  }
-  .navigation-icons {
-    .button:hover {
-      background: $dark_mode_background;
-    }
-  }
+	.navigation-panel {
+		background-color: $dark_mode_foreground;
+		color: $dark_mode_text_primary;
+		.icon-close {
+			color: $dark_mode_text_primary;
+			&:hover {
+				background-color: $dark_mode_background;
+			}
+		}
+		.fast-menu-icon:hover {
+			background: $dark_mode_background;
+		}
+	}
+	.name-wrapper {
+		.title,
+		.file-count {
+			color: $dark_mode_text_primary !important;
+		}
+	}
+	.navigation-icons {
+		.button:hover {
+			background: $dark_mode_background;
+		}
+	}
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/resources/js/components/FilesView/MediaFullPreview.vue b/resources/js/components/FilesView/MediaFullPreview.vue
index 1e4ef647..7f8a707e 100644
--- a/resources/js/components/FilesView/MediaFullPreview.vue
+++ b/resources/js/components/FilesView/MediaFullPreview.vue
@@ -1,157 +1,127 @@
 <template>
-  <div class="media-full-preview"  id="mediaPreview" v-if="fileInfoDetail" @click="closeContextMenu" >
-    <div class="file-wrapper-preview" v-for="i in [currentIndex]" :key="i" >
-      <div class="file-wrapper" >
-        <audio
-          class="file audio"
-          v-if="fileInfoDetail.type == 'audio'"
-          :src="currentFile.file_url"
-          controlsList="nodownload"
-          controls
-        ></audio>
-
-        <img
-          v-if="fileInfoDetail.type === 'image' && currentFile.thumbnail"
-          class="file"
-          id="image"
-          :src="currentFile.file_url"
-          v-on:load="onLoaded"
-        />
-        <div class="video-wrapper"  v-if="fileInfoDetail.type === 'video' && currentFile.file_url">
-        <video   
-          :src="currentFile.file_url"
-          class="video"
-          controlsList="nodownload"
-          disablePictureInPicture
-          playsinline
-          controls
-        />
-        </div>
-        <spinner v-if="!loaded && fileInfoDetail.type === 'image'" />
-      </div>
-    </div>
-  </div>
+	<div class="media-full-preview" id="mediaPreview" v-if="this.isMedia && fileInfoDetail">
+		<div class="file-wrapper-preview" v-for="i in [currentIndex]" :key="i">
+			<div class="file-wrapper">
+				<audio class="file audio" :class="{ 'file-shadow': !isMobileDevice }" v-if="fileInfoDetail.type == 'audio'" :src="currentFile.file_url" controlsList="nodownload" controls></audio>
+				<img v-if="fileInfoDetail.type === 'image' && currentFile.thumbnail" class="file" :class="{ 'file-shadow': !isMobileDevice }" id="image" :src="currentFile.file_url" />
+				<div class="video-wrapper" v-if="fileInfoDetail.type === 'video' && currentFile.file_url">
+					<video :src="currentFile.file_url" class="video" :class="{ 'file-shadow': !isMobileDevice }" controlsList="nodownload" disablePictureInPicture playsinline controls />
+				</div>
+			</div>
+			<!-- <spinner class="loading-spinner" v-if="!loaded && fileInfoDetail.type === 'image'" /> -->
+		</div>
+	</div>
 </template>
 
 <script>
-import { events } from '@/bus';
-import { mapGetters } from 'vuex';
-import ToolbarButton from '@/components/FilesView/ToolbarButton';
-import Spinner from '@/components/FilesView/Spinner';
+import { events } from '@/bus'
+import { mapGetters } from 'vuex'
+import ToolbarButton from '@/components/FilesView/ToolbarButton'
+import Spinner from '@/components/FilesView/Spinner'
 
 export default {
-  components: { ToolbarButton, Spinner },
-  data() {
-    return {
-      currentIndex: 1,
-      sliderFile: [],
-      loaded: false,
-    
-    };
-  },
-  computed: {
-    ...mapGetters(['fileInfoDetail', 'data']),
+	name: 'MediaFullPreview',
+	components: { ToolbarButton, Spinner },
+	computed: {
+		...mapGetters(['fileInfoDetail', 'data']),
 
-    currentFile: function() {
-      return this.sliderFile[
-        Math.abs(this.currentIndex) % this.sliderFile.length
-      ];
-    },
+		isMobileDevice() {
+			return this.$isMobile()
+		},
 
-    canShareInView() {
-      return !this.$isThisLocation([
-        'base',
-        'participant_uploads',
-        'latest',
-        'shared',
-        'public',
-      ]);
-    },
-  },
-  mounted() {
-    if(this.sliderFile.length > 1 ) {
-    events.$on('filePreviewAction:next', () => {
-      this.currentIndex += 1;
-      this.slideType = 'next'
-      if (this.currentIndex > this.sliderFile.length - 1) {
-        this.currentIndex = 0;
-      }
-    });
-    events.$on('filePreviewAction:prev', () => {
-      this.slideType = 'prev'
-      this.currentIndex -= 1;
-      if (this.currentIndex < 0) {
-        this.currentIndex = this.sliderFile.length - 1;
-      }
-    });
-    }
-  },
-  created() {
-    this.filteredFiles();
-  },
-  watch: {
-    sliderFile() {
-      if(this.sliderFile.length == 0 ) {
-          events.$emit('fileFullPreview:hide');
+		currentFile: function() {
+			return this.sliderFile[Math.abs(this.currentIndex) % this.sliderFile.length]
+		},
+		isMedia() {
+			return this.fileInfoDetail === 'image' || 'video' || 'audio'
+		},
 
-      }
-    },
-    currentFile() {
-      //HANDLE ACUTAL VIEW IMAGE IN FIELINFODETAIL
-      if(this.fileInfoDetail) {
-        this.loaded = false
-      this.$store.commit('GET_FILEINFO_DETAIL', this.currentFile);
-      events.$emit('actualShowingImage:ContextMenu', this.currentFile);
-      }
-    },
-    fileInfoDetail() {
-      //FILE DELETE HANDLING
-      if (!this.fileInfoDetail) {
-          this.currentIndex = this.currentIndex - 1;
-          this.$store.commit('GET_FILEINFO_DETAIL', this.currentFile);
-          this.sliderFile = [];
-          this.filteredFiles();   
-      }
-    },
-    data(newValue, oldValue) {
-      //MOVE ITEM HANDLING
-      if (newValue != oldValue) {
-        this.sliderFile = [];
-        this.filteredFiles();
-      }
-    },
-  },
-  methods: {
+		canShareInView() {
+			return !this.$isThisLocation(['base', 'participant_uploads', 'latest', 'shared', 'public'])
+		}
+	},
+	data() {
+		return {
+			currentIndex: 1,
+			sliderFile: []
+			// loaded: false
+		}
+	},
 
-    closeContextMenu() {
-      events.$emit('showContextMenuPreview:hide')
-    },
-    
-    closeFullPreview() {
-      events.$emit('fileFullPreview:hide');
-    },
-
-
-    filteredFiles() {
-      this.data.filter((element) => {
-        if (element.type == this.fileInfoDetail.type) {
-          this.sliderFile.push(element);
-        }
-      });
-      this.choseActiveFile();
-    },
-    onLoaded() {
-      this.loaded = true;
-    },
-    choseActiveFile() {
-      this.sliderFile.forEach((element, index) => {
-        if (element.unique_id == this.fileInfoDetail.unique_id) {
-          this.currentIndex = index;
-        }
-      });
-    },
-  },
-};
+	watch: {
+		sliderFile() {
+			//Close file preview after delete all items
+			if (this.sliderFile.length == 0) {
+				events.$emit('fileFullPreview:hide')
+			}
+		},
+		currentFile() {
+			//Handle actual view image in fileInfoDetail
+			if (this.fileInfoDetail) {
+				this.$store.commit('GET_FILEINFO_DETAIL', this.currentFile)
+				events.$emit('actualShowingImage:ContextMenu', this.currentFile)
+				// this.loaded = false
+			}
+		},
+		fileInfoDetail() {
+			//File delete handling - show next image after delete one
+			if (!this.fileInfoDetail) {
+				this.currentIndex = this.currentIndex - 1
+				this.$store.commit('GET_FILEINFO_DETAIL', this.currentFile)
+				this.sliderFile = []
+				this.filteredFiles()
+			}
+		},
+		data(newValue, oldValue) {
+			//Move item handling
+			if (newValue != oldValue) {
+				this.sliderFile = []
+				this.filteredFiles()
+			}
+		}
+	},
+	methods: {
+		filteredFiles() {
+			this.data.filter((element) => {
+				if (element.type == this.fileInfoDetail.type) {
+					this.sliderFile.push(element)
+				}
+			})
+			this.choseActiveFile()
+		},
+		// onLoaded(event) {
+		// 	this.loaded = true
+		// },
+		choseActiveFile() {
+			this.sliderFile.forEach((element, index) => {
+				if (element.unique_id == this.fileInfoDetail.unique_id) {
+					this.currentIndex = index
+				}
+			})
+		}
+	},
+	mounted() {
+		if (this.sliderFile.length > 1) {
+			events.$on('filePreviewAction:next', () => {
+				this.currentIndex += 1
+				this.slideType = 'next'
+				if (this.currentIndex > this.sliderFile.length - 1) {
+					this.currentIndex = 0
+				}
+			})
+			events.$on('filePreviewAction:prev', () => {
+				this.slideType = 'prev'
+				this.currentIndex -= 1
+				if (this.currentIndex < 0) {
+					this.currentIndex = this.sliderFile.length - 1
+				}
+			})
+		}
+	},
+	created() {
+		this.filteredFiles()
+	}
+}
 </script>
 
 <style lang="scss" scoped>
@@ -159,94 +129,102 @@ export default {
 @import '@assets/vue-file-manager/_mixins';
 
 .media-full-preview {
-  height: calc(100% - 72px) ;
-  top: 72px;
-  position: relative;
-  background-color: white;
+	height: calc(100% - 72px);
+	top: 72px;
+	position: relative;
+	background-color: white;
 }
 
 .navigation-panel {
-  width: 100%;
-  height: 7%;
-  display: flex;
-  align-items: center;
-  padding: 20px;
-  justify-content: space-between;
-  background-color: $light-background;
-  color: $text;
-  .icon-close {
-    color: $text;
-    @include font-size(21);
-    &:hover {
-      color: $theme;
-    }
-  }
+	width: 100%;
+	height: 7%;
+	display: flex;
+	align-items: center;
+	padding: 20px;
+	justify-content: space-between;
+	background-color: $light-background;
+	color: $text;
+	.icon-close {
+		color: $text;
+		@include font-size(21);
+		&:hover {
+			color: $theme;
+		}
+	}
+}
+
+.loading-spinner {
+	position: relative;
 }
 
 .file-wrapper-preview {
-  width: 100%;
-  height: 100%;
-  padding: 30px 0px;
-  display: flex;
-  overflow: hidden;
-  justify-content: center;
-  align-items: center;
-  background-color: white;
-  .file-wrapper {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    .file {
-      max-width: 100%;
-      max-height: 100%;
-      align-self: center;
-      box-shadow: 0 8px 40px rgba($text, 0.3);
-    }
-    .audio {
-      border-radius: 28px;
-    }
-    .video-wrapper {
-      max-width: 1080px;
-      max-height: 100%;
+	width: 100%;
+	height: 100%;
+	padding: 30px 0px;
+	display: flex;
+	overflow: hidden;
+	justify-content: center;
+	align-items: center;
+	background-color: white;
+	.file-wrapper {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		.file-shadow {
+			box-shadow: 0 8px 40px rgba(17, 26, 52, 0.1);
+		}
+		.file {
+			max-width: 100%;
+			max-height: 100%;
+			align-self: center;
+		}
+		.audio {
+			border-radius: 28px;
+		}
+		.video-wrapper {
+			max-width: 1080px;
+			max-height: 100%;
 
-      @media (min-width: 1200px) {
-        & {
-          max-width: 800px;
-        }
-      }
+			@media (min-width: 1200px) {
+				& {
+					max-width: 800px;
+				}
+			}
 
-       @media (min-width: 1920px) and (max-width: 2560px) {
-        & {
-          max-width: 1080px;
-        }
-      }
-       @media (min-width: 2560px) and (max-width: 3840px) {
-        & {
-          max-width: 1440px;
-        }
-      }
-       @media (min-width: 3840px) {
-        & {
-          max-width: 2160px;
-        }
-      }
-    .video {
-      max-width: 100%;
-      max-height: 100%;
-      align-self: center;
-      box-shadow: 0 8px 40px rgba($text, 0.3);
-    }
-    }
-  }
+			@media (min-width: 1920px) and (max-width: 2560px) {
+				& {
+					max-width: 1080px;
+				}
+			}
+			@media (min-width: 2560px) and (max-width: 3840px) {
+				& {
+					max-width: 1440px;
+				}
+			}
+			@media (min-width: 3840px) {
+				& {
+					max-width: 2160px;
+				}
+			}
+			.video {
+				max-width: 100%;
+				max-height: 100%;
+				align-self: center;
+			}
+		}
+	}
 }
 
-
-
 @media (prefers-color-scheme: dark) {
-  .file-wrapper-preview {
-    background-color: $dark_mode_background;
-  }
+	.file-wrapper-preview {
+		background-color: $dark_mode_background;
+		.file-wrapper {
+			.file-shadow {
+				box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
+			}
+		}
+	}
 }
-</style>
+</style>
\ No newline at end of file