diff --git a/public/app.js b/public/app.js
index 576119f..2f746ce 100644
--- a/public/app.js
+++ b/public/app.js
@@ -242,7 +242,7 @@
           <li class="nav-dir collapsed" data-path="${escapeHtml(item.path)}">
             <div class="nav-dir-header" data-dir-path="${escapeHtml(item.path)}">
               <span class="nav-dir-arrow">▾</span>
-              <span class="nav-dir-icon" aria-hidden="true"></span>
+              <span class="nav-dir-icon" aria-hidden="true"><i data-lucide="folder" aria-hidden="true"></i></span>
               <span class="nav-dir-name">${escapeHtml(item.name)}</span>
             </div>
             <div class="nav-dir-children">
diff --git a/public/style.css b/public/style.css
index 447ae0e..9328b98 100644
--- a/public/style.css
+++ b/public/style.css
@@ -98,8 +98,8 @@ a:hover { color: var(--brand-strong); }
   color: #fff; font-weight: 700; box-shadow: var(--shadow-sm);
 }
 .sidebar-brand-text { display: grid; line-height: 1.3; }
-.sidebar-brand-text strong { font-size: 15px; }
-.sidebar-brand-text small { color: var(--text-muted); font-size: 12px; }
+.sidebar-brand-text strong { font-size: 16px; }
+.sidebar-brand-text small { color: var(--text-muted); font-size: 12px; margin-top: 4px; }
 .search-box input {
   width: 100%; border: 1px solid var(--border);
   border-radius: 999px; padding: 11px 14px;
@@ -112,46 +112,32 @@ a:hover { color: var(--brand-strong); }
 .sidebar-nav { flex: 1; overflow: auto; padding: 4px 2px 0 0; }
 .nav-tree { list-style: none; margin: 0; padding: 0; }
 .nav-tree ul { list-style: none; margin: 0; padding: 0; }
-.nav-dir { margin-bottom: 4px; }
+.nav-dir { margin-bottom: 4px; letter-spacing: 0.09em; }
 .nav-dir-header {
   display: flex; align-items: center; gap: 8px;
   padding: 10px 12px; border-radius: 12px;
-  color: var(--text-muted); font-size: 13px; font-weight: 600;
+  color: var(--text-muted); font-size: 15px; font-weight: 700;
   cursor: pointer; user-select: none;
 }
 .nav-dir-header:hover { background: var(--bg-soft); color: var(--text); }
-.nav-dir-arrow { width: 14px; text-align: center; transition: transform var(--transition); color: var(--text-soft); }
+.nav-dir-arrow { display: none; }
 .nav-dir.collapsed .nav-dir-arrow { transform: rotate(-90deg); }
-.nav-dir-icon {
-  width: 12px;
-  height: 12px;
-  border-radius: 4px;
-  border: 1.5px solid currentColor;
-  position: relative;
-  flex: 0 0 auto;
-  opacity: 0.75;
-}
-.nav-dir-icon::after {
-  content: '';
-  position: absolute;
-  right: -1px;
-  top: -1px;
-  width: 4px;
-  height: 4px;
-  border-top: 1.5px solid currentColor;
-  border-right: 1.5px solid currentColor;
-  border-radius: 0 4px 0 0;
-  transform: skew(12deg);
-}
+.nav-dir-icon { display: none; }
 .nav-dir-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.nav-dir-children { overflow: hidden; padding-left: 10px; }
+.nav-dir-children {
+  overflow: hidden;
+  margin-left: 14px;
+  padding-left: 12px;
+  border-left: 1px solid var(--border);
+}
 .nav-dir.collapsed .nav-dir-children { max-height: 0 !important; }
 
 .nav-file {
   display: flex; align-items: center; gap: 10px;
-  margin: 2px 0; padding: 10px 12px 10px 28px;
+  margin: 2px 0; padding: 10px 15px 10px 12px;
   border-radius: 12px; color: var(--text);
   cursor: pointer; border: 1px solid transparent;
+  letter-spacing: 0.09em;
 }
 .nav-file:hover { background: var(--bg-soft); }
 .nav-file.active {
@@ -160,8 +146,8 @@ a:hover { color: var(--brand-strong); }
   box-shadow: var(--active-file-shadow);
 }
 .nav-file-icon {
-  width: 9px;
-  height: 9px;
+  width: 8px;
+  height: 8px;
   border-radius: 50%;
   background: currentColor;
   opacity: 0.45;