diff --git a/packages/notes/js/main.js b/packages/notes/js/main.js
index 5f4933f..f7f0cd7 100644
--- a/packages/notes/js/main.js
+++ b/packages/notes/js/main.js
@@ -368,6 +368,40 @@
 
     var previewHtml = useMemo(function() { return renderMarkdown(body); }, [body]);
 
+    // build indented folder list for the select dropdown
+    var folderOptions = useMemo(function() {
+      var list = folders || [];
+      var byId = {};
+      var roots = [];
+      for (var i = 0; i < list.length; i++) {
+        byId[list[i].id] = { folder: list[i], children: [] };
+      }
+      for (var i = 0; i < list.length; i++) {
+        var f = list[i];
+        if (f.parent_id && byId[f.parent_id]) {
+          byId[f.parent_id].children.push(byId[f.id]);
+        } else {
+          roots.push(byId[f.id]);
+        }
+      }
+      var flat = [];
+      function walk(nodes, depth) {
+        nodes.sort(function(a, b) {
+          if (a.folder.sort_order !== b.folder.sort_order) return a.folder.sort_order - b.folder.sort_order;
+          return (a.folder.name || '').localeCompare(b.folder.name || '');
+        });
+        for (var j = 0; j < nodes.length; j++) {
+          var prefix = '';
+          for (var k = 0; k < depth; k++) prefix += '\u00A0\u00A0';
+          if (depth > 0) prefix += '\u2514 ';
+          flat.push({ id: nodes[j].folder.id, label: prefix + nodes[j].folder.name });
+          walk(nodes[j].children, depth + 1);
+        }
+      }
+      walk(roots, 0);
+      return flat;
+    }, [folders]);
+
     if (!note) {
       return html`<div class="notes-editor__empty">Select a note or create a new one</div>`;
     }
@@ -386,8 +420,8 @@
                 onRefresh();
               }}>
               <option value="">Unfiled</option>
-              ${(folders || []).map(function(f) {
-                return html`<option key=${f.id} value=${f.id}>${f.name}</option>`;
+              ${folderOptions.map(function(f) {
+                return html`<option key=${f.id} value=${f.id}>${f.label}</option>`;
               })}
             </select>
             <span class=${dirty ? 'notes-saved notes-saved--dirty' : 'notes-saved'}>