diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
index 7c61a578b69f..09dc65be647b 100644
--- a/airbyte-webapp/src/locales/en.json
+++ b/airbyte-webapp/src/locales/en.json
@@ -371,8 +371,8 @@
   "connection.linkedJobNotFound": "Job not found",
   "connection.returnToSyncHistory": "Return to Sync History",
 
-  "connection.schemaChange.breaking": "Breaking schema updates detected.",
-  "connection.schemaChange.nonBreaking": "Non-breaking schema updates detected.",
+  "connection.schemaChange.breaking": "Breaking schema updates detected",
+  "connection.schemaChange.nonBreaking": "Non-breaking schema updates detected",
   "connection.schemaChange.reviewAction": "Review changes",
 
   "form.frequency": "Replication frequency*",
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/EnabledControl.module.scss b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/EnabledControl.module.scss
index ac6d0e4a050c..7c881807207f 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/EnabledControl.module.scss
+++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/EnabledControl.module.scss
@@ -15,5 +15,8 @@
   color: colors.$grey-300;
   display: inline-block;
   text-align: left;
-  cursor: pointer;
+
+  &:not(.disabled) {
+    cursor: pointer;
+  }
 }
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/EnabledControl.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/EnabledControl.tsx
index 210ea47c71c5..73f2b03ae284 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/EnabledControl.tsx
+++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/EnabledControl.tsx
@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 import { useAsyncFn } from "react-use";
@@ -48,13 +49,18 @@ export const EnabledControl: React.FC<EnabledControlProps> = ({ disabled }) => {
     updateConnection,
   ]);
 
+  const isSwitchDisabled = disabled || connectionUpdating;
+
   return (
     <div className={styles.container} data-testid="enabledControl">
-      <label htmlFor="toggle-enabled-source" className={styles.label}>
+      <label
+        htmlFor="toggle-enabled-source"
+        className={classNames(styles.label, { [styles.disabled]: isSwitchDisabled })}
+      >
         <FormattedMessage id={connection.status === ConnectionStatus.active ? "tables.enabled" : "tables.disabled"} />
       </label>
       <Switch
-        disabled={disabled || connectionUpdating}
+        disabled={isSwitchDisabled}
         onChange={onChangeStatus}
         checked={connection.status === ConnectionStatus.active}
         loading={loading}
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/SchemaChangesDetected.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/SchemaChangesDetected.tsx
index 4c44279ec0e5..772ba675c845 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/SchemaChangesDetected.tsx
+++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/SchemaChangesDetected.tsx
@@ -48,7 +48,7 @@ export const SchemaChangesDetected: React.FC = () => {
       <Text size="lg">
         <FormattedMessage id={`connection.schemaChange.${hasBreakingSchemaChange ? "breaking" : "nonBreaking"}`} />
       </Text>
-      <Button onClick={onReviewActionButtonClick} isLoading={schemaRefreshing}>
+      <Button variant="dark" onClick={onReviewActionButtonClick} isLoading={schemaRefreshing}>
         <FormattedMessage id="connection.schemaChange.reviewAction" />
       </Button>
     </div>
diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/StatusMainInfo.module.scss b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/StatusMainInfo.module.scss
index 6d072a9776dc..5418431559b8 100644
--- a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/StatusMainInfo.module.scss
+++ b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/StatusMainInfo.module.scss
@@ -8,6 +8,14 @@
 
   &:hover {
     background-color: colors.$grey-50;
+
+    &.breaking {
+      background-color: colors.$red-100;
+    }
+
+    &.nonBreaking {
+      background-color: colors.$yellow-100;
+    }
   }
 }