diff --git a/software/frontend/index.html b/software/frontend/index.html
index 48d6548..6caa231 100644
--- a/software/frontend/index.html
+++ b/software/frontend/index.html
@@ -45,6 +45,71 @@
         padding-left: 10px;
         margin-top: 10px;
     }
+
+    /* Tree view */
+    .tree ul {
+      list-style: none;
+      padding-left: 1rem;
+    }
+    
+    .tree li {
+      margin: 2px 0;
+    }
+    
+    .caret {
+      cursor: pointer;
+      display: inline-block;
+      width: 1em;
+      height: 1em;
+      user-select: none;
+    }
+    
+    .caret::before {
+      content: "▶";
+      opacity: 0.6;
+    }
+    
+    li.expanded > .caret::before {
+      content: "▼";
+    }
+    
+    li:not(:has(ul)) > .caret::before {
+      content: "";
+    }
+    
+    .node {
+      cursor: pointer;
+      padding: 2px 6px;
+      border-radius: 4px;
+      user-select: none;
+    }
+    
+    .node:hover {
+      background: #eee;
+    }
+    
+    .node.selected {
+      background: #0078d7;
+      color: white;
+    }
+    
+    .tree ul ul {
+      display: none;
+    }
+    
+    li.expanded > ul {
+      display: block;
+    }
+
+    .scroll-tree-container {
+      border: 1px solid #ccc;
+      border-radius: 4px;
+    
+      height: 300px;
+      overflow-y: auto;
+      overflow-x: hidden;
+    }
+
 </style>
 </head>
 <body>
@@ -54,6 +119,7 @@
 <nav>
     <button onclick="showScreen('menu')">🏠 Main Menu</button>
     <button onclick="showScreen('config')">⚙️ Config Editor</button>
+    <button onclick="showScreen('playlist')">🖹 Playlist Editor</button>
 </nav>
 
 <!-- MAIN MENU -->
@@ -63,6 +129,7 @@
 
     <ul>
         <li><button onclick="showScreen('config')">Open Config Editor</button></li>
+        <li><button onclick="showScreen('playlist')">Open Playlist Editor</button></li>
         <!-- More screens can be added later -->
     </ul>
 </div>
@@ -71,178 +138,312 @@
 <div id="screen-config" class="screen">
     <h2>Configuration Editor</h2>
     <div id="config-container">Loading…</div>
-    <button id="save-btn" disabled>Save</button>
+    <button id="config-save-btn" disabled>Save</button>
+</div>
+
+<!-- PLAYLIST EDITOR SCREEN -->
+<div id="screen-playlist" class="screen">
+    <h2>Playlist Editor</h2>
+    <div id="playlist-container">Loading…</div>
+    <div class="scroll-tree-container">
+        <div class="tree" id="tree">
+            <ul>
+                <li>
+                  <span class="caret"></span>
+                  <span class="node">Fruits</span>
+                  <ul>
+                    <li>
+                      <span class="caret"></span>
+                      <span class="node">Apple</span>
+                    </li>
+                    <li>
+                      <span class="caret"></span>
+                      <span class="node">Citrus</span>
+                      <ul>
+                        <li>
+                          <span class="caret"></span>
+                          <span class="node">Orange</span>
+                        </li>
+                        <li>
+                          <span class="caret"></span>
+                          <span class="node">Lemon</span>
+                        </li>
+                      </ul>
+                    </li>
+                    <li>
+                      <span class="caret"></span>
+                      <span class="node">Strawberry</span>
+                    </li>
+                  </ul>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <button id="playlist-save-btn" disabled>Save</button>
 </div>
 
 <script>
-/* -----------------------------
-   Screen switching
------------------------------ */
-function showScreen(name) {
-    document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
-    document.getElementById('screen-' + name).classList.add('active');
+    const Screens = {};
+    let activeScreen = null;
+    /* -----------------------------
+       Screen switching
+    ----------------------------- */
+    function showScreen(name) {
+        document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
+        document.getElementById('screen-' + name).classList.add('active');
 
-    if (name === "config") {
-        loadConfig(); // refresh most up-to-date config
+        activeScreen = name;
+        Screens[name]?.onShow?.();
     }
-}
-
-/* -----------------------------
-   CONFIG EDITOR LOGIC
------------------------------ */
-async function loadConfig() {
-    const container = document.getElementById('config-container');
-    container.innerHTML = "Loading…";
-    document.getElementById('save-btn').disabled = true;
-
-    try {
-        const res = await fetch('/api/v1/config');
-        const config = await res.json();
-        renderConfigForm(config);
-    } catch (err) {
-        container.innerHTML = "Failed to load config: " + err;
-    }
-}
-
-function renderConfigForm(config) {
-    const container = document.getElementById('config-container');
-    container.innerHTML = "";
-    container.appendChild(renderObject(config, "root"));
-    document.getElementById('save-btn').disabled = false;
-}
-
-const config_names = {
-    'root.IDLE_TIMEOUT_SECS': 'Idle Timeout (seconds)',
-    'root.BUTTON_MAP': 'Button map',
-    'root.BUTTON_MAP.NEXT': 'Next track',
-    'root.BUTTON_MAP.PREV': 'Previous track',
-    'root.BUTTON_MAP.VOLUP': 'Volume up',
-    'root.BUTTON_MAP.VOLDOWN': 'Volume down',
-    'root.BUTTON_MAP.PLAY_PAUSE': 'Play/Pause',
-    'root.TAG_TIMEOUT_SECS': 'Tag removal timeout (seconds)',
-    'root.TAGMODE': 'Tag mode',
-    'root.LED_COUNT': 'Length of WS2182 (Neopixel) LED chain'
-};
-const config_input_override = {
-    'root.TAGMODE': {
-        'element': 'select',
-        'values': {
-            'tagremains': 'Play until tag is removed',
-            'tagstartstop': 'Present tag once to start, present again to stop playback'
-        }
-    },
-    'root.IDLE_TIMEOUT_SECS': {
-        'input-type': 'number'
-    },
-    'root.TAG_TIMEOUT_SECS': {
-        'input-type': 'number'
-    },
-    'root.LED_COUNT': {
-        'input-type': 'number'
-    },
-};
-
-function renderObject(obj, path) {
-    const wrapper = document.createElement('div');
-
-    Object.entries(obj).forEach(([key, value]) => {
-        const currentPath = path + '.' + key;
-        const label = document.createElement('label');
-        if (currentPath in config_names) {
-            label.textContent = config_names[currentPath];
-        } else {
-            label.textContent = key;
-        }
-
-        if (value !== null && typeof value === 'object') {
-            wrapper.appendChild(label);
-            const nested = document.createElement('div');
-            nested.className = "nested";
-            nested.appendChild(renderObject(value, currentPath));
-            wrapper.appendChild(nested);
-        } else {
-            wrapper.appendChild(label);
-            if (currentPath in config_input_override && 'element' in config_input_override[currentPath]) {
-                const override = config_input_override[currentPath];
-                if (override['element'] === 'select') {
-                    const input = document.createElement('select');
-                    input.dataset.path = currentPath;
-
-                    for (const val in override.values) {
-                        const option = document.createElement('option');
-                        option.value = val;
-                        option.textContent = override.values[val];
-                        if (val === value) {
-                            option.selected = true;
-                        }
-
-                        input.appendChild(option);
+    
+    /* -----------------------------
+       CONFIG EDITOR LOGIC
+    ----------------------------- */
+    Screens.config = (() => {
+        let screenroot = null;
+        function init() {
+            screenroot = document.getElementById('screen-config');
+            document.getElementById('config-save-btn').addEventListener('click', async () => {
+                const res = await fetch('/api/v1/config');
+                const original = await res.json();
+                const updated = serialize(original);
+            
+                try {
+                    const saveRes = await fetch('/api/v1/config', {
+                        method: 'PUT',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(updated, null, 2)
+                    });
+            
+                    if (!saveRes.ok) {
+                        alert("Failed to save config: " + await saveRes.text());
+                        return;
                     }
-
-                    wrapper.appendChild(input);
+            
+                    alert("Configuration saved successfully!");
+                } catch (err) {
+                    alert("Error saving configuration: " + err);
                 }
-            } else {
-                const input = document.createElement('input');
-                if (currentPath in config_input_override && 'input-type' in config_input_override[currentPath]) {
-                    input.type = config_input_override[currentPath]['input-type'];
-                }
-                input.value = value === null ? "" : value;
-                input.dataset.path = currentPath;
-
-                wrapper.appendChild(input);
+            });
+        }
+        
+        async function onShow() {
+            const container = document.getElementById('config-container');
+            container.innerHTML = "Loading…";
+            document.getElementById('config-save-btn').disabled = true;
+        
+            try {
+                const res = await fetch('/api/v1/config');
+                const config = await res.json();
+                render(config);
+            } catch (err) {
+                container.innerHTML = "Failed to load config: " + err;
             }
         }
+    
+        function render(config) {
+            const container = document.getElementById('config-container');
+            container.innerHTML = "";
+            container.appendChild(renderObject(config, "root"));
+            document.getElementById('config-save-btn').disabled = false;
+        }
+    
+        const config_names = {
+            'root.IDLE_TIMEOUT_SECS': 'Idle Timeout (seconds)',
+            'root.BUTTON_MAP': 'Button map',
+            'root.BUTTON_MAP.NEXT': 'Next track',
+            'root.BUTTON_MAP.PREV': 'Previous track',
+            'root.BUTTON_MAP.VOLUP': 'Volume up',
+            'root.BUTTON_MAP.VOLDOWN': 'Volume down',
+            'root.BUTTON_MAP.PLAY_PAUSE': 'Play/Pause',
+            'root.TAG_TIMEOUT_SECS': 'Tag removal timeout (seconds)',
+            'root.TAGMODE': 'Tag mode',
+            'root.LED_COUNT': 'Length of WS2182 (Neopixel) LED chain'
+        };
+        const config_input_override = {
+            'root.TAGMODE': {
+                'element': 'select',
+                'values': {
+                    'tagremains': 'Play until tag is removed',
+                    'tagstartstop': 'Present tag once to start, present again to stop playback'
+                }
+            },
+            'root.IDLE_TIMEOUT_SECS': {
+                'input-type': 'number'
+            },
+            'root.TAG_TIMEOUT_SECS': {
+                'input-type': 'number'
+            },
+            'root.LED_COUNT': {
+                'input-type': 'number'
+            },
+        };
+    
+        function renderObject(obj, path) {
+            const wrapper = document.createElement('div');
+        
+            Object.entries(obj).forEach(([key, value]) => {
+                const currentPath = path + '.' + key;
+                const label = document.createElement('label');
+                if (currentPath in config_names) {
+                    label.textContent = config_names[currentPath];
+                } else {
+                    label.textContent = key;
+                }
+        
+                if (value !== null && typeof value === 'object') {
+                    wrapper.appendChild(label);
+                    const nested = document.createElement('div');
+                    nested.className = "nested";
+                    nested.appendChild(renderObject(value, currentPath));
+                    wrapper.appendChild(nested);
+                } else {
+                    wrapper.appendChild(label);
+                    if (currentPath in config_input_override && 'element' in config_input_override[currentPath]) {
+                        const override = config_input_override[currentPath];
+                        if (override['element'] === 'select') {
+                            const input = document.createElement('select');
+                            input.dataset.path = currentPath;
+        
+                            for (const val in override.values) {
+                                const option = document.createElement('option');
+                                option.value = val;
+                                option.textContent = override.values[val];
+                                if (val === value) {
+                                    option.selected = true;
+                                }
+        
+                                input.appendChild(option);
+                            }
+        
+                            wrapper.appendChild(input);
+                        }
+                    } else {
+                        const input = document.createElement('input');
+                        if (currentPath in config_input_override && 'input-type' in config_input_override[currentPath]) {
+                            input.type = config_input_override[currentPath]['input-type'];
+                        }
+                        input.value = value === null ? "" : value;
+                        input.dataset.path = currentPath;
+        
+                        wrapper.appendChild(input);
+                    }
+                }
+            });
+        
+            return wrapper;
+        }
+    
+        function serialize(rootObj) {
+            const inputs = screenroot.querySelectorAll("input[data-path], select[data-path]");
+        
+            inputs.forEach(input => {
+                const path = input.dataset.path.split('.').slice(1); // remove "root"
+                let current = rootObj;
+        
+                for (let i = 0; i < path.length - 1; i++) {
+                    current = current[path[i]];
+                }
+        
+                let val = input.value.trim();
+                if (val === "") val = null;
+                else if (!isNaN(val)) val = Number(val);
+        
+                current[path[path.length - 1]] = val;
+            });
+        
+            return rootObj;
+        }
+    
+        return { init, onShow };
+    })();
+
+/* -----------------------------
+   PLAYLIST EDITOR LOGIC
+----------------------------- */
+    Screens.playlist = (() => {
+        let lastSelected = null;
+        
+        function init() {
+            document.getElementById("tree").addEventListener("click", (e) => {
+                // CARET CLICK → expand/collapse
+                const caret = e.target.closest(".caret");
+                if (caret) {
+                    const li = caret.parentElement;
+                    if (li.querySelector("ul")) {
+                      li.classList.toggle("expanded");
+                    }
+                    return; // IMPORTANT: don't affect selection
+                }
+                
+                // NODE LABEL CLICK → selection only
+                const node = e.target.closest(".node");
+                if (!node) return;
+                
+                if (e.shiftKey && lastSelected) {
+                    selectRange(lastSelected, node);
+                } else if (e.ctrlKey || e.metaKey) {
+                    node.classList.toggle("selected");
+                } else {
+                    clearSelection();
+                    node.classList.add("selected");
+                }
+                
+                lastSelected = node;
+            });
+        }
+        
+        async function onShow() {
+            const container = document.getElementById('playlist-container');
+            container.innerHTML = "Loading…";
+            document.getElementById('playlist-save-btn').disabled = true;
+        
+            try {
+                const res = await fetch('/api/v1/playlist');
+                const config = await res.json();
+                renderPlaylistForm(config);
+            } catch (err) {
+                container.innerHTML = "Failed to load config: " + err;
+            }
+        }
+        
+        function renderPlaylistForm(config) {
+            const container = document.getElementById('playlist-container');
+            container.innerHTML = "";
+            container.appendChild(renderPlaylistObject(config, "root"));
+            document.getElementById('playlist-save-btn').disabled = false;
+        }
+    
+        function clearSelection() {
+            tree.querySelectorAll(".selected").forEach(n =>
+                n.classList.remove("selected")
+            );
+        }
+        
+        function selectRange(start, end) {
+            const nodes = [...tree.querySelectorAll(".node")];
+            const startIndex = nodes.indexOf(start);
+            const endIndex = nodes.indexOf(end);
+    
+            const [from, to] = startIndex < endIndex
+                ? [startIndex, endIndex]
+                : [endIndex, startIndex];
+    
+            clearSelection();
+            nodes.slice(from, to + 1).forEach(n =>
+                n.classList.add("selected")
+            );
+        }
+        
+        return { init, onShow };
+    })();
+
+// Initialization
+    Object.values(Screens).forEach(screen => {
+        screen.init?.();
     });
 
-    return wrapper;
-}
-
-function serializeConfig(rootObj) {
-    const inputs = document.querySelectorAll("input[data-path], select[data-path]");
-
-    inputs.forEach(input => {
-        const path = input.dataset.path.split('.').slice(1); // remove "root"
-        let current = rootObj;
-
-        for (let i = 0; i < path.length - 1; i++) {
-            current = current[path[i]];
-        }
-
-        let val = input.value.trim();
-        if (val === "") val = null;
-        else if (!isNaN(val)) val = Number(val);
-
-        current[path[path.length - 1]] = val;
-    });
-
-    return rootObj;
-}
-
-document.getElementById('save-btn').addEventListener('click', async () => {
-    const res = await fetch('/api/v1/config');
-    const original = await res.json();
-    const updated = serializeConfig(original);
-
-    try {
-        const saveRes = await fetch('/api/v1/config', {
-            method: 'PUT',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify(updated, null, 2)
-        });
-
-        if (!saveRes.ok) {
-            alert("Failed to save config: " + await saveRes.text());
-            return;
-        }
-
-        alert("Configuration saved successfully!");
-    } catch (err) {
-        alert("Error saving configuration: " + err);
-    }
-});
-
-// Load main menu by default
-showScreen('menu');
+    showScreen("menu");
 </script>
 
 </body>
