diff --git a/packages/fiori/cypress/specs/ShellBar.cy.tsx b/packages/fiori/cypress/specs/ShellBar.cy.tsx
index a17625e7a83b1..005a2b06ef25d 100644
--- a/packages/fiori/cypress/specs/ShellBar.cy.tsx
+++ b/packages/fiori/cypress/specs/ShellBar.cy.tsx
@@ -1381,6 +1381,46 @@ describe("ButtonBadge in ShellBar", () => {
 			.should("have.attr", "text", "3");
 	});
 
+	it("Test if overflow list item renders badge span when count is set", () => {
+		cy.mount(
+			<>
+				<ShellBarItem id="item-with-badge" icon="accept" text="Item" count="42" in-overflow />
+				<ShellBarItem id="item-no-badge" icon="alert" text="Other" in-overflow />
+			</>
+		);
+
+		// Item with count: badge span exists with correct text
+		cy.get("#item-with-badge")
+			.shadow()
+			.find(".ui5-shellbar-item-badge")
+			.should("exist")
+			.should("have.text", "42");
+
+		// Item without count: no badge span rendered
+		cy.get("#item-no-badge")
+			.shadow()
+			.find(".ui5-shellbar-item-badge")
+			.should("not.exist");
+	});
+
+	it("Test count updates propagate to overflow badge span", () => {
+		cy.mount(
+			<ShellBarItem id="item-update" icon="accept" text="Item" count="1" in-overflow />
+		);
+
+		cy.get("#item-update")
+			.shadow()
+			.find(".ui5-shellbar-item-badge")
+			.should("have.text", "1");
+
+		cy.get("#item-update").invoke("attr", "count", "99+");
+
+		cy.get("#item-update")
+			.shadow()
+			.find(".ui5-shellbar-item-badge")
+			.should("have.text", "99+");
+	});
+
 	it("Test if overflow button shows appropriate badge when items are overflowed", () => {
 		cy.mount(
 			<ShellBar id="shellbar-with-overflow"
diff --git a/packages/fiori/src/ShellBarItemTemplate.tsx b/packages/fiori/src/ShellBarItemTemplate.tsx
index 2f0231192625c..d942da5331c84 100644
--- a/packages/fiori/src/ShellBarItemTemplate.tsx
+++ b/packages/fiori/src/ShellBarItemTemplate.tsx
@@ -9,12 +9,12 @@ export default function ShellBarItemTemplate(this: ShellBarItem) {
 			<ListItemStandard
 				icon={this.icon ? `sap-icon://${this.icon}` : ""}
 				type="Active"
-				data-count={this.count}
 				data-ui5-stable={this.stableDomRef}
 				accessibilityAttributes={this.accessibilityAttributes}
 				onClick={this.fireClickEvent}
 			>
-				{this.text}
+				<span class="ui5-shellbar-item-text">{this.text}</span>
+				{this.count && <span class="ui5-shellbar-item-badge">{this.count}</span>}
 			</ListItemStandard>
 		);
 	}
diff --git a/packages/fiori/src/themes/ShellBarItem.css b/packages/fiori/src/themes/ShellBarItem.css
index 6afd1e0ecbac4..b02f647f3acad 100644
--- a/packages/fiori/src/themes/ShellBarItem.css
+++ b/packages/fiori/src/themes/ShellBarItem.css
@@ -27,28 +27,35 @@
 	color: var(--sapList_TextColor);
 }
 
-[ui5-li]:after {
-	position: relative;
-	width: fit-content;
+[ui5-li]::part(title) {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	overflow: visible;
+}
+
+.ui5-shellbar-item-text {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.ui5-shellbar-item-badge {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
 	height: 1rem;
 	min-width: 1rem;
-	background: var(--sapContent_BadgeBackground);
-	border: var(--_ui5_shellbar_button_badge_border);
-	color: var(--sapContent_BadgeTextColor);
-	bottom: calc(100% + 0.0625rem);
-	left: 1.25rem;
 	padding: 0 0.3125rem;
 	border-radius: 0.5rem;
-	display: flex;
-	justify-content: center;
-	align-items: center;
+	border: var(--_ui5_shellbar_button_badge_border);
+	background: var(--sapContent_BadgeBackground);
+	color: var(--sapContent_BadgeTextColor);
 	font-size: var(--sapFontSmallSize);
-	font-family: var(--sapFontFamily);
-	z-index: 2;
+	font-family: var(--sapFontBoldFamily);
+	font-weight: bold;
+	white-space: nowrap;
+	flex-shrink: 0;
 	box-sizing: border-box;
 	pointer-events: none;
-}
-
-[ui5-li][data-count]:after {
-	content: attr(data-count);
 }
\ No newline at end of file
diff --git a/packages/fiori/src/themes/ShellBarPopover.css b/packages/fiori/src/themes/ShellBarPopover.css
index 604e11f6304a8..3365d9559d09b 100644
--- a/packages/fiori/src/themes/ShellBarPopover.css
+++ b/packages/fiori/src/themes/ShellBarPopover.css
@@ -14,30 +14,4 @@
 
 .ui5-shellbar-overflow-popover [ui5-li]::part(title) {
 	font-size: var(--sapFontSize);
-}
-
-.ui5-shellbar-overflow-popover [ui5-li]:after {
-	position: relative;
-	width: fit-content;
-	height: 1rem;
-	min-width: 1rem;
-	background: var(--sapContent_BadgeBackground);
-	border: var(--_ui5_shellbar_button_badge_border);
-	color: var(--sapContent_BadgeTextColor);
-	bottom: calc(100% + 0.0625rem);
-	left: 1.25rem;
-	padding: 0 0.3125rem;
-	border-radius: 0.5rem;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	font-size: var(--sapFontSmallSize);
-	font-family: var(--sapFontFamily);
-	z-index: 2;
-	box-sizing: border-box;
-	pointer-events: none;
-}
-
-.ui5-shellbar-overflow-popover [ui5-li][data-count]:after {
-	content: attr(data-count);
 }
\ No newline at end of file
diff --git a/packages/fiori/test/pages/ShellBar.html b/packages/fiori/test/pages/ShellBar.html
index e69731ecb522b..8dce2ab221942 100644
--- a/packages/fiori/test/pages/ShellBar.html
+++ b/packages/fiori/test/pages/ShellBar.html
@@ -259,6 +259,45 @@ <h3>ShellBar in Compact</h3>
 		<ui5-shellbar-item icon="discussion" count="2" id="test-invalidation-item"></ui5-shellbar-item>
 	</ui5-shellbar>
 
+	<!-- Badge Scenarios (Figma spec) -->
+
+	<h3>Badge Scenarios</h3>
+
+	<!-- Scenario 1: Single item visible in bar with counter badge -->
+	<ui5-shellbar id="sb-badge-single" class="shellbar-example">
+		<ui5-shellbar-branding slot="branding">Badge - Single Visible</ui5-shellbar-branding>
+		<ui5-shellbar-item icon="activities" text="Tasks"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="action-settings" text="Settings"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="sys-help" text="Help"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="bell" text="Notifications" count="72"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="activity-2" text="Work Items" count="5"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="discussion" text="Messages"></ui5-shellbar-item>
+	</ui5-shellbar>
+
+	<!-- Scenario 2: One badged item overflowed -> overflow button shows counter badge -->
+	<ui5-shellbar id="sb-badge-overflow-counter" class="shellbar-example" primary-title="SAP Fiori App" secondary-title="Badge Overflow Counter">
+		<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"/>
+		<ui5-avatar slot="profile" icon="customer"></ui5-avatar>
+		<ui5-shellbar-item icon="activities" text="Tasks"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="action-settings" text="Settings"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="sys-help" text="Help"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="discussion" text="Messages"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="email" text="Email"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="bell" text="Notifications" count="72"></ui5-shellbar-item>
+	</ui5-shellbar>
+
+	<!-- Scenario 3: Multiple badged items overflowed -> overflow button shows attention dot -->
+	<ui5-shellbar id="sb-badge-overflow-attention" class="shellbar-example" primary-title="SAP Fiori App" secondary-title="Badge Attention Dot">
+		<img slot="logo" src="https://upload.wikimedia.org/wikipedia/commons/5/59/SAP_2011_logo.svg"/>
+		<ui5-avatar slot="profile" icon="customer"></ui5-avatar>
+		<ui5-shellbar-item icon="activities" text="Tasks"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="action-settings" text="Settings"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="sys-help" text="Help"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="discussion" text="Messages"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="bell" text="Notifications" count="72"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="activity-2" text="Work Items" count="5"></ui5-shellbar-item>
+	</ui5-shellbar>
+
 	<ui5-toast id="wcToastTC">Custom Action Fired</ui5-toast>
 
 	<ui5-shellbar id="sbAcc">