diff --git a/frontend/app.js b/frontend/app.js
index bcecb0f..48814d1 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -60,6 +60,9 @@ function noteApp() {
         currentTheme: 'light',
         availableThemes: [],
         
+        // Icon rail / panel state
+        activePanel: 'files', // 'files', 'search', 'tags', 'settings'
+        
         // Folder state
         folderTree: [],
         allFolders: [],
diff --git a/frontend/index.html b/frontend/index.html
index 231fac3..694e958 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -519,6 +519,148 @@
             opacity: 0.4;
         }
         
+        /* Icon Rail (VS Code-style navigation) */
+        .icon-rail {
+            width: 44px;
+            min-width: 44px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 8px 0;
+            background-color: var(--bg-tertiary);
+            border-right: 1px solid var(--border-primary);
+        }
+        
+        .icon-rail-btn {
+            width: 36px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 8px;
+            margin-bottom: 4px;
+            cursor: pointer;
+            transition: background-color 0.15s ease, color 0.15s ease;
+            color: var(--text-tertiary);
+            background: transparent;
+            border: none;
+        }
+        
+        .icon-rail-btn:hover {
+            background-color: var(--bg-hover);
+            color: var(--text-primary);
+        }
+        
+        .icon-rail-btn.active {
+            background-color: var(--accent-light);
+            color: var(--accent-primary);
+        }
+        
+        .icon-rail-btn svg {
+            width: 20px;
+            height: 20px;
+        }
+        
+        .icon-rail-spacer {
+            flex: 1;
+        }
+        
+        .icon-rail-logo {
+            width: 28px;
+            height: 28px;
+            margin-bottom: 8px;
+            cursor: pointer;
+            opacity: 0.9;
+            transition: opacity 0.15s ease;
+        }
+        
+        .icon-rail-logo:hover {
+            opacity: 1;
+        }
+        
+        /* Sidebar panel (content area next to icon rail) */
+        .sidebar-panel {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            min-width: 0;
+            overflow: hidden;
+        }
+        
+        .sidebar-panel-header {
+            padding: 12px;
+            border-bottom: 1px solid var(--border-primary);
+            font-size: 11px;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            color: var(--text-tertiary);
+        }
+        
+        .sidebar-panel-content {
+            flex: 1;
+            overflow-y: auto;
+            overflow-x: hidden;
+        }
+        
+        /* Mobile bottom tabs */
+        @media (max-width: 768px) {
+            .icon-rail {
+                display: none;
+            }
+            
+            .mobile-bottom-tabs {
+                display: flex !important;
+                position: fixed;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                height: 56px;
+                background-color: var(--bg-secondary);
+                border-top: 1px solid var(--border-primary);
+                z-index: 1001;
+                padding-bottom: env(safe-area-inset-bottom);
+            }
+            
+            .mobile-bottom-tab {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                gap: 2px;
+                color: var(--text-tertiary);
+                background: none;
+                border: none;
+                cursor: pointer;
+                transition: color 0.15s ease;
+            }
+            
+            .mobile-bottom-tab.active {
+                color: var(--accent-primary);
+            }
+            
+            .mobile-bottom-tab svg {
+                width: 22px;
+                height: 22px;
+            }
+            
+            .mobile-bottom-tab span {
+                font-size: 10px;
+            }
+            
+            /* Add padding to main content for bottom tabs */
+            .main-content-mobile-padding {
+                padding-bottom: 56px;
+            }
+        }
+        
+        @media (min-width: 769px) {
+            .mobile-bottom-tabs {
+                display: none !important;
+            }
+        }
+        
         /* Scrollbar styling */
         .custom-scrollbar::-webkit-scrollbar,
         .editor-textarea::-webkit-scrollbar,
@@ -817,252 +959,125 @@
     <!-- Main Container -->
     <div class="flex h-screen overflow-hidden">
         
-        <!-- Sidebar -->
+        <!-- Sidebar with Icon Rail -->
         <div 
-            class="flex flex-col mobile-sidebar" 
+            class="flex mobile-sidebar" 
             :class="{'mobile-sidebar-open': mobileSidebarOpen}"
-            :style="'width: ' + sidebarWidth + 'px; background-color: var(--bg-secondary); border-right: 1px solid var(--border-primary); min-width: 200px; max-width: 600px;'"
+            :style="'width: ' + sidebarWidth + 'px; background-color: var(--bg-secondary); min-width: 200px; max-width: 600px;'"
         >
-            <!-- Header -->
-            <div class="flex-shrink-0 p-4 border-b" style="border-color: var(--border-primary);">
-                <button 
-                    class="flex items-center gap-2 mb-3 hover:opacity-80 transition"
+            <!-- Icon Rail -->
+            <div class="icon-rail">
+                <!-- Logo -->
+                <img 
+                    src="/static/logo.svg" 
+                    alt="NoteDiscovery" 
+                    class="icon-rail-logo"
                     @click="goHome()"
-                    aria-label="Go to homepage"
-                    style="background: none; border: none; outline: none; cursor: pointer;"
+                    title="Go to homepage"
                 >
-                    <img src="/static/logo.svg" alt="NoteDiscovery Logo" class="w-8 h-8">
-                    <h1 class="text-xl font-bold" style="color: var(--text-primary);" x-text="appName"></h1>
+                
+                <!-- Files -->
+                <button 
+                    class="icon-rail-btn" 
+                    :class="{'active': activePanel === 'files'}"
+                    @click="activePanel = 'files'"
+                    title="Files"
+                >
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
+                    </svg>
                 </button>
-                <!-- Logout Button (only show if auth is enabled) -->
-                <div x-data="{ authEnabled: false }" x-init="fetch('/api/config').then(r => r.json()).then(d => authEnabled = d.authentication?.enabled || false)">
-                    <a x-show="authEnabled" 
-                       href="/logout" 
-                       class="flex items-center justify-center gap-2 px-3 py-2 text-sm rounded transition-colors"
-                       style="background-color: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border-primary);"
-                       onmouseover="this.style.backgroundColor='var(--bg-hover)'; this.style.color='var(--text-primary)'"
-                       onmouseout="this.style.backgroundColor='var(--bg-secondary)'; this.style.color='var(--text-secondary)'">
-                        <span>🔒</span>
-                        <span>Logout</span>
-                    </a>
-                </div>
-            </div>
-            
-            <!-- Search -->
-            <div class="flex-shrink-0 px-2 py-2 border-b" style="border-color: var(--border-primary);">
-                <div class="relative">
-                    <input 
-                        type="text" 
-                        x-model="searchQuery"
-                        @input="searchNotes()"
-                        placeholder="Search..."
-                        class="w-full px-2 py-1.5 pl-7 pr-7 text-xs rounded focus:outline-none focus:ring-1"
-                        style="background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-primary);"
-                    >
-                    <!-- Search Icon -->
-                    <svg class="absolute left-2 top-2 w-3.5 h-3.5" style="color: var(--text-tertiary);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                
+                <!-- Search -->
+                <button 
+                    class="icon-rail-btn relative" 
+                    :class="{'active': activePanel === 'search'}"
+                    @click="activePanel = 'search'"
+                    title="Search"
+                >
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                     </svg>
-                    <!-- Clear Button -->
-                    <button
-                        x-show="searchQuery.length > 0"
-                        @click="searchQuery = ''; searchResults = []; currentSearchHighlight = ''; clearSearchHighlights();"
-                        class="absolute right-1.5 top-1.5 w-4 h-4 flex items-center justify-center rounded-full hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-                        style="color: var(--text-tertiary);"
-                        title="Clear search"
-                    >
-                        <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                        </svg>
-                    </button>
-                </div>
+                    <!-- Search results badge -->
+                    <span 
+                        x-show="searchQuery.trim() && searchResults.length > 0"
+                        class="absolute -top-1 -right-1 w-4 h-4 text-[9px] font-bold rounded-full flex items-center justify-center"
+                        style="background-color: var(--accent-primary); color: white;"
+                        x-text="searchResults.length > 9 ? '9+' : searchResults.length"
+                    ></span>
+                </button>
                 
-                <!-- Match Navigation (shown when there are matches in current note) -->
-                <div 
-                    x-show="totalMatches > 0" 
-                    class="flex items-center justify-between mt-1.5 px-2 py-0.5 rounded text-xs"
-                    style="background-color: var(--bg-secondary); color: var(--text-secondary);"
-                >
-                    <span x-text="`Match ${currentMatchIndex + 1} of ${totalMatches}`"></span>
-                    <div class="flex gap-1">
-                        <button
-                            @click="previousMatch()"
-                            class="px-2 py-1 rounded hover:bg-opacity-80 transition-colors"
-                            style="background-color: var(--bg-primary); color: var(--text-primary);"
-                            title="Previous match (Shift+F3)"
-                        >
-                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
-                            </svg>
-                        </button>
-                        <button
-                            @click="nextMatch()"
-                            class="px-2 py-1 rounded hover:bg-opacity-80 transition-colors"
-                            style="background-color: var(--bg-primary); color: var(--text-primary);"
-                            title="Next match (F3)"
-                        >
-                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
-                            </svg>
-                        </button>
-                    </div>
-                </div>
-            </div>
-            
-            <!-- Tags Panel -->
-            <div class="flex-shrink-0 border-b" style="border-color: var(--border-primary);">
-                <!-- Tags Header -->
-                <div 
-                    @click="tagsExpanded = !tagsExpanded"
-                    class="flex items-center justify-between px-3 py-2 cursor-pointer hover:bg-opacity-10 transition-colors"
-                    style="background-color: var(--bg-secondary);"
-                >
-                    <div class="flex items-center gap-2">
-                        <svg class="w-4 h-4" style="color: var(--text-tertiary);" fill="currentColor" viewBox="0 0 20 20">
-                            <path fill-rule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/>
-                        </svg>
-                        <span class="text-sm font-medium" style="color: var(--text-primary);">Tags</span>
-                        <span class="text-xs px-1.5 py-0.5 rounded" style="background-color: var(--bg-tertiary); color: var(--text-tertiary);" x-text="Object.keys(allTags).length"></span>
-                    </div>
-                    <svg 
-                        class="w-4 h-4 transform transition-transform"
-                        :class="{'rotate-180': tagsExpanded}"
-                        style="color: var(--text-tertiary);" 
-                        fill="none" 
-                        stroke="currentColor" 
-                        viewBox="0 0 24 24"
-                    >
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
-                    </svg>
-                </div>
-                
-                <!-- Tags List -->
-                <div x-show="tagsExpanded" class="px-3 py-2 max-h-48 overflow-y-auto custom-scrollbar">
-                    <!-- Clear Filter Button -->
-                    <div x-show="selectedTags.length > 0" class="mb-2">
-                        <button 
-                            @click="clearTagFilters()"
-                            class="w-full px-2 py-1 text-xs rounded flex items-center justify-center gap-1"
-                            style="background-color: var(--accent-primary); color: white;"
-                            title="Clear tag filters"
-                        >
-                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                            </svg>
-                            Clear (<span x-text="selectedTags.length"></span>)
-                        </button>
-                    </div>
-                    
-                    <!-- Tag Chips -->
-                    <div class="flex flex-wrap gap-1.5">
-                        <template x-for="[tag, count] in sortedTags" :key="tag">
-                            <button 
-                                @click="toggleTag(tag)"
-                                class="px-2 py-1 text-xs rounded-full transition-all hover:brightness-110"
-                                :style="selectedTags.includes(tag) 
-                                    ? 'background-color: var(--accent-primary); color: white; font-weight: 600;'
-                                    : 'background-color: var(--bg-tertiary); color: var(--text-primary);'"
-                                :title="`Filter by ${tag} (${count} notes)`"
-                            >
-                                <span x-text="tag"></span>
-                                <span class="opacity-75" x-text="` (${count})`"></span>
-                            </button>
-                        </template>
-                    </div>
-                    
-                    <!-- Empty State -->
-                    <div x-show="Object.keys(allTags).length === 0" class="text-xs text-center py-2" style="color: var(--text-tertiary);">
-                        No tags found. Add tags to notes using YAML frontmatter:
-                    </div>
-                </div>
-            </div>
-            
-            <!-- New Item Dropdown -->
-            <div class="flex-shrink-0 px-2 py-1.5 border-b" style="border-color: var(--border-primary);">
+                <!-- Tags -->
                 <button 
-                    @click="dropdownTargetFolder = ''; toggleNewDropdown($event)"
-                    class="w-full px-3 py-1.5 text-xs font-medium text-white rounded focus:outline-none focus:ring-1 flex items-center justify-center gap-1.5"
-                    style="background-color: var(--accent-primary);"
-                    onmouseover="this.style.backgroundColor='var(--accent-hover)'"
-                    onmouseout="this.style.backgroundColor='var(--accent-primary)'"
+                    class="icon-rail-btn relative" 
+                    :class="{'active': activePanel === 'tags'}"
+                    @click="activePanel = 'tags'"
+                    title="Tags"
                 >
-                    <span>+ New</span>
-                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+                    <svg fill="currentColor" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/>
+                    </svg>
+                    <!-- Selected tags badge -->
+                    <span 
+                        x-show="selectedTags.length > 0"
+                        class="absolute -top-1 -right-1 w-4 h-4 text-[9px] font-bold rounded-full flex items-center justify-center"
+                        style="background-color: var(--accent-primary); color: white;"
+                        x-text="selectedTags.length"
+                    ></span>
+                </button>
+                
+                <div class="icon-rail-spacer"></div>
+                
+                <!-- Graph -->
+                <button 
+                    class="icon-rail-btn"
+                    :class="{'active': showGraph}"
+                    @click="showGraph = true; initGraph()"
+                    title="Graph View"
+                >
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
+                    </svg>
+                </button>
+                
+                <!-- Settings -->
+                <button 
+                    class="icon-rail-btn" 
+                    :class="{'active': activePanel === 'settings'}"
+                    @click="activePanel = 'settings'"
+                    title="Settings"
+                >
+                    <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                     </svg>
                 </button>
             </div>
             
-            <!-- Notes List -->
-            <div class="flex-1 overflow-y-auto custom-scrollbar">
-                <template x-if="searchResults.length > 0">
-                    <div class="p-2">
-                        <div class="text-xs px-2 py-1 flex items-center justify-between" style="color: var(--text-tertiary);">
-                            <span x-text="searchQuery.trim() ? 'Search Results' : 'Filtered Notes'"></span>
-                            <span x-text="`${searchResults.length} note${searchResults.length === 1 ? '' : 's'}`"></span>
-                        </div>
-                        <template x-for="note in searchResults" :key="note.path">
-                            <div 
-                                @click="openItem(note.path, note.type, searchQuery)"
-                                class="px-2 py-1.5 text-sm cursor-pointer rounded"
-                                :style="currentNote === note.path ? 'background-color: var(--accent-light); color: var(--accent-primary);' : 'color: var(--text-primary);'"
-                                onmouseover="if(this.style.backgroundColor !== 'var(--accent-light)') this.style.backgroundColor='var(--bg-hover)'"
-                                onmouseout="if(this.style.backgroundColor !== 'var(--accent-light)') this.style.backgroundColor='transparent'"
-                                :title="note.path"
-                            >
-                                <div class="font-medium truncate" x-text="note.name"></div>
-                                <div class="text-xs truncate" style="color: var(--text-tertiary);" x-html="(note.matches && note.matches.length > 0) ? note.matches[0].context : (note.folder || 'Root')"></div>
-                            </div>
-                        </template>
-                    </div>
-                </template>
+            <!-- Sidebar Panel -->
+            <div class="sidebar-panel" style="border-right: 1px solid var(--border-primary);">
                 
-                <!-- No Results Message (when filters active but no matches) -->
-                <template x-if="searchResults.length === 0 && (selectedTags.length > 0 || searchQuery.trim())">
-                    <div class="p-6 text-center">
-                        <svg class="w-16 h-16 mx-auto mb-4 opacity-50" style="color: var(--text-tertiary);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
-                        </svg>
-                        <h3 class="text-lg font-medium mb-2" style="color: var(--text-primary);">No matches found</h3>
-                        <p class="text-sm mb-4" style="color: var(--text-secondary);">
-                            <template x-if="searchQuery.trim() && selectedTags.length > 0">
-                                <span>No notes match both your search and selected tags</span>
-                            </template>
-                            <template x-if="searchQuery.trim() && selectedTags.length === 0">
-                                <span>No notes contain "<span x-text="searchQuery"></span>"</span>
-                            </template>
-                            <template x-if="!searchQuery.trim() && selectedTags.length > 0">
-                                <span>No notes have the selected tag<span x-text="selectedTags.length > 1 ? 's' : ''"></span></span>
-                            </template>
-                        </p>
-                        <div class="flex gap-2 justify-center">
-                            <button 
-                                x-show="searchQuery.trim()"
-                                @click="searchQuery = ''; searchNotes();"
-                                class="px-3 py-1.5 text-sm rounded transition-colors"
-                                style="background-color: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-primary);"
-                                onmouseover="this.style.backgroundColor='var(--bg-hover)'"
-                                onmouseout="this.style.backgroundColor='var(--bg-secondary)'"
-                            >
-                                Clear search
-                            </button>
-                            <button 
-                                x-show="selectedTags.length > 0"
-                                @click="clearTagFilters()"
-                                class="px-3 py-1.5 text-sm rounded transition-colors"
-                                style="background-color: var(--bg-secondary); color: var(--text-primary); border: 1px solid var(--border-primary);"
-                                onmouseover="this.style.backgroundColor='var(--bg-hover)'"
-                                onmouseout="this.style.backgroundColor='var(--bg-secondary)'"
-                            >
-                                Clear tags
-                            </button>
-                        </div>
+                <!-- ==================== FILES PANEL ==================== -->
+                <div x-show="activePanel === 'files'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" class="flex flex-col h-full">
+                    <!-- Header with + New -->
+                    <div class="flex-shrink-0 px-2 py-2 border-b flex items-center justify-between" style="border-color: var(--border-primary);">
+                        <span class="text-xs font-semibold uppercase tracking-wide" style="color: var(--text-tertiary);">Files</span>
+                        <button 
+                            @click="dropdownTargetFolder = ''; toggleNewDropdown($event)"
+                            class="px-2 py-1 text-xs font-medium text-white rounded focus:outline-none flex items-center gap-1"
+                            style="background-color: var(--accent-primary);"
+                            onmouseover="this.style.backgroundColor='var(--accent-hover)'"
+                            onmouseout="this.style.backgroundColor='var(--accent-primary)'"
+                        >
+                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
+                            </svg>
+                            New
+                        </button>
                     </div>
-                </template>
-                
-                <!-- Folder Tree (when no filters active) -->
-                <template x-if="searchResults.length === 0 && selectedTags.length === 0 && !searchQuery.trim()">
-                    <div class="p-2">
+                    
+                    <!-- Folder Tree -->
+                    <div class="flex-1 overflow-y-auto custom-scrollbar p-2">
                         <div class="text-xs px-2 py-1 mb-2" style="color: var(--text-tertiary);">
                             <div class="flex items-center justify-between mb-1">
                                 <span>Folders & Notes</span>
@@ -1147,52 +1162,244 @@
                             </div>
                         </template>
                     </div>
-                </template>
-            </div>
-            
-            <!-- Footer -->
-            <div class="flex-shrink-0 p-3 border-t" style="border-color: var(--border-primary);">
-                <!-- Theme Selector and Graph Button -->
-                <div class="flex gap-2 mb-2">
-                    <select 
-                        x-model="currentTheme"
-                        @change="setTheme(currentTheme)"
-                        class="flex-1 px-2 py-1.5 text-xs rounded focus:outline-none focus:ring-2 focus:ring-opacity-50"
-                        style="background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-primary); cursor: pointer;"
-                        title="Select theme"
-                    >
-                        <template x-for="theme in availableThemes" :key="theme.id">
-                            <option :value="theme.id" x-text="theme.name"></option>
-                        </template>
-                    </select>
-                    <button 
-                        @click="showGraph = true; initGraph()"
-                        class="px-2 py-1.5 text-xs rounded transition-colors"
-                        :style="showGraph ? 'background-color: var(--accent-primary); color: white;' : 'background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-primary);'"
-                        title="View note connections graph"
-                    >
-                        🔗
-                    </button>
                 </div>
+                <!-- END FILES PANEL -->
                 
-                <!-- Stats -->
-                <div class="text-xs text-center" style="color: var(--text-tertiary);">
-                    <span x-text="notes.length"></span> notes
-                    <span class="mx-1">·</span>
-                    <span x-text="'v' + appVersion"></span>
-                    <span class="mx-1">·</span>
-                    <a 
-                        href="https://www.notediscovery.com" 
-                        target="_blank" 
-                        rel="noopener noreferrer"
-                        class="hover:underline"
-                        style="color: var(--accent-primary);"
-                        title="Visit NoteDiscovery website"
-                    >
-                        Website
-                    </a>                    
+                <!-- ==================== SEARCH PANEL ==================== -->
+                <div x-show="activePanel === 'search'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" class="flex flex-col h-full">
+                    <!-- Search Header -->
+                    <div class="flex-shrink-0 px-3 py-2 border-b" style="border-color: var(--border-primary);">
+                        <span class="text-xs font-semibold uppercase tracking-wide" style="color: var(--text-tertiary);">Search</span>
+                    </div>
+                    
+                    <!-- Search Input -->
+                    <div class="flex-shrink-0 px-2 py-2 border-b" style="border-color: var(--border-primary);">
+                        <div class="relative">
+                            <input 
+                                type="text" 
+                                x-model="searchQuery"
+                                @input="searchNotes()"
+                                placeholder="Search notes..."
+                                class="w-full px-2 py-1.5 pl-7 pr-7 text-xs rounded focus:outline-none focus:ring-1"
+                                style="background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-primary);"
+                            >
+                            <svg class="absolute left-2 top-2 w-3.5 h-3.5" style="color: var(--text-tertiary);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                            </svg>
+                            <button
+                                x-show="searchQuery.length > 0"
+                                @click="searchQuery = ''; searchResults = []; currentSearchHighlight = ''; clearSearchHighlights();"
+                                class="absolute right-1.5 top-1.5 w-4 h-4 flex items-center justify-center rounded-full hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
+                                style="color: var(--text-tertiary);"
+                                title="Clear search"
+                            >
+                                <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                                </svg>
+                            </button>
+                        </div>
+                        
+                        <!-- Match Navigation -->
+                        <div 
+                            x-show="totalMatches > 0" 
+                            class="flex items-center justify-between mt-1.5 px-2 py-0.5 rounded text-xs"
+                            style="background-color: var(--bg-tertiary); color: var(--text-secondary);"
+                        >
+                            <span x-text="`Match ${currentMatchIndex + 1} of ${totalMatches}`"></span>
+                            <div class="flex gap-1">
+                                <button @click="previousMatch()" class="px-2 py-1 rounded hover:bg-opacity-80" style="background-color: var(--bg-primary); color: var(--text-primary);" title="Previous (Shift+F3)">
+                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
+                                </button>
+                                <button @click="nextMatch()" class="px-2 py-1 rounded hover:bg-opacity-80" style="background-color: var(--bg-primary); color: var(--text-primary);" title="Next (F3)">
+                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Search Results -->
+                    <div class="flex-1 overflow-y-auto custom-scrollbar">
+                        <template x-if="searchQuery.trim() && searchResults.length > 0">
+                            <div class="p-2">
+                                <div class="text-xs px-2 py-1 mb-1" style="color: var(--text-tertiary);">
+                                    <span x-text="`${searchResults.length} result${searchResults.length === 1 ? '' : 's'}`"></span>
+                                </div>
+                                <template x-for="note in searchResults" :key="note.path">
+                                    <div 
+                                        @click="openItem(note.path, note.type, searchQuery)"
+                                        class="px-2 py-1.5 text-sm cursor-pointer rounded mb-1"
+                                        :style="currentNote === note.path ? 'background-color: var(--accent-light); color: var(--accent-primary);' : 'color: var(--text-primary);'"
+                                        onmouseover="if(this.style.backgroundColor !== 'var(--accent-light)') this.style.backgroundColor='var(--bg-hover)'"
+                                        onmouseout="if(this.style.backgroundColor !== 'var(--accent-light)') this.style.backgroundColor='transparent'"
+                                    >
+                                        <div class="font-medium truncate" x-text="note.name"></div>
+                                        <div class="text-xs truncate" style="color: var(--text-tertiary);" x-html="(note.matches && note.matches.length > 0) ? note.matches[0].context : (note.folder || 'Root')"></div>
+                                    </div>
+                                </template>
+                            </div>
+                        </template>
+                        <template x-if="searchQuery.trim() && searchResults.length === 0">
+                            <div class="p-6 text-center">
+                                <svg class="w-12 h-12 mx-auto mb-3 opacity-40" style="color: var(--text-tertiary);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                                </svg>
+                                <p class="text-sm" style="color: var(--text-tertiary);">No notes contain "<span x-text="searchQuery"></span>"</p>
+                            </div>
+                        </template>
+                        <template x-if="!searchQuery.trim()">
+                            <div class="p-6 text-center">
+                                <svg class="w-12 h-12 mx-auto mb-3 opacity-40" style="color: var(--text-tertiary);" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                                </svg>
+                                <p class="text-sm" style="color: var(--text-tertiary);">Type to search your notes</p>
+                            </div>
+                        </template>
+                    </div>
                 </div>
+                <!-- END SEARCH PANEL -->
+                
+                <!-- ==================== TAGS PANEL ==================== -->
+                <div x-show="activePanel === 'tags'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" class="flex flex-col h-full">
+                    <!-- Tags Header -->
+                    <div class="flex-shrink-0 px-3 py-2 border-b flex items-center justify-between" style="border-color: var(--border-primary);">
+                        <span class="text-xs font-semibold uppercase tracking-wide" style="color: var(--text-tertiary);">Tags</span>
+                        <span class="text-xs px-1.5 py-0.5 rounded" style="background-color: var(--bg-tertiary); color: var(--text-tertiary);" x-text="Object.keys(allTags).length"></span>
+                    </div>
+                    
+                    <!-- Active Filters -->
+                    <div x-show="selectedTags.length > 0" class="flex-shrink-0 px-2 py-2 border-b" style="border-color: var(--border-primary);">
+                        <button 
+                            @click="clearTagFilters()"
+                            class="w-full px-2 py-1.5 text-xs rounded flex items-center justify-center gap-1"
+                            style="background-color: var(--accent-primary); color: white;"
+                            title="Clear tag filters"
+                        >
+                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                            </svg>
+                            Clear Filters (<span x-text="selectedTags.length"></span>)
+                        </button>
+                    </div>
+                    
+                    <!-- Tag List -->
+                    <div class="flex-1 overflow-y-auto custom-scrollbar p-3">
+                        <template x-if="Object.keys(allTags).length > 0">
+                            <div class="flex flex-wrap gap-1.5">
+                                <template x-for="[tag, count] in sortedTags" :key="tag">
+                                    <button 
+                                        @click="toggleTag(tag)"
+                                        class="px-2 py-1 text-xs rounded-full transition-all hover:brightness-110"
+                                        :style="selectedTags.includes(tag) 
+                                            ? 'background-color: var(--accent-primary); color: white; font-weight: 600;'
+                                            : 'background-color: var(--bg-tertiary); color: var(--text-primary);'"
+                                        :title="`Filter by ${tag} (${count} notes)`"
+                                    >
+                                        <span x-text="tag"></span>
+                                        <span class="opacity-75" x-text="` (${count})`"></span>
+                                    </button>
+                                </template>
+                            </div>
+                        </template>
+                        <template x-if="Object.keys(allTags).length === 0">
+                            <div class="text-center py-6">
+                                <svg class="w-12 h-12 mx-auto mb-3 opacity-40" style="color: var(--text-tertiary);" fill="currentColor" viewBox="0 0 20 20">
+                                    <path fill-rule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/>
+                                </svg>
+                                <p class="text-sm mb-2" style="color: var(--text-tertiary);">No tags found</p>
+                                <p class="text-xs" style="color: var(--text-tertiary);">Add tags using YAML frontmatter</p>
+                            </div>
+                        </template>
+                    </div>
+                    
+                    <!-- Filtered Notes (shown when tags selected) -->
+                    <template x-if="selectedTags.length > 0">
+                        <div class="flex-shrink-0 border-t" style="border-color: var(--border-primary); max-height: 40%;">
+                            <div class="px-3 py-2 text-xs font-semibold uppercase tracking-wide" style="color: var(--text-tertiary);">
+                                Filtered Notes (<span x-text="searchResults.length"></span>)
+                            </div>
+                            <div class="overflow-y-auto custom-scrollbar" style="max-height: 200px;">
+                                <template x-for="note in searchResults" :key="note.path">
+                                    <div 
+                                        @click="openItem(note.path, note.type)"
+                                        class="px-3 py-1.5 text-sm cursor-pointer"
+                                        :style="currentNote === note.path ? 'background-color: var(--accent-light); color: var(--accent-primary);' : 'color: var(--text-primary);'"
+                                        onmouseover="if(this.style.backgroundColor !== 'var(--accent-light)') this.style.backgroundColor='var(--bg-hover)'"
+                                        onmouseout="if(this.style.backgroundColor !== 'var(--accent-light)') this.style.backgroundColor='transparent'"
+                                    >
+                                        <span class="truncate" x-text="note.name"></span>
+                                    </div>
+                                </template>
+                                <div x-show="searchResults.length === 0" class="px-3 py-4 text-center text-xs" style="color: var(--text-tertiary);">
+                                    No notes match selected tags
+                                </div>
+                            </div>
+                        </div>
+                    </template>
+                </div>
+                <!-- END TAGS PANEL -->
+                
+                <!-- ==================== SETTINGS PANEL ==================== -->
+                <div x-show="activePanel === 'settings'" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" class="flex flex-col h-full">
+                    <!-- Settings Header -->
+                    <div class="flex-shrink-0 px-3 py-2 border-b" style="border-color: var(--border-primary);">
+                        <span class="text-xs font-semibold uppercase tracking-wide" style="color: var(--text-tertiary);">Settings</span>
+                    </div>
+                    
+                    <div class="flex-1 overflow-y-auto custom-scrollbar p-3">
+                        <!-- Theme -->
+                        <div class="mb-4">
+                            <label class="block text-xs font-medium mb-2" style="color: var(--text-secondary);">Theme</label>
+                            <select 
+                                x-model="currentTheme"
+                                @change="setTheme(currentTheme)"
+                                class="w-full px-2 py-2 text-sm rounded focus:outline-none focus:ring-2 focus:ring-opacity-50"
+                                style="background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-primary); cursor: pointer;"
+                            >
+                                <template x-for="theme in availableThemes" :key="theme.id">
+                                    <option :value="theme.id" x-text="theme.name"></option>
+                                </template>
+                            </select>
+                        </div>
+                        
+                        <!-- Logout (if auth enabled) -->
+                        <div x-data="{ authEnabled: false }" x-init="fetch('/api/config').then(r => r.json()).then(d => authEnabled = d.authentication?.enabled || false)">
+                            <div x-show="authEnabled" class="mb-4">
+                                <label class="block text-xs font-medium mb-2" style="color: var(--text-secondary);">Account</label>
+                                <a 
+                                    href="/logout" 
+                                    class="flex items-center justify-center gap-2 px-3 py-2 text-sm rounded transition-colors"
+                                    style="background-color: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border-primary);"
+                                    onmouseover="this.style.backgroundColor='var(--bg-hover)'"
+                                    onmouseout="this.style.backgroundColor='var(--bg-primary)'"
+                                >
+                                    🔒 Logout
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Footer Info -->
+                    <div class="flex-shrink-0 p-3 border-t text-center" style="border-color: var(--border-primary);">
+                        <div class="text-xs" style="color: var(--text-tertiary);">
+                            <span x-text="notes.length"></span> notes
+                            <span class="mx-1">·</span>
+                            <span x-text="'v' + appVersion"></span>
+                        </div>
+                        <a 
+                            href="https://www.notediscovery.com" 
+                            target="_blank" 
+                            rel="noopener noreferrer"
+                            class="text-xs hover:underline"
+                            style="color: var(--accent-primary);"
+                        >
+                            notediscovery.com
+                        </a>
+                    </div>
+                </div>
+                <!-- END SETTINGS PANEL -->
+                
             </div>
+            <!-- END Sidebar Panel -->
         </div>
         
         <!-- Resize Handle -->
@@ -2023,6 +2230,61 @@
         </div>
     </div>
     
+    <!-- Mobile Bottom Tabs -->
+    <div class="mobile-bottom-tabs" x-data style="display: none;">
+        <button 
+            class="mobile-bottom-tab"
+            :class="{'active': $root.activePanel === 'files'}"
+            @click="$root.activePanel = 'files'; $root.mobileSidebarOpen = true;"
+        >
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path>
+            </svg>
+            <span>Files</span>
+        </button>
+        <button 
+            class="mobile-bottom-tab"
+            :class="{'active': $root.activePanel === 'search'}"
+            @click="$root.activePanel = 'search'; $root.mobileSidebarOpen = true;"
+        >
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+            </svg>
+            <span>Search</span>
+        </button>
+        <button 
+            class="mobile-bottom-tab"
+            :class="{'active': $root.activePanel === 'tags'}"
+            @click="$root.activePanel = 'tags'; $root.mobileSidebarOpen = true;"
+        >
+            <svg fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-7-7A.997.997 0 012 10V5a3 3 0 013-3h5c.256 0 .512.098.707.293l7 7zM5 6a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd"/>
+            </svg>
+            <span>Tags</span>
+        </button>
+        <button 
+            class="mobile-bottom-tab"
+            :class="{'active': $root.showGraph}"
+            @click="$root.showGraph = true; $root.initGraph(); $root.mobileSidebarOpen = false;"
+        >
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path>
+            </svg>
+            <span>Graph</span>
+        </button>
+        <button 
+            class="mobile-bottom-tab"
+            :class="{'active': $root.activePanel === 'settings'}"
+            @click="$root.activePanel = 'settings'; $root.mobileSidebarOpen = true;"
+        >
+            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+            </svg>
+            <span>Settings</span>
+        </button>
+    </div>
+    
     <script src="/static/app.js"></script>
 </body>
 </html>