diff --git a/static/app.css b/static/app.css
index 925e3c2..01e36d8 100644
--- a/static/app.css
+++ b/static/app.css
@@ -78,8 +78,8 @@ li {
 }
 
 /* mouse symbol for links */
-li.directory-item, li.file-item,
-li.directory-item a, li.file-item a {
+div.directory-item, li.directory-item, li.file-item,
+div.directory-item a, li.directory-item a, li.file-item a {
   cursor: pointer;
 }
 
diff --git a/static/app.js b/static/app.js
index 0a824de..045dd71 100644
--- a/static/app.js
+++ b/static/app.js
@@ -27,19 +27,29 @@ function renderContent(data) {
   });
   document.getElementById('breadcrumbs').innerHTML = breadcrumbHTML;
 
-  // Build the HTML for directories and files.
+
+  // Render directories.
   let contentHTML = '';
   if (data.directories.length > 0) {
     contentHTML += '<ul>';
-    data.directories.forEach(dir => {
-      contentHTML += `
-        <li class="directory-item">
-          📁 <a href="#" class="directory-link" data-path="${dir.path}">${dir.name}</a>
-        </li>`;
-    });
-    contentHTML += '</ul>';
+    // Check if every directory name is short (≤15 characters)
+    const areAllShort = data.directories.every(dir => dir.name.length <= 15);
+    if (areAllShort) {
+      contentHTML += '<div class="directories-grid">';
+      data.directories.forEach(dir => {
+        contentHTML += `<div class="directory-item">📁 <a href="#" class="directory-link" data-path="${dir.path}">${dir.name}</a></div>`;
+      });
+      contentHTML += '</div>';
+    } else {
+      contentHTML += '<ul>';
+      data.directories.forEach(dir => {
+        contentHTML += `<li class="directory-item">📁 <a href="#" class="directory-link" data-path="${dir.path}">${dir.name}</a></li>`;
+      });
+      contentHTML += '</ul>';
+    }
   }
 
+  // Render files.
   if (data.files.length > 0) {
     contentHTML += '<ul>';
     data.files.forEach((file, idx) => {
@@ -64,6 +74,19 @@ function renderContent(data) {
   // Insert the generated HTML into a container in the DOM.
   document.getElementById('content').innerHTML = contentHTML;
 
+  // Now attach the event listeners for directories.
+  document.querySelectorAll('div.directory-item').forEach(li => {
+    li.addEventListener('click', function(e) {
+      // Only trigger if the click did not start on an <a>.
+      if (!e.target.closest('a')) {
+        const anchor = li.querySelector('a.directory-link');
+        if (anchor) {
+          anchor.click();
+        }
+      }
+    });
+  });
+
   // Now attach the event listeners for directories.
   document.querySelectorAll('li.directory-item').forEach(li => {
     li.addEventListener('click', function(e) {