diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionStatusTab.module.scss b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionStatusTab.module.scss
index aa7c2f7a8086c..48419e552f164 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionStatusTab.module.scss
+++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionStatusTab.module.scss
@@ -12,7 +12,6 @@
   display: flex;
 
   .resetButton,
-  .cancelButton,
   .syncButton {
     display: flex;
     align-items: center;
@@ -23,16 +22,6 @@
     margin-right: variables.$spacing-md;
   }
 
-  .cancelButton {
-    border-color: transparent;
-    background-color: colors.$red;
-
-    .iconXmark {
-      margin-right: 12px;
-      font-size: 18px;
-    }
-  }
-
   .syncButton {
     .iconRotate {
       display: flex;
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionStatusTab.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionStatusTab.tsx
index 4b42755a4f336..2a8c65b41e940 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionStatusTab.tsx
+++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionStatusTab.tsx
@@ -147,10 +147,10 @@ export const ConnectionStatusTab: React.FC = () => {
 
   const cancelJobBtn = (
     <Button
-      className={styles.cancelButton}
+      variant="danger"
       disabled={!activeJob?.id || activeJob.isCanceling}
       onClick={onCancelJob}
-      icon={<FontAwesomeIcon className={styles.iconXmark} icon={faXmark} />}
+      icon={<FontAwesomeIcon icon={faXmark} />}
     >
       {label}
     </Button>