diff --git a/frontend/src/components/files/ListingItem.vue b/frontend/src/components/files/ListingItem.vue
index 7c6c9f57..b66678e5 100644
--- a/frontend/src/components/files/ListingItem.vue
+++ b/frontend/src/components/files/ListingItem.vue
@@ -12,6 +12,7 @@
     :aria-label="name"
     :aria-selected="isSelected"
     ref="item"
+    :class="listingClass"
   >
     <div>
       <img
@@ -101,6 +102,13 @@ export default {
       if (this.type === "video") return "movie";
       return "insert_drive_file";
     },
+    listingClass() {
+      if (this.isDir) return "folder";
+      if (this.type === "image") return "image";
+      if (this.type === "audio") return "audio";
+      if (this.type === "video") return "video";
+      return "file";
+    },
     isDraggable() {
       return this.readOnly == undefined && this.user.perm.rename;
     },
diff --git a/frontend/src/css/listing.css b/frontend/src/css/listing.css
index f7cc9211..c2314a44 100644
--- a/frontend/src/css/listing.css
+++ b/frontend/src/css/listing.css
@@ -53,6 +53,14 @@
   vertical-align: bottom;
 }
 
+#listing .item.folder i {
+  color: var(--blue);
+}
+
+#listing .item[aria-selected=true].folder i {
+  color: #fff;
+}
+
 #listing .item img {
   width: 4em;
   height: 4em;