diff --git a/script.js b/script.js
index 5209ce8..d4f518d 100644
--- a/script.js
+++ b/script.js
@@ -25,11 +25,17 @@ fetch("/filelist")
       const result = fuse.search(query.toLowerCase()).reverse()
       const elements = result.slice(0, 200).map(x => {
         const file = x.item
+        const pathParts = file.path.split('/')
+        const filename = pathParts.pop()
+        const path = pathParts.length ? pathParts.join('/') + '/' : ''
+        
         return `<a href="${file.path}">
           <li>
             ${getFileIcon(file.path)}
             <span class="file-details">
-              <span class="filename">${file.path}</span>
+              <span class="filename">
+                <span class="filepath">${path}</span>${filename}
+              </span>
               <span class="filesize">${file.size}</span>
             </span>
           </li>
diff --git a/styles.css b/styles.css
index c64f11e..d480e1a 100644
--- a/styles.css
+++ b/styles.css
@@ -71,10 +71,17 @@ li:hover {
 
 .filename {
   flex: 1;
+  color: #000;
+  font-weight: 500;
 }
 
 .filesize {
   font-size: 0.8em;
   color: #666;
   white-space: nowrap;
+}
+
+.filepath {
+  color: #666;
+  font-weight: normal;
 } 
\ No newline at end of file