diff --git a/web/js/customColors.js b/web/js/customColors.js
index 2b0fefc..25211d8 100644
--- a/web/js/customColors.js
+++ b/web/js/customColors.js
@@ -22,15 +22,21 @@ const colorShade = (col, amt) => {
 app.registerExtension({
 	name: "pysssss.CustomColors",
 	setup() {
-		let picker;
-		let activeNode;
+		let pickerFull;
+		let activeNodeFull;
+		let pickerTitle;
+		let activeNodeTitle;
+		let pickerBG;
+		let activeNodeBG;
 		const onMenuNodeColors = LGraphCanvas.onMenuNodeColors;
+
 		LGraphCanvas.onMenuNodeColors = function (value, options, e, menu, node) {
 			const r = onMenuNodeColors.apply(this, arguments);
 			requestAnimationFrame(() => {
 				const menus = document.querySelectorAll(".litecontextmenu");
 				for (let i = menus.length - 1; i >= 0; i--) {
 					if (menus[i].firstElementChild.textContent.includes("No color") || menus[i].firstElementChild.value?.content?.includes("No color")) {
+						// Original Custom Color for title-bar and background
 						$el(
 							"div.litemenu-entry.submenu",
 							{
@@ -38,43 +44,148 @@ app.registerExtension({
 								$: (el) => {
 									el.onclick = () => {
 										LiteGraph.closeAllContextMenus();
-										if (!picker) {
-											picker = $el("input", {
+										if (!pickerFull) {
+											pickerFull = $el("input", {
 												type: "color",
 												parent: document.body,
 												style: {
 													display: "none",
 												},
 											});
-											picker.onchange = () => {
-												if (activeNode) {
+											pickerFull.oninput = () => {
+												if (activeNodeFull) {
 													const fApplyColor = function(node){
-														if (picker.value) {
+														if (pickerFull.value) {
 															if (node.constructor === LiteGraph.LGraphGroup) {
-																node.color = picker.value;
+																node.color = pickerFull.value;
 															} else {
-																node.color = colorShade(picker.value, 20);
-																node.bgcolor = picker.value;
+																node.color = colorShade(pickerFull.value, 20);
+																node.bgcolor = pickerFull.value;
 															}
 														}
 													}
 													const graphcanvas = LGraphCanvas.active_canvas;
 													if (!graphcanvas.selected_nodes || Object.keys(graphcanvas.selected_nodes).length <= 1){
-														fApplyColor(activeNode);
+														fApplyColor(activeNodeFull);
 													} else {
 														for (let i in graphcanvas.selected_nodes) {
 															fApplyColor(graphcanvas.selected_nodes[i]);
 														}
 													}
 
-													activeNode.setDirtyCanvas(true, true);
+													activeNodeFull.setDirtyCanvas(true, true);
+												}
+											};
+										}
+										activeNodeFull = node; // Set activeNodeFull to the clicked node first
+										pickerFull.value = node.bgcolor; // Set the pickerFull to the current node's bgcolor
+										pickerFull.click(); // Open the color pickerFull
+									};
+								},
+							},
+							[
+								$el("span", {
+									style: {
+										paddingLeft: "4px",
+										display: "block",
+									},
+									textContent: "🎨 Custom Full",
+								}),
+							]
+						);
+						// New Entry for Changing Title Color Only
+						$el(
+							"div.litemenu-entry.submenu",
+							{
+								parent: menus[i],
+								$: (el) => {
+									el.onclick = () => {
+										LiteGraph.closeAllContextMenus();
+										if (!pickerTitle) {
+											pickerTitle = $el("input", {
+												type: "color",
+												parent: document.body,
+												style: {
+													display: "none",
+												},
+											});
+											pickerTitle.oninput = () => {
+												if (activeNodeTitle) {
+													const fApplyColor = function(node){
+														if (pickerTitle.value) {
+															// Changes only the node.color without affecting bgcolor
+															// node.color = colorShade(pickerTitle.value, 20); // brightens selected color
+															node.color = pickerTitle.value; // uses selected color directly
+														}
+													}
+													const graphcanvas = LGraphCanvas.active_canvas;
+													if (!graphcanvas.selected_nodes || Object.keys(graphcanvas.selected_nodes).length <= 1){
+														fApplyColor(activeNodeTitle);
+													} else {
+														for (let i in graphcanvas.selected_nodes) {
+															fApplyColor(graphcanvas.selected_nodes[i]);
+														}
+													}
+													
+													activeNodeTitle.setDirtyCanvas(true, true);
+												}
+											};
+										}
+										activeNodeTitle = node; // Set activeNodeTitle to the clicked node first
+										pickerTitle.value = node.color; // Set the pickerTitle to the current node's bgcolor
+										pickerTitle.click(); // Open the color pickerTitle
+									};
+								},
+							},
+							[
+								$el("span", {
+									style: {
+										paddingLeft: "4px",
+										display: "block",
+									},
+									textContent: "🎨 Custom Title",
+								}),
+							]
+						);
+						// New Entry for Changing Background Color Only
+						$el(
+							"div.litemenu-entry.submenu",
+							{
+								parent: menus[i],
+								$: (el) => {
+									el.onclick = () => {
+										LiteGraph.closeAllContextMenus();
+										if (!pickerBG) {
+											pickerBG = $el("input", {
+												type: "color",
+												parent: document.body,
+												style: {
+													display: "none",
+												},
+											});
+											pickerBG.oninput = () => {
+												if (activeNodeBG) {
+													const fApplyColor = function(node){
+														if (pickerBG.value) {
+															node.bgcolor = pickerBG.value; // uses selected color directly
+														}
+													}
+													const graphcanvas = LGraphCanvas.active_canvas;
+													if (!graphcanvas.selected_nodes || Object.keys(graphcanvas.selected_nodes).length <= 1){
+														fApplyColor(activeNodeBG);
+													} else {
+														for (let i in graphcanvas.selected_nodes) {
+															fApplyColor(graphcanvas.selected_nodes[i]);
+														}
+													}
+													
+													activeNodeBG.setDirtyCanvas(true, true);
 												}
 											};
 										}
-										activeNode = null;
-										picker.value = node.bgcolor;
-										activeNode = node;
-										picker.click();
+										activeNodeBG = node; // Set activeNodeBG to the clicked node first
+										pickerBG.value = node.bgcolor; // Set the pickerBG to the current node's bgcolor
+										pickerBG.click(); // Open the color pickerBG
 									};
 								},
 							},
@@ -84,7 +195,7 @@ app.registerExtension({
 										paddingLeft: "4px",
 										display: "block",
 									},
-									textContent: "🎨 Custom",
+									textContent: "🎨 Custom BG",
 								}),
 							]
 						);