From 5aa500a7fb6fe24f1e8637cb840c5f3cb6126afa Mon Sep 17 00:00:00 2001
From: Jimmy <git@jimmy.nz>
Date: Sun, 4 Jan 2026 15:59:19 +1300
Subject: [PATCH] Convert app to Flask web application with color pickers

- Created Flask backend with REST API endpoints
- Built HTML/CSS/JavaScript frontend
- Replaced RGB sliders with color pickers for each palette color
- Reorganized layout: color palette on left, patterns on right
- Added persistence for color changes
- Integrated WebSocket client for lighting controller communication
- Added tab management, profile support, and pattern selection
---
 Pipfile                 |    3 +
 run_web.py              |   17 +
 src/flask_app.py        |  448 ++++++++
 src/main_textual.py     | 1054 +++++++++++++++++++
 src/main_tkinter.py.bak | 2135 +++++++++++++++++++++++++++++++++++++++
 static/app.js           |  571 +++++++++++
 static/style.css        |  505 +++++++++
 templates/index.html    |  120 +++
 8 files changed, 4853 insertions(+)
 create mode 100755 run_web.py
 create mode 100644 src/flask_app.py
 create mode 100644 src/main_textual.py
 create mode 100644 src/main_tkinter.py.bak
 create mode 100644 static/app.js
 create mode 100644 static/style.css
 create mode 100644 templates/index.html

diff --git a/Pipfile b/Pipfile
index 611b2d3..50ea9d1 100644
--- a/Pipfile
+++ b/Pipfile
@@ -12,6 +12,8 @@ python-rtmidi = "*"
 pyaudio = "*"
 aubio = "*"
 websocket-client = "*"
+flask = "*"
+flask-cors = "*"
 
 [dev-packages]
 
@@ -21,3 +23,4 @@ python_version = "3.12"
 [scripts]
 main = "python src/main.py"
 dev = 'watchfiles "python src/main.py" src'
+web = "python run_web.py"
diff --git a/run_web.py b/run_web.py
new file mode 100755
index 0000000..c543013
--- /dev/null
+++ b/run_web.py
@@ -0,0 +1,17 @@
+#!/usr/bin/env python3
+"""
+Startup script for the Flask web application.
+"""
+import sys
+import os
+
+# Add src directory to path
+sys.path.insert(0, os.path.join(os.path.dirname(__file__), 'src'))
+
+from flask_app import app
+
+if __name__ == '__main__':
+    print("Starting Lighting Controller Web App...")
+    print("Open http://localhost:5000 in your browser")
+    app.run(host='0.0.0.0', port=5000, debug=True)
+
diff --git a/src/flask_app.py b/src/flask_app.py
new file mode 100644
index 0000000..c71345a
--- /dev/null
+++ b/src/flask_app.py
@@ -0,0 +1,448 @@
+"""
+Flask web application for the lighting controller.
+Provides REST API and serves the web UI.
+"""
+import asyncio
+import json
+import os
+import math
+from flask import Flask, render_template, request, jsonify
+from flask_cors import CORS
+from networking import WebSocketClient
+import color_utils
+from settings import Settings
+
+app = Flask(__name__, 
+            template_folder='../templates',
+            static_folder='../static')
+CORS(app)
+
+# Global settings and WebSocket client
+settings = Settings()
+websocket_client = None
+websocket_uri = "ws://192.168.4.1:80/ws"
+
+
+def delay_to_slider(delay_ms, min_delay=10, max_delay=10000):
+    """Convert delay in ms to slider position (0-1000) using logarithmic scale."""
+    if delay_ms <= min_delay:
+        return 0
+    if delay_ms >= max_delay:
+        return 1000
+    if min_delay == max_delay:
+        return 0
+    return 1000 * math.log(delay_ms / min_delay) / math.log(max_delay / min_delay)
+
+
+def slider_to_delay(slider_value, min_delay=10, max_delay=10000):
+    """Convert slider position (0-1000) to delay in ms using logarithmic scale."""
+    if slider_value <= 0:
+        return min_delay
+    if slider_value >= 1000:
+        return max_delay
+    if min_delay == max_delay:
+        return min_delay
+    return int(min_delay * ((max_delay / min_delay) ** (slider_value / 1000)))
+
+
+def get_pattern_settings(tab_name, pattern_name):
+    """Get pattern-specific settings."""
+    light_settings = settings["lights"][tab_name]["settings"]
+    if "patterns" not in light_settings:
+        light_settings["patterns"] = {}
+    if pattern_name not in light_settings["patterns"]:
+        light_settings["patterns"][pattern_name] = {}
+    
+    pattern_settings = light_settings["patterns"][pattern_name]
+    return {
+        "colors": pattern_settings.get("colors", ["#000000"]),
+        "delay": pattern_settings.get("delay", 100),
+        "n1": pattern_settings.get("n1", 10),
+        "n2": pattern_settings.get("n2", 10),
+        "n3": pattern_settings.get("n3", 10),
+        "n4": pattern_settings.get("n4", 10),
+    }
+
+
+def save_pattern_settings(tab_name, pattern_name, colors=None, delay=None, n_params=None):
+    """Save pattern-specific settings."""
+    light_settings = settings["lights"][tab_name]["settings"]
+    if "patterns" not in light_settings:
+        light_settings["patterns"] = {}
+    if pattern_name not in light_settings["patterns"]:
+        light_settings["patterns"][pattern_name] = {}
+    
+    pattern_settings = light_settings["patterns"][pattern_name]
+    if colors is not None:
+        pattern_settings["colors"] = colors
+    if delay is not None:
+        pattern_settings["delay"] = delay
+    if n_params is not None:
+        for i in range(1, 5):
+            if f"n{i}" in n_params:
+                pattern_settings[f"n{i}"] = n_params[f"n{i}"]
+
+
+async def send_to_lighting_controller(payload):
+    """Send data to the lighting controller via WebSocket."""
+    global websocket_client
+    if websocket_client is None:
+        websocket_client = WebSocketClient(websocket_uri)
+        await websocket_client.connect()
+    
+    if not websocket_client.is_connected:
+        await websocket_client.connect()
+    
+    if websocket_client.is_connected:
+        await websocket_client.send_data(payload)
+
+
+def run_async(coro):
+    """Run async function in sync context."""
+    loop = asyncio.new_event_loop()
+    asyncio.set_event_loop(loop)
+    try:
+        return loop.run_until_complete(coro)
+    finally:
+        loop.close()
+
+
+@app.route('/')
+def index():
+    """Serve the main web UI."""
+    return render_template('index.html')
+
+
+@app.route('/api/state', methods=['GET'])
+def get_state():
+    """Get the current state of all lights."""
+    return jsonify({
+        "lights": settings.get("lights", {}),
+        "patterns": settings.get("patterns", {}),
+        "tab_order": settings.get("tab_order", [])
+    })
+
+
+@app.route('/api/pattern', methods=['POST'])
+def set_pattern():
+    """Set the pattern for a light group."""
+    data = request.json
+    tab_name = data.get("tab_name")
+    pattern_name = data.get("pattern")
+    
+    if not tab_name or not pattern_name:
+        return jsonify({"error": "Missing tab_name or pattern"}), 400
+    
+    if tab_name not in settings.get("lights", {}):
+        return jsonify({"error": f"Tab '{tab_name}' not found"}), 404
+    
+    # Save current pattern's settings before switching
+    old_pattern = settings["lights"][tab_name]["settings"].get("pattern", "on")
+    # Get current delay (would need to be passed from frontend)
+    current_delay = data.get("delay", 100)
+    current_n_params = {
+        f"n{i}": data.get(f"n{i}", 10) for i in range(1, 5)
+    }
+    save_pattern_settings(
+        tab_name,
+        old_pattern,
+        colors=data.get("colors", ["#000000"]),
+        delay=current_delay,
+        n_params=current_n_params
+    )
+    
+    # Load new pattern's settings
+    new_pattern_settings = get_pattern_settings(tab_name, pattern_name)
+    
+    # Update settings
+    settings["lights"][tab_name]["settings"]["pattern"] = pattern_name
+    
+    # Prepare payload for lighting controller
+    names = settings["lights"][tab_name]["names"]
+    payload = {
+        "save": True,
+        "names": names,
+        "settings": {
+            "pattern": pattern_name,
+            "brightness": settings["lights"][tab_name]["settings"].get("brightness", 127),
+            "delay": new_pattern_settings["delay"],
+            "colors": new_pattern_settings["colors"],
+            **{f"n{i}": new_pattern_settings[f"n{i}"] for i in range(1, 5)}
+        }
+    }
+    
+    # Send to lighting controller
+    run_async(send_to_lighting_controller(payload))
+    
+    settings.save()
+    
+    return jsonify({
+        "success": True,
+        "pattern": pattern_name,
+        "settings": new_pattern_settings
+    })
+
+
+@app.route('/api/parameters', methods=['POST'])
+def set_parameters():
+    """Update parameters (RGB, brightness, delay, n params) for a light group."""
+    data = request.json
+    tab_name = data.get("tab_name")
+    
+    if not tab_name:
+        return jsonify({"error": "Missing tab_name"}), 400
+    
+    if tab_name not in settings.get("lights", {}):
+        return jsonify({"error": f"Tab '{tab_name}' not found"}), 404
+    
+    current_pattern = settings["lights"][tab_name]["settings"].get("pattern", "on")
+    pattern_config = settings.get("patterns", {}).get(current_pattern, {})
+    min_delay = pattern_config.get("min_delay", 10)
+    max_delay = pattern_config.get("max_delay", 10000)
+    
+    # Build settings payload
+    payload_settings = {}
+    
+    # Handle RGB colors
+    if "red" in data or "green" in data or "blue" in data:
+        r = data.get("red", 0)
+        g = data.get("green", 0)
+        b = data.get("blue", 0)
+        hex_color = f"#{r:02x}{g:02x}{b:02x}"
+        
+        # Update color in palette
+        pattern_settings = get_pattern_settings(tab_name, current_pattern)
+        colors = pattern_settings["colors"].copy()
+        selected_index = data.get("color_index", 0)
+        if 0 <= selected_index < len(colors):
+            colors[selected_index] = hex_color
+        else:
+            # If index is out of range, append the color
+            colors.append(hex_color)
+        
+        # Save pattern settings to persist the color change
+        save_pattern_settings(tab_name, current_pattern, colors=colors)
+        payload_settings["colors"] = colors
+    
+    # Handle brightness
+    if "brightness" in data:
+        brightness = int(data["brightness"])
+        settings["lights"][tab_name]["settings"]["brightness"] = brightness
+        payload_settings["brightness"] = brightness
+    
+    # Handle delay
+    if "delay_slider" in data:
+        slider_value = int(data["delay_slider"])
+        delay = slider_to_delay(slider_value, min_delay, max_delay)
+        save_pattern_settings(tab_name, current_pattern, delay=delay)
+        payload_settings["delay"] = delay
+    
+    # Handle n parameters
+    n_params = {}
+    for i in range(1, 5):
+        if f"n{i}" in data:
+            n_params[f"n{i}"] = int(data[f"n{i}"])
+    
+    if n_params:
+        save_pattern_settings(tab_name, current_pattern, n_params=n_params)
+        payload_settings.update(n_params)
+    
+    # Send to lighting controller
+    if payload_settings:
+        names = settings["lights"][tab_name]["names"]
+        payload = {
+            "save": True,
+            "names": names,
+            "settings": payload_settings
+        }
+        run_async(send_to_lighting_controller(payload))
+    
+    settings.save()
+    
+    return jsonify({"success": True})
+
+
+@app.route('/api/tabs', methods=['GET'])
+def get_tabs():
+    """Get list of tabs."""
+    return jsonify({
+        "tabs": settings.get("tab_order", []),
+        "lights": settings.get("lights", {})
+    })
+
+
+@app.route('/api/tabs', methods=['POST'])
+def create_tab():
+    """Create a new tab."""
+    data = request.json
+    tab_name = data.get("name")
+    ids = data.get("ids", ["1"])
+    
+    if not tab_name:
+        return jsonify({"error": "Missing name"}), 400
+    
+    if tab_name in settings.get("lights", {}):
+        return jsonify({"error": f"Tab '{tab_name}' already exists"}), 400
+    
+    settings.setdefault("lights", {})[tab_name] = {
+        "names": ids if isinstance(ids, list) else [ids],
+        "settings": {
+            "pattern": "on",
+            "brightness": 127,
+            "colors": ["#000000"],
+            "delay": 100,
+            "n1": 10,
+            "n2": 10,
+            "n3": 10,
+            "n4": 10,
+            "patterns": {}
+        }
+    }
+    
+    if "tab_order" not in settings:
+        settings["tab_order"] = []
+    settings["tab_order"].append(tab_name)
+    settings.save()
+    
+    return jsonify({"success": True, "tab_name": tab_name})
+
+
+@app.route('/api/tabs/<tab_name>', methods=['PUT'])
+def update_tab(tab_name):
+    """Update a tab."""
+    data = request.json
+    new_name = data.get("name", tab_name)
+    ids = data.get("ids")
+    
+    if tab_name not in settings.get("lights", {}):
+        return jsonify({"error": f"Tab '{tab_name}' not found"}), 404
+    
+    if new_name != tab_name:
+        if new_name in settings.get("lights", {}):
+            return jsonify({"error": f"Tab '{new_name}' already exists"}), 400
+        
+        # Rename tab
+        settings["lights"][new_name] = settings["lights"][tab_name]
+        del settings["lights"][tab_name]
+        
+        # Update tab order
+        if "tab_order" in settings and tab_name in settings["tab_order"]:
+            index = settings["tab_order"].index(tab_name)
+            settings["tab_order"][index] = new_name
+        
+        tab_name = new_name
+    
+    if ids is not None:
+        settings["lights"][tab_name]["names"] = ids if isinstance(ids, list) else [ids]
+    
+    settings.save()
+    
+    return jsonify({"success": True, "tab_name": tab_name})
+
+
+@app.route('/api/tabs/<tab_name>', methods=['DELETE'])
+def delete_tab(tab_name):
+    """Delete a tab."""
+    if tab_name not in settings.get("lights", {}):
+        return jsonify({"error": f"Tab '{tab_name}' not found"}), 404
+    
+    del settings["lights"][tab_name]
+    
+    if "tab_order" in settings and tab_name in settings["tab_order"]:
+        settings["tab_order"].remove(tab_name)
+    
+    settings.save()
+    
+    return jsonify({"success": True})
+
+
+@app.route('/api/profiles', methods=['GET'])
+def get_profiles():
+    """Get list of profiles."""
+    profiles_dir = "profiles"
+    profiles = []
+    if os.path.exists(profiles_dir):
+        for filename in os.listdir(profiles_dir):
+            if filename.endswith('.json'):
+                profiles.append(filename[:-5])
+    profiles.sort()
+    
+    return jsonify({
+        "profiles": profiles,
+        "current_profile": settings.get("current_profile", "")
+    })
+
+
+@app.route('/api/profiles', methods=['POST'])
+def create_profile():
+    """Create a new profile."""
+    data = request.json
+    profile_name = data.get("name")
+    
+    if not profile_name:
+        return jsonify({"error": "Missing name"}), 400
+    
+    profiles_dir = "profiles"
+    os.makedirs(profiles_dir, exist_ok=True)
+    profile_path = os.path.join(profiles_dir, f"{profile_name}.json")
+    
+    if os.path.exists(profile_path):
+        return jsonify({"error": f"Profile '{profile_name}' already exists"}), 400
+    
+    empty_profile = {
+        "lights": {},
+        "tab_password": "",
+        "tab_order": []
+    }
+    
+    with open(profile_path, 'w') as file:
+        json.dump(empty_profile, file, indent=4)
+    
+    return jsonify({"success": True, "profile_name": profile_name})
+
+
+@app.route('/api/profiles/<profile_name>', methods=['POST'])
+def load_profile(profile_name):
+    """Load a profile."""
+    profile_path = os.path.join("profiles", f"{profile_name}.json")
+    
+    if not os.path.exists(profile_path):
+        return jsonify({"error": f"Profile '{profile_name}' not found"}), 404
+    
+    with open(profile_path, 'r') as file:
+        profile_data = json.load(file)
+    
+    # Update settings with profile data
+    profile_data.pop("current_profile", None)
+    patterns_backup = settings.get("patterns", {})
+    tab_password_backup = settings.get("tab_password", "")
+    
+    settings.update(profile_data)
+    settings["patterns"] = patterns_backup
+    settings["current_profile"] = profile_name
+    
+    settings_to_save = {
+        "tab_password": tab_password_backup,
+        "current_profile": profile_name,
+        "patterns": patterns_backup
+    }
+    with open("settings.json", 'w') as f:
+        json.dump(settings_to_save, f, indent=4)
+    
+    return jsonify({"success": True})
+
+
+def init_websocket():
+    """Initialize WebSocket connection in background."""
+    global websocket_client
+    if websocket_client is None:
+        websocket_client = WebSocketClient(websocket_uri)
+        run_async(websocket_client.connect())
+
+
+if __name__ == '__main__':
+    # Initialize WebSocket connection
+    init_websocket()
+    
+    app.run(host='0.0.0.0', port=5000, debug=True)
+
diff --git a/src/main_textual.py b/src/main_textual.py
new file mode 100644
index 0000000..ca52727
--- /dev/null
+++ b/src/main_textual.py
@@ -0,0 +1,1054 @@
+"""
+Textual-based UI for the lighting controller.
+This replaces the Tkinter-based UI with a modern terminal/web interface.
+"""
+import asyncio
+import json
+import os
+import math
+import time
+from typing import Optional
+from textual import on, App, work
+from textual.app import ComposeResult
+from textual.containers import Container, Horizontal, Vertical, Grid
+from textual.widgets import (
+    Button, 
+    Label, 
+    Input, 
+    Select, 
+    Tabs, 
+    Tab, 
+    TabPane,
+    Slider,
+    Static,
+    Header,
+    Footer,
+    DataTable,
+    Log
+)
+from textual.screen import Screen, ModalScreen
+from textual.binding import Binding
+from textual.message import Message
+from textual.worker import Worker, get_current_worker
+from networking import WebSocketClient
+import color_utils
+from settings import Settings
+
+
+def delay_to_slider(delay_ms, min_delay=10, max_delay=10000):
+    """Convert delay in ms to slider position (0-1000) using logarithmic scale."""
+    if delay_ms <= min_delay:
+        return 0
+    if delay_ms >= max_delay:
+        return 1000
+    if min_delay == max_delay:
+        return 0
+    return 1000 * math.log(delay_ms / min_delay) / math.log(max_delay / min_delay)
+
+
+def slider_to_delay(slider_value, min_delay=10, max_delay=10000):
+    """Convert slider position (0-1000) to delay in ms using logarithmic scale."""
+    if slider_value <= 0:
+        return min_delay
+    if slider_value >= 1000:
+        return max_delay
+    if min_delay == max_delay:
+        return min_delay
+    return int(min_delay * ((max_delay / min_delay) ** (slider_value / 1000)))
+
+
+class ColorSwatch(Static):
+    """A clickable color swatch widget."""
+    
+    def __init__(self, hex_color: str, index: int, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.hex_color = hex_color
+        self.index = index
+        self.border_title = f"Color {index + 1}"
+    
+    def compose(self) -> ComposeResult:
+        yield Static(f"Color {self.index + 1}", classes="color-label")
+    
+    def on_mount(self) -> None:
+        r, g, b = color_utils.hex_to_rgb(self.hex_color)
+        # Use ANSI color codes for terminal, or CSS for web
+        self.styles.background = self.hex_color
+        text_color = color_utils.get_contrast_text_color(self.hex_color)
+        self.styles.color = text_color
+    
+    def on_click(self) -> None:
+        self.post_message(ColorSelected(self.index))
+
+
+class ColorSelected(Message):
+    """Message sent when a color swatch is clicked."""
+    def __init__(self, index: int):
+        super().__init__()
+        self.index = index
+
+
+class PatternButton(Button):
+    """A pattern selection button."""
+    
+    def __init__(self, pattern_name: str, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.pattern_name = pattern_name
+        self.label = pattern_name
+
+
+class AddTabScreen(ModalScreen):
+    """Modal screen for adding a new tab."""
+    
+    def compose(self) -> ComposeResult:
+        with Container(classes="dialog"):
+            yield Label("Add New Tab", classes="dialog-title")
+            yield Label("Tab Name:", classes="label")
+            yield Input(placeholder="Enter tab name", id="tab-name-input")
+            yield Label("Device IDs (comma-separated):", classes="label")
+            yield Input(placeholder="1,2,3", id="ids-input", value="1")
+            with Horizontal(classes="button-row"):
+                yield Button("Add", id="add-button", variant="primary")
+                yield Button("Cancel", id="cancel-button", variant="default")
+    
+    def on_mount(self) -> None:
+        self.query_one("#tab-name-input", Input).focus()
+    
+    @on(Button.Pressed, "#add-button")
+    def on_add(self) -> None:
+        name_input = self.query_one("#tab-name-input", Input)
+        ids_input = self.query_one("#ids-input", Input)
+        tab_name = name_input.value.strip()
+        ids_str = ids_input.value.strip()
+        
+        if not tab_name:
+            self.app.bell()
+            return
+        
+        ids = [id.strip() for id in ids_str.split(",") if id.strip()]
+        if not ids:
+            ids = ["1"]
+        
+        self.dismiss((tab_name, ids))
+    
+    @on(Button.Pressed, "#cancel-button")
+    def on_cancel(self) -> None:
+        self.dismiss(None)
+
+
+class EditTabScreen(ModalScreen):
+    """Modal screen for editing a tab."""
+    
+    def __init__(self, tab_name: str, current_ids: list[str], *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.tab_name = tab_name
+        self.current_ids = current_ids
+    
+    def compose(self) -> ComposeResult:
+        with Container(classes="dialog"):
+            yield Label("Edit Tab", classes="dialog-title")
+            yield Label("Tab Name:", classes="label")
+            yield Input(placeholder="Enter tab name", id="tab-name-input", value=self.tab_name)
+            yield Label("Device IDs (comma-separated):", classes="label")
+            yield Input(placeholder="1,2,3", id="ids-input", value=", ".join(self.current_ids))
+            with Horizontal(classes="button-row"):
+                yield Button("Update", id="update-button", variant="primary")
+                yield Button("Cancel", id="cancel-button", variant="default")
+    
+    def on_mount(self) -> None:
+        self.query_one("#tab-name-input", Input).focus()
+    
+    @on(Button.Pressed, "#update-button")
+    def on_update(self) -> None:
+        name_input = self.query_one("#tab-name-input", Input)
+        ids_input = self.query_one("#ids-input", Input)
+        new_tab_name = name_input.value.strip()
+        ids_str = ids_input.value.strip()
+        
+        if not new_tab_name:
+            self.app.bell()
+            return
+        
+        ids = [id.strip() for id in ids_str.split(",") if id.strip()]
+        if not ids:
+            ids = ["1"]
+        
+        self.dismiss((new_tab_name, ids))
+    
+    @on(Button.Pressed, "#cancel-button")
+    def on_cancel(self) -> None:
+        self.dismiss(None)
+
+
+class LightingControllerApp(App):
+    """Main Textual application for the lighting controller."""
+    
+    CSS = """
+    Screen {
+        background: $surface;
+    }
+    
+    .main-container {
+        layout: horizontal;
+        height: 100%;
+    }
+    
+    .left-panel {
+        width: 40%;
+        border-right: wide $primary;
+        padding: 1;
+    }
+    
+    .right-panel {
+        width: 60%;
+        padding: 1;
+    }
+    
+    .slider-container {
+        height: 20;
+        margin: 1;
+    }
+    
+    .slider-label {
+        text-align: center;
+        margin-bottom: 1;
+    }
+    
+    .n-params-grid {
+        grid-size: 2;
+        grid-gutter: 1;
+        margin: 1;
+    }
+    
+    .n-param-container {
+        layout: horizontal;
+        align: center middle;
+    }
+    
+    .n-param-label {
+        width: 8;
+        text-align: right;
+        margin-right: 1;
+    }
+    
+    .n-param-input {
+        width: 6;
+    }
+    
+    .pattern-buttons {
+        layout: vertical;
+        height: 1fr;
+    }
+    
+    .pattern-button {
+        margin: 1;
+        width: 100%;
+    }
+    
+    .color-palette {
+        layout: vertical;
+        height: 1fr;
+    }
+    
+    .color-swatch {
+        height: 3;
+        margin: 1;
+        border: solid $primary;
+    }
+    
+    .color-label {
+        text-align: center;
+        width: 100%;
+    }
+    
+    .dialog {
+        width: 60;
+        height: auto;
+        border: solid $primary;
+        padding: 1;
+        background: $surface;
+    }
+    
+    .dialog-title {
+        text-align: center;
+        text-style: bold;
+        margin-bottom: 1;
+    }
+    
+    .label {
+        margin-top: 1;
+    }
+    
+    .button-row {
+        align: center middle;
+        margin-top: 2;
+    }
+    
+    .button-row Button {
+        margin: 1;
+    }
+    
+    .ids-display {
+        layout: horizontal;
+        margin: 1;
+    }
+    
+    .ids-label {
+        margin-right: 1;
+    }
+    """
+    
+    BINDINGS = [
+        Binding("q", "quit", "Quit"),
+        Binding("a", "add_tab", "Add Tab"),
+        Binding("e", "edit_tab", "Edit Tab"),
+        Binding("d", "delete_tab", "Delete Tab"),
+        Binding("p", "profiles", "Profiles"),
+    ]
+    
+    def __init__(self):
+        super().__init__()
+        self.settings = Settings()
+        self.patterns = self.load_patterns()
+        self.websocket_client = WebSocketClient("ws://192.168.4.1:80/ws")
+        self.tabs_data = {}  # Store tab widget references
+        self.current_tab_name = None
+        
+        # Debouncing variables
+        self.last_rgb_update_time = 0
+        self.rgb_update_interval_ms = 100
+        self.pending_rgb_update = None
+        
+        self.last_brightness_update_time = 0
+        self.brightness_update_interval_ms = 100
+        self.pending_brightness_update = None
+        
+        self.last_delay_update_time = 0
+        self.delay_update_interval_ms = 100
+        self.pending_delay_update = None
+        
+        self.last_n_params_update_time = 0
+        self.n_params_update_interval_ms = 100
+        self.pending_n_params_update = None
+    
+    def load_patterns(self):
+        """Load patterns from settings.json file."""
+        try:
+            patterns = self.settings.get("patterns", {})
+            if not patterns:
+                patterns = {}
+                self.settings["patterns"] = patterns
+                self.settings.save()
+            return patterns
+        except Exception as e:
+            print(f"Error loading patterns: {e}")
+            return {}
+    
+    def compose(self) -> ComposeResult:
+        yield Header(show_clock=True)
+        yield Tabs(id="main-tabs")
+        yield Footer()
+    
+    def on_mount(self) -> None:
+        """Called when the app is mounted."""
+        # Connect to WebSocket
+        self.connect_websocket()
+        # Create tabs if we have lights configured
+        if self.settings.get("lights"):
+            self.create_tabs()
+    
+    @work(exclusive=False)
+    async def connect_websocket(self) -> None:
+        """Connect to the WebSocket server."""
+        await self.websocket_client.connect()
+    
+    def create_tabs(self) -> None:
+        """Create tabs from settings."""
+        tabs_widget = self.query_one("#main-tabs", Tabs)
+        tabs_widget.clear()
+        
+        tab_order = self.get_tab_order()
+        
+        if not tab_order:
+            return
+        
+        for tab_name in tab_order:
+            if tab_name in self.settings.get("lights", {}):
+                tab_pane = TabPane(tab_name, id=f"tab-{tab_name}")
+                tabs_widget.add_pane(tab_pane)
+                self.create_tab_content(tab_pane, tab_name)
+        
+        # Select first tab if available
+        if tab_order:
+            tabs_widget.active = f"tab-{tab_order[0]}"
+            self.current_tab_name = tab_order[0]
+    
+    def create_tab_content(self, tab_pane: TabPane, tab_name: str) -> None:
+        """Create the content for a tab."""
+        light_data = self.settings["lights"][tab_name]
+        ids = light_data["names"]
+        initial_settings = light_data["settings"]
+        
+        initial_pattern = initial_settings.get("pattern", "on")
+        initial_brightness = initial_settings.get("brightness", 127)
+        pattern_settings = self.get_pattern_settings(tab_name, initial_pattern)
+        
+        initial_colors = pattern_settings["colors"]
+        initial_hex_color = initial_colors[0] if initial_colors else "#000000"
+        initial_delay = pattern_settings["delay"]
+        initial_n1 = pattern_settings["n1"]
+        initial_n2 = pattern_settings["n2"]
+        initial_n3 = pattern_settings["n3"]
+        initial_n4 = pattern_settings["n4"]
+        
+        initial_r, initial_g, initial_b = color_utils.hex_to_rgb(initial_hex_color)
+        
+        with tab_pane:
+            with Container(classes="main-container"):
+                # Left panel with sliders and n params
+                with Container(classes="left-panel"):
+                    # IDs display
+                    with Container(classes="ids-display"):
+                        yield Label("IDs: ", classes="ids-label")
+                        ids_text = ", ".join(str(id) for id in ids)
+                        yield Label(ids_text)
+                    
+                    # RGB Sliders
+                    yield Label("Red", classes="slider-label")
+                    red_slider = Slider(
+                        min=0, 
+                        max=255, 
+                        value=initial_r, 
+                        step=1,
+                        id=f"red-slider-{tab_name}"
+                    )
+                    yield red_slider
+                    
+                    yield Label("Green", classes="slider-label")
+                    green_slider = Slider(
+                        min=0, 
+                        max=255, 
+                        value=initial_g, 
+                        step=1,
+                        id=f"green-slider-{tab_name}"
+                    )
+                    yield green_slider
+                    
+                    yield Label("Blue", classes="slider-label")
+                    blue_slider = Slider(
+                        min=0, 
+                        max=255, 
+                        value=initial_b, 
+                        step=1,
+                        id=f"blue-slider-{tab_name}"
+                    )
+                    yield blue_slider
+                    
+                    yield Label("Brightness", classes="slider-label")
+                    brightness_slider = Slider(
+                        min=0, 
+                        max=255, 
+                        value=initial_brightness, 
+                        step=1,
+                        id=f"brightness-slider-{tab_name}"
+                    )
+                    yield brightness_slider
+                    
+                    yield Label("Delay (ms)", classes="slider-label")
+                    pattern_config = self.patterns.get(initial_pattern, {})
+                    min_delay = pattern_config.get("min_delay", 10)
+                    max_delay = pattern_config.get("max_delay", 10000)
+                    initial_delay_slider_pos = delay_to_slider(initial_delay, min_delay, max_delay)
+                    delay_slider = Slider(
+                        min=0,
+                        max=1000,
+                        value=int(initial_delay_slider_pos),
+                        step=1,
+                        id=f"delay-slider-{tab_name}"
+                    )
+                    yield delay_slider
+                    yield Label(f"{initial_delay} ms", id=f"delay-value-{tab_name}")
+                    
+                    # N parameters
+                    with Grid(classes="n-params-grid"):
+                        for i in range(1, 5):
+                            with Container(classes="n-param-container"):
+                                yield Label(f"n{i}", classes="n-param-label")
+                                n_value = pattern_settings[f"n{i}"]
+                                n_input = Input(
+                                    value=str(n_value),
+                                    classes="n-param-input",
+                                    id=f"n{i}-input-{tab_name}"
+                                )
+                                yield n_input
+                
+                # Right panel with patterns and color palette
+                with Container(classes="right-panel"):
+                    # Patterns section
+                    yield Label("Patterns:", classes="slider-label")
+                    with Container(classes="pattern-buttons"):
+                        for pattern_name in self.patterns.keys():
+                            pattern_btn = PatternButton(
+                                pattern_name,
+                                pattern_name,
+                                classes="pattern-button",
+                                id=f"pattern-{pattern_name}-{tab_name}"
+                            )
+                            yield pattern_btn
+                    
+                    # Color palette section
+                    yield Label("Color Palette:", classes="slider-label")
+                    with Container(classes="color-palette", id=f"palette-{tab_name}"):
+                        for i, hex_color in enumerate(initial_colors):
+                            swatch = ColorSwatch(
+                                hex_color,
+                                i,
+                                classes="color-swatch",
+                                id=f"swatch-{i}-{tab_name}"
+                            )
+                            yield swatch
+        
+        # Store tab data
+        self.tabs_data[tab_name] = {
+            "colors_in_palette": initial_colors.copy(),
+            "selected_color_index": 0,
+            "pattern": initial_pattern,
+        }
+    
+    def get_tab_order(self):
+        """Get the tab order from current profile, or create default order."""
+        if "tab_order" not in self.settings:
+            if "lights" in self.settings:
+                self.settings["tab_order"] = list(self.settings["lights"].keys())
+            else:
+                self.settings["tab_order"] = []
+        return self.settings.get("tab_order", [])
+    
+    def get_pattern_settings(self, tab_name, pattern_name):
+        """Get pattern-specific settings."""
+        light_settings = self.settings["lights"][tab_name]["settings"]
+        if "patterns" not in light_settings:
+            light_settings["patterns"] = {}
+        if pattern_name not in light_settings["patterns"]:
+            light_settings["patterns"][pattern_name] = {}
+        
+        pattern_settings = light_settings["patterns"][pattern_name]
+        return {
+            "colors": pattern_settings.get("colors", ["#000000"]),
+            "delay": pattern_settings.get("delay", 100),
+            "n1": pattern_settings.get("n1", 10),
+            "n2": pattern_settings.get("n2", 10),
+            "n3": pattern_settings.get("n3", 10),
+            "n4": pattern_settings.get("n4", 10),
+        }
+    
+    def save_pattern_settings(self, tab_name, pattern_name, colors=None, delay=None, n_params=None):
+        """Save pattern-specific settings."""
+        light_settings = self.settings["lights"][tab_name]["settings"]
+        if "patterns" not in light_settings:
+            light_settings["patterns"] = {}
+        if pattern_name not in light_settings["patterns"]:
+            light_settings["patterns"][pattern_name] = {}
+        
+        pattern_settings = light_settings["patterns"][pattern_name]
+        if colors is not None:
+            pattern_settings["colors"] = colors
+        if delay is not None:
+            pattern_settings["delay"] = delay
+        if n_params is not None:
+            for i in range(1, 5):
+                if f"n{i}" in n_params:
+                    pattern_settings[f"n{i}"] = n_params[f"n{i}"]
+    
+    @on(Tabs.TabActivated)
+    def on_tab_change(self, event: Tabs.TabActivated) -> None:
+        """Handle tab change."""
+        tab_id = event.tab.id
+        if tab_id and tab_id.startswith("tab-"):
+            self.current_tab_name = tab_id[4:]  # Remove "tab-" prefix
+    
+    @on(Slider.Changed)
+    def on_slider_changed(self, event: Slider.Changed) -> None:
+        """Handle slider changes."""
+        if not self.current_tab_name:
+            return
+        
+        slider_id = event.slider.id
+        if slider_id.startswith("red-slider-") or slider_id.startswith("green-slider-") or slider_id.startswith("blue-slider-"):
+            self.schedule_update_rgb()
+        elif slider_id.startswith("brightness-slider-"):
+            self.schedule_update_brightness()
+        elif slider_id.startswith("delay-slider-"):
+            self.schedule_update_delay()
+    
+    @on(Input.Changed)
+    def on_input_changed(self, event: Input.Changed) -> None:
+        """Handle input changes (n parameters)."""
+        if not self.current_tab_name:
+            return
+        
+        input_id = event.input.id
+        if input_id and input_id.startswith("n") and input_id.endswith(f"-{self.current_tab_name}"):
+            self.schedule_update_n_params()
+    
+    @on(Button.Pressed)
+    def on_pattern_button_pressed(self, event: Button.Pressed) -> None:
+        """Handle pattern button press."""
+        if not self.current_tab_name:
+            return
+        
+        button = event.button
+        if isinstance(button, PatternButton) and self.current_tab_name in button.id:
+            pattern_name = button.pattern_name
+            self.send_pattern(self.current_tab_name, pattern_name)
+    
+    @on(ColorSelected)
+    def on_color_selected(self, event: ColorSelected) -> None:
+        """Handle color swatch selection."""
+        if not self.current_tab_name:
+            return
+        
+        tab_data = self.tabs_data.get(self.current_tab_name)
+        if tab_data and 0 <= event.index < len(tab_data["colors_in_palette"]):
+            tab_data["selected_color_index"] = event.index
+            # Update RGB sliders
+            hex_color = tab_data["colors_in_palette"][event.index]
+            r, g, b = color_utils.hex_to_rgb(hex_color)
+            try:
+                self.query_one(f"#red-slider-{self.current_tab_name}", Slider).value = r
+                self.query_one(f"#green-slider-{self.current_tab_name}", Slider).value = g
+                self.query_one(f"#blue-slider-{self.current_tab_name}", Slider).value = b
+            except Exception:
+                pass  # Widgets might not exist yet
+    
+    def schedule_update_rgb(self) -> None:
+        """Schedule RGB update with debouncing."""
+        current_time = time.time() * 1000
+        if self.pending_rgb_update:
+            self.pending_rgb_update.cancel()
+        
+        if current_time - self.last_rgb_update_time >= self.rgb_update_interval_ms:
+            self.update_rgb()
+            self.last_rgb_update_time = current_time
+        else:
+            delay = int(self.rgb_update_interval_ms - (current_time - self.last_rgb_update_time))
+            self.pending_rgb_update = self.set_timer(delay / 1000, self.update_rgb)
+    
+    def schedule_update_brightness(self) -> None:
+        """Schedule brightness update with debouncing."""
+        current_time = time.time() * 1000
+        if self.pending_brightness_update:
+            self.pending_brightness_update.cancel()
+        
+        if current_time - self.last_brightness_update_time >= self.brightness_update_interval_ms:
+            self.update_brightness()
+            self.last_brightness_update_time = current_time
+        else:
+            delay = int(self.brightness_update_interval_ms - (current_time - self.last_brightness_update_time))
+            self.pending_brightness_update = self.set_timer(delay / 1000, self.update_brightness)
+    
+    def schedule_update_delay(self) -> None:
+        """Schedule delay update with debouncing."""
+        current_time = time.time() * 1000
+        if self.pending_delay_update:
+            self.pending_delay_update.cancel()
+        
+        if current_time - self.last_delay_update_time >= self.delay_update_interval_ms:
+            self.update_delay()
+            self.last_delay_update_time = current_time
+        else:
+            delay = int(self.delay_update_interval_ms - (current_time - self.last_delay_update_time))
+            self.pending_delay_update = self.set_timer(delay / 1000, self.update_delay)
+    
+    def schedule_update_n_params(self) -> None:
+        """Schedule n params update with debouncing."""
+        current_time = time.time() * 1000
+        if self.pending_n_params_update:
+            self.pending_n_params_update.cancel()
+        
+        if current_time - self.last_n_params_update_time >= self.n_params_update_interval_ms:
+            self.update_n_params()
+            self.last_n_params_update_time = current_time
+        else:
+            delay = int(self.n_params_update_interval_ms - (current_time - self.last_n_params_update_time))
+            self.pending_n_params_update = self.set_timer(delay / 1000, self.update_n_params)
+    
+    @work(exclusive=False)
+    async def update_rgb(self) -> None:
+        """Update RGB values."""
+        if not self.current_tab_name:
+            return
+        
+        try:
+            red_slider = self.query_one(f"#red-slider-{self.current_tab_name}", Slider)
+            green_slider = self.query_one(f"#green-slider-{self.current_tab_name}", Slider)
+            blue_slider = self.query_one(f"#blue-slider-{self.current_tab_name}", Slider)
+            
+            r = red_slider.value
+            g = green_slider.value
+            b = blue_slider.value
+            
+            hex_color = f"#{r:02x}{g:02x}{b:02x}"
+            
+            tab_data = self.tabs_data[self.current_tab_name]
+            selected_index = tab_data["selected_color_index"]
+            if 0 <= selected_index < len(tab_data["colors_in_palette"]):
+                tab_data["colors_in_palette"][selected_index] = hex_color
+            
+            selected_server = self.current_tab_name
+            names = self.settings["lights"][selected_server]["names"]
+            current_pattern = self.settings["lights"][selected_server]["settings"].get("pattern", "on")
+            
+            colors_to_send = []
+            if current_pattern == "transition":
+                colors_to_send = tab_data["colors_in_palette"].copy()
+            elif current_pattern in ["on", "theater_chase", "flicker"]:
+                colors_to_send = [hex_color]
+            else:
+                colors_to_send = tab_data["colors_in_palette"].copy()
+            
+            pattern_config = self.patterns.get(current_pattern, {})
+            min_delay = pattern_config.get("min_delay", 10)
+            max_delay = pattern_config.get("max_delay", 10000)
+            
+            delay_slider = self.query_one(f"#delay-slider-{self.current_tab_name}", Slider)
+            delay = slider_to_delay(delay_slider.value, min_delay, max_delay)
+            
+            payload = {
+                "save": True,
+                "names": names,
+                "settings": {
+                    "colors": colors_to_send,
+                    "brightness": self.query_one(f"#brightness-slider-{self.current_tab_name}", Slider).value,
+                    "delay": delay,
+                    "pattern": current_pattern,
+                    "n1": int(self.query_one(f"#n1-input-{self.current_tab_name}", Input).value),
+                    "n2": int(self.query_one(f"#n2-input-{self.current_tab_name}", Input).value),
+                    "n3": int(self.query_one(f"#n3-input-{self.current_tab_name}", Input).value),
+                    "n4": int(self.query_one(f"#n4-input-{self.current_tab_name}", Input).value),
+                },
+            }
+            
+            # Save pattern-specific settings
+            n_params = {
+                f"n{i}": int(self.query_one(f"#n{i}-input-{self.current_tab_name}", Input).value)
+                for i in range(1, 5)
+            }
+            self.save_pattern_settings(
+                selected_server,
+                current_pattern,
+                colors=tab_data["colors_in_palette"].copy(),
+                delay=delay,
+                n_params=n_params
+            )
+            
+            self.settings["lights"][selected_server]["settings"]["brightness"] = payload["settings"]["brightness"]
+            self.settings.save()
+            
+            await self.websocket_client.send_data(payload)
+        except Exception as e:
+            self.log(f"Error updating RGB: {e}")
+    
+    @work(exclusive=False)
+    async def update_brightness(self) -> None:
+        """Update brightness."""
+        if not self.current_tab_name:
+            return
+        
+        try:
+            brightness_slider = self.query_one(f"#brightness-slider-{self.current_tab_name}", Slider)
+            brightness = brightness_slider.value
+            
+            selected_server = self.current_tab_name
+            names = self.settings["lights"][selected_server]["names"]
+            
+            payload = {
+                "save": True,
+                "names": names,
+                "settings": {
+                    "brightness": brightness,
+                },
+            }
+            
+            self.settings["lights"][selected_server]["settings"]["brightness"] = brightness
+            self.settings.save()
+            
+            await self.websocket_client.send_data(payload)
+        except Exception as e:
+            self.log(f"Error updating brightness: {e}")
+    
+    @work(exclusive=False)
+    async def update_delay(self) -> None:
+        """Update delay."""
+        if not self.current_tab_name:
+            return
+        
+        try:
+            selected_server = self.current_tab_name
+            current_pattern = self.settings["lights"][selected_server]["settings"].get("pattern", "on")
+            pattern_config = self.patterns.get(current_pattern, {})
+            min_delay = pattern_config.get("min_delay", 10)
+            max_delay = pattern_config.get("max_delay", 10000)
+            
+            delay_slider = self.query_one(f"#delay-slider-{self.current_tab_name}", Slider)
+            slider_value = delay_slider.value
+            delay = slider_to_delay(slider_value, min_delay, max_delay)
+            
+            # Update delay value label
+            delay_label = self.query_one(f"#delay-value-{self.current_tab_name}", Label)
+            delay_label.update(f"{delay} ms")
+            
+            names = self.settings["lights"][selected_server]["names"]
+            payload = {
+                "save": True,
+                "names": names,
+                "settings": {
+                    "delay": delay,
+                },
+            }
+            
+            self.save_pattern_settings(selected_server, current_pattern, delay=delay)
+            self.settings.save()
+            
+            await self.websocket_client.send_data(payload)
+        except Exception as e:
+            self.log(f"Error updating delay: {e}")
+    
+    @work(exclusive=False)
+    async def update_n_params(self) -> None:
+        """Update n parameters."""
+        if not self.current_tab_name:
+            return
+        
+        try:
+            n_params = {}
+            for i in range(1, 5):
+                n_input = self.query_one(f"#n{i}-input-{self.current_tab_name}", Input)
+                n_params[f"n{i}"] = int(n_input.value)
+            
+            selected_server = self.current_tab_name
+            names = self.settings["lights"][selected_server]["names"]
+            payload = {
+                "save": True,
+                "names": names,
+                "settings": n_params,
+            }
+            
+            current_pattern = self.settings["lights"][selected_server]["settings"].get("pattern", "on")
+            self.save_pattern_settings(selected_server, current_pattern, n_params=n_params)
+            self.settings.save()
+            
+            await self.websocket_client.send_data(payload)
+        except Exception as e:
+            self.log(f"Error updating n params: {e}")
+    
+    @work(exclusive=False)
+    async def send_pattern(self, tab_name: str, pattern_name: str) -> None:
+        """Send pattern change to server."""
+        try:
+            names = self.settings["lights"][tab_name]["names"]
+            
+            # Save current pattern's settings
+            old_pattern = self.settings["lights"][tab_name]["settings"].get("pattern", "on")
+            tab_data = self.tabs_data[tab_name]
+            
+            # Get current delay
+            delay_slider = self.query_one(f"#delay-slider-{tab_name}", Slider)
+            pattern_config = self.patterns.get(old_pattern, {})
+            min_delay = pattern_config.get("min_delay", 10)
+            max_delay = pattern_config.get("max_delay", 10000)
+            current_delay = slider_to_delay(delay_slider.value, min_delay, max_delay)
+            
+            # Get current n params
+            current_n_params = {
+                f"n{i}": int(self.query_one(f"#n{i}-input-{tab_name}", Input).value)
+                for i in range(1, 5)
+            }
+            
+            self.save_pattern_settings(
+                tab_name,
+                old_pattern,
+                colors=tab_data["colors_in_palette"].copy(),
+                delay=current_delay,
+                n_params=current_n_params
+            )
+            
+            # Load new pattern's settings
+            new_pattern_settings = self.get_pattern_settings(tab_name, pattern_name)
+            
+            # Update UI with new pattern's settings
+            tab_data["colors_in_palette"] = new_pattern_settings["colors"].copy()
+            tab_data["pattern"] = pattern_name
+            
+            # Update delay slider
+            pattern_config = self.patterns.get(pattern_name, {})
+            min_delay = pattern_config.get("min_delay", 10)
+            max_delay = pattern_config.get("max_delay", 10000)
+            delay_slider_pos = delay_to_slider(new_pattern_settings["delay"], min_delay, max_delay)
+            delay_slider.value = int(delay_slider_pos)
+            delay_label = self.query_one(f"#delay-value-{tab_name}", Label)
+            delay_label.update(f"{new_pattern_settings['delay']} ms")
+            
+            # Update n params
+            for i in range(1, 5):
+                n_input = self.query_one(f"#n{i}-input-{tab_name}", Input)
+                n_input.value = str(new_pattern_settings[f"n{i}"])
+            
+            # Update RGB sliders to first color
+            if tab_data["colors_in_palette"]:
+                hex_color = tab_data["colors_in_palette"][0]
+                r, g, b = color_utils.hex_to_rgb(hex_color)
+                self.query_one(f"#red-slider-{tab_name}", Slider).value = r
+                self.query_one(f"#green-slider-{tab_name}", Slider).value = g
+                self.query_one(f"#blue-slider-{tab_name}", Slider).value = b
+                tab_data["selected_color_index"] = 0
+            
+            payload_settings = {
+                "pattern": pattern_name,
+                "brightness": self.settings["lights"][tab_name]["settings"].get("brightness", 127),
+                "delay": new_pattern_settings["delay"],
+                "colors": new_pattern_settings["colors"],
+            }
+            
+            for i in range(1, 5):
+                payload_settings[f"n{i}"] = new_pattern_settings[f"n{i}"]
+            
+            payload = {
+                "save": True,
+                "names": names,
+                "settings": payload_settings,
+            }
+            
+            self.settings["lights"][tab_name]["settings"]["pattern"] = pattern_name
+            self.settings.save()
+            
+            await self.websocket_client.send_data(payload)
+        except Exception as e:
+            self.log(f"Error sending pattern: {e}")
+    
+    def action_add_tab(self) -> None:
+        """Add a new tab."""
+        self.push_screen(AddTabScreen(), self.on_add_tab_result)
+    
+    def on_add_tab_result(self, result) -> None:
+        """Handle result from add tab dialog."""
+        if result is None:
+            return
+        
+        tab_name, ids = result
+        
+        if tab_name in self.settings.get("lights", {}):
+            self.bell()
+            return
+        
+        # Create new tab entry
+        self.settings.setdefault("lights", {})[tab_name] = {
+            "names": ids,
+            "settings": {
+                "pattern": "on",
+                "brightness": 127,
+                "colors": ["#000000"],
+                "delay": 100,
+                "n1": 10,
+                "n2": 10,
+                "n3": 10,
+                "n4": 10,
+                "patterns": {}
+            }
+        }
+        
+        if "tab_order" not in self.settings:
+            self.settings["tab_order"] = []
+        self.settings["tab_order"].append(tab_name)
+        self.save_profile()
+        
+        # Recreate tabs
+        self.create_tabs()
+    
+    def action_edit_tab(self) -> None:
+        """Edit current tab."""
+        if not self.current_tab_name:
+            return
+        
+        light_data = self.settings["lights"][self.current_tab_name]
+        current_ids = light_data["names"]
+        
+        self.push_screen(
+            EditTabScreen(self.current_tab_name, current_ids),
+            self.on_edit_tab_result
+        )
+    
+    def on_edit_tab_result(self, result) -> None:
+        """Handle result from edit tab dialog."""
+        if result is None:
+            return
+        
+        new_tab_name, ids = result
+        
+        if new_tab_name != self.current_tab_name:
+            if new_tab_name in self.settings.get("lights", {}):
+                self.bell()
+                return
+            
+            # Rename in settings
+            self.settings["lights"][new_tab_name] = self.settings["lights"][self.current_tab_name]
+            del self.settings["lights"][self.current_tab_name]
+            
+            # Update tab order
+            if "tab_order" in self.settings and self.current_tab_name in self.settings["tab_order"]:
+                index = self.settings["tab_order"].index(self.current_tab_name)
+                self.settings["tab_order"][index] = new_tab_name
+        
+        # Update IDs
+        self.settings["lights"][new_tab_name]["names"] = ids
+        self.save_profile()
+        
+        # Recreate tabs
+        self.create_tabs()
+    
+    def action_delete_tab(self) -> None:
+        """Delete current tab."""
+        if not self.current_tab_name:
+            return
+        
+        # Delete from settings
+        del self.settings["lights"][self.current_tab_name]
+        
+        # Remove from tab order
+        if "tab_order" in self.settings and self.current_tab_name in self.settings["tab_order"]:
+            self.settings["tab_order"].remove(self.current_tab_name)
+        
+        self.save_profile()
+        
+        # Recreate tabs
+        self.create_tabs()
+    
+    def action_profiles(self) -> None:
+        """Open profiles menu."""
+        # TODO: Implement profiles menu
+        self.bell()
+    
+    def save_profile(self) -> None:
+        """Save current settings to the active profile."""
+        current_profile = self.settings.get("current_profile")
+        if not current_profile:
+            return
+        
+        try:
+            profile_path = os.path.join("profiles", f"{current_profile}.json")
+            os.makedirs("profiles", exist_ok=True)
+            
+            tab_order = self.get_tab_order()
+            self.settings["tab_order"] = tab_order
+            
+            profile_data = dict(self.settings)
+            profile_data.pop("current_profile", None)
+            with open(profile_path, 'w') as file:
+                json.dump(profile_data, file, indent=4)
+        except Exception as e:
+            self.log(f"Error saving profile: {e}")
+
+
+if __name__ == "__main__":
+    app = LightingControllerApp()
+    app.run()
+
diff --git a/src/main_tkinter.py.bak b/src/main_tkinter.py.bak
new file mode 100644
index 0000000..25f069c
--- /dev/null
+++ b/src/main_tkinter.py.bak
@@ -0,0 +1,2135 @@
+import asyncio
+import tkinter as tk
+from tkinter import ttk, messagebox  # Import messagebox for confirmations
+import json
+import os
+from async_tkinter_loop import async_handler, async_mainloop
+from networking import WebSocketClient
+import color_utils
+from settings import Settings
+import time
+import math
+
+# Dark theme colors (unchanged)
+bg_color = "#2e2e2e"
+fg_color = "white"
+trough_color_red = "#4a0000"
+trough_color_green = "#004a00"
+trough_color_blue = "#00004a"
+trough_color_brightness = "#4a4a4a"
+trough_color_delay = "#4a4a4a"
+active_bg_color = "#4a4a4a"
+highlight_pattern_color = "#6a5acd"
+# New color for active color in palette
+active_palette_color_border = "#FFD700"  # Gold color
+
+
+def delay_to_slider(delay_ms, min_delay=10, max_delay=10000):
+    """Convert delay in ms to slider position (0-1000) using logarithmic scale."""
+    if delay_ms <= min_delay:
+        return 0
+    if delay_ms >= max_delay:
+        return 1000
+    # Logarithmic conversion: delay = min * (max/min) ^ (position/1000)
+    # Solving for position: position = 1000 * log(delay/min) / log(max/min)
+    if min_delay == max_delay:
+        return 0
+    return 1000 * math.log(delay_ms / min_delay) / math.log(max_delay / min_delay)
+
+def slider_to_delay(slider_value, min_delay=10, max_delay=10000):
+    """Convert slider position (0-1000) to delay in ms using logarithmic scale."""
+    if slider_value <= 0:
+        return min_delay
+    if slider_value >= 1000:
+        return max_delay
+    # Logarithmic conversion: delay = min * (max/min) ^ (position/1000)
+    if min_delay == max_delay:
+        return min_delay
+    return int(min_delay * ((max_delay / min_delay) ** (slider_value / 1000)))
+
+
+class App:
+    def __init__(self) -> None:
+        self.settings = Settings()
+        self.patterns = self.load_patterns()
+        self.root = tk.Tk()
+        self.root.attributes("-fullscreen", True)
+        self.root.configure(bg=bg_color)
+        
+        # Calculate scale factor based on screen resolution
+        # Reference resolution: 1920x1080
+        screen_width = self.root.winfo_screenwidth()
+        screen_height = self.root.winfo_screenheight()
+        ref_width = 1920
+        ref_height = 1080
+        # Use the smaller scale factor to ensure everything fits
+        self.scale_factor = min(screen_width / ref_width, screen_height / ref_height)
+        # Clamp scale factor between 0.5 and 2.0 for reasonable scaling
+        self.scale_factor = max(0.5, min(2.0, self.scale_factor))
+        
+        # Helper methods for scaling
+        def scale_font(size):
+            return int(size * self.scale_factor)
+        
+        def scale_size(size):
+            return int(size * self.scale_factor)
+        
+        self.scale_font = scale_font
+        self.scale_size = scale_size
+
+        # Debouncing variables (remain the same)
+        self.last_rgb_update_time = 0
+        self.rgb_update_interval_ms = 100
+        self.pending_rgb_update_id = None
+
+        self.last_brightness_update_time = 0
+        self.brightness_update_interval_ms = 100
+        self.pending_brightness_update_id = None
+
+        self.last_delay_update_time = 0
+        self.delay_update_interval_ms = 100
+        self.pending_delay_update_id = None
+
+        self.last_n_params_update_time = 0
+        self.n_params_update_interval_ms = 100
+        self.pending_n_params_update_id = None
+
+        # --- WebSocketClient ---
+        self.websocket_client = WebSocketClient("ws://192.168.4.1:80/ws")
+        self.root.after(100, async_handler(self.websocket_client.connect))
+
+        # Configure ttk style (scaled)
+        style = ttk.Style()
+        style.theme_use("alt")
+        style.configure(".", background=bg_color, foreground=fg_color, font=("Arial", self.scale_font(14)))
+        style.configure("TNotebook", background=bg_color, borderwidth=0)
+        style.configure(
+            "TNotebook.Tab", background=bg_color, foreground=fg_color, font=("Arial", self.scale_font(30)), padding=[self.scale_size(10), self.scale_size(5)]
+        )
+        style.map("TNotebook.Tab", background=[("selected", active_bg_color)], foreground=[("selected", fg_color)])
+        style.configure("TFrame", background=bg_color)
+
+        # Create a frame to hold notebook and menu button on same row
+        # The notebook tabs appear at the top, so we'll position the menu button there
+        top_frame = tk.Frame(self.root, bg=bg_color)
+        top_frame.pack(side=tk.TOP, fill=tk.X)
+        
+        # Create Notebook for tabs
+        self.notebook = ttk.Notebook(self.root)
+        self.notebook.pack(expand=True, fill="both")
+        
+        # Create menu button positioned to appear on same row as tabs
+        # Calculate approximate tab height: font size + padding
+        tab_font_size = self.scale_font(30)
+        tab_padding = self.scale_size(5) * 2
+        tab_height = tab_font_size + tab_padding + self.scale_size(10)
+        
+        menu_btn = tk.Menubutton(
+            self.root,
+            text="☰ Menu",
+            bg=active_bg_color,
+            fg=fg_color,
+            font=("Arial", self.scale_font(20)),
+            padx=self.scale_size(20),
+            pady=self.scale_size(10),
+            relief=tk.RAISED,
+            direction="below"
+        )
+        # Position menu button aligned with tabs (vertically centered with tab row)
+        # The tabs are at the top of the notebook, so position button at same level
+        # We need to wait for the notebook to be rendered to get accurate positioning
+        def position_menu_button():
+            self.root.update_idletasks()
+            # Get the notebook's tab area position
+            notebook_y = self.notebook.winfo_y()
+            # Position button at the same vertical level as tabs (tabs are at top of notebook)
+            menu_btn.place(relx=1.0, y=notebook_y + tab_height//2, anchor="e", x=-self.scale_size(10))
+        
+        # Position after initial layout
+        self.root.after(10, position_menu_button)
+        # Also position immediately as fallback
+        menu_btn.place(relx=1.0, y=tab_height//2, anchor="e", x=-self.scale_size(10))
+        
+        # Create the menu (bigger font)
+        menu = tk.Menu(menu_btn, tearoff=0, bg=bg_color, fg=fg_color, font=("Arial", self.scale_font(16)))
+        menu_btn.config(menu=menu)
+        
+        # Add tab management items directly
+        menu.add_command(label="+ Add Tab", command=self.add_tab_dialog)
+        menu.add_command(label="✎ Edit Tab", command=self.edit_tab_dialog)
+        menu.add_command(label="✗ Delete Tab", command=self.delete_tab_dialog)
+        menu.add_separator()
+        menu.add_command(label="← Move Tab Left", command=self.move_tab_left)
+        menu.add_command(label="→ Move Tab Right", command=self.move_tab_right)
+        menu.add_separator()
+        
+        # Profile management - use a custom popup menu that opens to the left
+        # Store reference for the profile menu function
+        self.profile_menu_items = []
+        
+        def show_profile_menu():
+            """Show profile menu as a popup to the left"""
+            # Create a popup menu window
+            popup = tk.Toplevel(self.root)
+            popup.overrideredirect(True)  # Remove window decorations
+            popup.configure(bg=bg_color)
+            
+            # Position to the left of the menu button
+            menu_btn.update_idletasks()
+            btn_x = menu_btn.winfo_x()
+            btn_y = menu_btn.winfo_y()
+            btn_height = menu_btn.winfo_height()
+            
+            # Calculate popup position (to the left of menu button)
+            popup_width = self.scale_size(200)
+            popup_x = btn_x - popup_width - self.scale_size(5)
+            popup_y = btn_y
+            
+            popup.geometry(f"{popup_width}x{self.scale_size(400)}+{popup_x}+{popup_y}")
+            
+            # Create menu frame
+            menu_frame = tk.Frame(popup, bg=bg_color)
+            menu_frame.pack(fill=tk.BOTH, expand=True, padx=2, pady=2)
+            
+            # Add menu items
+            def add_menu_item(text, command=None, state="normal"):
+                if state == "disabled":
+                    label = tk.Label(menu_frame, text=text, bg=bg_color, fg=fg_color, 
+                                   font=("Arial", self.scale_font(14)), anchor="w")
+                    label.pack(fill=tk.X, padx=self.scale_size(5), pady=self.scale_size(2))
+                else:
+                    btn = tk.Button(menu_frame, text=text, bg=bg_color, fg=fg_color,
+                                  font=("Arial", self.scale_font(14)), anchor="w",
+                                  relief=tk.FLAT, command=lambda: (command() if command else None, popup.destroy()))
+                    btn.pack(fill=tk.X, padx=self.scale_size(5), pady=self.scale_size(2))
+                    btn.bind("<Enter>", lambda e: btn.config(bg=active_bg_color))
+                    btn.bind("<Leave>", lambda e: btn.config(bg=bg_color))
+            
+            add_menu_item("+ New Profile", self.new_profile_dialog)
+            add_menu_item("💾 Save Profile", self.save_profile_dialog)
+            add_menu_item("", state="disabled")  # Separator
+            add_menu_item("Load Profile:", state="disabled")
+            
+            # Get profiles
+            profiles_dir = "profiles"
+            profiles = []
+            if os.path.exists(profiles_dir):
+                for filename in os.listdir(profiles_dir):
+                    if filename.endswith('.json'):
+                        profiles.append(filename[:-5])
+            profiles.sort()
+            current_profile = self.settings.get("current_profile", "")
+            
+            # Add profile list
+            for profile in profiles:
+                label = f"✓ {profile}" if profile == current_profile else profile
+                add_menu_item(label, lambda p=profile: (self.on_profile_selected_menu(p), popup.destroy()))
+            
+            # Close popup when clicking outside
+            def close_on_focus_out(event):
+                if event.widget == popup:
+                    popup.destroy()
+            popup.bind("<FocusOut>", close_on_focus_out)
+            popup.focus_set()
+        
+        # Add Profiles item that opens the custom popup menu
+        menu.add_command(label="Profiles →", command=show_profile_menu)
+        
+        # Store menu references for updating
+        self.menu_btn = menu_btn
+        self.profile_var = tk.StringVar()  # Keep for compatibility
+        self.profile_menu = None  # Not using standard menu for profiles
+        
+        # Load profiles
+        self.profiles_dir = "profiles"
+        os.makedirs(self.profiles_dir, exist_ok=True)
+        self.refresh_profiles()
+        
+        # Load current profile if specified
+        current_profile = self.settings.get("current_profile")
+        if current_profile:
+            try:
+                # Load profile without showing dialog
+                profile_path = os.path.join(self.profiles_dir, f"{current_profile}.json")
+                if os.path.exists(profile_path):
+                    with open(profile_path, 'r') as file:
+                        profile_data = json.load(file)
+                    
+                    # Load profile data into settings for use in the app
+                    # Remove current_profile from profile data if it exists (shouldn't be in profiles)
+                    profile_data.pop("current_profile", None)
+                    # Preserve patterns and other settings.json-only data
+                    patterns_backup = self.settings.get("patterns", {})
+                    tab_password_backup = self.settings.get("tab_password", "")
+                    # Update with profile data (lights, tab_order, tab_password from profile)
+                    self.settings.update(profile_data)
+                    # Restore settings.json-only data
+                    self.settings["patterns"] = patterns_backup
+                    self.settings["current_profile"] = current_profile
+                    # Only save current_profile to settings.json, not profile data
+                    settings_to_save = {
+                        "tab_password": tab_password_backup,
+                        "current_profile": current_profile,
+                        "patterns": patterns_backup
+                    }
+                    with open("settings.json", 'w') as f:
+                        json.dump(settings_to_save, f, indent=4)
+                    # Ensure tab_order exists in profile
+                    if "tab_order" not in self.settings:
+                        if "lights" in self.settings:
+                            self.settings["tab_order"] = list(self.settings["lights"].keys())
+                        else:
+                            self.settings["tab_order"] = []
+            except Exception as e:
+                print(f"Error loading current profile '{current_profile}': {e}")
+
+        self.tabs = {}
+        self.create_tabs()
+
+        self.notebook.bind("<<NotebookTabChanged>>", self.on_tab_change)
+
+        self.root.protocol("WM_DELETE_WINDOW", self.on_closing)
+
+        async_mainloop(self.root)
+    
+    def new_profile_dialog(self):
+        """Open dialog to create a new empty profile"""
+        dialog = tk.Toplevel(self.root)
+        dialog.title("New Profile")
+        dialog.configure(bg=bg_color)
+        dialog.transient(self.root)
+        dialog.grab_set()
+        
+        # Center the dialog
+        dialog.geometry("500x200")
+        dialog.update_idletasks()
+        x = (dialog.winfo_screenwidth() // 2) - (dialog.winfo_width() // 2)
+        y = (dialog.winfo_screenheight() // 2) - (dialog.winfo_height() // 2)
+        dialog.geometry(f"+{x}+{y}")
+        
+        tk.Label(dialog, text="Profile Name:", bg=bg_color, fg=fg_color, font=("Arial", 14)).pack(pady=20)
+        name_entry = tk.Entry(dialog, font=("Arial", 14), width=30)
+        name_entry.pack(pady=10)
+        name_entry.focus()
+        
+        def create_profile():
+            profile_name = name_entry.get().strip()
+            if not profile_name:
+                messagebox.showerror("Error", "Profile name cannot be empty", parent=dialog)
+                return
+            
+            # Check if profile exists
+            profile_path = os.path.join(self.profiles_dir, f"{profile_name}.json")
+            if os.path.exists(profile_path):
+                messagebox.showerror("Error", f"Profile '{profile_name}' already exists", parent=dialog)
+                return
+            
+            try:
+                # Create empty profile with same structure as settings.json
+                empty_profile = {
+                    "lights": {},
+                    "tab_password": "",
+                    "tab_order": []
+                }
+                
+                with open(profile_path, 'w') as file:
+                    json.dump(empty_profile, file, indent=4)
+                
+                # Load the new profile
+                self.load_profile(profile_name)
+                
+                # Refresh profiles dropdown
+                self.refresh_profiles()
+                
+                messagebox.showinfo("Success", f"Empty profile '{profile_name}' created and loaded", parent=dialog)
+                dialog.destroy()
+            except Exception as e:
+                messagebox.showerror("Error", f"Failed to create profile: {e}", parent=dialog)
+        
+        button_frame = tk.Frame(dialog, bg=bg_color)
+        button_frame.pack(pady=20)
+        
+        tk.Button(
+            button_frame,
+            text="Create",
+            command=create_profile,
+            bg=active_bg_color,
+            fg=fg_color,
+            font=("Arial", 18),
+            padx=40,
+            pady=15,
+            width=10
+        ).pack(side=tk.LEFT, padx=5)
+        
+        tk.Button(
+            button_frame,
+            text="Cancel",
+            command=dialog.destroy,
+            bg=active_bg_color,
+            fg=fg_color,
+            font=("Arial", 18),
+            padx=40,
+            pady=15,
+            width=10
+        ).pack(side=tk.LEFT, padx=5)
+        
+        name_entry.bind("<Return>", lambda e: create_profile())
+    
+    def refresh_profiles(self):
+        """Refresh the list of available profiles"""
+        try:
+            profiles = []
+            if os.path.exists(self.profiles_dir):
+                for filename in os.listdir(self.profiles_dir):
+                    if filename.endswith('.json'):
+                        profiles.append(filename[:-5])  # Remove .json extension
+            profiles.sort()
+            
+            # Update profile menu - clear existing profile items
+            # Find "Load Profile:" label index
+            load_profile_label_idx = None
+            try:
+                menu_count = self.profile_menu.index(tk.END)
+                for i in range(menu_count + 1):
+                    try:
+                        if self.profile_menu.type(i) == "command":
+                            label = self.profile_menu.entryconfig(i, "label")[4]
+                            if label == "Load Profile:":
+                                load_profile_label_idx = i
+                                break
+                    except:
+                        pass
+            except:
+                pass
+            
+            if load_profile_label_idx is not None:
+                # Delete all items after "Load Profile:" until we hit the end
+                try:
+                    menu_count = self.profile_menu.index(tk.END)
+                    # Delete backwards from the end
+                    items_to_delete = []
+                    for i in range(menu_count, load_profile_label_idx, -1):
+                        try:
+                            item_type = self.profile_menu.type(i)
+                            if item_type == "command":
+                                label = self.profile_menu.entryconfig(i, "label")[4]
+                                if label not in ["Load Profile:", "+ New Profile", "💾 Save Profile"]:
+                                    items_to_delete.append(i)
+                            elif item_type == "separator":
+                                # Delete separators after "Load Profile:"
+                                items_to_delete.append(i)
+                        except:
+                            pass
+                    
+                    # Delete items
+                    for i in sorted(items_to_delete, reverse=True):
+                        try:
+                            self.profile_menu.delete(i)
+                        except:
+                            pass
+                except Exception as e:
+                    print(f"Error clearing profile menu: {e}")
+            
+            # Get current profile
+            current_profile = self.settings.get("current_profile", "")
+            
+            # Add profile items to menu (after "Load Profile:" label)
+            if profiles:
+                insert_pos = load_profile_label_idx + 1 if load_profile_label_idx is not None else self.profile_menu.index(tk.END) + 1
+                
+                # Add each profile as a menu item
+                for profile in profiles:
+                    label = f"✓ {profile}" if profile == current_profile else profile
+                    self.profile_menu.insert_command(
+                        insert_pos,
+                        label=label,
+                        command=lambda p=profile: self.on_profile_selected_menu(p)
+                    )
+                    insert_pos += 1
+        except Exception as e:
+            print(f"Error refreshing profiles: {e}")
+    
+    def on_profile_selected(self, event=None):
+        """Handle profile selection from dropdown (legacy, not used with menu)"""
+        pass
+    
+    def on_profile_selected_menu(self, profile_name):
+        """Handle profile selection from menu"""
+        if not profile_name:
+            return
+        
+        # Confirm before loading (will overwrite current settings)
+        result = messagebox.askyesno(
+            "Load Profile",
+            f"Load profile '{profile_name}'?\n\nThis will replace your current settings.",
+            icon="question"
+        )
+        
+        if result:
+            self.load_profile(profile_name)
+    
+    def load_profile(self, profile_name):
+        """Load a profile from the profiles directory"""
+        try:
+            profile_path = os.path.join(self.profiles_dir, f"{profile_name}.json")
+            if not os.path.exists(profile_path):
+                messagebox.showerror("Error", f"Profile '{profile_name}' not found")
+                return
+            
+            with open(profile_path, 'r') as file:
+                profile_data = json.load(file)
+            
+            # Load profile data into settings for use in the app
+            # Remove current_profile from profile data if it exists (shouldn't be in profiles)
+            profile_data.pop("current_profile", None)
+            # Preserve patterns and other settings.json-only data
+            patterns_backup = self.settings.get("patterns", {})
+            tab_password_backup = self.settings.get("tab_password", "")
+            # Update with profile data (lights, tab_order, tab_password from profile)
+            self.settings.update(profile_data)
+            # Restore settings.json-only data
+            self.settings["patterns"] = patterns_backup
+            self.settings["current_profile"] = profile_name
+            # Only save current_profile to settings.json, not profile data
+            settings_to_save = {
+                "tab_password": tab_password_backup,
+                "current_profile": profile_name,
+                "patterns": patterns_backup
+            }
+            with open("settings.json", 'w') as f:
+                json.dump(settings_to_save, f, indent=4)
+            # Ensure tab_order exists in profile
+            if "tab_order" not in self.settings:
+                if "lights" in self.settings:
+                    self.settings["tab_order"] = list(self.settings["lights"].keys())
+                else:
+                    self.settings["tab_order"] = []
+            
+            # Recreate tabs with new settings
+            self.create_tabs()
+            
+            # Select first tab if available
+            if self.settings.get("lights"):
+                self.notebook.select(0)
+            
+            messagebox.showinfo("Success", f"Profile '{profile_name}' loaded successfully")
+        except Exception as e:
+            messagebox.showerror("Error", f"Failed to load profile: {e}")
+    
+    def save_profile_dialog(self):
+        """Open dialog to save current settings as a profile"""
+        dialog = tk.Toplevel(self.root)
+        dialog.title("Save Profile")
+        dialog.configure(bg=bg_color)
+        dialog.transient(self.root)
+        dialog.grab_set()
+        
+        # Center the dialog
+        dialog.geometry("500x200")
+        dialog.update_idletasks()
+        x = (dialog.winfo_screenwidth() // 2) - (dialog.winfo_width() // 2)
+        y = (dialog.winfo_screenheight() // 2) - (dialog.winfo_height() // 2)
+        dialog.geometry(f"+{x}+{y}")
+        
+        tk.Label(dialog, text="Profile Name:", bg=bg_color, fg=fg_color, font=("Arial", 14)).pack(pady=20)
+        name_entry = tk.Entry(dialog, font=("Arial", 14), width=30)
+        name_entry.pack(pady=10)
+        name_entry.focus()
+        
+        # Pre-fill with current profile if exists
+        current_profile = self.settings.get("current_profile", "")
+        if current_profile:
+            name_entry.insert(0, current_profile)
+        
+        def save_profile():
+            profile_name = name_entry.get().strip()
+            if not profile_name:
+                messagebox.showerror("Error", "Profile name cannot be empty", parent=dialog)
+                return
+            
+            # Check if profile exists
+            profile_path = os.path.join(self.profiles_dir, f"{profile_name}.json")
+            overwrite = False
+            if os.path.exists(profile_path):
+                result = messagebox.askyesno(
+                    "Overwrite?",
+                    f"Profile '{profile_name}' already exists. Overwrite?",
+                    parent=dialog
+                )
+                if not result:
+                    return
+                overwrite = True
+            
+            try:
+                # Get current tab order from notebook
+                tab_order = []
+                for i in range(self.notebook.index("end")):
+                    tab_text = self.notebook.tab(i, "text")
+                    if "lights" in self.settings and tab_text in self.settings["lights"]:
+                        tab_order.append(tab_text)
+                
+                # Save current settings as profile (exclude current_profile from profile file)
+                profile_data = dict(self.settings)
+                profile_data.pop("current_profile", None)  # Remove current_profile from profile
+                profile_data["tab_order"] = tab_order
+                
+                with open(profile_path, 'w') as file:
+                    json.dump(profile_data, file, indent=4)
+                
+                # Update current profile in settings.json (not in profile file)
+                self.settings["current_profile"] = profile_name
+                self.settings["tab_order"] = tab_order
+                self.settings.save()
+                
+                # Refresh profiles dropdown
+                self.refresh_profiles()
+                
+                if overwrite:
+                    messagebox.showinfo("Success", f"Profile '{profile_name}' updated successfully", parent=dialog)
+                else:
+                    messagebox.showinfo("Success", f"Profile '{profile_name}' saved successfully", parent=dialog)
+                
+                dialog.destroy()
+            except Exception as e:
+                messagebox.showerror("Error", f"Failed to save profile: {e}", parent=dialog)
+        
+        button_frame = tk.Frame(dialog, bg=bg_color)
+        button_frame.pack(pady=20)
+        
+        tk.Button(
+            button_frame,
+            text="Save",
+            command=save_profile,
+            bg=active_bg_color,
+            fg=fg_color,
+            font=("Arial", 18),
+            padx=40,
+            pady=15,
+            width=10
+        ).pack(side=tk.LEFT, padx=5)
+        
+        tk.Button(
+            button_frame,
+            text="Cancel",
+            command=dialog.destroy,
+            bg=active_bg_color,
+            fg=fg_color,
+            font=("Arial", 18),
+            padx=40,
+            pady=15,
+            width=10
+        ).pack(side=tk.LEFT, padx=5)
+        
+        name_entry.bind("<Return>", lambda e: save_profile())
+    
+    def load_patterns(self):
+        """Load patterns from settings.json file."""
+        try:
+            # Load patterns from settings.json
+            patterns = self.settings.get("patterns", {})
+            if not patterns:
+                # If patterns don't exist, create default empty dict
+                patterns = {}
+                self.settings["patterns"] = patterns
+                self.settings.save()
+            print("Patterns loaded successfully.")
+            return patterns
+        except Exception as e:
+            print(f"Error loading patterns: {e}")
+            return {}
+    
+    def get_n_parameter_name(self, pattern_name, n_index):
+        """Get the descriptive name for an n parameter based on the pattern.
+        Returns None if no description exists."""
+        pattern_config = self.patterns.get(pattern_name, {})
+        
+        # Find which n parameter this index maps to
+        n_key = f"n{n_index}"
+        for desc_name, mapped_n in pattern_config.items():
+            if mapped_n == n_key:
+                return desc_name
+        
+        # If no mapping found, return None
+        return None
+    
+    def update_n_labels(self, tab, pattern_name):
+        """Update the n parameter labels to show descriptive names and hide/show inputs."""
+        for i in range(1, 5):
+            label_key = f"n{i}_label"
+            frame_key = f"n{i}_frame"
+            
+            if label_key in tab.widgets and frame_key in tab.widgets:
+                desc_name = self.get_n_parameter_name(pattern_name, i)
+                
+                if desc_name:
+                    # Show the input and update label with descriptive name
+                    tab.widgets[frame_key].grid()
+                    tab.widgets[label_key].config(text=desc_name)
+                else:
+                    # Show the input with default n{i} label if no description
+                    tab.widgets[frame_key].grid()
+                    tab.widgets[label_key].config(text=f"n{i}")
+    
+    def get_pattern_settings(self, tab_name, pattern_name):
+        """Get pattern-specific settings (colors, delay, n params). Returns defaults if not found."""
+        light_settings = self.settings["lights"][tab_name]["settings"]
+        if "patterns" not in light_settings:
+            light_settings["patterns"] = {}
+        if pattern_name not in light_settings["patterns"]:
+            light_settings["patterns"][pattern_name] = {}
+        
+        pattern_settings = light_settings["patterns"][pattern_name]
+        return {
+            "colors": pattern_settings.get("colors", ["#000000"]),
+            "delay": pattern_settings.get("delay", 100),
+            "n1": pattern_settings.get("n1", 10),
+            "n2": pattern_settings.get("n2", 10),
+            "n3": pattern_settings.get("n3", 10),
+            "n4": pattern_settings.get("n4", 10),
+        }
+    
+    def save_pattern_settings(self, tab_name, pattern_name, colors=None, delay=None, n_params=None):
+        """Save pattern-specific settings."""
+        light_settings = self.settings["lights"][tab_name]["settings"]
+        if "patterns" not in light_settings:
+            light_settings["patterns"] = {}
+        if pattern_name not in light_settings["patterns"]:
+            light_settings["patterns"][pattern_name] = {}
+        
+        pattern_settings = light_settings["patterns"][pattern_name]
+        if colors is not None:
+            pattern_settings["colors"] = colors
+        if delay is not None:
+            pattern_settings["delay"] = delay
+        if n_params is not None:
+            for i in range(1, 5):
+                if f"n{i}" in n_params:
+                    pattern_settings[f"n{i}"] = n_params[f"n{i}"]
+
+    def on_closing(self):
+        print("Closing application...")
+        asyncio.create_task(self.websocket_client.close())
+        self.root.destroy()
+
+    def get_tab_order(self):
+        """Get the tab order from current profile, or create default order from current lights"""
+        if "tab_order" not in self.settings:
+            # Initialize tab_order from current lights keys
+            if "lights" in self.settings:
+                self.settings["tab_order"] = list(self.settings["lights"].keys())
+            else:
+                self.settings["tab_order"] = []
+        # Ensure all current tabs are in the order
+        if "lights" in self.settings:
+            current_tabs = set(self.settings["lights"].keys())
+            order_tabs = set(self.settings["tab_order"])
+            # Add any missing tabs to the end
+            for tab in current_tabs:
+                if tab not in order_tabs:
+                    self.settings["tab_order"].append(tab)
+            # Remove tabs that no longer exist
+            self.settings["tab_order"] = [tab for tab in self.settings["tab_order"] if tab in current_tabs]
+        return self.settings.get("tab_order", [])
+    
+    def save_profile(self):
+        """Save current settings to the active profile"""
+        current_profile = self.settings.get("current_profile")
+        if not current_profile:
+            return
+        
+        try:
+            profile_path = os.path.join(self.profiles_dir, f"{current_profile}.json")
+            # Get current tab order from notebook
+            tab_order = []
+            for i in range(self.notebook.index("end")):
+                tab_text = self.notebook.tab(i, "text")
+                if "lights" in self.settings and tab_text in self.settings["lights"]:
+                    tab_order.append(tab_text)
+            self.settings["tab_order"] = tab_order
+            
+            # Save to profile file (exclude current_profile from profile)
+            profile_data = dict(self.settings)
+            profile_data.pop("current_profile", None)  # Remove current_profile from profile
+            with open(profile_path, 'w') as file:
+                json.dump(profile_data, file, indent=4)
+        except Exception as e:
+            print(f"Error saving profile: {e}")
+    
+    def create_tabs(self):
+        for tab_name in list(self.tabs.keys()):
+            self.notebook.forget(self.tabs[tab_name])
+            del self.tabs[tab_name]
+
+        # Use stored tab order
+        tab_order = self.get_tab_order()
+        
+        for key in tab_order:
+            if key in self.settings["lights"]:
+                value = self.settings["lights"][key]
+                tab = ttk.Frame(self.notebook)
+                self.notebook.add(tab, text=key)
+                self.create_light_control_widgets(tab, key, value["names"], value["settings"])
+                self.tabs[key] = tab
+
+    def create_light_control_widgets(self, tab, tab_name, ids, initial_settings):
+        slider_length = self.scale_size(600)
+        slider_width = self.scale_size(50)
+
+        # Get initial pattern and load pattern-specific settings
+        initial_pattern = initial_settings.get("pattern", "on")
+        initial_brightness = initial_settings.get("brightness", 127)  # Global brightness
+        pattern_settings = self.get_pattern_settings(tab_name, initial_pattern)
+        
+        # Extract initial color, delay, and n params from pattern-specific settings
+        initial_colors = pattern_settings["colors"]
+        initial_hex_color = initial_colors[0] if initial_colors else "#000000"
+        initial_delay = pattern_settings["delay"]
+        initial_n1 = pattern_settings["n1"]
+        initial_n2 = pattern_settings["n2"]
+        initial_n3 = pattern_settings["n3"]
+        initial_n4 = pattern_settings["n4"]
+
+        initial_r, initial_g, initial_b = color_utils.hex_to_rgb(initial_hex_color)
+
+        # Main frame to hold everything within the tab
+        main_tab_frame = tk.Frame(tab, bg=bg_color)
+        main_tab_frame.pack(expand=True, fill="both", padx=self.scale_size(10), pady=self.scale_size(10))
+
+        # Left panel container for sliders and n inputs
+        left_panel_container = tk.Frame(main_tab_frame, bg=bg_color)
+        left_panel_container.pack(side=tk.LEFT, padx=self.scale_size(10), pady=self.scale_size(10))
+
+        # Slider panel
+        slider_panel_frame = tk.Frame(left_panel_container, bg=bg_color)
+        slider_panel_frame.pack(side=tk.TOP, padx=10, pady=10)
+
+        # Common slider configuration
+        slider_config = {
+            "from_": 255,
+            "to": 0,
+            "orient": tk.VERTICAL,
+            "length": slider_length,
+            "width": slider_width,
+            "bg": bg_color,
+            "fg": fg_color,
+            "highlightbackground": bg_color,
+            "activebackground": active_bg_color,
+            "resolution": 1,
+            "sliderlength": 70,
+        }
+
+        # Red Slider
+        red_slider = tk.Scale(slider_panel_frame, label="Red", troughcolor=trough_color_red, **slider_config)
+        red_slider.set(initial_r)
+        red_slider.pack(side=tk.LEFT, padx=10)
+        red_slider.bind("<B1-Motion>", lambda _: self.schedule_update_rgb(tab))
+        red_slider.bind("<ButtonRelease-1>", lambda _: self.schedule_update_rgb(tab, force_send=True))
+
+        # Green Slider
+        green_slider = tk.Scale(slider_panel_frame, label="Green", troughcolor=trough_color_green, **slider_config)
+        green_slider.set(initial_g)
+        green_slider.pack(side=tk.LEFT, padx=10)
+        green_slider.bind("<B1-Motion>", lambda _: self.schedule_update_rgb(tab))
+        green_slider.bind("<ButtonRelease-1>", lambda _: self.schedule_update_rgb(tab, force_send=True))
+
+        # Blue Slider
+        blue_slider = tk.Scale(slider_panel_frame, label="Blue", troughcolor=trough_color_blue, **slider_config)
+        blue_slider.set(initial_b)
+        blue_slider.pack(side=tk.LEFT, padx=10)
+        blue_slider.bind("<B1-Motion>", lambda _: self.schedule_update_rgb(tab))
+        blue_slider.bind("<ButtonRelease-1>", lambda _: self.schedule_update_rgb(tab, force_send=True))
+
+        # Brightness Slider
+        brightness_slider = tk.Scale(
+            slider_panel_frame, label="Brightness", troughcolor=trough_color_brightness, **slider_config
+        )
+        brightness_slider.set(initial_brightness)
+        brightness_slider.pack(side=tk.LEFT, padx=10)
+        brightness_slider.bind("<B1-Motion>", lambda _: self.schedule_update_brightness(tab))
+        brightness_slider.bind("<ButtonRelease-1>", lambda _: self.schedule_update_brightness(tab, force_send=True))
+
+        # Delay Slider with logarithmic scale (10ms to 10000ms)
+        delay_slider_config = slider_config.copy()
+        delay_slider_config.update(
+            {
+                "from_": 1000,  # Slider range 0-1000 (will be converted to 10-10000ms logarithmically)
+                "to": 0,
+                "resolution": 1,
+                "label": "Delay (ms)",
+                "showvalue": False,  # Hide default value, we'll show logarithmic value in custom label
+                "troughcolor": trough_color_delay,
+            }
+        )
+        # Create a frame to contain the slider and its value label (to make them appear as one unit)
+        delay_container = tk.Frame(slider_panel_frame, bg=bg_color)
+        delay_container.pack(side=tk.LEFT, padx=10)
+        
+        # Get pattern-specific min/max delay
+        pattern_config = self.patterns.get(initial_pattern, {})
+        min_delay = pattern_config.get("min_delay", 10)
+        max_delay = pattern_config.get("max_delay", 10000)
+        
+        delay_slider = tk.Scale(delay_container, **delay_slider_config)
+        # Convert initial delay to slider position using logarithmic scale
+        initial_slider_pos = delay_to_slider(initial_delay, min_delay, max_delay)
+        delay_slider.set(initial_slider_pos)
+        
+        # Create a custom label to show the actual delay value, positioned like the default Scale value
+        delay_value_label = tk.Label(delay_container, text=f"{initial_delay}", font=("Arial", self.scale_font(12)), bg=bg_color, fg=fg_color, width=self.scale_size(5), anchor="e")
+        delay_value_label.pack(side=tk.LEFT, padx=(0, self.scale_size(5)))
+        
+        # Store min/max delay in tab widget for later use
+        tab.min_delay = min_delay
+        tab.max_delay = max_delay
+        
+        # Function to update the side label when slider moves
+        def update_delay_value_label(event=None):
+            slider_value = delay_slider.get()
+            # Use current pattern's min/max delay (may change if pattern changes)
+            current_pattern = self.settings["lights"][tab_name]["settings"].get("pattern", "on")
+            pattern_config = self.patterns.get(current_pattern, {})
+            current_min_delay = pattern_config.get("min_delay", 10)
+            current_max_delay = pattern_config.get("max_delay", 10000)
+            actual_delay = slider_to_delay(slider_value, current_min_delay, current_max_delay)
+            delay_value_label.config(text=f"{actual_delay}")
+        
+        delay_slider.pack(side=tk.LEFT)
+        delay_slider.bind("<B1-Motion>", lambda e: (update_delay_value_label(), self.schedule_update_delay(tab)))
+        delay_slider.bind("<ButtonRelease-1>", lambda e: (update_delay_value_label(), self.schedule_update_delay(tab, force_send=True)))
+
+        # N inputs panel below sliders (moved down to make sliders longer)
+        n_inputs_frame = tk.Frame(left_panel_container, bg=bg_color)
+        n_inputs_frame.pack(side=tk.TOP, padx=10, pady=10)
+
+        n_inputs_inner_frame = tk.Frame(n_inputs_frame, bg=bg_color)
+        n_inputs_inner_frame.pack()
+
+        # Common spinbox config for n inputs - larger for touch screen
+        n_spinbox_config = {
+            "from_": 0,
+            "to": 255,
+            "increment": 1,
+            "width": self.scale_size(12),
+            "bg": bg_color,
+            "fg": fg_color,
+            "font": ("Arial", self.scale_font(24)),
+            "buttonbackground": active_bg_color,
+        }
+
+        # Create n1-n4 inputs in a grid with arrows on both sides
+        n_inputs = {}
+        for i in range(1, 5):
+            n_frame = tk.Frame(n_inputs_inner_frame, bg=bg_color)
+            n_frame.grid(row=(i-1)//2, column=(i-1)%2, padx=10, pady=10)
+            n_inputs[f"n{i}_frame"] = n_frame  # Store frame reference for hiding/showing
+            
+            n_label = tk.Label(n_frame, text=f"n{i}", font=("Arial", self.scale_font(20)), bg=bg_color, fg=fg_color)
+            n_label.pack(pady=(0, self.scale_size(5)))
+            n_inputs[f"n{i}_label"] = n_label  # Store label reference
+            
+            # Create a frame for the input with arrows on both sides
+            input_container = tk.Frame(n_frame, bg=bg_color)
+            input_container.pack(pady=5)
+            
+            # Use StringVar for the value
+            n_var = tk.StringVar(value=str(initial_settings.get(f"n{i}", 10)))
+            
+            # Left arrow button (decrease)
+            def decrease_value(var=n_var):
+                try:
+                    current_str = var.get()
+                    if not current_str:
+                        current = 0
+                    else:
+                        current = int(current_str)
+                    new_value = current - 1
+                    var.set(str(new_value))
+                    self.schedule_update_n_params(tab, force_send=True)
+                except (ValueError, TypeError):
+                    # If value is invalid, set to -1
+                    var.set("-1")
+                    self.schedule_update_n_params(tab, force_send=True)
+            
+            left_arrow = tk.Button(
+                input_container,
+                text="−",
+                font=("Arial", self.scale_font(32), "bold"),
+                bg=active_bg_color,
+                fg=fg_color,
+                relief=tk.FLAT,
+                command=decrease_value,
+                width=self.scale_size(3),
+                height=self.scale_size(1),
+            )
+            left_arrow.pack(side=tk.LEFT, padx=self.scale_size(2))
+            
+            # Entry in the middle
+            n_entry = tk.Entry(
+                input_container,
+                textvariable=n_var,
+                font=("Arial", self.scale_font(24)),
+                bg=bg_color,
+                fg=fg_color,
+                width=self.scale_size(8),
+                justify=tk.CENTER,
+                relief=tk.SUNKEN,
+                bd=2,
+            )
+            n_entry.pack(side=tk.LEFT, padx=self.scale_size(2), ipady=self.scale_size(8))
+            n_entry.bind("<KeyRelease>", lambda event: self.schedule_update_n_params(tab))
+            n_entry.bind("<FocusOut>", lambda event: self.schedule_update_n_params(tab, force_send=True))
+            
+            # Right arrow button (increase)
+            def increase_value(var=n_var):
+                current = int(var.get())
+                new_value = current + 1
+                var.set(str(new_value))
+                self.schedule_update_n_params(tab, force_send=True)
+            
+            right_arrow = tk.Button(
+                input_container,
+                text="+",
+                font=("Arial", self.scale_font(32), "bold"),
+                bg=active_bg_color,
+                fg=fg_color,
+                relief=tk.FLAT,
+                command=increase_value,
+                width=self.scale_size(3),
+                height=self.scale_size(1),
+            )
+            right_arrow.pack(side=tk.LEFT, padx=self.scale_size(2))
+            
+            n_inputs[f"n{i}"] = n_entry
+            n_inputs[f"n{i}_var"] = n_var  # Store the variable for later updates
+
+        # Store references to widgets for this tab
+        tab.widgets = {
+            "red_slider": red_slider,
+            "green_slider": green_slider,
+            "blue_slider": blue_slider,
+            "brightness_slider": brightness_slider,
+            "delay_slider": delay_slider,
+            "delay_value_label": delay_value_label,  # Store the delay value label for updates
+            "n1": n_inputs["n1"],
+            "n1_var": n_inputs["n1_var"],
+            "n2": n_inputs["n2"],
+            "n2_var": n_inputs["n2_var"],
+            "n3": n_inputs["n3"],
+            "n3_var": n_inputs["n3_var"],
+            "n4": n_inputs["n4"],
+            "n4_var": n_inputs["n4_var"],
+            "n1_label": n_inputs["n1_label"],
+            "n2_label": n_inputs["n2_label"],
+            "n3_label": n_inputs["n3_label"],
+            "n4_label": n_inputs["n4_label"],
+            "n1_frame": n_inputs["n1_frame"],
+            "n2_frame": n_inputs["n2_frame"],
+            "n3_frame": n_inputs["n3_frame"],
+            "n4_frame": n_inputs["n4_frame"],
+            "selected_color_index": 0,  # Default to the first color
+        }
+        tab.colors_in_palette = initial_colors.copy()  # Store the list of hex colors for this tab
+        tab.color_swatch_frames = []  # To hold references to the color swatches
+
+        # Right panel for IDs, Patterns, and NEW Color Palette
+        right_panel_frame = tk.Frame(main_tab_frame, bg=bg_color)
+        right_panel_frame.pack(side=tk.LEFT, padx=self.scale_size(20), pady=self.scale_size(10), anchor="n", expand=True, fill="both")
+
+        # IDs section - MODIFIED TO BE SIDE-BY-SIDE
+        ids_frame = tk.Frame(right_panel_frame, bg=bg_color)
+        ids_frame.pack(pady=10, fill=tk.X)
+
+        # New inner frame for the IDs to be displayed horizontally
+        ids_inner_frame = tk.Frame(ids_frame, bg=bg_color)
+        ids_inner_frame.pack(fill=tk.X, expand=True) # Pack this frame to fill available width
+
+        for light_id in ids:
+            tk.Label(ids_inner_frame, text=str(light_id), font=("Arial", self.scale_font(18)), bg=bg_color, fg=fg_color).pack(
+                side=tk.LEFT, padx=self.scale_size(5), pady=self.scale_size(2)
+            ) # Pack labels horizontally
+
+        # --- New Frame to hold Patterns and Color Palette side-by-side ---
+        patterns_and_palette_frame = tk.Frame(right_panel_frame, bg=bg_color)
+        patterns_and_palette_frame.pack(pady=self.scale_size(20), fill=tk.BOTH, expand=True)
+
+        # Patterns section
+        patterns_frame = tk.Frame(patterns_and_palette_frame, bg=bg_color, bd=2, relief=tk.GROOVE)
+        patterns_frame.pack(side=tk.LEFT, padx=self.scale_size(10), pady=self.scale_size(5), fill=tk.BOTH, expand=True)  # Pack to the left
+        tk.Label(patterns_frame, text="Patterns:", font=("Arial", self.scale_font(20)), bg=bg_color, fg=fg_color).pack(pady=self.scale_size(10))
+
+        tab.pattern_buttons = {}
+        patterns = list(self.patterns.keys())
+        for pattern_name in patterns:
+            button = tk.Button(
+                patterns_frame,
+                text=pattern_name,
+                command=lambda p=pattern_name: self.send_pattern(tab_name, p),
+                bg=active_bg_color,
+                fg=fg_color,
+                font=("Arial", self.scale_font(18)),
+                padx=self.scale_size(15),
+                pady=self.scale_size(5),
+                relief=tk.FLAT,
+            )
+            button.pack(pady=self.scale_size(5), fill=tk.X)
+            tab.pattern_buttons[pattern_name] = button
+
+        self.highlight_pattern_button(tab, initial_pattern)
+
+        # --- Color Palette Editor Section ---
+        color_palette_editor_frame = tk.Frame(patterns_and_palette_frame, bg=bg_color, bd=2, relief=tk.GROOVE)
+        color_palette_editor_frame.pack(side=tk.LEFT, padx=self.scale_size(10), pady=self.scale_size(5), fill=tk.BOTH, expand=True)  # Pack to the left
+        tab.color_palette_editor_frame = color_palette_editor_frame  # Store reference for update_ui_for_pattern
+
+        tk.Label(color_palette_editor_frame, text="Color Palette:", font=("Arial", self.scale_font(20)), bg=bg_color, fg=fg_color).pack(
+            pady=self.scale_size(10)
+        )
+
+        # Frame to hold color swatches (will be dynamic)
+        tab.color_swatches_container = tk.Frame(color_palette_editor_frame, bg=bg_color)
+        tab.color_swatches_container.pack(pady=5, fill=tk.BOTH, expand=True)
+
+        # Buttons for Add/Remove Color
+        palette_buttons_frame = tk.Frame(color_palette_editor_frame, bg=bg_color)
+        palette_buttons_frame.pack(pady=10, fill=tk.X)
+
+        add_color_button = tk.Button(
+            palette_buttons_frame,
+            text="Add Color",
+            command=lambda t=tab: self.add_color_to_palette(t),
+            bg=active_bg_color,
+            fg=fg_color,
+            font=("Arial", self.scale_font(16)),
+            padx=self.scale_size(10),
+            pady=self.scale_size(5),
+            relief=tk.FLAT,
+        )
+        add_color_button.pack(side=tk.LEFT, expand=True, padx=5)
+
+        remove_color_button = tk.Button(
+            palette_buttons_frame,
+            text="Remove Selected",
+            command=lambda t=tab: self.remove_selected_color_from_palette(t),
+            bg=active_bg_color,
+            fg=fg_color,
+            font=("Arial", self.scale_font(16)),
+            padx=self.scale_size(10),
+            pady=self.scale_size(5),
+            relief=tk.FLAT,
+        )
+        remove_color_button.pack(side=tk.RIGHT, expand=True, padx=5)
+
+        # Initial population of the color palette
+        self.refresh_color_palette_display(tab)
+
+        # The initial call to update_ui_for_pattern now only sets slider values and highlights
+        self.update_ui_for_pattern(tab, initial_pattern)
+        self.update_n_labels(tab, initial_pattern)  # Update n parameter labels
+
+    def refresh_color_palette_display(self, tab):
+        """Clears and repopulates the color swatches in the palette display."""
+        # Clear existing swatches
+        for frame in tab.color_swatch_frames:
+            frame.destroy()
+        tab.color_swatch_frames.clear()
+
+        for i, hex_color in enumerate(tab.colors_in_palette):
+            swatch_frame = tk.Frame(
+                tab.color_swatches_container, bg=hex_color, width=self.scale_size(100), height=self.scale_size(50), bd=2, relief=tk.SOLID
+            )
+            swatch_frame.pack(pady=self.scale_size(3), padx=self.scale_size(5), fill=tk.X)
+            # Bind click to select this color for editing
+            swatch_frame.bind("<Button-1>", lambda event, idx=i, t=tab: self.select_color_in_palette(t, idx))
+
+            # Add a label inside to make it clickable too
+            swatch_label = tk.Label(
+                swatch_frame,
+                text=f"Color {i+1}",
+                bg=hex_color,
+                fg=color_utils.get_contrast_text_color(hex_color),
+                font=("Arial", self.scale_font(14)),
+                width=self.scale_size(5),
+                height=self.scale_size(3),
+            )
+            swatch_label.pack(expand=True, fill=tk.BOTH)
+            swatch_label.bind("<Button-1>", lambda event, idx=i, t=tab: self.select_color_in_palette(t, idx))
+
+            tab.color_swatch_frames.append(swatch_frame)
+
+        # Re-highlight the currently selected color
+        self._highlight_selected_color_swatch(tab)
+
+    def _highlight_selected_color_swatch(self, tab):
+        """Applies/removes highlight border to the selected color swatch."""
+        current_index = tab.widgets["selected_color_index"]
+        for i, swatch_frame in enumerate(tab.color_swatch_frames):
+            if i == current_index:
+                swatch_frame.config(highlightbackground=active_palette_color_border, highlightthickness=3)
+            else:
+                swatch_frame.config(highlightbackground=swatch_frame.cget("bg"), highlightthickness=0)  # Reset to no highlight
+
+    def select_color_in_palette(self, tab, index: int):
+        """Selects a color in the palette, updates sliders, and highlights swatch.
+        This now also triggers an RGB update to the device."""
+        if not (0 <= index < len(tab.colors_in_palette)):
+            return
+
+        tab.widgets["selected_color_index"] = index
+        self._highlight_selected_color_swatch(tab)
+
+        # Update RGB sliders with the selected color
+        hex_color = tab.colors_in_palette[index]
+        r, g, b = color_utils.hex_to_rgb(hex_color)
+        tab.widgets["red_slider"].set(r)
+        tab.widgets["green_slider"].set(g)
+        tab.widgets["blue_slider"].set(b)
+
+        print(f"Selected color index {index}: {hex_color}")
+
+        # Immediately send the update, as changing the selected color implies
+        # a desire to change the light's current color, regardless of pattern.
+        # This will also save the settings.
+        self.schedule_update_rgb(tab, force_send=True)
+
+    def add_color_to_palette(self, tab):
+        """Adds a new black color to the palette and selects it, with a limit of 10 colors."""
+        MAX_COLORS = 8  # Define the maximum number of colors allowed
+
+        if len(tab.colors_in_palette) >= MAX_COLORS:
+            messagebox.showwarning("Color Limit Reached", f"You can add a maximum of {MAX_COLORS} colors to the palette.")
+            return
+
+        # Simplified: just add black. If unique colors were required globally,
+        # more complex logic would be needed here.
+        tab.colors_in_palette.append("#000000")  # Add black as default
+        self.refresh_color_palette_display(tab)
+        # Select the newly added color
+        self.select_color_in_palette(tab, len(tab.colors_in_palette) - 1)
+        self.save_current_tab_settings()  # Save changes to settings.json
+
+    def remove_selected_color_from_palette(self, tab):
+        """Removes the currently selected color from the palette."""
+        current_index = tab.widgets["selected_color_index"]
+        if len(tab.colors_in_palette) <= 1:
+            messagebox.showwarning("Cannot Remove", "There must be at least one color in the palette.")
+            return
+
+        if messagebox.askyesno("Confirm Delete", f"Are you sure you want to remove Color {current_index + 1}?"):
+            del tab.colors_in_palette[current_index]
+            # Adjust selected index if the removed color was the last one
+            if current_index >= len(tab.colors_in_palette):
+                tab.widgets["selected_color_index"] = len(tab.colors_in_palette) - 1
+                if tab.widgets["selected_color_index"] < 0:  # Should not happen with 1-color check
+                    tab.widgets["selected_color_index"] = 0
+
+            self.refresh_color_palette_display(tab)
+            # Update sliders with the new selected color (if any)
+            if tab.colors_in_palette:
+                self.select_color_in_palette(tab, tab.widgets["selected_color_index"])
+            else:  # If palette became empty (shouldn't happen with 1-color check)
+                tab.widgets["red_slider"].set(0)
+                tab.widgets["green_slider"].set(0)
+                tab.widgets["blue_slider"].set(0)
+
+            self.save_current_tab_settings()  # Save changes to settings.json
+
+    def update_ui_for_pattern(self, tab, current_pattern: str):
+        """
+        Manages the state of the UI elements based on the selected pattern.
+        The Color Palette Editor is always visible. RGB sliders update
+        based on the currently selected color in the palette, or the first
+        color if the palette is empty or not in transition mode and a new tab/pattern is selected.
+        """
+        # The color_palette_editor_frame is always packed, so no visibility control needed here.
+
+        # When the pattern changes, we need to ensure the RGB sliders reflect
+        # the appropriate color based on the context.
+
+        if tab.colors_in_palette:
+            # If in 'transition' mode, set sliders to the currently selected color in the palette.
+            if current_pattern == "transition":
+                self.select_color_in_palette(tab, tab.widgets["selected_color_index"])
+            else:
+                # If not in 'transition' mode, but a color is selected, update sliders to that.
+                # Or, if this is a fresh load/tab change, ensure it's the first color.
+                # This ensures the sliders consistently show the color that will be sent
+                # for 'on' based on the palette's first entry.
+                hex_color = tab.colors_in_palette[tab.widgets["selected_color_index"]]
+                r, g, b = color_utils.hex_to_rgb(hex_color)
+                tab.widgets["red_slider"].set(r)
+                tab.widgets["green_slider"].set(g)
+                tab.widgets["blue_slider"].set(b)
+                self._highlight_selected_color_swatch(tab)  # Re-highlight even if index didn't change
+        else:
+            # Handle empty palette scenario (shouldn't happen with default ["#000000"])
+            tab.widgets["red_slider"].set(0)
+            tab.widgets["green_slider"].set(0)
+            tab.widgets["blue_slider"].set(0)
+            tab.widgets["selected_color_index"] = 0  # Ensure index is valid
+            self._highlight_selected_color_swatch(tab)
+
+        # Brightness and Delay sliders are always visible.
+
+    def highlight_pattern_button(self, tab_widget, active_pattern_name):
+        if hasattr(tab_widget, "pattern_buttons"):
+            for pattern_name, button in tab_widget.pattern_buttons.items():
+                if pattern_name == active_pattern_name:
+                    button.config(bg=highlight_pattern_color)
+                else:
+                    button.config(bg=active_bg_color)
+
+    def on_tab_change(self, event):
+        selected_tab_name = self.notebook.tab(self.notebook.select(), "text")
+        current_tab_widget = self.notebook.nametowidget(self.notebook.select())
+
+        initial_settings = self.settings["lights"][selected_tab_name]["settings"]
+
+        # Ensure current_tab_widget has the necessary attributes
+        if not hasattr(current_tab_widget, "colors_in_palette"):
+            # This tab might not have been fully initialized yet, or recreated
+            # In a full reload, create_tabs ensures it is.
+            return
+
+        # Get current pattern and load pattern-specific settings
+        current_pattern = initial_settings.get("pattern", "on")
+        pattern_settings = self.get_pattern_settings(selected_tab_name, current_pattern)
+        
+        # Update the local colors_in_palette list for the tab
+        current_tab_widget.colors_in_palette = pattern_settings["colors"].copy()
+        current_tab_widget.widgets["selected_color_index"] = 0  # Default to first color
+
+        # Refresh the color palette display and select the first color
+        self.refresh_color_palette_display(current_tab_widget)
+        if current_tab_widget.colors_in_palette:
+            self.select_color_in_palette(current_tab_widget, 0)
+        else:  # If palette became empty (shouldn't happen with default ["#000000"])
+            current_tab_widget.widgets["red_slider"].set(0)
+            current_tab_widget.widgets["green_slider"].set(0)
+            current_tab_widget.widgets["blue_slider"].set(0)
+
+        # Update brightness (global) and delay (pattern-specific) sliders
+        current_tab_widget.widgets["brightness_slider"].set(initial_settings.get("brightness", 127))
+        # Convert delay to slider position using logarithmic scale
+        initial_delay = pattern_settings["delay"]
+        # Get pattern-specific min/max delay
+        pattern_config = self.patterns.get(current_pattern, {})
+        min_delay = pattern_config.get("min_delay", 10)
+        max_delay = pattern_config.get("max_delay", 10000)
+        initial_delay_slider_pos = delay_to_slider(initial_delay, min_delay, max_delay)
+        current_tab_widget.widgets["delay_slider"].set(initial_delay_slider_pos)
+        # Update the delay value label to show the actual delay value
+        if "delay_value_label" in current_tab_widget.widgets:
+            current_tab_widget.widgets["delay_value_label"].config(text=f"{initial_delay}")
+        
+        # Update n parameter inputs (pattern-specific)
+        for i in range(1, 5):
+            current_tab_widget.widgets[f"n{i}_var"].set(str(pattern_settings[f"n{i}"]))
+
+        # Highlight the active pattern button
+        initial_pattern = initial_settings.get("pattern", "on")
+        self.highlight_pattern_button(current_tab_widget, initial_pattern)
+
+        # Update UI visibility based on the current pattern
+        self.update_ui_for_pattern(current_tab_widget, initial_pattern)
+        self.update_n_labels(current_tab_widget, initial_pattern)  # Update n parameter labels
+
+    def reload_config(self):
+        print("Reloading configuration...")
+        self.settings = Settings()
+        self.create_tabs()
+        # After recreating, ensure the currently selected tab's sliders are updated
+        # Trigger on_tab_change manually for the currently selected tab
+        self.on_tab_change(None)
+
+    # --- Debouncing functions (no change to core logic, just how they call update_rgb) ---
+    def schedule_update_rgb(self, tab, force_send=False):
+        current_time = time.time() * 1000
+        if force_send:
+            if self.pending_rgb_update_id:
+                self.root.after_cancel(self.pending_rgb_update_id)
+            self.pending_rgb_update_id = None
+            self.update_rgb(tab)
+            self.last_rgb_update_time = current_time
+        elif current_time - self.last_rgb_update_time >= self.rgb_update_interval_ms:
+            if self.pending_rgb_update_id:
+                self.root.after_cancel(self.pending_rgb_update_id)
+            self.pending_rgb_update_id = None
+            self.update_rgb(tab)
+            self.last_rgb_update_time = current_time
+        else:
+            if self.pending_rgb_update_id:
+                self.root.after_cancel(self.pending_rgb_update_id)
+            time_to_wait = int(self.rgb_update_interval_ms - (current_time - self.last_rgb_update_time))
+            self.pending_rgb_update_id = self.root.after(time_to_wait, lambda: self.update_rgb(tab))
+
+    def schedule_update_brightness(self, tab, force_send=False):
+        current_time = time.time() * 1000
+        if force_send:
+            if self.pending_brightness_update_id:
+                self.root.after_cancel(self.pending_brightness_update_id)
+            self.pending_brightness_update_id = None
+            self.update_brightness(tab)
+            self.last_brightness_update_time = current_time
+        elif current_time - self.last_brightness_update_time >= self.brightness_update_interval_ms:
+            if self.pending_brightness_update_id:
+                self.root.after_cancel(self.pending_brightness_update_id)
+            self.pending_brightness_update_id = None
+            self.update_brightness(tab)
+            self.last_brightness_update_time = current_time
+        else:
+            if self.pending_brightness_update_id:
+                self.root.after_cancel(self.pending_brightness_update_id)
+            time_to_wait = int(self.brightness_update_interval_ms - (current_time - self.last_brightness_update_time))
+            self.pending_brightness_update_id = self.root.after(time_to_wait, lambda: self.update_brightness(tab))
+
+    def schedule_update_delay(self, tab, force_send=False):
+        current_time = time.time() * 1000
+        if force_send:
+            if self.pending_delay_update_id:
+                self.root.after_cancel(self.pending_delay_update_id)
+            self.pending_delay_update_id = None
+            self.update_delay(tab)
+            self.last_delay_update_time = current_time
+        elif current_time - self.last_delay_update_time >= self.delay_update_interval_ms:
+            if self.pending_delay_update_id:
+                self.root.after_cancel(self.pending_delay_update_id)
+            self.pending_delay_update_id = None
+            self.update_delay(tab)
+            self.last_delay_update_time = current_time
+        else:
+            if self.pending_delay_update_id:
+                self.root.after_cancel(self.pending_delay_update_id)
+            time_to_wait = int(self.delay_update_interval_ms - (current_time - self.last_delay_update_time))
+            self.pending_delay_update_id = self.root.after(time_to_wait, lambda: self.update_delay(tab))
+
+    def schedule_update_n_params(self, tab, force_send=False):
+        current_time = time.time() * 1000
+        if force_send:
+            if self.pending_n_params_update_id:
+                self.root.after_cancel(self.pending_n_params_update_id)
+            self.pending_n_params_update_id = None
+            self.update_n_params(tab)
+            self.last_n_params_update_time = current_time
+        elif current_time - self.last_n_params_update_time >= self.n_params_update_interval_ms:
+            if self.pending_n_params_update_id:
+                self.root.after_cancel(self.pending_n_params_update_id)
+            self.pending_n_params_update_id = None
+            self.update_n_params(tab)
+            self.last_n_params_update_time = current_time
+        else:
+            if self.pending_n_params_update_id:
+                self.root.after_cancel(self.pending_n_params_update_id)
+            time_to_wait = int(self.n_params_update_interval_ms - (current_time - self.last_n_params_update_time))
+            self.pending_n_params_update_id = self.root.after(time_to_wait, lambda: self.update_n_params(tab))
+
+    # --- Asynchronous Update Functions ---
+    @async_handler
+    async def update_rgb(self, tab):
+        """Update the currently selected color in the palette and send to the server."""
+        try:
+            red_slider = tab.widgets["red_slider"]
+            green_slider = tab.widgets["green_slider"]
+            blue_slider = tab.widgets["blue_slider"]
+
+            r = red_slider.get()
+            g = green_slider.get()
+            b = blue_slider.get()
+
+            hex_color = f"#{r:02x}{g:02x}{b:02x}"
+            print(f"Updating selected color to: {hex_color}")
+
+            selected_color_index = tab.widgets["selected_color_index"]
+            if 0 <= selected_color_index < len(tab.colors_in_palette):
+                tab.colors_in_palette[selected_color_index] = hex_color
+                self.refresh_color_palette_display(tab)  # Update swatch immediately
+
+            selected_server = self.notebook.tab(self.notebook.select(), "text")
+            names = self.settings["lights"][selected_server]["names"]
+
+            # Determine which colors to send based on the current pattern.
+            current_pattern = self.settings["lights"][selected_server]["settings"].get("pattern", "on")
+            colors_to_send = []
+
+            if current_pattern == "transition":
+                colors_to_send = tab.colors_in_palette.copy()
+            elif current_pattern in ["on", "theater_chase", "flicker"]:  # Add other patterns that use a single color
+                if tab.colors_in_palette:
+                    # For non-transition patterns, the device typically uses only the first color.
+                    # However, if a user picks a color from the palette, we want THAT color to be the one
+                    # sent and active. So, the selected color from the palette *becomes* the first color
+                    # in the list we send to the device for these modes.
+                    # This ensures the light matches the selected palette color.
+                    colors_to_send = [hex_color]  # Send the color currently set by the sliders
+                else:
+                    colors_to_send = ["#000000"]  # Default if palette is empty
+            else:  # For other patterns like "off", "rainbow" where colors might not be primary
+                # We still want to send the *current* palette state for saving,
+                # but the device firmware might ignore it for these patterns.
+                colors_to_send = tab.colors_in_palette.copy()
+
+            # Get pattern-specific min/max delay
+            pattern_config = self.patterns.get(current_pattern, {})
+            min_delay = pattern_config.get("min_delay", 10)
+            max_delay = pattern_config.get("max_delay", 10000)
+            
+            payload = {
+                "save": True,  # Always save this change to config
+                "names": names,
+                "settings": {
+                    "colors": colors_to_send,  # This now dynamically changes based on pattern
+                    "brightness": tab.widgets["brightness_slider"].get(),
+                    "delay": slider_to_delay(tab.widgets["delay_slider"].get(), min_delay, max_delay),  # Convert from logarithmic slider
+                    "pattern": current_pattern,  # Always send the current pattern
+                    "n1": int(tab.widgets["n1_var"].get()),
+                    "n2": int(tab.widgets["n2_var"].get()),
+                    "n3": int(tab.widgets["n3_var"].get()),
+                    "n4": int(tab.widgets["n4_var"].get()),
+                },
+            }
+
+            # Update the settings object - save pattern-specific settings
+            current_pattern = self.settings["lights"][selected_server]["settings"].get("pattern", "on")
+            # Get pattern-specific min/max delay
+            pattern_config = self.patterns.get(current_pattern, {})
+            min_delay = pattern_config.get("min_delay", 10)
+            max_delay = pattern_config.get("max_delay", 10000)
+            slider_value = tab.widgets["delay_slider"].get()
+            delay = slider_to_delay(slider_value, min_delay, max_delay)
+            n_params = {f"n{i}": int(tab.widgets[f"n{i}_var"].get()) for i in range(1, 5)}
+            
+            # Save pattern-specific settings
+            self.save_pattern_settings(selected_server, current_pattern,
+                                     colors=tab.colors_in_palette.copy(),
+                                     delay=delay,
+                                     n_params=n_params)
+            
+            # Brightness is global
+            self.settings["lights"][selected_server]["settings"]["brightness"] = tab.widgets["brightness_slider"].get()
+            self.settings.save()
+
+            await self.websocket_client.send_data(payload)
+            print(f"Sent RGB payload: {payload}")
+
+        except Exception as e:
+            print(f"Error updating RGB: {e}")
+
+    @async_handler
+    async def update_brightness(self, tab):
+        try:
+            brightness_slider = tab.widgets["brightness_slider"]
+            brightness = brightness_slider.get()
+            print(f"Brightness: {brightness}")
+
+            selected_server = self.notebook.tab(self.notebook.select(), "text")
+            names = self.settings["lights"][selected_server]["names"]
+
+            payload = {
+                "save": True,
+                "names": names,
+                "settings": {
+                    "brightness": brightness,
+                },
+            }
+            # Update the settings object with the new brightness
+            self.settings["lights"][selected_server]["settings"]["brightness"] = brightness
+            self.settings.save()
+            await self.websocket_client.send_data(payload)
+            print(f"Sent brightness payload: {payload}")
+        except Exception as e:
+            print(f"Error updating brightness: {e}")
+
+    @async_handler
+    async def update_delay(self, tab):
+        try:
+            # Get current pattern and its min/max delay
+            selected_server = self.notebook.tab(self.notebook.select(), "text")
+            current_pattern = self.settings["lights"][selected_server]["settings"].get("pattern", "on")
+            pattern_config = self.patterns.get(current_pattern, {})
+            min_delay = pattern_config.get("min_delay", 10)
+            max_delay = pattern_config.get("max_delay", 10000)
+            
+            delay_slider = tab.widgets["delay_slider"]
+            slider_value = delay_slider.get()
+            delay = slider_to_delay(slider_value, min_delay, max_delay)  # Convert from logarithmic slider to actual delay
+            print(f"Delay: {delay}ms (slider: {slider_value})")
+
+            selected_server = self.notebook.tab(self.notebook.select(), "text")
+            names = self.settings["lights"][selected_server]["names"]
+            payload = {
+                "save": True,
+                "names": names,
+                "settings": {
+                    "delay": delay,
+                },
+            }
+            # Update pattern-specific delay setting
+            current_pattern = self.settings["lights"][selected_server]["settings"].get("pattern", "on")
+            self.save_pattern_settings(selected_server, current_pattern, delay=delay)
+            self.settings.save()
+            await self.websocket_client.send_data(payload)
+            print(f"Sent delay payload: {payload}")
+        except Exception as e:
+            print(f"Error updating delay: {e}")
+
+    @async_handler
+    async def update_n_params(self, tab):
+        try:
+            n_params = {}
+            for i in range(1, 5):
+                n_var = tab.widgets[f"n{i}_var"]
+                n_params[f"n{i}"] = int(n_var.get())
+            
+            print(f"N Parameters: {n_params}")
+
+            selected_server = self.notebook.tab(self.notebook.select(), "text")
+            names = self.settings["lights"][selected_server]["names"]
+            payload = {
+                "save": True,
+                "names": names,
+                "settings": n_params,
+            }
+            # Update pattern-specific n params
+            current_pattern = self.settings["lights"][selected_server]["settings"].get("pattern", "on")
+            self.save_pattern_settings(selected_server, current_pattern, n_params=n_params)
+            self.settings.save()
+            await self.websocket_client.send_data(payload)
+            print(f"Sent n params payload: {payload}")
+        except Exception as e:
+            print(f"Error updating n params: {e}")
+
+    @async_handler
+    async def send_pattern(self, tab_name: str, pattern_name: str):
+        try:
+            names = self.settings["lights"][tab_name]["names"]
+            # Get the actual tab widget to access its `colors_in_palette` and other attributes
+            current_tab_widget = None
+            for key, tab_widget in self.tabs.items():
+                if key == tab_name:
+                    current_tab_widget = tab_widget
+                    break
+
+            if not current_tab_widget:
+                print(f"Error: Could not find tab widget for {tab_name}")
+                return
+
+            current_settings_for_tab = self.settings["lights"][tab_name]["settings"]
+            
+            # Save current pattern's settings before switching
+            old_pattern = current_settings_for_tab.get("pattern", "on")
+            # Get pattern-specific min/max delay
+            pattern_config = self.patterns.get(old_pattern, {})
+            min_delay = pattern_config.get("min_delay", 10)
+            max_delay = pattern_config.get("max_delay", 10000)
+            current_delay = slider_to_delay(current_tab_widget.widgets["delay_slider"].get(), min_delay, max_delay)
+            current_n_params = {f"n{i}": int(current_tab_widget.widgets[f"n{i}_var"].get()) for i in range(1, 5)}
+            self.save_pattern_settings(tab_name, old_pattern,
+                                     colors=current_tab_widget.colors_in_palette.copy(),
+                                     delay=current_delay,
+                                     n_params=current_n_params)
+
+            # Load the new pattern's settings
+            new_pattern_settings = self.get_pattern_settings(tab_name, pattern_name)
+            
+            # Update UI with new pattern's settings
+            current_tab_widget.colors_in_palette = new_pattern_settings["colors"].copy()
+            self.refresh_color_palette_display(current_tab_widget)
+            
+            # Update delay slider
+            # Get pattern-specific min/max delay
+            pattern_config = self.patterns.get(pattern_name, {})
+            min_delay = pattern_config.get("min_delay", 10)
+            max_delay = pattern_config.get("max_delay", 10000)
+            delay_slider_pos = delay_to_slider(new_pattern_settings["delay"], min_delay, max_delay)
+            current_tab_widget.widgets["delay_slider"].set(delay_slider_pos)
+            # Update min/max delay for the tab
+            if hasattr(current_tab_widget, "min_delay"):
+                current_tab_widget.min_delay = min_delay
+                current_tab_widget.max_delay = max_delay
+            if "delay_value_label" in current_tab_widget.widgets:
+                current_tab_widget.widgets["delay_value_label"].config(text=f"{new_pattern_settings['delay']}")
+            
+            # Update n params
+            for i in range(1, 5):
+                current_tab_widget.widgets[f"n{i}_var"].set(str(new_pattern_settings[f"n{i}"]))
+            
+            # Update RGB sliders to first color
+            if current_tab_widget.colors_in_palette:
+                hex_color = current_tab_widget.colors_in_palette[0]
+                r, g, b = color_utils.hex_to_rgb(hex_color)
+                current_tab_widget.widgets["red_slider"].set(r)
+                current_tab_widget.widgets["green_slider"].set(g)
+                current_tab_widget.widgets["blue_slider"].set(b)
+                current_tab_widget.widgets["selected_color_index"] = 0
+                self._highlight_selected_color_swatch(current_tab_widget)
+
+            payload_settings = {
+                "pattern": pattern_name,
+                "brightness": current_settings_for_tab.get("brightness", 127),  # Global brightness
+                "delay": new_pattern_settings["delay"],
+                "colors": new_pattern_settings["colors"],
+            }
+            
+            # Include n parameters
+            for i in range(1, 5):
+                payload_settings[f"n{i}"] = new_pattern_settings[f"n{i}"]
+
+            payload = {
+                "save": True,
+                "names": names,
+                "settings": payload_settings,
+            }
+
+            # Update the current pattern
+            self.settings["lights"][tab_name]["settings"]["pattern"] = pattern_name
+            self.settings.save()
+
+            self.highlight_pattern_button(current_tab_widget, pattern_name)
+            self.update_ui_for_pattern(current_tab_widget, pattern_name)  # Update UI based on new pattern
+            self.update_n_labels(current_tab_widget, pattern_name)  # Update n parameter labels
+
+            await self.websocket_client.send_data(payload)
+            print(f"Sent pattern payload: {payload}")
+        except Exception as e:
+            print(f"Error sending pattern: {e}")
+
+    def save_current_tab_settings(self):
+        """Saves the current state of the active tab's settings (colors, brightness, delay, pattern) to config."""
+        selected_server = self.notebook.tab(self.notebook.select(), "text")
+        current_tab_widget = self.notebook.nametowidget(self.notebook.select())
+
+        if not hasattr(current_tab_widget, "colors_in_palette"):
+            return  # Tab not fully initialized yet
+
+        # Update settings for the current tab - save pattern-specific settings
+        current_pattern = self.settings["lights"][selected_server]["settings"].get("pattern", "on")
+        # Get pattern-specific min/max delay
+        current_pattern = self.settings["lights"][selected_server]["settings"].get("pattern", "on")
+        pattern_config = self.patterns.get(current_pattern, {})
+        min_delay = pattern_config.get("min_delay", 10)
+        max_delay = pattern_config.get("max_delay", 10000)
+        slider_value = current_tab_widget.widgets["delay_slider"].get()
+        delay = slider_to_delay(slider_value, min_delay, max_delay)
+        n_params = {f"n{i}": int(current_tab_widget.widgets[f"n{i}_var"].get()) for i in range(1, 5)}
+        
+        # Save pattern-specific settings
+        self.save_pattern_settings(selected_server, current_pattern,
+                                 colors=current_tab_widget.colors_in_palette,
+                                 delay=delay,
+                                 n_params=n_params)
+        
+        # Brightness is global
+        self.settings["lights"][selected_server]["settings"]["brightness"] = current_tab_widget.widgets["brightness_slider"].get()
+        # The pattern is updated in send_pattern already, but ensure consistency
+        # For simplicity, we assume send_pattern is the primary way to change pattern.
+
+        self.settings.save()
+        print(f"Saved settings for {selected_server}")
+
+    def get_tab_password(self):
+        """Get the tab modification password from settings, default to empty if not set"""
+        if "tab_password" not in self.settings:
+            self.settings["tab_password"] = ""
+            self.settings.save()
+        return self.settings.get("tab_password", "")
+
+    def check_tab_password(self):
+        """Prompt for password and verify it matches the stored password"""
+        stored_password = self.get_tab_password()
+        
+        # If no password is set, allow access
+        if not stored_password:
+            return True
+        
+        # Create password dialog
+        dialog = tk.Toplevel(self.root)
+        dialog.title("Enter Password")
+        dialog.configure(bg=bg_color)
+        dialog.transient(self.root)
+        dialog.grab_set()
+        
+        # Center the dialog
+        dialog.geometry("400x150")
+        dialog.update_idletasks()
+        x = (dialog.winfo_screenwidth() // 2) - (dialog.winfo_width() // 2)
+        y = (dialog.winfo_screenheight() // 2) - (dialog.winfo_height() // 2)
+        dialog.geometry(f"+{x}+{y}")
+        
+        password_correct = [False]
+        
+        tk.Label(dialog, text="Enter password to modify tabs:", bg=bg_color, fg=fg_color, font=("Arial", 14)).pack(pady=15)
+        password_entry = tk.Entry(dialog, font=("Arial", 14), show="*", width=25)
+        password_entry.pack(pady=10)
+        password_entry.focus()
+        
+        def verify_password():
+            entered_password = password_entry.get()
+            if entered_password == stored_password:
+                password_correct[0] = True
+                dialog.destroy()
+            else:
+                messagebox.showerror("Error", "Incorrect password", parent=dialog)
+                password_entry.delete(0, tk.END)
+                password_entry.focus()
+        
+        button_frame = tk.Frame(dialog, bg=bg_color)
+        button_frame.pack(pady=10)
+        
+        tk.Button(
+            button_frame,
+            text="OK",
+            command=verify_password,
+            bg=active_bg_color,
+            fg=fg_color,
+            font=("Arial", 16),
+            padx=30,
+            pady=10,
+            width=8
+        ).pack(side=tk.LEFT, padx=5)
+        
+        tk.Button(
+            button_frame,
+            text="Cancel",
+            command=dialog.destroy,
+            bg=active_bg_color,
+            fg=fg_color,
+            font=("Arial", 16),
+            padx=30,
+            pady=10,
+            width=8
+        ).pack(side=tk.LEFT, padx=5)
+        
+        password_entry.bind("<Return>", lambda e: verify_password())
+        
+        # Wait for dialog to close
+        dialog.wait_window()
+        
+        return password_correct[0]
+
+    def add_tab_dialog(self):
+        """Open dialog to add a new tab"""
+        if not self.check_tab_password():
+            return
+        
+        dialog = tk.Toplevel(self.root)
+        dialog.title("Add New Tab")
+        dialog.configure(bg=bg_color)
+        dialog.transient(self.root)
+        dialog.grab_set()
+        
+        # Center the dialog
+        dialog.geometry("600x300")
+        dialog.update_idletasks()
+        x = (dialog.winfo_screenwidth() // 2) - (dialog.winfo_width() // 2)
+        y = (dialog.winfo_screenheight() // 2) - (dialog.winfo_height() // 2)
+        dialog.geometry(f"+{x}+{y}")
+        
+        # Tab name input
+        tk.Label(dialog, text="Tab Name:", bg=bg_color, fg=fg_color, font=("Arial", 12)).pack(pady=10)
+        name_entry = tk.Entry(dialog, font=("Arial", 12), width=30)
+        name_entry.pack(pady=5)
+        name_entry.focus()
+        
+        # IDs input
+        tk.Label(dialog, text="Device IDs (comma-separated):", bg=bg_color, fg=fg_color, font=("Arial", 12)).pack(pady=10)
+        ids_entry = tk.Entry(dialog, font=("Arial", 12), width=30)
+        ids_entry.pack(pady=5)
+        ids_entry.insert(0, "1")
+        
+        def add_tab():
+            tab_name = name_entry.get().strip()
+            ids_str = ids_entry.get().strip()
+            
+            if not tab_name:
+                messagebox.showerror("Error", "Tab name cannot be empty", parent=dialog)
+                return
+            
+            if tab_name in self.settings["lights"]:
+                messagebox.showerror("Error", f"Tab '{tab_name}' already exists", parent=dialog)
+                return
+            
+            # Parse IDs
+            ids = [id.strip() for id in ids_str.split(",") if id.strip()]
+            if not ids:
+                ids = ["1"]  # Default ID
+            
+            # Create new tab entry in settings
+            self.settings["lights"][tab_name] = {
+                "names": ids,
+                "settings": {
+                    "pattern": "on",
+                    "brightness": 127,
+                    "colors": ["#000000"],
+                    "delay": 100,
+                    "n1": 10,
+                    "n2": 10,
+                    "n3": 10,
+                    "n4": 10,
+                    "patterns": {}
+                }
+            }
+            # Add to tab order
+            if "tab_order" not in self.settings:
+                self.settings["tab_order"] = []
+            self.settings["tab_order"].append(tab_name)
+            self.save_profile()
+            
+            # Recreate tabs
+            self.create_tabs()
+            
+            # Select the new tab
+            for i, tab_text in enumerate(self.get_tab_order()):
+                if tab_text == tab_name:
+                    self.notebook.select(i)
+                    break
+            
+            dialog.destroy()
+        
+        # Buttons
+        button_frame = tk.Frame(dialog, bg=bg_color)
+        button_frame.pack(pady=20)
+        
+        tk.Button(
+            button_frame,
+            text="Add",
+            command=add_tab,
+            bg=active_bg_color,
+            fg=fg_color,
+            font=("Arial", 18),
+            padx=40,
+            pady=15,
+            width=10
+        ).pack(side=tk.LEFT, padx=5)
+        
+        tk.Button(
+            button_frame,
+            text="Cancel",
+            command=dialog.destroy,
+            bg=active_bg_color,
+            fg=fg_color,
+            font=("Arial", 18),
+            padx=40,
+            pady=15,
+            width=10
+        ).pack(side=tk.LEFT, padx=5)
+        
+        # Bind Enter key
+        name_entry.bind("<Return>", lambda e: add_tab())
+        ids_entry.bind("<Return>", lambda e: add_tab())
+
+    def edit_tab_dialog(self):
+        """Open dialog to edit current tab"""
+        if not self.check_tab_password():
+            return
+        
+        try:
+            selected_tab_name = self.notebook.tab(self.notebook.select(), "text")
+        except:
+            messagebox.showwarning("Warning", "Please select a tab to edit")
+            return
+        
+        if selected_tab_name not in self.settings["lights"]:
+            messagebox.showerror("Error", "Selected tab not found in settings")
+            return
+        
+        dialog = tk.Toplevel(self.root)
+        dialog.title("Edit Tab")
+        dialog.configure(bg=bg_color)
+        dialog.transient(self.root)
+        dialog.grab_set()
+        
+        # Center the dialog
+        dialog.geometry("600x300")
+        dialog.update_idletasks()
+        x = (dialog.winfo_screenwidth() // 2) - (dialog.winfo_width() // 2)
+        y = (dialog.winfo_screenheight() // 2) - (dialog.winfo_height() // 2)
+        dialog.geometry(f"+{x}+{y}")
+        
+        current_data = self.settings["lights"][selected_tab_name]
+        
+        # Tab name input
+        tk.Label(dialog, text="Tab Name:", bg=bg_color, fg=fg_color, font=("Arial", 12)).pack(pady=10)
+        name_entry = tk.Entry(dialog, font=("Arial", 12), width=30)
+        name_entry.pack(pady=5)
+        name_entry.insert(0, selected_tab_name)
+        name_entry.focus()
+        
+        # IDs input
+        tk.Label(dialog, text="Device IDs (comma-separated):", bg=bg_color, fg=fg_color, font=("Arial", 12)).pack(pady=10)
+        ids_entry = tk.Entry(dialog, font=("Arial", 12), width=30)
+        ids_entry.pack(pady=5)
+        ids_entry.insert(0, ", ".join(current_data["names"]))
+        
+        def update_tab():
+            new_tab_name = name_entry.get().strip()
+            ids_str = ids_entry.get().strip()
+            
+            if not new_tab_name:
+                messagebox.showerror("Error", "Tab name cannot be empty", parent=dialog)
+                return
+            
+            # Parse IDs
+            ids = [id.strip() for id in ids_str.split(",") if id.strip()]
+            if not ids:
+                ids = ["1"]  # Default ID
+            
+            # If name changed, rename the tab
+            if new_tab_name != selected_tab_name:
+                if new_tab_name in self.settings["lights"]:
+                    messagebox.showerror("Error", f"Tab '{new_tab_name}' already exists", parent=dialog)
+                    return
+                
+                # Rename in settings
+                self.settings["lights"][new_tab_name] = self.settings["lights"][selected_tab_name]
+                del self.settings["lights"][selected_tab_name]
+                
+                # Update tab order if name changed
+                if "tab_order" in self.settings and selected_tab_name in self.settings["tab_order"]:
+                    index = self.settings["tab_order"].index(selected_tab_name)
+                    self.settings["tab_order"][index] = new_tab_name
+            
+            # Update IDs
+            self.settings["lights"][new_tab_name]["names"] = ids
+            self.save_profile()
+            
+            # Recreate tabs
+            self.create_tabs()
+            
+            # Select the edited tab
+            for i, tab_text in enumerate(self.get_tab_order()):
+                if tab_text == new_tab_name:
+                    self.notebook.select(i)
+                    break
+            
+            dialog.destroy()
+        
+        # Buttons
+        button_frame = tk.Frame(dialog, bg=bg_color)
+        button_frame.pack(pady=20)
+        
+        tk.Button(
+            button_frame,
+            text="Update",
+            command=update_tab,
+            bg=active_bg_color,
+            fg=fg_color,
+            font=("Arial", 18),
+            padx=40,
+            pady=15,
+            width=10
+        ).pack(side=tk.LEFT, padx=5)
+        
+        tk.Button(
+            button_frame,
+            text="Cancel",
+            command=dialog.destroy,
+            bg=active_bg_color,
+            fg=fg_color,
+            font=("Arial", 18),
+            padx=40,
+            pady=15,
+            width=10
+        ).pack(side=tk.LEFT, padx=5)
+        
+        # Bind Enter key
+        name_entry.bind("<Return>", lambda e: update_tab())
+        ids_entry.bind("<Return>", lambda e: update_tab())
+
+    def delete_tab_dialog(self):
+        """Delete the current tab with confirmation"""
+        if not self.check_tab_password():
+            return
+        
+        try:
+            selected_tab_name = self.notebook.tab(self.notebook.select(), "text")
+        except:
+            messagebox.showwarning("Warning", "Please select a tab to delete")
+            return
+        
+        if selected_tab_name not in self.settings["lights"]:
+            messagebox.showerror("Error", "Selected tab not found in settings")
+            return
+        
+        # Confirmation dialog
+        result = messagebox.askyesno(
+            "Confirm Delete",
+            f"Are you sure you want to delete the tab '{selected_tab_name}'?\n\nThis action cannot be undone.",
+            icon="warning"
+        )
+        
+        if result:
+            # Delete from settings
+            del self.settings["lights"][selected_tab_name]
+            
+            # Remove from tab order
+            if "tab_order" in self.settings and selected_tab_name in self.settings["tab_order"]:
+                self.settings["tab_order"].remove(selected_tab_name)
+            
+            self.save_profile()
+            
+            # Recreate tabs
+            self.create_tabs()
+            
+            # Select first tab if available
+            if self.settings["lights"]:
+                self.notebook.select(0)
+    
+    def move_tab_left(self):
+        """Move the current tab left in the order"""
+        try:
+            selected_index = self.notebook.index(self.notebook.select())
+        except:
+            messagebox.showwarning("Warning", "Please select a tab to move")
+            return
+        
+        if selected_index == 0:
+            messagebox.showinfo("Info", "Tab is already at the leftmost position")
+            return
+        
+        # Get current tab order
+        tab_order = self.get_tab_order()
+        
+        # Swap with previous tab
+        tab_order[selected_index], tab_order[selected_index - 1] = tab_order[selected_index - 1], tab_order[selected_index]
+        
+        # Save new order
+        self.settings["tab_order"] = tab_order
+        self.save_profile()
+        
+        # Recreate tabs with new order
+        self.create_tabs()
+        
+        # Select the moved tab (now at previous index)
+        self.notebook.select(selected_index - 1)
+    
+    def move_tab_right(self):
+        """Move the current tab right in the order"""
+        try:
+            selected_index = self.notebook.index(self.notebook.select())
+        except:
+            messagebox.showwarning("Warning", "Please select a tab to move")
+            return
+        
+        total_tabs = self.notebook.index("end")
+        if selected_index >= total_tabs - 1:
+            messagebox.showinfo("Info", "Tab is already at the rightmost position")
+            return
+        
+        # Get current tab order
+        tab_order = self.get_tab_order()
+        
+        # Swap with next tab
+        tab_order[selected_index], tab_order[selected_index + 1] = tab_order[selected_index + 1], tab_order[selected_index]
+        
+        # Save new order
+        self.settings["tab_order"] = tab_order
+        self.save_profile()
+        
+        # Recreate tabs with new order
+        self.create_tabs()
+        
+        # Select the moved tab (now at next index)
+        self.notebook.select(selected_index + 1)
+
+
+if __name__ == "__main__":
+    app = App()
diff --git a/static/app.js b/static/app.js
new file mode 100644
index 0000000..117a897
--- /dev/null
+++ b/static/app.js
@@ -0,0 +1,571 @@
+// Lighting Controller Web App
+class LightingController {
+    constructor() {
+        this.currentTab = null;
+        this.state = {
+            lights: {},
+            patterns: {},
+            tab_order: []
+        };
+        this.selectedColorIndex = 0;
+        this.updateTimeouts = {};
+        
+        this.init();
+    }
+
+    async init() {
+        await this.loadState();
+        this.setupEventListeners();
+        this.renderTabs();
+        if (this.state.tab_order.length > 0) {
+            this.selectTab(this.state.tab_order[0]);
+        }
+    }
+
+    async loadState() {
+        try {
+            const response = await fetch('/api/state');
+            const data = await response.json();
+            this.state = data;
+        } catch (error) {
+            console.error('Failed to load state:', error);
+        }
+    }
+
+    setupEventListeners() {
+        // Tab management
+        document.getElementById('add-tab-btn').addEventListener('click', () => this.showAddTabModal());
+        document.getElementById('edit-tab-btn').addEventListener('click', () => this.showEditTabModal());
+        document.getElementById('delete-tab-btn').addEventListener('click', () => this.deleteCurrentTab());
+        document.getElementById('profiles-btn').addEventListener('click', () => this.showProfiles());
+
+        // Modal actions
+        document.getElementById('add-tab-confirm').addEventListener('click', () => this.createTab());
+        document.getElementById('add-tab-cancel').addEventListener('click', () => this.hideModal('add-tab-modal'));
+        document.getElementById('edit-tab-confirm').addEventListener('click', () => this.updateTab());
+        document.getElementById('edit-tab-cancel').addEventListener('click', () => this.hideModal('edit-tab-modal'));
+
+        // Brightness and delay sliders
+        document.getElementById('brightness-slider').addEventListener('input', (e) => {
+            document.getElementById('brightness-value').textContent = e.target.value;
+            this.debounceUpdate('brightness', () => this.updateBrightness());
+        });
+        document.getElementById('delay-slider').addEventListener('input', (e) => {
+            this.updateDelayValue(e.target.value);
+            this.debounceUpdate('delay', () => this.updateDelay());
+        });
+
+        // N parameters
+        for (let i = 1; i <= 4; i++) {
+            document.getElementById(`n${i}-input`).addEventListener('input', (e) => {
+                this.debounceUpdate('nparams', () => this.updateNParams());
+            });
+        }
+
+        // Color palette
+        document.getElementById('add-color-btn').addEventListener('click', () => this.addColorToPalette());
+        document.getElementById('remove-color-btn').addEventListener('click', () => this.removeSelectedColor());
+
+        // Close modals on outside click
+        document.getElementById('add-tab-modal').addEventListener('click', (e) => {
+            if (e.target.id === 'add-tab-modal') this.hideModal('add-tab-modal');
+        });
+        document.getElementById('edit-tab-modal').addEventListener('click', (e) => {
+            if (e.target.id === 'edit-tab-modal') this.hideModal('edit-tab-modal');
+        });
+    }
+
+    renderTabs() {
+        const tabsList = document.getElementById('tabs-list');
+        tabsList.innerHTML = '';
+        
+        this.state.tab_order.forEach(tabName => {
+            const tabButton = document.createElement('button');
+            tabButton.className = 'tab-button';
+            tabButton.textContent = tabName;
+            tabButton.addEventListener('click', () => this.selectTab(tabName));
+            if (tabName === this.currentTab) {
+                tabButton.classList.add('active');
+            }
+            tabsList.appendChild(tabButton);
+        });
+    }
+
+    async selectTab(tabName) {
+        if (!this.state.lights[tabName]) return;
+        
+        this.currentTab = tabName;
+        this.renderTabs();
+        await this.loadTabContent(tabName);
+    }
+
+    async loadTabContent(tabName) {
+        const light = this.state.lights[tabName];
+        if (!light) {
+            return;
+        }
+        const settings = light.settings;
+        const pattern = settings.pattern || 'on';
+        
+        // Get pattern-specific settings
+        const patternSettings = this.getPatternSettings(tabName, pattern);
+        
+        // Update IDs display
+        document.getElementById('current-ids').textContent = light.names.join(', ');
+        
+        // Colors are handled by the color palette with individual color pickers
+        
+        // Update brightness slider
+        const brightness = settings.brightness || 127;
+        document.getElementById('brightness-slider').value = brightness;
+        document.getElementById('brightness-value').textContent = brightness;
+        
+        // Update delay slider
+        const patternConfig = this.state.patterns[pattern] || {};
+        const minDelay = patternConfig.min_delay || 10;
+        const maxDelay = patternConfig.max_delay || 10000;
+        const delaySliderPos = this.delayToSlider(patternSettings.delay, minDelay, maxDelay);
+        document.getElementById('delay-slider').value = delaySliderPos;
+        this.updateDelayValue(delaySliderPos, minDelay, maxDelay);
+        
+        // Update n parameters
+        for (let i = 1; i <= 4; i++) {
+            document.getElementById(`n${i}-input`).value = patternSettings[`n${i}`] || 10;
+        }
+        
+        // Render patterns
+        this.renderPatterns(tabName, pattern);
+        
+        // Render color palette
+        this.renderColorPalette(tabName, colors);
+    }
+
+    renderPatterns(tabName, activePattern) {
+        const patternsList = document.getElementById('patterns-list');
+        patternsList.innerHTML = '';
+        
+        Object.keys(this.state.patterns).forEach(patternName => {
+            const button = document.createElement('button');
+            button.className = 'pattern-button';
+            button.textContent = patternName;
+            if (patternName === activePattern) {
+                button.classList.add('active');
+            }
+            button.addEventListener('click', () => this.setPattern(tabName, patternName));
+            patternsList.appendChild(button);
+        });
+    }
+
+    renderColorPalette(tabName, colors) {
+        const palette = document.getElementById('color-palette');
+        if (!palette) {
+            return;
+        }
+        palette.innerHTML = '';
+        
+        colors.forEach((hexColor, index) => {
+            const swatch = document.createElement('div');
+            swatch.className = 'color-swatch';
+            if (index === this.selectedColorIndex) {
+                swatch.classList.add('selected');
+            }
+            
+            const preview = document.createElement('div');
+            preview.className = 'color-swatch-preview';
+            preview.style.backgroundColor = hexColor;
+            
+            const label = document.createElement('span');
+            label.className = 'color-swatch-label';
+            label.textContent = `Color ${index + 1}`;
+            
+            // Color picker input
+            const colorPicker = document.createElement('input');
+            colorPicker.type = 'color';
+            colorPicker.value = hexColor;
+            colorPicker.className = 'color-picker-input';
+            colorPicker.addEventListener('change', (e) => {
+                const newColor = e.target.value;
+                this.updateColorInPalette(tabName, index, newColor);
+            });
+            
+            swatch.appendChild(preview);
+            swatch.appendChild(label);
+            swatch.appendChild(colorPicker);
+            swatch.addEventListener('click', (e) => {
+                // Don't trigger selection if clicking on the color picker
+                if (e.target !== colorPicker && !colorPicker.contains(e.target)) {
+                    this.selectColor(tabName, index, hexColor);
+                }
+            });
+            
+            palette.appendChild(swatch);
+        });
+    }
+
+    getPatternSettings(tabName, patternName) {
+        const light = this.state.lights[tabName];
+        if (!light) return { colors: ['#000000'], delay: 100, n1: 10, n2: 10, n3: 10, n4: 10 };
+        
+        const lightSettings = light.settings;
+        if (!lightSettings.patterns) lightSettings.patterns = {};
+        if (!lightSettings.patterns[patternName]) lightSettings.patterns[patternName] = {};
+        
+        const patternSettings = lightSettings.patterns[patternName];
+        return {
+            colors: patternSettings.colors || ['#000000'],
+            delay: patternSettings.delay || 100,
+            n1: patternSettings.n1 || 10,
+            n2: patternSettings.n2 || 10,
+            n3: patternSettings.n3 || 10,
+            n4: patternSettings.n4 || 10
+        };
+    }
+
+    async setPattern(tabName, patternName) {
+        const patternSettings = this.getPatternSettings(tabName, patternName);
+        
+        try {
+            const response = await fetch('/api/pattern', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    tab_name: tabName,
+                    pattern: patternName,
+                    delay: patternSettings.delay,
+                    colors: patternSettings.colors,
+                    n1: patternSettings.n1,
+                    n2: patternSettings.n2,
+                    n3: patternSettings.n3,
+                    n4: patternSettings.n4
+                })
+            });
+            
+            if (response.ok) {
+                await this.loadState();
+                await this.loadTabContent(tabName);
+            }
+        } catch (error) {
+            console.error('Failed to set pattern:', error);
+        }
+    }
+
+    selectColor(tabName, index, hexColor) {
+        this.selectedColorIndex = index;
+        if (this.state.lights[tabName]) {
+            const pattern = this.state.lights[tabName].settings.pattern;
+            const patternSettings = this.getPatternSettings(tabName, pattern);
+            this.renderColorPalette(tabName, patternSettings.colors);
+        }
+    }
+
+    async updateColorInPalette(tabName, index, hexColor) {
+        if (!this.currentTab || tabName !== this.currentTab) return;
+        
+        const pattern = this.state.lights[tabName].settings.pattern;
+        const patternSettings = this.getPatternSettings(tabName, pattern);
+        patternSettings.colors[index] = hexColor;
+        
+        // Update the preview
+        const palette = document.getElementById('color-palette');
+        if (palette && palette.children[index]) {
+            const preview = palette.children[index].querySelector('.color-swatch-preview');
+            if (preview) {
+                preview.style.backgroundColor = hexColor;
+            }
+        }
+        
+        // Send update to backend to persist changes
+        const rgb = this.hexToRgb(hexColor);
+        try {
+            const response = await fetch('/api/parameters', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    tab_name: this.currentTab,
+                    red: rgb.r,
+                    green: rgb.g,
+                    blue: rgb.b,
+                    color_index: index
+                })
+            });
+            
+            if (response.ok) {
+                // Reload state to ensure persistence
+                await this.loadState();
+                // Re-render palette to reflect persisted state
+                const updatedPatternSettings = this.getPatternSettings(tabName, pattern);
+                this.renderColorPalette(tabName, updatedPatternSettings.colors);
+            }
+        } catch (error) {
+            console.error('Failed to update color:', error);
+        }
+    }
+
+
+    async updateBrightness() {
+        if (!this.currentTab) return;
+        
+        const brightness = parseInt(document.getElementById('brightness-slider').value) || 0;
+        
+        try {
+            await fetch('/api/parameters', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    tab_name: this.currentTab,
+                    brightness: brightness
+                })
+            });
+        } catch (error) {
+            console.error('Failed to update brightness:', error);
+        }
+    }
+
+    async updateDelay() {
+        if (!this.currentTab) return;
+        
+        const sliderValue = parseInt(document.getElementById('delay-slider').value);
+        const pattern = this.state.lights[this.currentTab].settings.pattern;
+        const patternConfig = this.state.patterns[pattern] || {};
+        const minDelay = patternConfig.min_delay || 10;
+        const maxDelay = patternConfig.max_delay || 10000;
+        
+        try {
+            await fetch('/api/parameters', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    tab_name: this.currentTab,
+                    delay_slider: sliderValue
+                })
+            });
+        } catch (error) {
+            console.error('Failed to update delay:', error);
+        }
+    }
+
+    async updateNParams() {
+        if (!this.currentTab) return;
+        
+        const nParams = {};
+        for (let i = 1; i <= 4; i++) {
+            nParams[`n${i}`] = parseInt(document.getElementById(`n${i}-input`).value) || 0;
+        }
+        
+        try {
+            await fetch('/api/parameters', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    tab_name: this.currentTab,
+                    ...nParams
+                })
+            });
+        } catch (error) {
+            console.error('Failed to update n params:', error);
+        }
+    }
+
+    debounceUpdate(key, callback) {
+        if (this.updateTimeouts[key]) {
+            clearTimeout(this.updateTimeouts[key]);
+        }
+        this.updateTimeouts[key] = setTimeout(callback, 100);
+    }
+
+    delayToSlider(delayMs, minDelay = 10, maxDelay = 10000) {
+        if (delayMs <= minDelay) return 0;
+        if (delayMs >= maxDelay) return 1000;
+        if (minDelay === maxDelay) return 0;
+        return Math.floor(1000 * Math.log(delayMs / minDelay) / Math.log(maxDelay / minDelay));
+    }
+
+    sliderToDelay(sliderValue, minDelay = 10, maxDelay = 10000) {
+        if (sliderValue <= 0) return minDelay;
+        if (sliderValue >= 1000) return maxDelay;
+        if (minDelay === maxDelay) return minDelay;
+        return Math.floor(minDelay * Math.pow(maxDelay / minDelay, sliderValue / 1000));
+    }
+
+    updateDelayValue(sliderValue, minDelay, maxDelay) {
+        if (!minDelay || !maxDelay) {
+            const pattern = this.currentTab ? this.state.lights[this.currentTab]?.settings?.pattern : 'on';
+            const patternConfig = this.state.patterns[pattern] || {};
+            minDelay = patternConfig.min_delay || 10;
+            maxDelay = patternConfig.max_delay || 10000;
+        }
+        const delay = this.sliderToDelay(parseInt(sliderValue), minDelay, maxDelay);
+        document.getElementById('delay-value').textContent = `${delay} ms`;
+    }
+
+    hexToRgb(hex) {
+        const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+        return result ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16)
+        } : { r: 0, g: 0, b: 0 };
+    }
+
+    rgbToHex(r, g, b) {
+        return `#${[r, g, b].map(x => {
+            const hex = x.toString(16);
+            return hex.length === 1 ? '0' + hex : hex;
+        }).join('')}`;
+    }
+
+    showAddTabModal() {
+        document.getElementById('new-tab-name').value = '';
+        document.getElementById('new-tab-ids').value = '1';
+        document.getElementById('add-tab-modal').classList.add('active');
+    }
+
+    async createTab() {
+        const name = document.getElementById('new-tab-name').value.trim();
+        const idsStr = document.getElementById('new-tab-ids').value.trim();
+        const ids = idsStr.split(',').map(id => id.trim()).filter(id => id);
+        
+        if (!name) {
+            alert('Tab name cannot be empty');
+            return;
+        }
+        
+        try {
+            const response = await fetch('/api/tabs', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ name, ids })
+            });
+            
+            if (response.ok) {
+                await this.loadState();
+                this.renderTabs();
+                this.selectTab(name);
+                this.hideModal('add-tab-modal');
+            } else {
+                const error = await response.json();
+                alert(error.error || 'Failed to create tab');
+            }
+        } catch (error) {
+            console.error('Failed to create tab:', error);
+            alert('Failed to create tab');
+        }
+    }
+
+    showEditTabModal() {
+        if (!this.currentTab) {
+            alert('Please select a tab first');
+            return;
+        }
+        
+        const light = this.state.lights[this.currentTab];
+        document.getElementById('edit-tab-name').value = this.currentTab;
+        document.getElementById('edit-tab-ids').value = light.names.join(', ');
+        document.getElementById('edit-tab-modal').classList.add('active');
+    }
+
+    async updateTab() {
+        const newName = document.getElementById('edit-tab-name').value.trim();
+        const idsStr = document.getElementById('edit-tab-ids').value.trim();
+        const ids = idsStr.split(',').map(id => id.trim()).filter(id => id);
+        
+        if (!newName) {
+            alert('Tab name cannot be empty');
+            return;
+        }
+        
+        try {
+            const response = await fetch(`/api/tabs/${this.currentTab}`, {
+                method: 'PUT',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ name: newName, ids })
+            });
+            
+            if (response.ok) {
+                await this.loadState();
+                this.renderTabs();
+                this.selectTab(newName);
+                this.hideModal('edit-tab-modal');
+            } else {
+                const error = await response.json();
+                alert(error.error || 'Failed to update tab');
+            }
+        } catch (error) {
+            console.error('Failed to update tab:', error);
+            alert('Failed to update tab');
+        }
+    }
+
+    async deleteCurrentTab() {
+        if (!this.currentTab) {
+            alert('Please select a tab first');
+            return;
+        }
+        
+        if (!confirm(`Are you sure you want to delete the tab '${this.currentTab}'?`)) {
+            return;
+        }
+        
+        try {
+            const response = await fetch(`/api/tabs/${this.currentTab}`, {
+                method: 'DELETE'
+            });
+            
+            if (response.ok) {
+                await this.loadState();
+                this.renderTabs();
+                if (this.state.tab_order.length > 0) {
+                    this.selectTab(this.state.tab_order[0]);
+                } else {
+                    this.currentTab = null;
+                    document.getElementById('tab-content').innerHTML = '<p>No tabs available. Create a new tab to get started.</p>';
+                }
+            }
+        } catch (error) {
+            console.error('Failed to delete tab:', error);
+            alert('Failed to delete tab');
+        }
+    }
+
+    async addColorToPalette() {
+        if (!this.currentTab) return;
+        
+        const pattern = this.state.lights[this.currentTab].settings.pattern;
+        const patternSettings = this.getPatternSettings(this.currentTab, pattern);
+        patternSettings.colors.push('#000000');
+        this.selectedColorIndex = patternSettings.colors.length - 1;
+        this.renderColorPalette(this.currentTab, patternSettings.colors);
+    }
+
+    async removeSelectedColor() {
+        if (!this.currentTab) return;
+        
+        const pattern = this.state.lights[this.currentTab].settings.pattern;
+        const patternSettings = this.getPatternSettings(this.currentTab, pattern);
+        
+        if (patternSettings.colors.length <= 1) {
+            alert('There must be at least one color in the palette');
+            return;
+        }
+        
+        patternSettings.colors.splice(this.selectedColorIndex, 1);
+        if (this.selectedColorIndex >= patternSettings.colors.length) {
+            this.selectedColorIndex = patternSettings.colors.length - 1;
+        }
+        this.renderColorPalette(this.currentTab, patternSettings.colors);
+    }
+
+    showProfiles() {
+        alert('Profiles feature coming soon');
+    }
+
+    hideModal(modalId) {
+        document.getElementById(modalId).classList.remove('active');
+    }
+}
+
+// Initialize app when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+    new LightingController();
+});
+
diff --git a/static/style.css b/static/style.css
new file mode 100644
index 0000000..ffba2b1
--- /dev/null
+++ b/static/style.css
@@ -0,0 +1,505 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    background-color: #2e2e2e;
+    color: white;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.app-container {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}
+
+header {
+    background-color: #1a1a1a;
+    padding: 1rem 2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 2px solid #4a4a4a;
+}
+
+header h1 {
+    font-size: 1.5rem;
+    font-weight: 600;
+}
+
+.header-actions {
+    display: flex;
+    gap: 0.5rem;
+}
+
+.btn {
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    font-weight: 500;
+    transition: background-color 0.2s;
+}
+
+.btn-primary {
+    background-color: #4a4a4a;
+    color: white;
+}
+
+.btn-primary:hover {
+    background-color: #5a5a5a;
+}
+
+.btn-secondary {
+    background-color: #3a3a3a;
+    color: white;
+}
+
+.btn-secondary:hover {
+    background-color: #4a4a4a;
+}
+
+.btn-danger {
+    background-color: #d32f2f;
+    color: white;
+}
+
+.btn-danger:hover {
+    background-color: #c62828;
+}
+
+.btn-small {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.8rem;
+}
+
+.main-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.tabs-container {
+    background-color: #1a1a1a;
+    border-bottom: 2px solid #4a4a4a;
+    padding: 0.5rem 1rem;
+}
+
+.tabs-list {
+    display: flex;
+    gap: 0.5rem;
+    overflow-x: auto;
+}
+
+.tab-button {
+    padding: 0.5rem 1rem;
+    background-color: #3a3a3a;
+    color: white;
+    border: none;
+    border-radius: 4px 4px 0 0;
+    cursor: pointer;
+    font-size: 0.9rem;
+    white-space: nowrap;
+    transition: background-color 0.2s;
+}
+
+.tab-button:hover {
+    background-color: #4a4a4a;
+}
+
+.tab-button.active {
+    background-color: #6a5acd;
+    color: white;
+}
+
+.tab-content {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+    padding: 1rem;
+    gap: 1rem;
+}
+
+.left-panel {
+    flex: 0 0 50%;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    overflow-y: auto;
+    border-right: 2px solid #4a4a4a;
+    padding-right: 1rem;
+}
+
+.right-panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    overflow-y: auto;
+    padding-left: 1rem;
+}
+
+.ids-display {
+    padding: 0.5rem;
+    background-color: #3a3a3a;
+    border-radius: 4px;
+    font-size: 0.9rem;
+}
+
+.controls-section {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+.control-group {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.control-group label {
+    min-width: 100px;
+    font-weight: 500;
+}
+
+.slider {
+    flex: 1;
+    height: 8px;
+    background-color: #3a3a3a;
+    border-radius: 4px;
+    outline: none;
+    -webkit-appearance: none;
+    margin: 0 0.5rem;
+}
+
+.slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    background-color: #6a5acd;
+    border-radius: 50%;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.slider::-webkit-slider-thumb:hover {
+    background-color: #7a6add;
+}
+
+.slider::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    background-color: #6a5acd;
+    border-radius: 50%;
+    cursor: pointer;
+    border: none;
+    transition: background-color 0.2s;
+}
+
+.slider::-moz-range-thumb:hover {
+    background-color: #7a6add;
+}
+
+/* Red slider */
+#red-slider {
+    accent-color: #ff0000;
+}
+
+#red-slider::-webkit-slider-thumb {
+    background-color: #ff0000;
+}
+
+#red-slider::-moz-range-thumb {
+    background-color: #ff0000;
+}
+
+/* Green slider */
+#green-slider {
+    accent-color: #00ff00;
+}
+
+#green-slider::-webkit-slider-thumb {
+    background-color: #00ff00;
+}
+
+#green-slider::-moz-range-thumb {
+    background-color: #00ff00;
+}
+
+/* Blue slider */
+#blue-slider {
+    accent-color: #0000ff;
+}
+
+#blue-slider::-webkit-slider-thumb {
+    background-color: #0000ff;
+}
+
+#blue-slider::-moz-range-thumb {
+    background-color: #0000ff;
+}
+
+/* Brightness slider */
+#brightness-slider {
+    accent-color: #ffff00;
+}
+
+#brightness-slider::-webkit-slider-thumb {
+    background-color: #ffff00;
+}
+
+#brightness-slider::-moz-range-thumb {
+    background-color: #ffff00;
+}
+
+.slider-value {
+    min-width: 50px;
+    text-align: right;
+    font-weight: 500;
+    font-size: 0.9rem;
+}
+
+.n-params-section {
+    margin-top: 1rem;
+}
+
+.n-params-section h3 {
+    margin-bottom: 0.5rem;
+    font-size: 1rem;
+}
+
+.n-params-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 1rem;
+}
+
+.n-param-group {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.n-param-group label {
+    min-width: 40px;
+    font-weight: 500;
+}
+
+.n-input {
+    flex: 1;
+    padding: 0.5rem;
+    background-color: #3a3a3a;
+    color: white;
+    border: 1px solid #4a4a4a;
+    border-radius: 4px;
+    font-size: 1rem;
+}
+
+.n-input:focus {
+    outline: none;
+    border-color: #6a5acd;
+}
+
+.patterns-section,
+.color-palette-section {
+    background-color: #1a1a1a;
+    border: 2px solid #4a4a4a;
+    border-radius: 4px;
+    padding: 1rem;
+}
+
+.patterns-section h3,
+.color-palette-section h3 {
+    margin-bottom: 1rem;
+    font-size: 1.1rem;
+}
+
+.patterns-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.pattern-button {
+    padding: 0.75rem;
+    background-color: #3a3a3a;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 0.9rem;
+    text-align: left;
+    transition: background-color 0.2s;
+}
+
+.pattern-button:hover {
+    background-color: #4a4a4a;
+}
+
+.pattern-button.active {
+    background-color: #6a5acd;
+    color: white;
+}
+
+.color-palette {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+.color-swatch {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem;
+    background-color: #3a3a3a;
+    border: 2px solid transparent;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: border-color 0.2s;
+    gap: 0.5rem;
+}
+
+.color-swatch:hover {
+    border-color: #6a5acd;
+}
+
+.color-swatch.selected {
+    border-color: #FFD700;
+    border-width: 3px;
+}
+
+.color-swatch-preview {
+    width: 40px;
+    height: 40px;
+    border-radius: 4px;
+    border: 1px solid #4a4a4a;
+    flex-shrink: 0;
+}
+
+.color-swatch-label {
+    flex: 1;
+    font-size: 0.9rem;
+    min-width: 80px;
+}
+
+.color-picker-input {
+    width: 60px;
+    height: 40px;
+    border: 1px solid #4a4a4a;
+    border-radius: 4px;
+    cursor: pointer;
+    background: none;
+    padding: 0;
+    flex-shrink: 0;
+}
+
+.color-picker-input::-webkit-color-swatch-wrapper {
+    padding: 0;
+}
+
+.color-picker-input::-webkit-color-swatch {
+    border: none;
+    border-radius: 4px;
+}
+
+.color-picker-input::-moz-color-swatch {
+    border: none;
+    border-radius: 4px;
+}
+
+.palette-actions {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: 0.5rem;
+}
+
+.modal {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 1000;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal.active {
+    display: flex;
+}
+
+.modal-content {
+    background-color: #2e2e2e;
+    padding: 2rem;
+    border-radius: 8px;
+    min-width: 400px;
+    max-width: 500px;
+}
+
+.modal-content h2 {
+    margin-bottom: 1rem;
+    font-size: 1.3rem;
+}
+
+.modal-content label {
+    display: block;
+    margin-top: 1rem;
+    margin-bottom: 0.5rem;
+    font-weight: 500;
+}
+
+.modal-content input {
+    width: 100%;
+    padding: 0.5rem;
+    background-color: #3a3a3a;
+    color: white;
+    border: 1px solid #4a4a4a;
+    border-radius: 4px;
+    font-size: 1rem;
+}
+
+.modal-content input:focus {
+    outline: none;
+    border-color: #6a5acd;
+}
+
+.modal-actions {
+    display: flex;
+    gap: 0.5rem;
+    margin-top: 1.5rem;
+    justify-content: flex-end;
+}
+
+/* Scrollbar styling */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #1a1a1a;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #4a4a4a;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #5a5a5a;
+}
+
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..ff7905a
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Lighting Controller</title>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+</head>
+<body>
+    <div class="app-container">
+        <header>
+            <h1>Lighting Controller</h1>
+            <div class="header-actions">
+                <button id="add-tab-btn" class="btn btn-primary">+ Add Tab</button>
+                <button id="edit-tab-btn" class="btn btn-secondary">Edit Tab</button>
+                <button id="delete-tab-btn" class="btn btn-danger">Delete Tab</button>
+                <button id="profiles-btn" class="btn btn-secondary">Profiles</button>
+            </div>
+        </header>
+
+        <div class="main-content">
+            <div class="tabs-container">
+                <div id="tabs-list" class="tabs-list"></div>
+            </div>
+
+            <div id="tab-content" class="tab-content">
+                <div class="left-panel">
+                    <div class="ids-display">
+                        <label>IDs: </label>
+                        <span id="current-ids"></span>
+                    </div>
+
+                    <div class="color-palette-section">
+                        <h3>Color Palette</h3>
+                        <div id="color-palette" class="color-palette"></div>
+                        <div class="palette-actions">
+                            <button id="add-color-btn" class="btn btn-small">Add Color</button>
+                            <button id="remove-color-btn" class="btn btn-small">Remove Selected</button>
+                        </div>
+                    </div>
+
+                    <div class="controls-section">
+                        <div class="control-group">
+                            <label for="brightness-slider">Brightness:</label>
+                            <input type="range" id="brightness-slider" min="0" max="255" value="127" class="slider">
+                            <span id="brightness-value" class="slider-value">127</span>
+                        </div>
+                        <div class="control-group">
+                            <label for="delay-slider">Delay:</label>
+                            <input type="range" id="delay-slider" min="0" max="1000" value="0" class="slider">
+                            <span id="delay-value" class="slider-value">100 ms</span>
+                        </div>
+                    </div>
+
+                    <div class="n-params-section">
+                        <h3>N Parameters</h3>
+                        <div class="n-params-grid">
+                            <div class="n-param-group">
+                                <label for="n1-input">n1:</label>
+                                <input type="number" id="n1-input" min="0" max="255" value="10" class="n-input">
+                            </div>
+                            <div class="n-param-group">
+                                <label for="n2-input">n2:</label>
+                                <input type="number" id="n2-input" min="0" max="255" value="10" class="n-input">
+                            </div>
+                            <div class="n-param-group">
+                                <label for="n3-input">n3:</label>
+                                <input type="number" id="n3-input" min="0" max="255" value="10" class="n-input">
+                            </div>
+                            <div class="n-param-group">
+                                <label for="n4-input">n4:</label>
+                                <input type="number" id="n4-input" min="0" max="255" value="10" class="n-input">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="right-panel">
+                    <div class="patterns-section">
+                        <h3>Patterns</h3>
+                        <div id="patterns-list" class="patterns-list"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Modals -->
+    <div id="add-tab-modal" class="modal">
+        <div class="modal-content">
+            <h2>Add New Tab</h2>
+            <label>Tab Name:</label>
+            <input type="text" id="new-tab-name" placeholder="Enter tab name">
+            <label>Device IDs (comma-separated):</label>
+            <input type="text" id="new-tab-ids" placeholder="1,2,3" value="1">
+            <div class="modal-actions">
+                <button id="add-tab-confirm" class="btn btn-primary">Add</button>
+                <button id="add-tab-cancel" class="btn btn-secondary">Cancel</button>
+            </div>
+        </div>
+    </div>
+
+    <div id="edit-tab-modal" class="modal">
+        <div class="modal-content">
+            <h2>Edit Tab</h2>
+            <label>Tab Name:</label>
+            <input type="text" id="edit-tab-name" placeholder="Enter tab name">
+            <label>Device IDs (comma-separated):</label>
+            <input type="text" id="edit-tab-ids" placeholder="1,2,3">
+            <div class="modal-actions">
+                <button id="edit-tab-confirm" class="btn btn-primary">Update</button>
+                <button id="edit-tab-cancel" class="btn btn-secondary">Cancel</button>
+            </div>
+        </div>
+    </div>
+
+    <script src="{{ url_for('static', filename='app.js') }}"></script>
+</body>
+</html>
+