diff --git a/src/sql/media/icons/common-icons.css b/src/sql/media/icons/common-icons.css
index 808ec64099..ca4a85d028 100644
--- a/src/sql/media/icons/common-icons.css
+++ b/src/sql/media/icons/common-icons.css
@@ -99,7 +99,7 @@
 .vs .icon.success,
 .vs-dark .icon.success,
 .hc-black .icon.success {
-	content: url("status_success.svg");
+	background-image: url("status_success.svg");
 }
 
 .vs .icon.canceled,
@@ -300,4 +300,4 @@
 .large {
 	width: 32px;
 	height: 32px;
-}
\ No newline at end of file
+}
diff --git a/src/sql/workbench/parts/tasks/browser/media/tasksPanel.css b/src/sql/workbench/parts/tasks/browser/media/tasksPanel.css
index 66f47dfea2..c37ea8b673 100644
--- a/src/sql/workbench/parts/tasks/browser/media/tasksPanel.css
+++ b/src/sql/workbench/parts/tasks/browser/media/tasksPanel.css
@@ -8,39 +8,41 @@
 }
 
 .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group {
-	padding: 5px;
-	overflow: hidden;
+	line-height: 22px;
+	display: flex;
 }
 
 /* task label and description */
-.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-details > .label {
+.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .label {
 	text-overflow: ellipsis;
 	overflow: hidden;
-	font-weight: 700;
+	font-weight: bold;
 }
 
 /* style for server name | database name */
-.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-details > .description {
+.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .description {
 	text-overflow: ellipsis;
 	overflow: hidden;
-	padding-left: 25px
+	padding-left: 12px
 }
 
 /* style for timing */
-.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-details > .time {
-	padding-left: 25px;
+.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .time {
+	padding-left: 12px;
 	opacity: .6;
-	font-size: 80%;
 	text-overflow: ellipsis;
-	overflow: hidden;
+	font-style: italic
 }
 
 /* task icon status */
 .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon {
-	float: left;
-	height: 16px;
-	width: 16px;
-	padding-right: 10px;
+	background-size: 16px;
+	background-position: left center;
+	background-repeat: no-repeat;
+	padding-right: 6px;
+	width: 22px;
+	height: 22px;
+	display: inline-block;
 }
 
 .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .task-group > .task-icon.not-started {
diff --git a/src/sql/workbench/parts/tasks/browser/tasksRenderer.ts b/src/sql/workbench/parts/tasks/browser/tasksRenderer.ts
index c1a55d2e2f..c387e9d268 100644
--- a/src/sql/workbench/parts/tasks/browser/tasksRenderer.ts
+++ b/src/sql/workbench/parts/tasks/browser/tasksRenderer.ts
@@ -25,8 +25,7 @@ export interface ITaskHistoryTemplateData {
  */
 export class TaskHistoryRenderer implements IRenderer {
 
-	public static readonly TASKOBJECT_HEIGHT = 65;
-	private static readonly ICON_CLASS = 'task-icon sql icon';
+	public static readonly TASKOBJECT_HEIGHT = 22;
 	private static readonly TASKOBJECT_TEMPLATE_ID = 'carbonTask';
 	private static readonly FAIL_CLASS = 'error';
 	private static readonly SUCCESS_CLASS = 'success';
@@ -54,48 +53,43 @@ export class TaskHistoryRenderer implements IRenderer {
 	public renderTemplate(tree: ITree, templateId: string, container: HTMLElement): any {
 		const taskTemplate: ITaskHistoryTemplateData = Object.create(null);
 		taskTemplate.root = dom.append(container, $('.task-group'));
-		taskTemplate.icon = dom.append(taskTemplate.root, $('img.task-icon'));
-		let labelContainer = dom.append(taskTemplate.root, $('div.task-details'));
-		taskTemplate.label = dom.append(labelContainer, $('div.label'));
-		taskTemplate.description = dom.append(labelContainer, $('div.description'));
-		taskTemplate.time = dom.append(labelContainer, $('div.time'));
+		taskTemplate.icon = dom.append(taskTemplate.root, $('.icon.task-icon'));
+		taskTemplate.label = dom.append(taskTemplate.root, $('.label'));
+		taskTemplate.description = dom.append(taskTemplate.root, $('.description'));
+		taskTemplate.time = dom.append(taskTemplate.root, $('.time'));
 		return taskTemplate;
 	}
 
 	/**
 	 * Render a element, given an object bag returned by the template
 	 */
-	public renderElement(tree: ITree, element: any, templateId: string, templateData: any): void {
-		this.renderTask(tree, element, templateData);
-	}
-
-	private renderTask(tree: ITree, taskNode: TaskNode, templateData: ITaskHistoryTemplateData): void {
+	public renderElement(tree: ITree, element: TaskNode, templateId: string, templateData: ITaskHistoryTemplateData): void {
 		let taskStatus;
-		if (taskNode) {
-			templateData.icon.className = TaskHistoryRenderer.ICON_CLASS;
-			switch (taskNode.status) {
+		if (element) {
+			templateData.icon.className = 'icon task-icon';
+			switch (element.status) {
 				case TaskStatus.Succeeded:
-					templateData.icon.classList.add(TaskHistoryRenderer.SUCCESS_CLASS);
+					dom.addClass(templateData.icon, TaskHistoryRenderer.SUCCESS_CLASS);
 					taskStatus = localize('succeeded', "succeeded");
 					break;
 				case TaskStatus.Failed:
-					templateData.icon.classList.add(TaskHistoryRenderer.FAIL_CLASS);
+					dom.addClass(templateData.icon, TaskHistoryRenderer.FAIL_CLASS);
 					taskStatus = localize('failed', "failed");
 					break;
 				case TaskStatus.InProgress:
-					templateData.icon.classList.add(TaskHistoryRenderer.INPROGRESS_CLASS);
+					dom.addClass(templateData.icon, TaskHistoryRenderer.INPROGRESS_CLASS);
 					taskStatus = localize('inProgress', "in progress");
 					break;
 				case TaskStatus.NotStarted:
-					templateData.icon.classList.add(TaskHistoryRenderer.NOTSTARTED_CLASS);
+					dom.addClass(templateData.icon, TaskHistoryRenderer.NOTSTARTED_CLASS);
 					taskStatus = localize('notStarted', "not started");
 					break;
 				case TaskStatus.Canceled:
-					templateData.icon.classList.add(TaskHistoryRenderer.CANCELED_CLASS);
+					dom.addClass(templateData.icon, TaskHistoryRenderer.CANCELED_CLASS);
 					taskStatus = localize('canceled', "canceled");
 					break;
 				case TaskStatus.Canceling:
-					templateData.icon.classList.add(TaskHistoryRenderer.INPROGRESS_CLASS);
+					dom.addClass(templateData.icon, TaskHistoryRenderer.INPROGRESS_CLASS);
 					taskStatus = localize('canceling', "canceling");
 					break;
 			}
@@ -103,21 +97,21 @@ export class TaskHistoryRenderer implements IRenderer {
 			templateData.icon.title = taskStatus;
 
 			// Determine the task title and set hover text equal to that
-			templateData.label.textContent = taskNode.taskName + ' ' + taskStatus;
+			templateData.label.textContent = element.taskName + ' ' + taskStatus;
 			templateData.label.title = templateData.label.textContent;
 
 			// Determine the target name and set hover text equal to that
-			let description = taskNode.serverName;
-			if (taskNode.databaseName) {
-				description += ' | ' + taskNode.databaseName;
+			let description = element.serverName;
+			if (element.databaseName) {
+				description += ' | ' + element.databaseName;
 			}
 			templateData.description.textContent = description;
 			templateData.description.title = templateData.description.textContent;
 
-			this.timer(taskNode, templateData);
+			this.timer(element, templateData);
 			let self = this;
 			setInterval(function () {
-				self.timer(taskNode, templateData);
+				self.timer(element, templateData);
 			}, 1000);
 		}
 	}