diff --git a/widgets/horizontal/scripts/tasklist-view.js b/widgets/horizontal/scripts/tasklist-view.js
index ff50539..be4b19f 100644
--- a/widgets/horizontal/scripts/tasklist-view.js
+++ b/widgets/horizontal/scripts/tasklist-view.js
@@ -95,6 +95,23 @@ class TaskList {
 		return this;
 	}
 
+	updateUserColor(sectionId, color) {
+		const section = this.#data.find((s) => s.id === sectionId);
+		if (!section) return this;
+
+		section.color = color;
+		document
+			.querySelectorAll(".section")
+			.forEach((el) => {
+				if (el.dataset.key !== sectionId) return;
+				const title = el.querySelector(":scope > .section-title");
+				if (!title) return;
+				title.style.setProperty("--user-color", color);
+				title.classList.add("has-user-color");
+			});
+		return this;
+	}
+
 	addTask(sectionId, task, sectionTitle) {
 		if (!this.#data.find((s) => s.id === sectionId)) {
 			this.addSection({
diff --git a/widgets/shared/scripts/streamerbot.js b/widgets/shared/scripts/streamerbot.js
index 3c08bcb..0443eee 100644
--- a/widgets/shared/scripts/streamerbot.js
+++ b/widgets/shared/scripts/streamerbot.js
@@ -46,6 +46,7 @@ async function onChatMessage(data) {
 
 		localStorage.setItem(`${key}-color`, userColor);
 		userColors[`${key}-color`] = userColor;
+		taskList?.updateUserColor(key, userColor);
 	}
 }
 
diff --git a/widgets/streamer-only/scripts/tasklist-view.js b/widgets/streamer-only/scripts/tasklist-view.js
index 80e2aed..17c12dc 100644
--- a/widgets/streamer-only/scripts/tasklist-view.js
+++ b/widgets/streamer-only/scripts/tasklist-view.js
@@ -72,6 +72,23 @@ class TaskList {
 		return this;
 	}
 
+	updateUserColor(sectionId, color) {
+		const section = this.#data.find((s) => s.id === sectionId);
+		if (!section) return this;
+
+		section.color = color;
+		document
+			.querySelectorAll(".section")
+			.forEach((el) => {
+				if (el.dataset.key !== sectionId) return;
+				const title = el.querySelector(":scope > .section-title");
+				if (!title) return;
+				title.style.setProperty("--user-color", color);
+				title.classList.add("has-user-color");
+			});
+		return this;
+	}
+
 	addTask(sectionId, task, sectionTitle) {
 		if (!this.#data.find((s) => s.id === sectionId)) {
 			this.addSection({
diff --git a/widgets/vertical/scripts/tasklist-view.js b/widgets/vertical/scripts/tasklist-view.js
index 37519c9..ff992a9 100644
--- a/widgets/vertical/scripts/tasklist-view.js
+++ b/widgets/vertical/scripts/tasklist-view.js
@@ -95,6 +95,23 @@ class TaskList {
 		return this;
 	}
 
+	updateUserColor(sectionId, color) {
+		const section = this.#data.find((s) => s.id === sectionId);
+		if (!section) return this;
+
+		section.color = color;
+		document
+			.querySelectorAll(".section")
+			.forEach((el) => {
+				if (el.dataset.key !== sectionId) return;
+				const title = el.querySelector(":scope > .section-title");
+				if (!title) return;
+				title.style.setProperty("--user-color", color);
+				title.classList.add("has-user-color");
+			});
+		return this;
+	}
+
 	addTask(sectionId, task, sectionTitle) {
 		if (!this.#data.find((s) => s.id === sectionId)) {
 			this.addSection({