diff --git a/src/sql/parts/modelComponents/button.css b/src/sql/parts/modelComponents/button.css
index 5e7752ad5a..9c60693aca 100644
--- a/src/sql/parts/modelComponents/button.css
+++ b/src/sql/parts/modelComponents/button.css
@@ -6,4 +6,5 @@
 modelview-button a.monaco-button.monaco-text-button.icon {
 	background-repeat: no-repeat;
 	background-position: 0% 50%;
+	background-size: contain;
 }
\ No newline at end of file
diff --git a/src/sql/parts/modelComponents/card.component.html b/src/sql/parts/modelComponents/card.component.html
index ec1ac8c7f0..a68e2af708 100644
--- a/src/sql/parts/modelComponents/card.component.html
+++ b/src/sql/parts/modelComponents/card.component.html
@@ -5,10 +5,10 @@
 
 		<ng-container *ngIf="isVerticalButton">
 			<div class="card-vertical-button">
-				<div *ngIf="iconPath" class="iconContainer"><div [class]="iconClass" [style.width]="iconWidth" [style.height]="iconHeight"></div>
-				<hr/>
-				<h4 class="card-label">{{label}}</h4>
+				<div *ngIf="iconPath" class="iconContainer">
+					<div [class]="iconClass" [style.maxWidth]="iconWidth" [style.maxHeight]="iconHeight"></div>
 				</div>
+				<h4 class="card-label">{{label}}</h4>
 			</div>
 		</ng-container>
 
diff --git a/src/sql/parts/modelComponents/card.css b/src/sql/parts/modelComponents/card.css
index b263c5ea54..790c714949 100644
--- a/src/sql/parts/modelComponents/card.css
+++ b/src/sql/parts/modelComponents/card.css
@@ -39,7 +39,9 @@
 
 .model-card .card-vertical-button {
 	position: relative;
-	display: inline-block;
+	display: flex;
+	flex-direction: column;
+	text-align: center;
 	height: auto;
 	width: auto;
 	padding: 5px 5px 5px 5px;
@@ -58,16 +60,24 @@
 }
 
 .model-card .iconContainer {
-	width: 100%;
-	height: 50px;
-	text-align: center;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	flex-grow: 1;
+	border-bottom-width: 1px;
+	border-bottom-style: solid;
 	padding: 10px 0px 10px 0px;
+	border-color: rgb(214, 214, 214);
 }
 
 .model-card .cardIcon {
 	display: inline-block;
-	width: 40px;
-	height: 40px;
+	flex-grow: 1;
+	width: 100%;
+	height: 100%;
+	max-width: 50px;
+	max-height: 50px;
 	background-position: center;
 	background-repeat: no-repeat;
 	background-size: contain;
diff --git a/src/sql/parts/modelComponents/componentWithIconBase.ts b/src/sql/parts/modelComponents/componentWithIconBase.ts
index 479f756add..9cd0949488 100644
--- a/src/sql/parts/modelComponents/componentWithIconBase.ts
+++ b/src/sql/parts/modelComponents/componentWithIconBase.ts
@@ -91,11 +91,11 @@ export abstract class ComponentWithIconBase extends ComponentBase {
 	}
 
 	public get iconHeight(): number | string {
-		return this.getPropertyOrDefault<sqlops.ComponentWithIcon, number | string>((props) => props.iconHeight, '40px');
+		return this.getPropertyOrDefault<sqlops.ComponentWithIcon, number | string>((props) => props.iconHeight, '50px');
 	}
 
 	public get iconWidth(): number | string {
-		return this.getPropertyOrDefault<sqlops.ComponentWithIcon, number | string>((props) => props.iconWidth, '40px');
+		return this.getPropertyOrDefault<sqlops.ComponentWithIcon, number | string>((props) => props.iconWidth, '50px');
 	}
 
 	ngOnDestroy(): void {