diff --git a/packages/base/src/util/generateHighlightedMarkupFirstMatch.ts b/packages/base/src/util/generateHighlightedMarkupFirstMatch.ts
new file mode 100644
index 000000000000..867ead7f6184
--- /dev/null
+++ b/packages/base/src/util/generateHighlightedMarkupFirstMatch.ts
@@ -0,0 +1,43 @@
+import escapeRegex from "./escapeRegex.js";
+// @ts-expect-error
+import encodeXML from "../sap/base/security/encodeXML.js";
+
+/**
+ * Generate markup for a raw string where the first match following StartsWithPerTerm pattern is wrapped with `<b>` tag.
+ * StartsWithPerTerm pattern: finds the first word (at start or after whitespace) that starts with the search text.
+ * All inputs to this function are considered literal text, and special characters will always be escaped.
+ * @param {string} text The text to add highlighting to
+ * @param {string} textToHighlight The text which should be highlighted (case-insensitive)
+ * @return {string} the markup HTML which contains the first match surrounded with a `<b>` tag.
+ */
+function generateHighlightedMarkupFirstMatch(text: string, textToHighlight: string): string {
+	const normalizedText = text || "";
+
+	if (!normalizedText || !textToHighlight) {
+		return encodeXML(normalizedText) as string;
+	}
+
+	const filterValue = textToHighlight.toLowerCase();
+	const lowerText = normalizedText.toLowerCase();
+	const matchLength = textToHighlight.length;
+
+	// Find the first word that starts with textToHighlight (StartsWithPerTerm pattern)
+	let matchIndex = lowerText.search(new RegExp(`(^|\\s)${escapeRegex(filterValue)}`));
+	if (matchIndex !== -1 && lowerText[matchIndex] === " ") {
+		matchIndex++; // Skip the space
+	}
+
+	// If no match found, return encoded text
+	if (matchIndex === -1) {
+		return encodeXML(normalizedText) as string;
+	}
+
+	// Build highlighted markup with only the first match
+	const beforeMatch = encodeXML(normalizedText.substring(0, matchIndex)) as string;
+	const match = encodeXML(normalizedText.substring(matchIndex, matchIndex + matchLength)) as string;
+	const afterMatch = encodeXML(normalizedText.substring(matchIndex + matchLength)) as string;
+
+	return `${beforeMatch}<b>${match}</b>${afterMatch}`;
+}
+
+export default generateHighlightedMarkupFirstMatch;
diff --git a/packages/main/cypress/specs/ComboBox.cy.tsx b/packages/main/cypress/specs/ComboBox.cy.tsx
index 3e8c38a5ec36..55d7fb7c44fb 100644
--- a/packages/main/cypress/specs/ComboBox.cy.tsx
+++ b/packages/main/cypress/specs/ComboBox.cy.tsx
@@ -3553,3 +3553,270 @@ describe("Case-Insensitive Selection", () => {
 		cy.get("[ui5-cb-item]").eq(1).should("have.prop", "selected", true);
 	});
 });
+
+describe("Highlighting", () => {
+	it("should highlight first match when typing", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItem text="Argentina"></ComboBoxItem>
+				<ComboBoxItem text="South Africa"></ComboBoxItem>
+				<ComboBoxItem text="Bulgaria"></ComboBoxItem>
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]")
+			.as("combobox")
+			.shadow()
+			.find("input")
+			.as("input");
+
+		// Type "A" - should highlight first word starting with "A"
+		cy.get("@input").realClick();
+		cy.get("@input").realType("A");
+
+		// Check Argentina is highlighted
+		cy.get("@combobox").find("[ui5-cb-item]").eq(0).shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>A</b>");
+
+		// Check South Africa is highlighted (second word)
+		cy.get("@combobox").find("[ui5-cb-item]").eq(1).shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>A</b>");
+	});
+
+	it("should highlight with StartsWithPerTerm pattern regardless of filter mode", () => {
+		cy.mount(
+			<ComboBox filter="Contains">
+				<ComboBoxItem text="Bosnia and Herzegovina"></ComboBoxItem>
+				<ComboBoxItem text="South Africa"></ComboBoxItem>
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]")
+			.as("combobox")
+			.shadow()
+			.find("input")
+			.as("input");
+
+		// Type "Her" - with Contains filter, both items should show
+		// But highlighting should use StartsWithPerTerm (first word starting with "Her")
+		cy.get("@input").realClick();
+		cy.get("@input").realType("Her");
+
+		// Herzegovina should be highlighted (word starts with "Her")
+		cy.get("@combobox").find("[ui5-cb-item]").eq(0).shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>Her</b>");
+	});
+
+	it("should highlight grouped items", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItemGroup header-text="Group A">
+					<ComboBoxItem text="Argentina"></ComboBoxItem>
+					<ComboBoxItem text="Australia"></ComboBoxItem>
+				</ComboBoxItemGroup>
+				<ComboBoxItemGroup header-text="Group B">
+					<ComboBoxItem text="South Africa"></ComboBoxItem>
+					<ComboBoxItem text="Brazil"></ComboBoxItem>
+				</ComboBoxItemGroup>
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]")
+			.as("combobox")
+			.shadow()
+			.find("input")
+			.realClick();
+
+		cy.get("[ui5-combobox]")
+			.shadow()
+			.find("input")
+			.realType("A");
+
+		// Check both items in Group A are highlighted
+		cy.get("@combobox").find("[ui5-cb-item-group]").eq(0)
+			.find("[ui5-cb-item]").eq(0).shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>A</b>");
+
+		cy.get("@combobox").find("[ui5-cb-item-group]").eq(0)
+			.find("[ui5-cb-item]").eq(1).shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>A</b>");
+
+		// Check South Africa is highlighted (second word)
+		cy.get("@combobox").find("[ui5-cb-item-group]").eq(1)
+			.find("[ui5-cb-item]").eq(0).shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>A</b>");
+	});
+
+	it("should handle special characters safely", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItem text="<script>alert('XSS')</script>"></ComboBoxItem>
+				<ComboBoxItem text="Price: $100 & Up"></ComboBoxItem>
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]")
+			.as("combobox")
+			.shadow()
+			.find("input")
+			.realClick();
+
+		cy.get("[ui5-combobox]")
+			.shadow()
+			.find("input")
+			.realType("P");
+
+		// Special characters should be escaped, no XSS
+		cy.get("@combobox").find("[ui5-cb-item]").eq(1).shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>P</b>rice: $100 &amp; Up");
+
+		// Script tags should be escaped
+		cy.get("@combobox").find("[ui5-cb-item]").eq(0).shadow().find(".ui5-li-title")
+			.should("not.contain.html", "<script>");
+	});
+
+	it("should only highlight text, not additionalText", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItem text="Argentina" additional-text="AR"></ComboBoxItem>
+				<ComboBoxItem text="Australia" additional-text="AU"></ComboBoxItem>
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]")
+			.as("combobox")
+			.shadow()
+			.find("input")
+			.realClick();
+
+		cy.get("[ui5-combobox]")
+			.shadow()
+			.find("input")
+			.realType("A");
+
+		// Main text should be highlighted
+		cy.get("@combobox").find("[ui5-cb-item]").eq(0).shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>A</b>");
+
+		// Additional text should NOT be highlighted (no <b> tags)
+		cy.get("@combobox").find("[ui5-cb-item]").eq(0).shadow().find(".ui5-li-additional-text")
+			.should("not.contain.html", "<b>");
+	});
+
+	it("should clear highlighting when input is cleared", () => {
+		cy.mount(
+			<ComboBox showClearIcon>
+				<ComboBoxItem text="Argentina"></ComboBoxItem>
+				<ComboBoxItem text="Australia"></ComboBoxItem>
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]")
+			.as("combobox")
+			.shadow()
+			.find("input")
+			.as("input");
+
+		// Type to get highlighting
+		cy.get("@input").realClick();
+		cy.get("@input").realType("A");
+
+		// Should be highlighted
+		cy.get("@combobox").find("[ui5-cb-item]").eq(0).shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>A</b>");
+
+		// Clear input
+		cy.get("@combobox").shadow().find(".ui5-input-clear-icon-wrapper").realClick();
+
+		// Open dropdown again to check items
+		cy.get("@combobox").shadow().find("[ui5-icon]").last().realClick();
+
+		// Should not be highlighted anymore
+		cy.get("@combobox").find("[ui5-cb-item]").eq(0).shadow().find(".ui5-li-title")
+			.should("not.contain.html", "<b>");
+	});
+
+	it("should highlight only the first match, not all occurrences", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItem text="New New York"></ComboBoxItem>
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]")
+			.as("combobox")
+			.shadow()
+			.find("input")
+			.realClick();
+
+		cy.get("[ui5-combobox]")
+			.shadow()
+			.find("input")
+			.realType("New");
+
+		// Should only highlight the first "New", not the second
+		cy.get("@combobox").find("[ui5-cb-item]").eq(0).shadow().find(".ui5-li-title")
+			.invoke("html")
+			.then((html) => {
+				// Count <b> tags - should be exactly 1 pair
+				const openTags = (html.match(/<b>/g) || []).length;
+				const closeTags = (html.match(/<\/b>/g) || []).length;
+				expect(openTags).to.equal(1);
+				expect(closeTags).to.equal(1);
+			});
+	});
+
+	it("should handle case-insensitive matching", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItem text="ARGENTINA"></ComboBoxItem>
+				<ComboBoxItem text="argentina"></ComboBoxItem>
+				<ComboBoxItem text="ArGeNtInA"></ComboBoxItem>
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]")
+			.as("combobox")
+			.shadow()
+			.find("input")
+			.realClick();
+
+		cy.get("[ui5-combobox]")
+			.shadow()
+			.find("input")
+			.realType("arg");
+
+		// All three should be highlighted (case-insensitive)
+		cy.get("@combobox").find("[ui5-cb-item]").eq(0).shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>ARG</b>");
+
+		cy.get("@combobox").find("[ui5-cb-item]").eq(1).shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>arg</b>");
+
+		cy.get("@combobox").find("[ui5-cb-item]").eq(2).shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>ArG</b>");
+	});
+
+	it("should preserve original case in highlighting", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItem text="South AFRICA"></ComboBoxItem>
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]")
+			.as("combobox")
+			.shadow()
+			.find("input")
+			.realClick();
+
+		cy.get("[ui5-combobox]")
+			.shadow()
+			.find("input")
+			.realType("afr");
+
+		// Should preserve original case "AFR" not "afr"
+		cy.get("@combobox").find("[ui5-cb-item]").eq(0).shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>AFR</b>");
+	});
+});
diff --git a/packages/main/cypress/specs/ComboBox.mobile.cy.tsx b/packages/main/cypress/specs/ComboBox.mobile.cy.tsx
index fe2830e4bd06..72ce92c0c276 100644
--- a/packages/main/cypress/specs/ComboBox.mobile.cy.tsx
+++ b/packages/main/cypress/specs/ComboBox.mobile.cy.tsx
@@ -543,3 +543,78 @@ describe("Value state header", () => {
 			.should("be.visible");
 	});
 });
+
+describe("Mobile Highlighting", () => {
+	beforeEach(() => {
+		cy.ui5SimulateDevice("phone");
+	});
+
+	it("Should highlight suggestions in mobile mode", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItem text="Argentina" />
+				<ComboBoxItem text="South Africa" />
+				<ComboBoxItem text="Bulgaria" />
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]").realClick();
+
+		cy.get("[ui5-combobox]")
+			.shadow()
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.as("popover")
+			.ui5ResponsivePopoverOpened();
+
+		// Type in mobile input
+		cy.get("@popover").find("[ui5-input]").shadow().find("input").realType("A");
+
+		// Check that SuggestionItems are highlighted
+		cy.get("@popover").find("[ui5-input]").find("[ui5-suggestion-item]").eq(0)
+			.shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>A</b>");
+
+		cy.get("@popover").find("[ui5-input]").find("[ui5-suggestion-item]").eq(1)
+			.shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>A</b>");
+	});
+
+	it("Should highlight grouped items in mobile mode", () => {
+		cy.mount(
+			<ComboBox>
+				<ComboBoxItemGroup header-text="Group A">
+					<ComboBoxItem text="Argentina" />
+					<ComboBoxItem text="Australia" />
+				</ComboBoxItemGroup>
+				<ComboBoxItemGroup header-text="Group B">
+					<ComboBoxItem text="South Africa" />
+					<ComboBoxItem text="Brazil" />
+				</ComboBoxItemGroup>
+			</ComboBox>
+		);
+
+		cy.get("[ui5-combobox]").realClick();
+
+		cy.get("[ui5-combobox]")
+			.shadow()
+			.find<ResponsivePopover>("[ui5-responsive-popover]")
+			.as("popover")
+			.ui5ResponsivePopoverOpened();
+
+		// Type in mobile input
+		cy.get("@popover").find("[ui5-input]").shadow().find("input").realType("A");
+
+		// Check that the first three suggestion items are highlighted (Argentina, Australia, South Africa)
+		cy.get("@popover").find("[ui5-input]").find("[ui5-suggestion-item]").eq(0)
+			.shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>A</b>");
+
+		cy.get("@popover").find("[ui5-input]").find("[ui5-suggestion-item]").eq(1)
+			.shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>A</b>");
+
+		cy.get("@popover").find("[ui5-input]").find("[ui5-suggestion-item]").eq(2)
+			.shadow().find(".ui5-li-title")
+			.should("contain.html", "<b>A</b>");
+	});
+});
diff --git a/packages/main/src/ComboBox.ts b/packages/main/src/ComboBox.ts
index 21c466e405c0..1283237141ff 100644
--- a/packages/main/src/ComboBox.ts
+++ b/packages/main/src/ComboBox.ts
@@ -38,6 +38,7 @@ import {
 } from "@ui5/webcomponents-base/dist/Keys.js";
 import { attachListeners } from "@ui5/webcomponents-base/dist/util/valueStateNavigation.js";
 import arraysAreEqual from "@ui5/webcomponents-base/dist/util/arraysAreEqual.js";
+import generateHighlightedMarkupFirstMatch from "@ui5/webcomponents-base/dist/util/generateHighlightedMarkupFirstMatch.js";
 
 import type { IIcon } from "./Icon.js";
 import * as Filters from "./Filters.js";
@@ -575,6 +576,23 @@ class ComboBox extends UI5Element implements IFormInputElement {
 			this._useSelectedValue = true;
 		}
 
+		// Highlight filtered items
+		this._filteredItems.forEach(item => {
+			if (!item) {
+				return;
+			}
+			if (isInstanceOfComboBoxItemGroup(item)) {
+				// For grouped items, highlight each item in the group
+				item.items.forEach(nestedItem => {
+					if (nestedItem) {
+						this._highlightItem(nestedItem);
+					}
+				});
+			} else {
+				this._highlightItem(item as ComboBoxItem);
+			}
+		});
+
 		this._selectMatchingItem();
 		this._initialRendering = false;
 
@@ -1219,6 +1237,15 @@ class ComboBox extends UI5Element implements IFormInputElement {
 		return [...filteredItemGroups, ...filteredItems];
 	}
 
+	/**
+	 * Sets the markupText property of an item with highlighted first match.
+	 * @param item The ComboBox item to highlight
+	 * @private
+	 */
+	_highlightItem(item: ComboBoxItem) {
+		item.markupText = generateHighlightedMarkupFirstMatch(item.text || "", this.filterValue);
+	}
+
 	_getFirstMatchingItem(current: string): IComboBoxItem | void {
 		const allItems = this._getItems();
 		const currentlyFocusedItem = allItems.find(item => item.focused === true);
diff --git a/packages/main/src/ComboBoxItemTemplate.tsx b/packages/main/src/ComboBoxItemTemplate.tsx
index 07d4dd4f1152..b8dd124048aa 100644
--- a/packages/main/src/ComboBoxItemTemplate.tsx
+++ b/packages/main/src/ComboBoxItemTemplate.tsx
@@ -9,7 +9,7 @@ function listItemContent(this: ComboBoxItem) {
 	return (
 		<div part="content" id="content" class="ui5-li-content">
 			<div class="ui5-li-text-wrapper">
-				{ this.text && <span part="title" className="ui5-li-title">{this.text}</span> }
+				{ this.markupText && <span part="title" className="ui5-li-title" dangerouslySetInnerHTML={{ __html: this.markupText }}></span> }
 				{ this.additionalText && <span part="additional-text" class="ui5-li-additional-text">{this.additionalText}</span> }
 			</div>
 		</div>
diff --git a/packages/main/src/ComboBoxPopoverTemplate.tsx b/packages/main/src/ComboBoxPopoverTemplate.tsx
index 378e70ca2f95..a458e41bd0ce 100644
--- a/packages/main/src/ComboBoxPopoverTemplate.tsx
+++ b/packages/main/src/ComboBoxPopoverTemplate.tsx
@@ -7,6 +7,7 @@ import Popover from "./Popover.js";
 import ResponsivePopover from "./ResponsivePopover.js";
 import BusyIndicator from "./BusyIndicator.js";
 import SuggestionItem from "./SuggestionItem.js";
+import generateHighlightedMarkupFirstMatch from "@ui5/webcomponents-base/dist/util/generateHighlightedMarkupFirstMatch.js";
 import type ComboBox from "./ComboBox.js";
 
 export default function ComboBoxPopoverTemplate(this: ComboBox) {
@@ -53,7 +54,18 @@ export default function ComboBoxPopoverTemplate(this: ComboBox) {
 								onInput={this._handleMobileInput}
 								onChange={this._inputChange}
 							>
-								{ this._filteredItems.map(item => <SuggestionItem text={item.text} additional-text={item.additionalText}/>)}
+								{ this._filteredItems.flatMap(item => {
+									if (item.isGroupItem && item.items) {
+										// For group items, return all nested items
+										return item.items
+											.filter(nestedItem => !!nestedItem)
+											.map(nestedItem =>
+												<SuggestionItem text={nestedItem.text} additional-text={nestedItem.additionalText} markupText={generateHighlightedMarkupFirstMatch(nestedItem.text || "", this.filterValue)}/>
+											);
+									}
+									// For regular items
+									return <SuggestionItem text={item.text} additional-text={item.additionalText} markupText={generateHighlightedMarkupFirstMatch(item.text || "", this.filterValue)}/>;
+								})}
 							</Input>
 						</div>
 					</div>
diff --git a/packages/main/test/pages/ComboBox.html b/packages/main/test/pages/ComboBox.html
index 88ca8ec15825..e278ffc8c04d 100644
--- a/packages/main/test/pages/ComboBox.html
+++ b/packages/main/test/pages/ComboBox.html
@@ -39,9 +39,14 @@
 			<ui5-cb-item text="Bulgaria"></ui5-cb-item>
 			<ui5-cb-item text="Canada"></ui5-cb-item>
 			<ui5-cb-item text="Chile"></ui5-cb-item>
+			<ui5-cb-item text="Bosna and Herzegovina"></ui5-cb-item>
+			<ui5-cb-item text="Her Her"></ui5-cb-item>
+			<ui5-cb-item text="Bosna and Her Her"></ui5-cb-item>
 		</ui5-combobox>
 		<ui5-button id="combo-focus">Focus ComboBox</ui5-button>
 		<ui5-button id="value-set-btn">Set value</ui5-button>
+		<span id="change-event-result"></span>
+		<span id="selection-change-event-result"></span>
 
 		<ui5-combobox id="combo2" class="combobox2auto" accessible-name="Select destination:">
 			<ui5-cb-item text="Algeria" id="cbi"></ui5-cb-item>
@@ -169,13 +174,6 @@
 		</ui5-combobox>
 	</div>
 
-	<div class="demo-section">
-		<span id="change-event-result"></span>
-		<br />
-		<span id="selection-change-event-result"></span>
-
-	</div>
-
 		<div class="demo-section">
 		<span>SelectionChange event testing</span>
 
@@ -613,7 +611,7 @@ <h3>ComboBox Composition</h3>
 		});
 
 		document.getElementById("combo").addEventListener("ui5-selection-change", function (event) {
-			document.getElementById("selection-change-event-result").innerHTML = event.detail.item.text;
+			document.getElementById("selection-change-event-result").innerHTML = event.detail.item ? event.detail.item.text : "(cleared)";
 		});
 
 		document.getElementById("change-cb").addEventListener("ui5-change", function (event) {