diff --git a/README.md b/README.md
index 5a4c2d97..af85ee0c 100644
--- a/README.md
+++ b/README.md
@@ -56,8 +56,9 @@ You are welcome to contribute to the code!
 2. Install [Node.js](https://nodejs.org/en/download/)
 3. Install [Python 3.12](https://www.python.org/downloads/), and the [`setuptools`](https://pypi.org/project/setuptools/) package
 4. On Windows, download [Visual Studio](https://visualstudio.microsoft.com/downloads/) and install "Desktop development with C++", also select the "Windows 10 SDK"
-5. In the terminal, run: `npm install`
-6. To start the app, run: `npm start`
+5. On Linux, install the following library: `sudo apt-get install libfontconfig1-dev`
+6. In the terminal, run: `npm install`
+7. To start the app, run: `npm start`
 
 ## Join us on Slack
 
diff --git a/package-lock.json b/package-lock.json
index 61cbdb50..5994aaf2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "freeshow",
-    "version": "1.3.3",
+    "version": "1.3.4-beta.1",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "freeshow",
-            "version": "1.3.3",
+            "version": "1.3.4-beta.1",
             "hasInstallScript": true,
             "license": "GPL-3.0",
             "dependencies": {
@@ -18,14 +18,15 @@
                 "axios": "^1.7.8",
                 "chord-transposer": "^3.0.9",
                 "cross-env": "^7.0.3",
-                "css-fonts": "^1.0.8",
+                "css-fonts": "^1.0.9",
+                "dayjs": "^1.11.10",
                 "electron-store": "^8.0.1",
                 "electron-updater": "^6.3.1",
                 "exif": "^0.6.0",
                 "express": "^4.17.2",
                 "follow-redirects": "^1.15.2",
                 "genius-lyrics": "^4.4.7",
-                "grandiose": "vassbo/grandiose#53e7f98",
+                "grandiose": "github:vassbo/grandiose#f2021d2",
                 "jzz": "^1.8.7",
                 "mp4box": "^0.5.2",
                 "node-machine-id": "^1.1.12",
@@ -36,7 +37,7 @@
                 "protobufjs": "^7.2.3",
                 "qrcode-generator": "^1.4.4",
                 "sirv-cli": "^1.0.0",
-                "slideshow": "vassbo/slideshow#224d50f",
+                "slideshow": "github:vassbo/slideshow#224d50f",
                 "socket.io": "^4.4.1",
                 "socket.io-client": "^4.4.1",
                 "sqlite-to-json": "^0.1.3",
@@ -53,7 +54,7 @@
                 "@rollup/plugin-commonjs": "^28.0.1",
                 "@rollup/plugin-node-resolve": "^15.2.3",
                 "@rollup/plugin-terser": "^0.4.4",
-                "@rollup/plugin-typescript": "^12.1.1",
+                "@rollup/plugin-typescript": "^12.1.2",
                 "@tsconfig/svelte": "^2.0.0",
                 "@types/adm-zip": "^0.5.7",
                 "@types/exif": "^0.6.3",
@@ -74,7 +75,7 @@
                 "rollup-plugin-svelte": "^7.1.6",
                 "svelte": "^3.59.2",
                 "svelte-check": "^2.2.12",
-                "svelte-inspector": "vassbo/svelte-inspector#78307db",
+                "svelte-inspector": "github:vassbo/svelte-inspector#78307db",
                 "svelte-preprocess": "^4.10.1",
                 "tslib": "^2.0.0",
                 "typescript": "^4.9.5"
@@ -776,7 +777,9 @@
             }
         },
         "node_modules/@rollup/plugin-typescript": {
-            "version": "12.1.1",
+            "version": "12.1.2",
+            "resolved": "https://registry.npmjs.org/@rollup/plugin-typescript/-/plugin-typescript-12.1.2.tgz",
+            "integrity": "sha512-cdtSp154H5sv637uMr1a8OTWB0L1SWDSm1rDGiyfcGcvQ6cuTs4MDk2BVEBGysUWago4OJN4EQZqOTl/QY3Jgg==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
@@ -2656,9 +2659,9 @@
             }
         },
         "node_modules/css-fonts": {
-            "version": "1.0.8",
-            "resolved": "https://registry.npmjs.org/css-fonts/-/css-fonts-1.0.8.tgz",
-            "integrity": "sha512-V42LQXa5Q+PU/4DNQzGWkkQEP6cm3f7c04MDWHuEfdf7PioDAKN3WS5r2jGcXIlYtb/3EhLGVztt87pkF6Qlng==",
+            "version": "1.0.9",
+            "resolved": "https://registry.npmjs.org/css-fonts/-/css-fonts-1.0.9.tgz",
+            "integrity": "sha512-CVQWqqvhdjL7qPF0yFQ67PuCchYkAAJVMXB3YelSStmJZekHTZXyv2OkJXXMqsI7lZwNByb8y1Rb5K5x8COs6w==",
             "license": "ISC",
             "dependencies": {
                 "font-scanner": "github:vassbo/font-scanner"
@@ -2733,6 +2736,12 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/dayjs": {
+            "version": "1.11.13",
+            "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+            "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+            "license": "MIT"
+        },
         "node_modules/debounce-fn": {
             "version": "4.0.0",
             "license": "MIT",
@@ -4224,7 +4233,7 @@
         },
         "node_modules/grandiose": {
             "version": "0.0.6",
-            "resolved": "git+ssh://git@github.com/vassbo/grandiose.git#53e7f98c6a391781c221b40c85519e3f21f5cbdd",
+            "resolved": "git+ssh://git@github.com/vassbo/grandiose.git#f2021d21a5a207562ff1875cc811de03158005ee",
             "hasInstallScript": true,
             "license": "Apache-2.0",
             "dependencies": {
diff --git a/package.json b/package.json
index 4c9928d4..21075c66 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "freeshow",
-    "version": "1.3.3",
+    "version": "1.3.4-beta.1",
     "private": true,
     "main": "build/electron/index.js",
     "description": "Show song lyrics and more for free!",
@@ -140,7 +140,7 @@
         "@rollup/plugin-commonjs": "^28.0.1",
         "@rollup/plugin-node-resolve": "^15.2.3",
         "@rollup/plugin-terser": "^0.4.4",
-        "@rollup/plugin-typescript": "^12.1.1",
+        "@rollup/plugin-typescript": "^12.1.2",
         "@tsconfig/svelte": "^2.0.0",
         "@types/adm-zip": "^0.5.7",
         "@types/exif": "^0.6.3",
@@ -161,7 +161,7 @@
         "rollup-plugin-svelte": "^7.1.6",
         "svelte": "^3.59.2",
         "svelte-check": "^2.2.12",
-        "svelte-inspector": "vassbo/svelte-inspector#78307db",
+        "svelte-inspector": "github:vassbo/svelte-inspector#78307db",
         "svelte-preprocess": "^4.10.1",
         "tslib": "^2.0.0",
         "typescript": "^4.9.5"
@@ -175,14 +175,15 @@
         "axios": "^1.7.8",
         "chord-transposer": "^3.0.9",
         "cross-env": "^7.0.3",
-        "css-fonts": "^1.0.8",
+        "css-fonts": "^1.0.9",
+        "dayjs": "^1.11.10",
         "electron-store": "^8.0.1",
         "electron-updater": "^6.3.1",
         "exif": "^0.6.0",
         "express": "^4.17.2",
         "follow-redirects": "^1.15.2",
         "genius-lyrics": "^4.4.7",
-        "grandiose": "vassbo/grandiose#53e7f98",
+        "grandiose": "github:vassbo/grandiose#f2021d2",
         "jzz": "^1.8.7",
         "mp4box": "^0.5.2",
         "node-machine-id": "^1.1.12",
@@ -193,7 +194,7 @@
         "protobufjs": "^7.2.3",
         "qrcode-generator": "^1.4.4",
         "sirv-cli": "^1.0.0",
-        "slideshow": "vassbo/slideshow#224d50f",
+        "slideshow": "github:vassbo/slideshow#224d50f",
         "socket.io": "^4.4.1",
         "socket.io-client": "^4.4.1",
         "sqlite-to-json": "^0.1.3",
diff --git a/public/lang/cs_CZ.json b/public/lang/cs_CZ.json
index 1003f52a..6f627ccc 100644
--- a/public/lang/cs_CZ.json
+++ b/public/lang/cs_CZ.json
@@ -4,7 +4,7 @@
         "quit": "Zavřít",
         "docs": "Dokumentace",
         "about": "O Freeshow",
-        "unnamed": "Nepojmenované",
+        "unnamed": "Nezařazené",
         "drop": "Pusťte zde",
         "search": "Vyhledat",
         "quick_search": "Rychlé vyhledávání",
@@ -38,7 +38,10 @@
         "top": "Nahoře",
         "right": "Vpravo",
         "bottom": "Dole",
-        "left": "Vlevo"
+        "left": "Vlevo",
+        "centered": "Vycentrované",
+        "edge_blending_tip": "Prolínat dohromady více výstupů/projektorů pro souvislé spoje",
+        "cropping_tip": "Přesně přesunout obsah okna oříznutím hran."
     },
     "about": {
         "check_updates": "Zkontrolovat aktualizace",
@@ -173,7 +176,6 @@
         "volume": "Hlasitost",
         "gain": "Gain",
         "speed": "Rychlost",
-        "show": "Zobrazit",
         "flip": "Překlopit",
         "flip_horizontally": "Překlopit horizontálně",
         "flip_vertically": "Překlopit vertikálně",
@@ -317,14 +319,14 @@
         "primary-darkest": "Primární nejtmavší",
         "text": "Text",
         "textInvert": "Převrácený text",
-        "secondary-text": "Sekundární text",
+        "secondary-text": "Výběry",
         "secondary": "Sekundární",
         "secondary-opacity": "Sekundární neprůhlednost",
         "hover": "Vznášet",
         "focus": "Zaměřit"
     },
     "inputs": {
-        "name": "Jméno",
+        "name": "Název",
         "url": "URL",
         "method": "Metoda",
         "contentType": "Typ obsahu",
@@ -382,7 +384,7 @@
         "pre_chorus": "Před-Refrén",
         "chorus": "Refrén",
         "break": "Výpustka",
-        "tag": "Štítek",
+        "tag": "Závěrečná fráze",
         "bridge": "Bridge",
         "outro": "Outro"
     },
@@ -414,7 +416,7 @@
         "import": "Import",
         "songbeamer_import": "Import Songbeameru",
         "export": "Export",
-        "importing": "Importování",
+        "importing": "Importování...",
         "import_scripture": "Nahrát Bibli",
         "player": "Přehrávač",
         "edit_event": "Upravit událost",
@@ -422,6 +424,7 @@
         "history": "Historie",
         "action": "Akce",
         "category_action": "Akce kategorie",
+        "user_data_overwrite": "Existující data nalezeny",
         "connect": "Připojit",
         "cloud_update": "Synchonizovat s Cloudem",
         "cloud_method": "Umístění dat",
@@ -430,6 +433,7 @@
         "manage_icons": "Spravovat ikony",
         "manage_colors": "Spravovat barvy",
         "choose_camera": "Vyber kameru",
+        "manage_tags": "Spravovat štítky",
         "initialize": "Vítejte ve FreeShow",
         "unsaved": "Určitě chceš opustit FreeShow?",
         "cancel": "Ukončit",
@@ -441,7 +445,7 @@
         "save_quit": "Uložit a ukončit"
     },
     "toast": {
-        "saving": "Ukládám...",
+        "saving": "Ukládání...",
         "saved": "Uloženo",
         "error_media": "Nelze získat média.",
         "empty_styles": "Žádné styly",
@@ -466,6 +470,7 @@
         "deleted_cache": "Mezipamět náhledu média odstaněna.",
         "no_songswords_easyworship": "Soubor SongsWords.db nenalezen.",
         "delete_shows_empty": "Žadné prezentace k odstranění",
+        "output_capture_enabled": "Nahrávání obrazovky výstupu spuštěno, toto může způsobit potíže s výkonem. Používat pouze v případě potřeby!",
         "midi_no_project": "Byl spuštěn spouštěč pro změnu projektu, ale nebyl nalezen žádný projekt v rejstříku:",
         "midi_no_show": "Byl přijat signál pro zahájení snímku, ale žádnou aktivní prezentaci.",
         "midi_no_slide": "Byl spuštěn spouštěč pro zahájení snímku, ale nebyl nalezen žádný snímek v rejstříku:",
@@ -494,7 +499,7 @@
         "event": "Nová událost"
     },
     "show": {
-        "name": "Jméno",
+        "name": "Název",
         "category": "Kategorie",
         "new_layout": "Nové rozložení",
         "grid": "Mřížkové zobrazení",
@@ -528,6 +533,7 @@
         "view_private": "Zobrazit soukromé",
         "import": "Importovat",
         "export": "Exportovat",
+        "imported": "Importováno!",
         "duplicate": "Duplikovat",
         "delete": "Smazat",
         "delete_slide": "Smazat snímek",
@@ -558,8 +564,10 @@
         "reset": "Resetovat",
         "create_template": "Vytvořit šablonu",
         "project_template_tip": "Vytvořit nový projekt z této šablony",
+        "pdf_single_page": "Renderovat jako jeden dokument",
         "convert_to_images": "Převést na obrázky",
         "converting": "Převádění...",
+        "closing": "Zavírání aplikace...",
         "remove_template_from_show": "Odstranit šablonu z prezentace",
         "reset_defaults": "Obnovit výchozí nastavení",
         "to_all": "Aplikovat na vše",
@@ -734,6 +742,7 @@
     "export": {
         "export": "Export",
         "export_as": "Exportovat {} jako",
+        "exporting": "Exportování...",
         "exported": "Exportováno!",
         "oneFile": "Jeden soubor",
         "selected_shows": "Vybrané prezentace",
@@ -741,6 +750,7 @@
         "all_shows": "Všechny prezentace",
         "all_projects": "Všechny projekty",
         "project": "Projekt",
+        "include_media": "Zahrnout soubory médií",
         "preview": "Náhled",
         "title": "Název",
         "metadata": "Metadata",
@@ -767,11 +777,12 @@
         "changeGroup": "Změnit skupinu",
         "createNew": "Vytvořit nový",
         "selectAll": "Vybrat vše",
-        "force_outputs": "Vynutit výstupy",
+        "force_outputs": "Zobrazit výstupy",
         "align_with_screen": "Srovnat s obrazovkou",
         "toggle_output": "Přepnout výstup",
         "move_to_front": "Přesunout vpřed",
         "hide_from_preview": "Skrýt z náhledu",
+        "enable_preview": "Zapnout náhled",
         "lock_to_output": "Zamknout k výstupu",
         "place_under_slide": "Umístit pod snímek",
         "toggle_clock": "Přepnout hodiny",
@@ -809,17 +820,19 @@
         "color": "Barva",
         "accent_color": "Nádech barvy",
         "background_color": "Barva pozadí",
-        "background_opacity": "Opacita pozadí",
+        "background_opacity": "Průhlednost pozadí",
         "background_image": "Obrázek pozadí",
         "background_media": "Média pozadí",
         "overlay_content": "Přidat obsah překrytí",
         "different_first_template": "Vlastní šablona na prvním snímku",
+        "max_lines_per_slide": "Max řádků za snímek",
         "media_fit": "Vmístit média",
         "one_letter": "Režim jednoho písmene",
         "sub_indexes": "Pod-rejstříky",
         "size": "Velikost",
         "max_lines": "Maximum řádků",
         "invert_items": "Invertovat předměty",
+        "list": "Seznam",
         "chords": "Akordy",
         "transpose": "Transponovat",
         "auto_size": "Automatická velikost",
@@ -843,6 +856,7 @@
         "outline": "Obrys",
         "shadow": "Stín",
         "shadow_inset": "Vnitřní stín",
+        "offset": "Odsazení",
         "offsetX": "Posun X",
         "offsetY": "Posun Y",
         "blur": "Rozmazání",
@@ -889,7 +903,6 @@
     },
     "items": {
         "text": "Textové pole",
-        "list": "Seznam",
         "media": "Média",
         "image": "Obrázek",
         "camera": "Kamera",
@@ -1062,6 +1075,7 @@
         "manual_input_hint": "Nelze najít obraz? Klikni zde pro manuální změnu pozice.",
         "manual_drag_hint": "Můžeš také držet ctrl/cmd nad aktivním výstupovým oknem pro manuální přetáhnutí.",
         "allow_main_screen": "Povolit vlastní pozici a velikost výstupu",
+        "edge_blending": "Prolnutí okrajů",
         "identify_screens": "Identifikovat obrazovky",
         "new_output": "Nový výstup",
         "normal": "Normální",
@@ -1088,7 +1102,7 @@
         "auto_shortcut_first_letter": "Automatická zkratka k prvnímu písmenu v textu",
         "auto_output": "Aktivovat výstupní obraz na spuštění",
         "hide_cursor_in_output": "Skrýt kursor ve výstupu",
-        "clear_media_when_finished": "Odstranit po přehrátí média",
+        "clear_media_when_finished": "Odstranit média po přehrátí",
         "disable_presenter_controller_keys": "Vypnout klávesy ovladače prezentace",
         "default_project_name": "Výchozí název projektu",
         "audio_fade_duration": "Trvání zeslábnutí audia",
@@ -1111,11 +1125,15 @@
         "show_location": "Zobrazit lokaci",
         "data_location": "Lokace dat",
         "user_data_location": "Uložit nastavení uživatele do 'Lokace dat'",
+        "user_data_exists": "Nalezeny existující data ve vlastní lokaci, přejete si přepsat?",
+        "user_data_yes": "Ano, zachovat aktuální data",
+        "user_data_no": "Ne, importovat aktuální data",
         "popup_before_close": "Aktivovat zavírání vyskakovacích oken pro potvrzení",
         "disable_hardware_acceleration": "Vypnout hardwarovou akceleraci",
         "restart_for_change": "Musíte restartovat program, aby se změna projevila!",
         "font": "Font",
         "font_family": "Rodina fontu",
+        "font_style": "Styl fontu",
         "font_size": "Velikost fontu",
         "border_radius": "Dosah okraje",
         "colors": "Barvy",
@@ -1152,7 +1170,8 @@
     },
     "sort": {
         "sort_by": "Třídit podle",
-        "name": "Jméno",
+        "name": "Název",
+        "name_des": "Název Sestupně",
         "date": "Datum",
         "size": "Velikost",
         "type": "Typ",
@@ -1162,7 +1181,7 @@
         "type": "Typ",
         "event": "Událost",
         "schedule_action": "Naplánovat akci",
-        "name": "Jméno",
+        "name": "Název",
         "color": "Barva",
         "time": "Čas",
         "from_date": "Od data",
diff --git a/public/lang/en.json b/public/lang/en.json
index 257c6a67..8321c641 100644
--- a/public/lang/en.json
+++ b/public/lang/en.json
@@ -148,6 +148,7 @@
         "overlays": "Clear overlays",
         "audio": "Clear audio",
         "nextTimer": "Clear next slide timer",
+        "timer": "Clear timer",
         "drawing": "Clear drawing"
     },
     "remove": {
@@ -400,6 +401,7 @@
         "trigger": "Trigger",
         "audio_stream": "Audio stream",
         "transition": "Transition",
+        "media_fit": "Change media fit",
         "delete_show": "Delete show",
         "delete_show_confirmation": "Are you sure you want to delete",
         "delete_duplicated_shows": "Delete duplicated shows",
@@ -413,6 +415,7 @@
         "animate": "Animate",
         "translate": "Localization",
         "next_timer": "Next slide timer",
+        "display_duration": "Display duration",
         "import": "Import",
         "songbeamer_import": "Songbeamer Import",
         "export": "Export",
@@ -422,6 +425,7 @@
         "edit_event": "Edit event",
         "about": "About",
         "history": "History",
+        "manage_emitters": "Manage emitters",
         "action": "Action",
         "category_action": "Category action",
         "user_data_overwrite": "Found existing data",
@@ -578,6 +582,7 @@
         "unmute": "Unmute",
         "increase_volume": "Increase volume",
         "decrease_volume": "Decrease volume",
+        "manage_subtitles": "Manage subtitles",
         "toggle_time_marker": "Toggle time markers",
         "add_time_marker": "Add time marker",
         "bind_to": "Specific outputs",
@@ -681,8 +686,10 @@
         "start_trigger": "Start trigger",
         "run_action": "Run action",
         "toggle_action": "Toggle action",
+        "emit_data": "Emit data",
         "send_rest_command": "Send HTTP-Request",
         "custom_activation": "Custom activation",
+        "any": "Any",
         "activate_on_startup": "Activate on startup",
         "activate_save": "Activate on save",
         "activate_slide_clicked": "Activate on slide click",
@@ -952,6 +959,7 @@
         "to_event": "Time until event",
         "counter": "Countdown",
         "time": "Time",
+        "hours": "Hours",
         "minutes": "Minutes",
         "seconds": "Seconds",
         "from": "From",
@@ -971,7 +979,9 @@
         "type": "Type",
         "digital": "Digital",
         "analog": "Analog",
-        "seconds": "Seconds"
+        "seconds": "Seconds",
+        "custom": "Custom",
+        "show_time": "Display time"
     },
     "captions": {
         "info": "Please click the URL to open in your browser if you haven't already, or open it on any other device! Make sure to give access to your microphone, and use Google Chrome for the best performance.",
@@ -1004,6 +1014,14 @@
         "tip_action": "To activate specific slides, right click any slide and choose the midi in action.",
         "tip_index_by_velocity": "Index is determined by the received velocity, starting at 0."
     },
+    "emitters": {
+        "emitter": "Emitter",
+        "tip": "Create emit templates to easily send specific messages.",
+        "signal": "Signal",
+        "message_template": "Message template",
+        "message_templates": "Message templates",
+        "inputs": "Inputs"
+    },
     "draw": {
         "focus": "Focus",
         "pointer": "Pointer",
diff --git a/public/lang/en_GB.json b/public/lang/en_GB.json
index 67a77a1a..adc95543 100644
--- a/public/lang/en_GB.json
+++ b/public/lang/en_GB.json
@@ -38,7 +38,10 @@
         "top": "Top",
         "right": "Right",
         "bottom": "Bottom",
-        "left": "Left"
+        "left": "Left",
+        "centered": "Centered",
+        "edge_blending_tip": "Blend together multiple outputs/projectors for a more seamless transition",
+        "cropping_tip": "Fine adjust the window content position by cropping the sides"
     },
     "about": {
         "check_updates": "Look for updates",
@@ -173,7 +176,6 @@
         "volume": "Volume",
         "gain": "Gain",
         "speed": "Speed",
-        "show": "Show",
         "flip": "Flip",
         "flip_horizontally": "Flip horizontally",
         "flip_vertically": "Flip vertically",
@@ -317,7 +319,7 @@
         "primary-darkest": "Primary darkest",
         "text": "Text",
         "textInvert": "Inverted text",
-        "secondary-text": "Secondary text",
+        "secondary-text": "Selections",
         "secondary": "Secondary",
         "secondary-opacity": "Secondary opacity",
         "hover": "Hover",
@@ -414,7 +416,7 @@
         "import": "Import",
         "songbeamer_import": "Songbeamer Import",
         "export": "Export",
-        "importing": "Importing",
+        "importing": "Importing...",
         "import_scripture": "Import scripture",
         "player": "Player",
         "edit_event": "Edit event",
@@ -422,6 +424,7 @@
         "history": "History",
         "action": "Action",
         "category_action": "Category action",
+        "user_data_overwrite": "Found existing data",
         "connect": "Connect",
         "cloud_update": "Syncing with cloud",
         "cloud_method": "Data location",
@@ -430,6 +433,7 @@
         "manage_icons": "Manage icons",
         "manage_colors": "Manage colours",
         "choose_camera": "Choose camera",
+        "manage_tags": "Manage tags",
         "initialize": "Welcome to FreeShow",
         "unsaved": "Are you sure you want to quit?",
         "cancel": "Cancel",
@@ -466,6 +470,7 @@
         "deleted_cache": "Deleted media thumbnail cache.",
         "no_songswords_easyworship": "Missing SongsWords.db file.",
         "delete_shows_empty": "No shows to delete.",
+        "output_capture_enabled": "Output screen capture enabled, this may cause performance issues. Only use if needed!",
         "midi_no_project": "Received trigger to change project, but no project found at index:",
         "midi_no_show": "Received trigger to start slide, but no show active.",
         "midi_no_slide": "Received trigger to start slide, but no slide found at index:",
@@ -528,6 +533,7 @@
         "view_private": "Show private",
         "import": "Import",
         "export": "Export",
+        "imported": "Imported!",
         "duplicate": "Duplicate",
         "delete": "Delete",
         "delete_slide": "Delete slide",
@@ -558,8 +564,10 @@
         "reset": "Reset",
         "create_template": "Create template",
         "project_template_tip": "Create a new project from this template",
+        "pdf_single_page": "Render as one document",
         "convert_to_images": "Convert to images",
         "converting": "Converting...",
+        "closing": "Closing app...",
         "remove_template_from_show": "Remove template from show",
         "reset_defaults": "Reset defaults",
         "to_all": "Apply to all",
@@ -734,6 +742,7 @@
     "export": {
         "export": "Export",
         "export_as": "Export {} as",
+        "exporting": "Exporting...",
         "exported": "Exported!",
         "oneFile": "One file",
         "selected_shows": "Selected shows",
@@ -741,6 +750,7 @@
         "all_shows": "All shows",
         "all_projects": "All projects",
         "project": "Project",
+        "include_media": "Include media files",
         "preview": "Preview",
         "title": "Title",
         "metadata": "Metadata",
@@ -772,6 +782,7 @@
         "toggle_output": "Toggle output",
         "move_to_front": "Move to front",
         "hide_from_preview": "Hide from preview",
+        "enable_preview": "Enable preview",
         "lock_to_output": "Lock to output",
         "place_under_slide": "Place under slide",
         "toggle_clock": "Toggle clock",
@@ -814,12 +825,14 @@
         "background_media": "Background media",
         "overlay_content": "Add overlay content",
         "different_first_template": "Custom template on first slide",
+        "max_lines_per_slide": "Max lines per slide",
         "media_fit": "Media fit",
         "one_letter": "One letter mode",
         "sub_indexes": "Sub indexes",
         "size": "Size",
         "max_lines": "Max lines",
         "invert_items": "Invert items",
+        "list": "List",
         "chords": "Chords",
         "transpose": "Transpose",
         "auto_size": "Auto size",
@@ -843,6 +856,7 @@
         "outline": "Outline",
         "shadow": "Shadow",
         "shadow_inset": "Shadow inset",
+        "offset": "Offset",
         "offsetX": "Offset X",
         "offsetY": "Offset Y",
         "blur": "Blur",
@@ -889,7 +903,6 @@
     },
     "items": {
         "text": "Textbox",
-        "list": "List",
         "media": "Media",
         "image": "Image",
         "camera": "Camera",
@@ -1062,6 +1075,7 @@
         "manual_input_hint": "Can't find the display? Click here to manually change the position.",
         "manual_drag_hint": "You can also hold ctrl/cmd over an active output window to manually drag it around.",
         "allow_main_screen": "Allow custom output position & size",
+        "edge_blending": "Edge blending",
         "identify_screens": "Identify screens",
         "new_output": "New output",
         "normal": "Normal",
@@ -1111,11 +1125,15 @@
         "show_location": "Show location",
         "data_location": "Data location",
         "user_data_location": "Save user settings at 'Data location'",
+        "user_data_exists": "Found existing data at custom location, would you like to overwrite it?",
+        "user_data_yes": "Yes, keep current data",
+        "user_data_no": "No, import existing data",
         "popup_before_close": "Enable close confirmation popup",
         "disable_hardware_acceleration": "Disable hardware acceleration",
         "restart_for_change": "You have to restart the program for the change to take effect!",
         "font": "Font",
         "font_family": "Font family",
+        "font_style": "Font style",
         "font_size": "Font size",
         "border_radius": "Border radius",
         "colors": "Colours",
@@ -1153,6 +1171,7 @@
     "sort": {
         "sort_by": "Sort by",
         "name": "Name",
+        "name_des": "Name Descending",
         "date": "Date",
         "size": "Size",
         "type": "Type",
diff --git a/public/lang/en_ZM.json b/public/lang/en_ZM.json
index a1d2d2cc..cc38a511 100644
--- a/public/lang/en_ZM.json
+++ b/public/lang/en_ZM.json
@@ -38,7 +38,10 @@
         "top": "Top",
         "right": "Right",
         "bottom": "Bottom",
-        "left": "Left"
+        "left": "Left",
+        "centered": "Centered",
+        "edge_blending_tip": "Blend together multiple outputs/projectors for a more seamless transition",
+        "cropping_tip": "Fine adjust the window content position by cropping the sides"
     },
     "about": {
         "check_updates": "Look for updates",
@@ -173,7 +176,6 @@
         "volume": "Volume",
         "gain": "Gain",
         "speed": "Speed",
-        "show": "Show",
         "flip": "Flip",
         "flip_horizontally": "Flip horizontally",
         "flip_vertically": "Flip vertically",
@@ -317,7 +319,7 @@
         "primary-darkest": "Primary darkest",
         "text": "Text",
         "textInvert": "Inverted text",
-        "secondary-text": "Secondary text",
+        "secondary-text": "Selections",
         "secondary": "Secondary",
         "secondary-opacity": "Secondary opacity",
         "hover": "Hover",
@@ -414,7 +416,7 @@
         "import": "Import",
         "songbeamer_import": "Songbeamer Import",
         "export": "Export",
-        "importing": "Importing",
+        "importing": "Importing...",
         "import_scripture": "Import scripture",
         "player": "Player",
         "edit_event": "Edit event",
@@ -422,6 +424,7 @@
         "history": "History",
         "action": "Action",
         "category_action": "Category action",
+        "user_data_overwrite": "Found existing data",
         "connect": "Connect",
         "cloud_update": "Syncing with cloud",
         "cloud_method": "Data location",
@@ -430,6 +433,7 @@
         "manage_icons": "Manage icons",
         "manage_colors": "Manage colours",
         "choose_camera": "Choose camera",
+        "manage_tags": "Manage tags",
         "initialize": "Welcome to FreeShow",
         "unsaved": "Are you sure you want to quit?",
         "cancel": "Cancel",
@@ -466,6 +470,7 @@
         "deleted_cache": "Deleted media thumbnail cache.",
         "no_songswords_easyworship": "Missing SongsWords.db file.",
         "delete_shows_empty": "No shows to delete.",
+        "output_capture_enabled": "Output screen capture enabled, this may cause performance issues. Only use if needed!",
         "midi_no_project": "Received trigger to change project, but no project found at index:",
         "midi_no_show": "Received trigger to start slide, but no show active.",
         "midi_no_slide": "Received trigger to start slide, but no slide found at index:",
@@ -528,6 +533,7 @@
         "view_private": "Show private",
         "import": "Import",
         "export": "Export",
+        "imported": "Imported!",
         "duplicate": "Duplicate",
         "delete": "Delete",
         "delete_slide": "Delete slide",
@@ -558,8 +564,10 @@
         "reset": "Reset",
         "create_template": "Create template",
         "project_template_tip": "Create a new project from this template",
+        "pdf_single_page": "Render as one document",
         "convert_to_images": "Convert to images",
         "converting": "Converting...",
+        "closing": "Closing app...",
         "remove_template_from_show": "Remove template from show",
         "reset_defaults": "Reset defaults",
         "to_all": "Apply to all",
@@ -734,6 +742,7 @@
     "export": {
         "export": "Export",
         "export_as": "Export {} as",
+        "exporting": "Exporting...",
         "exported": "Exported!",
         "oneFile": "One file",
         "selected_shows": "Selected shows",
@@ -741,6 +750,7 @@
         "all_shows": "All shows",
         "all_projects": "All projects",
         "project": "Project",
+        "include_media": "Include media files",
         "preview": "Preview",
         "title": "Title",
         "metadata": "Metadata",
@@ -772,6 +782,7 @@
         "toggle_output": "Toggle output",
         "move_to_front": "Move to front",
         "hide_from_preview": "Hide from preview",
+        "enable_preview": "Enable preview",
         "lock_to_output": "Lock to output",
         "place_under_slide": "Place under slide",
         "toggle_clock": "Toggle clock",
@@ -814,12 +825,14 @@
         "background_media": "Background media",
         "overlay_content": "Add overlay content",
         "different_first_template": "Custom template on first slide",
+        "max_lines_per_slide": "Max lines per slide",
         "media_fit": "Media fit",
         "one_letter": "One letter mode",
         "sub_indexes": "Sub indexes",
         "size": "Size",
         "max_lines": "Max lines",
         "invert_items": "Invert items",
+        "list": "List",
         "chords": "Chords",
         "transpose": "Transpose",
         "auto_size": "Auto size",
@@ -843,6 +856,7 @@
         "outline": "Outline",
         "shadow": "Shadow",
         "shadow_inset": "Shadow inset",
+        "offset": "Offset",
         "offsetX": "Offset X",
         "offsetY": "Offset Y",
         "blur": "Blur",
@@ -889,7 +903,6 @@
     },
     "items": {
         "text": "Textbox",
-        "list": "List",
         "media": "Media",
         "image": "Image",
         "camera": "Camera",
@@ -1062,6 +1075,7 @@
         "manual_input_hint": "Can't find the display? Click here to manually change the position.",
         "manual_drag_hint": "You can also hold ctrl/cmd over an active output window to manually drag it around.",
         "allow_main_screen": "Allow custom output position & size",
+        "edge_blending": "Edge blending",
         "identify_screens": "Identify screens",
         "new_output": "New output",
         "normal": "Normal",
@@ -1111,11 +1125,15 @@
         "show_location": "Show location",
         "data_location": "Data location",
         "user_data_location": "Save user settings at 'Data location'",
+        "user_data_exists": "Found existing data at custom location, would you like to overwrite it?",
+        "user_data_yes": "Yes, keep current data",
+        "user_data_no": "No, import existing data",
         "popup_before_close": "Enable close confirmation popup",
         "disable_hardware_acceleration": "Disable hardware acceleration",
         "restart_for_change": "You have to restart the program for the change to take effect!",
         "font": "Font",
         "font_family": "Font family",
+        "font_style": "Font style",
         "font_size": "Font size",
         "border_radius": "Border radius",
         "colors": "Colours",
@@ -1153,6 +1171,7 @@
     "sort": {
         "sort_by": "Sort by",
         "name": "Name",
+        "name_des": "Name Descending",
         "date": "Date",
         "size": "Size",
         "type": "Type",
diff --git a/public/lang/es.json b/public/lang/es.json
index 26345ddb..b82f9950 100644
--- a/public/lang/es.json
+++ b/public/lang/es.json
@@ -38,7 +38,10 @@
         "top": "Arriba",
         "right": "Derecha",
         "bottom": "Abajo",
-        "left": "Izquierda"
+        "left": "Izquierda",
+        "centered": "Centrado",
+        "edge_blending_tip": "Combine múltiples salidas/proyectores para lograr una transición más fluida",
+        "cropping_tip": "Ajuste con precisión la posición del contenido de la ventana recortando los lados"
     },
     "about": {
         "check_updates": "Buscar actualizaciones",
@@ -163,6 +166,7 @@
         "toggle_shuffle": "Activar reproducción aleatoria",
         "next": "Siguiente",
         "previous": "Anterior",
+        "play_no_audio": "Reproducir sin audio",
         "play_no_filters": "Reproducir sin filtros",
         "favourite": "Favoritos",
         "pause": "Pausar",
@@ -172,7 +176,6 @@
         "volume": "Volumen",
         "gain": "Ganancia",
         "speed": "Velocidad",
-        "show": "Mostrar",
         "flip": "Voltear",
         "flip_horizontally": "Voltear horizontalmente",
         "flip_vertically": "Voltear verticalmente",
@@ -194,7 +197,10 @@
         "playlist_settings": "Ajuste de Lista de Reproducción",
         "custom_output": "Salida de audio personalizada",
         "mute_when_video_plays": "Silenciar cuando un vídeo se reproduce",
+        "allow_gaining": "Permitir ganancia",
+        "allow_gaining_tip": "Permitir configurar el volumen por encima del 100% (Puede causar distorsión)",
         "pre_fader_volume_meter": "Medidor de volumen pre-fader",
+        "mixer": "Mezclador",
         "metronome": "Metrónomo",
         "toggle_metronome": "Activar metrónomo",
         "tempo": "Tempo",
@@ -269,15 +275,17 @@
         "ip": "No se pudo obtener la dirección IP de tu dispositivo, vaya a la configuración Wi-Fi de la computadora para encontrar tu dirección IPv4 local."
     },
     "meta": {
+        "number": "Número",
         "title": "Título",
         "artist": "Artista",
         "author": "Autor",
         "composer": "Compositor",
         "publisher": "Editor",
         "copyright": "Derechos de autor",
-        "CCLI": "Licencia (CCLI)",
+        "CCLI": "ID de Canción (CCLI)",
         "year": "Año",
         "key": "Clave",
+        "autofill": "Autocompletar",
         "message": "Mensaje",
         "message_tip": "Mostrar algo en todas las diapositivas",
         "auto_media": "Obtener metadatos del contenido multimedia",
@@ -311,7 +319,7 @@
         "primary-darkest": "Primario más oscuro",
         "text": "Texto",
         "textInvert": "Texto invertido",
-        "secondary-text": "Texto secundario",
+        "secondary-text": "Selecciones",
         "secondary": "Secundario",
         "secondary-opacity": "Opacidad de Secundario",
         "hover": "Flotar",
@@ -362,7 +370,8 @@
         "music": "Música",
         "offers": "Ofertas",
         "notice": "Noticia",
-        "visuals": "Ilustraciones"
+        "visuals": "Ilustraciones",
+        "action_tip": "Una acción que se activa cada vez que se presenta un programa con esta categoría."
     },
     "groups": {
         "current": "Actual",
@@ -400,19 +409,22 @@
         "change_output_values": "Cambiar valores de salida",
         "choose_chord": "Elige acorde",
         "set_time": "Establecer tiempo",
+        "slide_shortcut": "Atajo de Diapositiva",
         "animate": "Animar",
         "translate": "Localización",
         "next_timer": "Temporizador de siguiente diapositiva",
         "import": "Importar",
         "songbeamer_import": "Importación de Songbeamer",
         "export": "Exportar",
-        "importing": "Importando",
+        "importing": "Importando...",
         "import_scripture": "Importar Escritura",
         "player": "Reproductor",
         "edit_event": "Editar evento",
         "about": "Acerca de",
         "history": "Historial",
         "action": "Acción",
+        "category_action": "Acción de Categoría",
+        "user_data_overwrite": "Se encontraron datos existentes",
         "connect": "Conectar",
         "cloud_update": "Sincronizando con la nube",
         "cloud_method": "Ubicación de Datos",
@@ -421,6 +433,7 @@
         "manage_icons": "Gestionar iconos",
         "manage_colors": "Gestionar colores",
         "choose_camera": "Elegir cámara",
+        "manage_tags": "Gestionar etiquetas",
         "initialize": "Bienvenido a FreeShow",
         "unsaved": "¿Estás seguro de que quieres salir?",
         "cancel": "Cancelar",
@@ -457,6 +470,7 @@
         "deleted_cache": "Se eliminó el caché de miniaturas de medios.",
         "no_songswords_easyworship": "Falta el archivo SongsWords.db.",
         "delete_shows_empty": "No hay programas para eliminar.",
+        "output_capture_enabled": "Captura de la pantalla de salida habilitada, ésto puede causar problemas de rendimiento. ¡Solo úselo si es necesario!",
         "midi_no_project": "Se recibió un disparador para cambiar el proyecto, pero no se encontró ningún proyecto en el índice:",
         "midi_no_show": "Se recibió el disparador para iniciar la diapositiva, pero no el programa activo.",
         "midi_no_slide": "Se recibió el disparador para iniciar la diapositiva, pero no se encontró ninguna diapositiva en el índice:",
@@ -519,6 +533,7 @@
         "view_private": "Mostrar privado",
         "import": "Importar",
         "export": "Exportar",
+        "imported": "¡Importado!",
         "duplicate": "Duplicar",
         "delete": "Eliminar",
         "delete_slide": "Eliminar diapositiva",
@@ -547,8 +562,12 @@
         "zoomIn": "Acercarse",
         "zoomOut": "Alejarse",
         "reset": "Reiniciar",
+        "create_template": "Crear Plantilla",
+        "project_template_tip": "Crear un nuevo proyecto a partir esta plantilla",
+        "pdf_single_page": "Renderizar como un solo documento",
         "convert_to_images": "Convertir a imágenes",
         "converting": "Convirtiendo...",
+        "closing": "Cerrando aplicación...",
         "remove_template_from_show": "Quitar plantilla del programa",
         "reset_defaults": "Restablecer valores predeterminados",
         "to_all": "Aplicar a todo",
@@ -608,6 +627,8 @@
         "set_key": "Establecer clave",
         "custom_key": "Establecer valor personalizado",
         "select_chord": "Seleccionar este acorde",
+        "play_with_shortcut": "Activar con atajo",
+        "press_to_assign": "Presione cualquier tecla de letra para asignar",
         "play_on_midi": "Activar en la señal MIDI",
         "play_on_midi_tip": "Activar esta diapositiva específica al recibir la señal MIDI elegida",
         "send_midi": "Enviar señal MIDI",
@@ -624,6 +645,7 @@
         "next_after_media": "Próximo en los medios terminados",
         "remove_media": "Quitar medios",
         "remove_layers": "Quitar capas",
+        "toggle_checkbox_tip": "La acción se alternará si la casilla de verificación no cambia",
         "start_recording": "Iniciar grabación",
         "stop_recording": "Parar grabación",
         "export_recording": "Detener la grabación y exportar",
@@ -632,6 +654,7 @@
         "previous_project_item": "Anterior elemento del proyecto",
         "index_select_project_item": "Seleccionar elemento del proyecto por índice",
         "name_select_show": "Seleccionar programa por nombre",
+        "set_template_active": "Establecer plantilla en el programa activo",
         "random_slide": "Reproducir diapositiva aleatoria",
         "index_select_slide": "Seleccionar diapositiva por índice",
         "name_select_slide": "Seleccionar diapositiva por nombre",
@@ -672,6 +695,7 @@
         "activate_slide_cleared": "Activar cuando se borra la diapositiva",
         "activate_background_cleared": "Activar cuando se borra el fondo",
         "activate_show_created": "Activar cuando se crea un programa",
+        "activate_show_opened": "Activar al abrir el programa",
         "activate_audio_playlist_ended": "Activar cuando la lista de reproducción de audio haya finalizado"
     },
     "recording": {
@@ -679,7 +703,9 @@
         "tip": "Graba y reproduce la duración de las diapositivas. Sincroniza con una pista de audio en la primera diapositiva.",
         "layout_changed": "¡El diseño cambió desde la última grabación!",
         "audio_synced": "¡Sincronizado con el audio!",
-        "start": "Iniciar grabación de diapositiva"
+        "start": "Iniciar grabación de diapositiva",
+        "use_duration": "Usar tiempo de duración",
+        "use_duration_tip": "Utilice el tiempo de duración en lugar de la hora de la marca de tiempo"
     },
     "animate": {
         "change": "Cambiar",
@@ -716,6 +742,7 @@
     "export": {
         "export": "Exportar",
         "export_as": "Exportar {} como",
+        "exporting": "Exportando...",
         "exported": "Exportado",
         "oneFile": "Un archivo",
         "selected_shows": "Programas seleccionados",
@@ -723,6 +750,7 @@
         "all_shows": "Todos los programas",
         "all_projects": "Todos los proyectos",
         "project": "Proyecto",
+        "include_media": "Incluir archivos de medios",
         "preview": "Vista previa",
         "title": "Título",
         "metadata": "Metadato",
@@ -738,6 +766,7 @@
     },
     "context": {
         "enabledTabs": "Mostrar/ocultar pestañas",
+        "setTag": "Establecer etiqueta",
         "filterByTags": "Filtrar por etiquetas",
         "addToProject": "Agregar al proyecto",
         "add_to_show": "Agregar al programa",
@@ -753,6 +782,7 @@
         "toggle_output": "Alternar salida",
         "move_to_front": "Mover al frente",
         "hide_from_preview": "Ocultar de la vista previa",
+        "enable_preview": "Habilitar vista previa",
         "lock_to_output": "Bloquear a la salida",
         "place_under_slide": "Colocar debajo de la diapositiva",
         "toggle_clock": "Alternar reloj",
@@ -795,10 +825,14 @@
         "background_media": "Medios de fondo",
         "overlay_content": "Añadir contenido superpuesto",
         "different_first_template": "Plantilla personalizada en la primera diapositiva",
+        "max_lines_per_slide": "Máximo de líneas por diapositiva",
         "media_fit": "Ajuste de medios",
+        "one_letter": "Modo de una letra",
+        "sub_indexes": "Subíndices",
         "size": "Tamaño",
         "max_lines": "Máximo de líneas",
         "invert_items": "Invertir elementos",
+        "list": "Lista",
         "chords": "Acordes",
         "transpose": "Transponer",
         "auto_size": "Tamaño automático",
@@ -822,6 +856,7 @@
         "outline": "Contorno",
         "shadow": "Sombra",
         "shadow_inset": "Añadir sombra",
+        "offset": "Desplazamiento",
         "offsetX": "Desplazamiento horizontal",
         "offsetY": "Desplazamiento vertical",
         "blur": "Desenfocar",
@@ -868,7 +903,6 @@
     },
     "items": {
         "text": "Cuadro de texto",
-        "list": "Lista",
         "media": "Medios",
         "image": "Imagen",
         "camera": "Cámara",
@@ -916,6 +950,7 @@
         "to_event": "Tiempo hasta el evento",
         "counter": "Cuenta regresiva",
         "time": "Hora",
+        "minutes": "Minutos",
         "seconds": "Segundos",
         "from": "Desde",
         "to": "Hacia",
@@ -1040,6 +1075,7 @@
         "manual_input_hint": "¿No puede encontrar la pantalla? Haga clic aquí para cambiar la posición manualmente.",
         "manual_drag_hint": "También puedes mantener presionada la tecla Ctrl/Cmd sobre una ventana de salida activa para arrastrarla manualmente.",
         "allow_main_screen": "Permitir posición y tamaño de salida personalizados",
+        "edge_blending": "Combinación de bordes",
         "identify_screens": "Identificar pantallas",
         "new_output": "Nueva salida",
         "normal": "Normal",
@@ -1063,6 +1099,7 @@
         "group_numbers": "Números de grupo",
         "full_colors": "Grupo de colores de alto contraste",
         "slide_number_keys": "Reproducir diapositivas con las teclas numéricas",
+        "auto_shortcut_first_letter": "Atajo automático a la primera letra en el texto",
         "auto_output": "Muestra la ventana de salida en la pantalla de inicio",
         "hide_cursor_in_output": "Ocultar el cursor en la salida",
         "clear_media_when_finished": "Borrar los medios cuando termine",
@@ -1088,11 +1125,15 @@
         "show_location": "Mostrar ubicación",
         "data_location": "Ubicación de los datos",
         "user_data_location": "Guardar la configuración del usuario en 'Ubicación de datos'",
+        "user_data_exists": "Se encontraron datos existentes en una ubicación personalizada, ¿quieres sobrescribirlos?",
+        "user_data_yes": "Si, mantener los datos actuales",
+        "user_data_no": "No, importar datos existentes",
         "popup_before_close": "Habilitar ventana de confirmación de cierre",
         "disable_hardware_acceleration": "Deshabilitar aceleración por hardware",
         "restart_for_change": "¡Tienes que reiniciar el programa para que el cambio surta efecto!",
         "font": "Fuente",
         "font_family": "Familia de fuentes",
+        "font_style": "Estilo de fuente",
         "font_size": "Tamaño de fuente",
         "border_radius": "Radio del borde",
         "colors": "Colores",
@@ -1124,11 +1165,13 @@
         "auto": "Automático",
         "optimized": "Optimizado",
         "reduced": "Reducido",
-        "full": "Lleno"
+        "full": "Lleno",
+        "section_trigger_action": "Activar acción al navegar la presentación hacia una sección"
     },
     "sort": {
         "sort_by": "Ordenar por",
         "name": "Nombre",
+        "name_des": "Nombre descendente",
         "date": "Fecha",
         "size": "Tamaño",
         "type": "Tipo",
@@ -1172,6 +1215,7 @@
         "reference": "Mostrar referencia",
         "split_reference": "Referencia dividida",
         "combine_with_text": "Combinar con el texto",
+        "first_slide_reference": "Referencia en la primera diapositiva",
         "reference_at_bottom": "Mover hacia abajo",
         "red_jesus": "Palabra Jesús en letras rojas",
         "search": "Buscar en la Biblia"
diff --git a/public/lang/pt_BR.json b/public/lang/pt_BR.json
index 6731eded..db77afa5 100644
--- a/public/lang/pt_BR.json
+++ b/public/lang/pt_BR.json
@@ -38,7 +38,10 @@
         "top": "Topo",
         "right": "Direita",
         "bottom": "Base",
-        "left": "Esquerda"
+        "left": "Esquerda",
+        "centered": "Centralizado",
+        "edge_blending_tip": "Combina várias saídas/projetores para uma transição mais suave",
+        "cropping_tip": "Ajuste fino da posição do conteúdo da janela cortando as laterais"
     },
     "about": {
         "check_updates": "Verificar por atualizações",
@@ -173,7 +176,6 @@
         "volume": "Volume",
         "gain": "Ganho",
         "speed": "Velocidade",
-        "show": "Mostrar",
         "flip": "Virar",
         "flip_horizontally": "Virar horizontalmente",
         "flip_vertically": "Virar verticalmente",
@@ -317,7 +319,7 @@
         "primary-darkest": "Primária Mais Escura",
         "text": "Texto",
         "textInvert": "Texto Invertido",
-        "secondary-text": "Texto Secundário",
+        "secondary-text": "Seleções",
         "secondary": "Secundário",
         "secondary-opacity": "Opacidade Secundária",
         "hover": "Ao passar o mouse",
@@ -414,7 +416,7 @@
         "import": "Importar",
         "songbeamer_import": "Importar de Songbeamer",
         "export": "Exportar",
-        "importing": "Importando",
+        "importing": "Importando...",
         "import_scripture": "Importar bíblia",
         "player": "Reprodutor",
         "edit_event": "Editar evento",
@@ -422,6 +424,7 @@
         "history": "Histórico",
         "action": "Ação",
         "category_action": "Ação de categoria",
+        "user_data_overwrite": "Dados existentes encontrados",
         "connect": "Conectar",
         "cloud_update": "Sincronizando com a nuvem",
         "cloud_method": "Dados",
@@ -430,6 +433,7 @@
         "manage_icons": "Gerenciar ícones",
         "manage_colors": "Gerenciar cores",
         "choose_camera": "Escolha a câmera",
+        "manage_tags": "Gerenciar tags",
         "initialize": "Seja bem-vindo ao FreeShow",
         "unsaved": "Tem certeza que deseja sair?",
         "cancel": "Cancelar",
@@ -466,6 +470,7 @@
         "deleted_cache": "Cache de thumbnails foi excluído.",
         "no_songswords_easyworship": "Arquivo SongsWords.db não encontrado.",
         "delete_shows_empty": "Sem shows para deletar.",
+        "output_capture_enabled": "Captura de tela de saída habilitada, isso pode causar problemas de desempenho. Use somente se necessário!",
         "midi_no_project": "Trigger recebido para mudar de projeto, mas nenhum projeto foi encontrado no índice:",
         "midi_no_show": "Trigger recebido para iniciar slide, mas nenhum Show está ativo.",
         "midi_no_slide": "Trigger recebido para iniciar slide, mas nenhum slide foi encontrado no índice:",
@@ -528,6 +533,7 @@
         "view_private": "Mostrar Show privado",
         "import": "Importar",
         "export": "Exportar",
+        "imported": "Importado!",
         "duplicate": "Duplicar",
         "delete": "Excluir",
         "delete_slide": "Excluir slide",
@@ -558,8 +564,10 @@
         "reset": "Redefinir",
         "create_template": "Criar modelo de projeto",
         "project_template_tip": "Cria um novo projeto a partir deste modelo",
+        "pdf_single_page": "Renderizar como um documento",
         "convert_to_images": "Converter para imagens",
         "converting": "Convertendo...",
+        "closing": "Fechando app...",
         "remove_template_from_show": "Remover modelo da apresentação",
         "reset_defaults": "Redefinir padrões",
         "to_all": "Aplicar a todos",
@@ -734,6 +742,7 @@
     "export": {
         "export": "Exportar",
         "export_as": "Exportar {} como",
+        "exporting": "Exportando...",
         "exported": "Exportado!",
         "oneFile": "Um arquivo",
         "selected_shows": "Apresentações selecionadas",
@@ -741,6 +750,7 @@
         "all_shows": "Todas as apresentações",
         "all_projects": "Todos os projetos",
         "project": "Projeto",
+        "include_media": "Incluir arquivos de mídia",
         "preview": "Pré-visualização",
         "title": "Título",
         "metadata": "Metadados",
@@ -772,6 +782,7 @@
         "toggle_output": "Alterar saídas",
         "move_to_front": "Mover para frente",
         "hide_from_preview": "Esconder do preview",
+        "enable_preview": "Ativar preview",
         "lock_to_output": "Travar na saída",
         "place_under_slide": "Place under slide",
         "toggle_clock": "Alternar relógio",
@@ -814,12 +825,14 @@
         "background_media": "Background",
         "overlay_content": "Adicionar conteúdo de sobreposição",
         "different_first_template": "Usar outro modelo no primeiro slide",
+        "max_lines_per_slide": "Número de linhas por slide",
         "media_fit": "Fazer mídia caber",
         "one_letter": "Modo de letra única",
         "sub_indexes": "Sub índices ",
         "size": "Tamanho",
         "max_lines": "Máximo de linhas",
         "invert_items": "Inverter items",
+        "list": "Lista",
         "chords": "Acordes",
         "transpose": "Transpor",
         "auto_size": "Tamanho automático",
@@ -843,6 +856,7 @@
         "outline": "Contorno",
         "shadow": "Sombra",
         "shadow_inset": "Sombra interna",
+        "offset": "Ajuste",
         "offsetX": "Coordenada X",
         "offsetY": "Coordenada Y",
         "blur": "Desfoque",
@@ -889,7 +903,6 @@
     },
     "items": {
         "text": "Caixa de texto",
-        "list": "Lista",
         "media": "Mídia",
         "image": "Imagem",
         "camera": "Câmera",
@@ -1062,6 +1075,7 @@
         "manual_input_hint": "Não consegue encontrar a janela de saída? Clique aqui para ajustar manualmente a posição.",
         "manual_drag_hint": "Você pode segurar ctrl/cmd sobre uma janela de saída ativa para movê-la.",
         "allow_main_screen": "Permitir posição e tamanho de saída personalizados",
+        "edge_blending": "Edge blending",
         "identify_screens": "Identificar telas",
         "new_output": "Nova saída",
         "normal": "Normal",
@@ -1111,11 +1125,15 @@
         "show_location": "Apresentações",
         "data_location": "Local dos dados",
         "user_data_location": "Salvar configurações do usuário em \"Dados\"",
+        "user_data_exists": "Há dados existentes em um local personalizado. Gostaria de substituí-los?",
+        "user_data_yes": "Sim, mantenha os arquivos atuais",
+        "user_data_no": "Não, importe os arquivos existentes",
         "popup_before_close": "Mostrar janela de confirmação ao sair",
         "disable_hardware_acceleration": "Desativar aceleração por hardware",
         "restart_for_change": "Reinicie o app para que as mudanças tenham efeito.",
         "font": "Fonte",
         "font_family": "Família de fontes",
+        "font_style": "Estilo da fonte",
         "font_size": "Tamanho da fonte",
         "border_radius": "Raio da borda",
         "colors": "Cores",
@@ -1153,6 +1171,7 @@
     "sort": {
         "sort_by": "Ordenar por",
         "name": "Nome",
+        "name_des": "Nome Decrescente",
         "date": "Data",
         "size": "Tamanho",
         "type": "Tipo",
diff --git a/public/lang/tr.json b/public/lang/tr.json
index 3d4c6cb1..3942d891 100644
--- a/public/lang/tr.json
+++ b/public/lang/tr.json
@@ -38,7 +38,10 @@
         "top": "Üst",
         "right": "Sağ",
         "bottom": "Alt",
-        "left": "Sol"
+        "left": "Sol",
+        "centered": "Ortalanmış",
+        "edge_blending_tip": "Daha sorunsuz bir geçiş için birden fazla çıkışı/projektörü bir araya getirin",
+        "cropping_tip": "Kenarları kırparak pencere içeriğinin konumunu hassas bir şekilde ayarlayın"
     },
     "about": {
         "check_updates": "Güncellemeleri ara",
@@ -163,6 +166,7 @@
         "toggle_shuffle": "Karıştırmayı değiştir",
         "next": "Sonraki",
         "previous": "Önceki",
+        "play_no_audio": "Sessiz oynat",
         "play_no_filters": "Filtresiz oyna",
         "favourite": "Favori",
         "pause": "Duraklat",
@@ -172,7 +176,6 @@
         "volume": "Volume",
         "gain": "Kazanç",
         "speed": "Hız",
-        "show": "Göster",
         "flip": "Çevir",
         "flip_horizontally": "Yatay olarak çevir",
         "flip_vertically": "Dikey olarak çevir",
@@ -194,7 +197,10 @@
         "playlist_settings": "Çalma listesi ayarları",
         "custom_output": "Özel ses çıkışı",
         "mute_when_video_plays": "Video oynatılırken sesi kapat",
+        "allow_gaining": "Kazanmaya izin ver",
+        "allow_gaining_tip": "Sesi %100'ün üzerine ayarlamaya izin verin (Bozulmaya neden olabilir)",
         "pre_fader_volume_meter": "Ön fader ses seviyesi ölçer",
+        "mixer": "Mikser",
         "metronome": "Metronom",
         "toggle_metronome": "Metronomu değiştir",
         "tempo": "Tempo",
@@ -269,15 +275,17 @@
         "ip": "Cihazınızın IP adresine ulaşılamıyor, yerel IPv4 adresinizi bulmak için bilgisayarınızın Wi-Fi ayarlarına gidin."
     },
     "meta": {
+        "number": "Sayı",
         "title": "Başlık",
         "artist": "Sanatçı",
         "author": "Yazar",
         "composer": "Besteci",
         "publisher": "Yayımcı",
         "copyright": "Telif hakkı",
-        "CCLI": "Lisans (CCLI)",
+        "CCLI": "Şarkı Kimliği (CCLI)",
         "year": "Yıl",
         "key": "Anahtar",
+        "autofill": "Otomatik doldurma",
         "message": "Mesaj",
         "message_tip": "Tüm slaytlarda bir şey göster",
         "auto_media": "Medya içeriğinden meta alın",
@@ -311,7 +319,7 @@
         "primary-darkest": "Birincil en koyu",
         "text": "Metin",
         "textInvert": "Ters metin",
-        "secondary-text": "ikincil metin",
+        "secondary-text": "Seçimler",
         "secondary": "İkincil",
         "secondary-opacity": "ikincil opaklık",
         "hover": "Fareyle üzerine gelin",
@@ -362,7 +370,8 @@
         "music": "Müzik",
         "offers": "Teklifler",
         "notice": "Bildiri",
-        "visuals": "Görseller"
+        "visuals": "Görseller",
+        "action_tip": "Bu kategoriye ait bir gösteri her sunulduğunda tetiklenen bir eylem."
     },
     "groups": {
         "current": "Akım",
@@ -400,19 +409,22 @@
         "change_output_values": "Çıkış değerlerini değiştir",
         "choose_chord": "Akoru seçin",
         "set_time": "Zamanı ayarla",
+        "slide_shortcut": "Slayt kısayolu",
         "animate": "Hareketlendir",
         "translate": "Lokalizasyon",
         "next_timer": "Sonraki slayt zamanlayıcı",
         "import": "İçeri aktar",
         "songbeamer_import": "Songbeamer İçe aktar",
         "export": "Dışarı aktar",
-        "importing": "İçe Aktarma",
+        "importing": "İçe aktarma...",
         "import_scripture": "Kutsal kitabı içe aktar",
         "player": "Player",
         "edit_event": "Etkinliği düzenle",
         "about": "Hakkında",
         "history": "Tarih",
         "action": "Eylem",
+        "category_action": "Kategori eylemi",
+        "user_data_overwrite": "Mevcut veriler bulundu",
         "connect": "Bağlan",
         "cloud_update": "Bulut ile senkronizasyon",
         "cloud_method": "Veri konumu",
@@ -421,6 +433,7 @@
         "manage_icons": "Simgeleri yönet",
         "manage_colors": "Renkleri yönet",
         "choose_camera": "Kamera seç",
+        "manage_tags": "Etiketleri yönet",
         "initialize": "FreeShow'a Hoşgeldiniz",
         "unsaved": "Bırakmak istediğine emin misin?",
         "cancel": "İptal",
@@ -457,6 +470,7 @@
         "deleted_cache": "Medya küçük resim önbelleği silindi.",
         "no_songswords_easyworship": "SongsWords.db dosyası eksik.",
         "delete_shows_empty": "Silinecek gösteri yok.",
+        "output_capture_enabled": "Çıkış ekran görüntüsü etkinleştirildi, bu performans sorunlarına neden olabilir. Sadece gerektiğinde kullanın!",
         "midi_no_project": "Projeyi değiştirmek için tetikleyici alındı, ancak dizinde proje bulunamadı:",
         "midi_no_show": "Slaytı başlatmak için tetik alındı, ancak gösteri etkin değil.",
         "midi_no_slide": "Slaytı başlatmak için tetik alındı, ancak dizinde slayt bulunamadı:",
@@ -519,6 +533,7 @@
         "view_private": "Özel göster",
         "import": "İçe aktar",
         "export": "Dışa aktar",
+        "imported": "İçe aktarıldı!",
         "duplicate": "Çoğalt",
         "delete": "Sil",
         "delete_slide": "Slaydı sil",
@@ -547,8 +562,12 @@
         "zoomIn": "Yakınlaştır",
         "zoomOut": "Uzaklaştır",
         "reset": "Sıfırla",
+        "create_template": "Şablon oluştur",
+        "project_template_tip": "Bu şablondan yeni bir proje oluşturun",
+        "pdf_single_page": "Tek bir belge olarak oluşturun",
         "convert_to_images": "Resimlere dönüştür",
         "converting": "Dönüştürülüyor...",
+        "closing": "Uygulama kapatılıyor...",
         "remove_template_from_show": "Şablonu gösteriden kaldır",
         "reset_defaults": "Varsayılanları sıfırla",
         "to_all": "Hepsine uygula",
@@ -608,6 +627,8 @@
         "set_key": "Ayar tuşu",
         "custom_key": "Özel değer ayarla",
         "select_chord": "Bu akoru seçin",
+        "play_with_shortcut": "Kısayolla etkinleştir",
+        "press_to_assign": "Atama yapmak için herhangi bir harf tuşuna basın",
         "play_on_midi": "MIDI sinyalinde etkinleştir",
         "play_on_midi_tip": "Seçilen MIDI sinyalini alırken bu özel slaydı etkinleştirin",
         "send_midi": "MIDI sinyali gönderme",
@@ -624,6 +645,7 @@
         "next_after_media": "Sonraki medya bitti",
         "remove_media": "Medyayı kaldır",
         "remove_layers": "Katmanları kaldır",
+        "toggle_checkbox_tip": "Onay kutusu değiştirilmemişse eylem geçiş yapacaktır",
         "start_recording": "Kayda başla",
         "stop_recording": "Kaydı durdur",
         "export_recording": "Kaydı durdur ve dışa aktar",
@@ -632,6 +654,7 @@
         "previous_project_item": "Önceki proje öğesi",
         "index_select_project_item": "Proje öğesini dizine göre seçme",
         "name_select_show": "Gösteriyi isme göre seçin",
+        "set_template_active": "Şablonu aktif gösteride ayarla",
         "random_slide": "Rastgele slayt oynat",
         "index_select_slide": "Dizine göre slayt seç",
         "name_select_slide": "Slaytı ada göre seçme",
@@ -672,6 +695,7 @@
         "activate_slide_cleared": "Slayt temizlendiğinde etkinleştir",
         "activate_background_cleared": "Arka plan temizlendiğinde etkinleştir",
         "activate_show_created": "Gösteri oluşturulduğunda etkinleştir",
+        "activate_show_opened": "Gösteri açıldığında etkinleştir",
         "activate_audio_playlist_ended": "Ses çalma listesi sona erdiğinde etkinleştir"
     },
     "recording": {
@@ -679,7 +703,9 @@
         "tip": "Slaytların zamanlamalarını kaydedin ve tekrar oynatın. İlk slayttaki bir ses parçasıyla senkronize edin.",
         "layout_changed": "Son kayıttan bu yana düzen değişti!",
         "audio_synced": "Sesle senkronize!",
-        "start": "Slayt kaydını başlat"
+        "start": "Slayt kaydını başlat",
+        "use_duration": "Süreyi kullan",
+        "use_duration_tip": "Zaman damgası zamanı yerine süre zamanını kullanın"
     },
     "animate": {
         "change": "Değiştir",
@@ -716,6 +742,7 @@
     "export": {
         "export": "Dışa aktar",
         "export_as": "Dışa aktar {} olarak dışa aktar",
+        "exporting": "Dışa aktarma...",
         "exported": "Dışa aktarıldı!",
         "oneFile": "Bir dosya",
         "selected_shows": "Seçilmiş şovlar",
@@ -723,6 +750,7 @@
         "all_shows": "Tüm gösteriler",
         "all_projects": "Tüm projeler",
         "project": "Proje",
+        "include_media": "Medya dosyalarını ekle",
         "preview": "Ön izleme",
         "title": "Başlık",
         "metadata": "Meta veri",
@@ -738,6 +766,7 @@
     },
     "context": {
         "enabledTabs": "Sekmeleri değiştir",
+        "setTag": "Etiket ayarla",
         "filterByTags": "Etiketlere göre filtrele",
         "addToProject": "Projeye ekle",
         "add_to_show": "Gösteriye ekle",
@@ -753,6 +782,7 @@
         "toggle_output": "Çıkışı değiştir",
         "move_to_front": "Öne taşı",
         "hide_from_preview": "Önizlemeden gizle",
+        "enable_preview": "Önizlemeyi etkinleştir",
         "lock_to_output": "Çıktıya kilitle",
         "place_under_slide": "Slayt altına yerleştir",
         "toggle_clock": "Saati değiştir",
@@ -795,10 +825,14 @@
         "background_media": "Arkaplan medyası",
         "overlay_content": "Bindirme içeriği ekleme",
         "different_first_template": "İlk slaytta özel şablon",
+        "max_lines_per_slide": "Slayt başına maksimum satır sayısı",
         "media_fit": "Medya sığdır",
+        "one_letter": "Tek harf modu",
+        "sub_indexes": "Alt dizinler",
         "size": "Boyut",
         "max_lines": "Maksimum çizgiler",
         "invert_items": "Öğeleri ters çevir",
+        "list": "Liste",
         "chords": "Akorlar",
         "transpose": "Transpoze",
         "auto_size": "Otomatik boyut",
@@ -822,6 +856,7 @@
         "outline": "Anahat",
         "shadow": "Gölge",
         "shadow_inset": "Gölge eki",
+        "offset": "Ofset",
         "offsetX": "Offset X",
         "offsetY": "Offset Y",
         "blur": "Blur",
@@ -868,7 +903,6 @@
     },
     "items": {
         "text": "Metin kutusu",
-        "list": "Liste",
         "media": "Medya",
         "image": "Resim",
         "camera": "Kamera",
@@ -916,6 +950,7 @@
         "to_event": "Olaya kadar geçen süre",
         "counter": "Geri sayım",
         "time": "Zaman",
+        "minutes": "Dakikalar",
         "seconds": "Saniye",
         "from": "İtibaren",
         "to": "İle",
@@ -1040,6 +1075,7 @@
         "manual_input_hint": "Ekranı bulamıyor musunuz? Konumu manuel olarak değiştirmek için buraya tıklayın.",
         "manual_drag_hint": "Etkin bir çıktı penceresi üzerinde elle sürüklemek için ctrl/cmd'yi de basılı tutabilirsiniz.",
         "allow_main_screen": "Özel çıktı pozisyonuna ve boyutuna izin ver",
+        "edge_blending": "Kenar karıştırma",
         "identify_screens": "Ekranları tanımlayın",
         "new_output": "Yeni çıkış",
         "normal": "Normal",
@@ -1063,6 +1099,7 @@
         "group_numbers": "Grup numaraları",
         "full_colors": "Yüksek kontrastlı grup renkleri",
         "slide_number_keys": "Slaytları sayı tuşlarıyla oynatın",
+        "auto_shortcut_first_letter": "Metindeki ilk harfe otomatik kısayol",
         "auto_output": "Başlangıçta çıktı ekranını etkinleştir",
         "hide_cursor_in_output": "İmleci çıktıda gizle",
         "clear_media_when_finished": "Bittiğinde medyayı temizleyin",
@@ -1088,11 +1125,15 @@
         "show_location": "Konumu göster",
         "data_location": "Veri konumu",
         "user_data_location": "Kullanıcı ayarlarını 'Veri konumu'na kaydedin",
+        "user_data_exists": "Özel konumda mevcut veriler bulundu, üzerine yazmak ister misiniz?",
+        "user_data_yes": "Evet, güncel verileri koru",
+        "user_data_no": "Hayır, mevcut verileri içe aktar",
         "popup_before_close": "Kapatma onayı açılır penceresini etkinleştir",
         "disable_hardware_acceleration": "Donanım hızlandırmayı devre dışı bırak",
         "restart_for_change": "Değişikliğin etkili olması için programı yeniden başlatmanız gerekiyor!",
         "font": "Yazı tipi",
         "font_family": "Font ailesi",
+        "font_style": "Yazı tipi stili",
         "font_size": "Yazı Boyutu",
         "border_radius": "Kenarlık yarıçapı",
         "colors": "Renkler",
@@ -1124,11 +1165,13 @@
         "auto": "Otomatik",
         "optimized": "Optimize et",
         "reduced": "Azaltılmış",
-        "full": "Tam dolu"
+        "full": "Tam dolu",
+        "section_trigger_action": "Sunumu bir bölüme yönlendirirken tetikleyici eylem"
     },
     "sort": {
         "sort_by": "Göre sırala",
         "name": "İsim",
+        "name_des": "İsim Azalan",
         "date": "Tarih",
         "size": "Boyut",
         "type": "Tip",
@@ -1172,6 +1215,7 @@
         "reference": "Show reference",
         "split_reference": "Bölünmüş referans",
         "combine_with_text": "Metinle birleştir",
+        "first_slide_reference": "İlk slayttaki referans",
         "reference_at_bottom": "En alta taşı",
         "red_jesus": "Jesus words in red",
         "search": "Kutsal Kitap'ta Ara"
diff --git a/public/lang/zh_CN.json b/public/lang/zh_CN.json
index 56cf43d8..8109c3f9 100644
--- a/public/lang/zh_CN.json
+++ b/public/lang/zh_CN.json
@@ -39,9 +39,9 @@
         "right": "右",
         "bottom": "下",
         "left": "左",
-        "centered": "Centered",
-        "edge_blending_tip": "Blend together multiple outputs/projectors for a more seamless transition",
-        "cropping_tip": "Fine adjust the window content position by cropping the sides"
+        "centered": "居中",
+        "edge_blending_tip": "混合多个输出/投影仪以实现更无缝过渡",
+        "cropping_tip": "通过裁剪边缘微调窗口内容位置"
     },
     "about": {
         "check_updates": "检查更新...",
@@ -319,7 +319,7 @@
         "primary-darkest": "主要最暗色",
         "text": "文本",
         "textInvert": "反转文字",
-        "secondary-text": "Selections",
+        "secondary-text": "选项",
         "secondary": "辅助色",
         "secondary-opacity": "辅助透明度",
         "hover": "悬浮",
@@ -416,7 +416,7 @@
         "import": "导入",
         "songbeamer_import": "Songbeamer 导入",
         "export": "导出",
-        "importing": "Importing...",
+        "importing": "正在导入…",
         "import_scripture": "导入圣经",
         "player": "播放器",
         "edit_event": "编辑事件",
@@ -424,7 +424,7 @@
         "history": "历史记录",
         "action": "动作",
         "category_action": "分类动作",
-        "user_data_overwrite": "Found existing data",
+        "user_data_overwrite": "发现已有数据",
         "connect": "连接",
         "cloud_update": "与云端同步",
         "cloud_method": "数据位置",
@@ -433,7 +433,7 @@
         "manage_icons": "管理图标",
         "manage_colors": "管理颜色",
         "choose_camera": "选择相机",
-        "manage_tags": "Manage tags",
+        "manage_tags": "管理标签",
         "initialize": "欢迎使用 FreeShow",
         "unsaved": "你确定要退出吗？",
         "cancel": "取消",
@@ -470,7 +470,7 @@
         "deleted_cache": "已删除媒体缩略图缓存。",
         "no_songswords_easyworship": "缺少 SongsWords.db 文件。",
         "delete_shows_empty": "没有节目可删除。",
-        "output_capture_enabled": "Output screen capture enabled, this may cause performance issues. Only use if needed!",
+        "output_capture_enabled": "已启用输出屏幕捕获，这可能会导致性能问题。仅在需要时使用！",
         "midi_no_project": "收到更改项目的触发信号，但未在指定索引处未找到项目：",
         "midi_no_show": "接收到开始播放幻灯片的指令，但当前没有正在进行的节目。",
         "midi_no_slide": "收到开始幻灯片的触发信号，但未在以下序号处找到幻灯片：",
@@ -533,7 +533,7 @@
         "view_private": "节目私有",
         "import": "导入",
         "export": "导出",
-        "imported": "Imported!",
+        "imported": "已导入！",
         "duplicate": "创建副本",
         "delete": "删除",
         "delete_slide": "删除幻灯片",
@@ -564,10 +564,10 @@
         "reset": "重置",
         "create_template": "创建模板",
         "project_template_tip": "使用此模板创建新项目",
-        "pdf_single_page": "Render as one document",
+        "pdf_single_page": "渲染为一个文档",
         "convert_to_images": "转换成图片",
         "converting": "正在转换…",
-        "closing": "Closing app...",
+        "closing": "正在关闭应用程序…",
         "remove_template_from_show": "从节目中移除模板",
         "reset_defaults": "重置默认设置",
         "to_all": "全部应用",
@@ -742,7 +742,7 @@
     "export": {
         "export": "导出",
         "export_as": "将 {} 导出为",
-        "exporting": "Exporting...",
+        "exporting": "正在导出…",
         "exported": "已导出！",
         "oneFile": "单文件",
         "selected_shows": "已选的节目",
@@ -750,7 +750,7 @@
         "all_shows": "全部节目",
         "all_projects": "全部项目",
         "project": "项目",
-        "include_media": "Include media files",
+        "include_media": "包含媒体文件",
         "preview": "预览",
         "title": "标题",
         "metadata": "元数据",
@@ -782,7 +782,7 @@
         "toggle_output": "切换输出",
         "move_to_front": "移到最前",
         "hide_from_preview": "在预览中隐藏",
-        "enable_preview": "Enable preview",
+        "enable_preview": "启用预览",
         "lock_to_output": "锁定输出",
         "place_under_slide": "置于幻灯片下方",
         "toggle_clock": "切换时间",
@@ -825,14 +825,14 @@
         "background_media": "背景媒体",
         "overlay_content": "添加叠加内容",
         "different_first_template": "在第一张幻灯片上使用自定义模板",
-        "max_lines_per_slide": "Max lines per slide",
+        "max_lines_per_slide": "每张幻灯片的最大行数",
         "media_fit": "媒体适应",
         "one_letter": "单字母模式",
         "sub_indexes": "子索引",
         "size": "大小",
         "max_lines": "最大行数",
         "invert_items": "反转元素",
-        "list": "List",
+        "list": "列表",
         "chords": "合弦",
         "transpose": "转置",
         "auto_size": "自动调整大小",
@@ -856,7 +856,7 @@
         "outline": "描边",
         "shadow": "阴影",
         "shadow_inset": "内阴影",
-        "offset": "Offset",
+        "offset": "偏移",
         "offsetX": "X 轴偏移",
         "offsetY": "Y 轴偏移",
         "blur": "模糊",
@@ -1075,7 +1075,7 @@
         "manual_input_hint": "找不到显示屏？点击这里手动改变位置。",
         "manual_drag_hint": "可通过按住 Ctrl/Cmd 键并拖动激活的输出窗口来手动更改其位置。",
         "allow_main_screen": "允许自定义输出位置和大小",
-        "edge_blending": "Edge blending",
+        "edge_blending": "边缘融合",
         "identify_screens": "识别屏幕",
         "new_output": "新建输出",
         "normal": "正常",
@@ -1125,15 +1125,15 @@
         "show_location": "节目位置",
         "data_location": "数据位置",
         "user_data_location": "将个人设置存储在“数据位置”",
-        "user_data_exists": "Found existing data at custom location, would you like to overwrite it?",
-        "user_data_yes": "Yes, keep current data",
-        "user_data_no": "No, import existing data",
+        "user_data_exists": "在自定义位置发现已有数据，是否要覆盖它？",
+        "user_data_yes": "是，保留当前数据",
+        "user_data_no": "否，导入已有数据",
         "popup_before_close": "关闭时显示确认弹窗",
         "disable_hardware_acceleration": "禁用硬件加速",
         "restart_for_change": "你必须重启程序才能使修改生效！",
         "font": "字体",
         "font_family": "字体",
-        "font_style": "Font style",
+        "font_style": "字体样式",
         "font_size": "字体大小",
         "border_radius": "边框圆角",
         "colors": "颜色",
@@ -1171,7 +1171,7 @@
     "sort": {
         "sort_by": "排序",
         "name": "名称",
-        "name_des": "Name Descending",
+        "name_des": "名称降序",
         "date": "日期",
         "size": "大小",
         "type": "类型",
diff --git a/rollup.config.mjs b/rollup.config.mjs
index fa8cef04..426f8f1e 100644
--- a/rollup.config.mjs
+++ b/rollup.config.mjs
@@ -98,6 +98,11 @@ function mainApp() {
                     mangle: true,
                 }),
         ],
+        onwarn: (warning, warn) => {
+            // many false Svelte "Circular dependencies" warnings
+            if (warning.code === "CIRCULAR_DEPENDENCY") return
+            warn(warning)
+        },
         watch: {
             clearScreen: false,
         },
diff --git a/src/electron/capture/CaptureHelper.ts b/src/electron/capture/CaptureHelper.ts
index 23ecd03d..cd54119b 100644
--- a/src/electron/capture/CaptureHelper.ts
+++ b/src/electron/capture/CaptureHelper.ts
@@ -1,10 +1,10 @@
 import type { BrowserWindow, Display, NativeImage, Size } from "electron"
 import electron from "electron"
 import { NdiSender } from "../ndi/NdiSender"
-import { CaptureTransmitter } from "./helpers/CaptureTransmitter"
-import { CaptureOptions } from "./CaptureOptions"
-import { CaptureLifecycle } from "./helpers/CaptureLifecycle"
 import { OutputHelper } from "../output/OutputHelper"
+import type { CaptureOptions } from "./CaptureOptions"
+import { CaptureLifecycle } from "./helpers/CaptureLifecycle"
+import { CaptureTransmitter } from "./helpers/CaptureTransmitter"
 
 export class CaptureHelper {
     static Lifecycle = CaptureLifecycle
diff --git a/src/electron/capture/CaptureOptions.ts b/src/electron/capture/CaptureOptions.ts
index b10f590a..837389a0 100644
--- a/src/electron/capture/CaptureOptions.ts
+++ b/src/electron/capture/CaptureOptions.ts
@@ -1,4 +1,4 @@
-import { BrowserWindow } from "electron"
+import type { BrowserWindow } from "electron"
 
 export type CaptureOptions = {
     id: string
diff --git a/src/electron/capture/helpers/CaptureLifecycle.ts b/src/electron/capture/helpers/CaptureLifecycle.ts
index 96a4771d..6f81a432 100644
--- a/src/electron/capture/helpers/CaptureLifecycle.ts
+++ b/src/electron/capture/helpers/CaptureLifecycle.ts
@@ -1,6 +1,6 @@
-import { NativeImage } from "electron"
-import { CaptureHelper } from "../CaptureHelper"
+import type { NativeImage } from "electron"
 import { OutputHelper } from "../../output/OutputHelper"
+import { CaptureHelper } from "../CaptureHelper"
 import { CaptureTransmitter } from "./CaptureTransmitter"
 
 export class CaptureLifecycle {
diff --git a/src/electron/data/defaults.ts b/src/electron/data/defaults.ts
index 858187d7..cd71b1e6 100644
--- a/src/electron/data/defaults.ts
+++ b/src/electron/data/defaults.ts
@@ -43,10 +43,6 @@ export const defaultSettings: { [key in SaveListSettings]: any } = {
     maxConnections: 10,
     mediaFolders: {},
     audioFolders: {},
-    playerVideos: {
-        chosen: { name: "The Chosen Trailer", type: "youtube", id: "X-AJdKty74M" },
-        jesus: { name: "Jesus, Only Jesus", type: "vimeo", id: "426363743" },
-    },
     resized: {
         leftPanel: 290,
         rightPanel: 290,
@@ -122,6 +118,11 @@ export const defaultSyncedSettings: { [key in SaveListSyncedSettings]: any } = {
     },
     groups: defaultGroups,
     midiIn: {},
+    emitters: {},
+    playerVideos: {
+        chosen: { name: "The Chosen Trailer", type: "youtube", id: "X-AJdKty74M" },
+        jesus: { name: "Jesus, Only Jesus", type: "vimeo", id: "426363743" },
+    },
     videoMarkers: {},
     mediaTags: {},
     customizedIcons: { disabled: [], svg: [] },
diff --git a/src/electron/data/export.ts b/src/electron/data/export.ts
index d858683e..f8c871a2 100644
--- a/src/electron/data/export.ts
+++ b/src/electron/data/export.ts
@@ -2,16 +2,16 @@
 // Export as TXT or PDF
 // When exporting as PDF we create a new window and capture its content
 
+import AdmZip from "adm-zip"
 import { BrowserWindow, ipcMain } from "electron"
 import fs from "fs"
 import { join } from "path"
 import { EXPORT, MAIN, STARTUP } from "../../types/Channels"
+import type { Message } from "../../types/Socket"
 import { isProd, toApp } from "../index"
 import { createFolder, dataFolderNames, doesPathExist, getDataFolder, getShowsFromIds, getTimePointString, makeDir, openSystemFolder, parseShow, readFile, selectFolderDialog } from "../utils/files"
-import { exportOptions } from "../utils/windowOptions"
-import { Message } from "../../types/Socket"
 import { getAllShows } from "../utils/shows"
-import AdmZip from "adm-zip"
+import { exportOptions } from "../utils/windowOptions"
 
 // SHOW: .show, PROJECT: .project, BIBLE: .fsb
 const customJSONExtensions: any = {
diff --git a/src/electron/index.ts b/src/electron/index.ts
index 1cee8645..dc92bd69 100644
--- a/src/electron/index.ts
+++ b/src/electron/index.ts
@@ -8,6 +8,7 @@ import { BIBLE, IMPORT } from "./../types/Channels"
 import { cloudConnect } from "./cloud/cloud"
 import { currentlyDeletedShows } from "./cloud/drive"
 import { startBackup } from "./data/backup"
+import { defaultSettings, defaultSyncedSettings } from "./data/defaults"
 import { startExport } from "./data/export"
 import { config, getStore, stores, updateDataPath, userDataPath } from "./data/store"
 import { NdiReceiver } from "./ndi/NdiReceiver"
@@ -15,13 +16,12 @@ import { receiveNDI } from "./ndi/talk"
 import { OutputHelper } from "./output/OutputHelper"
 import { closeServers } from "./servers"
 import { stopApiListener } from "./utils/api"
-import { checkShowsFolder, dataFolderNames, deleteFile, getDataFolder, loadShows, writeFile } from "./utils/files"
+import { checkShowsFolder, dataFolderNames, deleteFile, doesPathExist, getDataFolder, loadShows, writeFile } from "./utils/files"
 import { template } from "./utils/menuTemplate"
 import { stopMidi } from "./utils/midi"
 import { catchErrors, loadScripture, loadShow, receiveMain, saveRecording, startImport } from "./utils/responses"
-import { loadingOptions, mainOptions } from "./utils/windowOptions"
 import { renameShows } from "./utils/shows"
-import { defaultSettings, defaultSyncedSettings } from "./data/defaults"
+import { loadingOptions, mainOptions } from "./utils/windowOptions"
 
 // ----- STARTUP -----
 
@@ -46,8 +46,7 @@ if (!config.get("loaded")) console.error("Could not get stored data!")
 
 // info
 console.log("Starting FreeShow...")
-if (!isProd) console.log("Building app! This may take 20-90 seconds")
-if (isLinux) console.log("libva error on Linux can be ignored")
+if (!isProd) console.log("Building app! (This may take 20-90 seconds)")
 
 // set application menu
 setGlobalMenu()
@@ -147,28 +146,37 @@ function createMain() {
     mainWindow.setMinimumSize(MIN_WINDOW_SIZE, MIN_WINDOW_SIZE)
 
     // this is to debug any weird positioning
-    console.log("Main Window Bounds:", mainWindow.getBounds())
+    // console.log("Main Window Bounds:", mainWindow.getBounds())
 
     loadWindowContent(mainWindow)
     setMainListeners()
 
-    // open devtools
-    if (!isProd) mainWindow.webContents.openDevTools()
-
     if (RECORD_STARTUP_TIME) console.timeEnd("Main window")
 }
 
-export function loadWindowContent(window: BrowserWindow, type: null | "output" = null) {
+function openDevTools(window: BrowserWindow) {
+    console.log('Opening DevTools... ("[ERROR:CONSOLE] Request Autofill" can be ignored)')
+    window.webContents.openDevTools()
+    // ERROR:CONSOLE(1)] "Request Autofill.enable failed. - can be ignored:
+    // https://github.com/electron/electron/issues/41614
+}
+
+export async function loadWindowContent(window: BrowserWindow, type: null | "output" = null) {
     let mainOutput = type === null
     if (mainOutput && RECORD_STARTUP_TIME) console.time("Main window content")
-    if (mainOutput) console.log("Loading main window content")
+
     if (isProd) window.loadFile("public/index.html").catch(error)
-    else window.loadURL("http://localhost:3000").catch(error)
+    else {
+        // load development environment
+        if (mainOutput) {
+            await waitForBundle()
+            openDevTools(window)
+        }
+        window.loadURL("http://localhost:3000").catch(error)
+    }
 
     window.webContents.on("did-finish-load", () => {
-        // if (window === mainWindow) type = null // make sure type is correct
         window.webContents.send(STARTUP, { channel: "TYPE", data: type })
-        if (mainOutput) retryLoadingContent()
     })
 
     function error(err: any) {
@@ -177,24 +185,29 @@ export function loadWindowContent(window: BrowserWindow, type: null | "output" =
     }
 }
 
-// retry loading until content has finshed building
-const retryInterval = 10
-let tries = 0
-function retryLoadingContent() {
-    if (isProd) return
-
-    setTimeout(() => {
-        if (isLoaded) return
-
-        if (tries < 1) console.log("Loading content again. App is probably not finished building yet")
-        else if (tries > 15) {
-            console.log("Could not load app content. Please check console for any errors!")
-            return app.quit()
-        } else console.log("Trying to load content again")
-        tries++
-
-        mainWindow!.webContents.reload()
-    }, retryInterval * 1000)
+// wait until the main Rollup bundle exists before loading
+function waitForBundle() {
+    const BUNDLE_PATH = path.resolve(__dirname, "..", "..", "public/build/bundle.js")
+    const CHECK_INTERVAL = 2 // every 2 seconds
+    const MAX_SECONDS = 120
+    let tries = 0
+
+    return new Promise((resolve) => {
+        const interval = setInterval(() => {
+            if (doesPathExist(BUNDLE_PATH)) {
+                console.log("Main bundle created! Loading interface...")
+                clearInterval(interval)
+                resolve(true)
+            }
+
+            tries += CHECK_INTERVAL / MAX_SECONDS
+            if (tries >= 1) {
+                clearInterval(interval)
+                app.quit()
+                throw new Error("Could not load app content. Please check console for any errors!")
+            }
+        }, CHECK_INTERVAL * 1000)
+    })
 }
 
 function setMainListeners() {
diff --git a/src/electron/ndi/talk.ts b/src/electron/ndi/talk.ts
index d04a18f1..504c3d91 100644
--- a/src/electron/ndi/talk.ts
+++ b/src/electron/ndi/talk.ts
@@ -1,5 +1,5 @@
 import { NDI } from "../../types/Channels"
-import { Message } from "../../types/Socket"
+import type { Message } from "../../types/Socket"
 import { CaptureHelper } from "../capture/CaptureHelper"
 import { NdiReceiver } from "./NdiReceiver"
 
diff --git a/src/electron/output/Output.ts b/src/electron/output/Output.ts
index 093f89fd..4baed47d 100644
--- a/src/electron/output/Output.ts
+++ b/src/electron/output/Output.ts
@@ -1,5 +1,5 @@
-import { BrowserWindow } from "electron"
-import { CaptureOptions } from "../capture/CaptureOptions"
+import type { BrowserWindow } from "electron"
+import type { CaptureOptions } from "../capture/CaptureOptions"
 
 export class Output {
     window: BrowserWindow
diff --git a/src/electron/output/OutputHelper.ts b/src/electron/output/OutputHelper.ts
index dccfc69f..0898fba1 100644
--- a/src/electron/output/OutputHelper.ts
+++ b/src/electron/output/OutputHelper.ts
@@ -1,14 +1,14 @@
+import { toApp } from ".."
+import { OUTPUT } from "../../types/Channels"
+import type { Message } from "../../types/Socket"
+import { CaptureHelper } from "../capture/CaptureHelper"
 import { OutputBounds } from "./helpers/OutputBounds"
 import { OutputIdentify } from "./helpers/OutputIdentify"
+import { OutputLifecycle } from "./helpers/OutputLifecycle"
 import { OutputSend } from "./helpers/OutputSend"
 import { OutputValues } from "./helpers/OutputValues"
 import { OutputVisibility } from "./helpers/OutputVisibility"
-import { OutputLifecycle } from "./helpers/OutputLifecycle"
-import { Message } from "../../types/Socket"
-import { toApp } from ".."
-import { OUTPUT } from "../../types/Channels"
-import { Output } from "./Output"
-import { CaptureHelper } from "../capture/CaptureHelper"
+import type { Output } from "./Output"
 
 export class OutputHelper {
     static receiveOutput(_e: any, msg: Message) {
diff --git a/src/electron/output/helpers/OutputBounds.ts b/src/electron/output/helpers/OutputBounds.ts
index 353579fb..bc08b5cf 100644
--- a/src/electron/output/helpers/OutputBounds.ts
+++ b/src/electron/output/helpers/OutputBounds.ts
@@ -1,7 +1,7 @@
-import { BrowserWindow, screen } from "electron"
-import { OutputHelper } from "../OutputHelper"
+import { screen, type BrowserWindow } from "electron"
 import { toApp } from "../.."
 import { OUTPUT } from "../../../types/Channels"
+import { OutputHelper } from "../OutputHelper"
 
 export class OutputBounds {
     // BOUNDS
diff --git a/src/electron/output/helpers/OutputLifecycle.ts b/src/electron/output/helpers/OutputLifecycle.ts
index 7d492e7d..429848ac 100644
--- a/src/electron/output/helpers/OutputLifecycle.ts
+++ b/src/electron/output/helpers/OutputLifecycle.ts
@@ -1,13 +1,13 @@
 import { BrowserWindow } from "electron"
 import { OUTPUT_CONSOLE, isMac, loadWindowContent, mainWindow, toApp } from "../.."
-import { Output } from "../../../types/Output"
+import { OUTPUT } from "../../../types/Channels"
+import type { Output } from "../../../types/Output"
+import { CaptureHelper } from "../../capture/CaptureHelper"
 import { NdiSender } from "../../ndi/NdiSender"
 import { setDataNDI } from "../../ndi/talk"
+import { wait } from "../../utils/helpers"
 import { outputOptions } from "../../utils/windowOptions"
 import { OutputHelper } from "../OutputHelper"
-import { OUTPUT } from "../../../types/Channels"
-import { CaptureHelper } from "../../capture/CaptureHelper"
-import { wait } from "../../utils/helpers"
 
 export class OutputLifecycle {
     static async createOutput(output: Output) {
diff --git a/src/electron/output/helpers/OutputValues.ts b/src/electron/output/helpers/OutputValues.ts
index 22904b2d..21b36965 100644
--- a/src/electron/output/helpers/OutputValues.ts
+++ b/src/electron/output/helpers/OutputValues.ts
@@ -1,4 +1,4 @@
-import { BrowserWindow } from "electron"
+import type { BrowserWindow } from "electron"
 import { CaptureHelper } from "../../capture/CaptureHelper"
 import { NdiSender } from "../../ndi/NdiSender"
 import { OutputHelper } from "../OutputHelper"
diff --git a/src/electron/utils/LyricSearch.ts b/src/electron/utils/LyricSearch.ts
index 88ab3443..469d7108 100644
--- a/src/electron/utils/LyricSearch.ts
+++ b/src/electron/utils/LyricSearch.ts
@@ -1,7 +1,7 @@
 import axios from "axios"
 
 export type LyricSearchResult = {
-    source: string
+    source: "Genius" | "Hymnary" | "Letras"
     key: string
     artist: string
     title: string
@@ -10,13 +10,18 @@ export type LyricSearchResult = {
 
 export class LyricSearch {
     static search = async (artist: string, title: string) => {
-        const results = await Promise.all([LyricSearch.searchGenius(artist, title), LyricSearch.searchHymnary(title)])
+        const results = await Promise.all([
+            LyricSearch.searchGenius(artist, title),
+            LyricSearch.searchHymnary(title),
+            LyricSearch.searchLetras(title),
+        ])
         return results.flat()
     }
 
     static get(song: LyricSearchResult) {
         if (song.source === "Genius") return LyricSearch.getGenius(song)
         else if (song.source === "Hymnary") return LyricSearch.getHymnary(song)
+        else if (song.source === "Letras") return LyricSearch.getLetras(song)
         return Promise.resolve("")
     }
 
@@ -83,10 +88,53 @@ export class LyricSearch {
         const url = `https://hymnary.org/text/${song.key}`
         const response = await axios.get(url)
         const html = await response.data
-        const regex = /<div property=\"text\">(.*?)<\/div>/gs
-        const match = regex.exec(html)
+        return this.getLyricFromHtml(html, /<div property=\"text\">(.*?)<\/div>/gs);
+    }
+
+    private static convertHymnaryToResult = (hymnaryResult: any, originalQuery: string) => {
+        return {
+            source: "Hymnary",
+            key: hymnaryResult[4],
+            artist: hymnaryResult[6],
+            title: hymnaryResult[0],
+            originalQuery: originalQuery,
+        } as LyricSearchResult
+    }
+
+    //Letras
+    private static searchLetras = async (title: string) => {
+        try {
+            const url = `https://solr.sscdn.co/letras/m1/?q=${encodeURIComponent(title)}`
+            const response = await axios.get(url)
+            const json = JSON.parse(response.data.replace('LetrasSug(', '').slice(0, -2))
+            const songs = json.response.docs.filter((d: any) => d.id.startsWith("mus"))
+            return songs.map((s: any) => LyricSearch.convertLetrasToResult(s, title))
+        } catch (ex) {
+            console.log(ex)
+            return []
+        }
+    }
+
+    private static convertLetrasToResult = (letrasResult: any, originalQuery: string) => {
+        return {
+            source: "Letras",
+            key: `${letrasResult.dns}/${letrasResult.url}`,
+            artist: letrasResult.art,
+            title: letrasResult.txt,
+            originalQuery: originalQuery,
+        } as LyricSearchResult
+    }
+
+    private static getLetras = async (song: LyricSearchResult) => {
+        const url = `https://www.letras.mus.br/${song.key}`
+        const response = await axios.get(url)
+        const html = await response.data
+        return this.getLyricFromHtml(html, /<div class=\"lyric-original\">(.*?)<\/div>/gs);
+    }
 
+    private static getLyricFromHtml = (songHtml: string, regex: RegExp) => {
         let result = ""
+        const match = regex.exec(songHtml)
         if (match) {
             result = match[0]
             result = result.replace(/<br\s*\/?>/gi, "\n")
@@ -104,18 +152,7 @@ export class LyricSearch {
             })
             result = newLines.join("\n").trim()
         }
-
-        return result
-    }
-
-    private static convertHymnaryToResult = (hymnaryResult: any, originalQuery: string) => {
-        return {
-            source: "Hymnary",
-            key: hymnaryResult[4],
-            artist: hymnaryResult[6],
-            title: hymnaryResult[0],
-            originalQuery: originalQuery,
-        } as LyricSearchResult
+        return result;
     }
 
     // ref: http://stackoverflow.com/a/1293163/2343
diff --git a/src/electron/utils/api.ts b/src/electron/utils/api.ts
index 461b746e..1f6cce52 100644
--- a/src/electron/utils/api.ts
+++ b/src/electron/utils/api.ts
@@ -130,6 +130,42 @@ function startOSC(PORT: number | undefined) {
     osc.open({ port: PORT })
 }
 
+// let OSC_SENDER: null | OSC = null // must work with different ip:port
+export function emitOSC(msg: any) {
+    if (typeof msg.data !== "string") return
+
+    // if (!OSC_SENDER) {
+    const OSC_SENDER = new OSC({ plugin: new OSC.DatagramPlugin() }) // UDP
+
+    const options: any = { port: msg.signal?.port || 8080, host: msg.signal?.host || "localhost" }
+
+    OSC_SENDER.on("open", sendMessage)
+    OSC_SENDER.open(options)
+    //     return
+    // }
+
+    // const IS_OPEN = 1
+    // if (OSC_SENDER?.status() === IS_OPEN) {
+    //     sendMessage()
+    // }
+
+    OSC_SENDER.on("error", (err: any) => {
+        console.error("OSC EMIT ERROR:", err)
+        OSC_SENDER.close()
+    })
+
+    function sendMessage() {
+        if (!OSC_SENDER) return
+
+        const message = new OSC.Message(msg.data)
+        console.log(`Emitting OSC at ${options.host}:${options.port}:`, message.address)
+
+        OSC_SENDER.send(message)
+        // ensure message is sent
+        setTimeout(() => OSC_SENDER.close(), 100)
+    }
+}
+
 // DATA
 
 async function receivedData(data: any = {}, log: any) {
diff --git a/src/electron/utils/files.ts b/src/electron/utils/files.ts
index d161876d..357ccb36 100644
--- a/src/electron/utils/files.ts
+++ b/src/electron/utils/files.ts
@@ -7,7 +7,8 @@ import fs, { type Stats } from "fs"
 import path, { join, parse } from "path"
 import { uid } from "uid"
 import { FILE_INFO, MAIN, OPEN_FOLDER, OUTPUT, READ_FOLDER, SHOW, STORE } from "../../types/Channels"
-import { Show } from "../../types/Show"
+import type { Subtitle } from "../../types/Main"
+import type { Show } from "../../types/Show"
 import { imageExtensions, mimeTypes, videoExtensions } from "../data/media"
 import { stores } from "../data/store"
 import { createThumbnail } from "../data/thumbnails"
@@ -453,6 +454,82 @@ function getMimeType(path: string) {
     return mimeTypes[ext] || ""
 }
 
+// get embedded subtitles/captions
+export function getMediaTracks(data: any) {
+    extractSubtitles(data)
+}
+
+async function extractSubtitles(data: any) {
+    const MP4Box = require("mp4box")
+    let arrayBuffer: any
+
+    try {
+        arrayBuffer = new Uint8Array(fs.readFileSync(data.path)).buffer
+    } catch (err) {
+        console.error(err)
+        toApp(MAIN, { channel: "MEDIA_TRACKS", data: { ...data, tracks: [] } })
+        return
+    }
+
+    const mp4boxfile = MP4Box.createFile()
+    mp4boxfile.onError = (e: Error) => console.error("MP4Box error:", e)
+    mp4boxfile.onReady = (info: any) => {
+        let tracks: Subtitle[] = []
+        let trackCount: number = 0
+        let completed: number = 0
+        info.tracks.forEach((track: any) => {
+            if (track.type !== "subtitles" && track.type !== "text") return
+            trackCount++
+
+            // console.log(`Found subtitle track ID ${track.id}, language: ${track.language}`)
+            const vttLines = ["WEBVTT\n"]
+            const timescale = track.timescale
+
+            mp4boxfile.setExtractionOptions(track.id, null, { nbSamples: track.nb_samples })
+            mp4boxfile.start()
+
+            mp4boxfile.onSamples = (_id: number, _user: any, samples: any[]) => {
+                let index = 1
+                samples.forEach((sample) => {
+                    const utf8Decoder = new TextDecoder("utf-8")
+                    let subtitleText = utf8Decoder.decode(sample.data).trim()
+                    // remove any non-printable characters (excluding line breaks)
+                    subtitleText = subtitleText.replace(/[^\x20-\x7E\n\r]+/g, "")
+                    if (!subtitleText) return
+
+                    const startTime = formatTimestamp((sample.cts / timescale) * 1000)
+                    const endTime = formatTimestamp(((sample.cts + sample.duration) / timescale) * 1000)
+
+                    vttLines.push(`${index}`)
+                    vttLines.push(`${startTime} --> ${endTime}`)
+                    vttLines.push(`${subtitleText}\n`)
+
+                    index++
+                })
+
+                completed++
+                if (vttLines.length > 1) tracks.push({ lang: track.language?.slice(0, 2), name: track.language || "", vtt: vttLines.join("\n"), embedded: true })
+                if (completed === trackCount) toApp(MAIN, { channel: "MEDIA_TRACKS", data: { ...data, tracks } })
+            }
+        })
+    }
+
+    arrayBuffer.fileStart = 0
+    mp4boxfile.appendBuffer(arrayBuffer)
+    mp4boxfile.flush()
+}
+
+// format timestamp in WebVTT format (HH:MM:SS.mmm)
+function formatTimestamp(timestamp: number) {
+    const hours = Math.floor(timestamp / 3600000)
+    const minutes = Math.floor((timestamp % 3600000) / 60000)
+    const seconds = Math.floor((timestamp % 60000) / 1000)
+    const milliseconds = Math.floor(timestamp % 1000)
+
+    const formatted = [hours.toString().padStart(2, "0"), minutes.toString().padStart(2, "0"), seconds.toString().padStart(2, "0") + "." + milliseconds.toString().padStart(3, "0")].join(":")
+    return formatted
+}
+
 //////
 
 // SEARCH FOR MEDIA FILE (in drawer media folders & their following folders)
diff --git a/src/electron/utils/responses.ts b/src/electron/utils/responses.ts
index 17393fcd..86f53cf4 100644
--- a/src/electron/utils/responses.ts
+++ b/src/electron/utils/responses.ts
@@ -17,8 +17,8 @@ import { captureSlide, getThumbnail, getThumbnailFolderPath, saveImage } from ".
 import { OutputHelper } from "../output/OutputHelper"
 import { getPresentationApplications, presentationControl, startSlideshow } from "../output/ppt/presentation"
 import { closeServers, startServers } from "../servers"
-import { Message } from "./../../types/Socket"
-import { apiReturnData, startWebSocketAndRest, stopApiListener } from "./api"
+import type { Message } from "./../../types/Socket"
+import { apiReturnData, emitOSC, startWebSocketAndRest, stopApiListener } from "./api"
 import {
     bundleMediaFiles,
     checkShowsFolder,
@@ -29,6 +29,7 @@ import {
     getFileInfo,
     getFolderContent,
     getMediaCodec,
+    getMediaTracks,
     getPaths,
     getSimularPaths,
     getTempPaths,
@@ -126,6 +127,7 @@ const mainResponses: any = {
     SAVE_IMAGE: (data: any): any => saveImage(data),
     READ_EXIF: (data: any, e: any) => readExifData(data, e),
     MEDIA_CODEC: (data: any) => getMediaCodec(data),
+    MEDIA_TRACKS: (data: any) => getMediaTracks(data),
     DOWNLOAD_MEDIA: (data: any) => downloadMedia(data),
     MEDIA_BASE64: (data: any) => storeMedia(data),
     CAPTURE_SLIDE: (data: any) => captureSlide(data),
@@ -140,10 +142,11 @@ const mainResponses: any = {
     // SERVERS
     START: (data: any): void => startServers(data),
     STOP: (): void => closeServers(),
-    // WebSocket / REST
+    // WebSocket / REST / OSC
     WEBSOCKET_START: (port: number | undefined) => startWebSocketAndRest(port),
     WEBSOCKET_STOP: () => stopApiListener(),
     API_TRIGGER: (data: any) => apiReturnData(data),
+    EMIT_OSC: (data: any) => emitOSC(data),
     // MIDI
     GET_MIDI_OUTPUTS: (): string[] => getMidiOutputs(),
     GET_MIDI_INPUTS: (): string[] => getMidiInputs(),
@@ -182,6 +185,7 @@ const mainResponses: any = {
     BUNDLE_MEDIA_FILES: (data: any) => bundleMediaFiles(data),
     FILE_INFO: (data: any, e: any) => getFileInfo(data, e),
     READ_FOLDER: (data: any) => getFolderContent(data),
+    READ_FILE: (data: any) => ({ ...data, content: readFile(data.path) }),
     OPEN_FOLDER: (data: any, e: any) => selectFolder(data, e),
     OPEN_FILE: (data: any, e: any) => selectFiles(data, e),
 }
diff --git a/src/electron/utils/shows.ts b/src/electron/utils/shows.ts
index e6982869..567f562e 100644
--- a/src/electron/utils/shows.ts
+++ b/src/electron/utils/shows.ts
@@ -1,7 +1,7 @@
 import path from "path"
 import { toApp } from ".."
 import { MAIN } from "../../types/Channels"
-import { Show } from "../../types/Show"
+import type { Show } from "../../types/Show"
 import { deleteFile, doesPathExist, parseShow, readFile, readFileAsync, readFolder, readFolderAsync, renameFile } from "./files"
 
 export function getAllShows(data: any) {
diff --git a/src/electron/utils/updater.ts b/src/electron/utils/updater.ts
index 68590183..bc34db61 100644
--- a/src/electron/utils/updater.ts
+++ b/src/electron/utils/updater.ts
@@ -1,9 +1,12 @@
 // import { Notification, app } from "electron"
 import { autoUpdater } from "electron-updater"
+import { isProd } from ".."
 
 // let notification: Notification | null
 
 export default function checkForUpdates() {
+    if (!isProd) return
+
     autoUpdater.checkForUpdatesAndNotify()
     // {
     //   title: app.getName(),
diff --git a/src/electron/utils/windowOptions.ts b/src/electron/utils/windowOptions.ts
index 8635f376..999f75cf 100644
--- a/src/electron/utils/windowOptions.ts
+++ b/src/electron/utils/windowOptions.ts
@@ -2,9 +2,9 @@
 // Options for electron windows
 // https://www.electronjs.org/docs/latest/api/browser-window
 
+import type { BrowserWindowConstructorOptions } from "electron"
 import { join } from "path"
 import { isMac, isProd } from ".."
-import { BrowserWindowConstructorOptions } from "electron"
 
 export const loadingOptions: BrowserWindowConstructorOptions = {
     width: 500,
diff --git a/src/frontend/App.svelte b/src/frontend/App.svelte
index d0240b2e..7d55bdb1 100644
--- a/src/frontend/App.svelte
+++ b/src/frontend/App.svelte
@@ -14,7 +14,7 @@
     import QuickSearch from "./components/quicksearch/QuickSearch.svelte"
     import Center from "./components/system/Center.svelte"
     import { activeTimers, autosave, closeAd, currentWindow, disabledServers, events, loaded, os, outputDisplay, outputs } from "./stores"
-    import { focusArea, logerror, startAutosave, toggleRemoteStream } from "./utils/common"
+    import { focusArea, logerror, mainClick, startAutosave, toggleRemoteStream } from "./utils/common"
     import { keydown } from "./utils/shortcuts"
     import { startup } from "./utils/startup"
 
@@ -44,7 +44,7 @@
     $: if ($currentWindow === "output" && Object.values($outputs)[0]?.blending) blending = getBlending()
 </script>
 
-<svelte:window on:keydown={keydown} on:mousedown={focusArea} on:error={logerror} on:unhandledrejection={logerror} />
+<svelte:window on:keydown={keydown} on:mousedown={focusArea} on:click={mainClick} on:error={logerror} on:unhandledrejection={logerror} />
 
 {#if $currentWindow === "pdf"}
     <Pdf />
diff --git a/src/frontend/components/actions/ChooseEmitter.svelte b/src/frontend/components/actions/ChooseEmitter.svelte
new file mode 100644
index 00000000..0106caa5
--- /dev/null
+++ b/src/frontend/components/actions/ChooseEmitter.svelte
@@ -0,0 +1,93 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte"
+    import { dictionary, emitters } from "../../stores"
+    import { getDropdownValue, initDropdownOptions } from "../input/inputs"
+    import { API_emitter } from "./api"
+    import Dropdown from "../inputs/Dropdown.svelte"
+    import T from "../helpers/T.svelte"
+    import CombinedInput from "../inputs/CombinedInput.svelte"
+    import DynamicList from "../input/DynamicList.svelte"
+    import TextInput from "../inputs/TextInput.svelte"
+    import { clone } from "../helpers/array"
+
+    export let value: API_emitter
+
+    $: emittersList = initDropdownOptions($emitters)
+
+    let dispatch = createEventDispatcher()
+    function updateValue(key: string, v: any) {
+        if (key === "emitter") {
+            value.templateValues = []
+            value.template = ""
+        } else if (key === "template") {
+            let inputs = clone($emitters[value.emitter]?.templates?.[v]?.inputs || [])
+            value.templateValues = inputs
+        }
+
+        value[key] = v
+        dispatch("change", value)
+    }
+
+    function setTemplateValue(index: string | number, e: any, key: string = "value") {
+        let v = e.target?.value
+
+        if (!value.templateValues) value.templateValues = clone($emitters[value.emitter]?.templates?.[v]?.inputs || [])
+
+        let templateValues = value.templateValues || []
+        if (!templateValues[index]) templateValues[index] = { name: "", value: "" }
+        templateValues[index][key] = v
+        updateValue("templateValues", templateValues)
+    }
+    function createTemplateValue() {
+        let templateValues = value.templateValues || []
+        templateValues.push({ name: "", value: "" })
+        updateValue("templateValues", templateValues)
+    }
+    function removeTemplateValue(index: string) {
+        let templateValues = value.templateValues || []
+        templateValues.slice(Number(index), 1)
+        updateValue("templateValues", templateValues)
+    }
+
+    $: activeTemplate = value.template || "custom"
+    $: templatesList = [{ name: "$:actions.custom_key:$", id: "custom" }, ...initDropdownOptions($emitters[value.emitter]?.templates || {})]
+    $: templateInputs = ($emitters[value.emitter]?.templates?.[activeTemplate]?.inputs || []).filter((a) => a.name)
+
+    $: customTemplateInputs = (value.templateValues || []).map((a, i) => ({ ...a, id: i.toString() }))
+</script>
+
+<CombinedInput>
+    <p><T id="emitters.emitter" /></p>
+    <Dropdown options={emittersList} value={getDropdownValue(emittersList, value.emitter)} on:click={(e) => updateValue("emitter", e.detail.id)} />
+</CombinedInput>
+
+{#if value.emitter}
+    <CombinedInput>
+        <p><T id="emitters.message_template" /></p>
+        <Dropdown options={templatesList} value={getDropdownValue(templatesList, activeTemplate)} on:click={(e) => updateValue("template", e.detail.id)} />
+    </CombinedInput>
+
+    {#if templateInputs.length}
+        {#each templateInputs as input, i}
+            <CombinedInput>
+                <TextInput disabled value={input.name} style="width: 50%;" />
+                <TextInput disabled={!!input.value} placeholder={$dictionary.variables?.value} value={(value.templateValues?.[i] || input).value} on:change={(e) => setTemplateValue(i, e)} />
+            </CombinedInput>
+        {/each}
+    {:else}
+        <DynamicList
+            addDisabled={!!customTemplateInputs?.find((a) => !a.name && !a.value)}
+            items={customTemplateInputs}
+            let:item={input}
+            on:add={createTemplateValue}
+            on:delete={(e) => removeTemplateValue(e.detail)}
+            allowOpen={false}
+            nothingText={false}
+        >
+            <div style="display: flex;width: 100%;">
+                <TextInput placeholder={$dictionary.inputs?.name} value={input.name} on:change={(e) => setTemplateValue(input.id, e, "name")} style="width: 50%;" />
+                <TextInput placeholder={$dictionary.variables?.value} value={input.value} on:change={(e) => setTemplateValue(input.id, e, "value")} />
+            </div>
+        </DynamicList>
+    {/if}
+{/if}
diff --git a/src/frontend/components/actions/CreateAction.svelte b/src/frontend/components/actions/CreateAction.svelte
index 8477b08a..3adebbb6 100644
--- a/src/frontend/components/actions/CreateAction.svelte
+++ b/src/frontend/components/actions/CreateAction.svelte
@@ -25,38 +25,25 @@
         pickAction = false
     }
 
-    const removeFromSlideAction = [
-        "next_project_item",
-        "previous_project_item",
-        "name_select_show",
-        "next_slide",
-        "previous_slide",
-        "random_slide",
-        "index_select_slide",
-        "name_select_slide",
-        "id_select_group",
-        "lock_output",
-        "toggle_output_windows",
-        "restore_output",
-        "clear_all",
-        "clear_slide",
-        "clear_next_timer",
-        "name_select_overlay",
-        "name_start_timer",
-        "id_start_timer",
-        "playlist_next",
-        "id_select_output_style",
-        "id_select_stage_layout",
-        "change_stage_output_layout",
-        "change_transition",
-        "change_variable",
-        "start_camera",
-        "toggle_action",
-        "send_rest_command",
+    const slideActions = [
+        "start_show",
+        "set_template",
+        "clear_background",
+        "clear_overlays",
+        "clear_audio",
+        "change_volume",
+        "start_audio_stream",
+        "start_playlist",
+        "start_metronome",
+        "start_slide_timers",
+        "stop_timers",
+        "start_slide_recording",
+        "change_output_style",
+        "start_trigger",
+        "send_midi",
     ]
     // remove actions that are not fully implemented to CustomInput yet
     const removeActions = ["change_transition"]
-    if (list) removeActions.push(...removeFromSlideAction)
     if ($popupData.mode !== "template") removeActions.push("run_action")
 
     $: ACTIONS = [
@@ -82,7 +69,9 @@
                 // if (actionData[actionId]?.input) return true
                 // remove already added or custom ones
                 if (removeActions.includes(id) || existingActions.includes(id)) return false
-                if (list && id.includes("index_select")) return false
+                // custom slide actions list
+                if (list && !slideActions.includes(id)) return false
+                // if (list && id.includes("index_select")) return false
                 return true
             }),
         // custom special
@@ -137,7 +126,7 @@
         </div>
     {/if}
 {:else}
-    <CombinedInput>
+    <CombinedInput style={actionNameIndex > 1 || !actionId ? "border-top: 2px solid var(--primary-lighter);" : ""}>
         <p style="font-weight: 600;">
             <T id="midi.start_action" />
             <span style="color: var(--secondary);display: flex;align-items: center;margin-left: 8px;">
diff --git a/src/frontend/components/actions/CustomInput.svelte b/src/frontend/components/actions/CustomInput.svelte
index f9487951..2e5cb771 100644
--- a/src/frontend/components/actions/CustomInput.svelte
+++ b/src/frontend/components/actions/CustomInput.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
     import { createEventDispatcher, onMount } from "svelte"
-    import type { Option } from "../../../types/Main"
     import { activePopup, audioPlaylists, audioStreams, dictionary, groups, midiIn, outputs, popupData, shows, stageShows, styles, templates, timers, triggers, variables } from "../../stores"
+    import MetronomeInputs from "../drawer/audio/MetronomeInputs.svelte"
     import T from "../helpers/T.svelte"
-    import { keysToID, sortByName } from "../helpers/array"
-    import { _show } from "../helpers/shows"
+    import { convertToOptions, keysToID, sortByName } from "../helpers/array"
     import Button from "../inputs/Button.svelte"
     import Checkbox from "../inputs/Checkbox.svelte"
     import CombinedInput from "../inputs/CombinedInput.svelte"
@@ -14,8 +13,8 @@
     import MidiValues from "./MidiValues.svelte"
     import RestValues from "./RestValues.svelte"
     import ChooseStyle from "./specific/ChooseStyle.svelte"
-    import MetronomeInputs from "../drawer/audio/MetronomeInputs.svelte"
     import VariableInputs from "./specific/VariableInputs.svelte"
+    import ChooseEmitter from "./ChooseEmitter.svelte"
 
     export let inputId: string
     export let value
@@ -44,11 +43,6 @@
         updateValue("value", { detail: e.target.checked })
     }
 
-    function convertToOptions(object) {
-        let options: Option[] = Object.keys(object).map((id) => ({ id, name: object[id].name }))
-        return sortByName(options)
-    }
-
     $: if (list && actionId === "start_show" && !value?.id) openSelectShow()
     function openSelectShow() {
         popupData.set({ ...$popupData, action: "select_show", revert: $activePopup, active: value?.id, actionIndex })
@@ -77,6 +71,7 @@
         start_trigger: () => convertToOptions($triggers),
         run_action: () => convertToOptions($midiIn).filter((a) => a.name && a.id !== mainId),
         set_template: () => convertToOptions($templates),
+        toggle_output: () => convertToOptions($outputs),
     }
 
     $: options = getOptions[actionId]?.() || []
@@ -102,7 +97,9 @@
         <Dropdown style="width: 100%;" value={cameras.find((a) => a.id === value?.id)?.name || "—"} options={cameras} on:click={(e) => updateValue("", e.detail)} />
     </CombinedInput>
 {:else if inputId === "midi"}
-    <MidiValues midi={value?.midi || {}} type="output" on:change={(e) => updateValue("midi", e)} />
+    <h3><T id="midi.midi" /></h3>
+
+    <MidiValues value={value?.midi || {}} type="output" on:change={(e) => updateValue("midi", e)} />
 {:else if inputId === "metronome"}
     <div class="column">
         <MetronomeInputs values={value || { tempo: 120, beats: 4 }} on:change={(e) => updateValue("", e)} volume={false} />
@@ -120,7 +117,9 @@
         </div>
     </CombinedInput>
 {:else if inputId === "rest"}
-    <RestValues rest={value || {}} on:change={(e) => updateValue("", e)} />
+    <RestValues value={value || {}} on:change={(e) => updateValue("", e)} />
+{:else if inputId === "emitter"}
+    <ChooseEmitter {value} on:change={(e) => updateValue("", e)} />
 {:else}
     <CombinedInput style={inputId === "midi" ? "flex-direction: column;" : ""}>
         {#if inputId === "index"}
@@ -164,4 +163,12 @@
         display: flex;
         flex-direction: column;
     }
+
+    h3 {
+        color: var(--text);
+        text-transform: uppercase;
+        text-align: center;
+        font-size: 0.9em;
+        margin: 20px 0;
+    }
 </style>
diff --git a/src/frontend/components/actions/MidiValues.svelte b/src/frontend/components/actions/MidiValues.svelte
index b4d0aedc..d069ef3e 100644
--- a/src/frontend/components/actions/MidiValues.svelte
+++ b/src/frontend/components/actions/MidiValues.svelte
@@ -13,10 +13,11 @@
     import { uid } from "uid"
     import type { API_midi } from "./api"
 
-    export let midi: API_midi
+    export let value: API_midi
     export let firstActionId: string = ""
     export let type: "input" | "output" = "input"
     export let playSlide: boolean = false
+    $: midi = value
 
     $: hasActions = !!firstActionId
 
@@ -104,14 +105,6 @@
     $: noActionOrDefaultValues = !hasActions || (midi.defaultValues && defaultMidiActionChannels[firstActionId])
 </script>
 
-{#if type !== "output"}
-    {#if playSlide}
-        <p style="opacity: 0.8;font-size: 0.8em;text-align: center;margin-bottom: 20px;"><T id="actions.play_on_midi_tip" /></p>
-    {:else}
-        <h3><T id="midi.midi" /></h3>
-    {/if}
-{/if}
-
 <CombinedInput>
     {#if type === "input"}
         <p><T id="midi.input" /></p>
@@ -173,13 +166,3 @@
     <p><T id="midi.channel" /></p>
     <NumberInput value={midi.values?.channel ?? 1} min={1} max={16} on:change={(e) => setValues("channel", Number(e.detail))} disabled={noActionOrDefaultValues && type !== "output" && !playSlide} />
 </CombinedInput>
-
-<style>
-    h3 {
-        color: var(--text);
-        text-transform: uppercase;
-        text-align: center;
-        font-size: 0.9em;
-        margin: 20px 0;
-    }
-</style>
diff --git a/src/frontend/components/actions/RestValues.svelte b/src/frontend/components/actions/RestValues.svelte
index f05c92e5..bbb29b15 100644
--- a/src/frontend/components/actions/RestValues.svelte
+++ b/src/frontend/components/actions/RestValues.svelte
@@ -8,7 +8,16 @@
 
     import type { API_rest_command } from "./api"
 
-    export let rest: API_rest_command
+    export let value: API_rest_command
+    export let emitter: boolean = false
+    $: rest = value
+
+    // const REST_MESSAGE_INPUTS: Input[] = [
+    //     {name: "inputs.url", id: "url", type: "string", value: ""},
+    //     {name: "inputs.method", id: "method", type: "dropdown", value: "GET", options: [{ name: "GET" }, { name: "POST" }, { name: "PUT" }, { name: "DELETE" }]},
+    //     {name: "inputs.contentType", id: "contentType", type: "string", value: "application/json"},
+    //     {name: "inputs.payload", id: "payload", type: "string", value: "{}"},
+    // ]
 
     /**
      * onChange Handler for URL component
@@ -77,14 +86,16 @@
 <!-- ContentType -->
 <CombinedInput>
     <p><T id="inputs.contentType" /></p>
-    <TextInput value={rest.contentType || ""} placeholder={"application/json"} on:change={(e) => updateContentType(e)} />
+    <TextInput disabled={emitter} value={rest.contentType || ""} placeholder={"application/json"} on:change={(e) => updateContentType(e)} />
 </CombinedInput>
 
 <!-- Body -->
-<CombinedInput>
-    <p><T id="inputs.payload" /></p>
-    <TextInput value={rest.payload || ""} placeholder={"{}"} on:change={(e) => updatePayload(e)} />
-</CombinedInput>
+{#if !emitter}
+    <CombinedInput>
+        <p><T id="inputs.payload" /></p>
+        <TextInput value={rest.payload || ""} placeholder={"{}"} on:change={(e) => updatePayload(e)} />
+    </CombinedInput>
+{/if}
 
 <!--
 TODO: Better Namings
diff --git a/src/frontend/components/actions/actionData.ts b/src/frontend/components/actions/actionData.ts
index 388250f3..0cc5c7d0 100644
--- a/src/frontend/components/actions/actionData.ts
+++ b/src/frontend/components/actions/actionData.ts
@@ -65,8 +65,11 @@ export const actionData = {
     send_midi: { slideId: "sendMidi", name: "actions.send_midi", icon: "music", input: "midi" },
     run_action: { name: "actions.run_action", icon: "actions", input: "id" },
     toggle_action: { name: "actions.toggle_action", icon: "actions", input: "toggle_action" },
+    toggle_output: { name: "actions.toggle_output", icon: "outputs", input: "id" },
     send_rest_command: { name: "actions.send_rest_command", icon: "trigger", input: "rest" },
 
+    emit_action: { name: "actions.emit_data", icon: "emitter", input: "emitter" },
+
     // CUSTOM
     wait: { name: "animate.wait", icon: "time_in", input: "number" },
 }
diff --git a/src/frontend/components/actions/actions.ts b/src/frontend/components/actions/actions.ts
index 6a1eded6..0e33a645 100644
--- a/src/frontend/components/actions/actions.ts
+++ b/src/frontend/components/actions/actions.ts
@@ -111,7 +111,13 @@ export function checkStartupActions() {
 export function customActionActivation(id: string) {
     Object.keys(get(midiIn)).forEach((actionId) => {
         let action: any = get(midiIn)[actionId]
-        if (action.customActivation === id && action.enabled !== false) runAction(action)
+        let customActivation = id.split("___")[0]
+        let specificActivation = id.split("___")[1]
+
+        if (action.customActivation !== customActivation || action.enabled === false) return
+        if (specificActivation && action.specificActivation?.includes(customActivation) && action.specificActivation.split("__")[1] !== specificActivation) return
+
+        runAction(action)
     })
 }
 
@@ -142,7 +148,7 @@ export function slideHasAction(actions: any, key: string) {
 }
 
 export function getActionIcon(id: string) {
-    let actions = get(midiIn)[id]?.triggers
+    let actions = get(midiIn)[id]?.triggers || {}
     if (actions.length > 1) return "actions"
     return actionData[actions[0]]?.icon || "actions"
 }
diff --git a/src/frontend/components/actions/api.ts b/src/frontend/components/actions/api.ts
index 5f4f966a..dd3541f6 100644
--- a/src/frontend/components/actions/api.ts
+++ b/src/frontend/components/actions/api.ts
@@ -1,11 +1,11 @@
 import { MAIN } from "../../../types/Channels"
-import type { TransitionType } from "../../../types/Show"
+import type { MidiValues, TransitionType } from "../../../types/Show"
 import { send } from "../../utils/request"
 import { updateTransition } from "../../utils/transitions"
 import { startMetronome } from "../drawer/audio/metronome"
 import { audioPlaylistNext, clearAudio, startPlaylist, updateVolume } from "../helpers/audio"
 import { getSlideThumbnail, getThumbnail } from "../helpers/media"
-import { changeStageOutputLayout, displayOutputs, startCamera } from "../helpers/output"
+import { changeStageOutputLayout, displayOutputs, startCamera, toggleOutput } from "../helpers/output"
 import { activateTriggerSync, changeOutputStyle, nextSlideIndividual, playSlideTimers, previousSlideIndividual, randomSlide, selectProjectShow, sendMidi, startAudioStream, startShowSync } from "../helpers/showActions"
 import { playSlideRecording } from "../helpers/slideRecording"
 import { startTimerById, startTimerByName, stopTimers } from "../helpers/timerTick"
@@ -18,8 +18,14 @@ import {
     changeShowLayout,
     changeVariable,
     getClearedState,
+    getOutput,
     getPlainText,
+    getPlayingAudioTime,
+    getPlayingPlaylist,
+    getPlayingVideoTime,
+    getPlaylists,
     getShowGroups,
+    getSlide,
     gotoGroup,
     moveStageConnection,
     playMedia,
@@ -30,11 +36,13 @@ import {
     selectShowByName,
     selectSlideByIndex,
     selectSlideByName,
+    setShowAPI,
     setTemplate,
     startScripture,
     toggleLock,
 } from "./apiHelper"
 import { oscToAPI } from "./apiOSC"
+import { emitData } from "./emitters"
 import { sendRestCommandSync } from "./rest"
 
 /// STEPS TO CREATE A CUSTOM API ACTION ///
@@ -61,11 +69,12 @@ interface API {
     returnId?: string
 }
 type API_id = { id: string }
+export type API_id_optional = { id?: string }
 type API_index = { index: number }
 type API_boolval = { value?: boolean }
 type API_strval = { value: string }
 type API_volume = { volume?: number; gain?: number } // no values will mute/unmute
-type API_slide = { showId?: string | "active"; slideId?: string }
+export type API_slide = { showId?: string | "active"; slideId?: string }
 export type API_id_value = { id: string; value: string }
 export type API_rearrange = { showId: string; from: number; to: number }
 export type API_group = { showId: string; groupId: string }
@@ -92,15 +101,8 @@ export type API_variable = {
     value?: string | number | boolean
     variableAction?: "increment" | "decrement"
 }
-export type API_midi = {
-    input?: string
-    output?: string
+export interface API_midi extends MidiValues {
     type: "noteon" | "noteoff"
-    values: {
-        note: number
-        velocity: number
-        channel: number
-    }
     defaultValues?: boolean // only used by actions
 }
 export type API_metronome = {
@@ -108,6 +110,7 @@ export type API_metronome = {
     beats?: number
     volume?: number
     // notesPerBeat?: number
+    audioOutput?: string
 }
 export type API_rest_command = {
     url: string
@@ -115,6 +118,11 @@ export type API_rest_command = {
     contentType: string
     payload: string
 }
+export type API_emitter = {
+    emitter: string
+    template?: string
+    templateValues?: { name: string; value: string }[]
+}
 
 /// ACTIONS ///
 
@@ -132,6 +140,7 @@ export const API_ACTIONS = {
     start_show: (data: API_id) => startShowSync(data.id),
     change_layout: (data: API_layout) => changeShowLayout(data),
     set_plain_text: (data: API_id_value) => formatText(data.value, data.id),
+    set_show: (data: API_id_value) => setShowAPI(data.id, data.value),
     rearrange_groups: (data: API_rearrange) => rearrangeGroups(data),
     add_group: (data: API_group) => addGroup(data),
     set_template: (data: API_id) => setTemplate(data.id),
@@ -209,7 +218,10 @@ export const API_ACTIONS = {
     send_midi: (data: API_midi) => sendMidi(data),
     run_action: (data: API_id) => runActionId(data.id),
     toggle_action: (data: API_toggle) => toggleAction(data),
-    send_rest_command: (data: API_rest_command) => sendRestCommandSync(data),
+    toggle_output: (data: API_id) => toggleOutput(data.id),
+    send_rest_command: (data: API_rest_command) => sendRestCommandSync(data), // DEPRECATED, use emit_action instead
+
+    emit_action: (data: API_emitter) => emitData(data),
 
     // GET
     get_shows: () => getShows(),
@@ -219,6 +231,13 @@ export const API_ACTIONS = {
     get_plain_text: (data: API_id) => getPlainText(data.id),
     get_groups: (data: API_id) => getShowGroups(data.id),
 
+    get_output: (data: API_id_optional) => getOutput(data),
+    get_playing_video_time: () => getPlayingVideoTime(),
+    get_playing_audio_time: () => getPlayingAudioTime(),
+    get_playlists: () => getPlaylists(),
+    get_playlist: (data: API_id_optional) => getPlayingPlaylist(data),
+    get_slide: (data: API_slide) => getSlide(data),
+
     get_thumbnail: (data: API_media) => getThumbnail(data),
     get_slide_thumbnail: (data: API_slide_thumbnail) => getSlideThumbnail(data),
     get_cleared: () => getClearedState(),
@@ -240,7 +259,7 @@ export async function triggerAction(data: API) {
     let returnId = data.returnId
     delete data.returnId
     const returnData = await API_ACTIONS[id](data)
-    if (!returnId || !returnData) return
+    if (!returnId || returnData === undefined) return
 
     send(MAIN, ["API_TRIGGER"], { ...data, returnId, data: returnData })
 }
diff --git a/src/frontend/components/actions/apiHelper.ts b/src/frontend/components/actions/apiHelper.ts
index 925a52f9..56ad030e 100644
--- a/src/frontend/components/actions/apiHelper.ts
+++ b/src/frontend/components/actions/apiHelper.ts
@@ -4,7 +4,9 @@ import {
     activeDrawerTab,
     activeEdit,
     activePage,
+    activePlaylist,
     activeProject,
+    audioPlaylists,
     dictionary,
     groupNumbers,
     groups,
@@ -23,6 +25,7 @@ import {
     sortedShowsList,
     styles,
     variables,
+    videosTime,
 } from "../../stores"
 import { newToast } from "../../utils/common"
 import { send } from "../../utils/request"
@@ -33,14 +36,14 @@ import { history } from "../helpers/history"
 import { setDrawerTabData } from "../helpers/historyHelpers"
 import { getMediaStyle } from "../helpers/media"
 import { getActiveOutputs, getCurrentStyle, isOutCleared, setOutput } from "../helpers/output"
-import { loadShows } from "../helpers/setShow"
+import { loadShows, setShow } from "../helpers/setShow"
 import { getLabelId } from "../helpers/show"
 import { playNextGroup, updateOut } from "../helpers/showActions"
 import { _show } from "../helpers/shows"
 import { getPlainEditorText } from "../show/getTextEditor"
 import { getSlideGroups } from "../show/tools/groups"
 import { activeShow } from "./../../stores"
-import type { API_group, API_id_value, API_layout, API_media, API_rearrange, API_scripture, API_variable } from "./api"
+import type { API_group, API_id_optional, API_id_value, API_layout, API_media, API_rearrange, API_scripture, API_slide, API_variable } from "./api"
 
 // WIP combine with click() in ShowButton.svelte
 export function selectShowByName(name: string) {
@@ -207,7 +210,8 @@ function updateVariable(value: any, id: string, key: string) {
 
 // SHOW
 
-export function changeShowLayout(data: API_layout) {
+export async function changeShowLayout(data: API_layout) {
+    await loadShows([data.showId])
     showsCache.update((a) => {
         if (!a[data.showId]?.layouts[data.layoutId]) return a
 
@@ -216,6 +220,15 @@ export function changeShowLayout(data: API_layout) {
     })
 }
 
+export async function setShowAPI(id: string, value: string) {
+    await loadShows([id])
+    try {
+        setShow(id, JSON.parse(value))
+    } catch (err) {
+        console.error(err)
+    }
+}
+
 export async function getPlainText(id: string) {
     await loadShows([id])
     return { id, value: getPlainEditorText(id) } as API_id_value
@@ -293,6 +306,40 @@ export function startScripture(data: API_scripture) {
     setTimeout(() => playScripture.set(true), 500)
 }
 
+///
+
+export function getOutput(data: API_id_optional) {
+    let outputId = data?.id || getActiveOutputs(get(outputs))[0]
+    let output = get(outputs)[outputId]
+    return output?.out || null
+}
+
+export function getPlayingVideoTime() {
+    let outputId = getActiveOutputs(get(outputs))[0]
+    let time = get(videosTime)[outputId]
+    return time || 0
+}
+
+export function getPlayingAudioTime() {
+    let audio = Object.values(get(playingAudio))[0]?.audio
+    return audio ? audio?.currentTime || 0 : 0
+}
+
+export function getPlaylists() {
+    return get(audioPlaylists)
+}
+
+export function getPlayingPlaylist(data: API_id_optional) {
+    let id = data?.id || get(activePlaylist)?.id
+    return get(audioPlaylists)[id] ? { ...get(audioPlaylists)[id], id } : null
+}
+
+export function getSlide(data: API_slide) {
+    let slides = _show(data.showId || "active").get("slides") || {}
+    let slide = slides[data.slideId || Object.keys(slides)[0]]
+    return slide || null
+}
+
 // MEDIA
 
 export function playMedia(data: API_media) {
diff --git a/src/frontend/components/actions/apiOSC.ts b/src/frontend/components/actions/apiOSC.ts
index 62a39994..c77bc2d0 100644
--- a/src/frontend/components/actions/apiOSC.ts
+++ b/src/frontend/components/actions/apiOSC.ts
@@ -1,3 +1,6 @@
+import { MAIN } from "../../../types/Channels"
+import { send } from "../../utils/request"
+
 // Examples: /show/<id>/start | /slide/next | /clear/all
 const oscActions = {
     // project: {
@@ -78,3 +81,8 @@ function parsePath(path) {
 
     return currentPath
 }
+
+export type OSC_SIGNAL = { url?: string; port?: string }
+export function emitOSC(signal: OSC_SIGNAL, data: string) {
+    send(MAIN, ["EMIT_OSC"], { signal, data })
+}
diff --git a/src/frontend/components/actions/emitters.ts b/src/frontend/components/actions/emitters.ts
new file mode 100644
index 00000000..7af2b965
--- /dev/null
+++ b/src/frontend/components/actions/emitters.ts
@@ -0,0 +1,77 @@
+import { get } from "svelte/store"
+import type { Input } from "../../../types/Input"
+import type { EmitterInputs, EmitterTemplateValue, EmitterTypes } from "../../../types/Show"
+import { emitters } from "../../stores"
+import { INPUT_MIDI, INPUT_REST } from "../input/inputs"
+import type { API_emitter, API_rest_command } from "./api"
+import { sendRestCommandSync } from "./rest"
+import { emitOSC, type OSC_SIGNAL } from "./apiOSC"
+
+export const OSC_SIGNAL_INPUTS: Input[] = [
+    { name: "inputs.url", id: "host", type: "string", value: "localhost" }, // ws://localhost
+    { name: "settings.port", id: "port", type: "number", value: 8080, settings: { max: 65535, buttons: false } },
+]
+
+export const emitterData: { [key in EmitterTypes]: EmitterInputs } = {
+    osc: {
+        signal: OSC_SIGNAL_INPUTS,
+    },
+    http: {
+        signal: [{ ...INPUT_REST, settings: { emitter: true } }],
+    },
+    midi: {
+        signal: [INPUT_MIDI],
+    },
+}
+
+function valueArrayToObject(values: EmitterTemplateValue[], removeEmptyValues: boolean = false) {
+    let valueObject: { [key: string]: string } = {}
+    values.forEach(({ name, value }) => {
+        if (!name || (removeEmptyValues && !value)) return
+        valueObject[name] = value
+    })
+    return valueObject
+}
+
+export const formatData = {
+    osc: (values: EmitterTemplateValue[]) => "/" + Object.values(valueArrayToObject(values, true)).join("/"),
+    http: (values: EmitterTemplateValue[]) => JSON.stringify(valueArrayToObject(values)),
+}
+
+const EMIT_DATA = {
+    osc: (signal: OSC_SIGNAL, values: EmitterTemplateValue[]) => {
+        let OSC_DATA = formatData.osc(values)
+        emitOSC(signal, OSC_DATA)
+    },
+    http: (signal: API_rest_command, values: EmitterTemplateValue[]) => {
+        let REST_DATA = signal
+        REST_DATA.contentType = "application/json"
+        REST_DATA.payload = formatData.http(values)
+        sendRestCommandSync(REST_DATA)
+    },
+}
+
+export function emitData(data: API_emitter) {
+    let emitter = get(emitters)[data.emitter]
+    if (!data.emitter || !emitter) return
+
+    let emitterTemplateValues = data.template ? emitter.templates?.[data.template]?.inputs || [] : []
+
+    let values = emitterTemplateValues.map((a, i) => {
+        let customValue = data.templateValues?.[i]
+        if (a.value) return a
+        return customValue || a
+    })
+    if (!values.length) values = data.templateValues || []
+    if (!values.length) return
+
+    if (!EMIT_DATA[emitter.type]) {
+        console.error("Received unknown data emit type")
+        return
+    }
+
+    let signal: { [key: string]: any } = emitter.signal || {}
+    if (signal.value) signal = signal.value
+
+    EMIT_DATA[emitter.type](signal, values)
+}
diff --git a/src/frontend/components/actions/rest.ts b/src/frontend/components/actions/rest.ts
index 5c797dbc..d07c015a 100644
--- a/src/frontend/components/actions/rest.ts
+++ b/src/frontend/components/actions/rest.ts
@@ -37,6 +37,8 @@ export async function sendRestCommand(data: API_rest_command) {
         options.body = data.payload
     }
 
+    if (!data.url) return
+
     // Check if URL starts with HTTP or HTTPS, if not insert HTTP on default
     if (!(data.url.startsWith("http://") || data.url.startsWith("https://"))) {
         data.url = "http://" + data.url
diff --git a/src/frontend/components/actions/specific/ChooseStyle.svelte b/src/frontend/components/actions/specific/ChooseStyle.svelte
index d7e3d279..859e2d82 100644
--- a/src/frontend/components/actions/specific/ChooseStyle.svelte
+++ b/src/frontend/components/actions/specific/ChooseStyle.svelte
@@ -10,11 +10,11 @@
 
     export let value: API_output_style
 
-    let styleId: string = value.outputStyle || Object.keys($styles)[0]
-    $: if (!styleId) newToast("$toast.empty_styles")
+    let styleId: string = value.outputStyle || ""
+    $: if (!Object.keys($styles).length) newToast("$toast.empty_styles")
 
     let styleOutputs = value.styleOutputs || { type: "active" }
-    $: currentStyle = $styles[styleId]
+    $: currentStyle = $styles[styleId] || {}
 
     let outputsOptions = [
         { id: "active", name: "$:actions.active_outputs:$" },
@@ -63,6 +63,6 @@
 {:else}
     <CombinedInput>
         <p><T id="edit.style" /></p>
-        <Dropdown value={currentStyle.name} options={stylesList} on:click={(e) => updateStyle("outputStyle", e.detail.id)} />
+        <Dropdown value={currentStyle?.name || "—"} options={stylesList} on:click={(e) => updateStyle("outputStyle", e.detail.id)} />
     </CombinedInput>
 {/if}
diff --git a/src/frontend/components/context/ContextItem.svelte b/src/frontend/components/context/ContextItem.svelte
index 903f7c2a..fa68bc99 100644
--- a/src/frontend/components/context/ContextItem.svelte
+++ b/src/frontend/components/context/ContextItem.svelte
@@ -162,7 +162,13 @@
         },
         lock_to_output: () => {
             let id = $selected.data[0]
-            if ($overlays[id]?.locked) enabled = true
+            if ($overlays[id]?.displayDuration) disabled = true
+            else if ($overlays[id]?.locked) enabled = true
+        },
+        display_duration: () => {
+            let id = $selected.data[0]
+            if ($overlays[id]?.locked) disabled = true
+            else if ($overlays[id]?.displayDuration) enabled = true
         },
         move_to_front: () => {
             let previewOutputs = keysToID($outputs).filter((a) => a.enabled && !a.isKeyOutput)
@@ -217,7 +223,7 @@
         // don't hide context menu
         const keepOpen = ["uppercase", "lowercase", "capitalize", "trim"] // "dynamic_values" (caret position is lost)
         if (keepOpen.includes(id)) return
-        const keepOpenToggle = ["enabled_drawer_tabs", "tag_set", "tag_filter", "media_tag_set", "media_tag_filter", "bind_slide", "bind_item"]
+        const keepOpenToggle = ["enabled_drawer_tabs", "tag_set", "tag_filter", "media_tag_set", "media_tag_filter", "action_tag_set", "action_tag_filter", "bind_slide", "bind_item"]
         if (keepOpenToggle.includes(id)) {
             enabled = !enabled
             return
diff --git a/src/frontend/components/context/ContextMenu.svelte b/src/frontend/components/context/ContextMenu.svelte
index 5741a386..7431ac32 100644
--- a/src/frontend/components/context/ContextMenu.svelte
+++ b/src/frontend/components/context/ContextMenu.svelte
@@ -96,6 +96,7 @@
         if (id === "remove_layers") return $contextData.layers
         if (id === "tag_set" || id === "tag_filter") return $contextData.tags
         if (id === "media_tag_filter") return $contextData.media_tags
+        if (id === "action_tag_filter") return $contextData.action_tags
 
         return true
     }
diff --git a/src/frontend/components/context/contextMenus.ts b/src/frontend/components/context/contextMenus.ts
index 4e82a1bc..6fcd6b77 100644
--- a/src/frontend/components/context/contextMenus.ts
+++ b/src/frontend/components/context/contextMenus.ts
@@ -42,8 +42,12 @@ export const contextMenuItems: { [key: string]: ContextMenuItem } = {
     enabledTabs: { label: "context.enabledTabs", items: ["LOAD_enabled_drawer_tabs"] },
     tag_set: { label: "context.setTag", icon: "tag", items: ["LOAD_tag_set"] },
     tag_filter: { label: "context.filterByTags", icon: "tag", items: ["LOAD_tag_filter"] },
+    manage_media_tags: { label: "popup.manage_tags", icon: "edit" },
     media_tag_set: { label: "context.setTag", icon: "tag", items: ["LOAD_media_tag_set"] },
     media_tag_filter: { label: "context.filterByTags", icon: "tag", items: ["LOAD_media_tag_filter"] },
+    manage_action_tags: { label: "popup.manage_tags", icon: "edit" },
+    action_tag_set: { label: "context.setTag", icon: "tag", items: ["LOAD_action_tag_set"] },
+    action_tag_filter: { label: "context.filterByTags", icon: "tag", items: ["LOAD_action_tag_filter"] },
     newCategory: { label: "context.newCategory", icon: "add" },
     newScripture: { label: "new.scripture", icon: "add" },
     createCollection: { label: "new.collection", icon: "collection" },
@@ -136,6 +140,7 @@ export const contextMenuItems: { [key: string]: ContextMenuItem } = {
     // OVERLAYS
     lock_to_output: { label: "context.lock_to_output", icon: "locked" },
     place_under_slide: { label: "context.place_under_slide", icon: "under" },
+    display_duration: { label: "popup.display_duration", icon: "clock" },
     // TEMPLATES
     template_actions: { label: "tabs.actions", icon: "actions" },
     // STAGE
@@ -199,10 +204,10 @@ export const contextMenuLayouts: { [key: string]: string[] } = {
     midi: ["play", "SEPERATOR", "edit", "delete"],
     // , "addToShow"
     // show_in_explorer!!
-    media: ["media_tag_filter"],
+    media: ["manage_media_tags", "media_tag_filter"],
     media_card: ["addToProject", "SEPERATOR", "edit", "preview", "favourite", "SEPERATOR", "play_no_audio", "play_no_filters", "SEPERATOR", "media_tag_set", "media_tag_filter", "SEPERATOR", "system_open"],
     // "addToFirstSlide",
-    overlay_card: ["edit", "preview", "SEPERATOR", "lock_to_output", "place_under_slide", "SEPERATOR", "rename", "recolor", "duplicate", "delete"],
+    overlay_card: ["edit", "preview", "SEPERATOR", "display_duration", "SEPERATOR", "lock_to_output", "place_under_slide", "SEPERATOR", "rename", "recolor", "duplicate", "delete"],
     // "addToShow",
     template_card: ["edit", "SEPERATOR", "template_actions", "SEPERATOR", "rename", "recolor", "duplicate", "delete", "SEPERATOR", "export"],
     effect_card: ["edit"],
@@ -212,7 +217,8 @@ export const contextMenuLayouts: { [key: string]: string[] } = {
     // "addToFirstSlide"
     live_card: ["recording"],
     // actions
-    action: ["duplicate"],
+    actions: ["manage_action_tags", "action_tag_filter"],
+    action: ["duplicate", "SEPERATOR", "action_tag_set", "action_tag_filter"],
     scripture_verse: ["create_show", "SEPERATOR", "selectAll"],
     scripture_chapter: ["create_show"],
 
@@ -257,6 +263,8 @@ export const contextMenuLayouts: { [key: string]: string[] } = {
     meta_message: ["dynamic_values"],
 
     // MEDIA
+    video_subtitle: ["rename", "delete"],
+    video_subtitle_embedded: ["rename"],
     video_marker: ["rename", "delete"],
 
     // STAGE
diff --git a/src/frontend/components/context/loadItems.ts b/src/frontend/components/context/loadItems.ts
index 3ed466d0..10d4e501 100644
--- a/src/frontend/components/context/loadItems.ts
+++ b/src/frontend/components/context/loadItems.ts
@@ -1,5 +1,5 @@
 import { get } from "svelte/store"
-import { activeEdit, activeMediaTagFilter, activeTagFilter, contextData, drawerTabsData, globalTags, groups, media, mediaTags, outputs, overlays, selected, shows, sorted } from "../../stores"
+import { actionTags, activeActionTagFilter, activeEdit, activeMediaTagFilter, activeTagFilter, contextData, drawerTabsData, globalTags, groups, media, mediaTags, midiIn, outputs, overlays, selected, shows, sorted } from "../../stores"
 import { translate } from "../../utils/language"
 import { drawerTabs } from "../../values/tabs"
 import { actionData } from "../actions/actionData"
@@ -22,6 +22,8 @@ const loadActions = {
 
         return items
     },
+
+    // TAGS
     tag_set: () => {
         let selectedShowTags = get(shows)[get(selected).data[0]?.id]?.quickAccess?.tags || []
         let sortedTags = sortObject(sortByName(keysToID(get(globalTags))), "color").map((a) => ({ ...a, label: a.name, enabled: selectedShowTags.includes(a.id), translate: false }))
@@ -46,6 +48,20 @@ const loadActions = {
         setContextData("media_tags", sortedTags.length)
         return sortedTags
     },
+    action_tag_set: () => {
+        let selectedTags = get(midiIn)[get(selected).data[0]?.id]?.tags || []
+        let sortedTags = sortObject(sortByName(keysToID(get(actionTags))), "color").map((a) => ({ ...a, label: a.name, enabled: selectedTags.includes(a.id), translate: false }))
+        const create = { label: "popup.manage_tags", icon: "edit", id: "create" }
+        if (sortedTags.length) sortedTags.push("SEPERATOR")
+        sortedTags.push(create)
+        return sortedTags
+    },
+    action_tag_filter: () => {
+        let sortedTags = sortObject(sortByName(keysToID(get(actionTags))), "color").map((a) => ({ ...a, label: a.name, enabled: get(activeActionTagFilter).includes(a.id), translate: false }))
+        setContextData("action_tags", sortedTags.length)
+        return sortedTags
+    },
+
     sort_shows: (items: ContextMenuItem[]) => sortItems(items, "shows"),
     sort_projects: (items: ContextMenuItem[]) => sortItems(items, "projects"),
     slide_groups: (items: ContextMenuItem[]) => {
diff --git a/src/frontend/components/context/menuClick.ts b/src/frontend/components/context/menuClick.ts
index 1fa357ac..9cef4567 100644
--- a/src/frontend/components/context/menuClick.ts
+++ b/src/frontend/components/context/menuClick.ts
@@ -6,6 +6,7 @@ import type { Item, Slide } from "../../../types/Show"
 import { changeSlideGroups, mergeSlides, mergeTextboxes, splitItemInTwo } from "../../show/slides"
 import {
     $,
+    activeActionTagFilter,
     activeDrawerTab,
     activeEdit,
     activeFocus,
@@ -31,6 +32,7 @@ import {
     guideActive,
     media,
     mediaFolders,
+    midiIn,
     outLocked,
     outputs,
     overlayCategories,
@@ -73,7 +75,7 @@ import { copy, cut, deleteAction, duplicate, paste, selectAll } from "../helpers
 import { GetLayoutRef } from "../helpers/get"
 import { history, HistoryPages, redo, undo } from "../helpers/history"
 import { getExtension, getFileName, getMediaStyle, getMediaType, removeExtension } from "../helpers/media"
-import { defaultOutput, getActiveOutputs, getCurrentStyle, setOutput } from "../helpers/output"
+import { defaultOutput, getActiveOutputs, getCurrentStyle, setOutput, toggleOutput } from "../helpers/output"
 import { select } from "../helpers/select"
 import { removeTemplatesFromShow, updateShowsList } from "../helpers/show"
 import { dynamicValueText, sendMidi } from "../helpers/showActions"
@@ -147,6 +149,7 @@ const actions: any = {
         else if (id === "slide" || id === "group") activePopup.set("rename")
         else if (id === "show") activeRename.set("show_" + data.id + "#" + data.index)
         else if (obj.contextElem?.classList?.contains("#project_template")) activeRename.set("project_" + id)
+        else if (obj.contextElem?.classList?.contains("#video_subtitle")) activeRename.set("subtitle_" + id)
         else if (obj.contextElem?.classList?.contains("#video_marker")) activeRename.set("marker_" + id)
         else if (id?.includes("category")) activeRename.set("category_" + get(activeDrawerTab) + "_" + data)
         else console.log("Missing rename", obj)
@@ -197,6 +200,10 @@ const actions: any = {
             deleteAction({ id: "project_template", data: [{ id: obj.contextElem.id }] })
             return
         }
+        if (obj.contextElem?.classList.value.includes("#video_subtitle")) {
+            deleteAction({ id: "video_subtitle", data: { index: obj.contextElem.id } })
+            return
+        }
         if (obj.contextElem?.classList.value.includes("#video_marker")) {
             deleteAction({ id: "video_marker", data: { index: obj.contextElem.id } })
             return
@@ -245,6 +252,8 @@ const actions: any = {
         })
         return m
     },
+
+    // TAGS
     tag_set: (obj: any) => {
         let tagId = obj.menu.id
 
@@ -288,12 +297,15 @@ const actions: any = {
 
         activeTagFilter.set(activeTags || [])
     },
+    manage_media_tags: () => {
+        contextActive.set(false)
+        popupData.set({ type: "media" })
+        activePopup.set("manage_tags")
+    },
     media_tag_set: (obj: any) => {
         let tagId = obj.menu.id
         if (tagId === "create") {
-            contextActive.set(false)
-            popupData.set({ type: "media" })
-            activePopup.set("manage_tags")
+            actions.manage_media_tags()
             return
         }
 
@@ -326,6 +338,47 @@ const actions: any = {
 
         activeMediaTagFilter.set(activeTags || [])
     },
+    manage_action_tags: () => {
+        contextActive.set(false)
+        popupData.set({ type: "action" })
+        activePopup.set("manage_tags")
+    },
+    action_tag_set: (obj: any) => {
+        let tagId = obj.menu.id
+        if (tagId === "create") {
+            actions.manage_action_tags()
+            return
+        }
+
+        let disable = get(midiIn)[get(selected).data[0]?.id]?.tags?.includes(tagId)
+
+        obj.sel.data?.forEach(({ id }) => {
+            let tags = get(midiIn)[id]?.tags || []
+
+            let existingIndex = tags.indexOf(tagId)
+            if (disable) {
+                if (existingIndex > -1) tags.splice(existingIndex, 1)
+            } else {
+                if (existingIndex < 0) tags.push(tagId)
+            }
+
+            midiIn.update((a) => {
+                if (a[id]) a[id].tags = tags
+                return a
+            })
+        })
+    },
+    action_tag_filter: (obj: any) => {
+        let tagId = obj.menu.id
+
+        let activeTags = get(activeActionTagFilter)
+        let currentIndex = activeTags.indexOf(tagId)
+        if (currentIndex < 0) activeTags.push(tagId)
+        else activeTags.splice(currentIndex, 1)
+
+        activeActionTagFilter.set(activeTags || [])
+    },
+
     addToProject: (obj: any) => {
         if ((obj.sel.id !== "show" && obj.sel.id !== "show_drawer" && obj.sel.id !== "player" && obj.sel.id !== "media" && obj.sel.id !== "audio") || !get(activeProject)) return
 
@@ -425,7 +478,7 @@ const actions: any = {
     },
     toggle_output: (obj: any) => {
         let id: string = obj.contextElem.id
-        send(OUTPUT, ["DISPLAY"], { enabled: "toggle", one: true, output: { id, ...get(outputs)[id] } })
+        toggleOutput(id)
     },
     move_to_front: (obj: any) => {
         send(OUTPUT, ["TO_FRONT"], obj.contextElem.id)
@@ -928,6 +981,9 @@ const actions: any = {
             return a
         })
     },
+    display_duration: () => {
+        activePopup.set("display_duration")
+    },
 
     // stage
     move_connections: (obj: any) => {
diff --git a/src/frontend/components/drawer/audio/Audio.svelte b/src/frontend/components/drawer/audio/Audio.svelte
index fcfd36d3..fdb9c119 100644
--- a/src/frontend/components/drawer/audio/Audio.svelte
+++ b/src/frontend/components/drawer/audio/Audio.svelte
@@ -133,6 +133,7 @@
 
     function createPlaylist() {
         let playlistName = ""
+        let empty = isDefault || !fullFilteredFiles.filter((a) => !a.folder)?.length
         if (!isDefault) {
             playlistName = name
             if (name.includes(".")) playlistName = $dictionary.category?.[name.slice(name.indexOf(".") + 1)] || ""
@@ -142,7 +143,7 @@
         audioPlaylists.update((a) => {
             a[playlistId] = {
                 name: playlistName,
-                songs: isDefault ? [] : fullFilteredFiles.filter((a) => !a.folder).map((a) => a.path),
+                songs: empty ? [] : fullFilteredFiles.filter((a) => !a.folder).map((a) => a.path),
             }
 
             return a
@@ -153,7 +154,7 @@
             return a
         })
 
-        if (isDefault) {
+        if (empty) {
             activeRename.set("category_audio_" + playlistId)
         }
     }
@@ -312,7 +313,7 @@
         </span>
 
         {#if !playlist}
-            <Button disabled={!isDefault && !fullFilteredFiles.filter((a) => !a.folder)?.length} title={$dictionary.new?.playlist} on:click={createPlaylist}>
+            <Button title={$dictionary.new?.playlist} on:click={createPlaylist}>
                 <Icon size={1.3} id="playlist_create" />
             </Button>
         {/if}
diff --git a/src/frontend/components/drawer/audio/Metronome.svelte b/src/frontend/components/drawer/audio/Metronome.svelte
index 15a391ab..c2ff1c8f 100644
--- a/src/frontend/components/drawer/audio/Metronome.svelte
+++ b/src/frontend/components/drawer/audio/Metronome.svelte
@@ -8,6 +8,8 @@
     import MetronomeInputs from "./MetronomeInputs.svelte"
     import { toggleMetronome, updateMetronome } from "./metronome"
 
+    export let audioOutputs: any[] = []
+
     function playPause() {
         paused = !paused
         toggleMetronome()
@@ -19,7 +21,7 @@
     $: values = clone($metronome)
 
     $: updatePausedState($playingMetronome)
-    function updatePausedState(active) {
+    function updatePausedState(active: boolean) {
         paused = !active
     }
 </script>
@@ -35,6 +37,7 @@
     <div class="inputs">
         <MetronomeInputs
             {values}
+            {audioOutputs}
             on:change={(e) => {
                 values = e.detail
                 updateMetronome(values)
diff --git a/src/frontend/components/drawer/audio/MetronomeInputs.svelte b/src/frontend/components/drawer/audio/MetronomeInputs.svelte
index ee37d12f..fa7326f9 100644
--- a/src/frontend/components/drawer/audio/MetronomeInputs.svelte
+++ b/src/frontend/components/drawer/audio/MetronomeInputs.svelte
@@ -1,21 +1,22 @@
 <script lang="ts">
     import { createEventDispatcher } from "svelte"
+    import { dictionary } from "../../../stores"
+    import { getLeftParenthesis, getRightParenthesis } from "../../../utils/language"
+    import type { API_metronome } from "../../actions/api"
     import T from "../../helpers/T.svelte"
     import CombinedInput from "../../inputs/CombinedInput.svelte"
+    import Dropdown from "../../inputs/Dropdown.svelte"
     import NumberInput from "../../inputs/NumberInput.svelte"
-    import type { API_metronome } from "../../actions/api"
-    import { getLeftParenthesis, getRightParenthesis } from "../../../utils/language"
 
     export let values: API_metronome = {}
+    export let audioOutputs: any[] = []
     export let volume: boolean = true
 
     let dispatch = createEventDispatcher()
     function updateValue(key, e) {
-        let value = Number(e.detail)
-        console.log(value, Math.floor(value), Math.floor(values.tempo || 0) === (values.tempo || 0))
+        let value = e.detail !== undefined ? Number(e.detail) : e
 
-        if (Math.floor(value) === value) value = Math.floor(value) // remove .0
-        console.log(value)
+        if (typeof value === "number" && Math.floor(value) === value) value = Math.floor(value) // remove .0
 
         dispatch("change", { ...values, [key]: value })
     }
@@ -36,3 +37,18 @@
         <NumberInput value={values.volume || 1} min={0.1} max={3} decimals={1} step={0.1} inputMultiplier={100} on:change={(e) => updateValue("volume", e)} />
     </CombinedInput>
 {/if}
+
+{#if audioOutputs.length}
+    <div class="input" style="margin-top: 5px;">
+        <CombinedInput>
+            <p title={$dictionary.audio?.custom_output}><T id="audio.custom_output" /></p>
+            <Dropdown options={audioOutputs} value={audioOutputs.find((a) => a.id === values.audioOutput)?.name || "—"} on:click={(e) => updateValue("audioOutput", e.detail?.id)} />
+        </CombinedInput>
+    </div>
+{/if}
+
+<style>
+    .input :global(.dropdownElem) {
+        width: 50%; /* 0px / 90% works, not 100% */
+    }
+</style>
diff --git a/src/frontend/components/drawer/audio/metronome.ts b/src/frontend/components/drawer/audio/metronome.ts
index 86a3658b..594dc72c 100644
--- a/src/frontend/components/drawer/audio/metronome.ts
+++ b/src/frontend/components/drawer/audio/metronome.ts
@@ -10,6 +10,7 @@ const defaultMetronomeValues = {
     beats: 4,
     volume: 1,
     // notesPerBeat: 1
+    // audioOutput: ""
 }
 let metronomeValues: API_metronome = {}
 
@@ -50,13 +51,15 @@ export function updateMetronome(values: API_metronome, starting: boolean = false
     metronomeValues.tempo = values.tempo
     if (values.beats) metronomeValues.beats = values.beats
     if (values.volume) metronomeValues.volume = values.volume
+    if (values.audioOutput !== undefined) metronomeValues.audioOutput = values.audioOutput
 
     metronome.set(metronomeValues)
 }
 
 export function stopMetronome() {
-    clearTimeout(get(playingMetronome))
-    playingMetronome.set(null)
+    clearTimeout(scheduleTimeout)
+    scheduleTimeout = null
+    playingMetronome.set(false)
 
     startTime = 0
     beatsPlayed = 0
@@ -96,7 +99,11 @@ async function initializeMetronome() {
 }
 
 const preScheduleTime = 0.1
+let scheduleTimeout: any = null
 function scheduleNextNote(time = 0, beat = 1) {
+    // changing tempo when active could cause many to play at once without this check
+    if (scheduleTimeout) return
+
     if (!startTime) {
         startTime = audioContext.currentTime
         scheduleNote(beat)
@@ -105,14 +112,14 @@ function scheduleNextNote(time = 0, beat = 1) {
 
     if (beat > (metronomeValues.beats || defaultMetronomeValues.beats)) beat = 1
 
-    playingMetronome.set(
-        setTimeout(
-            () => {
-                scheduleNote(beat)
-            },
-            (time + timeBetweenEachBeat - preScheduleTime) * 1000
-        )
+    scheduleTimeout = setTimeout(
+        () => {
+            scheduleTimeout = null
+            scheduleNote(beat)
+        },
+        (time + timeBetweenEachBeat - preScheduleTime) * 1000
     )
+    playingMetronome.set(true)
 }
 
 let beatsPlayed = 0
@@ -133,7 +140,7 @@ function getTimeToNextNote() {
     return nextPlayTime - timePassed
 }
 
-function playNote(time: number, first: boolean = false) {
+async function playNote(time: number, first: boolean = false) {
     const source = audioContext.createBufferSource()
     const audioBuffer = audioBuffers[first ? "hi" : "lo"]
     source.buffer = audioBuffer
@@ -145,6 +152,15 @@ function playNote(time: number, first: boolean = false) {
 
     // WIP connect getAnalyser()
 
+    // custom audio output
+    if (metronomeValues.audioOutput !== undefined) {
+        try {
+            await (audioContext as any).setSinkId(metronomeValues.audioOutput)
+        } catch (err) {
+            console.error(err)
+        }
+    }
+
     gainNode.gain.value = getVolume(first ? accentVolume : secondaryVolume)
 
     source.start(audioContext.currentTime + time)
diff --git a/src/frontend/components/drawer/info/AudioInfo.svelte b/src/frontend/components/drawer/info/AudioInfo.svelte
index d6bd3f33..ade48165 100644
--- a/src/frontend/components/drawer/info/AudioInfo.svelte
+++ b/src/frontend/components/drawer/info/AudioInfo.svelte
@@ -52,7 +52,7 @@
     $: isPlaylist = !!activePlaylist
 
     // metronome
-    $: metronomeActive = !!$playingMetronome
+    $: metronomeActive = $playingMetronome
     $: if (metronomeActive) active = "metronome"
 
     // audio outputs
@@ -124,7 +124,7 @@
     <Tabs {tabs} bind:active style="flex: 1;" />
 
     {#if active === "metronome"}
-        <Metronome />
+        <Metronome {audioOutputs} />
     {:else}
         <AudioMix />
     {/if}
diff --git a/src/frontend/components/drawer/info/FunctionsInfo.svelte b/src/frontend/components/drawer/info/FunctionsInfo.svelte
index c91c3a4d..014529f5 100644
--- a/src/frontend/components/drawer/info/FunctionsInfo.svelte
+++ b/src/frontend/components/drawer/info/FunctionsInfo.svelte
@@ -1,13 +1,20 @@
 <script lang="ts">
-    import { activeTimers, drawerTabsData } from "../../../stores"
+    import { activePopup, activeTimers, drawerTabsData } from "../../../stores"
+    import Icon from "../../helpers/Icon.svelte"
     import T from "../../helpers/T.svelte"
+    import Button from "../../inputs/Button.svelte"
     import TimerInfo from "../timers/TimerInfo.svelte"
 
     $: type = $drawerTabsData.functions?.activeSubTab || ""
 </script>
 
 {#if type === "actions"}
-    <!-- ACTIONS -->
+    <div class="scroll" />
+
+    <Button style="width: 100%;" on:click={() => activePopup.set("manage_emitters")} center dark>
+        <Icon id="emitter" right />
+        <T id="popup.manage_emitters" />
+    </Button>
 {:else if type === "timer"}
     {#if $activeTimers.length}
         <TimerInfo />
diff --git a/src/frontend/components/drawer/pages/Actions.svelte b/src/frontend/components/drawer/pages/Actions.svelte
index 5c2efaf0..dcb27406 100644
--- a/src/frontend/components/drawer/pages/Actions.svelte
+++ b/src/frontend/components/drawer/pages/Actions.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { MAIN } from "../../../../types/Channels"
-    import { activePopup, dictionary, labelsDisabled, midiIn, popupData, runningActions } from "../../../stores"
+    import { activeActionTagFilter, activePopup, dictionary, labelsDisabled, midiIn, popupData, runningActions } from "../../../stores"
     import { send } from "../../../utils/request"
     import { actionData } from "../../actions/actionData"
     import { runAction } from "../../actions/actions"
@@ -37,10 +37,12 @@
         activePopup.set("action")
     }
 
-    $: actions = sortByName(keysToID($midiIn)).map(convertOldMidiToNewAction)
+    $: actions = sortByName(keysToID($midiIn), "name", true)
+        .map(convertOldMidiToNewAction)
+        .filter((a) => !$activeActionTagFilter.length || (a.tags?.length && !$activeActionTagFilter.find((tagId) => !a.tags?.includes(tagId))))
 </script>
 
-<div style="position: relative;height: 100%;overflow-y: auto;">
+<div class="context #actions" style="position: relative;height: 100%;overflow-y: auto;">
     {#if actions.length}
         <div class="actions">
             {#each actions as action}
diff --git a/src/frontend/components/drawer/pages/OverlayActions.svelte b/src/frontend/components/drawer/pages/OverlayActions.svelte
new file mode 100644
index 00000000..482318e2
--- /dev/null
+++ b/src/frontend/components/drawer/pages/OverlayActions.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+    import { dictionary, overlays } from "../../../stores"
+    import Icon from "../../helpers/Icon.svelte"
+    import Button from "../../inputs/Button.svelte"
+
+    export let columns: number
+    export let overlayId: string = ""
+
+    $: overlay = $overlays[overlayId] || {}
+
+    function changeAction(actionId: string) {
+        // don't update until overlay display click has finished
+        setTimeout(() => {
+            // WIP history
+            overlays.update((a) => {
+                delete a[overlayId][actionId]
+                return a
+            })
+        })
+    }
+
+    const actionsList: any = [{ id: "displayDuration", title: $dictionary.popup?.display_duration, icon: "clock" }]
+
+    $: zoom = 4 / columns
+</script>
+
+<div class="icons" style="zoom: {zoom};">
+    {#each actionsList as action}
+        {#if overlay[action.id]}
+            <div>
+                <div class="button white">
+                    <Button style="padding: 3px;" redHover title="{$dictionary.actions?.remove}: {action.title}" {zoom} on:click={() => changeAction(action.id)}>
+                        <Icon id={action.icon} size={0.9} white />
+                    </Button>
+                </div>
+                {#if !isNaN(overlay[action.id])}
+                    <span><p>{overlay[action.id]}s</p></span>
+                {/if}
+            </div>
+        {/if}
+    {/each}
+</div>
+
+<style>
+    .icons {
+        pointer-events: none;
+        display: flex;
+        flex-direction: column;
+        position: absolute;
+        left: 0;
+        /* right: 2px; */
+        z-index: 1;
+        font-size: 0.9em;
+
+        height: 80%;
+        flex-wrap: wrap; /* -reverse; */
+        /* place-items: end; */
+    }
+    .icons div {
+        opacity: 0.9;
+        display: flex;
+    }
+    .icons .button {
+        background-color: rgb(0 0 0 / 0.6);
+        pointer-events: all;
+    }
+    .icons span {
+        pointer-events: all;
+        background-color: rgb(0 0 0 / 0.6);
+        padding: 3px;
+        font-size: 0.75em;
+        font-weight: bold;
+        display: flex;
+        align-items: center;
+    }
+
+    .button:not(.white) :global(svg) {
+        fill: #ff5050;
+    }
+</style>
diff --git a/src/frontend/components/drawer/pages/Overlays.svelte b/src/frontend/components/drawer/pages/Overlays.svelte
index 288cf2fe..ceaa7416 100644
--- a/src/frontend/components/drawer/pages/Overlays.svelte
+++ b/src/frontend/components/drawer/pages/Overlays.svelte
@@ -14,6 +14,7 @@
     import DropArea from "../../system/DropArea.svelte"
     import SelectElem from "../../system/SelectElem.svelte"
     import Card from "../Card.svelte"
+    import OverlayActions from "./OverlayActions.svelte"
 
     export let active: string | null
     export let searchValue: string = ""
@@ -74,19 +75,22 @@
                         showPlayOnHover
                         on:click={(e) => {
                             if ($outLocked || e.ctrlKey || e.metaKey) return
-                            if (e.target?.closest(".edit")) return
+                            if (e.target?.closest(".edit") || e.target?.closest(".icons")) return
 
                             setOutput("overlays", overlay.id, true)
                         }}
                         on:dblclick={(e) => {
                             if (e.ctrlKey || e.metaKey) return
-                            if (e.target?.closest(".edit")) return
+                            if (e.target?.closest(".edit") || e.target?.closest(".icons")) return
 
                             activeShow.set({ id: overlay.id, type: "overlay" })
                             activePage.set("show")
                             if ($focusMode) focusMode.set(false)
                         }}
                     >
+                        <!-- icons -->
+                        <OverlayActions columns={$mediaOptions.columns} overlayId={overlay.id} />
+
                         <SelectElem id="overlay" data={overlay.id} fill draggable>
                             <Zoomed {resolution} background={overlay.items.length ? "black" : "transparent"}>
                                 {#each overlay.items as item}
diff --git a/src/frontend/components/drawer/timers/Timers.svelte b/src/frontend/components/drawer/timers/Timers.svelte
index c6ce998f..abd315eb 100644
--- a/src/frontend/components/drawer/timers/Timers.svelte
+++ b/src/frontend/components/drawer/timers/Timers.svelte
@@ -12,7 +12,7 @@
 
     export let searchValue
 
-    $: sortedTimers = sortByName(sortByName(keysToID(clone($timers))), "type")
+    $: sortedTimers = sortByName(sortByName(keysToID(clone($timers)), "name", true), "type")
     $: sortedTimersWithProject = sortedTimers.sort((a, b) => (list.includes(a.id) && !list.includes(b.id) ? -1 : 1))
     $: filteredTimers = searchValue.length > 1 ? sortedTimersWithProject.filter((a) => a.name.toLowerCase().includes(searchValue.toLowerCase())) : sortedTimersWithProject
 
diff --git a/src/frontend/components/edit/EditTools.svelte b/src/frontend/components/edit/EditTools.svelte
index 8a2487fa..d3cbc629 100644
--- a/src/frontend/components/edit/EditTools.svelte
+++ b/src/frontend/components/edit/EditTools.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import type { Item } from "../../../types/Show"
     import type { TabsObj } from "../../../types/Tabs"
-    import { activeEdit, activeShow, copyPasteEdit, dictionary, overlays, selected, showsCache, storedEditMenuState, templates } from "../../stores"
+    import { activeEdit, activeShow, activeTriggerFunction, copyPasteEdit, dictionary, overlays, selected, showsCache, storedEditMenuState, templates } from "../../stores"
     import Icon from "../helpers/Icon.svelte"
     import T from "../helpers/T.svelte"
     import { clone } from "../helpers/array"
@@ -43,6 +43,8 @@
     $: editSlideSelected = $activeEdit.slide !== null && $activeEdit.slide !== undefined
     $: activeIsShow = $activeShow && ($activeShow.type || "show") === "show"
 
+    $: if ($activeTriggerFunction === "slide_notes") active = "slide"
+
     let slides: any[] = []
     $: if (allSlideItems && (($activeEdit?.id && editSlideSelected) || showIsActive))
         slides = _show($activeEdit?.id || $activeShow?.id)
diff --git a/src/frontend/components/edit/Navigation.svelte b/src/frontend/components/edit/Navigation.svelte
index 6d7f75c2..64fd34d3 100644
--- a/src/frontend/components/edit/Navigation.svelte
+++ b/src/frontend/components/edit/Navigation.svelte
@@ -43,7 +43,7 @@
             if (!edit.id) return a
 
             let type = edit.edit.type || "show"
-            edit.icon = type === "show" ? "showIcon" : type
+            edit.icon = type === "show" ? "slide" : type // showIcon
             if (edit.icon === "media") edit.icon = getMediaType(getExtension(edit.id))
             if (edit.icon === "template") edit.icon = "templates"
             if (edit.icon === "overlay") edit.icon = "overlays"
diff --git a/src/frontend/components/edit/editors/SlideEditor.svelte b/src/frontend/components/edit/editors/SlideEditor.svelte
index 1c72f7ef..7f4623d6 100644
--- a/src/frontend/components/edit/editors/SlideEditor.svelte
+++ b/src/frontend/components/edit/editors/SlideEditor.svelte
@@ -2,7 +2,7 @@
     import { onMount } from "svelte"
     import { slide } from "svelte/transition"
     import type { MediaStyle } from "../../../../types/Main"
-    import { activeEdit, activePopup, activeShow, alertMessage, dictionary, driveData, focusMode, labelsDisabled, media, outputs, overlays, refreshEditSlide, showsCache, styles, textEditActive } from "../../../stores"
+    import { activeEdit, activePopup, activeShow, activeTriggerFunction, alertMessage, dictionary, driveData, focusMode, labelsDisabled, media, outputs, overlays, refreshEditSlide, showsCache, styles, textEditActive } from "../../../stores"
     import { slideHasAction } from "../../actions/actions"
     import MediaLoader from "../../drawer/media/MediaLoader.svelte"
     import Icon from "../../helpers/Icon.svelte"
@@ -215,7 +215,7 @@
         // timeout to prevent number 2 from getting typed if changing with shortcuts
         setTimeout(() => {
             // set focus to textbox if only one
-            if (Slide?.items.length === 1 && !$activeEdit.items.length) {
+            if (Slide?.items.length === 1 && !$activeEdit.items.length && $activeTriggerFunction !== "slide_notes") {
                 activeEdit.update((a) => ({ ...(a || {}), items: [0] }))
                 const elem: any = document.querySelector(".editItem")?.querySelector(".edit")
                 if (elem) {
diff --git a/src/frontend/components/edit/scripts/itemHelpers.ts b/src/frontend/components/edit/scripts/itemHelpers.ts
index ca4417bb..ab7b4e0e 100644
--- a/src/frontend/components/edit/scripts/itemHelpers.ts
+++ b/src/frontend/components/edit/scripts/itemHelpers.ts
@@ -7,15 +7,34 @@ import { _show } from "../../helpers/shows"
 import { getStyles, removeText } from "../../helpers/style"
 import { addSlideAction } from "../../actions/actions"
 import { clone, keysToID, sortByName } from "../../helpers/array"
+import { boxes } from "../values/boxes"
 
 export const DEFAULT_ITEM_STYLE = "top:120px;left:50px;height:840px;width:1820px;"
 
+function getDefaultStyles(type: ItemType, template: any = null) {
+    // Get position styles from template or use default from boxes.ts
+    const positionStyle = template?.[0]?.style || DEFAULT_ITEM_STYLE
+
+    // Get default styles from boxes configuration
+    const boxDefaults = boxes[type]?.edit?.font || []
+    let styleString = positionStyle
+
+    // Add default font styles if they exist
+    boxDefaults.forEach((def: any) => {
+        if (def.key && def.value) {
+            styleString += `${def.key}:${def.value};`
+        }
+    })
+
+    return styleString
+}
+
 export function addItem(type: ItemType, id: any = null, options: any = {}, value: string = "") {
     let activeTemplate: string | null = get(activeShow)?.id ? get(showsCache)[get(activeShow)!.id!]?.settings?.template : null
     let template = activeTemplate ? get(templates)[activeTemplate]?.items : null
 
     let newData: Item = {
-        style: template?.[0]?.style || DEFAULT_ITEM_STYLE,
+        style: getDefaultStyles(type, template),
         type,
     }
     if (id) newData.id = id
@@ -26,7 +45,7 @@ export function addItem(type: ItemType, id: any = null, options: any = {}, value
     else if (type === "timer") {
         newData.timerId = sortByName(keysToID(get(timers)))[0]?.id || createNewTimer()
         if (get(timers)[newData.timerId || ""]?.type === "counter") addSlideAction(get(activeEdit).slide ?? -1, "start_slide_timers")
-    } else if (type === "clock") newData.clock = { type: "digital", seconds: false }
+    } else if (type === "clock") newData.clock = { type: "digital", dateFormat: "none", showTime: true, seconds: false }
     else if (type === "mirror") newData.mirror = {}
     else if (type === "media") newData.src = options.src || ""
     else if (type === "variable") newData.variable = { id: "" }
diff --git a/src/frontend/components/edit/scripts/textStyle.ts b/src/frontend/components/edit/scripts/textStyle.ts
index adb13c4b..b7a9d7fe 100644
--- a/src/frontend/components/edit/scripts/textStyle.ts
+++ b/src/frontend/components/edit/scripts/textStyle.ts
@@ -24,6 +24,9 @@ export function addStyle(selection: { start: number; end: number }[], item: Item
                     if (to < length) newText.push({ value: text.value.slice(to, length), style: text.style })
                 } else newText.push(text)
 
+                // empty line
+                if (text && !newText.length) newText.push(text)
+
                 pos += length
             })
         } else newText.push(...(line.text || []))
diff --git a/src/frontend/components/edit/tools/BoxStyle.svelte b/src/frontend/components/edit/tools/BoxStyle.svelte
index 5cdba895..71e7591c 100644
--- a/src/frontend/components/edit/tools/BoxStyle.svelte
+++ b/src/frontend/components/edit/tools/BoxStyle.svelte
@@ -165,12 +165,29 @@
 
     $: if (id === "timer" && box?.edit?.font) box.edit.font[3].value = item?.auto ?? true
 
+    $: if (id === "clock" && box?.edit?.default) {
+        // Get the clock type from the first option
+        const clockType = item?.clock?.type || "digital"
+        const dateFormat = item?.clock?.dateFormat || "none"
+        // Default option [0] is the clock type selector which is always shown
+        // [1] dateFormat
+        box.edit.default[1].hidden = clockType !== "digital"
+        // [2] showTime
+        box.edit.default[2].hidden = clockType !== "digital" || dateFormat === "none"
+        // [3] seconds
+        box.edit.default[3].hidden = clockType === "custom" || (clockType === "digital" && !item?.clock?.showTime)
+        // [4] customFormat
+        box.edit.default[4].hidden = clockType !== "custom"
+    }
+
     $: if (box?.edit?.default) {
         if (id === "mirror") getMirrorValues()
         else if (id === "media") box.edit.default[0].value = item?.src || ""
         else if (id === "list") box.edit.default[0].value = item?.list?.items || []
-        else if (id === "timer") box.edit.default[2].hidden = item?.timer?.viewType !== "circle"
-        else if (id === "variable") box.edit.default[0].value = item?.variable?.id
+        else if (id === "timer") {
+            box.edit.default[2].hidden = item?.timer?.viewType !== "circle"
+            box.edit.default[3].value = item?.timer?.showHours !== false
+        } else if (id === "variable") box.edit.default[0].value = item?.variable?.id
         else if (id === "web") box.edit.default[0].value = item?.web?.src || ""
         else if (id === "slide_tracker") {
             if (item?.tracker?.type) box.edit.default[0].value = item.tracker.type
diff --git a/src/frontend/components/edit/tools/EditValues.svelte b/src/frontend/components/edit/tools/EditValues.svelte
index 895e4c93..b176d68c 100644
--- a/src/frontend/components/edit/tools/EditValues.svelte
+++ b/src/frontend/components/edit/tools/EditValues.svelte
@@ -444,10 +444,13 @@
                         <Dropdown value={Object.entries($variables).find(([id]) => id === input.value)?.[1]?.name || "—"} options={keysToID($variables)} on:click={(e) => valueChange(e, input)} />
                     </CombinedInput>
                 {:else if input.input === "tip"}
-                    <p class="tip">
-                        <T id={input.name} />
-                        {input.values?.subtext || ""}
-                    </p>
+                    {#if !input.hidden || (input.disabled === "clock" && item?.clock?.type === "custom")}
+                        <p class="tip">
+                            {#if input.name}<T id={input.name} />{/if}
+                            {@html input.values?.subtext || ""}
+                            {#if input.values?.subtext.includes("<a href=")}<Icon id="launch" white />{/if}
+                        </p>
+                    {/if}
                 {:else if input.input === "popup"}
                     <CombinedInput>
                         <Button
@@ -541,7 +544,7 @@
                     {@const value = getValue(input, { styles, item })}
                     {#if !input.hidden}
                         <CombinedInput>
-                            <p title={$dictionary[input.name.includes(".") ? input.name.split(".")[0] : "edit"]?.[input.name.includes(".") ? input.name.split(".")[1] : input.name]}>
+                            <p title={input.title || $dictionary[input.name.includes(".") ? input.name.split(".")[0] : "edit"]?.[input.name.includes(".") ? input.name.split(".")[1] : input.name]}>
                                 {#key input.name}
                                     <T id={input.name.includes(".") ? input.name : "edit." + input.name} />
                                 {/key}
@@ -629,7 +632,27 @@
     .tip {
         font-size: 0.8em;
         opacity: 0.8;
-        text-align: center;
         padding: 8px;
+
+        text-align: center;
+        text-overflow: revert;
+        white-space: normal;
+
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 5px;
+    }
+
+    /* Link */
+    .tip :global(a) {
+        color: var(--text);
+        opacity: 0.7;
+    }
+    .tip :global(a):hover {
+        opacity: 0.75;
+    }
+    .tip :global(a):active {
+        opacity: 0.9;
     }
 </style>
diff --git a/src/frontend/components/edit/tools/SlideStyle.svelte b/src/frontend/components/edit/tools/SlideStyle.svelte
index 01daa8e1..9a98fdb6 100644
--- a/src/frontend/components/edit/tools/SlideStyle.svelte
+++ b/src/frontend/components/edit/tools/SlideStyle.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { activeEdit, activeShow, outputs, showsCache, styles, templates } from "../../../stores"
+    import { activeEdit, activeShow, activeTriggerFunction, outputs, showsCache, styles, templates } from "../../../stores"
     import { clone, sortByName } from "../../helpers/array"
     import { history } from "../../helpers/history"
     import { getActiveOutputs, getResolution } from "../../helpers/output"
@@ -17,6 +17,17 @@
     $: editSlide = $showsCache && $activeEdit.slide !== null && slideId ? _show().slides([slideId]).get()[0] : null
     $: backgroundColor = $styles[$outputs[getActiveOutputs()[0]].style || ""]?.background
 
+    let notesElem: any = null
+    $: if (notesElem && $activeTriggerFunction === "slide_notes") {
+        setTimeout(() => {
+            // focus after any textbox is focused
+            notesElem.querySelector("textarea").focus()
+            notesElem.scrollIntoView()
+
+            activeTriggerFunction.set("")
+        }, 20)
+    }
+
     let settings: any = {}
 
     $: if ($showsCache || editSlide) setValues()
@@ -110,7 +121,7 @@
     </CombinedInput>
 
     <h6><T id="tools.notes" /></h6>
-    <div class="notes">
+    <div class="notes" bind:this={notesElem}>
         <Notes value={note} on:edit={edit} />
     </div>
 </div>
diff --git a/src/frontend/components/edit/values/boxes.ts b/src/frontend/components/edit/values/boxes.ts
index 2e1c28a0..54d3c343 100644
--- a/src/frontend/components/edit/values/boxes.ts
+++ b/src/frontend/components/edit/values/boxes.ts
@@ -1,5 +1,12 @@
 import type { ItemType } from "./../../../../types/Show"
 import { captionLanguages } from "./captionLanguages"
+import dayjs from "dayjs"
+import localizedFormat from "dayjs/plugin/localizedFormat"
+import extendedFormat from "dayjs/plugin/advancedFormat"
+
+// Initialize plugins
+dayjs.extend(localizedFormat)
+dayjs.extend(extendedFormat)
 
 export type Box = {
     [key in ItemType]?: {
@@ -25,7 +32,9 @@ export type EditInput = {
     values?: any
     popup?: string
     enableNoColor?: boolean
+    title?: string // custom hover title
     relative?: boolean // updated values should be relative to each selected item (only for number px values)
+    placeholder?: string
 }
 
 export const mediaFitOptions: any[] = [
@@ -55,10 +64,10 @@ export let trackerEdits = [
         id: "tracker.accent",
         value: "#F0008C",
     },
-    { name: "edit.sub_indexes", input: "checkbox", id: "tracker.childProgress", value: false },
-    { name: "edit.one_letter", input: "checkbox", id: "tracker.oneLetter", value: false },
 ]
 
+const now = new Date(2025, 0, 10)
+
 export const boxes: Box = {
     text: {
         // name: "items.text",
@@ -253,6 +262,7 @@ export const boxes: Box = {
             default: [
                 { id: "src", input: "media" },
                 { name: "media.fit", id: "fit", input: "dropdown", value: "contain", values: { options: mediaFitOptions } },
+                // { name: "popup.media_fit", id: "fit", input: "popup", popup: "media_fit" }, // WIP
                 { name: "actions.mute", id: "muted", input: "checkbox", value: false },
                 { name: "media.flip_horizontally", id: "flipped", input: "checkbox", value: false },
                 { name: "media.flip_vertically", id: "flippedY", input: "checkbox", value: false },
@@ -320,6 +330,7 @@ export const boxes: Box = {
                     },
                 },
                 { name: "timer.mask", id: "timer.circleMask", input: "checkbox", value: false },
+                { name: "timer.hours", id: "timer.showHours", input: "checkbox", value: true },
             ],
             // font: [
             //     { name: "family", id: "style", key: "font-family", input: "fontDropdown", value: "CMGSans" },
@@ -371,10 +382,57 @@ export const boxes: Box = {
                         options: [
                             { id: "digital", name: "$:clock.digital:$" },
                             { id: "analog", name: "$:clock.analog:$" },
+                            { id: "custom", name: "$:clock.custom:$" },
+                        ],
+                    },
+                },
+                {
+                    name: "sort.date",
+                    input: "dropdown",
+                    id: "clock.dateFormat",
+                    value: "none",
+                    hidden: true,
+                    values: {
+                        options: [
+                            { id: "none", name: "$:main.none:$" },
+                            { id: "LL", name: `${dayjs(now).format("LL")}` }, // January 10, 2025
+                            { id: "ll", name: `${dayjs(now).format("ll")}` }, // Jan 10, 2025
+                            { id: "DD/MM/YYYY", name: `${dayjs(now).format("DD/MM/YYYY")}` }, // 10/01/2025
+                            { id: "MM/DD/YYYY", name: `${dayjs(now).format("MM/DD/YYYY")}` }, // 01/10/2025
+                            { id: "YYYY-MM-DD", name: `${dayjs(now).format("YYYY-MM-DD")}` }, // 2025-01-10
                         ],
                     },
                 },
-                { name: "clock.seconds", id: "clock.seconds", input: "checkbox", value: false },
+                {
+                    name: "clock.show_time",
+                    input: "checkbox",
+                    id: "clock.showTime",
+                    value: true,
+                    hidden: true,
+                },
+                {
+                    name: "clock.seconds",
+                    input: "checkbox",
+                    id: "clock.seconds",
+                    value: false,
+                    hidden: true,
+                },
+                {
+                    name: "actions.format",
+                    title: "Day: {DD}, Month: {MM}, Full year: {YYYY}, Hours: {hh}, Minutes: {mm}, Seconds: {ss}, AM/PM: {A}, Full date: {LLL}", // similar to getProjectName()
+                    input: "text",
+                    id: "clock.customFormat",
+                    value: "hh:mm a",
+                    hidden: true,
+                    // input_placeholder: "Examples: LT, LLLL, MMMM D YYYY h:mm A",
+                },
+                {
+                    name: "",
+                    input: "tip",
+                    values: { subtext: '<a href="https://day.js.org/docs/en/display/format#list-of-all-available-formats" class="open">List of day.js formats</a>' },
+                    hidden: true,
+                    disabled: "clock",
+                },
             ],
             font: [
                 { name: "family", id: "style", key: "font-family", input: "fontDropdown", value: "CMGSans" },
diff --git a/src/frontend/components/helpers/array.ts b/src/frontend/components/helpers/array.ts
index dc6c8391..71b41798 100644
--- a/src/frontend/components/helpers/array.ts
+++ b/src/frontend/components/helpers/array.ts
@@ -1,3 +1,4 @@
+import type { Option } from "../../../types/Main"
 import { translate } from "../../utils/language"
 
 // move data in array at given indexes to new pos
@@ -54,8 +55,24 @@ export function sortByTimeNew<T>(array: T, key: string = "time") {
 // OBJETS
 
 // sort objects in array by name
-export function sortByName(arr: any[], key: string = "name") {
-    return arr.filter((a) => typeof a[key] === "string").sort((a, b) => a[key].localeCompare(b[key]))
+export function sortByName(arr: any[], key: string = "name", numberSort: boolean = false) {
+    return arr
+        .filter((a) => typeof a[key] === "string")
+        .sort((a, b) => {
+            if (numberSort) {
+                const matchA = a[key].match(/^(\d+)(.*)$/)
+                const matchB = b[key].match(/^(\d+)(.*)$/)
+
+                if (matchA && matchB) {
+                    const numA = parseInt(matchA[1], 10)
+                    const numB = parseInt(matchB[1], 10)
+
+                    if (numA !== numB) return numA - numB
+                    // return matchA[2].localeCompare(matchB[2]);
+                }
+            }
+            return a[key].localeCompare(b[key])
+        })
 }
 
 // sort objects in array alphabeticly
@@ -206,3 +223,9 @@ export function shuffleArray(array) {
 
     return array
 }
+
+// convert object to dropdown options
+export function convertToOptions(object) {
+    let options: Option[] = Object.keys(object).map((id) => ({ id, name: object[id].name }))
+    return sortByName(options)
+}
diff --git a/src/frontend/components/helpers/clipboard.ts b/src/frontend/components/helpers/clipboard.ts
index 5f08110a..eaca0196 100644
--- a/src/frontend/components/helpers/clipboard.ts
+++ b/src/frontend/components/helpers/clipboard.ts
@@ -21,6 +21,7 @@ import {
     events,
     focusedArea,
     folders,
+    media,
     mediaFolders,
     midiIn,
     outputs,
@@ -774,6 +775,20 @@ const deleteActions = {
             newToast("$error.keep_one_layout")
         }
     },
+    video_subtitle: (data: any) => {
+        let index = data.index
+        let id = get(activeShow)?.id || ""
+        if (!id) return
+
+        media.update((a) => {
+            if (a[id]?.tracks?.[index]) {
+                a[id].tracks!.splice(index, 1)
+                // reset tracks if all deleted, so any embedded tracks can be readded
+                if (!a[id].tracks!.length) delete a[id].tracks
+            }
+            return a
+        })
+    },
     video_marker: (data: any) => {
         let index = data.index
         let id = get(activeShow)?.id || ""
diff --git a/src/frontend/components/helpers/historyActions.ts b/src/frontend/components/helpers/historyActions.ts
index 4ef597eb..aaa79b29 100644
--- a/src/frontend/components/helpers/historyActions.ts
+++ b/src/frontend/components/helpers/historyActions.ts
@@ -1,6 +1,6 @@
 import { get } from "svelte/store"
 import { uid } from "uid"
-import type { Slide } from "../../../types/Show"
+import type { Item, Slide } from "../../../types/Show"
 import { removeItemValues, splitItemInTwo } from "../../show/slides"
 import { activeEdit, activePage, activePopup, activeProject, activeShow, alertMessage, cachedShowsData, deletedShows, driveData, groups, notFound, projects, refreshEditSlide, renamedShows, shows, showsCache, templates } from "../../stores"
 import { save } from "../../utils/save"
@@ -14,6 +14,7 @@ import { getItemsCountByType, isEmptyOrSpecial, mergeWithTemplate, updateLayouts
 import { loadShows, saveTextCache } from "./setShow"
 import { getShowCacheId } from "./show"
 import { _show } from "./shows"
+import { getItemText } from "../edit/scripts/textStyle"
 
 // TODO: move history switch to actions
 
@@ -830,8 +831,16 @@ export const historyActions = ({ obj, undo = null }: any) => {
                     let newTemplate = data.previousData.template !== data.id
                     if (shiftItems && !slide.settings?.template && !newTemplate) slide.items = [...slide.items.slice(1), slide.items[0]].filter((a) => a)
 
+                    // shift items to any template textbox with matching "name" (content), if any
+                    if (!shiftItems && newTemplate && !slide.settings?.template && slideTemplate.items?.length > 1) {
+                        let previousTemplateItems = get(templates)[data.previousData.template]?.items || []
+                        let newTemplateItems = slideTemplate.items || []
+                        slide.items = clone(rearrangeContent(slide.items, previousTemplateItems, newTemplateItems))
+                        // WIP text style (font size) won't update first time
+                    }
+
                     let changeOverflowItems = slide.settings?.template || createItems
-                    let newItems = mergeWithTemplate(slide.items, slideTemplate.items, changeOverflowItems, obj.save !== false)
+                    let newItems = mergeWithTemplate(slide.items, slideTemplate.items, changeOverflowItems, obj.save !== false, createItems)
 
                     // remove items if not in template (and textbox is empty)
                     if (changeOverflowItems) {
@@ -1040,3 +1049,53 @@ function filterIndexes(data: any, subkey: string = "", { indexes, keys }) {
 
     return filteredData
 }
+
+function rearrangeContent(content: Item[], prevState: Item[], newState: Item[]) {
+    const indexMap: { [key: string]: number } = {}
+
+    function getValue(value: string, count: number) {
+        return value + (count > 0 ? "__" + count : "")
+    }
+
+    // create a map of previous state values to their indices
+    prevState.forEach((item, index) => {
+        let value = getItemText(item)
+        let count = 0
+        while (indexMap[getValue(value, count)] !== undefined) count++
+        indexMap[getValue(value, count)] = index
+    })
+
+    // create a temporary array to store the rearranged content
+    const tempContent: Item[] = new Array(content.length).fill(null)
+    const usedIndices = new Set<number>()
+
+    newState.forEach((item, newIndex) => {
+        let value = getItemText(item)
+        if (indexMap[value] === undefined) return
+
+        let count = 0
+        while (usedIndices.has(indexMap[getValue(value, count)])) count++
+        const contentIndex = indexMap[getValue(value, count)]
+        if (contentIndex < content.length && !usedIndices.has(contentIndex)) {
+            if (content[contentIndex]) {
+                tempContent[newIndex] = clone({ ...content[newIndex], lines: clone(content[contentIndex].lines) })
+            }
+            usedIndices.add(contentIndex)
+        }
+    })
+
+    // fill any undefined positions with the original content
+    let tempIndex = 0
+    for (let i = 0; i < content.length; i++) {
+        if (tempContent[i] === null) {
+            while (usedIndices.has(tempIndex)) tempIndex++
+            if (tempIndex < content.length) {
+                if (content[tempIndex]) tempContent[i] = clone(content[tempIndex])
+                usedIndices.add(tempIndex)
+            }
+            tempIndex++
+        }
+    }
+
+    return tempContent
+}
diff --git a/src/frontend/components/helpers/media.ts b/src/frontend/components/helpers/media.ts
index cf06de97..be10ea6e 100644
--- a/src/frontend/components/helpers/media.ts
+++ b/src/frontend/components/helpers/media.ts
@@ -3,7 +3,7 @@
 
 import { get } from "svelte/store"
 import { MAIN } from "../../../types/Channels"
-import type { MediaStyle } from "../../../types/Main"
+import type { MediaStyle, Subtitle } from "../../../types/Main"
 import type { Styles } from "../../../types/Settings"
 import type { ShowType } from "../../../types/Show"
 import { loadedMediaThumbnails, media, outputs, tempPath } from "../../stores"
@@ -204,6 +204,29 @@ export async function isVideoSupported(path: string) {
     return !isUnsupported
 }
 
+export function setMediaTracks(data: { path: string; tracks: Subtitle[] }) {
+    let path: string = data.path || ""
+
+    media.update((a) => {
+        if (!a[path]) a[path] = {}
+        a[path].tracks = data.tracks
+        return a
+    })
+}
+
+export function enableSubtitle(video: HTMLVideoElement, languageId: string) {
+    if (!video) return
+    let tracks = [...(video.textTracks || [])]
+
+    let enabled = tracks.find((a) => a.mode !== "disabled")
+    if (enabled) enabled.mode = "disabled"
+
+    if (!languageId) return
+
+    let newTrack = tracks.find((a) => a.language === languageId)
+    if (newTrack) newTrack.mode = "showing"
+}
+
 export function getMediaStyle(mediaObj: MediaStyle, currentStyle: Styles) {
     if (!mediaObj && !currentStyle) return {}
 
diff --git a/src/frontend/components/helpers/output.ts b/src/frontend/components/helpers/output.ts
index 741e3899..f88c43cc 100644
--- a/src/frontend/components/helpers/output.ts
+++ b/src/frontend/components/helpers/output.ts
@@ -17,6 +17,7 @@ import {
     outputs,
     outputSlideCache,
     overlays,
+    overlayTimers,
     playingVideos,
     serverData,
     showsCache,
@@ -29,6 +30,7 @@ import {
     transitionData,
     usageLog,
 } from "../../stores"
+import { newToast } from "../../utils/common"
 import { send } from "../../utils/request"
 import { sendBackgroundToStage } from "../../utils/stageTalk"
 import { videoExtensions } from "../../values/extensions"
@@ -41,7 +43,6 @@ import { fadeinAllPlayingAudio, fadeoutAllPlayingAudio } from "./audio"
 import { getExtension, getFileName, removeExtension } from "./media"
 import { replaceDynamicValues } from "./showActions"
 import { _show } from "./shows"
-import { newToast } from "../../utils/common"
 import { getStyles } from "./style"
 
 export function displayOutputs(e: any = {}, auto: boolean = false) {
@@ -56,6 +57,11 @@ export function displayOutputs(e: any = {}, auto: boolean = false) {
     })
 }
 
+export function toggleOutput(id: string) {
+    if (!get(outputs)[id]?.enabled) return
+    send(OUTPUT, ["DISPLAY"], { enabled: "toggle", one: true, output: { id, ...get(outputs)[id] } })
+}
+
 // background: null,
 // slide: null,
 // overlays: [],
@@ -105,7 +111,19 @@ export function setOutput(key: string, data: any, toggle: boolean = false, outpu
                 if (toggle && outData?.includes(data[0])) outData!.splice(outData!.indexOf(data[0]), 1)
                 else if (toggle || add) outData = removeDuplicates([...(a[id].out?.[key] || []), ...data])
                 else outData = data
-            } else outData = data
+
+                data.forEach((overlayId) => {
+                    // timeout so output can update first
+                    if (outData.includes(overlayId)) startOverlayTimer(id, overlayId, outData)
+                    else if (get(overlayTimers)[id + overlayId]) clearOverlayTimer(id, overlayId)
+                })
+            } else {
+                outData = data
+
+                if (key === "overlays") {
+                    clearOverlayTimers(id)
+                }
+            }
 
             a[id].out![key] = clone(outData)
 
@@ -194,6 +212,51 @@ export function startCamera(cam: API_camera) {
     setOutput("background", { name: cam.name || "", id: cam.id, cameraGroup: cam.groupId, type: "camera" })
 }
 
+/// OVERLAY TIMERS
+
+function startOverlayTimer(outputId: string, overlayId: string, outData: string[] = []) {
+    if (!outData.length) outData = get(outputs)[outputId]?.out?.overlays || []
+    if (!outData.includes(overlayId)) return
+
+    let overlay = get(overlays)[overlayId]
+    if (!overlay.displayDuration) return
+
+    overlayTimers.update((a) => {
+        let id = outputId + overlayId
+        if (a[id]) clearTimeout(a[id].timer)
+
+        a[id] = {
+            outputId,
+            overlayId,
+            timer: setTimeout(() => {
+                clearOverlayTimer(outputId, overlayId)
+                if (!get(outputs)[outputId]?.out?.overlays?.includes(overlayId)) return
+
+                setOutput("overlays", overlayId, true, outputId)
+            }, overlay.displayDuration! * 1000),
+        }
+
+        return a
+    })
+}
+
+export function clearOverlayTimers(outputId: string) {
+    Object.values(get(overlayTimers)).forEach((a) => clearOverlayTimer(outputId, a.overlayId))
+}
+
+export function clearOverlayTimer(outputId: string, overlayId: string) {
+    overlayTimers.update((a) => {
+        let id = outputId + overlayId
+        if (!a[id]) return a
+
+        clearTimeout(a[id].timer)
+        delete a[id]
+        return a
+    })
+}
+
+///
+
 let sortedOutputs: any[] = []
 export function getActiveOutputs(updater: any = get(outputs), hasToBeActive: boolean = true, removeKeyOutput: boolean = false, removeStageOutput: boolean = false) {
     // WIP cache outputs
@@ -257,8 +320,9 @@ export function refreshOut(refresh: boolean = true) {
 // outputs is just for updates
 export function isOutCleared(key: string | null = null, updater: any = get(outputs), checkLocked: boolean = false) {
     let cleared: boolean = true
+    let outputIds = getActiveOutputs(updater, true, true, true)
 
-    getActiveOutputs(updater, true, true, true).forEach((id: string) => {
+    outputIds.forEach((id: string) => {
         let output: any = updater[id]
         let keys: string[] = key ? [key] : Object.keys(output.out || {})
         keys.forEach((key: string) => {
@@ -272,6 +336,11 @@ export function isOutCleared(key: string | null = null, updater: any = get(outpu
         })
     })
 
+    if (cleared && key === "transition") {
+        // check overlay timers
+        cleared = !outputIds.find((outputId) => Object.values(get(overlayTimers)).find((a) => a.outputId === outputId))
+    }
+
     return cleared
 }
 
@@ -528,7 +597,7 @@ export function getCurrentMediaTransition() {
 
 // TEMPLATE
 
-export function mergeWithTemplate(slideItems: Item[], templateItems: Item[], addOverflowTemplateItems: boolean = false, resetAutoSize: boolean = true) {
+export function mergeWithTemplate(slideItems: Item[], templateItems: Item[], addOverflowTemplateItems: boolean = false, resetAutoSize: boolean = true, templateClicked: boolean = false) {
     if (!slideItems?.length) return []
     slideItems = clone(slideItems)
 
@@ -576,10 +645,12 @@ export function mergeWithTemplate(slideItems: Item[], templateItems: Item[], add
                 if (!text.customType?.includes("disableTemplate")) {
                     let style = templateText?.style || ""
 
-                    // add original text color
-                    let textColor = getStyles(text.style)["color"] || "#FFFFFF"
-                    // use template color if text is white (default)
-                    if (textColor !== "#FFFFFF") style += `color: ${textColor};`
+                    // add original text color, if template is not clicked
+                    if (!templateClicked) {
+                        let textColor = getStyles(text.style)["color"] || "#FFFFFF"
+                        // use template color if text is white (default)
+                        if (textColor !== "#FFFFFF") style += `color: ${textColor};`
+                    }
 
                     text.style = style
                 }
diff --git a/src/frontend/components/helpers/showActions.ts b/src/frontend/components/helpers/showActions.ts
index 488dacd8..38d6d047 100644
--- a/src/frontend/components/helpers/showActions.ts
+++ b/src/frontend/components/helpers/showActions.ts
@@ -113,7 +113,7 @@ export function swichProjectItem(pos: number, id: string) {
 
     // set project layout
     projects.update((a) => {
-        if (Object.keys(get(showsCache)[id].layouts).length < 2) delete a[get(activeProject)!].shows[pos!].layout
+        if (Object.keys(get(showsCache)[id].layouts)?.length < 2) delete a[get(activeProject)!].shows[pos!].layout
         else a[get(activeProject)!].shows[pos!].layout = get(showsCache)[id].settings.activeLayout
         return a
     })
@@ -226,8 +226,13 @@ export function nextSlide(e: any, start: boolean = false, end: boolean = false,
         index = 0
         while (layout[index].data.disabled || notBound(layout[index], customOutputId)) index++
 
-        setOutput("slide", { id, layout: _show(id).get("settings.activeLayout"), index }, false, customOutputId)
-        updateOut(id, index, layout, !e?.altKey, customOutputId)
+        let data = layout[index]?.data
+        checkActionTrigger(data, index)
+        // allow custom actions to trigger first
+        setTimeout(() => {
+            setOutput("slide", { id, layout: _show(id).get("settings.activeLayout"), index }, false, customOutputId)
+            updateOut(id!, index!, layout, !e?.altKey, customOutputId)
+        })
         return
     }
 
@@ -250,11 +255,32 @@ export function nextSlide(e: any, start: boolean = false, end: boolean = false,
     }
 
     if (index !== null) {
-        setOutput("slide", newSlideOut, false, customOutputId)
-        updateOut(slide ? slide.id : "active", index, layout, !e?.altKey, customOutputId)
+        let data = layout[index]?.data
+        checkActionTrigger(data, index)
+        // allow custom actions to trigger first
+        setTimeout(() => {
+            setOutput("slide", newSlideOut, false, customOutputId)
+            updateOut(slide ? slide.id : "active", index!, layout, !e?.altKey, customOutputId)
+        })
     }
 }
 
+const triggerActionsBeforeOutput = {
+    change_output_style: (actionValue: any) => {
+        const layers = get(styles)[actionValue?.outputStyle]?.layers
+        if (layers === undefined) return false
+        return !layers.includes("background")
+    },
+}
+function shouldTriggerBefore(action: any) {
+    return action.triggers?.find((trigger) => triggerActionsBeforeOutput[trigger]?.(action.actionValues?.[trigger]))
+}
+export function checkActionTrigger(layoutData: any, slideIndex: number = 0) {
+    layoutData?.actions?.slideActions?.forEach((a) => {
+        if (shouldTriggerBefore(a)) runAction(a, { slideIndex })
+    })
+}
+
 async function goToNextShowInProject(slide, customOutputId) {
     if (!get(activeProject)) return
 
@@ -300,14 +326,16 @@ export function goToNextProjectItem(key: string = "") {
         if (!get(activeProject) || typeof currentShow?.index !== "number") return
 
         let index: number = currentShow.index ?? -1
-        if (index + 1 < get(projects)[get(activeProject)!].shows.length) index++
+        if (index + 1 < get(projects)[get(activeProject)!]?.shows?.length) index++
         if (index > -1 && index !== currentShow.index) {
             let newShow = get(projects)[get(activeProject)!].shows[index]
             if (get(focusMode)) activeFocus.set({ id: newShow.id, index })
             else activeShow.set({ ...newShow, index })
 
-            if (newShow.type === "section" && PRESENTATION_KEYS_NEXT.includes(key) && get(special).sectionTriggerAction) {
-                runAction(get(midiIn)[get(special).sectionTriggerAction])
+            if (newShow.type === "section" && PRESENTATION_KEYS_NEXT.includes(key) && (newShow.data?.settings?.triggerAction || get(special).sectionTriggerAction)) {
+                let actionId = newShow.data?.settings?.triggerAction
+                if (!actionId || !get(midiIn)[actionId]) actionId = get(special).sectionTriggerAction
+                if (actionId) runAction(get(midiIn)[actionId])
                 return
             }
 
@@ -325,15 +353,17 @@ export function goToPreviousProjectItem(key: string = "") {
         let currentShow = get(focusMode) ? get(activeFocus) : get(activeShow)
         if (!get(activeProject) || typeof currentShow?.index !== "number") return
 
-        let index: number = currentShow.index ?? get(projects)[get(activeProject)!].shows.length
+        let index: number = currentShow.index ?? get(projects)[get(activeProject)!]?.shows?.length
         if (index - 1 >= 0) index--
         if (index > -1 && index !== currentShow.index) {
             let newShow = get(projects)[get(activeProject)!].shows[index]
             if (get(focusMode)) activeFocus.set({ id: newShow.id, index })
             else activeShow.set({ ...newShow, index })
 
-            if (newShow.type === "section" && PRESENTATION_KEYS_PREV.includes(key) && get(special).sectionTriggerAction) {
-                runAction(get(midiIn)[get(special).sectionTriggerAction])
+            if (newShow.type === "section" && PRESENTATION_KEYS_PREV.includes(key) && (newShow.data?.settings?.triggerAction || get(special).sectionTriggerAction)) {
+                let actionId = newShow.data?.settings?.triggerAction
+                if (!actionId || !get(midiIn)[actionId]) actionId = get(special).sectionTriggerAction
+                if (actionId) runAction(get(midiIn)[actionId])
                 return
             }
 
@@ -432,10 +462,15 @@ export function previousSlide(e: any, customOutputId?: string) {
         line--
     }
 
-    if (slide) setOutput("slide", { ...slide, index, line }, false, customOutputId)
-    else if (currentShow) setOutput("slide", { id: currentShow.id, layout: activeLayout, index }, false, customOutputId)
+    let data = layout[index]?.data
+    checkActionTrigger(data, index)
+    // allow custom actions to trigger first
+    setTimeout(() => {
+        if (slide) setOutput("slide", { ...slide, index, line }, false, customOutputId)
+        else if (currentShow) setOutput("slide", { id: currentShow.id, layout: activeLayout, index }, false, customOutputId)
 
-    updateOut(slide ? slide.id : "active", index, layout, !e?.altKey, customOutputId)
+        updateOut(slide ? slide.id : "active", index!, layout, !e?.altKey, customOutputId)
+    })
 }
 
 // skip slides that are bound to specific output not customId
@@ -492,9 +527,8 @@ export function randomSlide() {
     let showId = slide?.id || currentShow?.id
     if (!showId) return
 
-    let layout: any[] = _show(showId)
-        .layouts(slide ? [slide.layout] : "active")
-        .ref()[0]
+    let layoutId = slide?.layout || _show(showId).get("settings.activeLayout")
+    let layout: any[] = _show(showId).layouts([layoutId]).ref()[0]
 
     let slideCount = layout.length || 0
     if (slideCount < 2) return
@@ -508,8 +542,13 @@ export function randomSlide() {
     } while (randomIndex === currentSlideIndex)
 
     // play slide
-    setOutput("slide", { id: showId, layout: _show(showId).get("settings.activeLayout"), index: randomIndex }, false)
-    updateOut(showId, currentSlideIndex, layout)
+    let data = layout[randomIndex]?.data
+    checkActionTrigger(data, randomIndex)
+    // allow custom actions to trigger first
+    setTimeout(() => {
+        setOutput("slide", { id: showId, layout: layoutId, index: randomIndex }, false)
+        updateOut(showId!, randomIndex, layout)
+    })
 }
 function randomNumber(end: number) {
     return Math.floor(Math.random() * end)
@@ -558,6 +597,7 @@ export function updateOut(showId: string, index: number, layout: any, extra: boo
 
     function activateActions(outputId: string) {
         let background = data.background
+        console.log("BG", background)
 
         // get ghost background
         if (!background) {
@@ -702,7 +742,12 @@ function playSlideActions(actions: any[], outputIds: string[] = [], slideIndex:
         })
     }
 
-    actions.forEach((a) => runAction(a, { slideIndex }))
+    actions.forEach((a) => {
+        // no need to "re-run" actions triggered right before output
+        if (shouldTriggerBefore(a)) return
+
+        runAction(a, { slideIndex })
+    })
 
     playOutputStyleTemplateActions(outputIds)
 }
@@ -749,7 +794,7 @@ export function changeOutputStyle({ outputStyle, styleOutputs }: API_output_styl
     let type = styleOutputs?.type || "active"
     let outputsList = styleOutputs?.outputs || []
 
-    let chosenOutputs = getActiveOutputs(get(outputs), type === "active")
+    let chosenOutputs = getActiveOutputs(get(outputs), type === "active", true, true)
     chosenOutputs.forEach(changeStyle)
 
     function changeStyle(outputId: string) {
@@ -787,8 +832,13 @@ export function playNextGroup(globalGroupIds: string[], { showRef, outSlide, cur
     if (index === undefined) return
 
     // WIP duplicate of "slideClick" in Slides.svelte
-    updateOut(currentShowId, index, showRef, extra)
-    setOutput("slide", { id: currentShowId, layout: _show(currentShowId).get("settings.activeLayout"), index, line: 0 })
+    let data = showRef[index]?.data
+    checkActionTrigger(data, index)
+    // allow custom actions to trigger first
+    setTimeout(() => {
+        setOutput("slide", { id: currentShowId, layout: _show(currentShowId).get("settings.activeLayout"), index, line: 0 })
+        updateOut(currentShowId, index!, showRef, extra, "")
+    })
 
     setTimeout(() => {
         // defocus search input
diff --git a/src/frontend/components/helpers/time.ts b/src/frontend/components/helpers/time.ts
index 2ec279f5..545f257d 100644
--- a/src/frontend/components/helpers/time.ts
+++ b/src/frontend/components/helpers/time.ts
@@ -29,10 +29,13 @@ export function joinTime(time: Time, ms: boolean = false): string {
     return arr.join(":")
 }
 
-export function joinTimeBig(time: number) {
+export function joinTimeBig(time: number, showHours: boolean = true) {
     let allTimes: any = secondsToTime(time)
 
-    let timeValue = (allTimes.d === 0 ? "" : allTimes.d + ", ") + [allTimes.h === "00" ? "" : allTimes.h, allTimes.m, allTimes.s].join(":")
+    let days = allTimes.d === 0 ? "" : allTimes.d + ", "
+    let hours = showHours ? (allTimes.h === "00" ? "" : allTimes.h) : ""
+    let minutes = padString(Number(allTimes.m) + (showHours ? 0 : Number(allTimes.h) * 60))
+    let timeValue = days + [hours, minutes, allTimes.s].join(":")
     while (timeValue[0] === ":") timeValue = timeValue.slice(1, timeValue.length)
 
     timeValue = timeValue.replace(" :", " ")
@@ -104,6 +107,7 @@ export function format(t: string, { hours, minutes, seconds }: any) {
     return ""
 }
 
+export const padString = (a: number) => a.toString().padStart(2, "0")
 export const addZero = (a: number) => ("0" + a).slice(-2)
 // const clip = (a: number) => Math.max(0, Math.min(59, a))
 
diff --git a/src/frontend/components/helpers/timerTick.ts b/src/frontend/components/helpers/timerTick.ts
index 36ef0b91..69f3e337 100644
--- a/src/frontend/components/helpers/timerTick.ts
+++ b/src/frontend/components/helpers/timerTick.ts
@@ -53,7 +53,7 @@ export function startTimerById(id: string) {
 
 export function stopTimers() {
     // timeout so timer_end action don't clear at the same time as next timer tick starts
-    setTimeout(() => {    
+    setTimeout(() => {
         // if (timeout) clearTimeout(timeout) // clear timeout (timer does not start again then...)
         activeTimers.set([])
         customInterval = INTERVAL
@@ -61,10 +61,12 @@ export function stopTimers() {
 }
 
 function increment(timer: any, i: number) {
-    if (timer.start < timer.end ? timer.currentTime >= timer.end : timer.currentTime <= timer.end) {
+    if (!timer.paused && (timer.start < timer.end ? timer.currentTime >= timer.end && timer.currentTime < timer.end + 1 : timer.currentTime <= timer.end && timer.currentTime > timer.end - 1)) {
+        if (!timer.overflow) timer.paused = true
+
         // ended
         checkNextAfterMedia(timer.id, "timer")
-        customActionActivation("timer_end")
+        customActionActivation(`timer_end___` + timer.id)
     }
 
     if ((timer.currentTime === timer.end && !timer.overflow) || timer.paused) return timer
diff --git a/src/frontend/components/input/DynamicList.svelte b/src/frontend/components/input/DynamicList.svelte
new file mode 100644
index 00000000..404e7d95
--- /dev/null
+++ b/src/frontend/components/input/DynamicList.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte"
+    import { dictionary } from "../../stores"
+    import Icon from "../helpers/Icon.svelte"
+    import T from "../helpers/T.svelte"
+    import Button from "../inputs/Button.svelte"
+    import CombinedInput from "../inputs/CombinedInput.svelte"
+    import Center from "../system/Center.svelte"
+
+    type Item = {
+        id: string
+        [key: string]: any
+    }
+
+    export let items: Item[]
+    export let allowOpen: boolean = true
+    export let addDisabled: boolean = false
+    export let nothingText: boolean = true
+
+    let dispatch = createEventDispatcher()
+    function openItem(id: string) {
+        if (!allowOpen) return
+        dispatch("open", id)
+    }
+    function deleteItem(id: string) {
+        dispatch("delete", id)
+    }
+    function addItem() {
+        dispatch("add")
+    }
+</script>
+
+{#if items.length}
+    {#each items as item}
+        <CombinedInput>
+            {#if allowOpen}
+                <Button style="width: 100%;" title={$dictionary.timer?.edit} on:click={() => openItem(item.id)} bold={false}>
+                    <slot {item} />
+                </Button>
+            {:else}
+                <slot {item} />
+            {/if}
+            <Button style="width: 40px;" title={$dictionary.actions?.delete} on:click={() => deleteItem(item.id)} center>
+                <Icon id="delete" />
+            </Button>
+        </CombinedInput>
+    {/each}
+{:else if nothingText}
+    <Center faded>
+        <T id="empty.general" />
+    </Center>
+
+    <br />
+{/if}
+
+<CombinedInput>
+    <Button disabled={addDisabled} on:click={addItem} style="width: 100%;" center>
+        <Icon id="add" right />
+        <T id="settings.add" />
+    </Button>
+</CombinedInput>
diff --git a/src/frontend/components/input/HRule.svelte b/src/frontend/components/input/HRule.svelte
new file mode 100644
index 00000000..50b76790
--- /dev/null
+++ b/src/frontend/components/input/HRule.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+    import T from "../helpers/T.svelte"
+
+    export let title: string = ""
+</script>
+
+<div class="title">
+    {#if title}
+        <span style="opacity: 0.8;"><T id={title} /></span>
+    {/if}
+</div>
+
+<style>
+    .title {
+        display: flex;
+        align-items: center;
+        text-align: center;
+
+        margin: 20px 0;
+        font-size: 0.8em;
+        text-transform: uppercase;
+    }
+
+    .title::before,
+    .title::after {
+        content: "";
+        flex: 1;
+        border-bottom: 2px solid var(--primary-lighter);
+    }
+
+    .title:not(:empty)::before {
+        margin-right: 10px;
+    }
+    .title:not(:empty)::after {
+        margin-left: 10px;
+    }
+</style>
diff --git a/src/frontend/components/input/Input.svelte b/src/frontend/components/input/Input.svelte
new file mode 100644
index 00000000..dad06f34
--- /dev/null
+++ b/src/frontend/components/input/Input.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte"
+    import type { Input } from "../../../types/Input"
+    import T from "../helpers/T.svelte"
+    import Checkbox from "../inputs/Checkbox.svelte"
+    import CombinedInput from "../inputs/CombinedInput.svelte"
+    import Dropdown from "../inputs/Dropdown.svelte"
+    import { commonInputs, customInputs, getDropdownValue, getValue } from "./inputs"
+
+    export let input: Input
+
+    let dispatch = createEventDispatcher()
+    function changed(e: any) {
+        let value = getValue(e, input.type)
+        dispatch("change", value)
+    }
+</script>
+
+{#if input.type === "dropdown"}
+    <CombinedInput>
+        <p><T id={input.name} /></p>
+        <Dropdown value={getDropdownValue(input.options, input.value)} options={input.options} on:click={(e) => changed(e)} />
+    </CombinedInput>
+{:else if input.type === "checkbox"}
+    <CombinedInput>
+        <p><T id={input.name} /></p>
+        <Checkbox checked={input.value} on:change={(e) => changed(e)} />
+    </CombinedInput>
+{:else if customInputs[input.type]}
+    <svelte:component this={customInputs[input.type]} value={input.value} {...input.settings || {}} on:change={(e) => changed(e)} />
+{:else}
+    <CombinedInput>
+        <p><T id={input.name} /></p>
+        <svelte:component this={commonInputs[input.type]} value={input.value} {...input.settings || {}} on:change={(e) => changed(e)} />
+    </CombinedInput>
+{/if}
diff --git a/src/frontend/components/input/Inputs.svelte b/src/frontend/components/input/Inputs.svelte
new file mode 100644
index 00000000..c3598f45
--- /dev/null
+++ b/src/frontend/components/input/Inputs.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { createEventDispatcher } from "svelte"
+    import type { Input as TInput } from "../../../types/Input"
+    import { clone } from "../helpers/array"
+    import HRule from "./HRule.svelte"
+    import Input from "./Input.svelte"
+
+    export let inputs: TInput[]
+    export let title: string = ""
+
+    let dispatch = createEventDispatcher()
+    function changed(e: any, input: TInput) {
+        let value = e.detail
+        dispatch("change", clone({ ...input, value }))
+    }
+</script>
+
+{#if title}
+    <HRule {title} />
+{/if}
+
+{#each inputs as input}
+    {#if input?.type}
+        <Input {input} on:change={(e) => changed(e, input)} />
+    {/if}
+{/each}
diff --git a/src/frontend/components/input/inputs.ts b/src/frontend/components/input/inputs.ts
new file mode 100644
index 00000000..79e3c985
--- /dev/null
+++ b/src/frontend/components/input/inputs.ts
@@ -0,0 +1,76 @@
+import type { Option } from "../../../types/Main"
+import type { Input, InputType } from "../../../types/Input"
+import MidiValues from "../actions/MidiValues.svelte"
+import RestValues from "../actions/RestValues.svelte"
+import { clone, sortByName } from "../helpers/array"
+import Checkbox from "../inputs/Checkbox.svelte"
+import Dropdown from "../inputs/Dropdown.svelte"
+import NumberInput from "../inputs/NumberInput.svelte"
+import TextInput from "../inputs/TextInput.svelte"
+
+//////
+
+export const INPUT_MIDI: Input = { name: "", id: "", type: "midi", value: { type: "noteon", values: { note: 0, velocity: -1, channel: 1 } } }
+export const INPUT_REST: Input = { name: "", id: "", type: "rest", value: { url: "", method: "", contentType: "", payload: "" } }
+
+//////
+
+const getInputValue = {
+    string: (e: any) => e.target.value,
+    number: (e: any) => Number(e.detail),
+    checkbox: (e: any) => e.target.checked,
+}
+export function getValue(e: any, type: InputType) {
+    const input = getInputValue[type]
+    if (input) return input(e)
+    return e.detail
+}
+
+// multiple preset inputs
+export const customInputs = {
+    midi: MidiValues,
+    rest: RestValues,
+}
+
+// [DEFAULT] IN: value= OUT=on:change
+export const commonInputs = {
+    string: TextInput,
+    number: NumberInput,
+    dropdown: Dropdown, // OUT=click
+    checkbox: Checkbox, // IN=checked
+}
+
+// init values
+
+// WIP similar to convertToOptions()
+export function initDropdownOptions(object: Option[] | { [key: string]: { name: string; [key: string]: any } }, addEmpty: boolean = false) {
+    let options: Option[] = []
+    if (Array.isArray(object)) options = object
+    else options = sortByName(Object.keys(object).map((id) => ({ id, name: object[id].name })))
+
+    if (addEmpty) options = [{ name: "—", id: "" }, ...options]
+    return clone(options)
+}
+
+export function getDropdownValue(options: Option[], id: string | undefined) {
+    return options.find((a) => a.id === id)?.name || "—"
+}
+
+// get values
+
+export function getValues(inputs: Input[], data: Object) {
+    if (!Array.isArray(inputs)) return []
+
+    inputs = inputs.map((input) => {
+        if (!input.id) return { ...input, value: data || input.value }
+
+        const keys = input.id.includes(".") ? input.id.split(".") : [input.id]
+        let value = data?.[keys[0]]
+        if (keys.length > 1) value = value?.[keys[1]]
+
+        if (value === undefined) return input
+        return { ...input, value }
+    })
+
+    return inputs
+}
diff --git a/src/frontend/components/inputs/MediaPicker.svelte b/src/frontend/components/inputs/MediaPicker.svelte
index bb1704e4..c21050ff 100644
--- a/src/frontend/components/inputs/MediaPicker.svelte
+++ b/src/frontend/components/inputs/MediaPicker.svelte
@@ -11,6 +11,7 @@
     export let multiple: boolean = false
     export let clearOnClick: boolean = false
     export let center: boolean = true
+    export let dark: boolean = true
 
     function pick() {
         if (clearOnClick) {
@@ -34,6 +35,6 @@
     }
 </script>
 
-<Button {title} style={$$props.style || null} on:click={pick} {center} dark>
+<Button {title} style={$$props.style || null} on:click={pick} {center} {dark}>
     <slot />
 </Button>
diff --git a/src/frontend/components/inputs/ProjectButton.svelte b/src/frontend/components/inputs/ProjectButton.svelte
index 33bc0ace..faa53079 100644
--- a/src/frontend/components/inputs/ProjectButton.svelte
+++ b/src/frontend/components/inputs/ProjectButton.svelte
@@ -53,7 +53,7 @@
         activeProject.set(id)
 
         // select first if ALT key is NOT held down
-        if (e.altKey || !$projects[id].shows.length) return
+        if (e.altKey || !$projects[id]?.shows?.length) return
 
         activeShow.set({ ...$projects[id].shows[0], index: 0 })
     }
diff --git a/src/frontend/components/inputs/ShowButton.svelte b/src/frontend/components/inputs/ShowButton.svelte
index 4ff222ca..9628a561 100644
--- a/src/frontend/components/inputs/ShowButton.svelte
+++ b/src/frontend/components/inputs/ShowButton.svelte
@@ -108,7 +108,7 @@
         let currentOutput: any = getActiveOutputs()[0] || {}
         let slide: any = currentOutput.out?.slide || null
 
-        if (type === "show" && $showsCache[id] && $showsCache[id].layouts[$showsCache[id].settings.activeLayout].slides.length) {
+        if (type === "show" && $showsCache[id] && $showsCache[id].layouts[$showsCache[id].settings.activeLayout]?.slides?.length) {
             updateOut("active", 0, _show("active").layouts("active").ref()[0], !e.altKey)
             if (slide?.id === id && slide?.index === 0 && slide?.layout === $showsCache[id].settings.activeLayout) return
             setOutput("slide", { id, layout: $showsCache[id].settings.activeLayout, index: 0 })
diff --git a/src/frontend/components/main/Tabs.svelte b/src/frontend/components/main/Tabs.svelte
index f54eb6d9..34d33387 100644
--- a/src/frontend/components/main/Tabs.svelte
+++ b/src/frontend/components/main/Tabs.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { onMount } from "svelte"
     import type { TabsObj } from "../../../types/Tabs"
     import { dictionary, labelsDisabled, openToolsTab } from "../../stores"
     import Icon from "../helpers/Icon.svelte"
@@ -20,6 +21,13 @@
 
     $: firstOverflowIndex = Object.values(tabs).findIndex((a) => a.overflow)
     export let overflowHidden: boolean = true
+
+    onMount(() => {
+        // show overflow if active is in overflow
+        if (active && Object.keys(tabs).find((id) => id === active && tabs[id].overflow)) {
+            overflowHidden = false
+        }
+    })
 </script>
 
 <div class="tabs">
diff --git a/src/frontend/components/main/popups/Action.svelte b/src/frontend/components/main/popups/Action.svelte
index 74395479..314ef6a8 100644
--- a/src/frontend/components/main/popups/Action.svelte
+++ b/src/frontend/components/main/popups/Action.svelte
@@ -1,25 +1,25 @@
 <script lang="ts">
+    import { onDestroy, onMount } from "svelte"
     import { uid } from "uid"
-    import { activePopup, activeShow, midiIn, popupData, showsCache, templates } from "../../../stores"
+    import { activePopup, activeShow, midiIn, popupData, showsCache, templates, timers } from "../../../stores"
+    import { translate } from "../../../utils/language"
     import CreateAction from "../../actions/CreateAction.svelte"
     import MidiValues from "../../actions/MidiValues.svelte"
     import { actionData } from "../../actions/actionData"
+    import type { API_midi } from "../../actions/api"
+    import { customActionActivations } from "../../actions/customActivation"
     import { convertOldMidiToNewAction, defaultMidiActionChannels, midiInListen } from "../../actions/midi"
     import Icon from "../../helpers/Icon.svelte"
     import T from "../../helpers/T.svelte"
+    import { clone, convertToOptions } from "../../helpers/array"
+    import { history } from "../../helpers/history"
+    import { updateCachedShows } from "../../helpers/show"
     import { _show } from "../../helpers/shows"
     import Button from "../../inputs/Button.svelte"
     import Checkbox from "../../inputs/Checkbox.svelte"
     import CombinedInput from "../../inputs/CombinedInput.svelte"
-    import TextInput from "../../inputs/TextInput.svelte"
-    import { onDestroy, onMount } from "svelte"
-    import { clone } from "../../helpers/array"
-    import { history } from "../../helpers/history"
-    import { translate } from "../../../utils/language"
-    import { updateCachedShows } from "../../helpers/show"
-    import type { API_midi } from "../../actions/api"
     import Dropdown from "../../inputs/Dropdown.svelte"
-    import { customActionActivations } from "../../actions/customActivation"
+    import TextInput from "../../inputs/TextInput.svelte"
 
     $: id = $popupData.id || ""
     $: mode = $popupData.mode || ""
@@ -252,6 +252,17 @@
     // custom activations
     const customActivations = [{ id: "", name: "—" }, ...customActionActivations]
     $: customActivation = action.customActivation || (action.startupEnabled ? "startup" : "") || ""
+    $: specificActivation = action.specificActivation || ""
+
+    const specificActivations = {
+        timer_end: {
+            name: "items.timer",
+            list: () => convertToOptions($timers),
+        },
+    }
+    function getSpecificActivation(customActivation) {
+        return [{ id: "", name: "$:actions.any:$" }, ...specificActivations[customActivation].list()]
+    }
 
     // keys
     const keys = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]
@@ -265,7 +276,7 @@
         {#if mode !== "slide_midi"}
             <CombinedInput>
                 <p><T id="midi.name" /></p>
-                <TextInput style="width: 70%;" value={action.name} on:change={(e) => updateValue("name", e)} />
+                <TextInput value={action.name} on:change={(e) => updateValue("name", e)} />
             </CombinedInput>
 
             <!-- multiple actions -->
@@ -278,7 +289,7 @@
                 {#if !action.triggers?.length || addTrigger}
                     <CreateAction actionId="" existingActions={action.triggers || []} on:change={changeAction} />
                 {:else}
-                    <CombinedInput>
+                    <CombinedInput style="border-top: 2px solid var(--primary-lighter);">
                         <Button on:click={() => (addTrigger = true)} style="width: 100%;" center>
                             <Icon id="add" right />
                             <T id="settings.add" />
@@ -288,14 +299,25 @@
             </div>
         {/if}
 
-        <!-- MIDI -->
-
         <!-- if not slide specific trigger action -->
         {#if !mode}
+            <!-- Custom Activations -->
+            <hr />
+
             <CombinedInput>
                 <p><T id="actions.custom_activation" /></p>
                 <Dropdown options={customActivations} value={customActivations.find((a) => a.id === customActivation)?.name || "—"} on:click={(e) => updateValue("customActivation", e.detail.id)} />
             </CombinedInput>
+            {#if customActivation === "timer_end"}
+                <CombinedInput>
+                    <p><T id={specificActivations[customActivation]?.name} /></p>
+                    <Dropdown
+                        options={getSpecificActivation(customActivation)}
+                        value={getSpecificActivation(customActivation).find((a) => (specificActivation ? `${customActivation}__${a.id}` === specificActivation : a.id === ""))?.name || "—"}
+                        on:click={(e) => updateValue("specificActivation", e.detail.id ? `${customActivation}__${e.detail.id}` : "")}
+                    />
+                </CombinedInput>
+            {/if}
 
             <!-- can be activated by Keypress -->
             <CombinedInput>
@@ -323,7 +345,30 @@
         {/if}
 
         {#if action.midiEnabled}
-            <MidiValues midi={clone(action.midi || actionMidi)} firstActionId={action.triggers?.[0]} on:change={(e) => updateValue("midi", e)} playSlide={mode === "slide_midi"} />
+            {#if mode === "slide_midi"}
+                <p style="opacity: 0.8;font-size: 0.8em;text-align: center;margin-bottom: 20px;"><T id="actions.play_on_midi_tip" /></p>
+            {:else}
+                <h3><T id="midi.midi" /></h3>
+            {/if}
+
+            <MidiValues value={clone(action.midi || actionMidi)} firstActionId={action.triggers?.[0]} on:change={(e) => updateValue("midi", e)} playSlide={mode === "slide_midi"} />
         {/if}
     {/if}
 </div>
+
+<style>
+    hr {
+        margin: 20px 0;
+        height: 2px;
+        border: none;
+        background-color: var(--primary-lighter);
+    }
+
+    h3 {
+        color: var(--text);
+        text-transform: uppercase;
+        text-align: center;
+        font-size: 0.9em;
+        margin: 20px 0;
+    }
+</style>
diff --git a/src/frontend/components/main/popups/ChooseChord.svelte b/src/frontend/components/main/popups/ChooseChord.svelte
index 7743e7f9..21818b7e 100644
--- a/src/frontend/components/main/popups/ChooseChord.svelte
+++ b/src/frontend/components/main/popups/ChooseChord.svelte
@@ -128,7 +128,7 @@
 
 <CombinedInput style="margin-top: 10px;">
     <p><T id="actions.custom_key" /></p>
-    <TextInput value={chordData.custom} on:change={setCustom} />
+    <TextInput value={chordData.custom} on:input={setCustom} />
 </CombinedInput>
 
 <Button style="margin-top: 12px;" on:click={selectChord} dark center><T id="actions.select_chord" />: <span style="color: var(--secondary);font-weight: bold;margin-left: 5px;">{combinedChord}</span></Button>
diff --git a/src/frontend/components/main/popups/DisplayDuration.svelte b/src/frontend/components/main/popups/DisplayDuration.svelte
new file mode 100644
index 00000000..367f92d2
--- /dev/null
+++ b/src/frontend/components/main/popups/DisplayDuration.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { overlays, selected } from "../../../stores"
+    import CombinedInput from "../../inputs/CombinedInput.svelte"
+    import NumberInput from "../../inputs/NumberInput.svelte"
+
+    let overlayIds = $selected.data
+    let currentValue = $overlays[overlayIds[0]]?.displayDuration || 0
+
+    function updateValue(e: any) {
+        let value = Number(e.detail)
+        currentValue = value
+
+        // WIP history
+        overlays.update((a) => {
+            overlayIds.forEach((id) => {
+                if (!value) delete a[id].displayDuration
+                else a[id].displayDuration = value
+            })
+            return a
+        })
+    }
+</script>
+
+<CombinedInput>
+    <NumberInput value={currentValue} on:change={updateValue} max={3600} fixed={currentValue?.toString()?.includes(".") ? 1 : 0} decimals={1} />
+</CombinedInput>
diff --git a/src/frontend/components/main/popups/Emitters.svelte b/src/frontend/components/main/popups/Emitters.svelte
new file mode 100644
index 00000000..c0065be6
--- /dev/null
+++ b/src/frontend/components/main/popups/Emitters.svelte
@@ -0,0 +1,194 @@
+<script lang="ts">
+    import { uid } from "uid"
+    import type { Emitter, EmitterTemplate, EmitterTemplateValue } from "../../../../types/Show"
+    import { dictionary, emitters } from "../../../stores"
+    import { emitterData, formatData } from "../../actions/emitters"
+    import { clone, keysToID, sortByName } from "../../helpers/array"
+    import Icon from "../../helpers/Icon.svelte"
+    import T from "../../helpers/T.svelte"
+    import DynamicList from "../../input/DynamicList.svelte"
+    import { getValues } from "../../input/inputs"
+    import Inputs from "../../input/Inputs.svelte"
+    import Button from "../../inputs/Button.svelte"
+    import CombinedInput from "../../inputs/CombinedInput.svelte"
+    import Dropdown from "../../inputs/Dropdown.svelte"
+    import TextInput from "../../inputs/TextInput.svelte"
+    import HRule from "../../input/HRule.svelte"
+
+    $: emittersList = sortByName(sortByName(keysToID($emitters)), "type")
+
+    let editEmitter: string = ""
+    $: emitter = $emitters[editEmitter]
+
+    let editTemplate: string = ""
+    $: template = emitter?.templates?.[editTemplate]
+    $: templateInputs = (template?.inputs || []).map((a, i) => ({ ...a, id: i.toString() }))
+    $: dataPreview = templateInputs.length ? formatData[emitter?.type]?.(templateInputs) : ""
+
+    $: emitterTypes = [
+        { name: "OSC", id: "osc" },
+        { name: "HTTP", id: "http" },
+        // { name: "MIDI", id: "midi" },
+    ]
+
+    const DEFAULT_EMITTER: Emitter = { name: "", type: "osc" }
+    const DEFAULT_TEMPLATE: EmitterTemplate = { name: "", inputs: [] }
+    const DEFAULT_TEMPLATE_VALUE: EmitterTemplateValue = { name: "", value: "" }
+
+    function createEmitter() {
+        let id = uid()
+        emitters.update((a) => {
+            a[id] = clone(DEFAULT_EMITTER)
+            return a
+        })
+
+        editEmitter = id
+    }
+    function deleteEmitter(id: string) {
+        emitters.update((a) => {
+            delete a[id]
+            return a
+        })
+    }
+
+    function createTemplate() {
+        let id = uid()
+        let templates = emitter?.templates || {}
+        templates[id] = clone(DEFAULT_TEMPLATE)
+        updateValue("templates", templates)
+
+        editTemplate = id
+    }
+    function deleteTemplate(id: string) {
+        let templates = emitter?.templates || {}
+        if (!templates[id]) return
+
+        delete templates[id]
+        updateValue("templates", templates)
+    }
+    function updateTemplate(key: string, e: any) {
+        let value = e.target?.value
+        let templates = emitter?.templates || {}
+        if (!templates[editTemplate]) return
+
+        templates[editTemplate][key] = value
+        updateValue("templates", templates)
+    }
+
+    function createTemplateValue() {
+        let templates = emitter?.templates || {}
+        if (!templates[editTemplate]) return
+
+        if (!templates[editTemplate].inputs) templates[editTemplate].inputs = []
+        templates[editTemplate].inputs.push(clone(DEFAULT_TEMPLATE_VALUE))
+
+        updateValue("templates", templates)
+    }
+    function removeTemplateValue(index: string) {
+        let templates = emitter?.templates || {}
+        if (!templates[editTemplate]?.inputs) return
+
+        templates[editTemplate].inputs.splice(Number(index), 1)
+
+        updateValue("templates", templates)
+    }
+    function updateTemplateValue(index: string, key: string, e: any) {
+        let value = e.target?.value
+        let templates = emitter?.templates || {}
+        if (!templates[editTemplate]?.inputs?.[index]) return
+
+        templates[editTemplate].inputs[index][key] = value
+        updateValue("templates", templates)
+    }
+
+    function updateValue(key: keyof Emitter, e: any) {
+        if (!editEmitter || !$emitters[editEmitter]) return
+
+        let value = e.target?.value ?? e
+
+        emitters.update((a) => {
+            a[editEmitter][key] = value
+            return a
+        })
+    }
+
+    function changed(e: any, key: keyof Emitter) {
+        let input = e.detail
+
+        let previousValue = emitter[key]
+        if (typeof previousValue !== "object") previousValue = {}
+
+        let newValue = { ...previousValue, [input.id]: input.value }
+        if (!input.id) newValue = input.value
+        updateValue(key, newValue)
+    }
+
+    $: signalInputs = editEmitter && emitter ? clone(getValues(emitterData[emitter.type]?.signal || [], emitter.signal)) : []
+</script>
+
+{#if editTemplate && template}
+    <Button style="position: absolute;left: 0;top: 0;min-height: 58px;" title={$dictionary.actions?.back} on:click={() => (editTemplate = "")}>
+        <Icon id="back" size={2} white />
+    </Button>
+
+    <CombinedInput textWidth={30}>
+        <p><T id="midi.name" /></p>
+        <TextInput value={template.name} on:change={(e) => updateTemplate("name", e)} autofocus={!template.name} />
+    </CombinedInput>
+
+    <HRule title="emitters.inputs" />
+
+    <DynamicList addDisabled={!!templateInputs.find((a) => !a.name && !a.value)} items={templateInputs} let:item={input} on:add={createTemplateValue} on:delete={(e) => removeTemplateValue(e.detail)} allowOpen={false}>
+        <div style="display: flex;width: 100%;">
+            <TextInput placeholder={$dictionary.inputs?.name} value={input.name} on:change={(e) => updateTemplateValue(input.id, "name", e)} style="width: 50%;" />
+            <TextInput placeholder={$dictionary.variables?.value} value={input.value} on:change={(e) => updateTemplateValue(input.id, "value", e)} />
+        </div>
+    </DynamicList>
+
+    {#if dataPreview}
+        <div class="preview">
+            {dataPreview}
+        </div>
+    {/if}
+{:else if editEmitter && emitter}
+    <Button style="position: absolute;left: 0;top: 0;min-height: 58px;" title={$dictionary.actions?.back} on:click={() => (editEmitter = "")}>
+        <Icon id="back" size={2} white />
+    </Button>
+
+    <CombinedInput textWidth={30}>
+        <p><T id="midi.name" /></p>
+        <TextInput value={emitter.name} on:change={(e) => updateValue("name", e)} autofocus={!emitter.name} />
+    </CombinedInput>
+
+    <CombinedInput textWidth={30}>
+        <p><T id="midi.type" /></p>
+        <Dropdown disabled={!!Object.keys(emitter.templates || {})?.length} options={emitterTypes} value={emitterTypes.find((a) => a.id === emitter.type)?.name || "—"} on:click={(e) => updateValue("type", e.detail.id)} />
+    </CombinedInput>
+
+    <Inputs inputs={signalInputs} title="emitters.signal" on:change={(e) => changed(e, "signal")} />
+
+    <!-- TEMPLATES: -->
+    <!-- WIP message templates only working for OSC/HTTP - MIDI should have a custom template... -->
+    <HRule title="emitters.message_templates" />
+
+    <DynamicList items={keysToID(emitter.templates || {})} let:item={template} on:open={(e) => (editTemplate = e.detail)} on:delete={(e) => deleteTemplate(e.detail)} on:add={createTemplate}>
+        <p class="template" style="gap: 5px;width: 100%;min-width: auto;">{template.name || "—"}</p>
+    </DynamicList>
+{:else}
+    {#if !emittersList.length}
+        <p style="opacity: 0.8;font-size: 0.8em;text-align: center;margin-bottom: 20px;"><T id="emitters.tip" /></p>
+    {/if}
+
+    <DynamicList items={emittersList} let:item={emitter} on:open={(e) => (editEmitter = e.detail)} on:delete={(e) => deleteEmitter(e.detail)} on:add={createEmitter}>
+        <p class="emitter" style="gap: 5px;width: 100%;min-width: auto;"><span style="display: flex;align-items: center;text-transform: uppercase;opacity: 0.7;">[{emitter.type}]</span>{emitter.name || "—"}</p>
+    </DynamicList>
+{/if}
+
+<style>
+    .preview {
+        text-align: center;
+        font-size: 0.9em;
+        opacity: 0.8;
+        padding-top: 12px;
+    }
+</style>
diff --git a/src/frontend/components/main/popups/Initialize.svelte b/src/frontend/components/main/popups/Initialize.svelte
index 8fc174d7..98683719 100644
--- a/src/frontend/components/main/popups/Initialize.svelte
+++ b/src/frontend/components/main/popups/Initialize.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { onMount } from "svelte"
     import { MAIN } from "../../../../types/Channels"
-    import { activePopup, dataPath, guideActive, showsPath } from "../../../stores"
+    import { activePopup, dataPath, guideActive, showsPath, timeFormat } from "../../../stores"
     import Icon from "../../helpers/Icon.svelte"
     import T from "../../helpers/T.svelte"
     import Button from "../../inputs/Button.svelte"
@@ -9,6 +9,7 @@
     import FolderPicker from "../../inputs/FolderPicker.svelte"
     import LocaleSwitcher from "../../settings/LocaleSwitcher.svelte"
     import { send } from "../../../utils/request"
+    import Checkbox from "../../inputs/Checkbox.svelte"
 
     // const setAutoOutput = (e: any) => autoOutput.set(e.target.checked)
 
@@ -26,6 +27,10 @@
         guideActive.set(true)
         activePopup.set(null)
     }
+
+    const inputs = {
+        timeFormat: (e: any) => timeFormat.set(e.target.checked ? "24" : "12"),
+    }
 </script>
 
 <div class="main">
@@ -35,11 +40,19 @@
     <br />
 
     <p style="margin-bottom: 10px;font-style: italic;opacity: 0.7;"><T id="setup.change_later" />:</p>
+
     <CombinedInput textWidth={30}>
         <p><T id="settings.language" /></p>
         <LocaleSwitcher />
     </CombinedInput>
 
+    <CombinedInput textWidth={30}>
+        <p><T id="settings.use24hClock" /></p>
+        <div class="alignRight">
+            <Checkbox checked={$timeFormat === "24"} on:change={inputs.timeFormat} />
+        </div>
+    </CombinedInput>
+
     <CombinedInput textWidth={30}>
         <p style="overflow: visible;"><T id="settings.data_location" /></p>
         <span class="showElem">
diff --git a/src/frontend/components/main/popups/ManageTags.svelte b/src/frontend/components/main/popups/ManageTags.svelte
index b8dc9a63..8568fd1a 100644
--- a/src/frontend/components/main/popups/ManageTags.svelte
+++ b/src/frontend/components/main/popups/ManageTags.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { get } from "svelte/store"
-    import { activeMediaTagFilter, dictionary, mediaTags, popupData } from "../../../stores"
+    import { actionTags, activeActionTagFilter, activeMediaTagFilter, dictionary, mediaTags, popupData } from "../../../stores"
     import { keysToID, sortByName } from "../../helpers/array"
     import Icon from "../../helpers/Icon.svelte"
     import T from "../../helpers/T.svelte"
@@ -14,6 +14,7 @@
 
     const store = {
         media: () => mediaTags,
+        action: () => actionTags,
     }
 
     let type: string = $popupData.type || "media"
@@ -43,7 +44,8 @@
             delete a[tagId]
             return a
         })
-        activeMediaTagFilter.set([])
+        if (type === "media") activeMediaTagFilter.set([])
+        else if (type === "action") activeActionTagFilter.set([])
 
         getTags()
     }
diff --git a/src/frontend/components/main/popups/MediaFit.svelte b/src/frontend/components/main/popups/MediaFit.svelte
new file mode 100644
index 00000000..a584fcda
--- /dev/null
+++ b/src/frontend/components/main/popups/MediaFit.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+    import { onMount } from "svelte"
+    import { activePopup, popupData, styles } from "../../../stores"
+    import { mediaFitOptions } from "../../edit/values/boxes"
+    import { history } from "../../helpers/history"
+    import T from "../../helpers/T.svelte"
+    import Button from "../../inputs/Button.svelte"
+
+    // VALUES
+
+    const iconSize: number = 100
+    const icons = {
+        contain:
+            '<g><path d="M 22 20.5 L 78 20.5 C 79.104 20.5 80 21.396 80 22.5 L 80 78.5 C 80 79.604 79.104 80.5 78 80.5 L 22 80.5 C 20.896 80.5 20 79.604 20 78.5 L 20 22.5 C 20 21.396 20.896 20.5 22 20.5 Z" style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:square;stroke-miterlimit:2;"/><g><g><rect x="20" y="20.5" width="15" height="15" transform="matrix(1,0,0,1,0,0)" fill="#FFFFFF"/><rect x="35" y="35.5" width="15" height="15" transform="matrix(1,0,0,1,0,0)" fill="#FFFFFF"/><rect x="50" y="50.5" width="15" height="15" transform="matrix(1,0,0,1,0,0)" fill="#FFFFFF"/><rect x="65" y="65.5" width="15" height="15" transform="matrix(1,0,0,1,0,0)" fill="#FFFFFF"/><rect x="65" y="35.5" width="15" height="15" transform="matrix(1,0,0,1,0,0)" fill="#FFFFFF"/><rect x="35" y="65.5" width="15" height="15" transform="matrix(1,0,0,1,0,0)" fill="#FFFFFF"/><rect x="20" y="50.5" width="15" height="15" transform="matrix(1,0,0,1,0,0)" fill="#FFFFFF"/><rect x="50" y="20.5" width="15" height="15" transform="matrix(1,0,0,1,0,0)" fill="#FFFFFF"/></g></g><path d="M 7 20.5 L 93 20.5 C 94.104 20.5 95 21.396 95 22.5 L 95 78.5 C 95 79.604 94.104 80.5 93 80.5 L 7 80.5 C 5.896 80.5 5 79.604 5 78.5 L 5 22.5 C 5 21.396 5.896 20.5 7 20.5 Z" style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:square;stroke-miterlimit:2;"/></g>',
+        cover: '<g><path d="M 7 5.5 L 93 5.5 C 94.104 5.5 95 6.396 95 7.5 L 95 93.5 C 95 94.604 94.104 95.5 93 95.5 L 7 95.5 C 5.896 95.5 5 94.604 5 93.5 L 5 7.5 C 5 6.396 5.896 5.5 7 5.5 Z" style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:square;stroke-miterlimit:2;"/><g><g><rect x="5" y="5.5" width="22.5" height="22.5" transform="matrix(1,0,0,1,0,0)" fill="#FFFFFF"/><rect x="27.5" y="28" width="22.5" height="22.5" transform="matrix(1,0,0,1,0,0)" fill="#FFFFFF"/><rect x="50" y="50.5" width="22.5" height="22.5" transform="matrix(1,0,0,1,0,0)" fill="#FFFFFF"/><rect x="72.5" y="73" width="22.5" height="22.5" transform="matrix(1,0,0,1,0,0)" fill="#FFFFFF"/><rect x="72.5" y="28" width="22.5" height="22.5" transform="matrix(1,0,0,1,0,0)" fill="#FFFFFF"/><rect x="27.5" y="73" width="22.5" height="22.5" transform="matrix(1,0,0,1,0,0)" fill="#FFFFFF"/><rect x="5" y="50.5" width="22.5" height="22.5" transform="matrix(1,0,0,1,0,0)" fill="#FFFFFF"/><rect x="50" y="5.5" width="22.5" height="22.5" transform="matrix(1,0,0,1,0,0)" fill="#FFFFFF"/></g></g><path d="M 7 20.5 L 93 20.5 C 94.104 20.5 95 21.396 95 22.5 L 95 78.5 C 95 79.604 94.104 80.5 93 80.5 L 7 80.5 C 5.896 80.5 5 79.604 5 78.5 L 5 22.5 C 5 21.396 5.896 20.5 7 20.5 Z" style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:square;stroke-miterlimit:2;"/></g>',
+        fill: '<g><path d="M 6.8 20.5 L 93.2 20.5 C 94.193 20.5 95 21.307 95 22.3 L 95 78.7 C 95 79.693 94.193 80.5 93.2 80.5 L 6.8 80.5 C 5.807 80.5 5 79.693 5 78.7 L 5 22.3 C 5 21.307 5.807 20.5 6.8 20.5 Z" style="fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:square;stroke-miterlimit:2;"/><g><g><rect x="5" y="20.5" width="22.5" height="15" transform="matrix(1,0,0,1,0,0)" fill="#FFFFFF"/><rect x="27.5" y="35.5" width="22.5" height="15" transform="matrix(1,0,0,1,0,0)" fill="#FFFFFF"/><rect x="50" y="50.5" width="22.5" height="15" transform="matrix(1,0,0,1,0,0)" fill="#FFFFFF"/><rect x="72.5" y="65.5" width="22.5" height="15" transform="matrix(1,0,0,1,0,0)" fill="#FFFFFF"/><rect x="72.5" y="35.5" width="22.5" height="15" transform="matrix(1,0,0,1,0,0)" fill="#FFFFFF"/><rect x="27.5" y="65.5" width="22.5" height="15" transform="matrix(1,0,0,1,0,0)" fill="#FFFFFF"/><rect x="5" y="50.5" width="22.5" height="15" transform="matrix(1,0,0,1,0,0)" fill="#FFFFFF"/><rect x="50" y="20.5" width="22.5" height="15" transform="matrix(1,0,0,1,0,0)" fill="#FFFFFF"/></g></g><path d="M 7 20.5 L 93 20.5 C 94.104 20.5 95 21.396 95 22.5 L 95 78.5 C 95 79.604 94.104 80.5 93 80.5 L 7 80.5 C 5.896 80.5 5 79.604 5 78.5 L 5 22.5 C 5 21.396 5.896 20.5 7 20.5 Z" style="fill:none;stroke:#000000;stroke-width:4;stroke-linecap:square;stroke-miterlimit:2;"/></g>',
+    }
+
+    // UPDATE
+
+    function changeFit(id: string) {
+        if (isStyle) {
+            if (!$styles[styleId]) return
+            if (styleFit === id) {
+                activePopup.set(null)
+                return
+            }
+
+            history({ id: "UPDATE", newData: { key: "fit", data: id }, oldData: { id: styleId }, location: { page: "settings", id: "settings_style", override: "style_" + styleId } })
+        }
+    }
+
+    // let isItem: boolean = $popupData.id === "fit"
+    let isStyle: boolean = $popupData.action === "style_fit"
+    let styleId: string = $popupData.id
+
+    onMount(() => {
+        popupData.set({})
+    })
+
+    // STYLE FIT
+
+    $: styleFit = $styles[styleId]?.fit || ""
+</script>
+
+<div class="types">
+    {#each mediaFitOptions as fit}
+        {@const isActive = fit.id === styleFit}
+        <Button outline={isActive} active={isActive} on:click={() => changeFit(fit.id)} bold={false}>
+            <svg viewBox="0 0 100 100" width="{iconSize}pt" height="{iconSize}pt">
+                {@html icons[fit.id]}
+            </svg>
+            <T id={fit.name} />
+        </Button>
+    {/each}
+</div>
+
+<style>
+    .types {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 20px;
+        padding: 15px 0;
+    }
+
+    .types :global(button) {
+        padding: 0.5em 0.8em;
+        flex-direction: column;
+        gap: 5px;
+    }
+</style>
diff --git a/src/frontend/components/main/popups/createShow/CreateShow.svelte b/src/frontend/components/main/popups/createShow/CreateShow.svelte
index fb3ffaf4..af87492e 100644
--- a/src/frontend/components/main/popups/createShow/CreateShow.svelte
+++ b/src/frontend/components/main/popups/createShow/CreateShow.svelte
@@ -164,7 +164,7 @@
 
     <div class="choose">
         {#each createOptions as type, i}
-            <Button title={type.title} disabled={type.id === "web" && !values.name} on:click={() => selectOption(type.id)} style={i === 0 ? "border: 2px solid var(--focus);" : ""}>
+            <Button title={type.title} disabled={type.id === "web" && !values.name?.trim()} on:click={() => selectOption(type.id)} style={i === 0 ? "border: 2px solid var(--focus);" : ""}>
                 <Icon id={type.icon} size={4} white={type.id !== "text" || !values.text.length} />
                 <p><T id={type.name} /></p>
             </Button>
@@ -220,7 +220,6 @@
         {/if}
 
         <CombinedInput>
-            <!-- WIP test is now invalid -->
             <Button on:click={textToShow} style="width: 100%;" dark center data-testid="create.show.popup.new.show">
                 <div class="text" style="display: flex;align-items: center;padding: 0;">
                     {#if values.text.trim().length > 0}
diff --git a/src/frontend/components/media/Video.svelte b/src/frontend/components/media/Video.svelte
index 87ea59b6..1e84844d 100644
--- a/src/frontend/components/media/Video.svelte
+++ b/src/frontend/components/media/Video.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
     import { createEventDispatcher } from "svelte"
     import type { MediaStyle } from "../../../types/Main"
-    import { encodeFilePath, isVideoSupported } from "../helpers/media"
+    import { media } from "../../stores"
+    import { enableSubtitle, encodeFilePath, isVideoSupported } from "../helpers/media"
 
     export let path: any
     export let video: any = null
@@ -53,6 +54,19 @@
     $: if (path[0] === "/") path = `file://${path}`
 
     $: isVideoSupported(path)
+
+    $: subtitle = $media[path]?.subtitle
+    $: tracks = $media[path]?.tracks || []
+    $: if (video && subtitle !== undefined) updateSubtitles()
+    // don't change rapidly
+    let subtitleChange: any = null
+    function updateSubtitles() {
+        if (subtitleChange) clearTimeout(subtitleChange)
+        subtitleChange = setTimeout(() => {
+            if (subtitle) enableSubtitle(video, subtitle)
+            subtitleChange = null
+        }, 20)
+    }
 </script>
 
 <div style="display: flex;width: 100%;height: 100%;place-content: center;{animationStyle}">
@@ -74,6 +88,8 @@
         loop={videoData.loop || false}
     >
         <!-- bind:volume={audioVolume} -->
-        <track kind="captions" />
+        {#each tracks as track}
+            <track label={track.name} srclang={track.lang} kind="subtitles" src="data:text/vtt;charset=utf-8,{encodeURI(track.vtt)}" />
+        {/each}
     </video>
 </div>
diff --git a/src/frontend/components/output/Output.svelte b/src/frontend/components/output/Output.svelte
index 4508fe14..c9bd5170 100644
--- a/src/frontend/components/output/Output.svelte
+++ b/src/frontend/components/output/Output.svelte
@@ -255,7 +255,8 @@
     {/if}
 
     <!-- "underlays" -->
-    {#if layers.includes("overlays") && outUnderlays?.length}
+    {#if layers.includes("overlays")}
+        <!-- && outUnderlays?.length -->
         <Overlays {outputId} overlays={clonedOverlays} activeOverlays={outUnderlays} transition={transitions.overlay} {isKeyOutput} {mirror} />
     {/if}
 
@@ -292,9 +293,9 @@
         {/if}
 
         <!-- overlays -->
-        {#if outOverlays?.length}
-            <Overlays {outputId} overlays={clonedOverlays} activeOverlays={outOverlays} transition={transitions.overlay} {isKeyOutput} {mirror} />
-        {/if}
+        <!-- {#if outOverlays?.length} -->
+        <Overlays {outputId} overlays={clonedOverlays} activeOverlays={outOverlays} transition={transitions.overlay} {isKeyOutput} {mirror} />
+        <!-- {/if} -->
     {/if}
 
     <!-- draw -->
diff --git a/src/frontend/components/output/clear.ts b/src/frontend/components/output/clear.ts
index 2f20632a..e6e2fe11 100644
--- a/src/frontend/components/output/clear.ts
+++ b/src/frontend/components/output/clear.ts
@@ -10,6 +10,7 @@ import {
     outputs,
     outputSlideCache,
     overlays,
+    overlayTimers,
     playingAudio,
     playingMetronome,
     selected,
@@ -18,7 +19,7 @@ import {
     videosData,
     videosTime,
 } from "../../stores"
-import { clearPlayingVideo, getActiveOutputs, isOutCleared, setOutput } from "../helpers/output"
+import { clearOverlayTimer, clearPlayingVideo, getActiveOutputs, isOutCleared, setOutput } from "../helpers/output"
 import { clearAudio } from "../helpers/audio"
 import { clone } from "../helpers/array"
 import { customActionActivation } from "../actions/actions"
@@ -142,10 +143,21 @@ export function clearOverlays(outputId: string = "") {
 }
 
 export function clearTimers(outputId: string = "") {
+    // clear slide timers
     setOutput("transition", null, false, outputId)
 
     let outputIds: string[] = outputId ? [outputId] : getActiveOutputs()
     Object.keys(get(slideTimers)).forEach((id) => {
         if (outputIds.includes(id)) get(slideTimers)[id].timer?.clear()
     })
+
+    // clear overlay timers
+    outputIds.forEach((outputId) => {
+        Object.values(get(overlayTimers)).forEach((a) => {
+            if (a.outputId === outputId) {
+                clearTimeout(a.timer)
+                clearOverlayTimer(a.outputId, a.overlayId)
+            }
+        })
+    })
 }
diff --git a/src/frontend/components/output/layers/Overlays.svelte b/src/frontend/components/output/layers/Overlays.svelte
index 7217e96e..98273f05 100644
--- a/src/frontend/components/output/layers/Overlays.svelte
+++ b/src/frontend/components/output/layers/Overlays.svelte
@@ -10,9 +10,46 @@
 
     export let isKeyOutput: boolean = false
     export let mirror: boolean = false
+
+    // SPAM PREVENTION
+
+    // prevent spamming overlays as they get stuck due to Svelte bug
+    // might still get stuck with some timings, but very unlikely
+    let outputtedOverlays: string[] = []
+    let clearingOverlays: string[] = []
+
+    $: if (activeOverlays !== undefined) updateOverlays()
+    let clearingTimeout: any = null
+    function updateOverlays() {
+        ;[...activeOverlays, ...outputtedOverlays].forEach((id) => {
+            if (clearingOverlays.includes(id)) return
+
+            if (!activeOverlays.includes(id) && outputtedOverlays.includes(id)) {
+                outputtedOverlays.splice(outputtedOverlays.indexOf(id), 1)
+                clearingOverlays.push(id)
+                outputtedOverlays = outputtedOverlays
+            } else if (activeOverlays.includes(id) && !outputtedOverlays.includes(id)) {
+                outputtedOverlays.push(id)
+                outputtedOverlays = outputtedOverlays
+            }
+        })
+
+        if (!clearingOverlays.length) return
+
+        if (clearingTimeout) clearTimeout(clearingTimeout)
+        clearingTimeout = setTimeout(clearingFinished, 220)
+    }
+
+    function clearingFinished() {
+        clearingOverlays.forEach((id) => {
+            if (activeOverlays.includes(id) && !outputtedOverlays.includes(id)) outputtedOverlays.push(id)
+            outputtedOverlays = outputtedOverlays
+        })
+        clearingOverlays = []
+    }
 </script>
 
-{#each activeOverlays as id}
+{#each outputtedOverlays as id}
     {#if overlays[id]}
         <div class:key={isKeyOutput}>
             <Overlay {id} {outputId} {overlays} {mirror} {transition} />
diff --git a/src/frontend/components/output/preview/ClearButtons.svelte b/src/frontend/components/output/preview/ClearButtons.svelte
index 6201ad70..c517e476 100644
--- a/src/frontend/components/output/preview/ClearButtons.svelte
+++ b/src/frontend/components/output/preview/ClearButtons.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { activeSlideRecording, dictionary, isFadingOut, labelsDisabled, outLocked, outputCache, outputs, playingAudio, playingMetronome, special } from "../../../stores"
+    import { activeSlideRecording, dictionary, isFadingOut, labelsDisabled, outLocked, outputCache, outputs, overlayTimers, playingAudio, playingMetronome, special } from "../../../stores"
     import { clearAudio } from "../../helpers/audio"
     import Icon from "../../helpers/Icon.svelte"
     import { getOutputContent, isOutCleared } from "../../helpers/output"
@@ -143,7 +143,14 @@
 
         {#if outputContent?.type !== "pdf"}
             <div class="combinedButton">
-                <Button disabled={slideTimerCleared} on:click={() => clear("nextTimer")} title={$dictionary.clear?.nextTimer + ($special.disablePresenterControllerKeys ? " [F5]" : "")} dark red center>
+                <Button
+                    disabled={slideTimerCleared}
+                    on:click={() => clear("nextTimer")}
+                    title={$dictionary.clear?.[Object.keys($overlayTimers).length ? "timer" : "nextTimer"] + ($special.disablePresenterControllerKeys ? " [F5]" : "")}
+                    dark
+                    red
+                    center
+                >
                     <Icon id="clock" size={1.2} />
                 </Button>
                 {#if !allCleared}
diff --git a/src/frontend/components/output/preview/MultiOutputs.svelte b/src/frontend/components/output/preview/MultiOutputs.svelte
index a46416ad..584a3742 100644
--- a/src/frontend/components/output/preview/MultiOutputs.svelte
+++ b/src/frontend/components/output/preview/MultiOutputs.svelte
@@ -10,7 +10,8 @@
     export let disableTransitions: boolean = false
 
     // export let resolution: Resolution
-    $: outs = sortObject(sortByName(keysToID($outputs).filter((a) => a.enabled && !a.hideFromPreview && !a.isKeyOutput)), "stageOutput")
+    $: outs = sortObject(sortByName(keysToID($outputs).filter((a) => a.enabled && !a.isKeyOutput)), "stageOutput")
+    $: if (outs.length > 1) outs = outs.filter((a) => !a.hideFromPreview)
 
     let fullscreen: boolean = false
     let fullscreenId = ""
diff --git a/src/frontend/components/output/preview/Preview.svelte b/src/frontend/components/output/preview/Preview.svelte
index 79b63c8c..f279af70 100644
--- a/src/frontend/components/output/preview/Preview.svelte
+++ b/src/frontend/components/output/preview/Preview.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { activePage, activeShow, dictionary, groups, guideActive, midiIn, outLocked, outputs, playingAudio, slideTimers, special, styles } from "../../../stores"
+    import { activePage, activeShow, dictionary, groups, guideActive, midiIn, outLocked, outputs, overlayTimers, playingAudio, slideTimers, special, styles } from "../../../stores"
     import { formatSearch } from "../../../utils/search"
     import { previewCtrlShortcuts, previewShortcuts } from "../../../utils/shortcuts"
     import { runAction } from "../../actions/actions"
@@ -155,12 +155,12 @@
     let activeClear: any = null
     let autoChange: boolean = true
     $: if (outputId) autoChange = true
-    $: if (autoChange && $outputs) {
+    $: if (autoChange && ($outputs || $overlayTimers)) {
         let active = getActiveClear(!isOutCleared("transition"), $playingAudio, !isOutCleared("overlays"), !isOutCleared("slide") && (outputSlideHasContent(currentOutput) || isOutCleared("background")), !isOutCleared("background"))
         if (active !== activeClear) activeClear = active
     }
     // enable autochange again if active has no value
-    $: if (!autoChange && ($outputs || $playingAudio)) checkStillActive()
+    $: if (!autoChange && ($outputs || $playingAudio || $overlayTimers)) checkStillActive()
     function checkStillActive() {
         if (activeClear === "nextTimer" && isOutCleared("transition")) autoChange = true
         else if (activeClear === "audio" && !$playingAudio) autoChange = true
@@ -248,7 +248,11 @@
         {:else if activeClear === "audio" && Object.keys($playingAudio).length}
             <Audio />
         {:else if activeClear === "nextTimer"}
-            <NextTimer {currentOutput} {timer} />
+            {#if timer}
+                <NextTimer {currentOutput} {timer} />
+            {:else}
+                <!-- overlay timer -->
+            {/if}
         {/if}
     {/if}
 </div>
diff --git a/src/frontend/components/settings/Screens.svelte b/src/frontend/components/settings/Screens.svelte
index 7d88767f..15b5bef9 100644
--- a/src/frontend/components/settings/Screens.svelte
+++ b/src/frontend/components/settings/Screens.svelte
@@ -203,28 +203,29 @@
 
     <CombinedInput>
         <p><T id="screen.top" /></p>
-        <NumberInput value={cropping.top || 0} max={currentScreen.bounds.height * 0.9 - (cropping.bottom || 0)} on:change={(e) => updateCropping(e.detail, "top")} />
+        <NumberInput value={cropping.top || 0} max={currentScreen.bounds?.height * 0.9 - (cropping.bottom || 0)} on:change={(e) => updateCropping(e.detail, "top")} />
     </CombinedInput>
     <CombinedInput>
         <p><T id="screen.right" /></p>
-        <NumberInput value={cropping.right || 0} max={currentScreen.bounds.width * 0.9 - (cropping.left || 0)} on:change={(e) => updateCropping(e.detail, "right")} />
+        <NumberInput value={cropping.right || 0} max={currentScreen.bounds?.width * 0.9 - (cropping.left || 0)} on:change={(e) => updateCropping(e.detail, "right")} />
     </CombinedInput>
     <CombinedInput>
         <p><T id="screen.bottom" /></p>
-        <NumberInput value={cropping.bottom || 0} max={currentScreen.bounds.height * 0.9 - (cropping.top || 0)} on:change={(e) => updateCropping(e.detail, "bottom")} />
+        <NumberInput value={cropping.bottom || 0} max={currentScreen.bounds?.height * 0.9 - (cropping.top || 0)} on:change={(e) => updateCropping(e.detail, "bottom")} />
     </CombinedInput>
     <CombinedInput>
         <p><T id="screen.left" /></p>
-        <NumberInput value={cropping.left || 0} max={currentScreen.bounds.width * 0.9 - (cropping.right || 0)} on:change={(e) => updateCropping(e.detail, "left")} />
+        <NumberInput value={cropping.left || 0} max={currentScreen.bounds?.width * 0.9 - (cropping.right || 0)} on:change={(e) => updateCropping(e.detail, "left")} />
     </CombinedInput>
 
     <!-- preview -->
     <div class="preview" style="margin-top: 20px;">
-        <div class="border" style="width: {currentScreen.bounds.width * previewSize}px;height: {currentScreen.bounds.height * previewSize}px;">
+        <div class="border" style="width: {currentScreen.bounds?.width * previewSize}px;height: {currentScreen.bounds?.height * previewSize}px;">
             <div class="cropped" style={getCroppedStyle(cropping)}>
                 <div
                     class="previewWindow"
-                    style="aspect-ratio: {currentScreen.bounds.width} / {currentScreen.bounds.height};max-height: {(currentScreen.bounds.height - (cropping.top || 0) - (cropping.bottom || 0)) * previewSize}px;max-width: {(currentScreen.bounds.width -
+                    style="aspect-ratio: {currentScreen.bounds?.width} / {currentScreen.bounds?.height};max-height: {(currentScreen.bounds?.height - (cropping.top || 0) - (cropping.bottom || 0)) * previewSize}px;max-width: {(currentScreen.bounds
+                        ?.width -
                         (cropping.left || 0) -
                         (cropping.right || 0)) *
                         previewSize}px;"
@@ -270,9 +271,9 @@
 
     <!-- preview -->
     <div class="preview" style="margin-top: 20px;">
-        <div class="border" style="background-color: white;width: {currentScreen.bounds.width * previewSize}px;height: {currentScreen.bounds.height * previewSize}px;">
+        <div class="border" style="background-color: white;width: {currentScreen.bounds?.width * previewSize}px;height: {currentScreen.bounds?.height * previewSize}px;">
             <div class="cropped" style={getBlendingStyle(blending)}>
-                <div class="previewWindow" style="aspect-ratio: {currentScreen.bounds.width} / {currentScreen.bounds.height};"></div>
+                <div class="previewWindow" style="aspect-ratio: {currentScreen.bounds?.width} / {currentScreen.bounds?.height};"></div>
             </div>
         </div>
     </div>
@@ -307,7 +308,7 @@
         {#if screens.length}
             <div class="screens" style="transform: translateX(-{totalScreensWidth}px)">
                 {#if !currentScreen.screen || !screens.find((a) => a.id.toString() === currentScreen.screen)}
-                    <div class="screen noClick" style="width: {currentScreen.bounds.width}px;height: {currentScreen.bounds.height}px;left: {currentScreen.bounds.x}px;top: {currentScreen.bounds.y}px;">
+                    <div class="screen noClick" style="width: {currentScreen.bounds?.width}px;height: {currentScreen.bounds?.height}px;left: {currentScreen.bounds?.x}px;top: {currentScreen.bounds?.y}px;">
                         <!-- Current screen position -->
                     </div>
                 {/if}
diff --git a/src/frontend/components/settings/tabs/Connection.svelte b/src/frontend/components/settings/tabs/Connection.svelte
index 8adc6a37..8628c231 100644
--- a/src/frontend/components/settings/tabs/Connection.svelte
+++ b/src/frontend/components/settings/tabs/Connection.svelte
@@ -127,7 +127,7 @@
         { id: "controller", name: "ControlShow", defaultPort: 5512, icon: "connection", enabledByDefault: false },
         { id: "output_stream", name: "OutputShow", defaultPort: 5513, icon: "stage", enabledByDefault: false },
         // Bitfocus Companion (WebSocket/REST)
-        { id: "companion", name: "WebSocket/REST (Companion)", defaultPort: 5505, icon: "companion", enabledByDefault: false, url: "https://freeshow.app/docs/companion" },
+        { id: "companion", name: "WebSocket/REST/OSC (Companion)", defaultPort: 5505, icon: "companion", enabledByDefault: false, url: "https://freeshow.app/docs/companion" },
         // { id: "rest", name: "REST Listener", defaultPort: 5506, icon: "companion", enabledByDefault: false, url: "https://freeshow.app/docs/api" },
     ]
     // Camera
diff --git a/src/frontend/components/settings/tabs/Outputs.svelte b/src/frontend/components/settings/tabs/Outputs.svelte
index 190d9186..7c9429bd 100644
--- a/src/frontend/components/settings/tabs/Outputs.svelte
+++ b/src/frontend/components/settings/tabs/Outputs.svelte
@@ -139,12 +139,7 @@
     // styles
     $: stylesList = getList($styles)
     function getList(styles) {
-        let list = Object.entries(styles).map(([id, obj]: any) => {
-            return { ...obj, id }
-        })
-
-        let sortedList = sortByName(list)
-
+        let sortedList = sortByName(keysToID(styles))
         return [{ id: null, name: "—" }, ...sortedList]
     }
 
diff --git a/src/frontend/components/settings/tabs/Styles.svelte b/src/frontend/components/settings/tabs/Styles.svelte
index 24a50224..6525fca6 100644
--- a/src/frontend/components/settings/tabs/Styles.svelte
+++ b/src/frontend/components/settings/tabs/Styles.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import { uid } from "uid"
     import { activePopup, activeStyle, dictionary, outputs, popupData, styles, templates } from "../../../stores"
-    import { mediaFitOptions } from "../../edit/values/boxes"
+    import { mediaExtensions } from "../../../values/extensions"
     import Icon from "../../helpers/Icon.svelte"
     import T from "../../helpers/T.svelte"
-    import { clone, removeDuplicates, sortByName } from "../../helpers/array"
+    import { clone, keysToID, removeDuplicates, sortByName } from "../../helpers/array"
     import { history } from "../../helpers/history"
     import { getFileName } from "../../helpers/media"
     import { defaultLayers } from "../../helpers/output"
@@ -18,7 +18,7 @@
     import NumberInput from "../../inputs/NumberInput.svelte"
     import TextInput from "../../inputs/TextInput.svelte"
     import SelectElem from "../../system/SelectElem.svelte"
-    import { mediaExtensions } from "../../../values/extensions"
+    import { mediaFitOptions } from "../../edit/values/boxes"
 
     function updateStyle(e: any, key: string, currentId: string = "") {
         let value = e?.detail ?? e?.target?.value ?? e
@@ -62,14 +62,7 @@
         name: $dictionary.example?.default || "Default",
     }
 
-    $: stylesList = getList($styles)
-    function getList(styles) {
-        let list = Object.entries(styles).map(([id, obj]: any) => {
-            return { ...obj, id }
-        })
-
-        return sortByName(list)
-    }
+    $: stylesList = sortByName(keysToID($styles))
 
     // set id after deletion
     $: if (Object.keys($styles)?.length && !$styles[styleId]) styleId = $styles.default ? "default" : Object.keys($styles)[0]
@@ -97,11 +90,7 @@
 
     // slide
 
-    let activeLayers: any[] = []
-    $: {
-        if (currentStyle.layers) activeLayers = currentStyle.layers
-        else activeLayers = clone(defaultLayers)
-    }
+    $: activeLayers = currentStyle.layers || clone(defaultLayers)
 
     // overlays
 
@@ -114,7 +103,7 @@
     ]
 
     let templateList: any[] = []
-    $: templateList = [{ id: null, name: "—" }, ...sortByName(Object.entries($templates).map(([id, template]: any) => ({ id, name: template.name })))]
+    $: templateList = [{ id: null, name: "—" }, ...sortByName(Object.entries($templates).map(([id, a]: any) => ({ id, name: a?.name })))]
 
     // text divider
     function keydown(e: any) {
@@ -214,7 +203,36 @@
 
 <CombinedInput>
     <p><T id="edit.media_fit" /></p>
-    <Dropdown value={mediaFitOptions.find((a) => a.id === currentStyle.fit)?.name || "—"} options={[{ id: null, name: "—" }, ...mediaFitOptions]} on:click={(e) => updateStyle(e.detail.id, "fit")} />
+    <Button
+        on:click={() => {
+            popupData.set({ action: "style_fit", id: styleId })
+            activePopup.set("media_fit")
+        }}
+    >
+        <div style="display: flex;align-items: center;padding: 0;">
+            <Icon id="media_fit" style="margin-left: 0.5em;" right />
+            <p>
+                {#if currentStyle.fit}
+                    {#key currentStyle.fit}
+                        <T id={mediaFitOptions.find((a) => a.id === currentStyle.fit)?.name || ""} />
+                    {/key}
+                {:else}
+                    <T id="popup.media_fit" />
+                {/if}
+            </p>
+        </div>
+    </Button>
+    {#if currentStyle.fit}
+        <Button
+            title={$dictionary.actions?.remove}
+            on:click={() => {
+                updateStyle("", "fit")
+            }}
+            redHover
+        >
+            <Icon id="close" size={1.2} white />
+        </Button>
+    {/if}
 </CombinedInput>
 <!-- TODO: transparency? -->
 <!-- WIP background image (clear to image...) -->
diff --git a/src/frontend/components/show/Projects.svelte b/src/frontend/components/show/Projects.svelte
index 892c8ec6..d4ab1725 100644
--- a/src/frontend/components/show/Projects.svelte
+++ b/src/frontend/components/show/Projects.svelte
@@ -217,6 +217,7 @@
                 <DropArea id="project" selectChildren let:fileOver file>
                     {#if $projects[$activeProject || ""]?.shows?.length}
                         {#each $projects[$activeProject || ""]?.shows as show, index}
+                            {@const triggerAction = show.data?.settings?.triggerAction || $special.sectionTriggerAction}
                             <SelectElem id="show" triggerOnHover data={{ ...show, name: show.name || removeExtension(getFileName(show.id)), index }} {fileOver} borders="edges" trigger="column" draggable>
                                 {#if show.type === "section"}
                                     <Button
@@ -239,9 +240,9 @@
                                             {/if}
                                         </p>
 
-                                        {#if $special.sectionTriggerAction}
-                                            <span style="display: flex;position: absolute;right: 5px;" title={$midiIn[$special.sectionTriggerAction]?.name}>
-                                                <Icon id={getActionIcon($special.sectionTriggerAction)} size={0.8} white />
+                                        {#if triggerAction && $midiIn[triggerAction]}
+                                            <span style="display: flex;position: absolute;right: 5px;" title={$midiIn[triggerAction].name}>
+                                                <Icon id={getActionIcon(triggerAction)} size={0.8} white />
                                             </span>
                                         {/if}
                                     </Button>
diff --git a/src/frontend/components/show/Section.svelte b/src/frontend/components/show/Section.svelte
index b9262e63..c06ad40c 100644
--- a/src/frontend/components/show/Section.svelte
+++ b/src/frontend/components/show/Section.svelte
@@ -55,9 +55,19 @@
         })
     }
 
+    function updateTriggerLocal(e: any) {
+        let actionId = e.detail.id
+
+        projects.update((a) => {
+            a[$activeProject!].shows[section.index].data = { settings: { triggerAction: actionId } }
+            return a
+        })
+    }
+
     let settingsOpened: boolean = false
 
     $: sectionUpdated = $projects[$activeProject || ""]?.shows[section.index] || {}
+    $: localAction = settingsOpened ? $projects[$activeProject || ""]?.shows?.[section.index]?.data?.settings?.triggerAction || "" : ""
 </script>
 
 {#if settingsOpened}
@@ -65,10 +75,18 @@
         <!-- WIP change color? -->
 
         <!-- GLOBAL -->
+        <h5><T id="groups.global" /></h5>
+
+        <CombinedInput>
+            <p><T id="settings.section_trigger_action" /></p>
+            <Dropdown disabled={localAction && $midiIn[localAction]} options={actionOptions} value={actionOptions.find((a) => a.id === $special.sectionTriggerAction || "")?.name || "—"} on:click={updateTrigger} />
+        </CombinedInput>
+
+        <h5><T id="groups.current" /></h5>
 
         <CombinedInput>
             <p><T id="settings.section_trigger_action" /></p>
-            <Dropdown options={actionOptions} value={actionOptions.find((a) => a.id === $special.sectionTriggerAction || "")?.name || "—"} on:click={updateTrigger} />
+            <Dropdown options={actionOptions} value={actionOptions.find((a) => a.id === localAction)?.name || "—"} on:click={updateTriggerLocal} />
         </CombinedInput>
     </div>
 {:else}
@@ -101,6 +119,15 @@
         color: rgb(255 255 255 / 0.4);
     }
 
+    h5 {
+        overflow: visible;
+        text-align: center;
+        color: var(--text);
+        text-transform: uppercase;
+
+        padding: 20px;
+    }
+
     .settings {
         flex: 1;
         /* background-color: var(--primary); */
diff --git a/src/frontend/components/show/Slides.svelte b/src/frontend/components/show/Slides.svelte
index 3af02b15..414fdcc1 100644
--- a/src/frontend/components/show/Slides.svelte
+++ b/src/frontend/components/show/Slides.svelte
@@ -7,7 +7,7 @@
     import { encodeFilePath, getExtension } from "../helpers/media"
     import { getActiveOutputs, refreshOut, setOutput } from "../helpers/output"
     import { getCachedShow } from "../helpers/show"
-    import { getItemWithMostLines, updateOut } from "../helpers/showActions"
+    import { checkActionTrigger, getItemWithMostLines, updateOut } from "../helpers/showActions"
     import { _show } from "../helpers/shows"
     import { getClosestRecordingSlide } from "../helpers/slideRecording"
     import T from "../helpers/T.svelte"
@@ -30,7 +30,7 @@
     function fixBrokenMedia() {
         if (!currentShow) return
         showsCache.update((a) => {
-            Object.entries(currentShow.layouts).forEach(([layoutId, layout]) => {
+            Object.entries(currentShow.layouts || {}).forEach(([layoutId, layout]) => {
                 layout.slides.forEach((slide, i) => {
                     let backgroundId = slide.background
                     if (backgroundId && !currentShow.media[backgroundId]) {
@@ -76,14 +76,19 @@
         customActionActivation("slide_click")
 
         let slideRef: any = _show(showId).layouts([activeLayout]).ref()[0]
-        updateOut(showId, index, slideRef, !e.altKey)
 
-        setOutput("slide", { id: showId, layout: activeLayout, index, line: 0 })
+        let data = slideRef[index]?.data
+        checkActionTrigger(data, index)
+        // allow custom actions to trigger first
+        setTimeout(() => {
+            setOutput("slide", { id: showId, layout: activeLayout, index, line: 0 })
+            updateOut(showId, index, slideRef, !e.altKey)
 
-        getClosestRecordingSlide({ showId, layoutId: activeLayout }, index)
+            getClosestRecordingSlide({ showId, layoutId: activeLayout }, index)
 
-        // force update output if index is the same as previous
-        if (activeSlides[index]) refreshOut()
+            // force update output if index is the same as previous
+            if (activeSlides[index]) refreshOut()
+        })
 
         // don't auto scroll if clicking with mouse!
         disableAutoScroll = true
diff --git a/src/frontend/components/show/VideoShow.svelte b/src/frontend/components/show/VideoShow.svelte
index 6e4d8870..4cd16626 100644
--- a/src/frontend/components/show/VideoShow.svelte
+++ b/src/frontend/components/show/VideoShow.svelte
@@ -1,17 +1,23 @@
 <script lang="ts">
+    import { uid } from "uid"
+    import { MAIN } from "../../../types/Channels"
     import type { MediaStyle } from "../../../types/Main"
-    import { activeProject, activeRename, dictionary, focusMode, outLocked, outputs, playingVideos, projects, videoMarkers, videosData, videosTime, volume } from "../../stores"
+    import { activeProject, activeRename, dictionary, focusMode, media, outLocked, outputs, playingVideos, projects, videoMarkers, videosData, videosTime, volume } from "../../stores"
+    import { awaitRequest, send } from "../../utils/request"
     import Icon from "../helpers/Icon.svelte"
     import T from "../helpers/T.svelte"
     import { analyseAudio, getAnalyser } from "../helpers/audio"
+    import { enableSubtitle, getExtension, getFileName, removeExtension } from "../helpers/media"
     import { getActiveOutputs, setOutput } from "../helpers/output"
     import { joinTime, secondsToTime } from "../helpers/time"
     import Button from "../inputs/Button.svelte"
     import HiddenInput from "../inputs/HiddenInput.svelte"
     import HoverButton from "../inputs/HoverButton.svelte"
+    import MediaPicker from "../inputs/MediaPicker.svelte"
     import VideoSlider from "../output/VideoSlider.svelte"
     import MediaControls from "../output/tools/MediaControls.svelte"
     import Player from "../system/Player.svelte"
+    import { SRTtoVTT } from "./media/subtitles"
 
     export let show
 
@@ -22,6 +28,10 @@
     // $: console.trace(show)
     // $: console.trace(videoTime)
 
+    $: tracks = $media[showId]?.tracks || []
+    $: subtitle = $media[showId]?.subtitle || ""
+    $: if (type !== "player" && showId && $media[showId]?.tracks === undefined) send(MAIN, ["MEDIA_TRACKS"], { path: showId })
+
     export let mediaStyle: MediaStyle = {}
 
     let videoTime: number = 0
@@ -90,6 +100,7 @@
     let hasLoaded: boolean = false
 
     let previewControls: boolean = false
+    let manageSubtitles: boolean = false
     let timeMarkersEnabled: boolean = false
 
     function onLoad() {
@@ -107,6 +118,8 @@
 
         if (autoPause) videoData.paused = false
         else videoTime = 0
+
+        if (subtitle) enableSubtitle(video, subtitle)
     }
 
     // player
@@ -186,6 +199,64 @@
 
     $: if (video && mediaStyle.speed) video.playbackRate = mediaStyle.speed
 
+    let edit: boolean = false
+
+    // SUBTITLE
+
+    function changeSubtitleName(e: any) {
+        let subtitleIndex = e.detail?.id?.slice("subtitle_".length)
+        let value = e.detail.value
+        if (subtitleIndex === undefined || !value) return
+
+        media.update((a) => {
+            if (!a[showId]?.tracks?.[subtitleIndex]) return a
+            a[showId].tracks[subtitleIndex].name = value
+            if (a[showId].tracks[subtitleIndex].lang.length !== 2) a[showId].tracks[subtitleIndex].lang = value.replaceAll(" ", "_").toLowerCase()
+
+            return a
+        })
+    }
+
+    async function subtitlePicked(e: any) {
+        let path = e.detail || ""
+        let content = (await awaitRequest(MAIN, "READ_FILE", { path }))?.content
+        if (!content) return
+
+        let extension = getExtension(path)
+        if (extension === "srt") {
+            content = SRTtoVTT(content)
+        }
+
+        media.update((a) => {
+            if (!a[showId]) a[showId] = {}
+            if (!a[showId].tracks) a[showId].tracks = []
+
+            let name = removeExtension(getFileName(path)).replaceAll(" ", "_")
+            let id = name || uid(5)
+            a[showId].tracks.push({ lang: id, name: "", vtt: content })
+
+            activeRename.set("subtitle_" + (a[showId].tracks.length - 1))
+
+            return a
+        })
+    }
+
+    function setActiveSubtitle(e: any, lang: string) {
+        if (e.target?.closest(".edit")) return
+
+        media.update((a) => {
+            if (!a[showId]) a[showId] = {}
+            if (a[showId].subtitle === lang) {
+                a[showId].subtitle = ""
+                lang = ""
+            } else a[showId].subtitle = lang
+
+            return a
+        })
+    }
+
+    $: if (subtitle !== undefined) enableSubtitle(video, subtitle)
+
     // MARKER
 
     // TODO: history
@@ -208,8 +279,6 @@
         })
     }
 
-    let edit: boolean = false
-
     function changeName(e: any) {
         let currentMarker = e.detail?.id?.slice("marker_".length)
         if (currentMarker === undefined) return
@@ -256,12 +325,43 @@
                     bind:muted={videoData.muted}
                     bind:volume={$volume}
                 >
-                    <track kind="captions" />
+                    {#each tracks as track}
+                        <track label={track.name} srclang={track.lang} kind="subtitles" src="data:text/vtt;charset=utf-8,{encodeURI(track.vtt)}" />
+                    {/each}
                 </video>
             {/if}
         </HoverButton>
     </div>
 
+    {#if playingInOutput ? tracks.length : manageSubtitles}
+        <div class="buttons" style="display: flex;">
+            <div class="markers">
+                {#if tracks.length}
+                    {#each tracks as track, i}
+                        <Button on:click={(e) => setActiveSubtitle(e, track.lang)} outline={subtitle === track.lang} class="context #video_subtitle{track.embedded ? '_embedded' : ''}" id={i.toString()} bold={false} center>
+                            {#if playingInOutput}
+                                <p style="padding: 5px;">{track.name}</p>
+                            {:else}
+                                <HiddenInput value={track.name} id={"subtitle_" + i} on:edit={changeSubtitleName} bind:edit />
+                            {/if}
+                        </Button>
+                    {/each}
+                {:else}
+                    <p style="opacity: 0.5;text-align: center;width: 100%;"><T id="empty.general" /></p>
+                {/if}
+            </div>
+
+            {#if !playingInOutput}
+                <div class="seperator" />
+
+                <MediaPicker id="subtitles" filter={{ name: "Video Text Track", extensions: ["vtt", "srt"] }} on:picked={subtitlePicked} dark={false}>
+                    <Icon id="add" right />
+                    <T id="scripture.local" />
+                </MediaPicker>
+            {/if}
+        </div>
+    {/if}
+
     {#if playingInOutput ? $videoMarkers[showId]?.length : timeMarkersEnabled}
         <div class="buttons" style="display: flex;">
             <div class="markers">
@@ -277,7 +377,6 @@
                             }}
                             bold={false}
                             center
-                            dark
                         >
                             <p style="display: flex;align-items: center;">
                                 <HiddenInput value={marker.name} id={"marker_" + i} on:edit={changeName} bind:edit />
@@ -286,11 +385,13 @@
                         </Button>
                     {/each}
                 {:else}
-                    <p style="opacity: 0.7;text-align: center;width: 100%;"><T id="empty.general" /></p>
+                    <p style="opacity: 0.5;text-align: center;width: 100%;"><T id="empty.general" /></p>
                 {/if}
             </div>
 
             {#if previewControls && !playingInOutput}
+                <div class="seperator" />
+
                 <Button on:click={addMarker}>
                     <Icon id="add" right />
                     <p><T id="actions.add_time_marker" /></p>
@@ -318,7 +419,30 @@
             <Button style="flex: 0;" center title={videoData.muted ? $dictionary.actions?.unmute : $dictionary.actions?.mute} on:click={() => (videoData.muted = !videoData.muted)}>
                 <Icon id={videoData.muted ? "muted" : "volume"} white={videoData.muted} size={1.2} />
             </Button>
-            <Button style="flex: 0;" title={$dictionary.actions?.toggle_time_marker} on:click={() => (timeMarkersEnabled = !timeMarkersEnabled)} center>
+
+            <div class="seperator" />
+
+            <Button
+                style="flex: 0;"
+                title={$dictionary.actions?.manage_subtitles}
+                on:click={() => {
+                    manageSubtitles = !manageSubtitles
+                    if (timeMarkersEnabled) timeMarkersEnabled = false
+                }}
+                center
+            >
+                <Icon id="captions" white={!manageSubtitles} size={1.2} />
+            </Button>
+
+            <Button
+                style="flex: 0;"
+                title={$dictionary.actions?.toggle_time_marker}
+                on:click={() => {
+                    timeMarkersEnabled = !timeMarkersEnabled
+                    if (manageSubtitles) manageSubtitles = false
+                }}
+                center
+            >
                 <Icon id="timeMarker" white={!timeMarkersEnabled} size={1.2} />
             </Button>
         </div>
@@ -339,6 +463,12 @@
         background-color: var(--primary);
     }
 
+    .seperator {
+        width: 1px;
+        height: 100%;
+        background-color: var(--primary);
+    }
+
     .markers {
         flex: 1;
         /* padding: 0 10px; */
diff --git a/src/frontend/components/show/media/subtitles.ts b/src/frontend/components/show/media/subtitles.ts
new file mode 100644
index 00000000..6dc235d1
--- /dev/null
+++ b/src/frontend/components/show/media/subtitles.ts
@@ -0,0 +1,28 @@
+// Convert SRT subtitle format to WebVTT
+export function SRTtoVTT(srt: string) {
+    // normalize line breaks
+    srt = srt.replace(/\r\n|\r/g, "\n")
+
+    let vtt = "WEBVTT\n\n"
+    const srtBlocks = srt.split("\n\n")
+
+    srtBlocks.forEach((block) => {
+        const lines = block.split("\n")
+        if (lines.length < 2) return
+
+        let timestampIndex = 0
+        if (!/\d+/.test(lines[0])) timestampIndex = 0
+        else timestampIndex = 1
+
+        // convert timestamps from SRT (00:00:00,000) to VTT format (00:00:00.000)
+        let timestamp = lines[timestampIndex].replaceAll(",", ".")
+
+        const subtitleText = lines
+            .slice(timestampIndex + 1)
+            .join("\n")
+            .trim()
+        vtt += `${timestamp}\n${subtitleText}\n\n`
+    })
+
+    return vtt.trim()
+}
diff --git a/src/frontend/components/slide/Slide.svelte b/src/frontend/components/slide/Slide.svelte
index ae6b85d7..b491ba59 100644
--- a/src/frontend/components/slide/Slide.svelte
+++ b/src/frontend/components/slide/Slide.svelte
@@ -4,8 +4,10 @@
     import type { MediaStyle } from "../../../types/Main"
     import type { Media, Show, Slide, SlideData } from "../../../types/Show"
     import {
+        activeEdit,
         activePage,
         activeTimers,
+        activeTriggerFunction,
         audioFolders,
         checkedFiles,
         dictionary,
@@ -22,6 +24,7 @@
         showsCache,
         slidesOptions,
         styles,
+        textEditActive,
     } from "../../stores"
     import { wait } from "../../utils/common"
     import { send } from "../../utils/request"
@@ -40,6 +43,7 @@
     import Textbox from "./Textbox.svelte"
     import Zoomed from "./Zoomed.svelte"
     import { removeTagsAndContent } from "../drawer/bible/scripture"
+    import Icon from "../helpers/Icon.svelte"
 
     export let showId: string
     export let slide: Slide
@@ -295,6 +299,14 @@
         return color
     }
 
+    function openNotes() {
+        if ($textEditActive) textEditActive.set(false)
+        activeTriggerFunction.set("slide_notes")
+
+        activeEdit.set({ slide: index, items: [], showId })
+        activePage.set("edit")
+    }
+
     $: if ($refreshListBoxes >= 0) {
         setTimeout(() => {
             refreshListBoxes.set(-1)
@@ -426,7 +438,13 @@
                                 <div class="fill" style="width: {((output.line + 1) / output.maxLines) * 100}%;background-color: {getOutputColor(output.color)};" />
                             </div>
                         {/if}
-                        {#if slide.notes && icons}<p class="notes" title={slide.notes}>{slide.notes}</p>{/if}
+                        {#if slide.notes && icons}
+                            <p class="notes" title={slide.notes} on:click={openNotes}>
+                                <Icon id="notes" white right />
+                                <span>{slide.notes}</span>
+                            </p>
+                        {/if}
+
                         <!-- <div class="label" title={name || ""} style="border-bottom: 2px solid {color};"> -->
                         <!-- font-size: 0.8em; -->
                         <span style="position: absolute;display: contents;">{index + 1}</span>
@@ -600,6 +618,9 @@
     }
 
     .notes {
+        display: flex;
+        align-items: center;
+
         position: absolute;
         top: 0;
         left: 0;
@@ -609,6 +630,12 @@
         background-color: rgb(0 0 0 / 0.5);
         color: white;
         font-weight: normal;
+
+        cursor: pointer;
+        transition: 0.2s background-color;
+    }
+    .notes:hover {
+        background-color: rgb(255 255 255 / 0.2);
     }
 
     .label .text {
diff --git a/src/frontend/components/slide/views/Timer.svelte b/src/frontend/components/slide/views/Timer.svelte
index 7bc673a6..d4bf0242 100644
--- a/src/frontend/components/slide/views/Timer.svelte
+++ b/src/frontend/components/slide/views/Timer.svelte
@@ -18,11 +18,10 @@
     $: ref = { id }
     $: timer = $timers[id] || {}
 
-    let times: string[] = []
     let timeValue: string = "00:00"
     let currentTime: number
     // $: currentTime = getCurrentTime()
-    $: timeValue = joinTimeBig(typeof currentTime === "number" ? currentTime : 0)
+    $: timeValue = joinTimeBig(typeof currentTime === "number" ? currentTime : 0, item?.timer?.showHours !== false)
 
     $: if (Object.keys(timer).length) currentTime = getCurrentTimerValue(timer, ref, today, $activeTimers)
     else currentTime = 0
@@ -74,25 +73,7 @@
                 <span>-</span>
             {/if}
 
-            {#if times.length}
-                {#each times as ti, i}
-                    <div style="position: relative;display: flex;">
-                        {#each ti as t}
-                            <div>
-                                {#key t}
-                                    <span style="position: absolute;">{t}</span>
-                                    <!-- <span transition:blur={{ duration: 500 }} style="position: absolute;">{t}</span> -->
-                                {/key}
-                                <span style:opacity={0}>{t}</span>
-                            </div>
-                        {/each}
-                        <!-- style="margin: 0 10px;" -->
-                        {#if i % 2 === 0 && i < times.length}<span>:</span>{/if}
-                    </div>
-                {/each}
-            {:else}
-                {timeValue}
-            {/if}
+            {timeValue}
         </div>
     </div>
 {/if}
diff --git a/src/frontend/components/stage/Stagebox.svelte b/src/frontend/components/stage/Stagebox.svelte
index a079792f..48bfdc75 100644
--- a/src/frontend/components/stage/Stagebox.svelte
+++ b/src/frontend/components/stage/Stagebox.svelte
@@ -89,13 +89,14 @@
 
     let alignElem
     let size = 100
-    $: if (alignElem && item) size = autosize(alignElem, { type: "growToFit", textQuery: ".autoFontSize" })
+    // currentSlide & timeout to update auto size properly if slide notes
+    $: if (alignElem && item && currentSlide !== undefined) setTimeout(() => (size = autosize(alignElem, { type: "growToFit", textQuery: ".autoFontSize" })))
     $: autoSize = fontSize !== 100 ? Math.max(fontSize, size) : size
 
     // SLIDE
     $: stageOutputId = currentShow?.settings?.output || getActiveOutputs($currentWindow === "output" ? $allOutputs : $outputs, false, true, true)[0]
     $: currentOutput = $outputs[stageOutputId] || $allOutputs[stageOutputId] || {}
-    $: currentSlide = currentOutput.out?.slide || (next ? $outputSlideCache[stageOutputId] : null)
+    $: currentSlide = currentOutput.out?.slide || (next ? $outputSlideCache[stageOutputId] || null : null)
 
     let timeout: any = null
     $: if (stageOutputId && ($allOutputs || $outputs)) startTimeout()
@@ -208,10 +209,10 @@
                 {:else if id.includes("video")}
                     <VideoTime outputId={stageOutputId} autoSize={item.auto !== false ? autoSize : fontSize} reverse={id.includes("countdown")} />
                 {:else if id.includes("first_active_timer")}
-                    <Timer id={firstTimerId} {today} style="font-size: {item.auto !== false ? autoSize : fontSize}px;" />
+                    <Timer {item} id={firstTimerId} {today} style="font-size: {item.auto !== false ? autoSize : fontSize}px;" />
                 {:else if id.includes("timers")}
                     {#if $timers[id.split("#")[1]]}
-                        <Timer id={id.split("#")[1]} {today} style="font-size: {item.auto !== false ? autoSize : fontSize}px;" />
+                        <Timer {item} id={id.split("#")[1]} {today} style="font-size: {item.auto !== false ? autoSize : fontSize}px;" />
                     {/if}
                 {:else if id.includes("variables")}
                     {#if $variables[id.split("#")[1]]}
diff --git a/src/frontend/components/stage/items/SlideText.svelte b/src/frontend/components/stage/items/SlideText.svelte
index 317d84c2..93d8a347 100644
--- a/src/frontend/components/stage/items/SlideText.svelte
+++ b/src/frontend/components/stage/items/SlideText.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import type { Line } from "../../../../types/Show"
     import { showsCache } from "../../../stores"
     import { getItemText } from "../../edit/scripts/textStyle"
     import { clone } from "../../helpers/array"
@@ -41,7 +42,10 @@
                 let text = getItemText(item)
                 if (text.length) {
                     if (!oneItem) oneItem = item
-                    else oneItem.lines.push(...item.lines)
+                    else {
+                        let EMPTY_LINE: Line = { align: "", text: [{ style: "", value: "" }] }
+                        oneItem.lines.push(EMPTY_LINE, ...item.lines)
+                    }
                 }
             })
 
diff --git a/src/frontend/components/stage/tools/BoxStyle.svelte b/src/frontend/components/stage/tools/BoxStyle.svelte
index 72082fe2..4ff2cb6b 100644
--- a/src/frontend/components/stage/tools/BoxStyle.svelte
+++ b/src/frontend/components/stage/tools/BoxStyle.svelte
@@ -32,6 +32,7 @@
             delete newEdits.chords
             edits = { default: trackerEdits, font: edits.default, ...newEdits }
         } else if (items[0].includes("clock")) edits.default.push({ name: "clock.seconds", id: "clock.seconds", input: "checkbox", value: true })
+        else if (items[0].includes("timer")) edits.default.push({ name: "timer.hours", id: "timer.showHours", input: "checkbox", value: item.timer?.showHours !== false })
         else if (items[0].includes("output")) edits = {}
     }
 
@@ -52,13 +53,13 @@
         if (item.tracker.type) edits.default[0].value = item.tracker.type
         edits.default[1].value = item.tracker.accent || $themes[$theme]?.colors?.secondary || "#F0008C"
     }
-    $: if (item && items[0].includes("next_slide_text") && edits.default[5]) {
+    $: if (item && items[0]?.includes("next_slide_text") && edits.default[5]) {
         edits.default[5].value = item.lineCount || 0
     }
-    $: if (item && items[0].includes("slide_text") && edits.default[6]) {
+    $: if (item && items[0]?.includes("slide_text") && edits.default[6]) {
         edits.default[6].value = !!item.invertItems
     }
-    $: if (items[0].includes("slide_tracker") && edits?.default?.[2]) {
+    $: if (items[0]?.includes("slide_tracker") && edits?.default?.[2]) {
         edits.default[2].hidden = item?.tracker?.type !== "group"
     }
 
diff --git a/src/frontend/components/system/Clock.svelte b/src/frontend/components/system/Clock.svelte
index f83a7d2e..538985b2 100644
--- a/src/frontend/components/system/Clock.svelte
+++ b/src/frontend/components/system/Clock.svelte
@@ -1,17 +1,21 @@
 <script lang="ts">
+    import dayjs from "dayjs"
+    import localizedFormat from "dayjs/plugin/localizedFormat"
     import { timeFormat } from "../../stores"
+
     import AnalogClock from "./AnalogClock.svelte"
+    // Initialize plugins
+    dayjs.extend(localizedFormat)
 
     export let style: boolean = true
     export let autoSize: number = 0
-    export let type: "digital" | "analog" = "digital"
+    export let type: "digital" | "analog" | "custom" = "digital"
+    export let dateFormat: string = "none"
+    export let customFormat: string = "hh:mm a"
+    export let showTime: boolean = true
     export let seconds: boolean = true
 
     $: twelwe = $timeFormat === "12"
-    // TODO: auto detect
-    // don't know if this works properly
-    // $: twelwe = (new Date(2022, 0, 1, 13, 0)).getHours() === 1
-    // $: twelwe = (new Date(2022, 0, 1, 15, 0)).toLocaleString().includes("3")
 
     let d: Date = new Date()
     setInterval(() => (d = new Date()), 250)
@@ -24,40 +28,84 @@
         h = d.getHours()
         m = d.getMinutes()
         s = d.getSeconds()
-
         if (twelwe) {
             if (h === 0) h = 12
             else if (h > 12) h -= 12
             pm = d.getHours() >= 12
         }
     }
+
+    function formatTime(date: Date): string {
+        const is12Hour = $timeFormat === "12"
+        const format = is12Hour ? (seconds ? "h:mm:ss A" : "h:mm A") : seconds ? "HH:mm:ss" : "HH:mm"
+        return dayjs(date).format(format)
+    }
+
+    function formatDateTime(date: Date, format: string) {
+        if (format === "none") return ""
+
+        // any custom formats?
+        // format = format.split(" ").map((a) => (customFormats[a] ? customFormats[a]() : a)).join(" ")
+
+        // custom language
+        // https://day.js.org/docs/en/i18n/loading-into-nodejs
+        // let lang = $language
+        // if (lang === "no") lang = "nb"
+        // does not work in this env
+        // ;(await import(`dayjs/locale/${lang}`)).default
+        // fetch language
+        // if (!lang.includes("en")) {
+        //     try {
+        //         const importLanguageFile = `https://github.com/iamkun/dayjs/blob/dev/src/locale/${lang}.js`
+        //         const response = await fetch(importLanguageFile)
+        //         const text = await response.text()
+        //         console.log(text)
+        //     } catch (err) {
+        //         console.error(err)
+        //     }
+        // }
+
+        // .locale($language)
+        return dayjs(date).format(format)
+    }
+
+    $: formattedDate = dateFormat !== "none" ? formatDateTime(d, dateFormat) : ""
+    $: formattedCustom = type === "custom" ? formatDateTime(d, customFormat) : ""
+    $: if (type === "digital" && dateFormat === "none" && showTime === false) showTime = true
 </script>
 
-{#if type === "digital"}
-    <!-- autoSize = slide clock -->
-    <div class="autoFontSize" style={autoSize ? `font-size: ${autoSize}px;height: 100%;align-items: center;` : ""}>
+{#if type === "analog"}
+    <AnalogClock date={d} {...{ h, m, s }} {seconds} />
+{:else if type === "custom"}
+    <div class="clock autoFontSize" style={autoSize ? `font-size: ${autoSize}px;height: 100%;align-items: center;{$$props.style || ''}` : ""}>
+        {#if style}
+            <span class="colored">{formattedCustom}</span>
+        {:else}
+            {formattedCustom}
+        {/if}
+    </div>
+{:else}
+    <div class="clock autoFontSize" style={autoSize ? `font-size: ${autoSize}px;height: 100%;align-items: center;{$$props.style || ''}` : ""}>
         {#if style}
             <span class="colored">{("0" + h).slice(-2)}</span>:
             <span class="colored">{("0" + m).slice(-2)}</span>
             {#if seconds}<span style="font-size: 0.5em;">:{("0" + s).slice(-2)}</span>{/if}
             {#if twelwe}<span style="font-size: 0.3em;font-weight: bold;" class:colored={pm}>&nbsp;{pm ? "PM" : "AM"}</span>{/if}
         {:else}
-            {("0" + h).slice(-2)}:{("0" + m).slice(-2)}{#if seconds}:{("0" + s).slice(-2)}{/if}
-            {#if twelwe}{pm ? "PM" : "AM"}{/if}
+            {#if formattedDate}{formattedDate}{/if}
+            <!-- {#if formattedDate && showTime}&nbsp;{/if} -->
+            {#if showTime}{formatTime(d)}{/if}
         {/if}
     </div>
-{:else}
-    <AnalogClock date={d} {...{ h, m, s }} {seconds} />
 {/if}
 
 <style>
-    div {
+    .clock {
         display: flex;
         justify-content: center;
         align-items: baseline;
         font-size: 4em;
     }
-
     .colored {
         color: var(--secondary);
     }
diff --git a/src/frontend/converters/opensong.ts b/src/frontend/converters/opensong.ts
index a32dbe70..522623d9 100644
--- a/src/frontend/converters/opensong.ts
+++ b/src/frontend/converters/opensong.ts
@@ -27,7 +27,7 @@ interface Song {
     // key_line: string
     // linked_songs: string
     time_sig: string
-    backgrounds: string
+    backgrounds?: string
 }
 
 export function convertOpenSong(data: any) {
@@ -149,7 +149,7 @@ function createSlides({ lyrics, presentation, backgrounds }: Song) {
     }
 
     // add backgrounds
-    if (backgrounds.length) {
+    if (backgrounds?.length) {
         let bgId = uid(5)
         layout[0].background = bgId
         media[bgId] = { path: "data:image/jpeg;base64," + backgrounds } // base64:
@@ -163,25 +163,25 @@ function XMLtoObject(xml: string) {
     let song = parser.parseFromString(xml, "text/xml").children[0]
 
     let object: Song = {
-        title: song.getElementsByTagName("title")[0]?.textContent!,
-        author: song.getElementsByTagName("author")[0]?.textContent!,
-        copyright: song.getElementsByTagName("copyright")[0]?.textContent!,
-        presentation: song.getElementsByTagName("presentation")[0]?.textContent!,
-        // capo: song.getElementsByTagName("capo")[0]?.textContent!,
-        // tempo: song.getElementsByTagName("tempo")[0]?.textContent!,
-        ccli: song.getElementsByTagName("ccli")[0]?.textContent!,
-        // theme: song.getElementsByTagName("theme")[0]?.textContent!,
-        // user1: song.getElementsByTagName("user1")[0]?.textContent!,
-        // user2: song.getElementsByTagName("user2")[0]?.textContent!,
-        // user3: song.getElementsByTagName("user3")[0]?.textContent!,
-        lyrics: song.getElementsByTagName("lyrics")[0]?.textContent!,
-        hymn_number: song.getElementsByTagName("hymn_number")[0]?.textContent!,
-        key: song.getElementsByTagName("key")[0]?.textContent!,
-        aka: song.getElementsByTagName("aka")[0]?.textContent!,
-        // key_line: song.getElementsByTagName("key_line")[0]?.textContent!,
-        // linked_songs: song.getElementsByTagName("linked_songs")[0]?.textContent!,
-        time_sig: song.getElementsByTagName("time_sig")[0]?.textContent!,
-        backgrounds: song.getElementsByTagName("backgrounds")[0]?.textContent!,
+        title: song.getElementsByTagName("title")[0]?.textContent || "",
+        author: song.getElementsByTagName("author")[0]?.textContent || "",
+        copyright: song.getElementsByTagName("copyright")[0]?.textContent || "",
+        presentation: song.getElementsByTagName("presentation")[0]?.textContent || "",
+        // capo: song.getElementsByTagName("capo")[0]?.textContent || "",
+        // tempo: song.getElementsByTagName("tempo")[0]?.textContent || "",
+        ccli: song.getElementsByTagName("ccli")[0]?.textContent || "",
+        // theme: song.getElementsByTagName("theme")[0]?.textContent || "",
+        // user1: song.getElementsByTagName("user1")[0]?.textContent || "",
+        // user2: song.getElementsByTagName("user2")[0]?.textContent || "",
+        // user3: song.getElementsByTagName("user3")[0]?.textContent || "",
+        lyrics: song.getElementsByTagName("lyrics")[0]?.textContent || "",
+        hymn_number: song.getElementsByTagName("hymn_number")[0]?.textContent || "",
+        key: song.getElementsByTagName("key")[0]?.textContent || "",
+        aka: song.getElementsByTagName("aka")[0]?.textContent || "",
+        // key_line: song.getElementsByTagName("key_line")[0]?.textContent || "",
+        // linked_songs: song.getElementsByTagName("linked_songs")[0]?.textContent || "",
+        time_sig: song.getElementsByTagName("time_sig")[0]?.textContent || "",
+        backgrounds: song.getElementsByTagName("backgrounds")[0]?.textContent || "",
     }
 
     return object
diff --git a/src/frontend/converters/powerpoint.ts b/src/frontend/converters/powerpoint.ts
index 6dc1dc6f..e028b8ac 100644
--- a/src/frontend/converters/powerpoint.ts
+++ b/src/frontend/converters/powerpoint.ts
@@ -16,10 +16,8 @@ export function convertPowerpoint(files: any[]) {
 
     setTimeout(() => {
         files.forEach(({ name, content }: any) => {
-            // sort by name to ensure correct slide order (ppt/slides/slide1.xml)
-            const slideKeys = Object.keys(content)
-                .filter((a) => a.includes("ppt/slides/slide"))
-                .sort((a, b) => a.localeCompare(b))
+            // sort by number in name to ensure correct slide order (ppt/slides/slide1.xml)
+            const slideKeys = sortByNameNumber(Object.keys(content).filter((a) => a.includes("ppt/slides/slide")))
 
             let slides: string[][][] = slideKeys.map((key) => convertPPTX(content[key]))
             if (!slides.length) {
@@ -56,6 +54,21 @@ export function convertPowerpoint(files: any[]) {
     }, 10)
 }
 
+// extract number from ppt/slides/slide1.xml
+export function sortByNameNumber(array: string[]) {
+    return array.sort((a, b) => {
+        // get numbers in name
+        const matchA = a.match(/\d+/)
+        const matchB = b.match(/\d+/)
+        const numA = matchA ? parseInt(matchA[0], 10) : Infinity
+        const numB = matchB ? parseInt(matchB[0], 10) : Infinity
+
+        if (numA !== numB) return numA - numB
+
+        return a.localeCompare(b)
+    })
+}
+
 function convertPPTX(content: any) {
     let slide: string[][] = []
 
diff --git a/src/frontend/converters/songbeamer.ts b/src/frontend/converters/songbeamer.ts
index 01ed52ca..2f231f0d 100644
--- a/src/frontend/converters/songbeamer.ts
+++ b/src/frontend/converters/songbeamer.ts
@@ -1,13 +1,13 @@
 import { get } from "svelte/store"
 import { uid } from "uid"
-import type { ID, Slide, Item, Layout, SlideData, Line, Chords } from "../../types/Show"
+import type { Chords, ID, Item, Layout, Line, Slide, SlideData } from "../../types/Show"
 import { TranslationMethod } from "../../types/Songbeamer"
 import { ShowObj } from "../classes/Show"
-import { categories, globalTags, groups } from "../stores"
-import { checkName } from "../components/helpers/show"
-import { createCategory, setTempShows } from "./importHelpers"
 import { history } from "../components/helpers/history"
 import { setQuickAccessMetadata } from "../components/helpers/setShow"
+import { checkName, getGlobalGroup } from "../components/helpers/show"
+import { categories, globalTags } from "../stores"
+import { createCategory, setTempShows } from "./importHelpers"
 
 interface ImportSettings {
     category: string
@@ -290,7 +290,7 @@ const SongbeamerGroups: { [key: string]: string } = {
     strophe: "Verse",
     "pre-bridge": "Pre-Bridge",
     bridge: "Bridge",
-    misc: "",
+    misc: "Misc",
     "pre-refrain": "Pre-Chorus",
     refrain: "Chorus",
     "pre-chorus": "Pre-Chorus",
@@ -578,8 +578,9 @@ function createSlidesMultipleLanguagesPerSlide(songbeamerSlides: SongbeamerSlide
                 break
         }
 
-        if (!isChildSlide && songbeamerSlide.globalGroup !== null && get(groups)[songbeamerSlide.globalGroup]) {
-            slide.globalGroup = songbeamerSlide.globalGroup
+        if (!isChildSlide && songbeamerSlide.globalGroup !== null) {
+            let globalGroup = getGlobalGroup(songbeamerSlide.globalGroup) || "verse"
+            if (globalGroup) slide.globalGroup = globalGroup
         }
         slides[id] = slide
 
@@ -677,8 +678,10 @@ function createSlidesForLanguage(songbeamerSlides: SongbeamerSlide[], language:
                 },
             ],
         }
-        if (!isChildSlide && songbeamerSlide.globalGroup !== null && get(groups)[songbeamerSlide.globalGroup]) {
-            slide.globalGroup = songbeamerSlide.globalGroup
+
+        if (!isChildSlide && songbeamerSlide.globalGroup !== null) {
+            let globalGroup = getGlobalGroup(songbeamerSlide.globalGroup) || "verse"
+            if (globalGroup) slide.globalGroup = globalGroup
         }
         slides[id] = slide
 
@@ -725,6 +728,8 @@ function createSlides(songbeamerSlides: SongbeamerSlide[], metadata: SongbeamerM
     let slides: { [key: ID]: Slide } = {}
     let layouts: Layout[] = []
 
+    console.log(songbeamerSlides)
+
     switch (settings.translationMethod) {
         case TranslationMethod.MultiLine:
         case TranslationMethod.Textboxes:
@@ -753,8 +758,8 @@ function createSlides(songbeamerSlides: SongbeamerSlide[], metadata: SongbeamerM
 
     // add layout slide groups
     layouts[0]?.slides?.forEach(({ id }) => {
-        if (slides[id]) {
-            slides[id].group = "—"
+        if (slides[id] && !slides[id].group) {
+            slides[id].group = ""
             slides[id].globalGroup = "verse"
         }
     })
diff --git a/src/frontend/stores.ts b/src/frontend/stores.ts
index 0341fd14..d6ef765c 100644
--- a/src/frontend/stores.ts
+++ b/src/frontend/stores.ts
@@ -9,7 +9,7 @@ import type { Draw, DrawSettings, DrawTools } from "../types/Draw"
 import type { ActiveEdit, Media, MediaOptions, NumberObject, Popups, Selected, SlidesOptions } from "../types/Main"
 import type { Folders, Projects, ShowRef } from "../types/Projects"
 import type { Dictionary, Styles, Themes } from "../types/Settings"
-import type { ID, MidiIn, Overlays, ShowList, Shows, Tag, Templates, Timer, Transition } from "../types/Show"
+import type { Emitter, ID, MidiIn, Overlays, ShowList, Shows, Tag, Templates, Timer, Transition } from "../types/Show"
 import type { ActiveStage, StageLayouts } from "../types/Stage"
 import type { BibleCategories, Categories, DrawerTabs, SettingsTabs, TopViews } from "../types/Tabs"
 import type { Channels, Playlist } from "./../types/Audio"
@@ -59,13 +59,16 @@ export const focusedArea: Writable<string> = writable("")
 export const activeAnimate: Writable<any> = writable({ slide: -1, index: -1 })
 export const allOutputs: Writable<Outputs> = writable({}) // stage data in output windows
 export const activeScripture: Writable<any> = writable({})
-export const activeTagFilter: Writable<string[]> = writable([])
-export const activeMediaTagFilter: Writable<string[]> = writable([])
 export const activeTriggerFunction: Writable<string> = writable("")
 export const guideActive: Writable<boolean> = writable(false)
 export const runningActions: Writable<string[]> = writable([])
 export const activeSlideRecording: Writable<any> = writable(null)
 
+// TAGS
+export const activeTagFilter: Writable<string[]> = writable([])
+export const activeMediaTagFilter: Writable<string[]> = writable([])
+export const activeActionTagFilter: Writable<string[]> = writable([])
+
 // CALENDAR
 export const activeDays: Writable<number[]> = writable([])
 export const eventEdit: Writable<null | string> = writable(null)
@@ -77,7 +80,7 @@ export const audioChannels: Writable<Channels> = writable({})
 export const playingAudio: Writable<{ [key: string]: any }> = writable({})
 export const playingVideos: Writable<any[]> = writable([])
 export const activePlaylist: Writable<any> = writable(null)
-export const playingMetronome: Writable<any> = writable(null)
+export const playingMetronome: Writable<boolean> = writable(false)
 export const visualizerData: Writable<any> = writable(null)
 export const isFadingOut: Writable<any> = writable(false)
 
@@ -103,6 +106,7 @@ export const customMessageCredits: Writable<string> = writable("")
 export const presentationData: Writable<any> = writable({})
 export const presentationApps: Writable<null | string[]> = writable(null)
 export const colorbars: Writable<string> = writable("")
+export const overlayTimers: Writable<{ [key: string]: any }> = writable({})
 
 // EXPORT
 export const exportOptions: Writable<any> = writable({ pdf: { rows: 5, columns: 2, slide: true, text: true } })
@@ -172,7 +176,6 @@ export const transitionData: Writable<{ text: Transition; media: Transition }> =
     media: { type: "fade", duration: 800, easing: "sine" },
 }) // {default}
 export const slidesOptions: Writable<SlidesOptions> = writable({ columns: 4, mode: "grid" }) // {default}
-export const globalTags: Writable<{ [key: string]: Tag }> = writable({}) // {}
 
 // PROJECT
 export const openedFolders: Writable<ID[]> = writable([]) // []
@@ -194,7 +197,6 @@ export const triggers: Writable<{ [key: string]: any }> = writable({}) // {}
 export const media: Writable<Media> = writable({}) // {}
 export const mediaFolders: Writable<Categories> = writable({}) // {default}
 export const videoMarkers: Writable<{ [key: string]: { name: string; time: number }[] }> = writable({}) // {}
-export const mediaTags: Writable<{ [key: string]: Tag }> = writable({}) // {}
 export const checkedFiles: Writable<any[]> = writable([])
 
 // OVERLAYS
@@ -237,6 +239,11 @@ export const drawerTabsData: Writable<DrawerTabs> = writable({}) // {default}
 export const drawer: Writable<{ height: number; stored: null | number }> = writable({ height: 300, stored: null }) // {default}
 export const mediaOptions: Writable<MediaOptions> = writable({ columns: 5, mode: "grid" }) // {default}
 
+// TAGS
+export const globalTags: Writable<{ [key: string]: Tag }> = writable({}) // {}
+export const mediaTags: Writable<{ [key: string]: Tag }> = writable({}) // {}
+export const actionTags: Writable<{ [key: string]: Tag }> = writable({}) // {}
+
 // OTHER
 export const resized: Writable<NumberObject> = writable({ leftPanel: 290, rightPanel: 290, leftPanelDrawer: 290, rightPanelDrawer: 290 }) // {default}
 export const sorted: Writable<any> = writable({}) // {}
@@ -272,6 +279,7 @@ export const outLocked: Writable<boolean> = writable(false) // false
 // MIDI
 // this is repurposed as "actions"
 export const midiIn: Writable<{ [key: string]: MidiIn }> = writable({}) // {}
+export const emitters: Writable<{ [key: string]: Emitter }> = writable({}) // {}
 
 // CONNECTIONS
 export const ports: Writable<any> = writable({ remote: 5510, stage: 5511, controller: 5512, output_stream: 5513 }) // {default}
diff --git a/src/frontend/utils/common.ts b/src/frontend/utils/common.ts
index fde87981..a37ee741 100644
--- a/src/frontend/utils/common.ts
+++ b/src/frontend/utils/common.ts
@@ -85,6 +85,15 @@ export function hideDisplay(ctrlKey: boolean = true) {
     })
 }
 
+export function mainClick(e: any) {
+    // open links externally
+    if (e.target?.closest("a.open")) {
+        e.preventDefault()
+        let href = e.target.getAttribute("href")
+        if (href) send(MAIN, ["URL"], href)
+    }
+}
+
 // select all focus
 export function focusArea(e: any) {
     if (get(quickSearchActive) && !e.target.closest(".quicksearch")) quickSearchActive.set(false)
diff --git a/src/frontend/utils/createData.ts b/src/frontend/utils/createData.ts
index a594f8b9..9f39b9a5 100644
--- a/src/frontend/utils/createData.ts
+++ b/src/frontend/utils/createData.ts
@@ -95,7 +95,7 @@ export function setExampleOverlays() {
             name: get(dictionary).example?.clock || "Clock",
             color: "dodgerblue",
             category: "visuals",
-            items: [{ style: "top:70px;left:1450px;height:150px;width:470px;", type: "clock", clock: { type: "digital", seconds: false } }],
+            items: [{ style: "top:70px;left:1450px;height:150px;width:470px;", type: "clock", clock: { type: "digital", dateFormat: "none", showTime: true, seconds: false } }],
         }
         a.name = {
             name: get(dictionary).inputs?.name || "Name",
diff --git a/src/frontend/utils/popup.ts b/src/frontend/utils/popup.ts
index 34200420..21a64d70 100644
--- a/src/frontend/utils/popup.ts
+++ b/src/frontend/utils/popup.ts
@@ -48,6 +48,9 @@ import Unsaved from "../components/main/popups/Unsaved.svelte"
 import Variable from "../components/main/popups/Variable.svelte"
 import { activePopup, popupData } from "../stores"
 import UserDataOverwrite from "../components/main/popups/UserDataOverwrite.svelte"
+import DisplayDuration from "../components/main/popups/DisplayDuration.svelte"
+import MediaFit from "../components/main/popups/MediaFit.svelte"
+import Emitters from "../components/main/popups/Emitters.svelte"
 
 export const popups: { [key in Popups]: ComponentType } = {
     initialize: Initialize,
@@ -72,6 +75,7 @@ export const popups: { [key in Popups]: ComponentType } = {
     trigger: Trigger,
     audio_stream: AudioStream,
     transition: Transition,
+    media_fit: MediaFit,
     import_scripture: ImportScripture,
     edit_event: EditEvent,
     choose_screen: ChooseScreen,
@@ -82,6 +86,7 @@ export const popups: { [key in Popups]: ComponentType } = {
     animate: Animate,
     translate: Translate,
     next_timer: NextTimer,
+    display_duration: DisplayDuration,
     manage_tags: ManageTags,
     advanced_settings: AdvancedScreen,
     about: About,
@@ -90,6 +95,7 @@ export const popups: { [key in Popups]: ComponentType } = {
     reset_all: ResetAll,
     alert: Alert,
     history: History,
+    manage_emitters: Emitters,
     action: Action,
     category_action: CategoryAction,
     user_data_overwrite: UserDataOverwrite,
diff --git a/src/frontend/utils/receivers.ts b/src/frontend/utils/receivers.ts
index b6341408..913ecb48 100644
--- a/src/frontend/utils/receivers.ts
+++ b/src/frontend/utils/receivers.ts
@@ -7,7 +7,7 @@ import { menuClick } from "../components/context/menuClick"
 import { clone } from "../components/helpers/array"
 import { analyseAudio } from "../components/helpers/audio"
 import { addDrawerFolder } from "../components/helpers/dropActions"
-import { captureCanvas } from "../components/helpers/media"
+import { setMediaTracks, captureCanvas } from "../components/helpers/media"
 import { getActiveOutputs } from "../components/helpers/output"
 import { checkNextAfterMedia } from "../components/helpers/showActions"
 import { clearBackground } from "../components/output/clear"
@@ -214,6 +214,7 @@ const receiveMAIN: any = {
         // sometimes when lagging the image will be "replaced" even when it exists
         if (prevPath !== path) newToast("$toast.media_replaced")
     },
+    MEDIA_TRACKS: (data: any) => setMediaTracks(data),
     API_TRIGGER: (data: any) => triggerAction(data),
     PRESENTATION_STATE: (data: any) => presentationData.set(data),
     SLIDESHOW_GET_APPS: (data: any) => presentationApps.set(data),
diff --git a/src/frontend/utils/remoteTalk.ts b/src/frontend/utils/remoteTalk.ts
index d0cbfe20..fc7d1b9a 100644
--- a/src/frontend/utils/remoteTalk.ts
+++ b/src/frontend/utils/remoteTalk.ts
@@ -171,7 +171,8 @@ export const receiveREMOTE: any = {
             msg.data = data
         }
 
-        return data ? msg : null
+        msg.send = true
+        return data !== undefined ? msg : null
     },
 }
 
diff --git a/src/frontend/utils/save.ts b/src/frontend/utils/save.ts
index a245189d..af6d5918 100644
--- a/src/frontend/utils/save.ts
+++ b/src/frontend/utils/save.ts
@@ -22,6 +22,7 @@ import {
     drawerTabsData,
     driveData,
     driveKeys,
+    emitters,
     errorHasOccured,
     events,
     folders,
@@ -126,7 +127,6 @@ export function save(closeWhenFinished: boolean = false, customTriggers: { backu
         outputs: get(outputs),
         sorted: get(sorted),
         styles: get(styles),
-        playerVideos: get(playerVideos),
         remotePassword: get(remotePassword),
         resized: get(resized),
         slidesOptions: get(slidesOptions),
@@ -159,6 +159,8 @@ export function save(closeWhenFinished: boolean = false, customTriggers: { backu
         audioStreams: get(audioStreams),
         audioPlaylists: get(audioPlaylists),
         midiIn: get(midiIn),
+        emitters: get(emitters),
+        playerVideos: get(playerVideos),
         videoMarkers: get(videoMarkers),
         mediaTags: get(mediaTags),
         customizedIcons: get(customizedIcons),
@@ -353,6 +355,7 @@ const saveList: { [key in SaveList]: any } = {
     volume: null,
     gain: null,
     midiIn: midiIn,
+    emitters: emitters,
     videoMarkers: videoMarkers,
     mediaTags: mediaTags,
     customizedIcons: customizedIcons,
diff --git a/src/frontend/utils/sendData.ts b/src/frontend/utils/sendData.ts
index a0271fdc..d02d2800 100644
--- a/src/frontend/utils/sendData.ts
+++ b/src/frontend/utils/sendData.ts
@@ -59,7 +59,7 @@ export async function sendData(id: Clients, msg: ClientMessage, check: boolean =
     // let ids: string[] = []
     // if (msg.id) ids = [msg.id]
     // else ids = Object.keys(get(connections).REMOTE || {})
-    if (msg && msg.data !== null && (!check || !checkSent(id, msg))) {
+    if (msg && (msg.data !== null || msg.send) && (!check || !checkSent(id, msg))) {
         window.api.send(id, msg)
         // ids.forEach((id) => {
         // window.api.send(id, { id, ...msg })
diff --git a/src/frontend/utils/updateSettings.ts b/src/frontend/utils/updateSettings.ts
index 708dc646..14595ac5 100644
--- a/src/frontend/utils/updateSettings.ts
+++ b/src/frontend/utils/updateSettings.ts
@@ -24,6 +24,7 @@ import {
     drawer,
     drawerTabsData,
     driveData,
+    emitters,
     formatNewShow,
     fullColors,
     gain,
@@ -281,6 +282,7 @@ const updateList: { [key in SaveListSettings | SaveListSyncedSettings]: any } =
     transitionData: (v: any) => transitionData.set(v),
     volume: (v: any) => volume.set(v),
     gain: (v: any) => gain.set(v),
+    emitters: (v: any) => emitters.set(v),
     midiIn: (v: any) => midiIn.set(v),
     videoMarkers: (v: any) => videoMarkers.set(v),
     mediaTags: (v: any) => mediaTags.set(v),
diff --git a/src/frontend/values/icons.ts b/src/frontend/values/icons.ts
index 8ccb3817..23ac3799 100644
--- a/src/frontend/values/icons.ts
+++ b/src/frontend/values/icons.ts
@@ -155,6 +155,8 @@ const icons: { [key: string]: string } = {
     star: '<path d="M0 0h24v24H0z" fill="none"/><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>',
     transition:
         '<g><rect fill="none" height="24" width="24"/></g><g><g><g><ellipse cx="12" cy="12" rx="3" ry="5.74"/></g><g><path d="M7.5,12c0-0.97,0.23-4.16,3.03-6.5C9.75,5.19,8.9,5,8,5c-3.86,0-7,3.14-7,7s3.14,7,7,7c0.9,0,1.75-0.19,2.53-0.5 C7.73,16.16,7.5,12.97,7.5,12z"/></g><g><path d="M16,5c-0.9,0-1.75,0.19-2.53,0.5c0.61,0.51,1.1,1.07,1.49,1.63C15.29,7.05,15.64,7,16,7c2.76,0,5,2.24,5,5s-2.24,5-5,5 c-0.36,0-0.71-0.05-1.04-0.13c-0.39,0.56-0.88,1.12-1.49,1.63C14.25,18.81,15.1,19,16,19c3.86,0,7-3.14,7-7S19.86,5,16,5z"/></g></g></g>',
+    media_fit:
+        '<path d="M24 24H0V0h24v24z" fill="none"/><path d="M21 15h2v2h-2v-2zm0-4h2v2h-2v-2zm2 8h-2v2c1 0 2-1 2-2zM13 3h2v2h-2V3zm8 4h2v2h-2V7zm0-4v2h2c0-1-1-2-2-2zM1 7h2v2H1V7zm16-4h2v2h-2V3zm0 16h2v2h-2v-2zM3 3C2 3 1 4 1 5h2V3zm6 0h2v2H9V3zM5 3h2v2H5V3zm-4 8v8c0 1.1.9 2 2 2h12V11H1zm2 8l2.5-3.21 1.79 2.15 2.5-3.22L13 19H3z"/>',
     list: '<rect fill="none" height="24" width="24"/><path d="M3,14h4v-4H3V14z M3,19h4v-4H3V19z M3,9h4V5H3V9z M8,14h13v-4H8V14z M8,19h13v-4H8V19z M8,5v4h13V5H8z"/>',
     grid: '<rect fill="none" height="24" width="24"/><g><path d="M14.67,5v6.5H9.33V5H14.67z M15.67,11.5H21V5h-5.33V11.5z M14.67,19v-6.5H9.33V19H14.67z M15.67,12.5V19H21v-6.5H15.67z M8.33,12.5H3V19h5.33V12.5z M8.33,11.5V5H3v6.5H8.33z"/></g>',
     simple: '<g><rect fill="none" height="24" width="24"/></g><g><path d="M2,4v7h20V4H2z M10,20h12v-7H10V20z M2,20h6v-7H2V20z"/></g>',
@@ -287,6 +289,8 @@ const icons: { [key: string]: string } = {
         '<g><rect fill="none" height="24" width="24"/><path d="M15.1,19.37l1,1.74c-0.96,0.44-2.01,0.73-3.1,0.84v-2.02C13.74,19.84,14.44,19.65,15.1,19.37z M4.07,13H2.05 c0.11,1.1,0.4,2.14,0.84,3.1l1.74-1C4.35,14.44,4.16,13.74,4.07,13z M15.1,4.63l1-1.74C15.14,2.45,14.1,2.16,13,2.05v2.02 C13.74,4.16,14.44,4.35,15.1,4.63z M19.93,11h2.02c-0.11-1.1-0.4-2.14-0.84-3.1l-1.74,1C19.65,9.56,19.84,10.26,19.93,11z M8.9,19.37l-1,1.74c0.96,0.44,2.01,0.73,3.1,0.84v-2.02C10.26,19.84,9.56,19.65,8.9,19.37z M11,4.07V2.05 c-1.1,0.11-2.14,0.4-3.1,0.84l1,1.74C9.56,4.35,10.26,4.16,11,4.07z M18.36,7.17l1.74-1.01c-0.63-0.87-1.4-1.64-2.27-2.27 l-1.01,1.74C17.41,6.08,17.92,6.59,18.36,7.17z M4.63,8.9l-1.74-1C2.45,8.86,2.16,9.9,2.05,11h2.02C4.16,10.26,4.35,9.56,4.63,8.9z M19.93,13c-0.09,0.74-0.28,1.44-0.56,2.1l1.74,1c0.44-0.96,0.73-2.01,0.84-3.1H19.93z M16.83,18.36l1.01,1.74 c0.87-0.63,1.64-1.4,2.27-2.27l-1.74-1.01C17.92,17.41,17.41,17.92,16.83,18.36z M7.17,5.64L6.17,3.89 C5.29,4.53,4.53,5.29,3.9,6.17l1.74,1.01C6.08,6.59,6.59,6.08,7.17,5.64z M5.64,16.83L3.9,17.83c0.63,0.87,1.4,1.64,2.27,2.27 l1.01-1.74C6.59,17.92,6.08,17.41,5.64,16.83z M13,7h-2v5.41l4.29,4.29l1.41-1.41L13,11.59V7z"/></g>',
     format: '<path d="M0 0h24v24H0z" fill="none"/><path d="M12.45 16h2.09L9.43 3H7.57L2.46 16h2.09l1.12-3h5.64l1.14 3zm-6.02-5L8.5 5.48 10.57 11H6.43zm15.16.59l-8.09 8.09L9.83 16l-1.41 1.41 5.09 5.09L23 13l-1.41-1.41z"/>',
     actions: '<path d="M0 0h24v24H0z" fill="none"/><path d="M14.4 6L14 4H5v17h2v-7h5.6l.4 2h7V6z"/>',
+    emitter:
+        '<g><rect fill="none" height="24" width="24"/></g><g><g><path d="M20,6c0-1.1-0.9-2-2-2h-4c0-1.38-1.12-2.5-2.5-2.5S9,2.62,9,4H5.01c-1.1,0-2,0.9-2,2v3.8C5.7,9.8,6,11.96,6,12.5 c0,0.54-0.29,2.7-3,2.7V19c0,1.1,0.9,2,2,2h3.8c0-2.16,1.37-2.78,2.2-2.94v-9.3l9,4.5V6z"/><polygon points="13,12 13,16 17,17 13,18 13,22 23,17"/></g></g>',
     remove_layers:
         '<path d="M0 0h24v24H0z" fill="none"/><path d="M19.81 14.99l1.19-.92-1.43-1.43-1.19.92 1.43 1.43zm-.45-4.72L21 9l-9-7-2.91 2.27 7.87 7.88 2.4-1.88zM3.27 1L2 2.27l4.22 4.22L3 9l1.63 1.27L12 16l2.1-1.63 1.43 1.43L12 18.54l-7.37-5.73L3 14.07l9 7 4.95-3.85L20.73 21 22 19.73 3.27 1z"/>',
 
diff --git a/src/server/stage/helpers/autosize.ts b/src/server/common/util/autosize.ts
similarity index 99%
rename from src/server/stage/helpers/autosize.ts
rename to src/server/common/util/autosize.ts
index 695f2bf4..ae18bd37 100644
--- a/src/server/stage/helpers/autosize.ts
+++ b/src/server/common/util/autosize.ts
@@ -1,5 +1,5 @@
 const DEF_FONT_SIZE = 100
-const MAX_FONT_SIZE = 800
+export const MAX_FONT_SIZE = 800
 const MIN_FONT_SIZE = 10
 
 // const BREAK_MARGIN = 2 // px
diff --git a/src/server/common/util/style.ts b/src/server/common/util/style.ts
new file mode 100644
index 00000000..1bcfc003
--- /dev/null
+++ b/src/server/common/util/style.ts
@@ -0,0 +1,47 @@
+import type { StringObject } from "../../../types/Main"
+
+export const getStyles = (str: string | null | undefined, removeTxt: boolean = false) => {
+    let styles: StringObject = {}
+    if (!str?.length) return styles
+
+    str.split(";").forEach((s) => {
+        if (!s.length) return
+
+        let key: string = s.slice(0, s.indexOf(":")).trim()
+        let style: string = s.slice(s.indexOf(":") + 1, s.length).trim()
+
+        let replaced: string = removeText(style)
+
+        const dontReplace: string[] = ["text-decoration", "text-transform", "text-shadow", "box-shadow", "font-family", "transform"]
+
+        // remove text
+        if (!key.includes("color") && !dontReplace.includes(key) && removeTxt && style.length > replaced.length && replaced.length > 0) style = replaced
+
+        if (key === "transform") styles = { ...styles, ...getFilters(style) }
+
+        styles[key] = style
+    })
+
+    return styles
+}
+
+export function getFilters(filter: string) {
+    let styles: StringObject = {}
+    if (!filter) return styles
+
+    filter.split(" ").forEach((s) => {
+        if (s.length) {
+            let key: string = s.slice(0, s.indexOf("(")).trim()
+            let style: string = s.slice(s.indexOf("(") + 1, s.indexOf(")")).trim()
+            style = removeText(style)
+            styles[key] = style
+        }
+    })
+
+    return styles
+}
+
+export function removeText(string: string): string {
+    // .replace(/\D.+/g, "")
+    return string.replace(/[^0-9.-]/g, "")
+}
diff --git a/src/server/remote/App.svelte b/src/server/remote/App.svelte
index 71dfa779..02d35d59 100644
--- a/src/server/remote/App.svelte
+++ b/src/server/remote/App.svelte
@@ -8,6 +8,9 @@
     import { dictionary, errors, isConnected, password } from "./util/stores"
 
     initSocket()
+
+    // test API actions
+    // send("API:get_playlists")
 </script>
 
 <Error errors={$errors} />
diff --git a/src/server/remote/components/Main.svelte b/src/server/remote/components/Main.svelte
index d16f30f7..86c09e90 100644
--- a/src/server/remote/components/Main.svelte
+++ b/src/server/remote/components/Main.svelte
@@ -41,6 +41,7 @@
 
         if ([" ", "Arrow", "Page"].includes(e.key)) e.preventDefault()
 
+        // WIP keyboard shortcuts same as main app
         if ([" ", "ArrowRight", "PageDown"].includes(e.key)) next()
         else if (["ArrowLeft", "PageUp"].includes(e.key)) previous()
         else if (e.key === "Escape") send("OUT", "clear")
diff --git a/src/server/remote/components/pages/Project.svelte b/src/server/remote/components/pages/Project.svelte
index b18a3339..1ff33477 100644
--- a/src/server/remote/components/pages/Project.svelte
+++ b/src/server/remote/components/pages/Project.svelte
@@ -18,13 +18,15 @@
         <p style="flex: 1;text-align: center;padding: 0.2em 0.8em;">{$activeProject.name}</p>
     </div>
 
-    {#if $activeProject.shows.length}
+    {#if $activeProject.shows?.length}
         <div class="scroll">
             {#each $activeProject.shows as show}
                 {@const s = $shows.find((a) => a.id === show.id) || {}}
 
                 {#if show.type === "section"}
-                    <div class="section">{show.name}</div>
+                    <div class="section">
+                        <p style={show.name ? "" : "opacity: 0.5;"}>{show.name || translate("main.unnamed", $dictionary)}</p>
+                    </div>
                 {:else if ["image", "video"].includes(show.type)}
                     <Button
                         on:click={() => {
diff --git a/src/server/remote/components/pages/Scripture.svelte b/src/server/remote/components/pages/Scripture.svelte
index 549011c6..2879b212 100644
--- a/src/server/remote/components/pages/Scripture.svelte
+++ b/src/server/remote/components/pages/Scripture.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import Button from "../../../common/components/Button.svelte"
+    import Center from "../../../common/components/Center.svelte"
     import Icon from "../../../common/components/Icon.svelte"
     import Loading from "../../../common/components/Loading.svelte"
     import { keysToID } from "../../../common/util/helpers"
@@ -55,13 +56,15 @@
     {:else}
         <Clear />
     {/if}
-{:else}
+{:else if sortedBibles.length}
     {#each sortedBibles as scripture}
         <Button on:click={() => openScripture(scripture.id)} title={scripture.customName || scripture.name} style="padding: 0.5em 0.8em;" bold={false}>
             <Icon id={scripture.icon} right />
             <p>{scripture.customName || scripture.name}</p>
         </Button>
     {/each}
+{:else}
+    <Center faded>{translate("empty.general", $dictionary)}</Center>
 {/if}
 
 <style>
diff --git a/src/server/remote/components/pages/Slide.svelte b/src/server/remote/components/pages/Slide.svelte
index 34288759..7391f23b 100644
--- a/src/server/remote/components/pages/Slide.svelte
+++ b/src/server/remote/components/pages/Slide.svelte
@@ -19,7 +19,8 @@
     // click on content
     function click(e: any) {
         if (e.clientX < window.innerWidth / 3) previous()
-        else if (!($outSlide + 1 >= totalSlides)) next()
+        else next()
+        // if (!($outSlide + 1 >= totalSlides))
     }
 </script>
 
diff --git a/src/server/remote/components/show/Textbox.svelte b/src/server/remote/components/show/Textbox.svelte
index 6cceec75..938d692d 100644
--- a/src/server/remote/components/show/Textbox.svelte
+++ b/src/server/remote/components/show/Textbox.svelte
@@ -1,20 +1,76 @@
 <script lang="ts">
     import type { Item } from "../../../../types/Show"
+    import autosize, { AutosizeTypes } from "../../../common/util/autosize"
+    import { getStyles } from "../../../common/util/style"
 
     export let item: Item
 
     $: lineGap = item?.specialStyle?.lineGap
     $: lineBg = item?.specialStyle?.lineBg
+
+    // AUTO SIZE
+
+    let fontSize: number = 0
+    let itemElem: any
+
+    let previousItem = "{}"
+    $: newItem = JSON.stringify(item)
+    $: if (itemElem && newItem !== previousItem) calculateAutosize()
+
+    let loopStop: any = null
+    let newCall: boolean = false
+    function calculateAutosize() {
+        if (loopStop) {
+            newCall = true
+            return
+        }
+        loopStop = setTimeout(() => {
+            loopStop = null
+            if (newCall) calculateAutosize()
+            newCall = false
+        }, 200)
+        previousItem = newItem
+
+        let type = (item?.textFit || "shrinkToFit") as AutosizeTypes
+
+        let defaultFontSize
+        let maxFontSize
+
+        if ((item.type || "text") === "text" && !item.auto) {
+            fontSize = 0
+            return
+        }
+
+        const itemText = item?.lines?.[0]?.text?.filter((a) => !a.customType?.includes("disableTemplate")) || []
+        let itemFontSize = Number(getStyles(itemText[0]?.style, true)?.["font-size"] || "") || 100
+
+        defaultFontSize = itemFontSize
+        if (type === "growToFit") maxFontSize = itemFontSize
+
+        let elem = itemElem
+        if (!elem) return
+
+        let textQuery = ""
+        if ((item.type || "text") === "text") {
+            elem = elem.querySelector(".align")
+            textQuery = ".lines .break span"
+        } else {
+            type = "growToFit"
+            if (item.type === "slide_tracker") textQuery = ".progress div"
+        }
+
+        fontSize = autosize(elem, { type, textQuery, defaultFontSize, maxFontSize })
+    }
 </script>
 
-<div class="item" style={item.style}>
+<div class="item" style={item.style} bind:this={itemElem}>
     {#if item.lines}
         <div class="align" style={item.align}>
             <div class="lines" style={lineGap ? `gap: ${lineGap}px;` : ""}>
                 {#each item.lines as line}
                     <div class="break" style="{lineBg ? `background-color: ${lineBg};` : ''}{line.align}">
                         {#each line.text || [] as text}
-                            <span style={text.style}>{@html text.value.replaceAll("\n", "<br>") || "<br>"}</span>
+                            <span style="{text.style};{fontSize ? `font-size: ${fontSize}px;` : ''}">{@html text.value.replaceAll("\n", "<br>") || "<br>"}</span>
                         {/each}
                     </div>
                 {/each}
diff --git a/src/server/remote/util/dictionary.ts b/src/server/remote/util/dictionary.ts
index a096fccb..f0a5a098 100644
--- a/src/server/remote/util/dictionary.ts
+++ b/src/server/remote/util/dictionary.ts
@@ -3,6 +3,7 @@ export const DEFAULT_DICTIONARY = {
         unnamed: "Unnamed",
     },
     empty: {
+        general: "Nothing here",
         project_select: "Select a project",
         show: "No show selected",
         shows: "No shows",
diff --git a/src/server/remote/util/output.ts b/src/server/remote/util/output.ts
index c5c48622..b70948cf 100644
--- a/src/server/remote/util/output.ts
+++ b/src/server/remote/util/output.ts
@@ -19,7 +19,7 @@ export function next() {
     else {
         // go to next show in project
         let currentProjectShows = _get("projects").find((a) => a.id === _get("project"))?.shows || []
-        let currentProjectShowIndex = currentProjectShows.findIndex((showRef: any) => showRef.id === _get("activeShow").id)
+        let currentProjectShowIndex = currentProjectShows.findIndex((showRef: any) => showRef.id === _get("outShow").id)
 
         let newIndex = currentProjectShowIndex + 1
         let newProjectShow: any = { type: "." }
@@ -34,10 +34,10 @@ export function next() {
         _set("activeTab", "show")
 
         // play slide
-        setTimeout(() => {
-            send("OUT", { id: newProjectShow.id, index: 0, layout: _get("activeShow")?.settings?.activeLayout })
-            _set("outShow", _get("activeShow"))
-        }, 100)
+        // setTimeout(() => {
+        //     send("OUT", { id: newProjectShow.id, index: 0, layout: _get("activeShow")?.settings?.activeLayout })
+        //     _set("outShow", _get("activeShow"))
+        // }, 100)
     }
 }
 
@@ -48,6 +48,23 @@ export function previous() {
 
     let index = nextSlide(_get("layout"), _get("outSlide") ?? _get("layout")?.length, true)
     if (index !== null) send("OUT", { id: _get("outShow").id, index, layout: _get("outShow").settings.activeLayout })
+    else {
+        // go to preview show in project
+        let currentProjectShows = _get("projects").find((a) => a.id === _get("project"))?.shows || []
+        let currentProjectShowIndex = currentProjectShows.findIndex((showRef: any) => showRef.id === _get("outShow").id)
+
+        let newIndex = currentProjectShowIndex - 1
+        let newProjectShow: any = { type: "." }
+        while (newProjectShow && (newProjectShow.type || "show") !== "show") {
+            newProjectShow = currentProjectShows[newIndex]
+            newIndex--
+        }
+
+        if (!newProjectShow) return
+
+        send("SHOW", newProjectShow.id)
+        _set("activeTab", "show")
+    }
 }
 
 export function nextSlide(layout: any, currentSlide: number, previous: boolean = false): null | number {
diff --git a/src/server/stage/components/Slide.svelte b/src/server/stage/components/Slide.svelte
index b0398f3c..b2312868 100644
--- a/src/server/stage/components/Slide.svelte
+++ b/src/server/stage/components/Slide.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import Zoomed from "./Zoomed.svelte"
     import Stagebox from "./Stagebox.svelte"
-    import { getStyleResolution } from "../helpers/getStyleResolution"
+    import { getStyleResolution } from "../../common/util/getStyleResolution"
 
     interface Show {
         settings: any
diff --git a/src/server/stage/components/Stagebox.svelte b/src/server/stage/components/Stagebox.svelte
index 54aa0a62..088a7916 100644
--- a/src/server/stage/components/Stagebox.svelte
+++ b/src/server/stage/components/Stagebox.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
     import { onDestroy } from "svelte"
-    import autosize from "../helpers/autosize"
-    import { getStyles } from "../helpers/style"
     import Clock from "../items/Clock.svelte"
     import SlideNotes from "../items/SlideNotes.svelte"
     import SlideProgress from "../items/SlideProgress.svelte"
@@ -13,6 +11,8 @@
     import Timer from "./Timer.svelte"
     import Variable from "./Variable.svelte"
     import { keysToID, sortByName } from "../../common/util/helpers"
+    import { getStyles } from "../../common/util/style"
+    import autosize from "../../common/util/autosize"
 
     export let show: any
     export let id: string
@@ -144,10 +144,10 @@
                 {:else if id.includes("video")}
                     <VideoTime {videoTime} autoSize={item.auto !== false ? autoSize : fontSize} />
                 {:else if id.includes("first_active_timer")}
-                    <Timer timer={$timers[firstTimerId] || {}} ref={{ id: firstTimerId }} {today} style="font-size: {item.auto !== false ? autoSize : fontSize}px;" />
+                    <Timer {item} timer={$timers[firstTimerId] || {}} ref={{ id: firstTimerId }} {today} style="font-size: {item.auto !== false ? autoSize : fontSize}px;" />
                 {:else if id.includes("timers")}
                     {#if $timers[id.split("#")[1]]}
-                        <Timer timer={$timers[id.split("#")[1]]} ref={{ id: id.split("#")[1] }} {today} style="font-size: {item.auto !== false ? autoSize : fontSize}px;" />
+                        <Timer {item} timer={$timers[id.split("#")[1]]} ref={{ id: id.split("#")[1] }} {today} style="font-size: {item.auto !== false ? autoSize : fontSize}px;" />
                     {/if}
                 {:else if id.includes("variables")}
                     {#if $variables[id.split("#")[1]]}
diff --git a/src/server/stage/components/Textbox.svelte b/src/server/stage/components/Textbox.svelte
index 59510760..8d80109e 100644
--- a/src/server/stage/components/Textbox.svelte
+++ b/src/server/stage/components/Textbox.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
     import { onMount } from "svelte"
     import type { Item } from "../../../types/Show"
-    import autosize, { AutosizeTypes } from "../helpers/autosize"
-    import { getStyles } from "../helpers/style"
     import Clock from "../items/Clock.svelte"
     import ListView from "./ListView.svelte"
     import Button from "../../common/components/Button.svelte"
     import Icon from "../../common/components/Icon.svelte"
+    import { getStyles } from "../../common/util/style"
+    import autosize, { type AutosizeTypes } from "../../common/util/autosize"
 
     export let item: Item
     export let stageItem: any = {}
diff --git a/src/server/stage/components/Timer.svelte b/src/server/stage/components/Timer.svelte
index e9fbd36b..52bf7a68 100644
--- a/src/server/stage/components/Timer.svelte
+++ b/src/server/stage/components/Timer.svelte
@@ -9,10 +9,9 @@
     export let today: Date
     export let style: string
 
-    let times: string[] = []
     let timeValue: string = "00:00"
     let currentTime: number
-    $: numberToText(typeof currentTime === "number" ? currentTime : 0)
+    $: numberToText(typeof currentTime === "number" ? currentTime : 0, item?.timer?.showHours)
 
     $: {
         if (timer.type === "counter") {
@@ -49,13 +48,18 @@
         return false
     }
 
-    function numberToText(time: number) {
+    function numberToText(time: number, showHours: boolean = true) {
         let allTimes: any = secondsToTime(time)
-        timeValue = (allTimes.d === 0 ? "" : allTimes.d + ", ") + [allTimes.h === "00" ? "" : allTimes.h, allTimes.m, allTimes.s].join(":")
+
+        let days = allTimes.d === 0 ? "" : allTimes.d + ", "
+        let hours = showHours ? (allTimes.h === "00" ? "" : allTimes.h) : ""
+        let minutes = padString(Number(allTimes.m) + (showHours ? 0 : Number(allTimes.h) * 60))
+        timeValue = days + [hours, minutes, allTimes.s].join(":")
 
         while (timeValue[0] === ":") timeValue = timeValue.slice(1, timeValue.length)
         timeValue = timeValue.replace(" :", " ")
     }
+    export const padString = (a: number) => a.toString().padStart(2, "0")
 </script>
 
 <div class="align autoFontSize" style="{style}{item?.align || ''}">
@@ -63,25 +67,8 @@
         {#if overflow && negative}
             <span>-</span>
         {/if}
-        {#if times.length}
-            {#each times as ti, i}
-                <div style="position: relative;display: flex;">
-                    {#each ti as t}
-                        <div>
-                            {#key t}
-                                <span style="position: absolute;">{t}</span>
-                                <!-- <span transition:blur={{ duration: 500 }} style="position: absolute;">{t}</span> -->
-                            {/key}
-                            <span style:opacity={0}>{t}</span>
-                        </div>
-                    {/each}
-                    <!-- style="margin: 0 10px;" -->
-                    {#if i % 2 === 0 && i < times.length}<span>:</span>{/if}
-                </div>
-            {/each}
-        {:else}
-            {timeValue}
-        {/if}
+
+        {timeValue}
     </div>
 </div>
 
diff --git a/src/server/stage/helpers/getStyleResolution.ts b/src/server/stage/helpers/getStyleResolution.ts
deleted file mode 100644
index 2ad91fae..00000000
--- a/src/server/stage/helpers/getStyleResolution.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export function getStyleResolution(resolution: any, width: any, height: any, fill: "contain" | "fit" | "fill" | "cover" = "contain"): string {
-    let style: any = { width: null, height: null }
-
-    if (fill === "fill") style = { width: "100%", height: "100%" }
-    // resolution might be undefined
-    else if (resolution) {
-        if (resolution.width <= width) {
-            if (fill === "fit") style.width = "100%"
-            else style.width = resolution.width + "px"
-        } else if (width / resolution.width < height / resolution.height) style.width = "100%"
-        else style.width = null
-
-        if (resolution.height <= height) {
-            if (fill === "fit") style = { width: null, height: "100%" }
-            else style.height = resolution.height + "px"
-        } else if (height / resolution.height <= width / resolution.width) style = { width: null, height: "100%" }
-        else style.height = null
-    }
-
-    return (style.width ? "width: " + style.width + ";" : "") + (style.height ? "height: " + style.height + ";" : "")
-}
diff --git a/src/server/stage/helpers/style.ts b/src/server/stage/helpers/style.ts
deleted file mode 100644
index cbbe1713..00000000
--- a/src/server/stage/helpers/style.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import type { StringObject } from "../../../types/Main"
-
-export const getStyles = (str: string | null | undefined, removeTxt: boolean = false) => {
-    let styles: StringObject = {}
-    if (str?.length) {
-        str.split(";").forEach((s) => {
-            if (s.length) {
-                let key: string = s.slice(0, s.indexOf(":")).trim()
-                let style: string = s.slice(s.indexOf(":") + 1, s.length).trim()
-
-                let replaced: string = removeText(style)
-
-                const dontReplace: string[] = ["text-decoration", "text-transform", "text-shadow", "box-shadow", "font-family", "transform"]
-
-                // remove text
-                if (!key.includes("color") && !dontReplace.includes(key) && removeTxt && style.length > replaced.length && replaced.length > 0) style = replaced
-
-                if (key === "transform") styles = { ...styles, ...getFilters(style) }
-
-                styles[key] = style
-            }
-        })
-    }
-    return styles
-}
-
-export function getFilters(filter: string) {
-    let styles: StringObject = {}
-    if (!filter) return styles
-
-    filter.split(" ").forEach((s) => {
-        if (s.length) {
-            let key: string = s.slice(0, s.indexOf("(")).trim()
-            let style: string = s.slice(s.indexOf("(") + 1, s.indexOf(")")).trim()
-            style = removeText(style)
-            styles[key] = style
-        }
-    })
-
-    return styles
-}
-
-export function removeText(string: string): string {
-    // .replace(/\D.+/g, "")
-    return string.replace(/[^0-9.-]/g, "")
-}
diff --git a/src/server/stage/items/SlideText.svelte b/src/server/stage/items/SlideText.svelte
index 2e16e303..8ab11a6e 100644
--- a/src/server/stage/items/SlideText.svelte
+++ b/src/server/stage/items/SlideText.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
+    import { getStyleResolution } from "../../common/util/getStyleResolution"
     import Main from "../components/Main.svelte"
     import Textbox from "../components/Textbox.svelte"
     import Zoomed from "../components/Zoomed.svelte"
-    import { getStyleResolution } from "../helpers/getStyleResolution"
 
     export let slide: any
     export let stageItem: any
@@ -32,7 +32,10 @@
                 if (!item.lines || !item.lines.find((a: any) => a?.text?.[0]?.value?.length)) return
 
                 if (!oneItem) oneItem = item
-                else oneItem.lines.push(...item.lines)
+                else {
+                    let EMPTY_LINE = { align: "", text: [{ style: "", value: "" }] }
+                    oneItem.lines.push(EMPTY_LINE, ...item.lines)
+                }
             })
 
         return oneItem ? [oneItem] : []
diff --git a/src/types/Input.ts b/src/types/Input.ts
new file mode 100644
index 00000000..f95b2faf
--- /dev/null
+++ b/src/types/Input.ts
@@ -0,0 +1,51 @@
+import type { Option } from "./Main"
+import type { MidiValues } from "./Show"
+
+interface BaseInput {
+    name: string
+    id: string
+    settings?: any
+}
+
+type InputString = {
+    type: "string"
+    value: string
+}
+type InputNumber = {
+    type: "number"
+    value: number
+}
+type InputCheckbox = {
+    type: "checkbox"
+    value: boolean
+}
+type InputDropdown = {
+    type: "dropdown"
+    value: string
+    options: Option[]
+}
+
+type InputMidi = {
+    type: "midi"
+    value: MidiValues
+}
+type InputRest = {
+    type: "rest"
+    value: RestValues
+}
+
+type Inputs = InputString | InputNumber | InputCheckbox | InputDropdown | InputMidi | InputRest
+export type Input = BaseInput & Inputs
+
+type ExtractType<T> = T extends { type: infer U } ? U : never
+export type InputType = ExtractType<Inputs>
+
+///
+
+// import type { API_rest_command } from "./../frontend/components/actions/api"
+type RestValues = {
+    url: string
+    method: string
+    contentType: string
+    payload: string
+}
diff --git a/src/types/Main.ts b/src/types/Main.ts
index e7f15ca4..bd24a742 100644
--- a/src/types/Main.ts
+++ b/src/types/Main.ts
@@ -108,9 +108,19 @@ export interface MediaStyle {
     volume?: number // audio
     rendering?: string // image rendering
     info?: any // cached codec/mime data
+    tracks?: Subtitle[]
+    subtitle?: string
     tags?: string[] // media tags
 }
 
+// subtitles/captions
+export interface Subtitle {
+    lang: string // id
+    name: string
+    vtt: string // WebVTT format
+    embedded?: boolean // extracted from the video
+}
+
 export type Popups =
     | "initialize"
     | "import"
@@ -132,6 +142,7 @@ export type Popups =
     | "trigger"
     | "audio_stream"
     | "transition"
+    | "media_fit"
     | "import_scripture"
     | "edit_event"
     | "choose_chord"
@@ -144,6 +155,7 @@ export type Popups =
     | "animate"
     | "translate"
     | "next_timer"
+    | "display_duration"
     | "manage_tags"
     | "advanced_settings"
     | "about"
@@ -152,6 +164,7 @@ export type Popups =
     | "reset_all"
     | "alert"
     | "history"
+    | "manage_emitters"
     | "action"
     | "category_action"
     | "user_data_overwrite"
diff --git a/src/types/Projects.ts b/src/types/Projects.ts
index 476fe99e..9a35ae2a 100644
--- a/src/types/Projects.ts
+++ b/src/types/Projects.ts
@@ -24,7 +24,7 @@ export interface ProjectShowRef extends ShowRef {
     notes?: string
     color?: string // section color
     icon?: string // focus mode
-    data?: any // pdf viewports
+    data?: any // pdf viewports / section settings
 }
 
 export interface ShowRef {
diff --git a/src/types/Save.ts b/src/types/Save.ts
index 83000ffd..165c5a9f 100644
--- a/src/types/Save.ts
+++ b/src/types/Save.ts
@@ -14,6 +14,8 @@ export type SaveListSyncedSettings =
     | "scriptureSettings"
     | "groups"
     | "midiIn"
+    | "emitters"
+    | "playerVideos"
     | "videoMarkers"
     | "mediaTags"
     | "customizedIcons"
@@ -46,7 +48,6 @@ export type SaveListSettings =
     | "sorted"
     | "styles"
     | "outLocked"
-    | "playerVideos"
     | "ports"
     | "disabledServers"
     | "serverData"
diff --git a/src/types/Show.ts b/src/types/Show.ts
index 23cde532..dd0c2396 100644
--- a/src/types/Show.ts
+++ b/src/types/Show.ts
@@ -1,4 +1,5 @@
 import type { Resolution } from "./Settings"
+import type { Input } from "./Input"
 
 export interface Shows {
     [key: string]: Show
@@ -120,6 +121,7 @@ export interface Timer {
     type: "counter" | "clock" | "event"
     viewType?: "time" | "line" | "circle"
     circleMask?: boolean
+    showHours?: boolean // use just minutes or minutes and hours
     start?: number
     end?: number
     event?: string
@@ -131,8 +133,10 @@ export interface Timer {
 }
 
 export interface Clock {
-    type: "digital" | "analog"
-    seconds: boolean
+    type: "digital" | "analog" | "custom"
+    dateFormat: "none"
+    showTime?: boolean
+    seconds?: boolean
 }
 
 export interface DynamicEvent {
@@ -265,21 +269,24 @@ export interface Midi {
     name: string
     triggers: string[]
     actionValues?: any[]
+    tags?: string[]
     // action?: string
     // actionData?: any
     shows?: any[] // ??
     customActivation?: string
     keypressActivate?: string
     midiEnabled?: boolean
-    midi?: {
-        input?: string
-        output?: string
-        type: "noteon" | "noteoff" | "cc"
-        values: {
-            note: number
-            velocity: number
-            channel: number
-        }
+    midi?: MidiValues
+}
+
+export interface MidiValues {
+    input?: string
+    output?: string
+    type: "noteon" | "noteoff" | "cc"
+    values: {
+        note: number
+        velocity: number
+        channel: number
     }
 }
 
@@ -292,6 +299,25 @@ export interface MidiIn extends Midi {
     }[]
 }
 
+export type EmitterTypes = "osc" | "http" | "midi"
+export interface EmitterTemplateValue {
+    name: string
+    value: string
+}
+export interface EmitterTemplate {
+    name: string
+    inputs: EmitterTemplateValue[]
+}
+export interface EmitterInputs {
+    signal?: Input[]
+}
+export interface Emitter {
+    name: string
+    type: EmitterTypes
+    signal?: any
+    templates?: { [key: string]: EmitterTemplate }
+}
+
 //
 
 export interface Overlays {
@@ -304,6 +330,7 @@ export interface Overlay {
     items: Item[]
     locked?: boolean
     placeUnderSlide?: boolean
+    displayDuration?: number
 }
 
 export interface Templates {
diff --git a/src/types/Socket.ts b/src/types/Socket.ts
index 2a9648e9..814aaa7d 100644
--- a/src/types/Socket.ts
+++ b/src/types/Socket.ts
@@ -13,6 +13,7 @@ export interface ClientMessage {
     id?: DeviceID
     api?: string // API ACTION ID (channel: "API:id")
     data?: any
+    send?: boolean
 }
 
 type DeviceID = string
diff --git a/src/types/Stage.ts b/src/types/Stage.ts
index e7ecf4ba..262f326b 100644
--- a/src/types/Stage.ts
+++ b/src/types/Stage.ts
@@ -38,6 +38,7 @@ export interface StageLayout {
             tracker?: any // slide tracker data
             lineCount?: number // max lines to show in next slide preview
             invertItems?: boolean // invert items if more than one (used for e.g. scripture refs)
+            timer?: any // timer options
         }
     }
 }