diff --git a/themes/patek/layouts/shortcodes/logo-generator.html b/themes/patek/layouts/shortcodes/logo-generator.html
index 42e87dd..f53066d 100644
--- a/themes/patek/layouts/shortcodes/logo-generator.html
+++ b/themes/patek/layouts/shortcodes/logo-generator.html
@@ -4,8 +4,9 @@
 			<div class="navbar-start" id="inputs">
 				<span class="navbar-item"><input id="titip" type="text" class="input" placeholder="Title"></span>
 				<span class="navbar-item"><input id="subip" type="text" class="input" placeholder="Subtitle"></span>
-				<span class="navbar-item"><label class="label" for="fgip">Foreground: </label><input id="fgip" type="color" class="input color" placeholder="Foreground" value="#ffffff"></span>
-				<span class="navbar-item"><label class="label" for="bgip">Background: </label><input id="bgip" type="color" class="input color" placeholder="Background" value="#0b2a37"></span>
+				<span class="navbar-item"><label class="label" for="fgip">FG: </label><input id="fgip" type="color" class="input color" placeholder="Foreground" value="#ffffff"></span>
+				<span class="navbar-item"><button class="button"onclick="swapColors()"><svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M6.99 11L3 15l3.99 4v-3H14v-2H6.99v-3zM21 9l-3.99-4v3H10v2h7.01v3L21 9z"/><path d="M0 0h24v24H0z" fill="none"/></svg></button></span>
+				<span class="navbar-item"><label class="label" for="bgip">BG: </label><input id="bgip" type="color" class="input color" placeholder="Background" value="#0b2a37"></span>
 				<span class="navbar-item"><label for="padip" class="label">Padding: </label><input id="padip" type="range" min="0" value="32" max="384" class="range"></span>
 			</div>
 		</div>
@@ -45,20 +46,20 @@
 		    </g>
 		</svg>
 `;
+	function updateLogo() {
+		const patekLogo = document.getElementById("patek-logo");
+		patekLogo.style.color = document.getElementById("fgip").value;
+		patekLogo.style.backgroundColor = document.getElementById("bgip").value;
+		const padding = document.getElementById("padip").value - 1 + 1;
+		patekLogo.style.padding = `${padding}px ${padding}px ${padding + 160}px`;
+		patekLogo.setAttribute("title", document.getElementById("titip").value);
+		patekLogo.setAttribute("subtitle", document.getElementById("subip").value);
+	}
 	document.addEventListener("DOMContentLoaded", () => {
-		const fn = () => {
-			const patekLogo = document.getElementById("patek-logo");
-			patekLogo.style.color = document.getElementById("fgip").value;
-			patekLogo.style.backgroundColor = document.getElementById("bgip").value;
-			const padding = document.getElementById("padip").value - 1 + 1;
-			patekLogo.style.padding = `${padding}px ${padding}px ${padding + 160}px`;
-			patekLogo.setAttribute("title", document.getElementById("titip").value);
-			patekLogo.setAttribute("subtitle", document.getElementById("subip").value);
-		};
-		fn();
+		updateLogo()
 		document.querySelectorAll("#inputs input").forEach(e => {
-			e.addEventListener("keyup", fn);
-			e.addEventListener("change", fn);
+			e.addEventListener("keyup", updateLogo);
+			e.addEventListener("change", updateLogo);
 
 		});
 	});
@@ -79,13 +80,13 @@
 		svg.querySelectorAll("path, text").forEach(e => e.attributes.fill.value = document.getElementById("fgip").value);
 		svg.querySelector("rect").attributes.fill.value = document.getElementById("bgip").value;
 
-		const width = patekLogo.clientWidth - 5.158;
+		const width = patekLogo.clientWidth;
 		const height = patekLogo.clientHeight;
 		const padding = parseInt(document.getElementById("padip").value);
 
 		const originalWidth = 322.67578;
 
-		const offsetX = -padding + width - originalWidth + 1.9;
+		const offsetX = -padding + width - originalWidth;
 		const offsetY = padding;
 
 		svg.querySelector("rect").attributes.width.value = width;
@@ -104,4 +105,12 @@
 		a.click();
 		document.body.removeChild(a);
 	}
+	function swapColors() {
+		const fg = document.getElementById("fgip");
+		const bg = document.getElementById("bgip");
+		const t = fg.value;
+		fg.value = bg.value;
+		bg.value = t;
+		updateLogo();
+	}
 </script>