diff --git a/public/mix-manifest.json b/public/mix-manifest.json
index 8ee3e48e..1e3bfdd8 100644
--- a/public/mix-manifest.json
+++ b/public/mix-manifest.json
@@ -1,65 +1,85 @@
 {
-    "/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=c9b546a9e8adf774d185",
-    "/js/main.js": "/js/main.js?id=3b8e016d25ec4373c448",
-    "/css/app.css": "/css/app.css?id=8f6d5dcb7110a726e142",
-    "/chunks/admin.js": "/chunks/admin.js?id=60df31e17e9a453717dc",
-    "/chunks/admin-account.js": "/chunks/admin-account.js?id=ab97f01586b286e0bba2",
-    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=cbcbdb5159db1fdef0fe",
-    "/chunks/app-billings.js": "/chunks/app-billings.js?id=2a85f4c8ad09b50f4358",
-    "/chunks/app-email.js": "/chunks/app-email.js?id=49806a5c914ca1a14bff",
-    "/chunks/app-index.js": "/chunks/app-index.js?id=ff6fb3cb1780d6ea76f2",
-    "/chunks/app-others.js": "/chunks/app-others.js?id=ebc9676ed26d701a599c",
-    "/chunks/app-payments.js": "/chunks/app-payments.js?id=ad822a37d1d7c6e99a08",
-    "/chunks/app-settings.js": "/chunks/app-settings.js?id=e23a68dba034c047ff44",
-    "/chunks/app-setup.js": "/chunks/app-setup.js?id=c1c6fcc091a248b10060",
-    "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=0e1d52490ae1b9e56c74",
-    "/chunks/contact-us.js": "/chunks/contact-us.js?id=a5150dcf81c8e1ab23a4",
-    "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=58c543c4f92b5ca9a284",
-    "/chunks/dashboard.js": "/chunks/dashboard.js?id=d2faf26107f56da1ab92",
-    "/chunks/database.js": "/chunks/database.js?id=45630822140f0f9d8fb5",
-    "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=08a0c2de8f93e0222600",
-    "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=be1c6cf5bbedf5c987da",
-    "/chunks/files.js": "/chunks/files.js?id=e182df6a47e8764f428a",
-    "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=7ff98232e7b4cc5d2c2a",
-    "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=d6ff4604fd61fd8a081d",
-    "/chunks/invoices.js": "/chunks/invoices.js?id=57d1985369f98a192d79",
-    "/chunks/landing-page.js": "/chunks/landing-page.js?id=9b500c8f5f2de6ae01b3",
-    "/chunks/not-found-shared.js": "/chunks/not-found-shared.js?id=53d4f9c58bdac1e568c7",
-    "/chunks/page-edit.js": "/chunks/page-edit.js?id=682b2836ee0726d72409",
-    "/chunks/pages.js": "/chunks/pages.js?id=21e8b757a564a787fe98",
-    "/chunks/plan.js": "/chunks/plan.js?id=d679b2c4e3dafe7cb4de",
-    "/chunks/plan-create.js": "/chunks/plan-create.js?id=921149e0082c663f0ce8",
-    "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=daff73302efdfacc542a",
-    "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=3047e82dffef9a9a5f36",
-    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=d46857048beab30edb45",
-    "/chunks/plans.js": "/chunks/plans.js?id=383d645f1f5c330417e2",
-    "/chunks/profile.js": "/chunks/profile.js?id=a71f52eb082c5173b37e",
-    "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=7ef575dcdf8d8cce1781",
-    "/chunks/settings.js": "/chunks/settings.js?id=e92a372ac6714092f999",
-    "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=8e425a5fcac0dfed8979",
-    "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=124785707d6d7eefc088",
-    "/chunks/settings-password.js": "/chunks/settings-password.js?id=f7b86ce4daef5d65b9c7",
-    "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=f42ae386174e7b5cd923",
-    "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=d74048cf27bfd83ecacb",
-    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=754550f7d1abe0678d00",
-    "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=47090233afc7b0cdf855",
-    "/chunks/shared-files.js": "/chunks/shared-files.js?id=adbeabe4eee0cdaefbf4",
-    "/chunks/shared-page.js": "/chunks/shared-page.js?id=691e43731207990aeef3",
-    "/chunks/sign-in.js": "/chunks/sign-in.js?id=ec080714b24154cf1081",
-    "/chunks/sign-up.js": "/chunks/sign-up.js?id=0d8b571bcf5a54f073fd",
-    "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=1855b3385d413077987b",
-    "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=8f7dd3b0a9efd8b23cb6",
-    "/chunks/subscription-service.js": "/chunks/subscription-service.js?id=5d6baf6541a2045e07d4",
-    "/chunks/upgrade.js": "/chunks/upgrade.js?id=5b8044541a28db10a800",
-    "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=a7aac734e0697c974314",
-    "/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=b5d285ace19d55d6caba",
-    "/chunks/user.js": "/chunks/user.js?id=a22678762221f8ece00f",
-    "/chunks/user-create.js": "/chunks/user-create.js?id=d2c5a7a23e892ea0b74f",
-    "/chunks/user-delete.js": "/chunks/user-delete.js?id=97382205d44cc82a7362",
-    "/chunks/user-detail.js": "/chunks/user-detail.js?id=368fa9dff628423894ea",
-    "/chunks/user-invoices.js": "/chunks/user-invoices.js?id=25a90c334e0edcf8497a",
-    "/chunks/user-password.js": "/chunks/user-password.js?id=66ca2fe7b5f27aea03b4",
-    "/chunks/user-storage.js": "/chunks/user-storage.js?id=1197c179b53abd596800",
-    "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=df85e3892af3ff39a586",
-    "/chunks/users.js": "/chunks/users.js?id=0c6242dfef922c485c2b"
+    "/js/main.js": "/js/main.js",
+    "/css/app.css": "/css/app.css",
+    "/chunks/admin.js": "/chunks/admin.js?id=5807ec412746448047f9",
+    "/chunks/admin-account.js": "/chunks/admin-account.js?id=d820e99a25f40cc97570",
+    "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~2d9ff916.js": "/chunks/admin-account~chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chu~2d9ff916.js?id=1ad1b7b56512338223eb",
+    "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~01aef58e.js": "/chunks/admin-account~chunks/app-setup~chunks/billings-detail~chunks/create-new-password~chunks/datab~01aef58e.js?id=6c02fe91a2e167b63a98",
+    "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.js": "/chunks/admin~chunks/files~chunks/settings~chunks/shared-files~chunks/shared-page.js?id=312acc0ff7daa010eea5",
+    "/chunks/app-appearance.js": "/chunks/app-appearance.js?id=03e587de7dd10fba3ead",
+    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~605f4c49.js?id=fd3c7242b5c765b469e4",
+    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~8cc7d96f.js?id=ebb1b6ed1df237b56cd9",
+    "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js": "/chunks/app-appearance~chunks/app-billings~chunks/app-email~chunks/app-index~chunks/app-others~chunks~b9e5655a.js?id=a8bd98f9f181d9ee68fd",
+    "/chunks/app-billings.js": "/chunks/app-billings.js?id=2b87899e656ed382d260",
+    "/chunks/app-email.js": "/chunks/app-email.js?id=2e5a1b525d335367cfc1",
+    "/chunks/app-index.js": "/chunks/app-index.js?id=05747ca2c86a1daea9cd",
+    "/chunks/app-others.js": "/chunks/app-others.js?id=55e1ec30bdca87c1adef",
+    "/chunks/app-payments.js": "/chunks/app-payments.js?id=796c7c2cfb9c6c39c8a7",
+    "/chunks/app-settings.js": "/chunks/app-settings.js?id=b85ce942737e25c37b8a",
+    "/chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~8a0e1d25.js": "/chunks/app-settings~chunks/dashboard~chunks/invoices~chunks/page-edit~chunks/pages~chunks/plan~chunk~8a0e1d25.js?id=99eb5ed6af46738c97e0",
+    "/chunks/app-setup.js": "/chunks/app-setup.js?id=78bbf0b2065cf270dbe6",
+    "/chunks/billings-detail.js": "/chunks/billings-detail.js?id=573e29a00589cb5d3489",
+    "/chunks/contact-us.js": "/chunks/contact-us.js?id=7ded3c3e9668eea6c15c",
+    "/chunks/contact-us~chunks/dynamic-page~chunks/landing-page.js": "/chunks/contact-us~chunks/dynamic-page~chunks/landing-page.js?id=96ac1ede73f3fc9afa37",
+    "/chunks/create-new-password.js": "/chunks/create-new-password.js?id=278eef02eace89698f20",
+    "/chunks/dashboard.js": "/chunks/dashboard.js?id=62896779642616a310ca",
+    "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~f48e9e59.js": "/chunks/dashboard~chunks/files~chunks/invoices~chunks/pages~chunks/plans~chunks/settings-payment-meth~f48e9e59.js?id=ec6fdf1d9f2a839f31cf",
+    "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js": "/chunks/dashboard~chunks/invoices~chunks/pages~chunks/plan-subscribers~chunks/plans~chunks/settings-i~0e2a0654.js?id=d7795f20187163939276",
+    "/chunks/database.js": "/chunks/database.js?id=c7aa7caa9126b1ecdffa",
+    "/chunks/dynamic-page.js": "/chunks/dynamic-page.js?id=1d8ee4bfbcde69c97021",
+    "/chunks/environment-setup.js": "/chunks/environment-setup.js?id=86093752b39920044fda",
+    "/chunks/files.js": "/chunks/files.js?id=dec50700cb69d226f79d",
+    "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js": "/chunks/files~chunks/settings-subscription~chunks/shared-files~chunks/shared-page~chunks/user-subscription.js?id=e285e842f58178d681c4",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.js": "/chunks/files~chunks/shared-files~chunks/shared-page.js?id=01d476c03878c14a922c",
+    "/chunks/files~chunks/shared-page.js": "/chunks/files~chunks/shared-page.js?id=825fdc29b64056380220",
+    "/chunks/forgotten-password.js": "/chunks/forgotten-password.js?id=06fc72f0d9a057bb8f18",
+    "/chunks/installation-disclaimer.js": "/chunks/installation-disclaimer.js?id=8a5dfc3d2d07db1102db",
+    "/chunks/invoices.js": "/chunks/invoices.js?id=2352574bc22e5e3f7dac",
+    "/chunks/landing-page.js": "/chunks/landing-page.js?id=dabf50b10edb2ae2f388",
+    "/chunks/not-found-shared.js": "/chunks/not-found-shared.js?id=6666b81edc5ff6f60e82",
+    "/chunks/page-edit.js": "/chunks/page-edit.js?id=f7e24a5841604313332a",
+    "/chunks/pages.js": "/chunks/pages.js?id=7ec1c496031ff8478b51",
+    "/chunks/plan.js": "/chunks/plan.js?id=cc041fb9c2cb9ad8f0ff",
+    "/chunks/plan-create.js": "/chunks/plan-create.js?id=a66d8ae3a6edd08b755b",
+    "/chunks/plan-delete.js": "/chunks/plan-delete.js?id=0732885b6e0839afe66e",
+    "/chunks/plan-settings.js": "/chunks/plan-settings.js?id=445ca1affcefaf37cbfc",
+    "/chunks/plan-subscribers.js": "/chunks/plan-subscribers.js?id=8372954a6c160302859d",
+    "/chunks/plans.js": "/chunks/plans.js?id=0941e8c0e85e81162cc8",
+    "/chunks/profile.js": "/chunks/profile.js?id=b91a5757f57bdaee120d",
+    "/chunks/profile~chunks/settings-password.js": "/chunks/profile~chunks/settings-password.js?id=a44394b1fa09f996a9fd",
+    "/chunks/purchase-code.js": "/chunks/purchase-code.js?id=8c92667fa59dc9fd7ac7",
+    "/chunks/settings.js": "/chunks/settings.js?id=0be829a409b9cbcb9bfc",
+    "/chunks/settings-create-payment-methods.js": "/chunks/settings-create-payment-methods.js?id=25225a758b04d6d48617",
+    "/chunks/settings-invoices.js": "/chunks/settings-invoices.js?id=c7499d2d79bf9620dfa5",
+    "/chunks/settings-password.js": "/chunks/settings-password.js?id=015ead5623aee1a543cf",
+    "/chunks/settings-payment-methods.js": "/chunks/settings-payment-methods.js?id=1810248d2c5931651314",
+    "/chunks/settings-storage.js": "/chunks/settings-storage.js?id=013b6f15f907caaecd1e",
+    "/chunks/settings-subscription.js": "/chunks/settings-subscription.js?id=6172a89afe3b27cb76cd",
+    "/chunks/setup-wizard.js": "/chunks/setup-wizard.js?id=99b4f321902fe6b0eb23",
+    "/chunks/shared-files.js": "/chunks/shared-files.js?id=1860b9031f41ed46d0e0",
+    "/chunks/shared-page.js": "/chunks/shared-page.js?id=e1ec047f428e84866150",
+    "/chunks/sign-in.js": "/chunks/sign-in.js?id=ddb0ae9561462e691ce3",
+    "/chunks/sign-up.js": "/chunks/sign-up.js?id=be89f6dcf7372d23668f",
+    "/chunks/stripe-credentials.js": "/chunks/stripe-credentials.js?id=0e09f1509a73646c3198",
+    "/chunks/subscription-plans.js": "/chunks/subscription-plans.js?id=7a4e1ba1d08b0bb37453",
+    "/chunks/subscription-service.js": "/chunks/subscription-service.js?id=f672876adcf877e6e126",
+    "/chunks/upgrade.js": "/chunks/upgrade.js?id=1c94ed3f8c2c366f730b",
+    "/chunks/upgrade-billing.js": "/chunks/upgrade-billing.js?id=638ac716c4995894563c",
+    "/chunks/upgrade-billing~chunks/upgrade-plan.js": "/chunks/upgrade-billing~chunks/upgrade-plan.js?id=7e805915ede7c330c6d1",
+    "/chunks/upgrade-plan.js": "/chunks/upgrade-plan.js?id=ecc3c773b7c8ff422cf7",
+    "/chunks/user.js": "/chunks/user.js?id=1e0f9c8cab76e5ef871f",
+    "/chunks/user-create.js": "/chunks/user-create.js?id=fb808e071ab049b55490",
+    "/chunks/user-delete.js": "/chunks/user-delete.js?id=9c7eb4dab2be288cb884",
+    "/chunks/user-detail.js": "/chunks/user-detail.js?id=43545e2d110b40a47756",
+    "/chunks/user-invoices.js": "/chunks/user-invoices.js?id=b05dcb7e7ad2f4959e52",
+    "/chunks/user-password.js": "/chunks/user-password.js?id=57fe622e9a03e834d6fa",
+    "/chunks/user-storage.js": "/chunks/user-storage.js?id=76465e9a36a2ab78eff3",
+    "/chunks/user-subscription.js": "/chunks/user-subscription.js?id=e9528debb38dc1654cef",
+    "/chunks/users.js": "/chunks/users.js?id=78680d85246eba5b175f",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.3a8ca78e1f100c468966.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.3a8ca78e1f100c468966.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.0cf09ff2d023d1ca68c9.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.0cf09ff2d023d1ca68c9.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.1978227da32e3d1b69b9.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.1978227da32e3d1b69b9.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.94a9467062a24f30950b.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.94a9467062a24f30950b.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.9973da3006dde5ad2bba.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.9973da3006dde5ad2bba.hot-update.js",
+    "/chunks/files~chunks/shared-files~chunks/shared-page.7d6f07abb5a12117ebc3.hot-update.js": "/chunks/files~chunks/shared-files~chunks/shared-page.7d6f07abb5a12117ebc3.hot-update.js"
 }
diff --git a/resources/js/components/FilesView/FileItemGrid.vue b/resources/js/components/FilesView/FileItemGrid.vue
index 47bb0f07..2f0044e0 100644
--- a/resources/js/components/FilesView/FileItemGrid.vue
+++ b/resources/js/components/FilesView/FileItemGrid.vue
@@ -568,10 +568,10 @@ export default {
     }
 
     .select-box-active {
-        background-color: lighten($dark_mode_foreground, 10%);
+        background-color: #f4f5f6;
 
         .icon {
-            stroke: $theme;
+            stroke: $text;
         }
     }
 
diff --git a/resources/js/components/FilesView/FileItemList.vue b/resources/js/components/FilesView/FileItemList.vue
index b3d5e148..97f2b01f 100644
--- a/resources/js/components/FilesView/FileItemList.vue
+++ b/resources/js/components/FilesView/FileItemList.vue
@@ -1,21 +1,10 @@
 <template>
-	<div class="file-wrapper" 
-	@click.stop="clickedItem" 
-	@dblclick="goToItem" 
-	spellcheck="false">
-		<!--List preview-->
-		<div
-			:draggable="canDrag"
-			@dragstart="$emit('dragstart')"
-			@drop="
+    <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 }"
-		>
-			<!-- MultiSelecting for the mobile version -->
+				area = false" @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">
                     <div class="select-box" :class="{'select-box-active' : isClicked } ">
@@ -24,7 +13,7 @@
                 </div>
             </transition>
 
-			<!--Thumbnail for item-->
+            <!--Thumbnail for item-->
             <div class="icon-item">
                 <!--If is file or image, then link item-->
                 <span v-if="isFile" class="file-icon-text">
@@ -32,41 +21,41 @@
                 </span>
 
                 <!--Folder thumbnail-->
-                <FontAwesomeIcon v-if="isFile" class="file-icon" icon="file" />
+                <FontAwesomeIcon v-if="isFile" class="file-icon" icon="file"/>
 
                 <!--Image thumbnail-->
-                <img loading="lazy" v-if="isImage" class="image" :src="data.thumbnail" :alt="data.name" />
+                <img loading="lazy" 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" />
+                <FontAwesomeIcon v-if="isFolder" :class="{ 'is-deleted': isDeleted }" class="folder-icon" icon="folder"/>
             </div>
 
             <!--Name-->
-			<div class="item-name">
-				<b ref="name" @input="renameItem" @keydown.delete.stop :contenteditable="canEditName" class="name">
-					{{ itemName }}
-				</b>
+            <div class="item-name">
+                <b ref="name" @input="renameItem" @keydown.delete.stop :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>
 
-			<!--Show item actions-->
+            <!--Show item actions-->
             <transition name="slide-from-right">
                 <div class="actions" v-if="$isMobile() && !($checkPermission('visitor') && isFolder || mobileMultiSelect)">
                     <span @click.stop="showItemActions" class="show-actions">
@@ -74,221 +63,221 @@
                     </span>
                 </div>
             </transition>
-		</div>
-	</div>
+        </div>
+    </div>
 </template>
 
 <script>
-import { LinkIcon, UserPlusIcon , CheckIcon } from 'vue-feather-icons'
+import { LinkIcon, UserPlusIcon, CheckIcon } 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,
-		CheckIcon,
-	},
-	computed: {
-		...mapGetters(['FilePreviewType', 'fileInfoDetail' ]),
-		...mapGetters({allData: 'data'}),
-		isClicked() {	
-			return this.fileInfoDetail.some(element => element.unique_id == this.data.unique_id)	
-		},
-		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 {
-			area: false,
-			itemName: undefined,
-			mobileMultiSelect:false
-		}
-	},
-	methods: {
-		drop() {
-			events.$emit('drop')
-		},
-		showItemActions() {
-			// Load file info detail
-			this.$store.commit('CLEAR_FILEINFO_DETAIL')
-			this.$store.commit('GET_FILEINFO_DETAIL', this.data)
+    name: 'FileItemList',
+    props: ['data'],
+    components: {
+        UserPlusIcon,
+        LinkIcon,
+        CheckIcon
+    },
+    computed: {
+        ...mapGetters(['FilePreviewType', 'fileInfoDetail']),
+        ...mapGetters({ allData: 'data' }),
+        isClicked() {
+            return this.fileInfoDetail.some(element => element.unique_id == this.data.unique_id)
+        },
+        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 {
+            area: false,
+            itemName: undefined,
+            mobileMultiSelect: false
+        }
+    },
+    methods: {
+        drop() {
+            events.$emit('drop')
+        },
+        showItemActions() {
+            // Load file info detail
+            this.$store.commit('CLEAR_FILEINFO_DETAIL')
+            this.$store.commit('GET_FILEINFO_DETAIL', this.data)
 
-			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('unClick')
-			
-			if(!this.$isMobile()) {
+            this.area = true
+        },
+        dragLeave() {
+            this.area = false
+        },
+        clickedItem(e) {
+            events.$emit('unClick')
 
-				if( (e.ctrlKey || e.metaKey ) && !e.shiftKey) {
-					// Click + Ctrl
+            if (!this.$isMobile()) {
 
-					if(this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)){
-						this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL',this.data )
-					}else {
-						this.$store.commit('GET_FILEINFO_DETAIL', this.data)
-					}
-				}else if (e.shiftKey){
-					// Click + Shift
-					let lastItem = this.allData.indexOf(this.fileInfoDetail[this.fileInfoDetail.length -1])
-					let clickedItem = this.allData.indexOf(this.data)
+                if ((e.ctrlKey || e.metaKey) && !e.shiftKey) {
+                    // Click + Ctrl
 
-					// If Click + Shift + Ctrl dont remove already selected items
-					if(!e.ctrlKey && !e.metaKey ) {
-						this.$store.commit('CLEAR_FILEINFO_DETAIL')
-					}
-					
-					//Shift selecting from top to bottom
-					if(lastItem < clickedItem) {
-						for(let i=lastItem ; i<=clickedItem; i++ ) {
-							this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
-						}
-					//Shift selecting from bottom to top
-					}else {
-						for(let i=lastItem ; i>=clickedItem; i-- ) {
-							this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
-						}
-					}
-				}else {
-					// Click
-					this.$store.commit('CLEAR_FILEINFO_DETAIL')
-					this.$store.commit('GET_FILEINFO_DETAIL', this.data)
-				}
-			}
+                    if (this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) {
+                        this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data)
+                    } else {
+                        this.$store.commit('GET_FILEINFO_DETAIL', this.data)
+                    }
+                } else if (e.shiftKey) {
+                    // Click + Shift
+                    let lastItem = this.allData.indexOf(this.fileInfoDetail[this.fileInfoDetail.length - 1])
+                    let clickedItem = this.allData.indexOf(this.data)
 
-			if(!this.mobileMultiSelect && this.$isMobile()){
-				// 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 Click + Shift + Ctrl dont remove already selected items
+                    if (!e.ctrlKey && !e.metaKey) {
+                        this.$store.commit('CLEAR_FILEINFO_DETAIL')
+                    }
 
-				if (this.$isMobile()) {
-					if (this.isImage || this.isVideo || this.isAudio) {
-						this.$store.commit('GET_FILEINFO_DETAIL', this.data)
-						events.$emit('fileFullPreview:show')
-					}
-				}
-			}
+                    //Shift selecting from top to bottom
+                    if (lastItem < clickedItem) {
+                        for (let i = lastItem; i <= clickedItem; i++) {
+                            this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
+                        }
+                        //Shift selecting from bottom to top
+                    } else {
+                        for (let i = lastItem; i >= clickedItem; i--) {
+                            this.$store.commit('GET_FILEINFO_DETAIL', this.allData[i])
+                        }
+                    }
+                } else {
+                    // Click
+                    this.$store.commit('CLEAR_FILEINFO_DETAIL')
+                    this.$store.commit('GET_FILEINFO_DETAIL', this.data)
+                }
+            }
 
-			if(this.mobileMultiSelect && this.$isMobile()) {
-				if(this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) {
-					this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data )
-				}else {
-					this.$store.commit('GET_FILEINFO_DETAIL', this.data)
-				}
-			}
+            if (!this.mobileMultiSelect && this.$isMobile()) {
+                // 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 }])
+                    }
+                }
 
-			// Get target classname
-			let itemClass = e.target.className
+                if (this.$isMobile()) {
+                    if (this.isImage || this.isVideo || this.isAudio) {
+                        this.$store.commit('GET_FILEINFO_DETAIL', this.data)
+                        events.$emit('fileFullPreview:show')
+                    }
+                }
+            }
 
-			if (['name', 'icon', 'file-link', 'file-icon-text'].includes(itemClass)) return
-		},
-		goToItem() {
-			if (this.isImage || this.isVideo || this.isAudio) {
-				events.$emit('fileFullPreview:show')
+            if (this.mobileMultiSelect && this.$isMobile()) {
+                if (this.fileInfoDetail.some(item => item.unique_id === this.data.unique_id)) {
+                    this.$store.commit('REMOVE_ITEM_FILEINFO_DETAIL', this.data)
+                } else {
+                    this.$store.commit('GET_FILEINFO_DETAIL', this.data)
+                }
+            }
 
-			} else if (this.isFile || !this.isFolder && !this.isPdf && !this.isVideo && !this.isAudio && !this.isImage) {
-				this.$downloadFile(this.data.file_url, this.data.name + '.' + this.data.mimetype)
+            // Get target classname
+            let itemClass = e.target.className
 
-			} else if (this.isFolder) {
+            if (['name', 'icon', 'file-link', 'file-icon-text'].includes(itemClass)) return
+        },
+        goToItem() {
+            if (this.isImage || this.isVideo || this.isAudio) {
+                events.$emit('fileFullPreview:show')
 
-				//Clear selected items after open another folder
-				this.$store.commit('CLEAR_FILEINFO_DETAIL')
+            } else if (this.isFile || !this.isFolder && !this.isPdf && !this.isVideo && !this.isAudio && !this.isImage) {
+                this.$downloadFile(this.data.file_url, this.data.name + '.' + this.data.mimetype)
 
-				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
+            } else if (this.isFolder) {
 
-			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
+                //Clear selected items after open another folder
+                this.$store.commit('CLEAR_FILEINFO_DETAIL')
 
-		events.$on('mobileSelecting:start', () => {
-			this.mobileMultiSelect = true			
-			this.$store.commit('CLEAR_FILEINFO_DETAIL')			
-		})
+                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
 
-		events.$on('mobileSelecting:stop', () => {
-			this.mobileMultiSelect = false		
-			this.$store.commit('CLEAR_FILEINFO_DETAIL')
-		})
+            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
 
-		// Change item name
-		events.$on('change:name', (item) => {
-			if (this.data.unique_id == item.unique_id) this.itemName = item.name
-		})
-	}
+        events.$on('mobileSelecting:start', () => {
+            this.mobileMultiSelect = true
+            this.$store.commit('CLEAR_FILEINFO_DETAIL')
+        })
+
+        events.$on('mobileSelecting:stop', () => {
+            this.mobileMultiSelect = false
+            this.$store.commit('CLEAR_FILEINFO_DETAIL')
+        })
+
+        // Change item name
+        events.$on('change:name', (item) => {
+            if (this.data.unique_id == item.unique_id) this.itemName = item.name
+        })
+    }
 }
 </script>
 
@@ -320,298 +309,302 @@ export default {
 }
 
 
-
 .check-select {
     margin-right: 15px;
     margin-left: 6px;
 
-	.select-box {
-		width: 20px;
-		height: 20px;
-		background-color: darken($light_background, 5%);
-		display: flex;
-    	justify-content: center;
-		align-items: center;
-		border-radius: 5px;
-  		box-shadow: 0 3px 15px 2px hsla(220, 36%, 16%, 0.05);
-	}
-	.select-box-active {
-		background-color: $text ;
-		.icon {
-			stroke: white;
-		}
-	}
+    .select-box {
+        width: 20px;
+        height: 20px;
+        background-color: darken($light_background, 5%);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 5px;
+    }
+
+    .select-box-active {
+        background-color: #f4f5f6;
+
+        .icon {
+            stroke: $text;
+        }
+    }
 }
 
 .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;
-		// background-color: white ;
+    .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;
+        }
 
-		&.no-clicked {
-			background: white !important;
-                    .item-name {
-                        .name {
-                            color: $text !important ;
-                        }
-                    }
-		}
+        &.no-clicked {
+            background: white !important;
 
-		&:hover ,
-		&.is-clicked {
-			border-radius: 8px;
-			background: $light_background  ;
-			.item-name .name {
-				color: $theme ;
-			}
-		}
-	}
+            .item-name {
+                .name {
+                    color: $text !important;
+                }
+            }
+        }
+
+        &:hover,
+        &.is-clicked {
+            border-radius: 8px;
+            background: $light_background;
+
+            .item-name .name {
+                color: $theme;
+            }
+        }
+    }
 }
 
 @media (prefers-color-scheme: dark) {
-	.check-select {
+    .check-select {
 
         .select-box {
-			background-color: lighten($dark_mode_foreground, 10%);
-		}
+            background-color: lighten($dark_mode_foreground, 10%);
+        }
 
-		.select-box-active {
-			background-color: lighten($dark_mode_foreground, 10%);
+        .select-box-active {
+            background-color: lighten($dark_mode_foreground, 10%);
 
             .icon {
-				stroke: $theme;
-			}
-		}
-	}
+                stroke: $theme;
+            }
+        }
+    }
 
-	.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%);
-					}
-				}
-			}
-		}
-
-		.file-item {
-			&.no-clicked {
-				background: $dark_mode_background !important;
-				.file-icon {
-
-                        path {
-                            fill: $dark_mode_foreground !important;
-                            stroke: #2F3C54 ;
-                        }
+            .folder-icon {
+                &.is-deleted {
+                    path {
+                        fill: lighten($dark_mode_foreground, 5%);
                     }
-                    .item-name {
+                }
+            }
+        }
 
-                        .name {
-                            color: $dark_mode_text_primary !important;
-                        }
+        .file-item {
+            &.no-clicked {
+                background: $dark_mode_background !important;
+
+                .file-icon {
+
+                    path {
+                        fill: $dark_mode_foreground !important;
+                        stroke: #2F3C54;
                     }
-			}
-				&:hover,
-				&.is-clicked {
-					background: $dark_mode_foreground ;
+                }
 
-					.item-name .name {
-						color: $theme ;
-				}
+                .item-name {
 
-					.file-icon {
-						path {
-							fill: $dark_mode_background ;
-						}
-					}
-			}
-		}
+                    .name {
+                        color: $dark_mode_text_primary !important;
+                    }
+                }
+            }
 
-		.item-name {
-			.name {
-				color: $dark_mode_text_primary;
-			}
+            &:hover,
+            &.is-clicked {
+                background: $dark_mode_foreground;
 
-			.item-size,
-			.item-length {
-				color: $dark_mode_text_secondary;
-			}
-		}
-	}
+                .item-name .name {
+                    color: $theme;
+                }
+
+                .file-icon {
+                    path {
+                        fill: $dark_mode_background;
+                    }
+                }
+            }
+        }
+
+        .item-name {
+            .name {
+                color: $dark_mode_text_primary;
+            }
+
+            .item-size,
+            .item-length {
+                color: $dark_mode_text_secondary;
+            }
+        }
+    }
 }
 </style>
\ No newline at end of file