diff --git a/src/webviews/apps/plus/home/components/branch-section.ts b/src/webviews/apps/plus/home/components/branch-section.ts
index bc19c2feb2eae..b52b4849049a5 100644
--- a/src/webviews/apps/plus/home/components/branch-section.ts
+++ b/src/webviews/apps/plus/home/components/branch-section.ts
@@ -57,16 +57,30 @@ export class GlBranchSection extends LitElement {
 	@property({ type: Array }) branches!: GetOverviewBranch[];
 	@property({ type: Boolean }) isFetching = false;
 
+	private renderSectionLabel() {
+		if (this.isFetching || this.branches.length === 0) {
+			return this.label;
+		}
+
+		return `${this.label} (${this.branches.length})`;
+	}
+
 	override render() {
 		return html`
 			<gl-section>
-				<span slot="heading"
-					>${this.label}${when(!this.isFetching, () => html` (${this.branches.length})`)}</span
-				>
+				<span slot="heading">${this.renderSectionLabel()}</span>
 				<span slot="heading-actions"><slot name="heading-actions"></slot></span>
 				${this.branches.map(
 					branch => html`<gl-branch-card .repo=${this.repo} .branch=${branch}></gl-branch-card>`,
 				)}
+				${when(
+					this.branches.length > 0,
+					() =>
+						this.branches.map(
+							branch => html`<gl-branch-card .repo=${this.repo} .branch=${branch}></gl-branch-card>`,
+						),
+					() => html`<p>No ${this.label} branches</p>`,
+				)}
 			</gl-section>
 		`;
 	}
diff --git a/src/webviews/apps/plus/home/components/overview.ts b/src/webviews/apps/plus/home/components/overview.ts
index 0545da29d8198..2c8683d38bb12 100644
--- a/src/webviews/apps/plus/home/components/overview.ts
+++ b/src/webviews/apps/plus/home/components/overview.ts
@@ -95,37 +95,32 @@ export class GlOverview extends SignalWatcher(LitElement) {
 		if (overview == null) return nothing;
 		const { repository } = overview;
 		return html`
+			<gl-branch-section
+				label="recent"
+				.isFetching=${isFetching}
+				.repo=${repository.path}
+				.branches=${repository.branches.recent}
+			>
+				<gl-branch-threshold-filter
+					slot="heading-actions"
+					@gl-change=${this.onChangeRecentThresholdFilter.bind(this)}
+					.options=${[
+						{ value: 'OneDay', label: '1 day' },
+						{ value: 'OneWeek', label: '1 week' },
+						{ value: 'OneMonth', label: '1 month' },
+					] satisfies {
+						value: OverviewRecentThreshold;
+						label: string;
+					}[]}
+					.disabled=${isFetching}
+					.value=${this._overviewState.filter.recent?.threshold}
+				></gl-branch-threshold-filter>
+			</gl-branch-section>
 			${when(
-				repository.branches.recent.length > 0,
+				this._overviewState.filter.stale?.show === true,
 				() => html`
 					<gl-branch-section
-						label="Recent"
-						.isFetching=${isFetching}
-						.repo=${repository.path}
-						.branches=${repository.branches.recent}
-					>
-						<gl-branch-threshold-filter
-							slot="heading-actions"
-							@gl-change=${this.onChangeRecentThresholdFilter.bind(this)}
-							.options=${[
-								{ value: 'OneDay', label: '1 day' },
-								{ value: 'OneWeek', label: '1 week' },
-								{ value: 'OneMonth', label: '1 month' },
-							] satisfies {
-								value: OverviewRecentThreshold;
-								label: string;
-							}[]}
-							.disabled=${isFetching}
-							.value=${this._overviewState.filter.recent?.threshold}
-						></gl-branch-threshold-filter>
-					</gl-branch-section>
-				`,
-			)}
-			${when(
-				repository.branches.stale.length > 0,
-				() => html`
-					<gl-branch-section
-						label="Stale (${repository.branches.stale.length})"
+						label="stale"
 						.repo=${repository.path}
 						.branches=${repository.branches.stale}
 					></gl-branch-section>