diff --git a/public/lang/en.json b/public/lang/en.json
index 16db7668..715ff5ca 100644
--- a/public/lang/en.json
+++ b/public/lang/en.json
@@ -38,7 +38,9 @@
         "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"
     },
     "about": {
         "check_updates": "Look for updates",
@@ -849,6 +851,7 @@
         "outline": "Outline",
         "shadow": "Shadow",
         "shadow_inset": "Shadow inset",
+        "offset": "Offset",
         "offsetX": "Offset X",
         "offsetY": "Offset Y",
         "blur": "Blur",
@@ -1067,6 +1070,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",
diff --git a/src/frontend/App.svelte b/src/frontend/App.svelte
index 674d89b5..d0240b2e 100644
--- a/src/frontend/App.svelte
+++ b/src/frontend/App.svelte
@@ -4,6 +4,7 @@
     import ContextMenu from "./components/context/ContextMenu.svelte"
     import Pdf from "./components/export/Pdf.svelte"
     import Guide from "./components/guide/Guide.svelte"
+    import { getBlending } from "./components/helpers/output"
     import { startEventTimer, startTimer } from "./components/helpers/timerTick"
     import Loader from "./components/main/Loader.svelte"
     import MenuBar from "./components/main/MenuBar.svelte"
@@ -12,7 +13,7 @@
     import Toast from "./components/main/Toast.svelte"
     import QuickSearch from "./components/quicksearch/QuickSearch.svelte"
     import Center from "./components/system/Center.svelte"
-    import { activeTimers, autosave, closeAd, currentWindow, disabledServers, events, loaded, os, outputDisplay } from "./stores"
+    import { activeTimers, autosave, closeAd, currentWindow, disabledServers, events, loaded, os, outputDisplay, outputs } from "./stores"
     import { focusArea, logerror, startAutosave, toggleRemoteStream } from "./utils/common"
     import { keydown } from "./utils/shortcuts"
     import { startup } from "./utils/startup"
@@ -37,6 +38,10 @@
 
     // close youtube ad
     $: if ($closeAd) setTimeout(() => closeAd.set(false), 10)
+
+    // edge blending
+    let blending = ""
+    $: 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} />
@@ -49,7 +54,7 @@
         <MenuBar />
     {/if}
 
-    <main style={isWindows ? "height: calc(100% - 25px);" : ""} class:closeAd={$closeAd} class:background={$currentWindow === "output"}>
+    <main style="{isWindows ? 'height: calc(100% - 25px);' : ''}{blending}" class:closeAd={$closeAd} class:background={$currentWindow === "output"}>
         <ContextMenu />
 
         {#if $currentWindow === "output"}
diff --git a/src/frontend/components/helpers/output.ts b/src/frontend/components/helpers/output.ts
index a5465372..e622e052 100644
--- a/src/frontend/components/helpers/output.ts
+++ b/src/frontend/components/helpers/output.ts
@@ -42,6 +42,7 @@ 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) {
     // sort so display order can be changed! (needs app restart)
@@ -65,7 +66,7 @@ export function setOutput(key: string, data: any, toggle: boolean = false, outpu
         let outs = outputId ? [outputId] : allOutputs
         let inputData = clone(data)
 
-        let firstOutputWithBackground = allOutputs.findIndex((id) => (get(styles)[get(outputs)[id]?.style || ""]?.layers || ["background"]).includes("background"))
+        let firstOutputWithBackground = allOutputs.findIndex((id) => !a[id]?.isKeyOutput && !a[id]?.stageOutput && (get(styles)[get(outputs)[id]?.style || ""]?.layers || ["background"]).includes("background"))
         firstOutputWithBackground = Math.max(0, firstOutputWithBackground)
 
         // reset slide cache (after update)
@@ -570,7 +571,16 @@ export function mergeWithTemplate(slideItems: Item[], templateItems: Item[], add
             line.align = templateLine?.align || ""
             line.text?.forEach((text: any, k: number) => {
                 let templateText = templateLine?.text[k] || templateLine?.text[0]
-                if (!text.customType?.includes("disableTemplate")) text.style = templateText?.style || ""
+                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};`
+
+                    text.style = style
+                }
 
                 let firstChar = templateText?.value?.[0] || ""
 
@@ -930,3 +940,15 @@ export function getSlideFilter(slideData: any) {
 
     return slideFilter
 }
+
+export function getBlending() {
+    let blending = Object.values(get(outputs))[0]?.blending
+    if (!blending) return ""
+
+    if (!blending.left && !blending.right) return ""
+
+    const opacity = (blending.opacity ?? 50) / 100
+    const center = 50 + Number(blending.offset || 0)
+    if (blending.centered) return `-webkit-mask-image: linear-gradient(${blending.rotate ?? 90}deg, rgb(0, 0, 0) ${center - blending.left}%, rgba(0, 0, 0, ${opacity}) ${center}%, rgb(0, 0, 0) ${center + Number(blending.right)}%);`
+    return `-webkit-mask-image: linear-gradient(${blending.rotate ?? 90}deg, rgba(0, 0, 0, ${opacity}) 0%, rgb(0, 0, 0) ${blending.left}%, rgb(0, 0, 0) ${100 - blending.right}%, rgba(0, 0, 0, ${opacity}) 100%);`
+}
diff --git a/src/frontend/components/helpers/setShow.ts b/src/frontend/components/helpers/setShow.ts
index 9e2d7234..9155e82e 100644
--- a/src/frontend/components/helpers/setShow.ts
+++ b/src/frontend/components/helpers/setShow.ts
@@ -6,6 +6,7 @@ import { getShowCacheId, updateCachedShow } from "./show"
 import { uid } from "uid"
 import { destroy } from "../../utils/request"
 import { fixShowIssues } from "../../converters/importHelpers"
+import type { ShowObj } from "../../classes/Show"
 
 export function setShow(id: string, value: "delete" | Show): Show {
     let previousValue: Show
@@ -27,6 +28,12 @@ export function setShow(id: string, value: "delete" | Show): Show {
             if (!value.slides) value.slides = {}
             if (!value.layouts) value.layouts = {}
             if (!value.media) value.media = {}
+
+            // set metadata (CCLI) in quickAccess
+            if (value.meta.CCLI && !value.quickAccess?.metadata?.CCLI) {
+                if (!value.quickAccess?.metadata) value.quickAccess.metadata = {}
+                value.quickAccess.metadata.CCLI = value.meta.CCLI
+            }
         }
     }
 
@@ -174,3 +181,13 @@ export function saveTextCache(id: string, show: Show) {
         tempCache = {}
     }, 1000)
 }
+
+export function setQuickAccessMetadata(show: ShowObj, key: string, value: string) {
+    if (!value) return show
+
+    if (!show.quickAccess) show.quickAccess = {}
+    if (!show.quickAccess.metadata) show.quickAccess.metadata = {}
+    show.quickAccess.metadata[key] = value
+
+    return show
+}
diff --git a/src/frontend/components/inputs/ProjectButton.svelte b/src/frontend/components/inputs/ProjectButton.svelte
index a4f3d7a2..33bc0ace 100644
--- a/src/frontend/components/inputs/ProjectButton.svelte
+++ b/src/frontend/components/inputs/ProjectButton.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
+    import { uid } from "uid"
     import type { ID } from "../../../types/Show"
-    import { activeProject, activeShow, dictionary, projects, projectTemplates, projectView, saved, showRecentlyUsedProjects } from "../../stores"
+    import { activeProject, activeRename, activeShow, dictionary, projects, projectTemplates, projectView, saved, showRecentlyUsedProjects } from "../../stores"
     import { clone } from "../helpers/array"
     import { history } from "../helpers/history"
     import Icon from "../helpers/Icon.svelte"
@@ -28,7 +29,9 @@
             if (!project) return
 
             project.parent = $projects[$activeProject || ""]?.parent || "/"
-            history({ id: "UPDATE", newData: { data: project }, location: { page: "show", id: "project" } })
+            let projectId = uid()
+            history({ id: "UPDATE", newData: { data: project }, oldData: { id: projectId }, location: { page: "show", id: "project" } })
+            setTimeout(() => activeRename.set("project_" + projectId))
             return
         }
 
diff --git a/src/frontend/components/output/Output.svelte b/src/frontend/components/output/Output.svelte
index 87c61caf..af229a7d 100644
--- a/src/frontend/components/output/Output.svelte
+++ b/src/frontend/components/output/Output.svelte
@@ -249,7 +249,7 @@
 
     <!-- colorbars for testing -->
     {#if $colorbars}
-        <Image path="./assets/{$colorbars}" mediaStyle={{ rendering: "pixelated" }} />
+        <Image path="./assets/{$colorbars}" mediaStyle={{ rendering: "pixelated", fit: "fill" }} />
     {/if}
 
     <!-- "underlays" -->
diff --git a/src/frontend/components/settings/Screens.svelte b/src/frontend/components/settings/Screens.svelte
index 13a6ca0d..4178c2e0 100644
--- a/src/frontend/components/settings/Screens.svelte
+++ b/src/frontend/components/settings/Screens.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
     import { onDestroy } from "svelte"
     import { MAIN, OUTPUT } from "../../../types/Channels"
-    import { activePopup, alertMessage, currentOutputSettings, outputDisplay, outputs } from "../../stores"
+    import { activePopup, alertMessage, currentOutputSettings, dictionary, outputDisplay, outputs } from "../../stores"
     import { destroy, receive, send } from "../../utils/request"
     import Icon from "../helpers/Icon.svelte"
     import T from "../helpers/T.svelte"
     import Button from "../inputs/Button.svelte"
     import { keysToID, sortByName } from "../helpers/array"
+    import CombinedInput from "../inputs/CombinedInput.svelte"
+    import NumberInput from "../inputs/NumberInput.svelte"
+    import Checkbox from "../inputs/Checkbox.svelte"
 
     export let activateOutput: boolean = false
 
@@ -142,48 +145,104 @@
     function identifyScreens() {
         send(OUTPUT, ["IDENTIFY_SCREENS"], screens)
     }
+
+    const isChecked = (e: any) => e.target.checked
+
+    let edgeBlending: boolean = false
+    $: blending = currentScreen.blending || {}
+    function updateBlending(value: number, side: string) {
+        if (!screenId) return
+
+        outputs.update((a) => {
+            if (!a[screenId].blending) a[screenId].blending = { left: 0, right: 0, rotate: 90, opacity: 50, centered: false, offset: 0 }
+            a[screenId].blending![side] = value
+            return a
+        })
+    }
 </script>
 
-<p style="margin-bottom: 10px;"><T id="settings.select_display" /></p>
-<Button on:click={() => activePopup.set("change_output_values")} style="width: 100%;" dark center>
-    <Icon id="screen" right />
-    <p><T id="settings.manual_input_hint" /></p>
-</Button>
-
-<Button on:click={identifyScreens} style="width: 100%;" dark center>
-    <Icon id="search" right />
-    <p><T id="settings.identify_screens" /></p>
-</Button>
-
-<br />
-
-<div class="content">
-    {#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;">
-                    <!-- Current screen position -->
-                </div>
-            {/if}
-
-            {#each screens as screen, i}
-                <div
-                    class="screen"
-                    class:disabled={currentScreen?.forcedResolution}
-                    class:active={$outputs[screenId || ""]?.screen === screen.id.toString()}
-                    style="width: {screen.bounds.width}px;height: {screen.bounds.height}px;left: {screen.bounds.x}px;top: {screen.bounds.y}px;"
-                    on:click={() => {
-                        if (!currentScreen?.forcedResolution) changeOutputScreen({ detail: { id: screen.id, bounds: screen.bounds } })
-                    }}
-                >
-                    {i + 1}
-                </div>
-            {/each}
+{#if edgeBlending}
+    <Button style="position: absolute;left: 0;top: 0;min-height: 58px;" title={$dictionary.actions?.back} on:click={() => (edgeBlending = false)}>
+        <Icon id="back" size={2} white />
+    </Button>
+
+    <p style="margin-bottom: 10px;"><T id="screen.edge_blending_tip" /></p>
+
+    <CombinedInput>
+        <p><T id="screen.left" /></p>
+        <NumberInput value={blending.left || 0} on:change={(e) => updateBlending(e.detail, "left")} />
+    </CombinedInput>
+    <CombinedInput>
+        <p><T id="screen.right" /></p>
+        <NumberInput value={blending.right || 0} on:change={(e) => updateBlending(e.detail, "right")} />
+    </CombinedInput>
+    <CombinedInput>
+        <p><T id="edit.rotation" /></p>
+        <NumberInput value={blending.rotate ?? 90} max={360} on:change={(e) => updateBlending(e.detail, "rotate")} />
+    </CombinedInput>
+    <CombinedInput>
+        <p><T id="edit.opacity" /></p>
+        <NumberInput value={blending.opacity ?? 50} max={100} step={5} on:change={(e) => updateBlending(e.detail, "opacity")} />
+    </CombinedInput>
+    <CombinedInput>
+        <p><T id="screen.centered" /></p>
+        <div class="alignRight">
+            <Checkbox checked={blending.centered} on:change={(e) => updateBlending(isChecked(e), "centered")} />
         </div>
-    {:else}
-        <T id="remote.loading" />
+    </CombinedInput>
+    {#if blending.centered}
+        <CombinedInput>
+            <p><T id="edit.offset" /></p>
+            <NumberInput value={blending.offset} min={-50} max={50} on:change={(e) => updateBlending(e.detail, "offset")} />
+        </CombinedInput>
     {/if}
-</div>
+{:else}
+    <p style="margin-bottom: 10px;"><T id="settings.select_display" /></p>
+    <Button on:click={() => activePopup.set("change_output_values")} style="width: 100%;" dark center>
+        <Icon id="screen" right />
+        <p><T id="settings.manual_input_hint" /></p>
+    </Button>
+
+    <Button on:click={() => (edgeBlending = true)} style="width: 100%;" dark center>
+        <Icon id="gradient" right />
+        <p><T id="settings.edge_blending" /></p>
+    </Button>
+
+    <Button on:click={identifyScreens} style="width: 100%;" dark center>
+        <Icon id="search" right />
+        <p><T id="settings.identify_screens" /></p>
+    </Button>
+
+    <br />
+
+    <div class="content">
+        {#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;">
+                        <!-- Current screen position -->
+                    </div>
+                {/if}
+
+                {#each screens as screen, i}
+                    <div
+                        class="screen"
+                        class:disabled={currentScreen?.forcedResolution}
+                        class:active={$outputs[screenId || ""]?.screen === screen.id.toString()}
+                        style="width: {screen.bounds.width}px;height: {screen.bounds.height}px;left: {screen.bounds.x}px;top: {screen.bounds.y}px;"
+                        on:click={() => {
+                            if (!currentScreen?.forcedResolution) changeOutputScreen({ detail: { id: screen.id, bounds: screen.bounds } })
+                        }}
+                    >
+                        {i + 1}
+                    </div>
+                {/each}
+            </div>
+        {:else}
+            <T id="remote.loading" />
+        {/if}
+    </div>
+{/if}
 
 <style>
     .content {
diff --git a/src/frontend/components/show/tools/Metadata.svelte b/src/frontend/components/show/tools/Metadata.svelte
index 081b6853..e95bda75 100644
--- a/src/frontend/components/show/tools/Metadata.svelte
+++ b/src/frontend/components/show/tools/Metadata.svelte
@@ -59,8 +59,16 @@
         values[key] = e.target?.value || e.value || ""
         updateData(values, "meta")
 
-        if (key === "number") {
-            const quickAccess = { ...($showsCache[$activeShow!.id].quickAccess || {}), number: values[key] }
+        const quickAccessKeys = ["number", "CCLI"]
+        if (quickAccessKeys.includes(key)) {
+            let quickAccess = $showsCache[$activeShow!.id].quickAccess || {}
+
+            if (key === "number") quickAccess.number = values.number
+            else {
+                if (!quickAccess.metadata) quickAccess.metadata = {}
+                quickAccess.metadata[key] = values[key]
+            }
+
             showsCache.update((a) => {
                 a[$activeShow!.id].quickAccess = quickAccess
                 return a
@@ -127,9 +135,9 @@
             {#each Object.entries(values) as [key, value]}
                 <CombinedInput textWidth={40}>
                     {#if $dictionary.meta?.[key]}
-                        <p title={$dictionary.meta?.[key]}><T id="meta.{key}" /></p>
+                        <p style="overflow: hidden;display: block;align-content: center;" title={$dictionary.meta?.[key]}><T id="meta.{key}" /></p>
                     {:else}
-                        <p style="text-transform: capitalize;">{key}</p>
+                        <p style="overflow: hidden;display: block;align-content: center;text-transform: capitalize;">{key}</p>
                     {/if}
                     <TextInput {value} style={key === "number" && currentShow?.quickAccess?.number ? "border-bottom: 1px solid var(--secondary);" : ""} on:change={(e) => changeValue(e, key)} />
 
diff --git a/src/frontend/converters/chordpro.ts b/src/frontend/converters/chordpro.ts
index 214b6b98..605ca28a 100644
--- a/src/frontend/converters/chordpro.ts
+++ b/src/frontend/converters/chordpro.ts
@@ -1,14 +1,15 @@
 // homepage: https://www.chordpro.org/chordpro/
 // docs: https://github.com/martijnversluis/ChordSheetJS
 
+import { get } from "svelte/store"
 import { uid } from "uid"
-import type { Show, Slide } from "../../types/Show"
+import type { Slide } from "../../types/Show"
 import { ShowObj } from "../classes/Show"
 import { clone } from "../components/helpers/array"
+import { setQuickAccessMetadata } from "../components/helpers/setShow"
 import { checkName, getGlobalGroup } from "../components/helpers/show"
 import { activePopup, alertMessage, dictionary, drawerTabsData, groups } from "../stores"
 import { setTempShows } from "./importHelpers"
-import { get } from "svelte/store"
 
 const metaKeys = ["number", "title", "artist", "composer", "lyricist", "copyright", "year", "notes", "ccli"]
 const chorus = ["start_of_chorus", "soc"]
@@ -169,7 +170,7 @@ function createShow({ slides, metadata, name, notes }) {
     let layoutID: string = uid()
     let category = get(drawerTabsData).shows?.activeSubTab
     if (category === "all" || category === "unlabeled") category = null
-    let show: Show = new ShowObj(false, category, layoutID)
+    let show = new ShowObj(false, category, layoutID)
 
     // remove empty slides
     slides = slides.filter((a) => a.items.length)
@@ -185,6 +186,7 @@ function createShow({ slides, metadata, name, notes }) {
     show.layouts[layoutID].slides = layouts
     if (notes.trim()) show.layouts[layoutID].notes = notes
     show.meta = metadata
+    if (show.meta.CCLI) show = setQuickAccessMetadata(show, "CCLI", show.meta.CCLI)
 
     // history({ id: "UPDATE", newData: { data: show, remember: { project: get(activeProject) } }, location: { page: "show", id: "show" } })
     return show
diff --git a/src/frontend/converters/easyworship.ts b/src/frontend/converters/easyworship.ts
index 0e9926f7..5ca76e10 100644
--- a/src/frontend/converters/easyworship.ts
+++ b/src/frontend/converters/easyworship.ts
@@ -6,6 +6,7 @@ import { newToast } from "../utils/common"
 import { ShowObj } from "./../classes/Show"
 import { activePopup, alertMessage, dictionary, groups, shows } from "./../stores"
 import { createCategory, setTempShows } from "./importHelpers"
+import { setQuickAccessMetadata } from "../components/helpers/setShow"
 
 interface Song {
     administrator: string
@@ -73,6 +74,7 @@ export function convertEasyWorship(data: any) {
                 CCLI: song.reference_number || "",
             }
         }
+        if (show.meta.CCLI) show = setQuickAccessMetadata(show, "CCLI", show.meta.CCLI)
 
         let { slides, layout }: any = createSlides(words)
 
diff --git a/src/frontend/converters/openlp.ts b/src/frontend/converters/openlp.ts
index ffa13846..2783b028 100644
--- a/src/frontend/converters/openlp.ts
+++ b/src/frontend/converters/openlp.ts
@@ -5,6 +5,7 @@ import { ShowObj } from "./../classes/Show"
 import { activePopup, alertMessage, dictionary, groups } from "./../stores"
 import { createCategory, setTempShows } from "./importHelpers"
 import { xml2json } from "./xml"
+import { setQuickAccessMetadata } from "../components/helpers/setShow"
 
 interface Song {
     title: string
@@ -60,6 +61,7 @@ export function convertOpenLP(data: any) {
             CCLI: song.ccli || "",
             copyright: song.copyright || "",
         }
+        if (show.meta.CCLI) show = setQuickAccessMetadata(show, "CCLI", show.meta.CCLI)
 
         show.timestamps = {
             created: song.created ? new Date(song.created).getTime() : new Date().getTime(),
diff --git a/src/frontend/converters/opensong.ts b/src/frontend/converters/opensong.ts
index d7d829e7..a32dbe70 100644
--- a/src/frontend/converters/opensong.ts
+++ b/src/frontend/converters/opensong.ts
@@ -6,6 +6,7 @@ import { ShowObj } from "./../classes/Show"
 import { activePopup, alertMessage, dictionary, groups, scriptures, scripturesCache } from "./../stores"
 import { setActiveScripture } from "./bible"
 import { createCategory, setTempShows } from "./importHelpers"
+import { setQuickAccessMetadata } from "../components/helpers/setShow"
 
 interface Song {
     title: string
@@ -56,6 +57,7 @@ export function convertOpenSong(data: any) {
                 CCLI: song.ccli || "",
             }
             if (show.meta.number !== undefined) show.quickAccess = { number: show.meta.number }
+            if (show.meta.CCLI) show = setQuickAccessMetadata(show, "CCLI", show.meta.CCLI)
 
             console.log(song)
             let { slides, layout, media }: any = createSlides(song)
@@ -250,18 +252,18 @@ function HTMLtoObject(content: string) {
 
     const groups = content.split('<span class="heading">').slice(1)
     let lyrics: string = ""
-    groups.forEach(group =>{
+    groups.forEach((group) => {
         let linesEnd = group.lastIndexOf("<br/>")
         let g = group.slice(0, linesEnd)
         const lines = group.indexOf("<table") > -1 ? g.split("<table").slice(1) : g.split('class="lyrics">').slice(1)
 
         let groupName = group.slice(0, group.indexOf("</span>")).trim()
         lyrics += `[${groupName}]\n`
-        
-        lines.forEach(line => {
+
+        lines.forEach((line) => {
             const sections = line.indexOf('class="lyrics">') > -1 ? line.split('class="lyrics">').slice(1) : [line]
-            
-            sections.forEach(section => {
+
+            sections.forEach((section) => {
                 let text = section.slice(0, section.indexOf("</td>"))
                 lyrics += text
             })
diff --git a/src/frontend/converters/quelea.ts b/src/frontend/converters/quelea.ts
index 67e317ed..fc954be0 100644
--- a/src/frontend/converters/quelea.ts
+++ b/src/frontend/converters/quelea.ts
@@ -8,6 +8,7 @@ import { checkName, getGlobalGroup } from "../components/helpers/show"
 import { activePopup, alertMessage, dictionary } from "../stores"
 import { createCategory, setTempShows } from "./importHelpers"
 import { xml2json } from "./xml"
+import { setQuickAccessMetadata } from "../components/helpers/setShow"
 
 type Song = {
     title: string
@@ -64,13 +65,14 @@ export function convertQuelea(data: any) {
 
         show.meta = {
             title: song.title || "",
-            ccli: song.ccli || "",
+            CCLI: song.ccli || "",
             copyright: song.copyright || "",
             author: song.author || "",
             key: song.key || "",
             publisher: song.publisher || "",
             year: song.year || "",
         }
+        if (show.meta.CCLI) show = setQuickAccessMetadata(show, "CCLI", show.meta.CCLI)
 
         show.slides = slides
         show.layouts = { [layoutID]: { name: get(dictionary).example?.default || "", notes: song.notes || "", slides: layout } }
diff --git a/src/frontend/converters/songbeamer.ts b/src/frontend/converters/songbeamer.ts
index 8c0a4148..01ed52ca 100644
--- a/src/frontend/converters/songbeamer.ts
+++ b/src/frontend/converters/songbeamer.ts
@@ -7,6 +7,7 @@ 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"
 
 interface ImportSettings {
     category: string
@@ -116,6 +117,7 @@ function convertSongbeamerFileToShow(name: string, text: string, settings: Impor
         CCLI: metadata.ccli,
     }
     if (show.meta.number !== undefined) show.quickAccess = { number: show.meta.number }
+    if (show.meta.CCLI) show = setQuickAccessMetadata(show, "CCLI", show.meta.CCLI)
 
     // add tags
     const tags = getTags(metadata.keywords.split(","))
diff --git a/src/frontend/converters/videopsalm.ts b/src/frontend/converters/videopsalm.ts
index 2cf36532..85dd6bba 100644
--- a/src/frontend/converters/videopsalm.ts
+++ b/src/frontend/converters/videopsalm.ts
@@ -4,6 +4,7 @@ import { checkName } from "../components/helpers/show"
 import { ShowObj } from "./../classes/Show"
 import { activePopup, alertMessage, dictionary, groups } from "./../stores"
 import { createCategory, setTempShows } from "./importHelpers"
+import { setQuickAccessMetadata } from "../components/helpers/setShow"
 
 interface VideoPsalm {
     Guid: string
@@ -142,6 +143,7 @@ export function convertVideopsalm(data: any) {
                 CCLI: song.CCLI || "",
             }
             if (show.meta.number !== undefined) show.quickAccess = { number: show.meta.number }
+            if (show.meta.CCLI) show = setQuickAccessMetadata(show, "CCLI", show.meta.CCLI)
 
             let { slides, layout, notes }: any = createSlides(song)
             show.slides = slides
diff --git a/src/frontend/utils/search.ts b/src/frontend/utils/search.ts
index 25a01d5f..a647b435 100644
--- a/src/frontend/utils/search.ts
+++ b/src/frontend/utils/search.ts
@@ -41,6 +41,9 @@ export function showSearchFilter(searchValue: string, show: any) {
     // Priority 0: Number Exact Match
     const songNumber = show.quickAccess?.number || ""
     if (songNumber && Number(songNumber) === Number(searchValue)) return 100
+    // Priority 0.5: CCLI Exact Match
+    const songId = show.quickAccess?.metadata?.CCLI || ""
+    if (songId.toString() === searchValue) return 100
 
     const showName = songNumber + formatSearch(show.name, true)
 
diff --git a/src/frontend/utils/updateSettings.ts b/src/frontend/utils/updateSettings.ts
index c1161137..708dc646 100644
--- a/src/frontend/utils/updateSettings.ts
+++ b/src/frontend/utils/updateSettings.ts
@@ -110,9 +110,9 @@ export function updateSettings(data: any) {
         let outputsUpdated: boolean = false
         Object.keys(allOutputs).forEach((outputId) => {
             let output = allOutputs[outputId]
-            if (!output.isKeyOutput || activeKeyOutputs.includes(output.id!)) return
+            if (!output.isKeyOutput || activeKeyOutputs.includes(outputId)) return
 
-            delete allOutputs[outputId][output.id!]
+            delete allOutputs[outputId]
             outputsUpdated = true
         })
         if (outputsUpdated) outputs.set(allOutputs)
diff --git a/src/frontend/values/icons.ts b/src/frontend/values/icons.ts
index 2b49b0d2..f12d9bf1 100644
--- a/src/frontend/values/icons.ts
+++ b/src/frontend/values/icons.ts
@@ -225,6 +225,8 @@ const icons: { [key: string]: string } = {
     screen: '<path d="M0 0h24v24H0z" fill="none"/><path d="M21 2H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h7v2H8v2h8v-2h-2v-2h7c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H3V4h18v12z"/>',
     resize: '<path d="M0 0h24v24H0z" fill="none"/><path d="M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z"/>',
     window: '<path d="M0 0h24v24H0z" fill="none"/><path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm0 14H5V8h14v10z"/>',
+    gradient:
+        '<path d="M0 0h24v24H0z" fill="none"/><path d="M11 9h2v2h-2zm-2 2h2v2H9zm4 0h2v2h-2zm2-2h2v2h-2zM7 9h2v2H7zm12-6H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 18H7v-2h2v2zm4 0h-2v-2h2v2zm4 0h-2v-2h2v2zm2-7h-2v2h2v2h-2v-2h-2v2h-2v-2h-2v2H9v-2H7v2H5v-2h2v-2H5V5h14v6z"/>',
     microphone:
         '<path d="M0 0h24v24H0z" fill="none"/><path d="M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"/>',
     audio_stream: '<path d="M0 0h24v24H0z" fill="none"/><path d="M7 18h2V6H7v12zm4 4h2V2h-2v20zm-8-8h2v-4H3v4zm12 4h2V6h-2v12zm4-8v4h2v-4h-2z"/>',
diff --git a/src/types/Output.ts b/src/types/Output.ts
index 37cb3e59..6a8d6247 100644
--- a/src/types/Output.ts
+++ b/src/types/Output.ts
@@ -16,6 +16,7 @@ export interface Output {
     name: string
     color: string
     bounds: { x: number; y: number; width: number; height: number }
+    blending?: { left: number; right: number; rotate: number; opacity: number; centered: boolean; offset: number }
     screen: string | null
     kioskMode?: boolean
     alwaysOnTop?: boolean