diff --git a/src/sql/workbench/contrib/dataExplorer/browser/media/connectionViewletPanel.css b/src/sql/workbench/contrib/dataExplorer/browser/media/connectionViewletPanel.css
index ad0434905a..f57a1cdf56 100644
--- a/src/sql/workbench/contrib/dataExplorer/browser/media/connectionViewletPanel.css
+++ b/src/sql/workbench/contrib/dataExplorer/browser/media/connectionViewletPanel.css
@@ -137,15 +137,31 @@
 .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .icon.server-page,
 .hc-light .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .icon.server-page,
 .monaco-list .monaco-list-rows > .monaco-list-row .connection-tile > .icon.server-page,
-.hc-light .monaco-list .monaco-list-rows > .monaco-list-row .connection-tile > .icon.server-page {
-	background: url('default_server.svg') center center no-repeat;
+.hc-light .monaco-list .monaco-list-rows > .monaco-list-row .connection-tile > .icon.server-page,
+.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-profile-container > .icon.server-page,
+.hc-light .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-profile-container > .icon.server-page,
+.monaco-list .monaco-list-rows > .monaco-list-row .connection-profile-container > .icon.server-page,
+.hc-light .monaco-list .monaco-list-rows > .monaco-list-row .connection-profile-container > .icon.server-page {
+	background-image: url('default_server.svg');
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-size: 16px 16px;
+}
+
+.monaco-list:focus .monaco-list-rows > .monaco-list-row.selected .connection-profile-container > .icon.server-page,
+.hc-light .monaco-list:focus .monaco-list-rows > .monaco-list-row.selected .connection-profile-container > .icon.server-page {
+	background-image: url('default_server_inverse.svg');
 }
 
 .vs-dark .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .icon.server-page,
 .hc-black .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .icon.server-page,
 .vs-dark .monaco-list .monaco-list-rows > .monaco-list-row .connection-tile > .icon.server-page,
-.hc-black .monaco-list .monaco-list-rows > .monaco-list-row .connection-tile > .icon.server-page {
-	background: url('default_server_inverse.svg') center center no-repeat;
+.hc-black .monaco-list .monaco-list-rows > .monaco-list-row .connection-tile > .icon.server-page,
+.vs-dark .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-profile-container > .icon.server-page,
+.hc-black .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-profile-container > .icon.server-page,
+.vs-dark .monaco-list .monaco-list-rows > .monaco-list-row .connection-profile-container > .icon.server-page,
+.hc-black .monaco-list .monaco-list-rows > .monaco-list-row .connection-profile-container > .icon.server-page {
+	background-image: url('default_server_inverse.svg');
 }
 
 /* loading for OE node */
@@ -170,13 +186,15 @@
 }
 
 /* Connected badge */
-.monaco-list .connection-tile .connection-status-badge.connected {
+.monaco-list .connection-tile .connection-status-badge.connected,
+.monaco-list-row .connection-profile .connection-profile-container .icon .connection-status-badge.connected {
 	border: 2.4px solid rgba(59, 180, 74, 100%);
 	background: rgba(59, 180, 74, 100%);
 }
 
 /* Disconnected badge */
-.monaco-list .connection-tile .connection-status-badge.disconnected {
+.monaco-list .connection-tile .connection-status-badge.disconnected,
+.monaco-list-row .connection-profile .connection-profile-container .icon .connection-status-badge.disconnected {
 	border: 2.4px solid rgba(208, 46, 0, 100%);
 	background: rgba(255, 255, 255, 80%);
 }
@@ -185,3 +203,67 @@
 .server-explorer-viewlet .button-section {
 	padding: 20px;
 }
+
+/*async tree styles */
+.monaco-list-row .async-server-group .async-server-group {
+	display: flex;
+	align-items: center;
+}
+
+.monaco-list-row .async-server-group .async-server-group .async-server-group-container {
+	flex: 1;
+	margin-right: 5px;
+	display: flex;
+	height: 100px;
+	align-items: center;
+	justify-content: center;
+	border-radius: 5px;
+}
+
+.monaco-list-row .async-server-group .async-server-group .async-server-group-container .name {
+	padding-left: 10px;
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	height: 25px;
+	line-height: 25px;
+}
+
+.monaco-list-row .object-element-container {
+	display: flex;
+}
+
+.monaco-list-row .object-element-container .label {
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.monaco-list-row .object-element-container .icon {
+	flex: 0 30px;
+}
+
+.monaco-list-row .connection-profile .connection-profile-container {
+	display: flex;
+}
+
+.monaco-list-row .connection-profile .connection-profile-container .label {
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.monaco-list-row .connection-profile .connection-profile-container .icon {
+	flex: 0 30px;
+	position: relative;
+}
+
+
+.monaco-list-row .connection-profile .connection-profile-container .icon .connection-status-badge {
+	position: absolute;
+	bottom: 0;
+	right: 3px;
+	width: 4px;
+	height: 4px;
+	border-radius: 50%;
+}
diff --git a/src/sql/workbench/services/objectExplorer/browser/asyncServerTreeRenderer.ts b/src/sql/workbench/services/objectExplorer/browser/asyncServerTreeRenderer.ts
index 2aa1000db6..5d0330b721 100644
--- a/src/sql/workbench/services/objectExplorer/browser/asyncServerTreeRenderer.ts
+++ b/src/sql/workbench/services/objectExplorer/browser/asyncServerTreeRenderer.ts
@@ -39,9 +39,9 @@ class ConnectionProfileGroupTemplate extends Disposable {
 		private _option: ConnectionProfileGroupDisplayOptions
 	) {
 		super();
-		container.parentElement!.classList.add('server-group');
-		container.classList.add('server-group');
-		this._root = dom.append(container, dom.$('.server-group'));
+		container.parentElement!.classList.add('async-server-group');
+		container.classList.add('async-server-group');
+		this._root = dom.append(container, dom.$('.async-server-group-container'));
 		this._nameContainer = dom.append(this._root, dom.$('span.name'));
 	}
 
@@ -50,10 +50,10 @@ class ConnectionProfileGroupTemplate extends Disposable {
 		if (this._option.showColor && rowElement) {
 			rowElement.style.color = element.textColor;
 			if (element.color) {
-				rowElement.style.background = element.color;
+				this._nameContainer.style.background = element.color;
 			} else {
 				// If the group doesn't contain specific color, assign the default color
-				rowElement.style.background = DefaultServerGroupColor;
+				this._nameContainer.style.background = DefaultServerGroupColor;
 			}
 		}
 		if (element.description && (element.description !== '')) {
@@ -100,7 +100,7 @@ class ConnectionProfileTemplate extends Disposable {
 	) {
 		super();
 		container.parentElement!.classList.add('connection-profile');
-		this._root = dom.append(container, dom.$('.connection-tile'));
+		this._root = dom.append(container, dom.$('.connection-profile-container'));
 		this._icon = dom.append(this._root, dom.$('div.icon'));
 		this._connectionStatusBadge = dom.append(this._icon, dom.$('div.connection-status-badge'));
 		this._label = dom.append(this._root, dom.$('div.label'));
@@ -153,7 +153,7 @@ class TreeNodeTemplate extends Disposable {
 		container: HTMLElement
 	) {
 		super();
-		this._root = dom.append(container, dom.$('.object-element-group'));
+		this._root = dom.append(container, dom.$('.object-element-container'));
 		this._icon = dom.append(this._root, dom.$('div.object-icon'));
 		this._label = dom.append(this._root, dom.$('div.label'));
 	}