diff --git a/src/sql/workbench/contrib/queryplan2/browser/constants.ts b/src/sql/workbench/contrib/queryplan2/browser/constants.ts
index e3a2ce7fa4..3272dbffd8 100644
--- a/src/sql/workbench/contrib/queryplan2/browser/constants.ts
+++ b/src/sql/workbench/contrib/queryplan2/browser/constants.ts
@@ -262,3 +262,4 @@ export const zoomInIconClassNames = [parentContainer, 'zoom-in-icon'].join(' ');
 export const zoomOutIconClassNames = [parentContainer, 'zoom-out-icon'].join(' ');
 export const customZoomIconClassNames = [parentContainer, 'custom-zoom-icon'].join(' ');
 export const zoomToFitIconClassNames = [parentContainer, 'zoom-to-fit-icon'].join(' ');
+export const zoomIconClassNames = [parentContainer, 'zoom-icon'].join(' ');
diff --git a/src/sql/workbench/contrib/queryplan2/browser/media/queryPlan2.css b/src/sql/workbench/contrib/queryplan2/browser/media/queryPlan2.css
index 2be1656020..d7a54754b2 100644
--- a/src/sql/workbench/contrib/queryplan2/browser/media/queryPlan2.css
+++ b/src/sql/workbench/contrib/queryplan2/browser/media/queryPlan2.css
@@ -74,7 +74,7 @@ However we always want it to be the width of the container it is resizing.
 	flex-direction: row;
 	padding: 5px;
 	height: auto;
-	width: 180px;
+	width: 240px;
 }
 
 /* query plan header that contains the relative query cost, query statement and recommendations */
@@ -292,4 +292,10 @@ However we always want it to be the width of the container it is resizing.
 	background-repeat: no-repeat;
 }
 
+.qps-container .zoom-icon {
+	background-image: url(../images/actionIcons/zoom.svg);
+	background-size: 16px 16px;
+	background-position: center;
+	background-repeat: no-repeat;
+}
 
diff --git a/src/sql/workbench/contrib/queryplan2/browser/widgets/customZoomWidget.ts b/src/sql/workbench/contrib/queryplan2/browser/widgets/customZoomWidget.ts
index a9f7674709..70367fa9c1 100644
--- a/src/sql/workbench/contrib/queryplan2/browser/widgets/customZoomWidget.ts
+++ b/src/sql/workbench/contrib/queryplan2/browser/widgets/customZoomWidget.ts
@@ -15,6 +15,8 @@ import { localize } from 'vs/nls';
 import { IContextViewService } from 'vs/platform/contextview/browser/contextView';
 import { INotificationService } from 'vs/platform/notification/common/notification';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { zoomIconClassNames } from 'sql/workbench/contrib/queryplan2/browser/constants';
+import { Button } from 'sql/base/browser/ui/button/button';
 
 export class CustomZoomWidget extends QueryPlanWidgetBase {
 	private _actionBar: ActionBar;
@@ -52,10 +54,19 @@ export class CustomZoomWidget extends QueryPlanWidgetBase {
 			}
 		};
 
+		const applyButton = new Button(this.container, {
+			title: localize('customZoomApplyButtonTitle', "Zoom (Enter)")
+		});
+		applyButton.setWidth('60px');
+		applyButton.label = localize('customZoomApplyButton', "Apply");
+
+		applyButton.onDidClick(async e => {
+			await new CustomZoomAction().run(self);
+		});
+
 		// Adding action bar
 		this._actionBar = new ActionBar(this.container);
 		this._actionBar.context = this;
-		this._actionBar.pushAction(new CustomZoomAction(), { label: false, icon: true });
 		this._actionBar.pushAction(new CancelZoom(), { label: false, icon: true });
 	}
 
@@ -70,7 +81,7 @@ export class CustomZoomAction extends Action {
 	public static LABEL = localize('zoomAction', "Zoom (Enter)");
 
 	constructor() {
-		super(CustomZoomAction.ID, CustomZoomAction.LABEL, Codicon.zoomOut.classNames);
+		super(CustomZoomAction.ID, CustomZoomAction.LABEL, zoomIconClassNames);
 	}
 
 	public override async run(context: CustomZoomWidget): Promise<void> {