diff --git a/srcjs/stendhal/event/ProgressStatusEvent.ts b/srcjs/stendhal/event/ProgressStatusEvent.ts
index f18fb2047d..b77995d4bc 100644
--- a/srcjs/stendhal/event/ProgressStatusEvent.ts
+++ b/srcjs/stendhal/event/ProgressStatusEvent.ts
@@ -38,12 +38,14 @@ export class ProgressStatusEvent extends RPEvent {
 				travelLogDialog = new TravelLogDialog(dataItems);
 				new FloatingWindow("Travel Log", travelLogDialog, dstate.x, dstate.y).setId("travellog");
 			}
+			travelLogDialog.updateTabs();
 			return;
 		}
 
 		if (!travelLogDialog) {
 			return;
 		}
+		travelLogDialog.updateTabs();
 
 		if (!this["item"]) {
 			if (progressType === "repeatable") {
diff --git a/srcjs/stendhal/ui/dialog/TravelLogDialog.ts b/srcjs/stendhal/ui/dialog/TravelLogDialog.ts
index f01fa55d28..d14f667fb4 100644
--- a/srcjs/stendhal/ui/dialog/TravelLogDialog.ts
+++ b/srcjs/stendhal/ui/dialog/TravelLogDialog.ts
@@ -67,12 +67,24 @@ export class TravelLogDialog extends DialogContentComponent {
 		});
 	}
 
+	public updateTabs() {
+		document.querySelectorAll(".progressTypeButton").forEach((tab) => {
+			const element = document.getElementById(tab.id)! as HTMLElement;
+			if (element.id == this.currentProgressType) {
+				// highlight selected tab
+				element.style.setProperty("background-color", "#b3b3b3");
+			} else {
+				element.style.removeProperty("background-color");
+			}
+		});
+	}
 
 	private onProgressTypeButtonClick(event: Event) {
 		// clear details when changing category
 		this.refreshDetails();
 
 		this.currentProgressType = (event.target as HTMLElement).id;
+		this.updateTabs();
 		var action = {
 			"type":           "progressstatus",
 			"progress_type":  this.currentProgressType