diff --git a/src/pages/Snapshots.jsx b/src/pages/Snapshots.jsx
index de4de36..ffabeaa 100644
--- a/src/pages/Snapshots.jsx
+++ b/src/pages/Snapshots.jsx
@@ -140,7 +140,7 @@ export class Snapshots extends Component {
 
             case "PENDING":
                 return <>
-                    <Spinner data-testid="snapshot-pending" animation="border" variant="secondary" size="sm" title="Snapshot will after the previous snapshot completes" />
+                    <Spinner data-testid="snapshot-pending" animation="border" variant="secondary" size="sm" title="Snapshot will start after the previous snapshot completes" />
                     &nbsp;Pending
                 </>;
 
diff --git a/src/utils/uiutil.jsx b/src/utils/uiutil.jsx
index 09562c1..944b480 100644
--- a/src/utils/uiutil.jsx
+++ b/src/utils/uiutil.jsx
@@ -1,4 +1,4 @@
-import { faBan, faCheck, faChevronLeft, faCopy, faExclamationCircle, faExclamationTriangle, faFolderOpen, faTerminal, faWindowClose } from '@fortawesome/free-solid-svg-icons';
+import { faBan, faCheck, faChevronLeft, faCopy, faExclamationCircle, faExclamationTriangle, faFolderOpen, faRectangleXmark, faTerminal} from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import axios from 'axios';
 import React, { useState } from 'react';
@@ -275,7 +275,9 @@ export function taskStatusSymbol(task) {
             return <>
                 <Spinner animation="border" variant="primary" size="sm" /> Running for {dur}
                 &nbsp;
-                <FontAwesomeIcon size="sm" color="red" icon={faWindowClose} title="Cancel task" onClick={() => cancelTask(task.id)} />
+                <button className="btn btn-link" type="button" onClick={() => cancelTask(task.id)}>
+                    <FontAwesomeIcon color="red" title="Cancel task" size='sm' icon={faRectangleXmark} />
+                </button>
             </>;
 
         case "SUCCESS":