diff --git a/src/vs/workbench/contrib/debug/browser/breakpointEditorContribution.ts b/src/vs/workbench/contrib/debug/browser/breakpointEditorContribution.ts
index 23b5f5d9b1d025d14c0213098dabb486d311a3c0..f5e1e7b7a1b108112a773af709a721c54cab1f33 100644
--- a/src/vs/workbench/contrib/debug/browser/breakpointEditorContribution.ts
+++ b/src/vs/workbench/contrib/debug/browser/breakpointEditorContribution.ts
@@ -247,11 +247,17 @@ class BreakpointEditorContribution implements IBreakpointEditorContribution {
 			this.closeBreakpointWidget();
 			await this.setDecorations();
 		}));
-		this.toDispose.push(this.debugService.getModel().onDidChangeBreakpoints(async () => {
+		this.toDispose.push(this.debugService.getModel().onDidChangeBreakpoints(() => {
 			if (!this.ignoreBreakpointsChangeEvent && !this.setDecorationsScheduler.isScheduled()) {
 				this.setDecorationsScheduler.schedule();
 			}
 		}));
+		this.toDispose.push(this.debugService.onDidChangeState(() => {
+			// We need to update breakpoint decorations when state changes since the top stack frame and breakpoint decoration might change
+			if (!this.setDecorationsScheduler.isScheduled()) {
+				this.setDecorationsScheduler.schedule();
+			}
+		}));
 		this.toDispose.push(this.editor.onDidChangeModelDecorations(() => this.onModelDecorationsChanged()));
 		this.toDispose.push(this.configurationService.onDidChangeConfiguration(async (e) => {
 			if (e.affectsConfiguration('debug.showBreakpointsInOverviewRuler')) {
diff --git a/src/vs/workbench/contrib/debug/browser/breakpointsView.ts b/src/vs/workbench/contrib/debug/browser/breakpointsView.ts
index 71f282b932f9e38916ff77e4a129fe65da4dce95..295cbf41b0f6ef6a2608760a521e4355d83964d6 100644
--- a/src/vs/workbench/contrib/debug/browser/breakpointsView.ts
+++ b/src/vs/workbench/contrib/debug/browser/breakpointsView.ts
@@ -707,6 +707,18 @@ export function getBreakpointMessageAndClassName(debugService: IDebugService, br
 		};
 	}
 
+	const focusedThread = debugService.getViewModel().focusedThread;
+	if (focusedThread) {
+		const callStack = focusedThread ? focusedThread.getCallStack() : undefined;
+		const topStackFrame = callStack ? callStack[0] : undefined;
+		if (topStackFrame && topStackFrame.source.uri.toString() === breakpoint.uri.toString() && topStackFrame.range.startLineNumber === breakpoint.lineNumber && topStackFrame.range.startColumn === breakpoint.column) {
+			return {
+				className: 'debug-breakpoint-and-top-stack-frame',
+				message: breakpoint.message || nls.localize('breakpoint', "Breakpoint")
+			};
+		}
+	}
+
 	return {
 		className: 'debug-breakpoint',
 		message: breakpoint.message || nls.localize('breakpoint', "Breakpoint")
diff --git a/src/vs/workbench/contrib/debug/browser/media/debug.contribution.css b/src/vs/workbench/contrib/debug/browser/media/debug.contribution.css
index 019480191f2289a80fcdb0fedd21b93e7adfbacc..bdee92f212891879aaa6e6976250a443b70af607 100644
--- a/src/vs/workbench/contrib/debug/browser/media/debug.contribution.css
+++ b/src/vs/workbench/contrib/debug/browser/media/debug.contribution.css
@@ -54,6 +54,14 @@
 	margin-left: 2px;
 }
 
+/* Do not show call stack decoration when we plan to show breakpoint and top stack frame in one decoration */
+.monaco-editor .debug-breakpoint-placeholder ~ .debug-top-stack-frame-column::before {
+	width: 0em;
+	content: "";
+	margin-right: 0px;
+	margin-left: 0px;
+}
+
 .monaco-editor .debug-top-stack-frame-column::before {
 	height: 1.3em;
 }
@@ -111,10 +119,7 @@
 	background: url('breakpoint-unsupported.svg') center center no-repeat;
 }
 
-.monaco-editor .debug-top-stack-frame.debug-breakpoint,
-.monaco-editor .debug-top-stack-frame.debug-breakpoint-conditional,
-.monaco-editor .debug-top-stack-frame.debug-breakpoint-log,
-.monaco-editor .inline-breakpoint-widget.debug-top-stack-frame-column {
+.monaco-editor .inline-breakpoint-widget.debug-breakpoint-and-top-stack-frame {
 	background: url('current-and-breakpoint.svg') center center no-repeat;
 }