diff --git a/static/index.html b/static/index.html
index 4f4bfc5..b50ef80 100644
--- a/static/index.html
+++ b/static/index.html
@@ -4,6 +4,7 @@
Sanic
+
@@ -99,7 +100,55 @@
- file browser
+
+ -
+
+ /
+
+ -
+
+ 00_music
+
+ - autosort
+ - reimport
+ - unsortable
+ - youtube
+
+
+
+ -
+
+ 01_incoming
+
+ - coon
+ - cascha
+ - XenGi
+
+
+
+ -
+
+ 02_megablast
+
+
+
+ -
+
+ 03_mfs
+
+
+
+
+
+
+
+
actions
diff --git a/static/treeview.css b/static/treeview.css
new file mode 100644
index 0000000..30a7c54
--- /dev/null
+++ b/static/treeview.css
@@ -0,0 +1,100 @@
+/* https://iamkate.com/code/tree-views/ */
+
+/* Custom properties */
+
+.tree {
+ --spacing : 1.0rem;
+ --radius : 10px;
+}
+
+/* Padding */
+
+.tree li {
+ display : block;
+ position : relative;
+ padding-left : calc(2 * var(--spacing) - var(--radius) - 2px + 10px);
+}
+
+.tree ul {
+ margin-left : calc(var(--radius) - var(--spacing));
+ padding-left : 0;
+}
+
+/* Vertical lines */
+
+.tree ul li {
+ border-left : 2px solid #ddd;
+}
+
+.tree ul li:last-child {
+ border-color : transparent;
+}
+
+/* Horizontal lines */
+
+.tree ul::before {
+ content : '';
+ display : block;
+ position : absolute;
+ top : calc(var(--spacing) - 8px);
+ left : 6px;
+ width : calc(var(--spacing) + 2px);
+ border : solid #ddd;
+ border-width : 0 0 2px 2px;
+}
+
+.tree ul li::before {
+ content : '';
+ display : block;
+ position : absolute;
+ top : calc(var(--spacing) - 22px);
+ left : -2px;
+ width : calc(var(--spacing) + 2px);
+ height : calc(var(--spacing) - 2px);
+ border : solid #ddd;
+ border-width : 0 0 2px 2px;
+}
+
+/* Summaries */
+
+.tree summary {
+ display : block;
+ cursor : pointer;
+}
+
+.tree summary::marker,
+.tree summary::-webkit-details-marker {
+ display : none;
+}
+
+.tree summary:focus {
+ outline : none;
+}
+
+.tree summary:focus-visible {
+ outline : 1px dotted #000;
+}
+
+/* Markers */
+
+.tree li::after,
+.tree summary::before {
+ content : '\1F4C1';
+ display : block;
+ position : absolute;
+ top : calc(var(--spacing) / 1.5 - var(--radius));
+ left : calc(var(--spacing) - var(--radius) - 1px);
+ width : calc(2 * var(--radius));
+ height : calc(2 * var(--radius));
+}u
+
+/* Expand and collapse buttons */
+
+.tree summary::before {
+ z-index: 1;
+ content: '\1F4C1';
+}
+
+.tree details[open] > summary::before {
+ content: '\1F4C2';
+}