diff --git a/extensions/vscode/src/api/resources/ContentRecords.ts b/extensions/vscode/src/api/resources/ContentRecords.ts
index 0befd6e27..09e2ab536 100644
--- a/extensions/vscode/src/api/resources/ContentRecords.ts
+++ b/extensions/vscode/src/api/resources/ContentRecords.ts
@@ -152,8 +152,9 @@ export class ContentRecords {
   // 500 - internal server error
   cancelDeployment(deploymentName: string, dir: string, localId: string) {
     const encodedName = encodeURIComponent(deploymentName);
+    const encodedLocalId = encodeURIComponent(localId);
     return this.client.post<ContentRecord>(
-      `deployments/${encodedName}/cancel/${localId}`,
+      `deployments/${encodedName}/cancel/${encodedLocalId}`,
       {},
       {
         params: {
diff --git a/extensions/vscode/src/views/deployProgress.ts b/extensions/vscode/src/views/deployProgress.ts
index 0625fbcaa..24ce89645 100644
--- a/extensions/vscode/src/views/deployProgress.ts
+++ b/extensions/vscode/src/views/deployProgress.ts
@@ -81,9 +81,7 @@ export function deployProject(
             "deployProject, token.onCancellationRequested",
             error,
           );
-          window.showInformationMessage(
-            `Unable to abort deployment: ${summary}`,
-          );
+          window.showErrorMessage(`Unable to abort deployment: ${summary}`);
         }
         resolveCB();
       });
diff --git a/extensions/vscode/webviews/homeView/src/components/EvenEasierDeploy.vue b/extensions/vscode/webviews/homeView/src/components/EvenEasierDeploy.vue
index 4f58ac02b..0a3bbaee9 100644
--- a/extensions/vscode/webviews/homeView/src/components/EvenEasierDeploy.vue
+++ b/extensions/vscode/webviews/homeView/src/components/EvenEasierDeploy.vue
@@ -163,47 +163,45 @@
             :context-menu="contextMenuVSCodeContext"
           />
         </div>
-        <div v-if="isPreContentRecordWithoutID">
-          Is this already deployed to a Connect server? You can
-          <a class="webview-link" role="button" @click="onAssociateDeployment"
-            >update that previous deployment</a
-          >.
-        </div>
-        <div v-if="isPreContentRecordWithID">
-          <a class="webview-link" role="button" @click="viewContent"
-            >This deployment</a
-          >
-          will be updated when deployed.
-        </div>
-        <div
-          v-if="
-            !isPreContentRecord(home.selectedContentRecord) &&
-            !isAbortedContentRecord
-          "
-          class="last-deployment-time"
-        >
-          {{ formatDateString(home.selectedContentRecord.deployedAt) }}
-        </div>
-        <div v-if="isAbortedContentRecord" class="last-deployment-time">
+        <div v-if="isAbortedContentRecord" class="date-time">
           {{ formatDateString(home.selectedContentRecord.abortedAt) }}
         </div>
-        <div
-          v-if="home.selectedContentRecord.deploymentError"
-          class="last-deployment-details last-deployment-error"
-        >
-          <span class="codicon codicon-alert"></span>
-          <TextStringWithAnchor
-            :message="home.selectedContentRecord?.deploymentError?.msg"
-            :splitOptions="ErrorMessageSplitOptions"
-            class="error-message"
-            @click="onErrorMessageAnchorClick"
-          />
+        <div v-else>
+          <div v-if="isPreContentRecordWithoutID">
+            Is this already deployed to a Connect server? You can
+            <a class="webview-link" role="button" @click="onAssociateDeployment"
+              >update that previous deployment</a
+            >.
+          </div>
+          <div v-if="isPreContentRecordWithID">
+            <a class="webview-link" role="button" @click="viewContent"
+              >This deployment</a
+            >
+            will be updated when deployed.
+          </div>
+          <div
+            v-if="!isPreContentRecord(home.selectedContentRecord)"
+            class="date-time"
+          >
+            {{ formatDateString(home.selectedContentRecord.deployedAt) }}
+          </div>
+          <div
+            v-if="home.selectedContentRecord.deploymentError"
+            class="last-deployment-details last-deployment-error"
+          >
+            <div class="alert-border border-warning text-warning">
+              <span class="codicon codicon-alert" />
+            </div>
+            <TextStringWithAnchor
+              :message="home.selectedContentRecord?.deploymentError?.msg"
+              :splitOptions="ErrorMessageSplitOptions"
+              class="error-message text-description"
+              @click="onErrorMessageAnchorClick"
+            />
+          </div>
         </div>
         <div
-          v-if="
-            !isPreContentRecord(home.selectedContentRecord) &&
-            !isAbortedContentRecord
-          "
+          v-if="!isPreContentRecord(home.selectedContentRecord)"
           class="last-deployment-details"
         >
           <vscode-button
@@ -414,16 +412,14 @@ const lastStatusDescription = computed(() => {
 const isPreContentRecordWithID = computed(() => {
   return (
     isPreContentRecord(home.selectedContentRecord) &&
-    Boolean(home.selectedContentRecord.id) &&
-    !isAbortedContentRecord.value
+    Boolean(home.selectedContentRecord.id)
   );
 });
 
 const isPreContentRecordWithoutID = computed(() => {
   return (
     isPreContentRecord(home.selectedContentRecord) &&
-    !isPreContentRecordWithID.value &&
-    !isAbortedContentRecord.value
+    !isPreContentRecordWithID.value
   );
 });
 
@@ -616,11 +612,7 @@ const viewContent = () => {
   margin-bottom: 5px;
 }
 
-.last-deployment-time {
-  margin-bottom: 20px;
-}
-
-.aborted-time {
+.date-time {
   margin-bottom: 20px;
 }
 
@@ -629,11 +621,17 @@ const viewContent = () => {
 }
 
 .last-deployment-error {
-  border: solid 2px;
-  border-color: gray;
-  padding: 5px;
   display: flex;
-  align-items: center;
+  align-items: stretch;
+
+  .alert-border {
+    display: flex;
+    align-items: center;
+    border-right-width: 1px;
+    border-right-style: solid;
+    padding-right: 5px;
+    margin-right: 7px;
+  }
 }
 
 .error-icon {
@@ -643,7 +641,6 @@ const viewContent = () => {
 .error-message {
   min-width: 0;
   word-wrap: break-word;
-  margin-left: 5px;
 }
 
 .progress-container {
diff --git a/extensions/vscode/webviews/homeView/src/style.css b/extensions/vscode/webviews/homeView/src/style.css
index 41c09be43..7dd5579ec 100644
--- a/extensions/vscode/webviews/homeView/src/style.css
+++ b/extensions/vscode/webviews/homeView/src/style.css
@@ -30,6 +30,10 @@ body {
   color: var(--vscode-foreground);
 }
 
+.text-description {
+  color: var(--vscode-descriptionForeground);
+}
+
 .text-placeholder {
   color: var(--vscode-input-placeholderForeground);
 }
@@ -50,10 +54,22 @@ body {
   color: var(--vscode-sideBarSectionHeader-foreground);
 }
 
+.text-warning {
+  color: var(--vscode-list-warningForeground);
+}
+
+.border-warning {
+  border-color: var(--vscode-list-warningForeground);
+}
+
 .text-error {
   color: var(--vscode-list-errorForeground);
 }
 
+.border-error {
+  border-color: var(--vscode-list-errorForeground);
+}
+
 .text-git-added {
   color: var(--vscode-gitDecoration-addedResourceForeground);
 }