diff --git a/docker-compose.yml b/docker-compose.yml
index e19f30d..d89b068 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -16,4 +16,4 @@ services:
       - /volume1/files/training:/app/courses
       # Mount a local directory for user data/progress
       - /volume2/docker/offlineu/data:/app/data
-    restart: unless-stopped
\ No newline at end of file
+    restart: unless-stopped
diff --git a/templates/course_dashboard.html b/templates/course_dashboard.html
index 9d2e65a..2773c82 100644
--- a/templates/course_dashboard.html
+++ b/templates/course_dashboard.html
@@ -698,20 +698,28 @@
                         return;
                     }
 
-                    container.innerHTML = groupNames.map(group => `
-                        <div style="margin-bottom: 20px;">
-                            <div style="font-weight:bold; color:#00a0ff; border-bottom:1px solid #444; padding-bottom:4px; margin-bottom:8px;">
-                                📁 ${group}
-                            </div>
-                            ${data.groups[group].map(course => `
-                                <div class="library-course"
-                                     onclick="loadCoursePath('${course.path.replace(/'/g, "\\'")}')"
-                                     style="background:#333; border-radius:5px; padding:10px 14px; margin:6px 0;
-                                            cursor:pointer; display:flex; justify-content:space-between; align-items:center;">
-                                    <span>🎓 ${course.name}</span>
-                                    <span style="color:#999; font-size:12px;">${course.media_files} media file${course.media_files === 1 ? '' : 's'}</span>
+                    container.innerHTML = groupNames.map((group, i) => `
+                        <div class="tree-item">
+                            <div class="tree-header directory" onclick="toggleTree(this)">
+                                <div class="tree-title">
+                                    <span class="tree-icon">📁</span>
+                                    <span class="tree-name">${group}</span>
+                                    <span class="tree-stats">${data.groups[group].length} course${data.groups[group].length === 1 ? '' : 's'}</span>
                                 </div>
-                            `).join('')}
+                                <button class="tree-toggle">▶</button>
+                            </div>
+                            <div class="tree-content">
+                                ${data.groups[group].map(course => `
+                                    <div class="lesson-item"
+                                         onclick="loadCoursePath('${course.path.replace(/'/g, "\\'")}')">
+                                        <div class="lesson-title">
+                                            <span class="lesson-icon">🎓</span>
+                                            <span>${course.name}</span>
+                                        </div>
+                                        <span class="lesson-meta">${course.media_files} media file${course.media_files === 1 ? '' : 's'}</span>
+                                    </div>
+                                `).join('')}
+                            </div>
                         </div>
                     `).join('');
                 })